Merge pull request 'OZG-2499' (#69) from OZG-2499 into master

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

goofy-client/.gitignore

@@ -45,3 +45,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.angular

goofy-client/angular.json

@@ -741,6 +741,32 @@
 			},
 			"tags": []
 		},
+		"vorgang-historie": {
+			"projectType": "library",
+			"root": "libs/vorgang-historie",
+			"sourceRoot": "libs/vorgang-historie/src",
+			"prefix": "goofy-client",
+			"architect": {
+				"test": {
+					"builder": "@nrwl/jest:jest",
+					"outputs": ["coverage/libs/vorgang-historie"],
+					"options": {
+						"jestConfig": "libs/vorgang-historie/jest.config.js",
+						"passWithNoTests": true
+					}
+				},
+				"lint": {
+					"builder": "@nrwl/linter:eslint",
+					"options": {
+						"lintFilePatterns": [
+							"libs/vorgang-historie/src/**/*.ts",
+							"libs/vorgang-historie/src/**/*.html"
+						]
+					}
+				}
+			},
+			"tags": []
+		},
 		"vorgang-shared": {
 			"projectType": "library",
 			"root": "libs/vorgang-shared",

goofy-client/apps/goofy/src/styles/abstracts/_variables.scss

 @use '@angular/material' as mat;
 
 $grey: #777;
+$greyLight: rgba(0, 0, 0, 0.08);
 
 $background: #fafafa;
 $dark-background: #303030;

goofy-client/libs/tech-shared/src/index.ts

@@ -11,6 +11,7 @@ export * from './lib/pipe/file-size.pipe';
 export * from './lib/pipe/format-date-with-time.pipe';
 export * from './lib/pipe/format-to-pretty-date.pipe';
 export * from './lib/pipe/has-link.pipe';
+export * from './lib/pipe/not-has-link.pipe';
 export * from './lib/pipe/to-embedded-resource.pipe';
 export * from './lib/pipe/to-resource-uri.pipe';
 export * from './lib/pipe/to-traffic-light-tooltip.pipe';

goofy-client/libs/tech-shared/src/lib/pipe/not-has-link.pipe.spec.ts

+import { Resource } from '@ngxp/rest';
+import { createDummyResource } from 'libs/tech-shared/test/resource';
+import { NotHasLinkPipe } from './not-has-link.pipe';
+
+describe('NotHasLinkPipe', () => {
+	const selfLink: string = 'self';
+	const dummyLink: string = 'dummy';
+	const resource: Resource = createDummyResource([selfLink]);
+	const pipe: NotHasLinkPipe = new NotHasLinkPipe();
+
+	it('resource has link', () => {
+		const result: boolean = pipe.transform(resource, selfLink);
+
+		expect(result).toBe(false);
+	})
+	it('resource doesnt has link', () => {
+		const result: boolean = pipe.transform(resource, dummyLink);
+
+		expect(result).toBe(true);
+	})
+})

goofy-client/libs/tech-shared/src/lib/pipe/not-has-link.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { hasLink, Resource } from '@ngxp/rest';
+
+@Pipe({ name: 'notHasLink' })
+export class NotHasLinkPipe implements PipeTransform {
+	transform(resource: Resource, link: string) {
+		return !hasLink(resource, link);
+	}
+}

goofy-client/libs/tech-shared/src/lib/tech-shared.module.ts

@@ -8,6 +8,7 @@ import { FileSizePipe } from './pipe/file-size.pipe';
 import { FormatDateWithTimePipe } from './pipe/format-date-with-time.pipe';
 import { FormatToPrettyDatePipe } from './pipe/format-to-pretty-date.pipe';
 import { HasLinkPipe } from './pipe/has-link.pipe';
+import { NotHasLinkPipe } from './pipe/not-has-link.pipe';
 import { ToEmbeddedResourcesPipe } from './pipe/to-embedded-resource.pipe';
 import { ToResourceUriPipe } from './pipe/to-resource-uri.pipe';
 import { ToTrafficLightTooltipPipe } from './pipe/to-traffic-light-tooltip.pipe';
@@ -20,6 +21,7 @@ import { ToTrafficLightPipe } from './pipe/to-traffic-light.pipe';
 		EnumToLabelPipe,
 		FormatDateWithTimePipe,
 		HasLinkPipe,
+		NotHasLinkPipe,
 		ToResourceUriPipe,
 		ToTrafficLightPipe,
 		ToTrafficLightTooltipPipe,
@@ -32,6 +34,7 @@ import { ToTrafficLightPipe } from './pipe/to-traffic-light.pipe';
 		EnumToLabelPipe,
 		FormatDateWithTimePipe,
 		HasLinkPipe,
+		NotHasLinkPipe,
 		ToResourceUriPipe,
 		ToTrafficLightPipe,
 		ToTrafficLightTooltipPipe,

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-daten/vorgang-detail-formular-daten.component.html

@@ -12,17 +12,23 @@
 			</goofy-client-vorgang-detail-meta-data>
 		</mat-tab>
 		<mat-tab label="Datenrepräsentation ({{vorgangWithEingang.eingang.numberOfRepresentations}})"
-			[disabled]="!(vorgangWithEingang | hasLink:vorgangWithEingangLinkRel.REPRESENTATIONS)">
+			[disabled]="vorgangWithEingang | notHasLink:vorgangWithEingangLinkRel.REPRESENTATIONS">
 				<ng-template matTabContent>
 					<goofy-client-vorgang-detail-representation-list data-test-id="tab-representations-list" [vorgangWithEingang]="vorgangWithEingang"></goofy-client-vorgang-detail-representation-list>
 				</ng-template>
 		</mat-tab>
 		<mat-tab label="Anhänge ({{vorgangWithEingang.eingang.numberOfAttachments}})"
-			[disabled]="!(vorgangWithEingang | hasLink:vorgangWithEingangLinkRel.ATTACHMENTS)">
+			[disabled]="vorgangWithEingang | notHasLink:vorgangWithEingangLinkRel.ATTACHMENTS">
 				<ng-template matTabContent>
 					<goofy-client-vorgang-detail-attachment-list data-test-id="tab-attachments-list" [vorgangWithEingang]="vorgangWithEingang"></goofy-client-vorgang-detail-attachment-list>
 				</ng-template>
 		</mat-tab>
+		<mat-tab label="Historie"
+			[disabled]="vorgangWithEingang | notHasLink:vorgangWithEingangLinkRel.HISTORIE">
+				<ng-template matTabContent>
+					<goofy-client-vorgang-historie-container data-test-id="tab-historie-container" [vorgangWithEingang]="vorgangWithEingang"></goofy-client-vorgang-historie-container>
+				</ng-template>
+		</mat-tab>
 	</mat-tab-group>
 
 </goofy-client-expansion-panel>

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-daten/vorgang-detail-formular-daten.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HasLinkPipe } from '@goofy-client/tech-shared';
+import { HasLinkPipe, NotHasLinkPipe } from '@goofy-client/tech-shared';
 import { getElementFromFixture } from '@goofy-client/test-utils';
 import { ExpansionPanelComponent } from '@goofy-client/ui';
