Skip to content

Commit

Permalink
feat(CB2-14451): add review screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@pbardy2000
pbardy2000 committed Dec 4, 2024
1 parent 096bae7 commit 33fc040
Show file tree
Hide file tree
Showing 4 changed files with 332 additions and 4 deletions.
14 changes: 14 additions & 0 deletions ...-record/components/tech-record-summary-changes/tech-record-summary-changes.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
</app-banner>

<app-icon [icon]="techRecordEdited.techRecord_vehicleType || ''"></app-icon>

<app-dynamic-form-group [data]="techRecordEdited" [template]="vehicleSummary"></app-dynamic-form-group>

<app-accordion-control [class]="'padding'" [sectionState]="sectionTemplatesState$ | async">
Expand All @@ -17,6 +18,19 @@

<ng-template #accordion let-sectionName="sectionName" let-section="section">
<ng-container [ngSwitch]="sectionName">
<ng-container *ngSwitchCase="'techRecordSummary'">
<!-- New Vehicle Summary section -->
<ng-container *ngIf="featureToggleService.isFeatureEnabled('FsVehicleSummary'); else oldTechRecordSummary">
<app-vehicle-section [techRecord]="techRecordEdited" mode="summary" />
</ng-container>

<!-- Old Vehicle Summary section -->
<ng-template #oldTechRecordSummary>
<app-dynamic-form-group [data]="techRecordChanges" [template]="section"></app-dynamic-form-group>
</ng-template>

</ng-container>

<app-body *ngSwitchCase="'bodySection'" [techRecord]="techRecordEdited" [disableLoadOptions]="true"></app-body>

