feat(cb2-11403): remove DFS, add tag (#1631)

Co-authored-by: Thomas Crawley <thomas.crawley@dvsa.gov.uk>
dvsa · Nov 8, 2024 · bbba66b · bbba66b
1 parent c274c93
commit bbba66b
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 107 deletions.
diff --git a/src/app/components/tag/tag.component.ts b/src/app/components/tag/tag.component.ts
@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
-export type TagTypes = 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple';
+export type TagTypes = 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple' | 'grey';
 export const TagType = {
 	BLUE: 'blue' as TagTypes,
 	GREEN: 'green' as TagTypes,
 	ORANGE: 'orange' as TagTypes,
 	RED: 'red' as TagTypes,
 	YELLOW: 'yellow' as TagTypes,
 	PURPLE: 'purple' as TagTypes,
+	GREY: 'grey' as TagTypes,
 };
 
 @Component({

diff --git a/...atures/search/multiple-search-results/__tests__/multiple-search-results.component.spec.ts b/...atures/search/multiple-search-results/__tests__/multiple-search-results.component.spec.ts
@@ -8,6 +8,8 @@ import { DynamicFormsModule } from '@forms/dynamic-forms.module';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { Action } from '@ngrx/store';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { DefaultNullOrEmpty } from '@pipes/default-null-or-empty/default-null-or-empty.pipe';
+import { FormatVehicleTypePipe } from '@pipes/format-vehicle-type/format-vehicle-type.pipe';
 import { UserService } from '@services/user-service/user-service';
 import { State, initialAppState } from '@store/index';
 import { selectQueryParams } from '@store/router/router.selectors';
@@ -23,7 +25,13 @@ describe('MultipleSearchResultsComponent', () => {
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			declarations: [SingleSearchResultComponent, MultipleSearchResultsComponent, RoleRequiredDirective],
+			declarations: [
+				SingleSearchResultComponent,
+				MultipleSearchResultsComponent,
+				RoleRequiredDirective,
+				DefaultNullOrEmpty,
+				FormatVehicleTypePipe,
+			],
 			imports: [DynamicFormsModule, HttpClientTestingModule, RouterTestingModule],
 			providers: [
 				provideMockStore({ initialState: initialAppState }),

diff --git a/src/app/features/search/single-search-result/single-search-result.component.html b/src/app/features/search/single-search-result/single-search-result.component.html
@@ -1,3 +1,85 @@
 <div *appRoleRequired="roles.TechRecordView">
-  <app-dynamic-form-group *ngIf="template" [template]="template" [data]="vehicleDisplayData" class="govuk-summary-list"></app-dynamic-form-group>
-</div>
+  <div class="govuk-summary-list">
+    <div class="subheading-container">
+      <div class="subheading">
+        <h2 class="govuk-heading-m">Technical Record</h2>
+        <a 
+          class="govuk-link" 
+          id="select-/tech-records/{{searchResult.systemNumber}}/{{searchResult.createdTimestamp}}-link" 
+          routerLink="/tech-records/{{searchResult.systemNumber}}/{{searchResult.createdTimestamp}}">
+          Select technical record
+        </a>
+      </div>
+      <app-tag [type]="tagType">{{ searchResult.techRecord_statusCode | uppercase }}</app-tag>
+    </div>
+
+    <dl class="govuk-summary-list">
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Vehicle identification number (VIN):
+        </dt>
+        <dd class="govuk-summary-list__value" id="test-vin">
+          {{ searchResult.vin | defaultNullOrEmpty }}
+        </dd>
+      </div>
+      <ng-container *ngIf="searchResult.techRecord_vehicleType === 'trl'; else vrm">
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
+            TrailerID:
+          </dt>
+          <dd class="govuk-summary-list__value" id="test-trailerId">
+          <app-number-plate [vrm]="searchResult.trailerId"></app-number-plate>
+          </dd>
+        </div>
+      </ng-container>
+      <ng-template #vrm>
+        <div class="govuk-summary-list__row">
+          <dt class="govuk-summary-list__key">
+            Vehicle registration mark (VRM):
+          </dt>
+          <dd class="govuk-summary-list__value" id="test-vrm">
+          <app-number-plate [vrm]="searchResult.primaryVrm"></app-number-plate>
+          </dd>
+        </div>
+      </ng-template>
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Vehicle type:
+        </dt>
+        <dd class="govuk-summary-list__value" id="test-vehicleType">
+          {{ $any(searchResult.techRecord_vehicleType) | formatVehicleType }}
+        </dd>
+      </div>
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Year of manufacture:
+        </dt>
+        <dd class="govuk-summary-list__value" id="test-manufactureYear">
+          {{ searchResult.techRecord_manufactureYear | defaultNullOrEmpty }}
+        </dd>
+      </div>
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Make:
+        </dt>
+        <dd class="govuk-summary-list__value" id="test-make">
+          <ng-container *ngIf="searchResult.techRecord_vehicleType === 'psv'; else make">
+            {{ searchResult.techRecord_chassisMake | defaultNullOrEmpty }}
+          </ng-container>
+          <ng-template #make>{{ searchResult.techRecord_make | defaultNullOrEmpty }}</ng-template>
+        </dd>
+      </div>
+      <div class="govuk-summary-list__row">
+        <dt class="govuk-summary-list__key">
+          Model:
+        </dt>
+        <dd class="govuk-summary-list__value" id="test-model">
+          <ng-container *ngIf="searchResult.techRecord_vehicleType === 'psv'; else model">
+            {{ searchResult.techRecord_chassisModel | defaultNullOrEmpty }}
+          </ng-container>
+          <ng-template #model>{{ searchResult.techRecord_model | defaultNullOrEmpty }}</ng-template>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>
diff --git a/src/app/features/search/single-search-result/single-search-result.component.scss b/src/app/features/search/single-search-result/single-search-result.component.scss
@@ -0,0 +1,16 @@
+.subheading-container {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.subheading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.subheading h2 {
+  margin-bottom: 0;
+}
diff --git a/src/app/features/search/single-search-result/single-search-result.component.ts b/src/app/features/search/single-search-result/single-search-result.component.ts
@@ -1,50 +1,32 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { TagType } from '@components/tag/tag.component';
 import { TechRecordSearchSchema } from '@dvsa/cvs-type-definitions/types/v3/tech-record/get/search';
-import { createSingleSearchResult } from '@forms/templates/search/single-search-result.template';
 import { Roles } from '@models/roles.enum';
-import { FormNode } from '@services/dynamic-forms/dynamic-form.types';
+import { StatusCodes } from '@models/vehicle-tech-record.model';
 
 @Component({
 	selector: 'app-single-search-result[searchResult]',
 	templateUrl: './single-search-result.component.html',
 	changeDetection: ChangeDetectionStrategy.OnPush,
+	styleUrls: ['./single-search-result.component.scss'],
 })
-export class SingleSearchResultComponent implements OnInit {
+export class SingleSearchResultComponent {
 	@Input() searchResult!: TechRecordSearchSchema;
-	vehicleDisplayData?: VehicleDisplayData;
-	template?: FormNode;
-
-	ngOnInit(): void {
-		this.vehicleDisplayData = {
-			vin: this.searchResult.vin,
-			vrm: this.searchResult.primaryVrm,
-			trailerId: this.searchResult.trailerId,
-			make:
-				this.searchResult.techRecord_vehicleType === 'psv'
-					? this.searchResult.techRecord_chassisMake
-					: this.searchResult.techRecord_make,
-			model:
-				this.searchResult.techRecord_vehicleType === 'psv'
-					? this.searchResult.techRecord_chassisModel
-					: this.searchResult.techRecord_model,
-			manufactureYear: this.searchResult.techRecord_manufactureYear,
-			vehicleType: this.searchResult.techRecord_vehicleType.toUpperCase(),
-		};
-
-		this.template = createSingleSearchResult(this.searchResult.systemNumber, this.searchResult.createdTimestamp);
-	}
 
 	public get roles() {
 		return Roles;
 	}
-}
 
-interface VehicleDisplayData {
-	vin?: string;
-	vrm?: string;
-	trailerId?: string;
-	make?: string | null;
-	model?: string | null;
-	manufactureYear?: number | null;
-	vehicleType?: string;
+	public get tagType() {
+		switch (this.searchResult?.techRecord_statusCode) {
+			case StatusCodes.CURRENT:
+				return ''; // default is dark blue;
+			case StatusCodes.ARCHIVED:
+				return TagType.GREY;
+			case StatusCodes.PROVISIONAL:
+				return TagType.ORANGE;
+			default:
+				return TagType.BLUE;
+		}
+	}
 }
diff --git a/src/app/forms/templates/search/single-search-result.template.ts b/src/app/forms/templates/search/single-search-result.template.ts