From 424aa324bd866b7701b01d9593c8cd026bedd88c Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Fri, 17 May 2024 12:49:07 +0200
Subject: [PATCH] OZG-5698-OZG-5751 Add error styling to ods-attachment -
Delete ods-attachment-error - Fix tests and storybook
---
.../apps/demo/src/app/app.component.html | 18 ++++------
.../binary-file2/binary-file2.component.html | 2 +-
alfa-client/libs/design-system/src/index.ts | 1 -
.../attachment-error.component.spec.ts | 21 ------------
.../attachment-error.component.ts | 24 --------------
.../lib/attachment/attachment.component.ts | 33 ++++++++++++++-----
.../src/lib/attachment/attachment.stories.ts | 20 +++++++----
.../src/lib/button/button.stories.ts | 6 ++--
.../icons/file-icon/file-icon.component.ts | 1 -
.../lib/icons/file-icon/file-icon.stories.ts | 2 +-
...etail-bescheiden-form-error.component.html | 2 +-
...il-bescheiden-form-error.component.spec.ts | 4 +--
...-detail-bescheiden-form-error.component.ts | 1 -
...scheiden-result-attachments.component.html | 3 +-
...-bescheiden-result-dokument.component.html | 3 +-
.../src/lib/vorgang-detail.module.ts | 2 --
16 files changed, 55 insertions(+), 88 deletions(-)
delete mode 100644 alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.spec.ts
delete mode 100644 alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.ts
diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 25380dd9f3..6b8faecc40 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -17,28 +17,24 @@
<div class="w-96">
<ods-attachment-container>
<ods-attachment
- documentName="Mein_2Bescheid.pdf"
+ caption="Mein_2Bescheid.pdf"
description="234 kB"
fileType="pdf"
isLoading="true"
>
</ods-attachment>
- <ods-attachment documentName="Mein_Bescheid.xml" description="234 kB" fileType="xml">
+ <ods-attachment caption="Mein_Bescheid.xml" description="234 kB" fileType="xml">
</ods-attachment>
- <ods-attachment documentName="Mein_Bescheid.xml" description="234 kB" fileType="image">
+ <ods-attachment caption="Mein_Bescheid.xml" description="234 kB" fileType="image">
</ods-attachment>
- <ods-attachment documentName="Mein_Bescheid.doc" description="234 kB" fileType="doc">
+ <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="doc">
</ods-attachment>
- <ods-attachment documentName="Mein_Bescheid.doc" description="234 kB" fileType="doc">
+ <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="doc">
</ods-attachment>
- <ods-attachment
- documentName="Mein_Bescheid.doc"
- description="234 kB"
- fileType="exclamation"
- >
+ <ods-attachment caption="Mein_Bescheid.doc" description="234 kB" fileType="exclamation">
</ods-attachment>
<ods-attachment
- documentName="Katzenanmeldung_1231231_eingsdfsdsdfdsfdsfsdfang.pdf"
+ caption="Katzenanmeldung_1231231_eingsdfsdsdfdsfdsfsdfang.pdf"
description="234 kB"
fileType="pdf"
>
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
index a8a2636334..cd64683430 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
+++ b/alfa-client/libs/binary-file/src/lib/binary-file2-container/binary-file2/binary-file2.component.html
@@ -1,5 +1,5 @@
<ods-attachment
- [documentName]="file.name"
+ [caption]="file.name"
[description]="file.size | fileSizePlain"
[fileType]="getIconType(file.contentType)"
(click)="downloadFile()"
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index f111f0697b..a9985e3b05 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -1,5 +1,4 @@
export * from './lib/attachment-container/attachment-container.component';
-export * from './lib/attachment-error/attachment-error.component';
export * from './lib/attachment/attachment.component';
export * from './lib/bescheid-container/bescheid-container.component';
export * from './lib/bescheid-status-text/bescheid-status-text.component';
diff --git a/alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.spec.ts b/alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.spec.ts
deleted file mode 100644
index a155514b9b..0000000000
--- a/alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AttachmentErrorComponent } from './attachment-error.component';
-
-describe('AttachmentErrorComponent', () => {
- let component: AttachmentErrorComponent;
- let fixture: ComponentFixture<AttachmentErrorComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [AttachmentErrorComponent],
- }).compileComponents();
-
- fixture = TestBed.createComponent(AttachmentErrorComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.ts b/alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.ts
deleted file mode 100644
index 83cd48a099..0000000000
--- a/alfa-client/libs/design-system/src/lib/attachment-error/attachment-error.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { FileIconComponent } from '../icons/file-icon/file-icon.component';
-
-@Component({
- selector: 'ods-attachment-error',
- standalone: true,
- imports: [CommonModule, FileIconComponent],
- styles: [':host {@apply flex border-b border-black/25 last:border-b-0}'],
- template: `<div
- class="relative flex w-full items-start gap-3 border-b bg-background-100 px-3 py-2"
- >
- <div class="flex-shrink">
- <ods-file-icon fileType="exclamation" size="large" />
- </div>
- <div class="flex grow flex-col items-start break-all text-text">
- <p class="text-start text-sm text-error">Fehler beim Hochladen</p>
- <p class="text-xs text-ozggray-600" *ngFor="let error of errorList">{{ error }}</p>
- </div>
- </div>`,
-})
-export class AttachmentErrorComponent {
- @Input({ required: true }) errorList!: string[];
-}
diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
index b3578d4017..bb4e1614d7 100644
--- a/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
+++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.component.ts
@@ -10,24 +10,39 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
imports: [CommonModule, SpinnerIconComponent, FileIconComponent],
styles: [':host {@apply flex}'],
template: `<button
- class="border-b-grayborder relative flex w-full items-start gap-3 border-b bg-background-100 px-3 py-2 hover:bg-background-200"
+ class="relative flex w-full items-start gap-3 border-b border-b-grayborder bg-background-100 px-3 py-2 hover:bg-background-200"
>
<div class="flex-shrink">
- <ods-file-icon *ngIf="!isLoading" [fileType]="fileType" size="large" />
- <ods-spinner-icon *ngIf="isLoading" size="large" />
+ <ods-file-icon
+ *ngIf="fileType && !isLoading && !isError"
+ [fileType]="fileType"
+ size="large"
+ />
+ <ods-file-icon *ngIf="!isLoading && isError" fileType="exclamation" size="large" />
+ <ods-spinner-icon *ngIf="isLoading && !isError" size="large" />
</div>
- <div class="flex grow flex-col items-start break-all text-text">
- <p class="text-start text-sm">
- {{ documentName }}
+ <div class="flex grow flex-col items-start break-all text-start text-text">
+ <p class="text-sm" [ngClass]="isError && 'text-error'">
+ {{ caption }}
+ </p>
+ <p *ngIf="description && !isError" class="text-xs text-text/65">
+ {{ description }}
+ </p>
+ <p *ngFor="let error of errorList" class="text-xs text-text/40">
+ {{ error }}
</p>
- <p class="text-xs text-text/65">{{ description }}</p>
</div>
<ng-content select="[close]" *ngIf="!isLoading"></ng-content>
</button>`,
})
export class AttachmentComponent {
- @Input({ required: true }) documentName!: string;
- @Input({ required: true }) fileType!: string;
+ @Input({ required: true }) caption!: string;
+ @Input() fileType: string = '';
@Input() description = '';
@Input() isLoading: boolean = false;
+ @Input() errorList: string[] = [];
+
+ protected get isError() {
+ return this.errorList.length > 0;
+ }
}
diff --git a/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts b/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts
index 814e9ac5e9..7104e718bb 100644
--- a/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/attachment/attachment.stories.ts
@@ -14,14 +14,14 @@ type Story = StoryObj<AttachmentComponent>;
export const Default: Story = {
name: 'File with pdf icon',
args: {
- documentName: 'Katzenanmeldung_1231231_eingang.pdf',
+ caption: 'Katzenanmeldung_1231231_eingang.pdf',
description: '450 kB',
fileType: 'pdf',
},
argTypes: {
- documentName: {
+ caption: {
table: {
- type: { summary: 'Name of the document' },
+ type: { summary: 'Name of the document or title' },
},
},
description: {
@@ -35,18 +35,26 @@ export const Default: Story = {
export const Doc: Story = {
name: 'File with doc icon',
args: {
- documentName: 'Katzenanmeldung_1231231_eingang.doc',
+ caption: 'Katzenanmeldung_1231231_eingang.doc',
description: '573 kB',
fileType: 'doc',
},
};
export const Loading: Story = {
- name: 'File with doc icon',
+ name: 'File with loading icon',
args: {
- documentName: 'Katzenanmeldung_1231231_eingang.doc',
+ caption: 'Katzenanmeldung_1231231_eingang.doc',
description: '573 kB',
fileType: 'doc',
isLoading: true,
},
};
+
+export const Error: Story = {
+ name: 'Error message in file',
+ args: {
+ caption: 'Fehler beim Hochladen',
+ errorList: ['Erlaubte Dateiendungen: pdf, jpg, png, jpeg'],
+ },
+};
diff --git a/alfa-client/libs/design-system/src/lib/button/button.stories.ts b/alfa-client/libs/design-system/src/lib/button/button.stories.ts
index bb64d56b0a..9739685d34 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.stories.ts
@@ -20,9 +20,9 @@ export default meta;
type Story = StoryObj<ButtonComponent>;
export const Default: Story = {
- args: { text: 'Hello world!', isLoading: false, type: 'primary' },
+ args: { text: 'Hello world!', isLoading: false, variant: 'primary' },
argTypes: {
- type: {
+ variant: {
options: ['primary', 'outline'],
control: { type: 'radio' },
},
@@ -30,7 +30,7 @@ export const Default: Story = {
};
export const WithIcon: Story = {
- args: { text: 'I have an icon', isLoading: false, type: 'outline' },
+ args: { text: 'I have an icon', isLoading: false, variant: 'outline' },
render: (args: ButtonComponent) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
diff --git a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts
index 4f526397ea..3a4280cc26 100644
--- a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.component.ts
@@ -80,7 +80,6 @@ type FileiconVariants = VariantProps<typeof fileiconVariants>;
export class FileIconComponent {
@Input() fileType: FileiconVariants['fileType'];
@Input() size: FileiconVariants['size'];
- @Input() isLoading: boolean = false;
fileiconVariants = fileiconVariants;
}
diff --git a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts
index 99f7c5e502..a2ffc07ff7 100644
--- a/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/icons/file-icon/file-icon.stories.ts
@@ -13,5 +13,5 @@ export default meta;
type Story = StoryObj<FileIconComponent>;
export const Default: Story = {
- args: { type: 'pdf', size: 'xl', color: 'pdf' },
+ args: { fileType: 'pdf', size: 'large' },
};
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.html
index a918dc17e3..e8c2157a92 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.html
@@ -1 +1 @@
-<ods-attachment-error [errorList]="errorList"></ods-attachment-error>
+<ods-attachment caption="Fehler beim Hochladen" [errorList]="errorList"></ods-attachment>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.spec.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.spec.ts
index 19de71ccad..785a49306d 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.spec.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.spec.ts
@@ -1,6 +1,6 @@
import { ApiError, Issue } from '@alfa-client/tech-shared';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AttachmentErrorComponent } from '@ods/system';
+import { AttachmentComponent } from '@ods/system';
import { createApiError, createIssue } from 'libs/tech-shared/test/error';
import { MockComponent } from 'ng-mocks';
import { VorgangDetailBescheidenFormErrorComponent } from './vorgang-detail-bescheiden-form-error.component';
@@ -19,7 +19,7 @@ describe('VorgangDetailBescheidenFormErrorComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [VorgangDetailBescheidenFormErrorComponent],
- imports: [MockComponent(AttachmentErrorComponent)],
+ imports: [MockComponent(AttachmentComponent)],
}).compileComponents();
fixture = TestBed.createComponent(VorgangDetailBescheidenFormErrorComponent);
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.ts
index e37d488736..769961eedf 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-form-error/vorgang-detail-bescheiden-form-error.component.ts
@@ -4,7 +4,6 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'alfa-vorgang-detail-bescheiden-form-error',
templateUrl: './vorgang-detail-bescheiden-form-error.component.html',
- styles: [],
})
export class VorgangDetailBescheidenFormErrorComponent {
@Input() set error(error: ApiError) {
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-attachments/vorgang-detail-bescheiden-result-attachments.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-attachments/vorgang-detail-bescheiden-result-attachments.component.html
index 58820ed324..be645ff3a7 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-attachments/vorgang-detail-bescheiden-result-attachments.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-attachments/vorgang-detail-bescheiden-result-attachments.component.html
@@ -21,8 +21,7 @@
</alfa-binary-file2-container>
<ods-attachment
*ngIf="attachment.loading"
- documentName="Anhang wird hochgeladen"
- fileType=""
+ caption="Anhang wird hochgeladen"
[isLoading]="true"
></ods-attachment>
</ng-container>
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-dokument/vorgang-detail-bescheiden-result-dokument.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-dokument/vorgang-detail-bescheiden-result-dokument.component.html
index 5a92ba6a0e..f030c90ee3 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-dokument/vorgang-detail-bescheiden-result-dokument.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result-dokument/vorgang-detail-bescheiden-result-dokument.component.html
@@ -17,8 +17,7 @@
</ng-container>
<ods-attachment
*ngIf="uploadBescheidDocumentInProgress.loading"
- documentName="Bescheiddokument wird hochgeladen"
- fileType=""
+ caption="Bescheiddokument wird hochgeladen"
[isLoading]="true"
></ods-attachment>
<!-- REPLACEME: UI/UX Componente für den Fehler anzeigen-->
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
index 45f9decc4f..ffe7cd7d29 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts
@@ -50,7 +50,6 @@ import {
import {
AttachmentComponent,
AttachmentContainerComponent,
- AttachmentErrorComponent,
BescheidGenerateIconComponent,
BescheidStatusTextComponent,
BescheidUploadIconComponent,
@@ -155,7 +154,6 @@ const routes: Routes = [
BescheidGenerateIconComponent,
AttachmentComponent,
AttachmentContainerComponent,
- AttachmentErrorComponent,
ButtonWithSpinnerComponent,
FileUploadEditorComponent,
SingleFileUploadEditorComponent,
--
GitLab