Feature/alcs 880 decision v2 errors (#809)

errors on decision v2 highlight buttons scroll to error update SUBM status colour
bcgov · Jul 24, 2023 · 89dc139 · 89dc139
1 parent 4952e5c
commit 89dc139
Show file tree

Hide file tree

Showing 16 changed files with 276 additions and 62 deletions.
diff --git a/...res/application/decision/decision-v2/decision-documents/decision-documents.component.html b/...res/application/decision/decision-v2/decision-documents/decision-documents.component.html
@@ -3,7 +3,17 @@
   <div *ngIf="editable" class="subheading2">Decision Documents *</div>
 </div>
 <div *ngIf="editable">
-  <button type="button" class="upload-button" (click)="onUploadFile()" mat-flat-button color="primary">Upload</button>
+  <button
+    type="button"
+    [ngClass]="{ 'upload-button': true, 'error-field-outlined ng-invalid': showError }"
+    class=""
+    (click)="onUploadFile()"
+    mat-flat-button
+    color="primary"
+  >
+    Upload
+  </button>
+  <app-error-message *ngIf="showError"></app-error-message>
 </div>
 <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z3 documents">
   <ng-container matColumnDef="type">

diff --git a/...tures/application/decision/decision-v2/decision-documents/decision-documents.component.ts b/...tures/application/decision/decision-v2/decision-documents/decision-documents.component.ts
@@ -21,6 +21,7 @@ export class DecisionDocumentsComponent implements OnInit, OnDestroy {
   @Input() editable = true;
   @Input() loadData = true;
   @Input() decision: ApplicationDecisionDto | undefined;
+  @Input() showError = false;
   @Output() beforeDocumentUpload = new EventEmitter<boolean>();
 
   displayedColumns: string[] = ['type', 'fileName', 'source', 'visibilityFlags', 'uploadedAt', 'actions'];

diff --git a/...ecision/decision-v2/decision-input/decision-components/decision-components.component.html b/...ecision/decision-v2/decision-input/decision-components/decision-components.component.html
@@ -4,7 +4,11 @@ <h5>Decision Components</h5>
   </div>
 
   <div class="component" *ngFor="let component of components; let index = index; trackBy: trackByFn">
-    <app-decision-component [(data)]="components[index]" [codes]="codes" (dataChange)='onChange()'></app-decision-component>
+    <app-decision-component
+      [(data)]="components[index]"
+      [codes]="codes"
+      (dataChange)="onChange()"
+    ></app-decision-component>
     <div class="row">
       <button type="button" class="remove-button" mat-stroked-button color="warn" (click)="onRemove(index)">
         Remove Component
@@ -13,9 +17,18 @@ <h5>Decision Components</h5>
   </div>
 
   <div class="row">
-    <button type="button" [matMenuTriggerFor]="decisionComponentMenu" mat-stroked-button color="primary">
-      ADD Decision component ▾
-    </button>
+    <div>
+      <button
+        [ngClass]="{ 'error-field-outlined ng-invalid': showError }"
+        type="button"
+        [matMenuTriggerFor]="decisionComponentMenu"
+        mat-stroked-button
+        color="primary"
+      >
+        ADD Decision component ▾
+      </button>
+      <app-error-message *ngIf="showError"></app-error-message>
+    </div>
   </div>
 
   <mat-menu xPosition="before" #decisionComponentMenu="matMenu">

diff --git a/.../decision/decision-v2/decision-input/decision-components/decision-components.component.ts b/.../decision/decision-v2/decision-input/decision-components/decision-components.component.ts
@@ -34,6 +34,7 @@ export class DecisionComponentsComponent implements OnInit, OnDestroy, AfterView
 
   @Input() codes!: DecisionCodesDto;
   @Input() fileNumber!: string;
+  @Input() showError = false;
 
   @Input() components: DecisionComponentDto[] = [];
   @Output() componentsChange = new EventEmitter<{
@@ -225,4 +226,8 @@ export class DecisionComponentsComponent implements OnInit, OnDestroy, AfterView
       isValid,
     });
   }
+
+  onValidate() {
+    this.childComponents.forEach((component) => component.form.markAllAsTouched());
+  }
 }
