From 1b78cb425a48632bfc6ff9d841f0198bc731ddf8 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Tue, 31 May 2022 14:16:36 +0200
Subject: [PATCH] OZG-1274 OZG-1343 Briefumschlag anzeigen
---
goofy-client/libs/ui/src/lib/assets/mail.svg | 1 +
.../libs/ui/src/lib/icon/icon.model.ts | 3 +-
.../libs/vorgang-shared-ui/src/index.ts | 1 +
.../vorgang-postfach-status.component.html | 3 +
.../vorgang-postfach-status.component.scss | 0
.../vorgang-postfach-status.component.spec.ts | 60 +++++++++++++++++++
.../vorgang-postfach-status.component.ts | 13 ++++
.../src/lib/vorgang-shared-ui.module.ts | 15 +++--
.../vorgang-status-dot.component.scss | 2 +-
.../libs/vorgang-shared-ui/src/test-setup.ts | 1 +
.../vorgang-shared/src/lib/vorgang.model.ts | 3 +-
.../libs/vorgang-shared/test/vorgang.ts | 3 +-
.../vorgang-list-item.component.html | 2 +
.../vorgang-list-item.component.scss | 24 +++++---
14 files changed, 112 insertions(+), 19 deletions(-)
create mode 100644 goofy-client/libs/ui/src/lib/assets/mail.svg
create mode 100644 goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.html
create mode 100644 goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.scss
create mode 100644 goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.spec.ts
create mode 100644 goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.ts
diff --git a/goofy-client/libs/ui/src/lib/assets/mail.svg b/goofy-client/libs/ui/src/lib/assets/mail.svg
new file mode 100644
index 0000000000..2c6022a6b8
--- /dev/null
+++ b/goofy-client/libs/ui/src/lib/assets/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>
\ No newline at end of file
diff --git a/goofy-client/libs/ui/src/lib/icon/icon.model.ts b/goofy-client/libs/ui/src/lib/icon/icon.model.ts
index 9359ba70cc..de5e487022 100644
--- a/goofy-client/libs/ui/src/lib/icon/icon.model.ts
+++ b/goofy-client/libs/ui/src/lib/icon/icon.model.ts
@@ -6,5 +6,6 @@ export enum Icons {
no_reply = 'no_reply',
assignment_ind = 'assignment_ind',
az = 'az',
- nr = 'nr'
+ nr = 'nr',
+ mail = 'mail'
}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/index.ts b/goofy-client/libs/vorgang-shared-ui/src/index.ts
index d151c0ad22..af2fd02f43 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/index.ts
+++ b/goofy-client/libs/vorgang-shared-ui/src/index.ts
@@ -1,6 +1,7 @@
export * from './lib/aktenzeichen/aktenzeichen.component';
export * from './lib/vorgang-in-postfach-breadcrumb-container/vorgang-in-postfach-breadcrumb-container.component';
export * from './lib/vorgang-nummer/vorgang-nummer.component';
+export * from './lib/vorgang-postfach-status/vorgang-postfach-status.component';
export * from './lib/vorgang-search-container/vorgang-search-container.component';
export * from './lib/vorgang-shared-ui.module';
export * from './lib/vorgang-status-dot/vorgang-status-dot.component';
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.html b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.html
new file mode 100644
index 0000000000..5d88b6c0d9
--- /dev/null
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.html
@@ -0,0 +1,3 @@
+<mat-icon *ngIf="vorgang.hasPostfachNachricht === true" data-test-class="postfach-status"
+ svgIcon="mail">
+</mat-icon>
\ No newline at end of file
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.spec.ts b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.spec.ts
new file mode 100644
index 0000000000..4e2b555739
--- /dev/null
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.spec.ts
@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIcon } from '@angular/material/icon';
+import { MatIconTestingModule } from '@angular/material/icon/testing';
+import { getElementFromFixture } from '@goofy-client/test-utils';
+import { VorgangResource } from '@goofy-client/vorgang-shared';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { createVorgangResource } from 'libs/vorgang-shared/test/vorgang';
+import { VorgangPostfachStatusComponent } from './vorgang-postfach-status.component';
+
+
+describe('VorgangPostfachStatusComponent', () => {
+ let component: VorgangPostfachStatusComponent;
+ let fixture: ComponentFixture<VorgangPostfachStatusComponent>;
+
+ const vorgang: VorgangResource = createVorgangResource();
+ const postfachStatus: string = getDataTestIdOf('postfach-status');
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [
+ MatIcon,
+ VorgangPostfachStatusComponent
+ ],
+ imports: [
+ MatIconTestingModule,
+ ],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(VorgangPostfachStatusComponent);
+ component = fixture.componentInstance;
+ component.vorgang = vorgang;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('mail icon', () => {
+ it('should show mail icon', () => {
+ component.vorgang.hasPostfachNachricht = true;
+ fixture.detectChanges();
+
+ const icon: HTMLElement = getElementFromFixture(fixture, postfachStatus);
+
+ expect(icon).toHaveClass('mat-icon');
+ });
+
+ it('should not show mail icon', () => {
+ component.vorgang.hasPostfachNachricht = false;
+ fixture.detectChanges();
+
+ const icon: HTMLElement = getElementFromFixture(fixture, postfachStatus);
+
+ expect(icon).toBeNull();
+ });
+ });
+});
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.ts b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.ts
new file mode 100644
index 0000000000..012bb0a3d1
--- /dev/null
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-postfach-status/vorgang-postfach-status.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { Vorgang } from '@goofy-client/vorgang-shared';
+
+@Component({
+ selector: 'goofy-client-vorgang-postfach-status',
+ templateUrl: './vorgang-postfach-status.component.html',
+ styleUrls: ['./vorgang-postfach-status.component.scss'],
+})
+export class VorgangPostfachStatusComponent {
+
+ @Input() vorgang: Vorgang;
+
+}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-shared-ui.module.ts b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-shared-ui.module.ts
index 50344dd273..e0e957351d 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-shared-ui.module.ts
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-shared-ui.module.ts
@@ -14,6 +14,7 @@ import { VorgangSearchClearButtonComponent } from './vorgang-search-container/vo
import { VorgangSearchComponent } from './vorgang-search-container/vorgang-search/vorgang-search.component';
import { VorgangStatusDotComponent } from './vorgang-status-dot/vorgang-status-dot.component';
import { VorgangStatusTextComponent } from './vorgang-status-text/vorgang-status-text.component';
+import { VorgangPostfachStatusComponent } from './vorgang-postfach-status/vorgang-postfach-status.component';
@NgModule({
imports: [
@@ -32,8 +33,9 @@ import { VorgangStatusTextComponent } from './vorgang-status-text/vorgang-status
VorgangInPostfachBreadcrumbComponent,
VorgangSearchAutocompleteOptionsContentComponent,
VorgangSearchClearButtonComponent,
- VorgangNummerComponent,
- VorgangStatusTextComponent,
+ VorgangNummerComponent,
+ VorgangStatusTextComponent,
+ VorgangPostfachStatusComponent,
],
exports: [
VorgangSearchContainerComponent,
@@ -41,8 +43,9 @@ import { VorgangStatusTextComponent } from './vorgang-status-text/vorgang-status
VorgangStatusDotComponent,
VorgangInPostfachBreadcrumbContainerComponent,
VorgangSearchAutocompleteOptionsContentComponent,
- VorgangNummerComponent,
- VorgangStatusTextComponent,
- ]
+ VorgangNummerComponent,
+ VorgangStatusTextComponent,
+ VorgangPostfachStatusComponent,
+ ],
})
-export class VorgangSharedUiModule { }
+export class VorgangSharedUiModule {}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-status-dot/vorgang-status-dot.component.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-status-dot/vorgang-status-dot.component.scss
index b2519b3f6e..0df7c2f9b5 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-status-dot/vorgang-status-dot.component.scss
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-status-dot/vorgang-status-dot.component.scss
@@ -5,7 +5,7 @@
.dot {
border-radius: 50%;
background-color: mat.get-color-from-palette($primaryPalette);
- margin: 0 29px 0 0;
+ margin: 0 1.75rem 0 0;
flex-shrink: 0;
&.angenommen,
diff --git a/goofy-client/libs/vorgang-shared-ui/src/test-setup.ts b/goofy-client/libs/vorgang-shared-ui/src/test-setup.ts
index 08ef82b5d5..b7c436f08d 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/test-setup.ts
+++ b/goofy-client/libs/vorgang-shared-ui/src/test-setup.ts
@@ -1,4 +1,5 @@
import 'jest-preset-angular/setup-jest';
+import '@testing-library/jest-dom';
import { getTestBed } from '@angular/core/testing';
import {
diff --git a/goofy-client/libs/vorgang-shared/src/lib/vorgang.model.ts b/goofy-client/libs/vorgang-shared/src/lib/vorgang.model.ts
index 6ee0f5b6d4..1db1c68ec2 100644
--- a/goofy-client/libs/vorgang-shared/src/lib/vorgang.model.ts
+++ b/goofy-client/libs/vorgang-shared/src/lib/vorgang.model.ts
@@ -8,7 +8,8 @@ export interface Vorgang {
nummer: string,
createdAt: Date,
name: string,
- nextFrist: Date
+ nextFrist: Date,
+ hasPostfachNachricht: boolean
}
export interface VorgangWithEingang extends Vorgang {
diff --git a/goofy-client/libs/vorgang-shared/test/vorgang.ts b/goofy-client/libs/vorgang-shared/test/vorgang.ts
index 172246d95a..d7c3e238d5 100644
--- a/goofy-client/libs/vorgang-shared/test/vorgang.ts
+++ b/goofy-client/libs/vorgang-shared/test/vorgang.ts
@@ -10,7 +10,8 @@ export function createVorgang(): Vorgang {
status: faker.helpers.arrayElement([VorgangStatus.NEU, VorgangStatus.ABGESCHLOSSEN, VorgangStatus.BESCHIEDEN, VorgangStatus.VERWORFEN]),
aktenzeichen: faker.lorem.word(),
nummer: faker.lorem.word(),
- nextFrist: faker.date.future()
+ nextFrist: faker.date.future(),
+ hasPostfachNachricht: faker.datatype.boolean()
}
}
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
index 697b4e0098..36c4396861 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
+++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
@@ -10,6 +10,8 @@
class="status-text"></goofy-client-vorgang-status-text>
</div>
+ <goofy-client-vorgang-postfach-status class="postfach-status" [vorgang]="vorgang"></goofy-client-vorgang-postfach-status>
+
<div class="aktenzeichen">
<mat-icon svgIcon="az"></mat-icon>
<span class="ellipsis" goofy-client-aktenzeichen [vorgang]="vorgang"></span>
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss
index affafe14f6..2904887d56 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss
+++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss
@@ -4,11 +4,11 @@
.list-item {
display: grid;
- grid-template-columns: 50% 40% 10%;
+ grid-template-columns: 35% 15% 40% 10%;
grid-template-areas:
- "status wiedervorlagen eingang"
- "name name name"
- "aktenzeichen vorgang-nummer user-icon";
+ "status postfach-status wiedervorlagen eingang"
+ "name name name name"
+ "aktenzeichen aktenzeichen vorgang-nummer user-icon";
row-gap: 8px;
align-items: center;
padding: 16px 24px;
@@ -18,6 +18,11 @@
display: flex;
align-items: center;
}
+ .postfach-status {
+ grid-area: postfach-status;
+ display: flex;
+ align-items: center;
+ }
.wiedervorlagen {
grid-area: wiedervorlagen;
white-space: nowrap;
@@ -27,6 +32,7 @@
justify-self: end;
display: flex;
align-items: center;
+ white-space: nowrap;
}
.name {
grid-area: name;
@@ -48,10 +54,10 @@
}
@include media('>desktop') {
- grid-template-columns: 48% 30% 12% 10%;
+ grid-template-columns: 23% 25% 30% 12% 10%;
grid-template-areas:
- "status aktenzeichen eingang user-icon"
- "name vorgang-nummer wiedervorlagen user-icon";
+ "status postfach-status aktenzeichen eingang user-icon"
+ "name name vorgang-nummer wiedervorlagen user-icon";
padding: 16px 24px;
.eingang {
@@ -60,9 +66,9 @@
}
@include media('>xxlDesktop') {
- grid-template-columns: 25% 16% 16% 20% 10% 10% 3%;
+ grid-template-columns: 15% 10% 16% 16% 20% 10% 10% 3%;
grid-template-areas:
- "status aktenzeichen vorgang-nummer name wiedervorlagen eingang user-icon";
+ "status postfach-status aktenzeichen vorgang-nummer name wiedervorlagen eingang user-icon";
.name {
margin-right: 24px;
--
GitLab