diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-in-vorgang-container/bescheid-in-vorgang/bescheid-in-vorgang.component.html b/alfa-client/libs/bescheid/src/lib/bescheid-in-vorgang-container/bescheid-in-vorgang/bescheid-in-vorgang.component.html
index f5af61445e5e6c84708b3d60a5164c007f5d5c8d..b353ba67b5969a059c5c0679f22fb797f4d63370 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-in-vorgang-container/bescheid-in-vorgang/bescheid-in-vorgang.component.html
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-in-vorgang-container/bescheid-in-vorgang/bescheid-in-vorgang.component.html
@@ -1,22 +1,16 @@
<ozgcloud-spinner [stateResource]="bescheidStateResource">
<ng-container *ngIf="bescheidStateResource.resource as bescheid">
<ozgcloud-expansion-panel headline="Bescheid">
- <p class="flex text-text">
- <span *ngIf="bescheidBewilligt" class="flex items-center gap-2"
- ><span>[stamp]</span> Bewilligt am {{ bescheid.beschiedenAm | formatFullDatePipe }}</span
+ <div class="flex max-w-xl flex-col gap-4">
+ <ods-bescheid-status-text [dateText]="bescheid.beschiedenAm | formatFullDatePipe" />
+
+ <alfa-binary-file2-container
+ *ngIf="bescheidDocumentFile.resource && bescheidDocumentFile.loaded"
+ [file]="bescheidDocumentFile.resource"
+ data-test-id="bescheid-document-in-vorgang-binary-file"
>
- <span *ngIf="bescheidAbgelehnt" class="flex items-center gap-2">
- <span>[close]</span> Abgelehnt am
- {{ bescheid.beschiedenAm | formatFullDatePipe }}
- </span>
- <span *ngIf="hasBescheidDraft" class="flex items-center gap-2">(Entwurf)</span>
- </p>
- <alfa-binary-file-container
- *ngIf="bescheidDocumentFile.resource && bescheidDocumentFile.loaded"
- [file]="bescheidDocumentFile.resource"
- data-test-id="bescheid-document-in-vorgang-binary-file"
- >
- </alfa-binary-file-container>
+ </alfa-binary-file2-container>
+ </div>
</ozgcloud-expansion-panel>
</ng-container>
</ozgcloud-spinner>
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/bescheid-list-in-vorgang.component.html b/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/bescheid-list-in-vorgang.component.html
index cc0d1fd52b9a95245d015ec88d0c16ed7677e041..13c9bfde67f926c6401783fc50e995b0b42637ce 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/bescheid-list-in-vorgang.component.html
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/bescheid-list-in-vorgang.component.html
@@ -1,10 +1,10 @@
-<ul>
- <li
+<div class="flex max-w-xl flex-col gap-4">
+ <ods-bescheid-container
*ngFor="let bescheid of bescheidList | toEmbeddedResources: bescheidListLinkRel.BESCHEID_LIST"
>
<div class="flex flex-row">
<!-- TODO Nach Umstellung der Componenten <alfa-vorgang-detail-bescheiden-result-status> nutzen -->
- <p class="flex text-text">
+ <p class="flex gap-2 text-base font-medium text-text">
<span class="flex items-center gap-2" *ngIf="bescheid.bewilligt"
><mat-icon svgIcon="stamp" class="text-bewilligt"></mat-icon>Bewilligt am
{{ bescheid.beschiedenAm | date: 'dd.MM.yyyy' }}
@@ -13,11 +13,13 @@
><mat-icon class="text-abgelehnt">close</mat-icon>Abgelehnt am
{{ bescheid.beschiedenAm | date: 'dd.MM.yyyy' }}
</span>
+ <span
+ class="flex items-center text-error"
+ *ngIf="bescheid.status === bescheidStatus.DRAFT"
+ data-test-class="bescheid-status-text"
+ >(Entwurf)</span
+ >
</p>
- <!-- -->
- <span *ngIf="bescheid.status === bescheidStatus.DRAFT" data-test-class="bescheid-status-text"
- >(Entwurf)</span
- >
</div>
<alfa-document-in-bescheid-container
*ngIf="bescheid | hasLink: bescheidLinkRel.BESCHEID_DOCUMENT"
@@ -32,5 +34,5 @@
[resource]="bescheid"
[linkRel]="bescheidLinkRel.ATTACHMENTS"
></alfa-binary-file-list-container>
- </li>
-</ul>
+ </ods-bescheid-container>
+</div>
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/document-in-bescheid-container/document-in-bescheid-container.component.html b/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/document-in-bescheid-container/document-in-bescheid-container.component.html
index 5f3d9c0cd52de912d43081268e1cf806f5aa7818..aefc4c75af7cfc3bf0669e8c9fb99665f464fde4 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/document-in-bescheid-container/document-in-bescheid-container.component.html
+++ b/alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/document-in-bescheid-container/document-in-bescheid-container.component.html
@@ -1,7 +1,9 @@
<ng-container *ngIf="documentStateResource$ | async as documentStateResource">
- <alfa-binary-file-uri-container
- *ngIf="documentStateResource.resource | hasLink: documentLinkRel.FILE"
- data-test-class="binary-file-uri-container"
- [binaryFileUri]="documentStateResource.resource | getUrl: documentLinkRel.FILE"
- ></alfa-binary-file-uri-container>
+ <ods-attachment-container>
+ <alfa-binary-file-uri-container
+ *ngIf="documentStateResource.resource | hasLink: documentLinkRel.FILE"
+ data-test-class="binary-file-uri-container"
+ [binaryFileUri]="documentStateResource.resource | getUrl: documentLinkRel.FILE"
+ ></alfa-binary-file-uri-container>
+ </ods-attachment-container>
</ng-container>
diff --git a/alfa-client/libs/bescheid/src/lib/bescheid.module.ts b/alfa-client/libs/bescheid/src/lib/bescheid.module.ts
index ac5d67ce73f0ddba4f6960a92b59acae0d335187..13112bb0bb8b3e35baff4f341eb2853935b99f71 100644
--- a/alfa-client/libs/bescheid/src/lib/bescheid.module.ts
+++ b/alfa-client/libs/bescheid/src/lib/bescheid.module.ts
@@ -15,6 +15,8 @@ import { BeschiedenDateInVorgangContainerComponent } from './beschieden-date-in-
import { CreateBescheidButtonContainerComponent } from './create-bescheid-button-container/create-bescheid-button-container.component';
import { CreateBescheidButtonComponent } from './create-bescheid-button-container/create-bescheid-button/create-bescheid-button.component';
+import { BescheidContainerComponent, BescheidStatusTextComponent } from '@ods/system';
+
@NgModule({
imports: [
CommonModule,
@@ -23,6 +25,8 @@ import { CreateBescheidButtonComponent } from './create-bescheid-button-containe
TechSharedModule,
UiModule,
CommandSharedModule,
+ BescheidStatusTextComponent,
+ BescheidContainerComponent,
],
declarations: [
CreateBescheidButtonContainerComponent,
diff --git a/alfa-client/libs/bescheid/src/lib/beschieden-date-in-vorgang-container/beschieden-date-container/beschieden-date-container.component.html b/alfa-client/libs/bescheid/src/lib/beschieden-date-in-vorgang-container/beschieden-date-container/beschieden-date-container.component.html
index 5f47b7a42fa50d3bae9867861ebf09ca46bb2b16..eeee9edc96d16c9d3f5a2075fbd0bf892321d4a8 100644
--- a/alfa-client/libs/bescheid/src/lib/beschieden-date-in-vorgang-container/beschieden-date-container/beschieden-date-container.component.html
+++ b/alfa-client/libs/bescheid/src/lib/beschieden-date-in-vorgang-container/beschieden-date-container/beschieden-date-container.component.html
@@ -1,17 +1,14 @@
<ng-container *ngIf="bescheid$ | async as bescheid">
- <p class="flex text-text">
- <span class="flex items-center gap-2">
- <mat-icon
- *ngIf="bescheid.bewilligt"
- data-test-id="bewilligt-icon"
- svgIcon="stamp"
- class="text-bewilligt"
- ></mat-icon>
- <!-- TODO UI/UX: "close" als svgIcon bereitstellen -->
- <mat-icon *ngIf="!bescheid.bewilligt" data-test-id="abgelehnt-icon" class="text-abgelehnt"
- >close</mat-icon
- >
- </span>
+ <div class="flex items-center gap-1 text-text">
+ <mat-icon
+ *ngIf="bescheid.bewilligt"
+ data-test-id="bewilligt-icon"
+ svgIcon="stamp"
+ class="text-bewilligt"
+ ></mat-icon>
+ <mat-icon *ngIf="!bescheid.bewilligt" data-test-id="abgelehnt-icon" class="text-abgelehnt"
+ >close</mat-icon
+ >
{{ bescheid.beschiedenAm | formatFullDatePipe }}
- </p>
+ </div>
</ng-container>
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file-list-container/binary-file-list-container.component.html b/alfa-client/libs/binary-file/src/lib/binary-file-list-container/binary-file-list-container.component.html
index a831e684cf9c17cf8f7998b35d3dfe112dc448ac..ccb6ff68ca977040b551bbccdae63a27b5122617 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file-list-container/binary-file-list-container.component.html
+++ b/alfa-client/libs/binary-file/src/lib/binary-file-list-container/binary-file-list-container.component.html
@@ -1,3 +1,5 @@
-<alfa-binary-file-list
- [binaryFileListStateResource]="binaryFileListStateResource$ | async"
-></alfa-binary-file-list>
+<ods-attachment-container>
+ <alfa-binary-file-list
+ [binaryFileListStateResource]="binaryFileListStateResource$ | async"
+ ></alfa-binary-file-list>
+</ods-attachment-container>
diff --git a/alfa-client/libs/binary-file/src/lib/binary-file-uri-container/binary-file-uri-container.component.html b/alfa-client/libs/binary-file/src/lib/binary-file-uri-container/binary-file-uri-container.component.html
index 93da1a4429ac7f26e047f86ce7a243565160ee25..bd452e3e647ee15ed78a06b3e75374873c3f7b8d 100644
--- a/alfa-client/libs/binary-file/src/lib/binary-file-uri-container/binary-file-uri-container.component.html
+++ b/alfa-client/libs/binary-file/src/lib/binary-file-uri-container/binary-file-uri-container.component.html
@@ -1,9 +1,11 @@
<ng-container *ngIf="binaryFileStateResource$ | async as binaryFileStateResource">
- <alfa-binary-file2-container
- *ngIf="binaryFileStateResource.resource as binaryFile"
- data-test-class="binary-file-container"
- [file]="binaryFile"
- [isLoading]="binaryFileStateResource.loading"
- [deletable]="false"
- ></alfa-binary-file2-container>
+ <ods-attachment-container>
+ <alfa-binary-file2-container
+ *ngIf="binaryFileStateResource.resource as binaryFile"
+ data-test-class="binary-file-container"
+ [file]="binaryFile"
+ [isLoading]="binaryFileStateResource.loading"
+ [deletable]="false"
+ ></alfa-binary-file2-container>
+ </ods-attachment-container>
</ng-container>
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index c42dc900aecac517ad8577d29a79d17219bbd8fa..a9985e3b05d257cb3b535c1b79ca6cbdfa1a252a 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -1,5 +1,7 @@
export * from './lib/attachment-container/attachment-container.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';
export * from './lib/button-card/button-card.component';
export * from './lib/button/button.component';
export * from './lib/form/error-message/error-message.component';
diff --git a/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.ts b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.ts
index 33e5318c778ec8649897b3475108861d853f5be8..22f255a76a3c0ddc0dc7b08f0a07e9d2a7c94c21 100644
--- a/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.ts
+++ b/alfa-client/libs/design-system/src/lib/attachment-container/attachment-container.component.ts
@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
standalone: true,
imports: [CommonModule],
template: `<div
- class="mb-6 block overflow-hidden rounded-md border border-black/25 shadow empty:hidden"
+ class="block overflow-hidden rounded-md border border-black/25 shadow empty:hidden"
>
<ng-content></ng-content>
</div>`,
diff --git a/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.spec.ts b/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32b8fc6eadf7d114d8730894bd5d666e33b7bc81
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BescheidContainerComponent } from './bescheid-container.component';
+
+describe('BescheidContainerComponent', () => {
+ let component: BescheidContainerComponent;
+ let fixture: ComponentFixture<BescheidContainerComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BescheidContainerComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BescheidContainerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.ts b/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fcfb61608400068d2f27446c4df4a0679ddc7093
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ods-bescheid-container',
+ standalone: true,
+ imports: [CommonModule],
+ template: ` <article class="flex flex-col gap-4 rounded-lg bg-background-200 p-4">
+ <ng-content></ng-content>
+ </article>`,
+})
+export class BescheidContainerComponent {}
diff --git a/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.spec.ts b/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b456ecb4641e4c01bd7bf09c8106f2812fd31e19
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BescheidStatusTextComponent } from './bescheid-status-text.component';
+
+describe('BescheidStatusTextComponent', () => {
+ let component: BescheidStatusTextComponent;
+ let fixture: ComponentFixture<BescheidStatusTextComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [BescheidStatusTextComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BescheidStatusTextComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.ts b/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..431fa9f416edeaf4e5f9265a53fe0c55812bce94
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.ts
@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'ods-bescheid-status-text',
+ standalone: true,
+ imports: [CommonModule],
+ template: ` <p class="flex justify-center text-base font-bold text-text">
+ <span class="flex items-center gap-2" *ngIf="bewilligt"
+ ><mat-icon svgIcon="stamp" class="text-bewilligt"></mat-icon>Bewilligt am
+ {{ dateText }}
+ </span>
+ <span class="flex items-center gap-2" *ngIf="!bewilligt"
+ ><mat-icon class="text-abgelehnt">close</mat-icon>Abgelehnt am
+ {{ dateText }}
+ </span>
+ <span *ngIf="hasBescheidDraft" class="flex items-center gap-2">(Entwurf)</span>
+ </p>`,
+})
+export class BescheidStatusTextComponent {
+ @Input({ required: true }) dateText: string = '';
+ @Input() bewilligt: boolean = false;
+ @Input() hasBescheidDraft: boolean = false;
+}
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html
index 067e6146b9a685b8ca8c325c5d62ce68feadbb89..222ea00eec815c3eaacc9bf26fbbceeb70cfa29d 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-area.component.html
@@ -38,7 +38,7 @@
[vorgangWithEingang]="vorgangResource"
></alfa-vorgang-detail-formular-daten>
- <div class="section" *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.BESCHEIDE">
+ <div *ngIf="vorgangResource | hasLink: vorgangWithEingangLinkRel.BESCHEIDE">
<ozgcloud-expansion-panel headline="Bescheid">
<alfa-bescheid-list-in-vorgang-container
data-test-id="bescheid-container-in-vorgang"
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
index c6a7c40333c51235e083cc802d82bd8f78aa16ec..976a5a346670cbc0d0b44b77143781bd2b5a2472 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.html
@@ -25,15 +25,13 @@
-->
<alfa-vorgang-status-dot [status]="vorgang.status" class="status-dot"></alfa-vorgang-status-dot>
-<div class="status">
+<div class="flex flex-row items-center gap-7">
<alfa-vorgang-status-text
[status]="vorgang.status"
data-test-id="status-text"
class="status-text"
></alfa-vorgang-status-text>
- <alfa-beschieden-date-in-vorgang-container
- class="beschieden-date"
- ></alfa-beschieden-date-in-vorgang-container>
+ <alfa-beschieden-date-in-vorgang-container></alfa-beschieden-date-in-vorgang-container>
</div>
<div class="initial-date" data-test-id="created-at">
diff --git a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.scss b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.scss
index c482647dd289cdc30bc543070e40cc3298f51b67..62adcc21dd7dcfdda38c96f774b16d8af49b5c39 100644
--- a/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.scss
+++ b/alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/vorgang-detail-header.component.scss
@@ -108,9 +108,5 @@ mat-icon {
.status {
display: flex;
- flex-direction: row;
-}
-
-.beschieden-date {
- padding-left: 2rem;
+ flex-direction: column;
}