Merge pull request #252 from amosproj/feat/xd-250

feat: add cases of facility to frontend
amosproj · Jul 12, 2024 · 5e86870 · 5e86870
2 parents 090a6c5 + cb3543e
commit 5e86870
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 35 deletions.
diff --git a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.html
@@ -7,7 +7,7 @@
     hasBackButton="true"
     headerTitle="Cases Overview"
     headerSubtitle="View all cases including their status, priority and type"
-    (backButtonClick)="router.navigate(['../'], { relativeTo: route })"
+    (backButtonClick)="location.back()"
 ></ix-content-header>
 
 <ix-content>

diff --git a/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts b/libs/cases/frontend/view/src/lib/components/case-browse/case-browse.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -7,7 +7,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { XdCasesFacade } from '@frontend/cases/frontend/domain';
 import { FilterState, IxCategoryFilterCustomEvent, IxModule } from '@siemens/ix-angular';
 import { ICaseResponse } from 'cases-shared-models';
@@ -87,8 +87,7 @@ export class CaseBrowseComponent {
     };
 
     constructor(
-        protected router: Router,
-        protected route: ActivatedRoute,
+        protected location: Location,
         protected localStorage: LocalStorageService,
         private _casesFacade: XdCasesFacade,
     ) {}

diff --git a/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html b/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.html
@@ -3,7 +3,7 @@
     hasBackButton="true"
     headerTitle="Create a new Case"
     headerSubtitle="View all facilities and their status"
-    (backButtonClick)="router.navigate(['../'], { relativeTo: route })"
+    (backButtonClick)="location.back()"
 ></ix-content-header>
 
 <ix-content>

