Skip to content
Snippets Groups Projects
Commit 8b9933eb authored by OZGCloud's avatar OZGCloud
Browse files

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
parents 33e8661a 47de46b0
No related branches found
No related tags found
No related merge requests found
Showing
with 86 additions and 117 deletions
import { SpinnerE2EComponent } from '../ui/spinner.e2e.component'; import { SpinnerE2EComponent } from '../ui/spinner.e2e.component';
export class AnhangE2EComponent { export class AnhangE2EComponent {
private readonly locatorAnhaenge: string = 'anhaenge'; private readonly locatorAnhaenge: string = 'files';
private readonly locatorEmptyAnhaenge: string = 'empty-anhaenge'; private readonly locatorEmptyAnhaenge: string = 'empty-files';
private spinnerComponent: SpinnerE2EComponent = new SpinnerE2EComponent() private spinnerComponent: SpinnerE2EComponent = new SpinnerE2EComponent()
......
...@@ -65,10 +65,6 @@ describe.skip('FIXME -> auf Grid FS umstellen; Vorgang Anhang', () => { ...@@ -65,10 +65,6 @@ describe.skip('FIXME -> auf Grid FS umstellen; Vorgang Anhang', () => {
exist(vorgangHeader.getRoot()); exist(vorgangHeader.getRoot());
}) })
it('Should show keine Anhänge vorhanden', () => {
exist(anhangContainer.getEmptyAnhaenge());
})
it('click on navigate back', () => { it('click on navigate back', () => {
subnavigation.clickBackButton(); subnavigation.clickBackButton();
vorgangList.waitForSpinnerToDisappear(); vorgangList.waitForSpinnerToDisappear();
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
@import "abstracts/variables"; @import "abstracts/variables";
@import "base/setup"; @import "base/setup";
@import "layout/main"; @import "layout/main";
@import "material/tabs";
@import "~libs/navigation/src/lib/navigation/navigation.theme"; @import "~libs/navigation/src/lib/navigation/navigation.theme";
@import "~libs/navigation/src/lib/header-container/header/header.theme"; @import "~libs/navigation/src/lib/header-container/header/header.theme";
@import "~libs/ui/src/lib/ui/expansion-panel/expansion-panel.theme"; @import "~libs/ui/src/lib/ui/expansion-panel/expansion-panel.theme";
......
.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-expansion-panel headline="Anhänge"> <div class="container">
<ng-container *ngIf="attachmentStateResource$ | async as attachmentStateResource"> <goofy-client-spinner [stateResource]="fileListResource">
<goofy-client-anhaenge data-test-id="files" class="files"
<goofy-client-spinner [stateResource]="attachmentStateResource"> [attachments]="fileListResource.resource | toEmbeddedResources: fileListRel.FILE_LIST">
<goofy-client-anhaenge *ngIf="vorgangWithEingang | hasLink: linkRel.ATTACHMENTS; else emptyAnhaenge" data-test-id="anhaenge" class="files"
[attachments]="attachmentStateResource.resource | toEmbeddedResources: fileListRel.FILE_LIST">
</goofy-client-anhaenge> </goofy-client-anhaenge>
<ng-template #emptyAnhaenge>
<p data-test-id="empty-anhaenge">keine Anhänge vorhanden</p>
</ng-template>
</goofy-client-spinner> </goofy-client-spinner>
</div>
</ng-container>
</goofy-client-expansion-panel>
...@@ -10,3 +10,7 @@ ...@@ -10,3 +10,7 @@
p { p {
color: #999; color: #999;
} }
.container {
margin-top: 1rem;
}
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing'; 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 { mock } from '@goofy-client/test-utils';
import { ExpansionPanelComponent, SpinnerComponent } from '@goofy-client/ui'; import { ExpansionPanelComponent, SpinnerComponent } from '@goofy-client/ui';
import { VorgangService, VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@goofy-client/vorgang-shared'; import { VorgangService } from '@goofy-client/vorgang-shared';
import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang'; import { createOzgFileListResource } from 'libs/ozg-file-shared/test/ozg-file';
import { MockComponent } from 'ng-mocks'; import { MockComponent } from 'ng-mocks';
import { of } from 'rxjs';
import { AnhaengeComponent } from './anhaenge/anhaenge.component'; import { AnhaengeComponent } from './anhaenge/anhaenge.component';
import { AnhangListContainerComponent } from './anhang-list-container.component'; import { AnhangListContainerComponent } from './anhang-list-container.component';
...@@ -13,13 +13,11 @@ describe('AnhangListContainerComponent', () => { ...@@ -13,13 +13,11 @@ describe('AnhangListContainerComponent', () => {
let component: AnhangListContainerComponent; let component: AnhangListContainerComponent;
let fixture: ComponentFixture<AnhangListContainerComponent>; let fixture: ComponentFixture<AnhangListContainerComponent>;
const emptyAnhaenge: string = '[data-test-id="empty-anhaenge"]'; const anhaenge: string = '[data-test-id="files"]';
const anhaenge: string = '[data-test-id="anhaenge"]';
const vorgangService = mock(VorgangService); const vorgangService = mock(VorgangService);
const vorgangWithAttachments: VorgangWithEingangResource = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ATTACHMENTS]); const fileListResource: StateResource<OzgFileListResource> = createStateResource(createOzgFileListResource());
const vorgang: VorgangWithEingangResource = createVorgangWithEingangResource();
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
...@@ -43,7 +41,7 @@ describe('AnhangListContainerComponent', () => { ...@@ -43,7 +41,7 @@ describe('AnhangListContainerComponent', () => {
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(AnhangListContainerComponent); fixture = TestBed.createComponent(AnhangListContainerComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
component.attachmentStateResource$ = of(createEmptyStateResource()); component.fileListResource = createEmptyStateResource();
fixture.detectChanges(); fixture.detectChanges();
}); });
...@@ -51,10 +49,10 @@ describe('AnhangListContainerComponent', () => { ...@@ -51,10 +49,10 @@ describe('AnhangListContainerComponent', () => {
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
describe('on vorgang with "attachment" link', () => { describe('on vorgang with files', () => {
beforeEach(() => { beforeEach(() => {
component.vorgangWithEingang = vorgangWithAttachments; component.fileListResource = fileListResource;
fixture.detectChanges(); fixture.detectChanges();
}) })
...@@ -63,50 +61,5 @@ describe('AnhangListContainerComponent', () => { ...@@ -63,50 +61,5 @@ describe('AnhangListContainerComponent', () => {
expect(element).toBeInstanceOf(HTMLElement); 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
import { Component, Input, OnChanges } from '@angular/core'; import { Component, Input } from '@angular/core';
import { OzgFileListLinkRel, OzgFileListResource } from '@goofy-client/ozg-file-shared'; import { OzgFileListLinkRel, OzgFileListResource } from '@goofy-client/ozg-file-shared';
import { createEmptyStateResource, StateResource } from '@goofy-client/tech-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({ @Component({
selector: 'goofy-client-anhang-list-container', selector: 'goofy-client-anhang-list-container',
templateUrl: './anhang-list-container.component.html', templateUrl: './anhang-list-container.component.html',
styleUrls: ['./anhang-list-container.component.scss'] 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; 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();
}
}
} }
...@@ -18,6 +18,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar'; ...@@ -18,6 +18,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { TechSharedModule } from '@goofy-client/tech-shared'; import { TechSharedModule } from '@goofy-client/tech-shared';
import { HttpConnectionTimeoutInterceptor } from '../interceptor/http-connection-timeout.interceptor'; import { HttpConnectionTimeoutInterceptor } from '../interceptor/http-connection-timeout.interceptor';
...@@ -28,6 +29,7 @@ import { ButtonWithSpinnerComponent } from './button-with-spinner/button-with-sp ...@@ -28,6 +29,7 @@ import { ButtonWithSpinnerComponent } from './button-with-spinner/button-with-sp
import { AutocompleteEditorComponent } from './editor/autocomplete-editor/autocomplete-editor.component'; import { AutocompleteEditorComponent } from './editor/autocomplete-editor/autocomplete-editor.component';
import { DateEditorComponent } from './editor/date-editor/date-editor.component'; import { DateEditorComponent } from './editor/date-editor/date-editor.component';
import { EnumEditorComponent } from './editor/enum-editor/enum-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 { TextEditorComponent } from './editor/text-editor/text-editor.component';
import { TextAreaEditorComponent } from './editor/textarea-editor/textarea-editor.component'; import { TextAreaEditorComponent } from './editor/textarea-editor/textarea-editor.component';
import { ExpansionPanelComponent } from './expansion-panel/expansion-panel.component'; import { ExpansionPanelComponent } from './expansion-panel/expansion-panel.component';
...@@ -41,7 +43,6 @@ import { ProgressBarComponent } from './progress-bar/progress-bar.component'; ...@@ -41,7 +43,6 @@ import { ProgressBarComponent } from './progress-bar/progress-bar.component';
import { SpinnerComponent } from './spinner/spinner.component'; import { SpinnerComponent } from './spinner/spinner.component';
import { SubnavigationComponent } from './subnavigation/subnavigation.component'; import { SubnavigationComponent } from './subnavigation/subnavigation.component';
import { ValidationErrorComponent } from './validation-error/validation-error.component'; import { ValidationErrorComponent } from './validation-error/validation-error.component';
import { FileUploadEditorComponent } from './editor/file-upload-editor/file-upload-editor.component';
const components = [ const components = [
SubnavigationComponent, SubnavigationComponent,
...@@ -86,6 +87,7 @@ const modules = [ ...@@ -86,6 +87,7 @@ const modules = [
ReactiveFormsModule, ReactiveFormsModule,
MatAutocompleteModule, MatAutocompleteModule,
MatDialogModule, MatDialogModule,
MatTabsModule,
CommonModule, CommonModule,
TechSharedModule TechSharedModule
]; ];
......
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;
}
...@@ -4,7 +4,7 @@ import { EingangHeader } from '@goofy-client/vorgang-shared'; ...@@ -4,7 +4,7 @@ import { EingangHeader } from '@goofy-client/vorgang-shared';
@Component({ @Component({
selector: 'goofy-client-eingang-header', selector: 'goofy-client-eingang-header',
templateUrl: './eingang-header.component.html', templateUrl: './eingang-header.component.html',
styleUrls: ['../form-data-table/form-data-table.component.scss'] styleUrls: ['./eingang-header.component.scss']
}) })
export class EingangHeaderComponent { export class EingangHeaderComponent {
......
<goofy-client-expansion-panel *ngIf="vorgangWithEingang.eingang as eingang" data-test-id="formulardaten-panel" <div *ngIf="eingang" data-test-id="formulardaten-panel">
headline="Formulardaten">
<goofy-client-expansion-panel *ngIf="eingang.header as header" data-test-id="header-panel" <goofy-client-expansion-panel *ngIf="eingang.header as header" data-test-id="header-panel"
headline="Header"> headline="Header">
...@@ -17,4 +16,4 @@ ...@@ -17,4 +16,4 @@
[formData]="eingang.formData"> [formData]="eingang.formData">
</goofy-client-form-data-table> </goofy-client-form-data-table>
</goofy-client-expansion-panel> </div>
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExpansionPanelComponent } from 'libs/ui/src/lib/ui/expansion-panel/expansion-panel.component'; 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 { MockComponent } from 'ng-mocks';
import { FormDataTableComponent } from '../form-data-table/form-data-table.component';
import { EingangHeaderComponent } from './eingang-header/eingang-header.component'; import { EingangHeaderComponent } from './eingang-header/eingang-header.component';
import { FormDataTableComponent } from './form-data-table/form-data-table.component'; import { VorgangDetailAntragDataComponent } from './vorgang-detail-antrag-data.component';
import { VorgangDetailBodyComponent } from './vorgang-detail-body.component';
describe('VorgangDetailBodyComponent', () => { describe('VorgangDetailAntragDataComponent', () => {
let component: VorgangDetailBodyComponent; let component: VorgangDetailAntragDataComponent;
let fixture: ComponentFixture<VorgangDetailBodyComponent>; let fixture: ComponentFixture<VorgangDetailAntragDataComponent>;
const formulardatenPanelSelector = '[data-test-id="formulardaten-panel"]'; const formulardatenPanelSelector = '[data-test-id="formulardaten-panel"]';
const headerPanelSelector = '[data-test-id="header-panel"]'; const headerPanelSelector = '[data-test-id="header-panel"]';
...@@ -18,7 +18,7 @@ describe('VorgangDetailBodyComponent', () => { ...@@ -18,7 +18,7 @@ describe('VorgangDetailBodyComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ declarations: [
VorgangDetailBodyComponent, VorgangDetailAntragDataComponent,
MockComponent(ExpansionPanelComponent), MockComponent(ExpansionPanelComponent),
MockComponent(EingangHeaderComponent), MockComponent(EingangHeaderComponent),
MockComponent(FormDataTableComponent), MockComponent(FormDataTableComponent),
...@@ -28,9 +28,9 @@ describe('VorgangDetailBodyComponent', () => { ...@@ -28,9 +28,9 @@ describe('VorgangDetailBodyComponent', () => {
}); });
beforeEach(() => { beforeEach(() => {
fixture = TestBed.createComponent(VorgangDetailBodyComponent); fixture = TestBed.createComponent(VorgangDetailAntragDataComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
component.vorgangWithEingang = { ...createVorgangWithEingangResource(), eingang: null }; component.eingang = null;
fixture.detectChanges(); fixture.detectChanges();
}); });
...@@ -47,7 +47,7 @@ describe('VorgangDetailBodyComponent', () => { ...@@ -47,7 +47,7 @@ describe('VorgangDetailBodyComponent', () => {
}) })
it('should be visible if data has children', () => { it('should be visible if data has children', () => {
component.vorgangWithEingang = createVorgangWithEingangResource(); component.eingang = createEingang();
fixture.detectChanges(); fixture.detectChanges();
const formulardatenPanel = fixture.nativeElement.querySelector(formulardatenPanelSelector); const formulardatenPanel = fixture.nativeElement.querySelector(formulardatenPanelSelector);
...@@ -65,7 +65,7 @@ describe('VorgangDetailBodyComponent', () => { ...@@ -65,7 +65,7 @@ describe('VorgangDetailBodyComponent', () => {
}) })
it('should be visible if data has children', () => { it('should be visible if data has children', () => {
component.vorgangWithEingang = createVorgangWithEingangResource(); component.eingang = createEingang();
fixture.detectChanges(); fixture.detectChanges();
const headerPanel = fixture.nativeElement.querySelector(headerPanelSelector); const headerPanel = fixture.nativeElement.querySelector(headerPanelSelector);
...@@ -83,8 +83,8 @@ describe('VorgangDetailBodyComponent', () => { ...@@ -83,8 +83,8 @@ describe('VorgangDetailBodyComponent', () => {
}) })
it('should be visible if data has children', () => { it('should be visible if data has children', () => {
component.vorgangWithEingang = createVorgangWithEingangResource(); component.eingang = createEingang();
component.vorgangWithEingang.eingang.formData = {}; component.eingang.formData = {};
fixture.detectChanges(); fixture.detectChanges();
const formulardatenDataTable = fixture.nativeElement.querySelector(formulardatenDataTableSelector); const formulardatenDataTable = fixture.nativeElement.querySelector(formulardatenDataTableSelector);
...@@ -102,8 +102,8 @@ describe('VorgangDetailBodyComponent', () => { ...@@ -102,8 +102,8 @@ describe('VorgangDetailBodyComponent', () => {
}) })
it('should be visible if data has children', () => { it('should be visible if data has children', () => {
component.vorgangWithEingang = createVorgangWithEingangResource(); component.eingang = createEingang();
component.vorgangWithEingang.eingang.antragsteller.otherData = {}; component.eingang.antragsteller.otherData = {};
fixture.detectChanges(); fixture.detectChanges();
const antragstellerOtherDataTable = fixture.nativeElement.querySelector(antragstellerOtherDataTableSelector); const antragstellerOtherDataTable = fixture.nativeElement.querySelector(antragstellerOtherDataTableSelector);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment