From 4675fab37ba6d24f6a2a720bd744ef0d1c5c0d35 Mon Sep 17 00:00:00 2001 From: OZGCloud <ozgcloud@mgm-tp.com> Date: Thu, 9 May 2024 16:34:10 +0200 Subject: [PATCH] OZG-5590 OZG-5596 Bescheiddaten --- .../bescheid-in-vorgang.component.html | 24 +++++++----------- .../bescheid-list-in-vorgang.component.html | 20 ++++++++------- ...ument-in-bescheid-container.component.html | 12 +++++---- .../libs/bescheid/src/lib/bescheid.module.ts | 4 +++ .../beschieden-date-container.component.html | 25 ++++++++----------- .../binary-file-list-container.component.html | 8 +++--- .../binary-file-uri-container.component.html | 16 ++++++------ alfa-client/libs/design-system/src/index.ts | 2 ++ .../attachment-container.component.ts | 2 +- .../bescheid-container.component.spec.ts | 21 ++++++++++++++++ .../bescheid-container.component.ts | 12 +++++++++ .../bescheid-status-text.component.spec.ts | 21 ++++++++++++++++ .../bescheid-status-text.component.ts | 24 ++++++++++++++++++ .../vorgang-detail-area.component.html | 2 +- .../vorgang-detail-header.component.html | 6 ++--- .../vorgang-detail-header.component.scss | 6 +---- 16 files changed, 141 insertions(+), 64 deletions(-) create mode 100644 alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.spec.ts create mode 100644 alfa-client/libs/design-system/src/lib/bescheid-container/bescheid-container.component.ts create mode 100644 alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.spec.ts create mode 100644 alfa-client/libs/design-system/src/lib/bescheid-status-text/bescheid-status-text.component.ts 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 f5af61445e..b353ba67b5 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 cc0d1fd52b..13c9bfde67 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 5f3d9c0cd5..aefc4c75af 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 ac5d67ce73..13112bb0bb 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 5f47b7a42f..eeee9edc96 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 a831e684cf..ccb6ff68ca 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 93da1a4429..bd452e3e64 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 c42dc900ae..a9985e3b05 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 33e5318c77..22f255a76a 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 0000000000..32b8fc6ead --- /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 0000000000..fcfb616084 --- /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 0000000000..b456ecb464 --- /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 0000000000..431fa9f416 --- /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 067e6146b9..222ea00eec 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 c6a7c40333..976a5a3466 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 c482647dd2..62adcc21dd 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; } -- GitLab