ALCS-2229 Added validation

bcgov · Oct 19, 2024 · 23cd6bd · 23cd6bd
1 parent 9a83b9a
commit 23cd6bd
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 10 deletions.
diff --git a/...ubmission/additional-information/add-structure-dialog/add-structure-dialog.component.html b/...ubmission/additional-information/add-structure-dialog/add-structure-dialog.component.html
@@ -63,7 +63,7 @@ <h2 *ngIf="data.isEdit">
   </div>
   <mat-dialog-actions align="end">
   <div class="button-container">
-    <button *ngIf="this.data.structureData" mat-flat-button color="primary" (click)="onSubmit()" [disabled]="isLoading || !form.valid">
+    <button *ngIf="this.data.structureData" mat-flat-button color="primary" (click)="onSubmit()" [disabled]="isLoading">
       {{ !data.isEdit ? "ADD" : "SAVE" }}
     </button>
     <button mat-stroked-button color="primary" [mat-dialog-close]="false" (click)="onCancel()">CANCEL</button>

diff --git a/...ubmission/additional-information/add-structure-dialog/add-structure-dialog.component.scss b/...ubmission/additional-information/add-structure-dialog/add-structure-dialog.component.scss
@@ -7,7 +7,6 @@ mat-dialog-title {
 
 h2 {
   font-size: rem(19.5);
-  margin-left: rem(10) !important;
 }
 
 .actions {

diff --git a/...-submission/additional-information/add-structure-dialog/add-structure-dialog.component.ts b/...-submission/additional-information/add-structure-dialog/add-structure-dialog.component.ts
@@ -52,6 +52,10 @@ export class AddStructureDialogComponent {
   }
 
   async onSubmit() {
+    if (!this.form.valid) {
+      this.dialogRef.close(null);
+      return;
+    }
     this.isLoading = true;
     const dto: ProposedStructure = {
       area: Number(this.area.value!),

diff --git a/...card/structure-mobile-card.component.html → ...card/structure-mobile-card.component.html b/...card/structure-mobile-card.component.html → ...card/structure-mobile-card.component.html
@@ -1,12 +1,23 @@
-<mat-card [ngClass]="{ 'last-card': isLast, 'review-step':  isReviewStep }">
+<mat-card [ngClass]="{ 'last-card': isLast, 'review-step':  isReviewStep, 'error-card': isError && !isReviewStep }">
   <mat-card-header>
     <mat-card-title>
       <div class="line-info-floor">
-        <span class="strong">#{{ index+1 }} Total Floor Area: </span><span [class.strong]="isReviewStep">{{ structure.area }} <span matTextSuffix>(m<sup>2</sup>)</span></span> <br />
-      </div>
+        <span class="strong">#{{ index+1 }} Total Floor Area: </span>
+        <ng-container *ngIf="structure.area === 0 || !structure.area; else validFloorArea">
+          <div class="text-error">No Data</div>
+        </ng-container>
+        <ng-template #validFloorArea>
+          <span [class.strong]="isReviewStep">{{ structure.area }} <span matTextSuffix>(m<sup>2</sup>)</span></span>
+        </ng-template>
       <div class="line-info-type">
         <span class="strong">Type: </span>{{ mapStructureTypeValueToLabel(structure.type) }}
       </div>
+      <div class="field-error" *ngIf="(!structure.area || structure.area === 0 || !structure.type) && !isReviewStep">
+        <mat-icon>warning</mat-icon>
+        <div>This field is required</div>
+      </div>
+      <app-no-data [showRequired]="showErrors" *ngIf="(!structure.area || structure.area === 0 || !structure.type) && isReviewStep"></app-no-data>
+    </div>
     </mat-card-title>
     <ng-container *ngIf="!isReviewStep">
       <button mat-icon-button [mat-menu-trigger-for]="menu">

diff --git a/...card/structure-mobile-card.component.scss → ...card/structure-mobile-card.component.scss b/...card/structure-mobile-card.component.scss → ...card/structure-mobile-card.component.scss
@@ -1,5 +1,5 @@
-@use '../../../styles/colors';
-@use '../../../styles/functions' as *;
+@use '../../../../styles/colors.scss';
+@use '../../../../styles/functions' as *;
 
 mat-card {
   width: 100%;
@@ -9,6 +9,7 @@ mat-card {
   border-radius: 0;
   word-wrap: break-word;
   white-space: normal;
+  padding-left: rem(10);
 }
 
 mat-card-header {
@@ -60,3 +61,34 @@ a {
 .line-info-type {
   padding-bottom: rem(10);
 }
+
+.text-error {
+  color: colors.$grey-dark;
+  font-weight: 400;
+  display: inline;
+  padding-bottom: 0 !important;
+}
+
+.field-error {
+  color: colors.$error-color;
+  font-size: rem(15);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+
+  .mat-icon {
+    min-width: rem(24);
+  }
+}
+
+.error-card {
+  border-radius: rem(4) !important;
+  border: rem(2) solid colors.$error-color !important;
+  padding: 0 0 rem(5) rem(10);
+  margin-top: rem(5);
+}
+
+.no-data {
+  margin-bottom: rem(-5) !important;
+  margin-top: rem(-10) !important;
+}
diff --git a/...e-card/structure-mobile-card.component.ts → ...e-card/structure-mobile-card.component.ts b/...e-card/structure-mobile-card.component.ts → ...e-card/structure-mobile-card.component.ts
@@ -3,8 +3,8 @@ import {
   FormProposedStructure,
   NOI_STRUCTURE_TYPE_LABEL_MAP,
   STRUCTURE_TYPES,
-} from '../../features/notice-of-intents/edit-submission/additional-information/additional-information.component';
-import { ProposedStructure } from '../../services/notice-of-intent-submission/notice-of-intent-submission.dto';
+} from '../../../features/notice-of-intents/edit-submission/additional-information/additional-information.component';
+import { ProposedStructure } from '../../../services/notice-of-intent-submission/notice-of-intent-submission.dto';
 
 @Component({
   selector: 'app-structure-mobile-card',
@@ -16,9 +16,19 @@ export class StructureMobileCardComponent {
   @Input() isLast: boolean = false;
   @Input() index: number = 0;
   @Input() isReviewStep: boolean = false;
+  @Input() showErrors: boolean = false;
   @Output() editClicked = new EventEmitter<FormProposedStructure | ProposedStructure>();
   @Output() removeClicked = new EventEmitter<FormProposedStructure | ProposedStructure>();
 
+  isError: boolean = false;
+
+  ngOnInit(): void {
+    if (this.structure.area === null || this.structure.area === 0 || this.structure.type === null) {
+      this.isError = true;
+      this.showErrors = true;
+    }
+  }
+
   onEdit() {
     this.editClicked.emit(this.structure);
   }

diff --git a/portal-frontend/src/app/shared/shared.module.ts b/portal-frontend/src/app/shared/shared.module.ts
@@ -54,7 +54,7 @@ import { OtherAttachmentMobileCardComponent } from './other-attachment-mobile-ca
 import { ParcelOwnerMobileCardComponent } from './mobile/parcel-owner-mobile-card/parcel-owner-mobile-card.component';
 import { TransfereeMobileCardComponent } from './mobile/transferee-mobile-card/transferee-mobile-card.component';
 import { NaruResidenceMobileCardComponent } from './mobile/naru-residence-mobile-card/naru-residence-mobile-card.component';
-import { StructureMobileCardComponent } from './structure-mobile-card/structure-mobile-card.component';
+import { StructureMobileCardComponent } from './mobile/structure-mobile-card/structure-mobile-card.component';
 
 @NgModule({
   providers: [