diff --git a/...ecision/decision-v2/decision-input/decision-conditions/decision-conditions.component.html b/...ecision/decision-v2/decision-input/decision-conditions/decision-conditions.component.html
@@ -12,6 +12,15 @@ <h5>Decision Conditions</h5>
     </button>
   </div>
   <div class="buttons">
-    <button type="button" (click)="onAddNewCondition()" mat-stroked-button color="primary">Add New Condition</button>
+    <button
+      [ngClass]="{ 'error-field-outlined ng-invalid': showError }"
+      type="button"
+      (click)="onAddNewCondition()"
+      mat-stroked-button
+      color="primary"
+    >
+      Add New Condition
+    </button>
+    <app-error-message *ngIf="showError"></app-error-message>
   </div>
 </section>
diff --git a/.../decision/decision-v2/decision-input/decision-conditions/decision-conditions.component.ts b/.../decision/decision-v2/decision-input/decision-conditions/decision-conditions.component.ts
@@ -34,6 +34,7 @@ export class DecisionConditionsComponent implements OnInit, OnChanges, OnDestroy
   @Input() codes!: DecisionCodesDto;
   @Input() components: DecisionComponentDto[] = [];
   @Input() conditions: ApplicationDecisionConditionDto[] = [];
+  @Input() showError = false;
   @ViewChildren(DecisionConditionComponent) conditionComponents: DecisionConditionComponent[] = [];
 
   @Output() conditionsChange = new EventEmitter<{
@@ -197,4 +198,8 @@ export class DecisionConditionsComponent implements OnInit, OnChanges, OnDestroy
       isValid: this.conditionComponents.reduce((isValid, component) => isValid && component.form.valid, true),
     });
   }
+
+  onValidate() {
+    this.conditionComponents.forEach((component) => component.form.markAllAsTouched());
+  }
 }
diff --git a/...features/application/decision/decision-v2/decision-input/decision-input-v2.component.html b/...features/application/decision/decision-v2/decision-input/decision-input-v2.component.html
@@ -18,17 +18,22 @@ <h3>Decisions > Edit Decision Draft</h3>
       </div>
 
       <div class="resolution-number-wrapper">
-        <button
-          *ngIf="!resolutionNumberControl.getRawValue()"
-          class="generate-number-btn"
-          [loading]="isLoading"
-          type="button"
-          mat-stroked-button
-          color="primary"
-          (click)="onGenerateResolutionNumber()"
-        >
-          Generate Number
-        </button>
+        <div *ngIf="!resolutionNumberControl.getRawValue()" class="resolution-number-btn-wrapper">
+          <button
+            class="generate-number-btn"
+            [loading]="isLoading"
+            type="button"
+            mat-stroked-button
+            color="primary"
+            (click)="onGenerateResolutionNumber()"
+            [ngClass]="{ 'error-field-outlined ng-invalid': !resolutionNumberControl.valid && resolutionNumberControl.touched }"
+          >
+            Generate Number
+          </button>
+          <app-error-message
+            *ngIf="!resolutionNumberControl.valid && resolutionNumberControl.touched"
+          ></app-error-message>
+        </div>
         <div *ngIf="resolutionNumberControl.getRawValue()">
           <div class="resolution-number">
             <span>Res #{{ resolutionNumberControl.getRawValue() }} / {{ resolutionYearControl.getRawValue() }}</span>
@@ -138,16 +143,21 @@ <h3>Decisions > Edit Decision Draft</h3>
       ></ng-select>
 
       <div>
-        <mat-label class="toggle-label">Subject to Conditions*</mat-label>
-        <mat-button-toggle-group
-          id="isSubjectToConditions"
-          formControlName="isSubjectToConditions"
-          name="isSubjectToConditions"
-          (change)="onChangeSubjectToConditions($event)"
-        >
-          <mat-button-toggle value="true">Yes</mat-button-toggle>
-          <mat-button-toggle value="false">No</mat-button-toggle>
-        </mat-button-toggle-group>
+        <div>
+          <mat-label class="toggle-label">Subject to Conditions*</mat-label>
+          <mat-button-toggle-group
+            id="isSubjectToConditions"
+            formControlName="isSubjectToConditions"
+            name="isSubjectToConditions"
+            (change)="onChangeSubjectToConditions($event)"
+            [ngClass]="{
+              'error-field-outlined': !form.controls.isSubjectToConditions.valid && form.controls.isSubjectToConditions.touched
+            }"
+          >
+            <mat-button-toggle value="true">Yes</mat-button-toggle>
+            <mat-button-toggle value="false">No</mat-button-toggle>
+          </mat-button-toggle-group>
+        </div>
       </div>
 
       <div class="full-width">