+import { VorgangHistorieContainerComponent } from '@goofy-client/vorgang-historie';
 import { VorgangWithEingangLinkRel, VorgangWithEingangResource } from '@goofy-client/vorgang-shared';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
@@ -20,10 +21,12 @@ describe('VorgangDetailFormularDatenComponent', () => {
 	const tabMetaData: string = 'div[role=tab]:nth-child(2)';
 	const tabRepresentations: string = 'div[role=tab]:nth-child(3)';
 	const tabAttachments: string = 'div[role=tab]:nth-child(4)';
+	const tabHistorie: string = 'div[role=tab]:nth-child(5)';
 
 	const vorgang: VorgangWithEingangResource = createVorgangWithEingangResource();
 	const vorgangWithAttachments: VorgangWithEingangResource = createVorgangWithEingangResource([VorgangWithEingangLinkRel.ATTACHMENTS]);
 	const vorgangWithRepresentations: VorgangWithEingangResource = createVorgangWithEingangResource([VorgangWithEingangLinkRel.REPRESENTATIONS]);
+	const vorgangWithHistorie: VorgangWithEingangResource = createVorgangWithEingangResource([VorgangWithEingangLinkRel.HISTORIE]);
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
@@ -33,12 +36,14 @@ describe('VorgangDetailFormularDatenComponent', () => {
 			],
 			declarations: [
 				HasLinkPipe,
+				NotHasLinkPipe,
 				VorgangDetailFormularDatenComponent,
 				MockComponent(VorgangDetailAntragDataComponent),
 				MockComponent(VorgangDetailMetaDataComponent),
 				MockComponent(VorgangDetailAttachmentListComponent),
 				MockComponent(VorgangDetailRepresentationListComponent),
 				MockComponent(ExpansionPanelComponent),
+				MockComponent(VorgangHistorieContainerComponent),
 			]
 		}).compileComponents();
 	});
@@ -139,4 +144,24 @@ describe('VorgangDetailFormularDatenComponent', () => {
 		})
 	})
 
+	describe('Tab Historie', () => {
+		it('should be enabled if Link "historie" exists', () => {
+			component.vorgangWithEingang = vorgangWithHistorie;
+
+			fixture.detectChanges();
+			const tab = getElementFromFixture(fixture, tabHistorie);
+
+			expect(tab).not.toHaveClass('mat-tab-disabled');
+		})
+
+		it('should be disable if no Link "historie"', () => {
+			component.vorgangWithEingang = vorgang;
+
+			fixture.detectChanges();
+			const tab = getElementFromFixture(fixture, tabHistorie);
+
+			expect(tab).toHaveClass('mat-tab-disabled');
+		})
+	})
+
 });

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts

