Merge pull request 'OZG-1778 Vorgangdetail: Formdaten in Tabs aufgeteilt...

Merge pull request 'OZG-1778 Vorgangdetail: Formdaten in Tabs aufgeteilt (WIP)' (#53) from features/OZG-1778 into master

Reviewed-on: https://git.ozg-sh.de/mgm/goofy/pulls/53

goofy-client/apps/goofy-e2e/src/components/anhang/anhang-list.e2e.component.ts

 import { SpinnerE2EComponent } from '../ui/spinner.e2e.component';
 
 export class AnhangE2EComponent {
-	private readonly locatorAnhaenge: string = 'anhaenge';
-	private readonly locatorEmptyAnhaenge: string = 'empty-anhaenge';
+	private readonly locatorAnhaenge: string = 'files';
+	private readonly locatorEmptyAnhaenge: string = 'empty-files';
 
 	private spinnerComponent: SpinnerE2EComponent = new SpinnerE2EComponent()
 

goofy-client/apps/goofy-e2e/src/integration/main-tests/vorgang-anhang/anhang-herunterladen.e2e-spec.ts

@@ -65,10 +65,6 @@ describe.skip('FIXME -> auf Grid FS umstellen; Vorgang Anhang', () => {
 			exist(vorgangHeader.getRoot());
 		})
 
-		it('Should show keine Anhänge vorhanden', () => {
-			exist(anhangContainer.getEmptyAnhaenge());
-		})
-
 		it('click on navigate back', () => {
 			subnavigation.clickBackButton();
 			vorgangList.waitForSpinnerToDisappear();

goofy-client/apps/goofy/src/styles/main.scss

@@ -5,6 +5,7 @@
 @import "abstracts/variables";
 @import "base/setup";
 @import "layout/main";
+@import "material/tabs";
 @import "~libs/navigation/src/lib/navigation/navigation.theme";
 @import "~libs/navigation/src/lib/header-container/header/header.theme";
 @import "~libs/ui/src/lib/ui/expansion-panel/expansion-panel.theme";

goofy-client/apps/goofy/src/styles/material/_tabs.scss

+.mat-tab-label {
+	padding: 0 !important;
+	min-width: auto !important;
+	margin: 0 12px;
+	&:first-child {
+		margin-left: 0;
+	}
+	&:last-child {
+		margin-right: 0;
+	}
+}

goofy-client/libs/ozg-file/src/lib/anhang-list-container/anhang-list-container.component.html

-<goofy-client-expansion-panel headline="Anhänge">
-	<ng-container *ngIf="attachmentStateResource$ | async as attachmentStateResource">
-
-		<goofy-client-spinner [stateResource]="attachmentStateResource">
-			<goofy-client-anhaenge *ngIf="vorgangWithEingang | hasLink: linkRel.ATTACHMENTS; else emptyAnhaenge" data-test-id="anhaenge" class="files"
-				[attachments]="attachmentStateResource.resource | toEmbeddedResources: fileListRel.FILE_LIST">
+<div class="container">
+	<goofy-client-spinner [stateResource]="fileListResource">
+		<goofy-client-anhaenge data-test-id="files" class="files"
+			[attachments]="fileListResource.resource | toEmbeddedResources: fileListRel.FILE_LIST">
 		</goofy-client-anhaenge>
-
-			<ng-template #emptyAnhaenge>
-				<p data-test-id="empty-anhaenge">keine Anhänge vorhanden</p>
-			</ng-template>
 	</goofy-client-spinner>
-
-	</ng-container>
-</goofy-client-expansion-panel>
+</div>

goofy-client/libs/ozg-file/src/lib/anhang-list-container/anhang-list-container.component.scss

@@ -10,3 +10,7 @@
 p {
 	color: #999;
 }
+
+.container {
+	margin-top: 1rem;
+}
\ No newline at end of file

goofy-client/libs/ozg-file/src/lib/anhang-list-container/anhang-list-container.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { createEmptyStateResource, HasLinkPipe, ToEmbeddedResourcesPipe } from '@goofy-client/tech-shared';
+import { OzgFileListResource } from '@goofy-client/ozg-file-shared';
+import { createEmptyStateResource, createStateResource, HasLinkPipe, StateResource, ToEmbeddedResourcesPipe } from '@goofy-client/tech-shared';
 import { mock } from '@goofy-client/test-utils';
 import { ExpansionPanelComponent, SpinnerComponent } from '@goofy-client/ui';
-import { VorgangService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@goofy-client/vorgang-shared';
-import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
+import { VorgangService } from '@goofy-client/vorgang-shared';
+import { createOzgFileListResource } from 'libs/ozg-file-shared/test/ozg-file';
 import { MockComponent } from 'ng-mocks';
-import { of } from 'rxjs';
 import { AnhaengeComponent } from './anhaenge/anhaenge.component';
 import { AnhangListContainerComponent } from './anhang-list-container.component';
 
@@ -13,13 +13,11 @@ describe('AnhangListContainerComponent', () => {
 	let component: AnhangListContainerComponent;
 	let fixture: ComponentFixture<AnhangListContainerComponent>;
 
-	const emptyAnhaenge: string = '[data-test-id="empty-anhaenge"]';
-	const anhaenge: string = '[data-test-id="anhaenge"]';
+	const anhaenge: string = '[data-test-id="files"]';
 
 	const vorgangService = mock(VorgangService);
 
-	const vorgangWithAttachments: VorgangWithEingangResource = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ATTACHMENTS]);
-	const vorgang: VorgangWithEingangResource = createVorgangWithEingangResource();
+	const fileListResource: StateResource<OzgFileListResource> = createStateResource(createOzgFileListResource());
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
@@ -43,7 +41,7 @@ describe('AnhangListContainerComponent', () => {
 	beforeEach(() => {
 		fixture = TestBed.createComponent(AnhangListContainerComponent);
 		component = fixture.componentInstance;
-		component.attachmentStateResource$ = of(createEmptyStateResource());
+		component.fileListResource = createEmptyStateResource();
 		fixture.detectChanges();
 	});
 
@@ -51,10 +49,10 @@ describe('AnhangListContainerComponent', () => {
 		expect(component).toBeTruthy();
 	});
 
-	describe('on vorgang with "attachment" link', () => {
+	describe('on vorgang with files', () => {
 
 		beforeEach(() => {
-			component.vorgangWithEingang = vorgangWithAttachments;
+			component.fileListResource = fileListResource;
 			fixture.detectChanges();
 		})
 
@@ -63,50 +61,5 @@ describe('AnhangListContainerComponent', () => {
 
 			expect(element).toBeInstanceOf(HTMLElement);
 		})
-
-		it('should empty attachments not visible', () => {
-			const element = fixture.nativeElement.querySelector(emptyAnhaenge);
-
-			expect(element).not.toBeInstanceOf(HTMLElement);
-		})
-	})
-
-	describe('on vorgang without "attachment" link', () => {
-
-		beforeEach(() => {
-			component.vorgangWithEingang = vorgang;
-			fixture.detectChanges();
-		})
-
-		it('should attachments not visible', () => {
-			const element = fixture.nativeElement.querySelector(anhaenge);
-
-			expect(element).not.toBeInstanceOf(HTMLElement);
-		})
-
-		it('should empty attachments visible', () => {
-			const element = fixture.nativeElement.querySelector(emptyAnhaenge);
-
-			expect(element).toBeInstanceOf(HTMLElement);
-		})
-	})
-
-	describe('ng on changes', () => {
-
-		it('should call vorgang service getAttachments if link is present', () => {
-			component.vorgangWithEingang = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ATTACHMENTS]);
-
-			component.ngOnChanges();
-
-			expect(vorgangService.getAttachments).toHaveBeenCalled();
-		})
-
-		it('should NOT call vorgang service getAttachments', () => {
-			component.vorgangWithEingang = createVorgangWithEingangResource();
-
-			component.ngOnChanges();
-
-			expect(vorgangService.getAttachments).toHaveBeenCalled();
-		})
 	})
 });
\ No newline at end of file

goofy-client/libs/ozg-file/src/lib/anhang-list-container/anhang-list-container.component.ts

-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { OzgFileListLinkRel, OzgFileListResource } from '@goofy-client/ozg-file-shared';
 import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
-import { VorgangService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@goofy-client/vorgang-shared';
-import { hasLink } from '@ngxp/rest';
-import { Observable, of } from 'rxjs';
 
 @Component({
 	selector: 'goofy-client-anhang-list-container',
 	templateUrl: './anhang-list-container.component.html',
 	styleUrls: ['./anhang-list-container.component.scss']
 })
-export class AnhangListContainerComponent implements OnChanges {
+export class AnhangListContainerComponent {
 
-	@Input() vorgangWithEingang: VorgangWithEingangResource;
+	@Input() fileListResource: StateResource<OzgFileListResource> = createEmptyStateResource();
 
-	readonly linkRel = VorgangWithEingangLinkRel;
 	readonly fileListRel = OzgFileListLinkRel;
-
-	attachmentStateResource$: Observable<StateResource<OzgFileListResource>> = of(createEmptyStateResource());
-
-	constructor(private vorgangService: VorgangService) { }
-
-	ngOnChanges(): void {
-		if (hasLink(this.vorgangWithEingang, VorgangWithEingangLinkRel.ATTACHMENTS)) {
-			this.attachmentStateResource$ = this.vorgangService.getAttachments();
-		}
-	}
 }

goofy-client/libs/ui/src/lib/ui/ui.module.ts

@@ -18,6 +18,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TechSharedModule } from '@goofy-client/tech-shared';
 import { HttpConnectionTimeoutInterceptor } from '../interceptor/http-connection-timeout.interceptor';
@@ -28,6 +29,7 @@ import { ButtonWithSpinnerComponent } from './button-with-spinner/button-with-sp
 import { AutocompleteEditorComponent } from './editor/autocomplete-editor/autocomplete-editor.component';
 import { DateEditorComponent } from './editor/date-editor/date-editor.component';
 import { EnumEditorComponent } from './editor/enum-editor/enum-editor.component';
+import { FileUploadEditorComponent } from './editor/file-upload-editor/file-upload-editor.component';
 import { TextEditorComponent } from './editor/text-editor/text-editor.component';
 import { TextAreaEditorComponent } from './editor/textarea-editor/textarea-editor.component';
 import { ExpansionPanelComponent } from './expansion-panel/expansion-panel.component';
@@ -41,7 +43,6 @@ import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { SpinnerComponent } from './spinner/spinner.component';
 import { SubnavigationComponent } from './subnavigation/subnavigation.component';
 import { ValidationErrorComponent } from './validation-error/validation-error.component';
-import { FileUploadEditorComponent } from './editor/file-upload-editor/file-upload-editor.component';
 
 const components = [
 	SubnavigationComponent,
@@ -86,6 +87,7 @@ const modules = [
 	ReactiveFormsModule,
 	MatAutocompleteModule,
 	MatDialogModule,
+	MatTabsModule,
 	CommonModule,
 	TechSharedModule
 ];

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-antrag-data/eingang-header/eingang-header.component.scss

+table {
+	border-spacing: 0;
+	margin: -4px 0 8px 0;
+	width: 100%;
+}
+
+td {
+	margin: 0;
+	padding: 0 8px 0 0;
+	vertical-align: top;
+	overflow-wrap: break-word;
+}
+
+.key {
+	width: 10px;
+}
+
+.value {
+	word-break: break-word;
+}
+
+th {
+	display: none;
+}

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-body/eingang-header/eingang-header.component.ts → goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-antrag-data/eingang-header/eingang-header.component.ts

@@ -4,7 +4,7 @@ import { EingangHeader } from '@goofy-client/vorgang-shared';
 @Component({
   selector: 'goofy-client-eingang-header',
   templateUrl: './eingang-header.component.html',
-  styleUrls: ['../form-data-table/form-data-table.component.scss']
+  styleUrls: ['./eingang-header.component.scss']
 })
 export class EingangHeaderComponent {
 

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-body/vorgang-detail-body.component.html → goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-antrag-data/vorgang-detail-antrag-data.component.html

-<goofy-client-expansion-panel *ngIf="vorgangWithEingang.eingang as eingang" data-test-id="formulardaten-panel"
-	headline="Formulardaten">
+<div *ngIf="eingang" data-test-id="formulardaten-panel">
 
 	<goofy-client-expansion-panel *ngIf="eingang.header as header" data-test-id="header-panel"
 		headline="Header">
@@ -17,4 +16,4 @@
 		[formData]="eingang.formData">
 	</goofy-client-form-data-table>
 
-</goofy-client-expansion-panel>
+</div>

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-body/vorgang-detail-body.component.scss → goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-antrag-data/vorgang-detail-antrag-data.component.scss

 :host {
 	display: flex;
+	margin-top: 0.25rem;
 }

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-body/vorgang-detail-body.component.spec.ts → goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-antrag-data/vorgang-detail-antrag-data.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ExpansionPanelComponent } from 'libs/ui/src/lib/ui/expansion-panel/expansion-panel.component';
-import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
+import { createEingang } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
+import { FormDataTableComponent } from '../form-data-table/form-data-table.component';
 import { EingangHeaderComponent } from './eingang-header/eingang-header.component';
-import { FormDataTableComponent } from './form-data-table/form-data-table.component';
-import { VorgangDetailBodyComponent } from './vorgang-detail-body.component';
+import { VorgangDetailAntragDataComponent } from './vorgang-detail-antrag-data.component';
 
-describe('VorgangDetailBodyComponent', () => {
-	let component: VorgangDetailBodyComponent;
-	let fixture: ComponentFixture<VorgangDetailBodyComponent>;
+describe('VorgangDetailAntragDataComponent', () => {
+	let component: VorgangDetailAntragDataComponent;
+	let fixture: ComponentFixture<VorgangDetailAntragDataComponent>;
 
 	const formulardatenPanelSelector = '[data-test-id="formulardaten-panel"]';
 	const headerPanelSelector = '[data-test-id="header-panel"]';
@@ -18,7 +18,7 @@ describe('VorgangDetailBodyComponent', () => {
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			declarations: [
-				VorgangDetailBodyComponent,
+				VorgangDetailAntragDataComponent,
 				MockComponent(ExpansionPanelComponent),
 				MockComponent(EingangHeaderComponent),
 				MockComponent(FormDataTableComponent),
@@ -28,9 +28,9 @@ describe('VorgangDetailBodyComponent', () => {
 	});
 
 	beforeEach(() => {
-		fixture = TestBed.createComponent(VorgangDetailBodyComponent);
+		fixture = TestBed.createComponent(VorgangDetailAntragDataComponent);
 		component = fixture.componentInstance;
-		component.vorgangWithEingang = { ...createVorgangWithEingangResource(), eingang: null };
+		component.eingang = null;
 		fixture.detectChanges();
 	});
 
@@ -47,7 +47,7 @@ describe('VorgangDetailBodyComponent', () => {
 		})
 
 		it('should be visible if data has children', () => {
-			component.vorgangWithEingang = createVorgangWithEingangResource();
+			component.eingang = createEingang();
 			fixture.detectChanges();
 
 			const formulardatenPanel = fixture.nativeElement.querySelector(formulardatenPanelSelector);
@@ -65,7 +65,7 @@ describe('VorgangDetailBodyComponent', () => {
 		})
 
 		it('should be visible if data has children', () => {
-			component.vorgangWithEingang = createVorgangWithEingangResource();
+			component.eingang = createEingang();
 			fixture.detectChanges();
 
 			const headerPanel = fixture.nativeElement.querySelector(headerPanelSelector);
@@ -83,8 +83,8 @@ describe('VorgangDetailBodyComponent', () => {
 		})
 
 		it('should be visible if data has children', () => {
-			component.vorgangWithEingang = createVorgangWithEingangResource();
-			component.vorgangWithEingang.eingang.formData = {};
+			component.eingang = createEingang();
+			component.eingang.formData = {};
 			fixture.detectChanges();
 
 			const formulardatenDataTable = fixture.nativeElement.querySelector(formulardatenDataTableSelector);
@@ -102,8 +102,8 @@ describe('VorgangDetailBodyComponent', () => {
 		})
 
 		it('should be visible if data has children', () => {
-			component.vorgangWithEingang = createVorgangWithEingangResource();
-			component.vorgangWithEingang.eingang.antragsteller.otherData = {};
+			component.eingang = createEingang();
+			component.eingang.antragsteller.otherData = {};
 			fixture.detectChanges();
 
 			const antragstellerOtherDataTable = fixture.nativeElement.querySelector(antragstellerOtherDataTableSelector);