feat(cb2-10112): Add subsequent UN numbers (#1348)

* feat(cb2-10112): allow addition of multiple UN numbers * fix(cb2-10211): fix duplicate error messages + global error service not focusing elements * feat(cb2-10032): better styling for readonly mode of tech records * feat(cb2-10032): add tc3 view mode component * feat(cb2-10032): tc2 inspections * feat(cb2-10032): remove validation for view control * fix(cb2-10174): update styling for edit component * feat(cb2-10032): remove expand/collapse notes temporarily * fix(cb2-10211): add appropriate warnings * fix(cb2-10211): fix interactions with global errors * fix(cb2-10211): update unit tests * fix(cb2-10211): disable add link when you cannot add the control * feat(cb2-10211): add custom view mode logic * feat(cb2-10211): add custom view * feat(cb2-10211): fix displaying of error messages * feat(cb2-10211): better UX * feat(cb2-10211): better form error displayed
dvsa · Jan 10, 2024 · 5c06f5a · 5c06f5a
1 parent a13b08d
commit 5c06f5a
Show file tree

Hide file tree

Showing 52 changed files with 989 additions and 344 deletions.
diff --git a/src/app/features/search/search.component.ts b/src/app/features/search/search.component.ts
@@ -6,7 +6,7 @@ import { Roles } from '@models/roles.enum';
 import { SEARCH_TYPES } from '@models/search-types-enum';
 import { Store } from '@ngrx/store';
 import { clearAllSectionStates, clearScrollPosition } from '@store/technical-records';
-import { map, Observable } from 'rxjs';
+import { Observable, map } from 'rxjs';
 
 @Component({
   selector: 'app-search',

diff --git a/src/app/forms/components/checkbox-group/checkbox-group.stories.ts b/src/app/forms/components/checkbox-group/checkbox-group.stories.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
 import { BaseControlComponent } from '../base-control/base-control.component';
 import { CheckboxGroupComponent } from './checkbox-group.component';
 

diff --git a/src/app/forms/components/dynamic-form-field/dynamic-form-field.component.html b/src/app/forms/components/dynamic-form-field/dynamic-form-field.component.html
@@ -1,9 +1,4 @@
-<div
-  *ngIf="form && control && control.value.meta.editType !== formNodeEditTypes.HIDDEN"
-  [ngSwitch]="control.value.meta.editType"
-  [formGroup]="form"
-  [appNestingLevel]="$any(form).meta.nestingLevel ?? 0"
->
+<div *ngIf="form && control && control.value.meta.editType !== formNodeEditTypes.HIDDEN" [ngSwitch]="control.value.meta.editType" [formGroup]="form">
   <app-autocomplete
     *ngSwitchCase="formNodeEditTypes.AUTOCOMPLETE"
     [label]="control.value.meta.label"
@@ -122,8 +117,8 @@
   </app-text-input>
 
   <ng-container *ngSwitchCase="formNodeEditTypes.CUSTOM">
-    <ng-container *ngIf="control.value.meta.component">
-      <ng-container [ngComponentOutlet]="control.value.meta.component" [ngComponentOutletInjector]="customFormControlInjector"></ng-container>
+    <ng-container *ngIf="control.value.meta.editComponent">
+      <ng-container [ngComponentOutlet]="control.value.meta.editComponent" [ngComponentOutletInjector]="customFormControlInjector"></ng-container>
     </ng-container>
   </ng-container>
 

diff --git a/src/app/forms/components/dynamic-form-group/dynamic-form-group.component.html b/src/app/forms/components/dynamic-form-group/dynamic-form-group.component.html
@@ -1,8 +1,10 @@
 <div class="flex" id="{{ 'test-' + form.meta.name || 'test-dynamic-form' }}">
   <ng-template [ngTemplateOutlet]="templateHeading"></ng-template>
-  <dl *ngIf="!edit" class="govuk-summary-list">
-    <ng-template [ngTemplateOutlet]="nodeTemplateRef" [ngTemplateOutletContext]="{ form: form }"> </ng-template>
-  </dl>
+  <table *ngIf="!edit" class="govuk-table">
+    <tbody class="govuk-table__body">
+      <ng-template [ngTemplateOutlet]="nodeTemplateRef" [ngTemplateOutletContext]="{ form: form }"> </ng-template>
+    </tbody>
+  </table>
   <ng-container *ngIf="edit">
     <ng-template [ngTemplateOutlet]="nodeTemplateRef" [ngTemplateOutletContext]="{ form: form }"> </ng-template>
   </ng-container>
@@ -52,6 +54,10 @@ <h1 class="govuk-heading-xl title">{{ form.meta.label }}</h1>
         <ng-template [ngTemplateOutlet]="titleTemplate" [ngTemplateOutletContext]="{ control: control }"></ng-template>
       </ng-container>
 
+      <ng-container *ngSwitchCase="formNodeTypes.SUBTITLE">
+        <ng-template [ngTemplateOutlet]="subtitleTemplate" [ngTemplateOutletContext]="{ control: control }"></ng-template>
+      </ng-container>
+
       <ng-container *ngSwitchCase="formNodeTypes.COMBINATION">
         <ng-template [ngTemplateOutlet]="combinationTemplate" [ngTemplateOutletContext]="{ control: control, formGroup: form }"></ng-template>
       </ng-container>
@@ -63,16 +69,16 @@ <h1 class="govuk-heading-xl title">{{ form.meta.label }}</h1>
   <ng-container [formGroup]="formGroup">
     <ng-container *ngIf="control.value.meta && !control.value.meta.hide" [ngSwitch]="edit">
       <ng-container *ngIf="control.value.meta.viewType !== 'hidden'">
-        <div
+        <tr
           *ngSwitchCase="false"
           app-view-list-item
-          class="govuk-summary-list__row"
+          class="govuk-table__row"
           [label]="control.value.meta.label"
           [name]="control.value.meta.name"
           [customId]="control.value.meta.customId ?? ''"
           [viewType]="control.value.meta.viewType"
           [formControlName]="control.key"
-        ></div>
+        ></tr>
       </ng-container>
       <app-dynamic-form-field
         *ngSwitchCase="true"
@@ -110,9 +116,28 @@ <h2 class="govuk-heading-m">{{ control.value.meta.label }}</h2>
 
 <ng-template #titleTemplate let-control="control">
   <ng-container *ngIf="!(control.value.meta && control.value.meta.hide)">
-    <div *ngIf="!edit">
-      <span class="govuk-label govuk-summary-list__key">{{ control.value.meta.label }}</span>
+    <ng-container *ngIf="!edit">
+      <tr class="govuk-table__row">
+        <td colspan="2" class="govuk-table__cell pt-2">
+          <h4 class="govuk-heading-m mb-0">{{ control.value.meta.label }}</h4>
+        </td>
+      </tr>
+    </ng-container>
+    <div *ngIf="edit">
+      <span class="govuk-label govuk-label--m">{{ control.value.meta.label }}</span>
     </div>
+  </ng-container>
+</ng-template>
+
+<ng-template #subtitleTemplate let-control="control">
+  <ng-container *ngIf="!(control.value.meta && control.value.meta.hide)">
+    <ng-container *ngIf="!edit">
+      <tr class="govuk-table__row">
+        <td colspan="2" class="govuk-table__cell">
+          <h4 class="govuk-heading-s mb-0">{{ control.value.meta.label }}</h4>
+        </td>
+      </tr>
+    </ng-container>
     <div *ngIf="edit">
       <span class="govuk-label govuk-label--m">{{ control.value.meta.label }}</span>
     </div>

diff --git a/src/app/forms/components/dynamic-form-group/dynamic-form-group.component.scss b/src/app/forms/components/dynamic-form-group/dynamic-form-group.component.scss
@@ -29,3 +29,11 @@
     flex-basis: content !important;
   }
 }
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.pt-2 {
+  padding-top: 2rem;
+}
diff --git a/src/app/forms/components/dynamic-form-group/dynamic-form-group.component.spec.ts b/src/app/forms/components/dynamic-form-group/dynamic-form-group.component.spec.ts
@@ -153,11 +153,11 @@ describe('DynamicFormGroupComponent', () => {
 
       fixture.detectChanges();
 
-      const dtList = fixture.debugElement.queryAll(By.css('dt'));
-      const ddList = fixture.debugElement.queryAll(By.css('dd'));
+      const trList = fixture.debugElement.queryAll(By.css('tr'));
+      const tdList = fixture.debugElement.queryAll(By.css('td'));
 
-      expect(dtList).toHaveLength(4);
-      expect(ddList).toHaveLength(4);
+      expect(trList).toHaveLength(4);
+      expect(tdList).toHaveLength(8);
     }));
 
     it('should generate the correct number of input elements', inject([DynamicFormService], (dfs: DynamicFormService) => {
@@ -234,11 +234,11 @@ describe('DynamicFormGroupComponent', () => {
 
       fixture.detectChanges();
 
-      const dtList = fixture.debugElement.queryAll(By.css('dt'));
-      const ddList = fixture.debugElement.queryAll(By.css('dd'));
+      const trList = fixture.debugElement.queryAll(By.css('tr'));
+      const tdList = fixture.debugElement.queryAll(By.css('td'));
 
-      expect(dtList).toHaveLength(10);
-      expect(ddList).toHaveLength(10);
+      expect(trList).toHaveLength(10);
+      expect(tdList).toHaveLength(20);
     }));
 
     it('should generate the correct number of input elements', inject([DynamicFormService], (dfs: DynamicFormService) => {
@@ -359,11 +359,11 @@ describe('DynamicFormGroupComponent', () => {
 
       fixture.detectChanges();
 
-      const dtList = fixture.debugElement.queryAll(By.css('dt'));
-      const ddList = fixture.debugElement.queryAll(By.css('dd'));
+      const trList = fixture.debugElement.queryAll(By.css('tr'));
+      const tdList = fixture.debugElement.queryAll(By.css('td'));
 
-      expect(dtList).toHaveLength(6);
-      expect(ddList).toHaveLength(6);
+      expect(trList).toHaveLength(6);
+      expect(tdList).toHaveLength(12);
     }));
 
     it('should generate the correct number of input elements', inject([DynamicFormService], (dfs: DynamicFormService) => {

diff --git a/src/app/forms/components/text-input/text-input.component.html b/src/app/forms/components/text-input/text-input.component.html
@@ -16,7 +16,7 @@
 
     <input
       *ngIf="!numeric"
-      id="{{ name }}"
+      [id]="customId ?? name"
       name="{{ name }}"
       type="text"
       [class]="style"
@@ -29,7 +29,7 @@
 
     <input
       *ngIf="numeric"
-      id="{{ name }}"
+      [id]="customId ?? name"
       name="{{ name }}"
       type="text"
       [class]="style"

diff --git a/src/app/forms/components/view-list-item/view-list-item.component.html b/src/app/forms/components/view-list-item/view-list-item.component.html
@@ -1,24 +1,26 @@
 <ng-container *ngIf="viewType !== formNodeViewTypes.HIDDEN">
-  <dt *ngIf="viewType !== formNodeViewTypes.FULLWIDTH" class="govuk-summary-list__key">{{ label }}:</dt>
+  <td *ngIf="displayAsRow" class="govuk-table__cell" [style.width.%]="30">{{ label }}:</td>
+
   <ng-container [ngSwitch]="viewType">
     <ng-container *ngSwitchCase="formNodeViewTypes.DATE">
-      <dd id="test-{{ name }}" class="govuk-summary-list__value">{{ value | date : 'dd/MM/yyyy' | defaultNullOrEmpty }}</dd>
+      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date : 'dd/MM/yyyy' | defaultNullOrEmpty }}</td>
     </ng-container>
 
     <ng-container *ngSwitchCase="formNodeViewTypes.DATETIME">
-      <dd id="test-{{ name }}" class="govuk-summary-list__value">{{ value | date : 'dd/MM/yyyy HH:mm' | defaultNullOrEmpty }}</dd>
+      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date : 'dd/MM/yyyy HH:mm' | defaultNullOrEmpty }}</td>
     </ng-container>
 
     <ng-container *ngSwitchCase="formNodeViewTypes.TIME">
-      <dd id="test-{{ name }}" class="govuk-summary-list__value">{{ value | date : 'HH:mm' | defaultNullOrEmpty }}</dd>
+      <td id="test-{{ name }}" class="govuk-table__cell">{{ value | date : 'HH:mm' | defaultNullOrEmpty }}</td>
     </ng-container>
 
     <ng-container *ngSwitchCase="formNodeViewTypes.VRM">
-      <dd id="test-{{ name }}" class="govuk-summary-list__value">
+      <td id="test-{{ name }}" class="govuk-table__cell">
         <app-number-plate [vrm]="value"></app-number-plate>
-      </dd>
+      </td>
     </ng-container>
 
+    <!-- TODO: remove entirely, and use custom view component -->
     <ng-container *ngSwitchCase="formNodeViewTypes.ADR_EXAMINER_NOTES">
       <table class="govuk-table" *ngIf="value && value.length > 0">
         <tbody class="govuk-table__body">
@@ -45,6 +47,7 @@
       </dl>
     </ng-container>
 
+    <!-- TODO: remove entirely, and use custom view component -->
     <ng-container *ngSwitchCase="formNodeViewTypes.ADRINSPECTIONS">
       <ng-container *ngIf="value && value.length > 0">
         <table>
@@ -70,10 +73,18 @@
       </ng-container>
     </ng-container>
 
+    <ng-container *ngSwitchCase="formNodeViewTypes.CUSTOM">
+      <ng-container *ngIf="control && control.meta && control.meta.viewComponent">
+        <td colspan="2" id="test-{{ name }}" class="govuk-table__cell">
+          <ng-container [ngComponentOutlet]="control.meta.viewComponent" [ngComponentOutletInjector]="customFormControlInjector"></ng-container>
+        </td>
+      </ng-container>
+    </ng-container>
+
     <ng-container *ngSwitchDefault>
-      <dd [id]="customId ? 'test-' + customId : 'test-' + name" class="govuk-summary-list__value">
+      <td [id]="customId ? 'test-' + customId : 'test-' + name" class="govuk-table__cell">
         {{ value | refDataDecode$ : control?.meta?.referenceData | async | getControlLabel : control?.meta?.options | defaultNullOrEmpty }}
-      </dd>
+      </td>
     </ng-container>
   </ng-container>
 </ng-container>
diff --git a/src/app/forms/components/view-list-item/view-list-item.component.scss b/src/app/forms/components/view-list-item/view-list-item.component.scss
@@ -4,4 +4,12 @@
 
 .border-b-0 {
     border-bottom: 0;
+}
+
+.table-cell {
+    display: table-cell;
+}
+
+.w-0 {
+    width: 1px;
 }
diff --git a/src/app/forms/components/view-list-item/view-list-item.component.ts b/src/app/forms/components/view-list-item/view-list-item.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, Injector } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { FormNodeViewTypes } from '../../services/dynamic-form.types';
 import { BaseControlComponent } from '../base-control/base-control.component';
 
@@ -16,7 +16,27 @@ import { BaseControlComponent } from '../base-control/base-control.component';
   styleUrls: ['./view-list-item.component.scss'],
 })
 export class ViewListItemComponent extends BaseControlComponent {
+  customFormControlInjector?: Injector;
+
   get formNodeViewTypes(): typeof FormNodeViewTypes {
     return FormNodeViewTypes;
   }
+
+  get displayAsRow() {
+    return !(this.viewType === this.formNodeViewTypes.FULLWIDTH || this.viewType === this.formNodeViewTypes.CUSTOM);
+  }
+
+  override ngAfterContentInit(): void {
+    super.ngAfterContentInit();
+    this.createCustomFormControlInjector();
+  }
+
+  createCustomFormControlInjector() {
+    this.customFormControlInjector = Injector.create({
+      providers: [
+        { provide: NgControl, useValue: { control: this.control } },
+      ],
+      parent: this.injector,
+    });
+  }
 }
