2393 Property Intake QA Fixes (#2469)

* fix: addressed QA fixes in property component

* chore: fix failing test

* fix: removed auto save of property draft on refresh

* chore: removed timeout

Author: PaulGreywal

alcs-frontend/src/app/features/compliance-and-enforcement/property/property.component.html

@@ -15,12 +15,23 @@ <h3>Property</h3>
 
   <div class="government-region-fields">
     <mat-form-field appearance="outline">
-      <mat-label>Local or First Nation Government</mat-label>
-      <mat-select formControlName="localGovernmentUuid" (selectionChange)="onLocalGovernmentChange($event)">
-        <mat-option *ngFor="let lg of filteredLocalGovernments" [value]="lg.uuid">
+      <mat-label>Local or First Nation Government*</mat-label>
+      <input
+        matInput
+        type="text"
+        [formControl]="localGovernmentControl"
+        [matAutocomplete]="auto"
+        placeholder="Type government name"
+        (blur)="onLocalGovernmentBlur()"
+      />
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onLocalGovernmentChange($event)">
+        <mat-option *ngFor="let lg of filteredLocalGovernments | async" [value]="lg.uuid">
           {{ lg.name }}
         </mat-option>
-      </mat-select>
+      </mat-autocomplete>
+      <mat-error *ngIf="localGovernmentControl.hasError('required') && localGovernmentControl.touched">
+        Local or First Nation Government is required
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field appearance="outline">
@@ -37,17 +48,29 @@ <h3>Property</h3>
     <div class="coordinate-field">
       <mat-form-field appearance="outline">
         <mat-label>Latitude</mat-label>
-        <input type="number" matInput formControlName="latitude" step="0.000001" />
+        <input type="number" matInput formControlName="latitude" step="0.00001" placeholder="e.g. 49.55555" />
+        <mat-error *ngIf="form.get('latitude')?.hasError('required')">Latitude is required</mat-error>
+        <mat-error *ngIf="form.get('latitude')?.hasError('min')">Latitude must be at least 48</mat-error>
+        <mat-error *ngIf="form.get('latitude')?.hasError('max')">Latitude must be at most 61</mat-error>
+        <mat-error *ngIf="form.get('latitude')?.hasError('decimalPlaces')">
+          Latitude must have exactly 5 decimal places (e.g. 49.55555)
+        </mat-error>
       </mat-form-field>
       <div class="coordinate-help">Valid Range is 48 to 61. Example: 49.55555</div>
     </div>
 
     <div class="coordinate-field">
       <mat-form-field appearance="outline">
         <mat-label>Longitude</mat-label>
-        <input type="number" matInput formControlName="longitude" step="0.000001" />
+        <input type="number" matInput formControlName="longitude" step="0.00001" placeholder="e.g. -130.55555" />
+        <mat-error *ngIf="form.get('longitude')?.hasError('required')">Longitude is required</mat-error>
+        <mat-error *ngIf="form.get('longitude')?.hasError('min')">Longitude must be at least -140</mat-error>
+        <mat-error *ngIf="form.get('longitude')?.hasError('max')">Longitude must be at most -113</mat-error>
+        <mat-error *ngIf="form.get('longitude')?.hasError('decimalPlaces')">
+          Longitude must have exactly 5 decimal places (e.g. -130.55555)
+        </mat-error>
       </mat-form-field>
-      <div class="coordinate-help">Valid Range is -140 to -113. Example: -153.44444</div>
+      <div class="coordinate-help">Valid Range is -140 to -113. Example: -130.55555</div>
     </div>
   </div>
 
@@ -84,12 +107,12 @@ <h3>Property</h3>
   <div class="area-fields">
     <mat-form-field appearance="outline">
       <mat-label>Area (ha)</mat-label>
-      <input type="number" matInput formControlName="areaHectares" step="0.01" min="0" />
+      <input type="number" matInput formControlName="areaHectares" step="0.01" min="0" placeholder="e.g. 10.50" />
     </mat-form-field>
 
     <mat-form-field appearance="outline">
       <mat-label>% within ALR</mat-label>
-      <input type="number" matInput formControlName="alrPercentage" step="0.1" min="0" max="100" />
+      <input type="number" matInput formControlName="alrPercentage" step="0.1" min="0" max="100" placeholder="e.g. 75.5" />
       <span matTextSuffix>%</span>
     </mat-form-field>
   </div>

alcs-frontend/src/app/features/compliance-and-enforcement/property/property.component.spec.ts

@@ -1,23 +1,30 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { BehaviorSubject } from 'rxjs';
 import { ApplicationLocalGovernmentService } from '../../../services/application/application-local-government/application-local-government.service';
+import { ApplicationService } from '../../../services/application/application.service';
+import { ApplicationRegionDto } from '../../../services/application/application-code.dto';
 import { PropertyComponent } from './property.component';
 
 describe('PropertyComponent', () => {
   let component: PropertyComponent;
   let fixture: ComponentFixture<PropertyComponent>;
   let mockLocalGovernmentService: DeepMocked<ApplicationLocalGovernmentService>;
+  let mockApplicationService: DeepMocked<ApplicationService>;
 
   beforeEach(async () => {
     mockLocalGovernmentService = createMock();
     mockLocalGovernmentService.list.mockResolvedValue([]);
+    mockApplicationService = createMock();
+    mockApplicationService.$applicationRegions = new BehaviorSubject<ApplicationRegionDto[]>([]);
 
     await TestBed.configureTestingModule({
       declarations: [PropertyComponent],
@@ -27,11 +34,13 @@ describe('PropertyComponent', () => {
         MatInputModule,
         MatSelectModule,
         MatButtonToggleModule,
+        MatAutocompleteModule,
         NoopAnimationsModule,
         HttpClientTestingModule,
       ],
       providers: [
         { provide: ApplicationLocalGovernmentService, useValue: mockLocalGovernmentService },
+        { provide: ApplicationService, useValue: mockApplicationService },
       ],
     }).compileComponents();