@@ -159,7 +169,14 @@ <h3>Decisions > Edit Decision Draft</h3>
 
       <div>
         <mat-label class="toggle-label">Stats required*</mat-label>
-        <mat-button-toggle-group id="isStatsRequired" formControlName="isStatsRequired" name="isStatsRequired">
+        <mat-button-toggle-group
+          id="isStatsRequired"
+          formControlName="isStatsRequired"
+          name="isStatsRequired"
+          [ngClass]="{
+            'error-field-outlined ng-invalid': !form.controls.isStatsRequired.valid && form.controls.isStatsRequired.touched
+          }"
+        >
           <mat-button-toggle value="true">Yes</mat-button-toggle>
           <mat-button-toggle value="false">No</mat-button-toggle>
         </mat-button-toggle-group>
@@ -191,7 +208,10 @@ <h3>Decisions > Edit Decision Draft</h3>
     </mat-form-field>
 
     <div>
-      <app-decision-documents (beforeDocumentUpload)="onSubmit(true, true)"></app-decision-documents>
+      <app-decision-documents
+        (beforeDocumentUpload)="onSubmit(true, true)"
+        [showError]="form.touched && !existingDecision?.documents?.length"
+      ></app-decision-documents>
     </div>
 
     <app-decision-components
@@ -200,6 +220,7 @@ <h3>Decisions > Edit Decision Draft</h3>
       [fileNumber]="fileNumber"
       [components]="components"
       (componentsChange)="onComponentChange($event)"
+      [showError]="form.touched && components.length < 1"
     >
     </app-decision-components>
 
@@ -210,6 +231,7 @@ <h3>Decisions > Edit Decision Draft</h3>
         [components]="components"
         [conditions]="conditions"
         (conditionsChange)="onConditionsChange($event)"
+        [showError]="form.touched && conditionUpdates.length < 1 && showConditions"
       ></app-decision-conditions>
     </div>
 
@@ -270,25 +292,12 @@ <h4>Audit and Chair Review Info</h4>
 
     <div class="btn-row">
       <button mat-stroked-button color="primary" type="button" (click)="onCancel()">Cancel</button>
-      <button type="submit" mat-flat-button color="primary">Save Decision Draft</button>
+      <button type="submit" mat-flat-button color="accent">Save Decision Draft</button>
     </div>
   </form>
 
   <div class="row flex-right">
-    <button
-      class="release-decision-btn"
-      type="button"
-      [disabled]="
-        !form.valid ||
-        !conditionsValid ||
-        !componentsValid ||
-        (components.length === 0 && showComponents) ||
-        (conditionUpdates.length === 0 && showConditions)
-      "
-      (click)="onRelease()"
-      mat-flat-button
-      color="primary"
-    >
+    <button class="release-decision-btn" type="button" (click)="onRelease()" mat-flat-button color="primary">
       Release Decision
     </button>
   </div>

diff --git a/...features/application/decision/decision-v2/decision-input/decision-input-v2.component.scss b/...features/application/decision/decision-v2/decision-input/decision-input-v2.component.scss
@@ -26,6 +26,9 @@
   .resolution-number-wrapper {
     display: grid;
     grid-template-columns: 1fr 16px 0.7fr;
+    .resolution-number-btn-wrapper {
+      width: 100%;
+    }
   }
 
   .row-no-flex,
@@ -143,4 +146,18 @@
     color: #565656 !important;
     margin: 24px 0 !important;
   }
+
+  .error-field-outlined.ng-invalid {
+    border-color: colors.$error-color !important;
+
+    .mat-button-toggle {
+      border-color: colors.$error-color;
+      color: colors.$error-color !important;
+    }
+
+    &.upload-button {
+      border: 2px solid colors.$error-color;
+      margin-bottom: 0px !important;
+    }
+  }
 }