diff --git a/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history-edit.component.html b/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history-edit.component.html
@@ -0,0 +1,36 @@
+<ng-container *ngIf="control">
+  <ng-container *ngIf="getAdditionalExaminerNotes() as notes">
+    <label *ngIf="control.meta.label" class="govuk-label govuk-label--m" for="{{ control.meta.name }}">
+      {{ control.meta.label }}
+    </label>
+
+    <!-- Additional guidance notes -->
+    <table class="govuk-table" *ngIf="notes.length > 0; else empty">
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <th scope="col" class="govuk-table__header whitespace-nowrap">Date</th>
+          <th scope="col" class="govuk-table__header whitespace-nowrap">Created By</th>
+          <th scope="col" class="govuk-table__header whitespace-nowrap">Notes</th>
+        </tr>
+        <ng-container *ngFor="let examinerNote of notes; let i = index; let isLast = last">
+          <tr class="govuk-table__row" *ngIf="i < 3">
+            <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">
+              {{ examinerNote.createdAtDate | date : 'dd/MM/yyyy' | defaultNullOrEmpty }}
+            </td>
+            <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">{{ examinerNote.lastUpdatedBy }}</td>
+            <td class="govuk-table__cell break-words" [class.border-b-0]="i === 2 || isLast">
+              {{ examinerNote.note }}
+            </td>
+          </tr>
+        </ng-container>
+      </tbody>
+    </table>
+    <ng-template #empty>
+      <dl class="govuk-summary-list" *ngIf="notes.length === 0">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">No additional examiner notes history available</dt>
+        </div>
+      </dl>
+    </ng-template>
+  </ng-container>
+</ng-container>
diff --git a/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.scss b/...m-sections/adr-examiner-notes-history-edit/adr-examiner-notes-history.component-edit.scss
@@ -0,0 +1,18 @@
+.m-0 {
+    margin: 0;
+}
+
+.border-b-0 {
+    border-bottom: 0;
+}
+
+.whitespace-nowrap {
+    white-space: nowrap;
+}
+
+.line-clamp-5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+}