diff --git a/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.spec.ts b/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.spec.ts
@@ -11,7 +11,7 @@ describe('CreateCaseComponent', () => {
 		await TestBed.configureTestingModule({
 			imports: [ CreateCaseComponent, HttpClientTestingModule ],
             providers: [
-                { provide: ActivatedRoute, useValue: {}, },
+                { provide: ActivatedRoute, useValue: { snapshot: { params: ''}}, },
             ]
 		}).compileComponents();
 

diff --git a/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts b/libs/cases/frontend/view/src/lib/components/create-case/create-case.component.ts
@@ -1,10 +1,10 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import {
 	ChangeDetectionStrategy, Component, inject, OnInit, signal, ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { faker } from '@faker-js/faker';
 import { XdCasesFacade } from '@frontend/cases/frontend/domain';
 import { XdBrowseFacade } from '@frontend/facilities/frontend/domain';
@@ -43,7 +43,7 @@ export class CreateCaseComponent implements OnInit {
     priorityPlaceholder = signal('Select Priority');
 
     constructor(
-        protected readonly router: Router,
+        protected readonly location: Location,
         protected readonly route: ActivatedRoute,
         private readonly toastService: ToastService
     ) {}

diff --git a/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.html b/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.html
@@ -15,7 +15,7 @@
         hasBackButton="true"
         headerTitle="Details of Facility {{ _case.title }}"
         headerSubtitle="View all facilities and their status"
-        (backButtonClick)="router.navigate(['../'], { relativeTo: route })"
+        (backButtonClick)="location.back()"
     ></ix-content-header>
 
     <ix-content>

diff --git a/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts b/libs/cases/frontend/view/src/lib/components/detail-case/detail-case.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import {
 	ChangeDetectionStrategy,
 	Component,
@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { XdCasesFacade } from '@frontend/cases/frontend/domain';
 import { IxModule, ModalService, ToastService } from '@siemens/ix-angular';
 import { ECasePriority, ECaseStatus, ECaseType, ICaseResponse } from 'cases-shared-models';
@@ -39,8 +39,8 @@ export class DetailCaseComponent {
 	datePattern = /^\d{4}-\d{2}-\d{2}T00:00:00\.000Z$/;
 
 	constructor(
-		protected router: Router,
-		protected route: ActivatedRoute,
+        protected readonly location: Location,
+        protected readonly route: ActivatedRoute,
 		private readonly _modalService: ModalService,
 		private readonly toastService: ToastService,
 	) {}

diff --git a/libs/facilities/frontend/domain/src/lib/application/facades/browse.facade.ts b/libs/facilities/frontend/domain/src/lib/application/facades/browse.facade.ts
@@ -28,7 +28,7 @@ export class XdBrowseFacade {
 							'water-plant',
 							'truck',
 						]),
-						notification: `${faker.number.int({ min: 0, max: 99 })}`,
+						cases: timeSeriesItem.cases,
 						heading: timeSeriesItem.name,
 						subheading: timeSeriesItem.description,
 						status: timeSeriesItem.status,

diff --git a/libs/facilities/frontend/domain/src/lib/application/facades/details.facade.ts b/libs/facilities/frontend/domain/src/lib/application/facades/details.facade.ts
@@ -1,6 +1,6 @@
 import { inject, Injectable } from '@angular/core';
 import { faker } from '@faker-js/faker';
-import { map, tap } from 'rxjs';
+import { map } from 'rxjs';
 
 import { FacilitiesRequestService } from '../../infrastructure/facilities-request.service';
 import { TimeSeriesRequestService } from '../../infrastructure/timeseries-request.service';
@@ -29,7 +29,7 @@ export class XdDetailsFacade {
 						'water-plant',
 						'truck',
 					]),
-					notification: `${faker.number.int({ min: 0, max: 99 })}`,
+                    cases: timeSeriesItem.cases,
 					heading: timeSeriesItem.name,
 					subheading: timeSeriesItem.description,
 					status: timeSeriesItem.status,

diff --git a/libs/facilities/frontend/view/src/lib/components/browse/browse.page.html b/libs/facilities/frontend/view/src/lib/components/browse/browse.page.html
@@ -12,7 +12,7 @@
     hasBackButton="true"
     headerTitle="Facilities Overview"
     headerSubtitle="View all facilities and their status"
-    (backButtonClick)="router.navigate(['../'], { relativeTo: route })"
+    (backButtonClick)="location.back()"
 ></ix-content-header>
 
 <ix-content>
@@ -22,7 +22,7 @@
                 @for (facility of facilities; track facility.id) {
                 <ix-push-card
                     [icon]="facility.icon"
-                    [notification]="facility.notification"
+                    [notification]="facility.cases.length > 0 ? facility.cases.length : '' "
                     [heading]="facility.heading"
                     [subheading]="facility.subheading"
                     [variant]="StatusToColorRecord[facility.status]"

diff --git a/libs/facilities/frontend/view/src/lib/components/browse/browse.page.ts b/libs/facilities/frontend/view/src/lib/components/browse/browse.page.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -7,7 +7,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { XdBrowseFacade } from '@frontend/facilities/frontend/domain';
 import { StatusToColorRecord } from '@frontend/facilities/frontend/models';
 import { IxModule } from '@siemens/ix-angular';
@@ -48,7 +48,10 @@ export class XdBrowsePage {
        }
     });
 
-    constructor(protected readonly router: Router, protected readonly route: ActivatedRoute, private readonly localStorageService: LocalStorageService) {
+    constructor(
+        protected readonly router: Router,
+        protected readonly location: Location,
+        private readonly localStorageService: LocalStorageService) {
     }
 
     toggleView() {

diff --git a/libs/facilities/frontend/view/src/lib/components/detail/detail.page.html b/libs/facilities/frontend/view/src/lib/components/detail/detail.page.html
@@ -5,7 +5,7 @@
     hasBackButton="true"
     headerTitle="Details of Facility {{ facility.heading }}"
     headerSubtitle="On this page you can see detailed information about the facility including charts about the pump and environment data"
-    (backButtonClick)="router.navigate(['../'], { relativeTo: route })"
+    (backButtonClick)="location.back()"
 ></ix-content-header>
 
 <ix-content>
@@ -56,19 +56,39 @@
             <ix-card-content>
                 <ix-card-title>
                     <ix-icon class="icon" name="tasks-open"></ix-icon>
-                    <span class="notification text-2xl">{{ facility.notification }}</span>
+                    <span class="notification text-2xl">{{ facility.cases.length > 0 ? facility.cases.length : '' }}</span>
                 </ix-card-title>
                 <ix-typography color="std" format="h4"> Open Cases </ix-typography>
                 <ix-typography color="std">
-                    There are {{ facility.notification }} open cases regarding this facility
+                   {{ notificationText() }}
                 </ix-typography>
-                <div class="mt-auto p-2">
-                    <ix-button
-                        [routerLink]="['/cases/create',{ facilityId: facility.id }]"
-                    >
-                        New Case
-                    </ix-button>
+                <div class="flex flex-row justify-between w-full">
+                    @if (facility.cases.length > 0) {
+                        <div>
+                            <div class="flex flex-col pt-2">
+                                <!-- add exception for 4 cases so it shows the 4th case and not 'Go to all Cases' -->
+                                @for (caseItem of facility.cases.slice(0, facility.cases.length === 4 ? 4 : 3);
+                                    track caseItem.id; let i=$index){
+                                    <ix-link-button [routerLink]="['/cases', caseItem.id]">
+                                        Case with id {{ caseItem.id }}
+                                    </ix-link-button>
+                                }
+                            </div>
+                            @if (facility.cases.length > 4 ) {
+                                <ix-link-button [routerLink]="['/cases']">
+                                    Go to all Cases
+                                </ix-link-button>
+                            }
+                        </div>
+                    }
+
+                    <div class="mt-auto p-2">
+                        <ix-button [routerLink]="['/cases/create',{ facilityId: facility.id }]">
+                            New Case
+                        </ix-button>
+                    </div>
                 </div>
+
             </ix-card-content>
         </ix-card>
 

diff --git a/libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts b/libs/facilities/frontend/view/src/lib/components/detail/detail.page.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -10,7 +10,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { XdDetailsFacade } from '@frontend/facilities/frontend/domain';
 import { StatusToColorRecord } from '@frontend/facilities/frontend/models';
 import { themeSwitcher } from '@siemens/ix';
@@ -39,6 +39,21 @@ import { PUMP_METRICS_FULL_NAME_MAP } from './models/pump-metrics-full-name.map'
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class XdDetailPage implements OnInit {
+
+    protected readonly notificationText = computed(() => {
+        const facility = this.facility();
+        if (!facility) return undefined;
+
+        switch (facility.cases.length) {
+            case 0:
+                return 'There are no cases regarding this facility';
+            case 1:
+                return 'There is one case regarding this facility';
+            default:
+                return `There are ${facility.cases.length} cases regarding this facility`;
+        }
+    })
+
 	protected theme = signal(convertThemeName(themeSwitcher.getCurrentTheme()));
 	protected readonly locked = signal(true);
 	protected readonly StatusToColorRecord = StatusToColorRecord;
@@ -264,8 +279,8 @@ export class XdDetailPage implements OnInit {
 
 
 	constructor(
-        protected router: Router,
 		protected route: ActivatedRoute,
+        protected location: Location,
 		private readonly _modalService: ModalService,
 	) {}
 
@@ -289,4 +304,18 @@ export class XdDetailPage implements OnInit {
 			this.locked.set(!currentValue);
 		});
 	}
+
+    mapNth(n: number) {
+        switch (n) {
+            case 1:
+                return 'First';
+            case 2:
+                return 'Second';
+            case 3:
+                return `${n}rd`
+            default:
+                return `${n}th`;
+        }
+    }
+
 }