<ng-container *ngSwitchCase="'dimensionsSection'">
Expand Down
3 changes: 2 additions & 1 deletion ...ms/custom-sections/vehicle-section/vehicle-section-edit/vehicle-section-edit.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,8 @@ export class VehicleSectionEditComponent implements OnInit, OnDestroy {

get lgvAndCarFields(): Partial<Record<keyof TechRecordType<'lgv' | 'car'>, FormControl>> {
return {
techRecord_vehicleSubclass: this.fb.control<string[] | null>([]),
// default subclass to undefined as null is not allowed and an emtpy array creates a complete record instead of skeleton
techRecord_vehicleSubclass: this.fb.control<string[] | undefined>({ value: undefined, disabled: false }),
techRecord_regnDate: this.fb.control<string | null>(null, [
this.commonValidators.date('Date of first registration'),
]),
Expand Down
289 changes: 288 additions & 1 deletion ...m-sections/vehicle-section/vehicle-section-summary/vehicle-section-summary.component.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,288 @@
<p>vehicle summary</p>
<ng-container *ngIf="amendedTechRecord() as vm">
<dl class="govuk-summary-list">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleType')">
<dt class="govuk-summary-list__key">Vehicle type</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleType">
{{ vm.techRecord_vehicleType | defaultNullOrEmpty }}
</dd>
</div>
<ng-container *ngIf="technicalRecordService.getVehicleTypeWithSmallTrl(vm) !== VehicleTypes.SMALL_TRL">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_regnDate')">
<dt class="govuk-summary-list__key">Date of first registration</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_regnDate">
{{ vm.techRecord_regnDate | date: 'dd/MM/yyyy' | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="vm.techRecord_vehicleType === VehicleTypes.TRL">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_manufactureMonth')">
<dt class="govuk-summary-list__key">Month of manufacture</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_manufactureMonth">
{{ vm.techRecord_manufactureMonth | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_manufactureYear')">
<dt class="govuk-summary-list__key">Year of manufacture</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_manufactureYear">
{{ vm.techRecord_manufactureYear | defaultNullOrEmpty }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_noOfAxles')">
<dt class="govuk-summary-list__key">Number of axles</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_noOfAxles">
{{ vm.techRecord_noOfAxles | defaultNullOrEmpty }}
</dd>
</div>
<ng-container *ngIf="
(vm.techRecord_vehicleType === VehicleTypes.CAR ||
vm.techRecord_vehicleType === VehicleTypes.LGV ||
technicalRecordService.getVehicleTypeWithSmallTrl(vm) === VehicleTypes.SMALL_TRL)
">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleSubclass')">
<dt class="govuk-summary-list__key">Vehicle subclass</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleSubclass">
{{ $any(vm).techRecord_vehicleSubclass | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV ||
vm.techRecord_vehicleType === VehicleTypes.PSV">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_speedLimiterMrk')">
<dt class="govuk-summary-list__key">Speed limiter exempt</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_speedLimiterMrk">
{{ vm.techRecord_speedLimiterMrk == null ? '-' : vm.techRecord_speedLimiterMrk ? 'Exempt' : 'Not exempt' }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV ||
vm.techRecord_vehicleType === VehicleTypes.PSV">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_tachoExemptMrk')">
<dt class="govuk-summary-list__key">Tacho exempt</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_tachoExemptMrk">
{{ vm.techRecord_tachoExemptMrk == null ? '-' : vm.techRecord_tachoExemptMrk ? 'Exempt' : 'Not exempt' }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV ||
vm.techRecord_vehicleType === VehicleTypes.PSV">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_euroStandard')">
<dt class="govuk-summary-list__key">Euro standard</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_euroStandard">
{{ vm.techRecord_euroStandard | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV ||
(vm.techRecord_vehicleType === VehicleTypes.TRL && technicalRecordService.getVehicleTypeWithSmallTrl(vm) !== VehicleTypes.SMALL_TRL)">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_roadFriendly')">
<dt class="govuk-summary-list__key">Road friendly suspension</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_roadFriendly">
{{ vm.techRecord_roadFriendly | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.TRL && technicalRecordService.getVehicleTypeWithSmallTrl(vm) !== VehicleTypes.SMALL_TRL
">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_suspensionType')">
<dt class="govuk-summary-list__key">Suspension type (optional)</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_suspensionType">
{{ vm.techRecord_suspensionType | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV ||
vm.techRecord_vehicleType === VehicleTypes.PSV">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_fuelPropulsionSystem')">
<dt class="govuk-summary-list__key">Fuel / propulsion system</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_fuelPropulsionSystem">
{{ vm.techRecord_fuelPropulsionSystem | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_drawbarCouplingFitted')">
<dt class="govuk-summary-list__key">Drawbar coupling fitted</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_drawbarCouplingFitted">
{{ vm.techRecord_drawbarCouplingFitted | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="vm.techRecord_vehicleType === VehicleTypes.HGV || vm.techRecord_vehicleType === VehicleTypes.TRL">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleClass')">
<dt class="govuk-summary-list__key">Vehicle class</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleClass">
{{ vm.techRecord_vehicleClass_description | multiOption : HGV_VEHICLE_CLASS_DESCRIPTION_OPTIONS }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="vm.techRecord_vehicleType === VehicleTypes.TRL">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleClass_motorcycle')">
<dt class="govuk-summary-list__key">Vehicle class</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleClass_motorcycle">
{{ vm.techRecord_vehicleClass_description | multiOption : ALL_VEHICLE_CLASS_DESCRIPTION_OPTIONS }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="vm.techRecord_vehicleType === VehicleTypes.MOTORCYCLE || technicalRecordService.getVehicleTypeWithSmallTrl(vm) === VehicleTypes.SMALL_TRL">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleClass_motorcycle')">
<dt class="govuk-summary-list__key">Vehicle class</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleClass_motorcycle">
{{ $any(vm).techRecord_vehicleClass_description | multiOption : ALL_VEHICLE_CLASS_DESCRIPTION_OPTIONS }}
</dd>
</div>
</ng-container>
<ng-container
*ngIf="
vm.techRecord_vehicleType === VehicleTypes.TRL && technicalRecordService.getVehicleTypeWithSmallTrl(vm) !== VehicleTypes.SMALL_TRL
">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_couplingType')">
<dt class="govuk-summary-list__key">Coupling type (optional)</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_couplingType">
{{ vm.techRecord_couplingType | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container
*ngIf="
vm.techRecord_vehicleType === VehicleTypes.TRL && technicalRecordService.getVehicleTypeWithSmallTrl(vm) !== VehicleTypes.SMALL_TRL
">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_maxLoadOnCoupling')">
<dt class="govuk-summary-list__key">Max load on coupling (optional)</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_maxLoadOnCoupling">
{{ vm.techRecord_maxLoadOnCoupling | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleConfiguration')">
<dt class="govuk-summary-list__key">Vehicle configuration</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleConfiguration">
{{ vm.techRecord_vehicleConfiguration | defaultNullOrEmpty }}
</dd>
</div>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_offRoad')">
<dt class="govuk-summary-list__key">Off road vehicle</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_offRoad">
{{ vm.techRecord_offRoad | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>

<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_euVehicleCategory')">
<dt class="govuk-summary-list__key">EU vehicle category</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_euVehicleCategory">
{{ vm.techRecord_euVehicleCategory | defaultNullOrEmpty }}
</dd>
</div>

<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.MOTORCYCLE">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_numberOfWheelsDriven')">
<dt class="govuk-summary-list__key">Number of wheels</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_numberOfWheelsDriven">
{{ vm.techRecord_numberOfWheelsDriven | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>

<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV ||
vm.techRecord_vehicleType === VehicleTypes.PSV">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_emissionsLimit')">
<dt class="govuk-summary-list__key">Emission limit (m-1) (plate value)</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_emissionsLimit">
{{ vm.techRecord_emissionsLimit | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>

<ng-container
*ngIf="
vm.techRecord_vehicleType === VehicleTypes.TRL &&
technicalRecordService.getVehicleTypeWithSmallTrl(vm) !== VehicleTypes.SMALL_TRL
">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_frameDescription')">
<dt class="govuk-summary-list__key">Frame description (optional)</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_frameDescription">
{{ vm.techRecord_frameDescription | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>
<ng-container *ngIf="
vm.techRecord_vehicleType === VehicleTypes.HGV ||
(vm.techRecord_vehicleType === VehicleTypes.TRL &&
technicalRecordService.getVehicleTypeWithSmallTrl(vm) !== VehicleTypes.SMALL_TRL) ">
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_departmentalVehicleMarker')">
<dt class="govuk-summary-list__key">Departmental vehicle marker</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_departmentalVehicleMarker">
{{ vm.techRecord_departmentalVehicleMarker | defaultNullOrEmpty }}
</dd>
</div>
</ng-container>

</dl>
<dl *ngIf="vm.techRecord_vehicleType === VehicleTypes.PSV" class="govuk-summary-list">
<div class="govuk-summary-list__row">
<h3>
Seats:
</h3>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_seatsUpperDeck')">
<dt class="govuk-summary-list__key">Upper deck</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_seatsUpperDeck">
{{ vm.techRecord_seatsUpperDeck | defaultNullOrEmpty }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_seatsLowerDeck')">
<dt class="govuk-summary-list__key">Lower deck</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_seatsLowerDeck">
{{ vm.techRecord_seatsLowerDeck | defaultNullOrEmpty }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_standingCapacity')">
<dt class="govuk-summary-list__key">Standing capacity</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_standingCapacity">
{{ vm.techRecord_standingCapacity | defaultNullOrEmpty }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleClass_psv')">
<dt class="govuk-summary-list__key">Vehicle class</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleClass_psv">
{{ vm.techRecord_vehicleClass_description | multiOption : PSV_VEHICLE_CLASS_DESCRIPTION_OPTIONS }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_vehicleSize')">
<dt class="govuk-summary-list__key">Vehicle size</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_vehicleSize">
{{ vm.techRecord_vehicleSize | defaultNullOrEmpty }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_numberOfSeatbelts')">
<dt class="govuk-summary-list__key">Number of seat belts</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_numberOfSeatbelts">
{{ vm.techRecord_numberOfSeatbelts | defaultNullOrEmpty }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_seatbeltInstallationApprovalDate')">
<dt class="govuk-summary-list__key">Seatbelt installation approval date / type approved</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_seatbeltInstallationApprovalDate">
{{ vm.techRecord_seatbeltInstallationApprovalDate | date: 'dd/MM/yyyy' | defaultNullOrEmpty }}
</dd>
</div>
<div class="govuk-summary-list__row" *ngIf="hasChanged('techRecord_departmentalVehicleMarker')">
<dt class="govuk-summary-list__key">Departmental vehicle marker</dt>
<dd class="govuk-summary-list__value" id="test-techRecord_departmentalVehicleMarker-psv">
{{ vm.techRecord_departmentalVehicleMarker | defaultNullOrEmpty }}
</dd>
</div>
</dl>
</ng-container>
30 changes: 28 additions & 2 deletions ...tom-sections/vehicle-section/vehicle-section-summary/vehicle-section-summary.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,40 @@
import {
ALL_VEHICLE_CLASS_DESCRIPTION_OPTIONS,
HGV_VEHICLE_CLASS_DESCRIPTION_OPTIONS,
PSV_VEHICLE_CLASS_DESCRIPTION_OPTIONS,
TRL_VEHICLE_CLASS_DESCRIPTION_OPTIONS,
} from '@/src/app/models/options.model';
import { VehicleTypes } from '@/src/app/models/vehicle-tech-record.model';
import { TechnicalRecordService } from '@/src/app/services/technical-record/technical-record.service';
import { Component, inject } from '@angular/core';
import { TechRecordType } from '@dvsa/cvs-type-definitions/types/v3/tech-record/tech-record-verb';
import { Store } from '@ngrx/store';
import { techRecord } from '@store/technical-records';
import { editingTechRecord, techRecord } from '@store/technical-records';
import { isEqual } from 'lodash';

@Component({
selector: 'app-vehicle-section-summary',
templateUrl: './vehicle-section-summary.component.html',
styleUrls: ['./vehicle-section-summary.component.scss'],
})
export class VehicleSectionSummaryComponent {
readonly VehicleTypes = VehicleTypes;
readonly HGV_VEHICLE_CLASS_DESCRIPTION_OPTIONS = HGV_VEHICLE_CLASS_DESCRIPTION_OPTIONS;
readonly TRL_VEHICLE_CLASS_DESCRIPTION_OPTIONS = TRL_VEHICLE_CLASS_DESCRIPTION_OPTIONS;
readonly PSV_VEHICLE_CLASS_DESCRIPTION_OPTIONS = PSV_VEHICLE_CLASS_DESCRIPTION_OPTIONS;
readonly ALL_VEHICLE_CLASS_DESCRIPTION_OPTIONS = ALL_VEHICLE_CLASS_DESCRIPTION_OPTIONS;

store = inject(Store);
technicalRecordService = inject(TechnicalRecordService);

currentTechRecord = this.store.selectSignal(techRecord);
amendedTechRecord = this.store.selectSignal(editingTechRecord);

hasChanged(property: string) {
const current = this.currentTechRecord();
const amended = this.amendedTechRecord();
if (!current || !amended) return true;

techRecord = this.store.selectSignal(techRecord);
return !isEqual(current[property as keyof TechRecordType<'put'>], amended[property as keyof TechRecordType<'put'>]);
}
}

0 comments on commit 33fc040

Please sign in to comment.