OZG-5590 OZG-5596 Bescheiddaten

alfa-client/libs/bescheid/src/lib/bescheid-in-vorgang-container/bescheid-in-vorgang/bescheid-in-vorgang.component.html

 <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
-        >
-        <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
+      <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"
         >
-      </alfa-binary-file-container>
+        </alfa-binary-file2-container>
+      </div>
     </ozgcloud-expansion-panel>
   </ng-container>
 </ozgcloud-spinner>

alfa-client/libs/bescheid/src/lib/bescheid-list-in-vorgang-container/bescheid-list-in-vorgang/bescheid-list-in-vorgang.component.html

-<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>
-      </p>
-      <!--  -->
-      <span *ngIf="bescheid.status === bescheidStatus.DRAFT" data-test-class="bescheid-status-text"
+        <span
+          class="flex items-center text-error"
+          *ngIf="bescheid.status === bescheidStatus.DRAFT"
+          data-test-class="bescheid-status-text"
           >(Entwurf)</span
         >
+      </p>
     </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>

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

 <ng-container *ngIf="documentStateResource$ | async as documentStateResource">
+  <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>

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,

alfa-client/libs/bescheid/src/lib/beschieden-date-in-vorgang-container/beschieden-date-container/beschieden-date-container.component.html

 <ng-container *ngIf="bescheid$ | async as bescheid">
-  <p class="flex text-text">
-    <span class="flex items-center gap-2">
+  <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>
-      <!-- TODO UI/UX: "close" als svgIcon bereitstellen -->
     <mat-icon *ngIf="!bescheid.bewilligt" data-test-id="abgelehnt-icon" class="text-abgelehnt"
       >close</mat-icon
     >
-    </span>
     {{ bescheid.beschiedenAm | formatFullDatePipe }}
-  </p>
+  </div>
 </ng-container>

alfa-client/libs/binary-file/src/lib/binary-file-list-container/binary-file-list-container.component.html

+<ods-attachment-container>
   <alfa-binary-file-list
     [binaryFileListStateResource]="binaryFileListStateResource$ | async"
   ></alfa-binary-file-list>
+</ods-attachment-container>

alfa-client/libs/binary-file/src/lib/binary-file-uri-container/binary-file-uri-container.component.html

 <ng-container *ngIf="binaryFileStateResource$ | async as binaryFileStateResource">
+  <ods-attachment-container>
     <alfa-binary-file2-container
       *ngIf="binaryFileStateResource.resource as binaryFile"
       data-test-class="binary-file-container"
@@ -6,4 +7,5 @@
       [isLoading]="binaryFileStateResource.loading"
       [deletable]="false"
     ></alfa-binary-file2-container>
+  </ods-attachment-container>
 </ng-container>

alfa-client/libs/design-system/src/index.ts

 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';

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>`,

alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.spec.ts

+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();
+  });
+});

alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.ts

+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 {}

alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.spec.ts

+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();
+  });
+});

alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.ts

+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;
+}

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"

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">

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;
 }