@@ -10,6 +10,7 @@ import { TechSharedModule } from '@goofy-client/tech-shared';
 import { UiModule } from '@goofy-client/ui';
 import { UserProfileModule } from '@goofy-client/user-profile';
 import { UserProfileSharedModule } from '@goofy-client/user-profile-shared';
+import { VorgangHistorieModule } from '@goofy-client/vorgang-historie';
 import { VorgangSharedModule } from '@goofy-client/vorgang-shared';
 import { VorgangSharedUiModule } from '@goofy-client/vorgang-shared-ui';
 import { WiedervorlageModule } from '@goofy-client/wiedervorlage';
@@ -59,7 +60,8 @@ const routes: Routes = [
 		UserProfileModule,
 		UserProfileSharedModule,
 		PostfachSharedModule,
-		PostfachModule
+		PostfachModule,
+		VorgangHistorieModule
 	],
 	declarations: [
 		VorgangDetailPageComponent,

goofy-client/libs/vorgang-historie/.eslintrc.json

+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"extends": [
+				"plugin:@nrwl/nx/angular",
+				"plugin:@angular-eslint/template/process-inline-templates"
+			],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "goofyClient",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "goofy-client",
+						"style": "kebab-case"
+					}
+				]
+			}
+		},
+		{
+			"files": ["*.html"],
+			"extends": ["plugin:@nrwl/nx/angular-template"],
+			"rules": {}
+		}
+	]
+}

goofy-client/libs/vorgang-historie/README.md

+# vorgang-historie
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test vorgang-historie` to execute the unit tests.

goofy-client/libs/vorgang-historie/jest.config.js

+module.exports = {
+	displayName: 'vorgang-historie',
+	preset: '../../jest.preset.js',
+	setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+	globals: {
+		'ts-jest': {
+			tsconfig: '<rootDir>/tsconfig.spec.json',
+			stringifyContentPathRegex: '\\.(html|svg)$',
+		},
+	},
+	coverageDirectory: '../../coverage/libs/vorgang-historie',
+	transform: {
+		'^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+	},
+	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+	snapshotSerializers: [
+		'jest-preset-angular/build/serializers/no-ng-attributes',
+		'jest-preset-angular/build/serializers/ng-snapshot',
+		'jest-preset-angular/build/serializers/html-comment',
+	],
+};

goofy-client/libs/vorgang-historie/src/index.ts

+export * from './lib/vorgang-historie.module';
+
+export * from './lib/vorgang-historie-container/vorgang-historie-container.component';

goofy-client/libs/vorgang-historie/src/lib/vorgang-historie-container/vorgang-historie-container.component.html

+<goofy-client-vorgang-historie-list data-test-id="tab-historie-list-container" [vorgangWithEingang]="vorgangWithEingang"></goofy-client-vorgang-historie-list>
\ No newline at end of file

goofy-client/libs/vorgang-historie/src/lib/vorgang-historie-container/vorgang-historie-container.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VorgangHistorieContainerComponent } from './vorgang-historie-container.component';
+
+describe('VorgangHistorieContainerComponent', () => {
+	let component: VorgangHistorieContainerComponent;
+	let fixture: ComponentFixture<VorgangHistorieContainerComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [VorgangHistorieContainerComponent],
+		}).compileComponents();
+	});
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(VorgangHistorieContainerComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

goofy-client/libs/vorgang-historie/src/lib/vorgang-historie-container/vorgang-historie-container.component.ts

+import { Component, Input } from '@angular/core';
+import { VorgangWithEingangResource } from '@goofy-client/vorgang-shared';
+
+@Component({
+	selector: 'goofy-client-vorgang-historie-container',
+	templateUrl: './vorgang-historie-container.component.html',
+	styleUrls: ['./vorgang-historie-container.component.scss'],
+})
+export class VorgangHistorieContainerComponent {
+
+	@Input() vorgangWithEingang: VorgangWithEingangResource;
+
+}

goofy-client/libs/vorgang-historie/src/lib/vorgang-historie-container/vorgang-historie-list/vorgang-historie-list.component.html

+<ul>
+	<li data-test-id="created-at">Der Vorgang wurde am {{ vorgangWithEingang.createdAt | formatDateWithTimePipe:false }} erstellt.</li>
+</ul>
\ No newline at end of file

goofy-client/libs/vorgang-historie/src/lib/vorgang-historie-container/vorgang-historie-list/vorgang-historie-list.component.scss

+@import "variables";
+
+ul {
+	margin-top: 0;
+	padding-left: 0;
+	width: 100%;
+
+	li {
+		border-bottom: 1px solid $greyLight;
+		padding: 0.75rem 0;
+	}
+}
\ No newline at end of file