fix(cb2-8764): implements use of breadcrumbs within reference data ad…

…ministration (#1082) * fix(cb2-8764): implemented use of breadcrumbs for reference data administration * fix(cb2-8764): removal of back buttons * fix(cb2-8764): added cancel buttons to add, amend, and delete components * fix(cb2-8764): delete button changed to design of warning
dvsa · Jul 21, 2023 · f197ca3 · f197ca3
1 parent 7e6e847
commit f197ca3
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 89 deletions.
diff --git a/src/app/features/reference-data/reference-data-add/reference-data-add.component.html b/src/app/features/reference-data/reference-data-add/reference-data-add.component.html
@@ -13,8 +13,7 @@
 
       <app-button-group>
         <app-button id="submit" (clicked)="handleSubmit()">Add</app-button>
-
-        <app-button id="cancel" design="link" (clicked)="navigateBack()">Back</app-button>
+        <app-button id="cancel" design="link" (clicked)="navigateBack()">Cancel</app-button>
       </app-button-group>
     </div>
   </div>

diff --git a/src/app/features/reference-data/reference-data-add/reference-data-add.component.ts b/src/app/features/reference-data/reference-data-add/reference-data-add.component.ts
@@ -35,7 +35,7 @@ export class ReferenceDataCreateComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.pipe(take(1)).subscribe(params => {
+    this.route.parent?.params.pipe(take(1)).subscribe(params => {
       this.type = params['type'];
       this.referenceDataService.loadReferenceDataByKey(ReferenceDataResourceType.ReferenceDataAdminType, this.type);
     });

diff --git a/...res/reference-data/reference-data-amend-history/reference-data-amend-history.component.ts b/...res/reference-data/reference-data-amend-history/reference-data-amend-history.component.ts
@@ -23,7 +23,6 @@ export class ReferenceDataAmendHistoryComponent implements OnInit {
 
   ngOnInit(): void {
     // load the audit history
-    // @ts-ignore
     this.store.dispatch(
       fetchReferenceDataByKeySearch({
         resourceType: (this.type + '#AUDIT') as ReferenceDataResourceType,

diff --git a/src/app/features/reference-data/reference-data-amend/reference-data-amend.component.html b/src/app/features/reference-data/reference-data-amend/reference-data-amend.component.html
@@ -18,7 +18,7 @@
 
       <app-button-group>
         <app-button id="submit" (clicked)="handleSubmit()">Amend</app-button>
-        <app-button id="cancel" design="link" (clicked)="navigateBack()">Back</app-button>
+        <app-button id="cancel" design="link" (clicked)="navigateBack()">Cancel</app-button>
       </app-button-group>
 
       <app-reference-data-amend-history

diff --git a/src/app/features/reference-data/reference-data-amend/reference-data-amend.component.ts b/src/app/features/reference-data/reference-data-amend/reference-data-amend.component.ts
@@ -7,10 +7,10 @@ import { DynamicFormService } from '@forms/services/dynamic-form.service';
 import { CustomFormGroup } from '@forms/services/dynamic-form.types';
 import { ReferenceDataResourceType } from '@models/reference-data.model';
 import { Roles } from '@models/roles.enum';
-import { Store, select } from '@ngrx/store';
+import { select, Store } from '@ngrx/store';
 import { ReferenceDataService } from '@services/reference-data/reference-data.service';
-import { ReferenceDataState, amendReferenceDataItem, selectReferenceDataByResourceKey } from '@store/reference-data';
-import { Observable, Subject, first } from 'rxjs';
+import { amendReferenceDataItem, ReferenceDataState, selectReferenceDataByResourceKey } from '@store/reference-data';
+import { first, Observable } from 'rxjs';
 
 @Component({
   selector: 'app-reference-data-amend',
@@ -35,13 +35,17 @@ export class ReferenceDataAmendComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.pipe(first()).subscribe(params => {
+    this.route.parent?.params.pipe(first()).subscribe(params => {
       this.type = params['type'];
+      // load the reference data admin type
+      this.referenceDataService.loadReferenceDataByKey(ReferenceDataResourceType.ReferenceDataAdminType, this.type);
+    });
+
+    this.route.params.pipe(first()).subscribe(params => {
       this.key = decodeURIComponent(params['key']);
 
       if (this.type && this.key) {
-        // load the reference data admin type, the current item and check if it has any audit history
-        this.referenceDataService.loadReferenceDataByKey(ReferenceDataResourceType.ReferenceDataAdminType, this.type);
+        // load the current item
         this.referenceDataService.loadReferenceDataByKey(this.type, this.key);
       }
     });

diff --git a/src/app/features/reference-data/reference-data-delete/reference-data-delete.component.html b/src/app/features/reference-data/reference-data-delete/reference-data-delete.component.html
@@ -18,9 +18,8 @@
       <app-dynamic-form-group [template]="reasonTemplate" [data]="" [edit]="true" (formChange)="handleFormChange($event)"></app-dynamic-form-group>
 
       <app-button-group>
-        <app-button id="submit" (clicked)="handleSubmit()">Delete</app-button>
-
-        <app-button id="cancel" design="link" (clicked)="navigateBack()">Back</app-button>
+        <app-button id="submit" design="warning" (clicked)="handleSubmit()">Delete</app-button>
+        <app-button id="cancel" design="link" (clicked)="navigateBack()">Cancel</app-button>
       </app-button-group>
     </div>
   </div>

diff --git a/...app/features/reference-data/reference-data-delete/reference-data-delete.component.spec.ts b/...app/features/reference-data/reference-data-delete/reference-data-delete.component.spec.ts
@@ -57,11 +57,10 @@ describe('ReferenceDataAddComponent', () => {
 
     it('should navigate back to the previous page', () => {
       const navigateSpy = jest.spyOn(router, 'navigate').mockImplementation(() => Promise.resolve(true));
-      component.type = ReferenceDataResourceType.CountryOfRegistration;
 
       component.navigateBack();
 
-      expect(navigateSpy).toBeCalledWith(['COUNTRY_OF_REGISTRATION'], { relativeTo: route.parent });
+      expect(navigateSpy).toBeCalledWith(['../..'], { relativeTo: route });
     });
   });
   describe('handleFormChange', () => {

diff --git a/src/app/features/reference-data/reference-data-delete/reference-data-delete.component.ts b/src/app/features/reference-data/reference-data-delete/reference-data-delete.component.ts
@@ -53,11 +53,14 @@ export class ReferenceDataDeleteComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.pipe(take(1)).subscribe(params => {
+    this.route.parent?.params.pipe(take(1)).subscribe(params => {
       this.type = params['type'];
-      this.key = decodeURIComponent(params['key']);
 
       this.referenceDataService.loadReferenceDataByKey(ReferenceDataResourceType.ReferenceDataAdminType, this.type);
+    });
+
+    this.route.params.pipe(take(1)).subscribe(params => {
+      this.key = decodeURIComponent(params['key']);
 
       if (this.type && this.key) {
         this.store.dispatch(fetchReferenceDataByKey({ resourceType: this.type, resourceKey: this.key }));
@@ -105,7 +108,7 @@ export class ReferenceDataDeleteComponent implements OnInit {
 
   navigateBack() {
     this.globalErrorService.clearErrors();
-    this.router.navigate([this.type], { relativeTo: this.route.parent });
+    this.router.navigate(['../..'], { relativeTo: this.route });
   }
 
   handleSubmit() {

diff --git a/...res/reference-data/reference-data-deleted-list/reference-data-deleted-list.component.html b/...res/reference-data/reference-data-deleted-list/reference-data-deleted-list.component.html
@@ -2,8 +2,6 @@
   <div class="govuk-grid-column-full">
     <p class="govuk-heading-xl govuk-!-font-weight-bold">Deleted {{ (refDataAdminType$ | async)?.label }}</p>
 
-    <a [routerLink]="['..']" class="govuk-back-link">Back</a>
-
     <table class="govuk-table">
       <thead class="govuk-table__head">
         <tr class="govuk-table__row">

diff --git a/.../reference-data/reference-data-deleted-list/reference-data-deleted-list.component.spec.ts b/.../reference-data/reference-data-deleted-list/reference-data-deleted-list.component.spec.ts
@@ -34,14 +34,4 @@ describe('DataTypeListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('back', () => {
-    it('should navigate back to the previous page', () => {
-      const navigateSpy = jest.spyOn(router, 'navigate').mockImplementation(() => Promise.resolve(true));
-
-      component.navigateBack();
-
-      expect(navigateSpy).toBeCalledWith(['..'], { relativeTo: route });
-    });
-  });
 });
diff --git a/...tures/reference-data/reference-data-deleted-list/reference-data-deleted-list.component.ts b/...tures/reference-data/reference-data-deleted-list/reference-data-deleted-list.component.ts
@@ -25,7 +25,7 @@ export class ReferenceDataDeletedListComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.pipe(take(1)).subscribe(params => {
+    this.route.parent?.params.pipe(take(1)).subscribe(params => {
       this.type = params['type'];
       this.referenceDataService.loadReferenceDataByKey(ReferenceDataResourceType.ReferenceDataAdminType, this.type);
       this.store.dispatch(fetchReferenceDataAudit({ resourceType: (this.type + '#AUDIT') as ReferenceDataResourceType }));
@@ -44,10 +44,6 @@ export class ReferenceDataDeletedListComponent implements OnInit {
     return Roles;
   }
 
-  navigateBack(): void {
-    this.router.navigate(['..'], { relativeTo: this.route });
-  }
-
   handlePaginationChange({ start, end }: { start: number; end: number }) {
     this.pageStart = start;
     this.pageEnd = end;

diff --git a/src/app/features/reference-data/reference-data-list/reference-data-list.component.html b/src/app/features/reference-data/reference-data-list/reference-data-list.component.html
@@ -5,7 +5,6 @@
     <app-button-group>
       <app-button id="submit" (clicked)="addNew()">Add New</app-button>
       <app-button id="submit" [disabled]="disabled" (clicked)="navigateToDeletedItems()">Deleted Items</app-button>
-      <app-button id="cancel" design="link" (clicked)="back()">Back</app-button>
     </app-button-group>
 
     <table class="govuk-table">

diff --git a/src/app/features/reference-data/reference-data-list/reference-data-list.component.spec.ts b/src/app/features/reference-data/reference-data-list/reference-data-list.component.spec.ts
@@ -53,15 +53,6 @@ describe('DataTypeListComponent', () => {
       expect(navigateSpy).toBeCalledWith(['foo/delete'], { relativeTo: route });
     });
   });
-  describe('back', () => {
-    it('should navigate to reference-data', () => {
-      const navigateSpy = jest.spyOn(router, 'navigate');
-
-      component.back();
-
-      expect(navigateSpy).toBeCalledWith(['reference-data']);
-    });
-  });
   describe('addNew', () => {
     it('should navigate to the selected items create', () => {
       const navigateSpy = jest.spyOn(router, 'navigate');

diff --git a/src/app/features/reference-data/reference-data-list/reference-data-list.component.ts b/src/app/features/reference-data/reference-data-list/reference-data-list.component.ts
@@ -85,10 +85,6 @@ export class ReferenceDataListComponent implements OnInit {
     this.router.navigate(['deleted-items'], { relativeTo: this.route });
   }
 
-  back(): void {
-    this.router.navigate(['reference-data']);
-  }
-
   amend(item: ReferenceDataModelBase): void {
     const key = encodeURIComponent(String(item.resourceKey));
     this.router.navigate([key], { relativeTo: this.route }).then(() => {

diff --git a/src/app/features/reference-data/reference-data-routing.module.ts b/src/app/features/reference-data/reference-data-routing.module.ts
@@ -3,52 +3,68 @@ import { RouterModule, Routes } from '@angular/router';
 import { MsalGuard } from '@azure/msal-angular';
 import { RoleGuard } from '@guards/role-guard/roles.guard';
 import { Roles } from '@models/roles.enum';
+import { RouterOutletComponent } from '@shared/components/router-outlet/router-outlet.component';
 import { ReferenceDataCreateComponent } from './reference-data-add/reference-data-add.component';
 import { ReferenceDataAmendComponent } from './reference-data-amend/reference-data-amend.component';
-import { ReferenceDataListComponent } from './reference-data-list/reference-data-list.component';
-import { ReferenceDataSelectTypeComponent } from './reference-data-select-type/reference-data-select-type.component';
 import { ReferenceDataDeleteComponent } from './reference-data-delete/reference-data-delete.component';
 import { ReferenceDataDeletedListComponent } from './reference-data-deleted-list/reference-data-deleted-list.component';
+import { ReferenceDataListComponent } from './reference-data-list/reference-data-list.component';
+import { ReferenceDataSelectTypeComponent } from './reference-data-select-type/reference-data-select-type.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: ReferenceDataSelectTypeComponent,
+    component: RouterOutletComponent,
     data: { title: 'Select Reference Data Type', roles: Roles.ReferenceDataView },
-    canActivate: [MsalGuard, RoleGuard]
-  },
-  {
-    path: ':type',
-    component: ReferenceDataListComponent,
-    data: { roles: Roles.ReferenceDataView },
-    canActivate: [MsalGuard, RoleGuard]
-  },
-  {
-    path: ':type/deleted-items',
-    component: ReferenceDataDeletedListComponent,
-    data: { title: 'View deleted Reference Data', roles: Roles.ReferenceDataView },
-    canActivate: [MsalGuard, RoleGuard]
-  },
-  {
-    path: ':type/create',
-    component: ReferenceDataCreateComponent,
-    data: { title: 'Add Reference Data', roles: Roles.ReferenceDataAmend },
-    canActivate: [MsalGuard, RoleGuard]
-  },
-  {
-    path: ':type/:key',
-    component: ReferenceDataAmendComponent,
-    data: { title: 'Amend Reference Data', roles: Roles.ReferenceDataAmend },
-    canActivate: [MsalGuard, RoleGuard]
-  },
-  {
-    path: ':type/:key/delete',
-    component: ReferenceDataDeleteComponent,
-    data: { title: 'Delete Reference Data', roles: Roles.ReferenceDataAmend },
-    canActivate: [MsalGuard, RoleGuard]
+    canActivate: [MsalGuard, RoleGuard],
+    children: [
+      {
+        path: '',
+        component: ReferenceDataSelectTypeComponent,
+        data: { title: 'Select Reference Data Type', roles: Roles.ReferenceDataView },
+        canActivate: [MsalGuard, RoleGuard]
+      },
+      {
+        path: ':type',
+        component: RouterOutletComponent,
+        data: { title: 'Search Reference Data', roles: Roles.ReferenceDataView },
+        canActivate: [MsalGuard, RoleGuard],
+        children: [
+          {
+            path: '',
+            component: ReferenceDataListComponent,
+            data: { title: 'Search Reference Data', roles: Roles.ReferenceDataView },
+            canActivate: [MsalGuard, RoleGuard]
+          },
+          {
+            path: 'create',
+            component: ReferenceDataCreateComponent,
+            data: { title: 'Add Reference Data', roles: Roles.ReferenceDataAmend },
+            canActivate: [MsalGuard, RoleGuard]
+          },
+          {
+            path: 'deleted-items',
+            component: ReferenceDataDeletedListComponent,
+            data: { title: 'View deleted Reference Data', roles: Roles.ReferenceDataView },
+            canActivate: [MsalGuard, RoleGuard]
+          },
+          {
+            path: ':key',
+            component: ReferenceDataAmendComponent,
+            data: { title: 'Amend Reference Data', roles: Roles.ReferenceDataAmend },
+            canActivate: [MsalGuard, RoleGuard]
+          },
+          {
+            path: ':key/delete',
+            component: ReferenceDataDeleteComponent,
+            data: { title: 'Delete Reference Data', roles: Roles.ReferenceDataAmend },
+            canActivate: [MsalGuard, RoleGuard]
+          }
+        ]
+      }
+    ]
   }
 ];
-
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]

diff --git a/...tures/reference-data/reference-data-select-type/reference-data-select-type.component.html b/...tures/reference-data/reference-data-select-type/reference-data-select-type.component.html
@@ -19,3 +19,4 @@
     </app-button-group>
   </div>
 </form>
+<router-outlet></router-outlet>
diff --git a/src/app/features/reference-data/reference-data.module.ts b/src/app/features/reference-data/reference-data.module.ts
@@ -5,13 +5,13 @@ import { RouterModule } from '@angular/router';
 import { DynamicFormsModule } from '@forms/dynamic-forms.module';
 import { SharedModule } from '@shared/shared.module';
 import { ReferenceDataCreateComponent } from './reference-data-add/reference-data-add.component';
+import { ReferenceDataAmendHistoryComponent } from './reference-data-amend-history/reference-data-amend-history.component';
+import { ReferenceDataAmendComponent } from './reference-data-amend/reference-data-amend.component';
+import { ReferenceDataDeleteComponent } from './reference-data-delete/reference-data-delete.component';
+import { ReferenceDataDeletedListComponent } from './reference-data-deleted-list/reference-data-deleted-list.component';
 import { ReferenceDataListComponent } from './reference-data-list/reference-data-list.component';
 import { ReferenceDataRoutingModule } from './reference-data-routing.module';
 import { ReferenceDataSelectTypeComponent } from './reference-data-select-type/reference-data-select-type.component';
-import { ReferenceDataDeleteComponent } from './reference-data-delete/reference-data-delete.component';
-import { ReferenceDataAmendComponent } from './reference-data-amend/reference-data-amend.component';
-import { ReferenceDataAmendHistoryComponent } from './reference-data-amend-history/reference-data-amend-history.component';
-import { ReferenceDataDeletedListComponent } from './reference-data-deleted-list/reference-data-deleted-list.component';
 
 @NgModule({
   declarations: [