diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 25380dd9f3c8fee4758246b0af005928d2cffd1f..6b8faecc400c23f08eb874d8a45386b27f9e455b 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 a8a263633434e0dc3f4693d414b9427470a1348e..cd64683430db122e9d8411e606f9f80be75d2028 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 f111f0697b84d7755dcd24acc5592842f73c0bb9..a9985e3b05d257cb3b535c1b79ca6cbdfa1a252a 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 a155514b9bcbb86221c54595fed6f5b21daf740d..0000000000000000000000000000000000000000
--- 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 83cd48a099a4e0a06d18a4848d1e06793f8039bd..0000000000000000000000000000000000000000
--- 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 b3578d40175fbf30dfbd3abaf66a2afac0797740..bb4e1614d7fa4bb3a6ef638dee8d8620b725792c 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 814e9ac5e9c27a11955bbac5ec538e92a35f7e4d..7104e718bbf91896eee9611fd9aaabb51cc7525b 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 bb64d56b0a7aeca2598a8dfeb8efe33b361586ce..9739685d3479512e4ee3deea340727d0c296f049 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 4f526397ea2c1eaebf645e6ff055510ee28cf1fb..3a4280cc26c8dc3c9ac0542649290e9e4ff41422 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 99f7c5e5022779e1cb0740900c68b9b3c65c5ebd..a2ffc07ff732f6d8253b547895b420128767b7d6 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 a918dc17e3598587c93a32aa26172bb1ab088d03..e8c2157a921270e01c3ac94f416d963d3950a3f2 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 19de71ccad63395970f15d60808ded974ee1b9bf..785a49306da8f7a1b572af25cc9da197f4714c07 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 e37d488736e6cda3577126ce47752cb855895e9d..769961eedfa6a07bebd03c514ddd7cab031f676b 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 58820ed3249496a0d88f11e04b65dbc98d377fb9..be645ff3a735e0e180683c9b19da7b29c0d49442 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 5a92ba6a0e1a6c43d8b71b3043327904e0333b3a..f030c90ee341853fb07ef60b15dbe7b29c44fdbe 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 45f9decc4f7d4e8133605ba802b99dd72a4a665b..ffe7cd7d2979b8d53be93819cb159456cd4a98e9 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,