decision ui changes and performance fixes for home page (#712)

decision UI fixes home page performance fixes
bcgov · Jun 21, 2023 · 8e2f4ec · 8e2f4ec
1 parent 0e39fbc
commit 8e2f4ec
Show file tree

Hide file tree

Showing 21 changed files with 160 additions and 103 deletions.
diff --git a/...app/features/application/decision/decision-v2/decision-component/pfrs/pfrs.component.html b/...app/features/application/decision/decision-v2/decision-component/pfrs/pfrs.component.html
@@ -24,7 +24,10 @@
         <td>{{ component.soilToPlaceVolume }} m<sup>3</sup></td>
       </tr>
       <tr>
-        <td class="soil-table-label">Area</td>
+        <td class="soil-table-label">
+          Area
+          <div class="subtext">Note: 0.01 ha is 100m2</div>
+        </td>
         <td>{{ component.soilToRemoveArea }} ha</td>
         <td>{{ component.soilToPlaceArea }} ha</td>
       </tr>

diff --git a/...app/features/application/decision/decision-v2/decision-component/pofo/pofo.component.html b/...app/features/application/decision/decision-v2/decision-component/pofo/pofo.component.html
@@ -18,7 +18,10 @@
         <td>{{ component.soilToPlaceVolume }} m<sup>3</sup></td>
       </tr>
       <tr>
-        <td class="soil-table-label">Area</td>
+        <td class="soil-table-label">
+          Area
+          <div class="subtext">Note: 0.01 ha is 100m2</div>
+        </td>
         <td>{{ component.soilToPlaceArea }} ha</td>
       </tr>
       <tr>

diff --git a/...2/decision-input/decision-components/decision-component/decision-component.component.html b/...2/decision-input/decision-components/decision-component/decision-component.component.html
@@ -24,7 +24,7 @@
         bindLabel="label"
         bindValue="value"
         required
-        placeholder="AG Cap*"
+        placeholder="Ag Cap*"
         [clearable]="false"
       ></ng-select>
     </div>
@@ -38,7 +38,7 @@
         bindLabel="label"
         bindValue="value"
         required
-        placeholder="AG Cap Source*"
+        placeholder="Ag Cap Source*"
         [clearable]="false"
       ></ng-select>
     </div>

diff --git a/...ecision-input/decision-components/decision-component/pfrs-input/pfrs-input.component.html b/...ecision-input/decision-components/decision-component/pfrs-input/pfrs-input.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="form" class="pofo-component-form">
-  <div class="grid-3">
+  <div class="grid">
     <mat-form-field appearance="outline" class="date-picker">
       <mat-label>Use End Date</mat-label>
       <input
@@ -12,29 +12,29 @@
       <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #endDatePicker type="date"></mat-datepicker>
     </mat-form-field>
+  </div>
 
-    <mat-form-field appearance="outline" class="full-width">
-      <textarea
-        class="soil-text-area"
-        formControlName="soilTypeRemoved"
-        #fillTypeToPlaceText
-        maxlength="4000"
-        matInput
-        placeholder="Type of soil approved to be removed*"
-      ></textarea>
-    </mat-form-field>
+  <mat-form-field appearance="outline" class="row">
+    <textarea
+      class="soil-text-area"
+      formControlName="soilTypeRemoved"
+      #fillTypeToPlaceText
+      maxlength="4000"
+      matInput
+      placeholder="Type of soil approved to be removed*"
+    ></textarea>
+  </mat-form-field>
 
-    <mat-form-field appearance="outline" class="full-width">
-      <textarea
-        class="soil-text-area"
-        formControlName="fillTypeToPlace"
-        #fillTypeToPlaceText
-        maxlength="4000"
-        matInput
-        placeholder="Type, origin and quality of fill approved to be placed*"
-      ></textarea>
-    </mat-form-field>
-  </div>
+  <mat-form-field appearance="outline" class="row">
+    <textarea
+      class="soil-text-area"
+      formControlName="fillTypeToPlace"
+      #fillTypeToPlaceText
+      maxlength="4000"
+      matInput
+      placeholder="Type, origin and quality of fill approved to be placed*"
+    ></textarea>
+  </mat-form-field>
 
   <div class="container-wide">
     <div class="soil-table double-table">

diff --git a/...ecision-input/decision-components/decision-component/pofo-input/pofo-input.component.html b/...ecision-input/decision-components/decision-component/pofo-input/pofo-input.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="form" class="pofo-component-form">
-  <div class="grid-3">
+  <div class="grid">
     <mat-form-field appearance="outline" class="date-picker">
       <mat-label>Use End Date</mat-label>
       <input
@@ -12,19 +12,19 @@
       <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #endDatePicker type="date"></mat-datepicker>
     </mat-form-field>
-
-    <mat-form-field appearance="outline" class="full-width">
-      <textarea
-        class="soil-text-area"
-        formControlName="fillTypeToPlace"
-        #fillTypeToPlaceText
-        maxlength="4000"
-        matInput
-        placeholder="Type, origin and quality of fill approved to be placed*"
-      ></textarea>
-    </mat-form-field>
   </div>
 
+  <mat-form-field appearance="outline" class="row">
+    <textarea
+      class="soil-text-area"
+      formControlName="fillTypeToPlace"
+      #fillTypeToPlaceText
+      maxlength="4000"
+      matInput
+      placeholder="Type, origin and quality of fill approved to be placed*"
+    ></textarea>
+  </mat-form-field>
+
   <div class="container">
     <div class="soil-table">
       <div></div>

diff --git a/...ecision-input/decision-components/decision-component/roso-input/roso-input.component.html b/...ecision-input/decision-components/decision-component/roso-input/roso-input.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="form" class="roso-component-form">
-  <div class="grid-3">
+  <div class="grid">
     <mat-form-field appearance="outline" class="date-picker">
       <mat-label>Use End Date</mat-label>
       <input
@@ -12,19 +12,19 @@
       <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #endDatePicker type="date"></mat-datepicker>
     </mat-form-field>
-
-    <mat-form-field appearance="outline" class="full-width">
-      <textarea
-        class="soil-text-area"
-        formControlName="soilTypeRemoved"
-        #fillTypeToPlaceText
-        maxlength="4000"
-        matInput
-        placeholder="Type of soil approved to be removed*"
-      ></textarea>
-    </mat-form-field>
   </div>
 
+  <mat-form-field appearance="outline" class="row">
+    <textarea
+      class="soil-text-area"
+      formControlName="soilTypeRemoved"
+      #fillTypeToPlaceText
+      maxlength="4000"
+      matInput
+      placeholder="Type of soil approved to be removed*"
+    ></textarea>
+  </mat-form-field>
+
   <div class="container">
     <div class="soil-table">
       <div></div>

diff --git a/...ecision-input/decision-components/decision-component/turp-input/turp-input.component.html b/...ecision-input/decision-components/decision-component/turp-input/turp-input.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="form" class="turp-component-form">
-  <div class="grid-3">
+  <div class="grid">
     <mat-form-field appearance="outline" class="date-picker">
       <mat-label>Expiry Date</mat-label>
       <input

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
@@ -91,6 +91,9 @@ export class DecisionComponentsComponent implements OnInit, OnDestroy {
           agCapSource: this.application.agCapSource,
           agCapMap: this.application.agCapMap,
           agCapConsultant: this.application.agCapConsultant,
+          applicationDecisionComponentType: this.decisionComponentTypes.find(
+            (e) => e.code === typeCode && e.uiCode !== 'COPY'
+          ),
         };
 
         if (typeCode === APPLICATION_DECISION_COMPONENT_TYPE.NFUP) {
@@ -123,6 +126,9 @@ export class DecisionComponentsComponent implements OnInit, OnDestroy {
       case APPLICATION_DECISION_COMPONENT_TYPE.PFRS:
         this.components.push({
           applicationDecisionComponentTypeCode: typeCode,
+          applicationDecisionComponentType: this.decisionComponentTypes.find(
+            (e) => e.code === typeCode && e.uiCode !== 'COPY'
+          ),
         } as DecisionComponentDto);
         break;
       default:

diff --git a/alcs-frontend/src/app/features/application/decision/decision-v2/decision-v2.component.scss b/alcs-frontend/src/app/features/application/decision/decision-v2/decision-v2.component.scss
@@ -1,4 +1,5 @@
 @use '../../../../../styles/colors';
+
 :host ::ng-deep {
   section {
     margin-bottom: 64px;
@@ -122,6 +123,10 @@
     color: #565656 !important;
   }
 
+  .subheading1 {
+    color: colors.$grey-dark !important;
+  }
+
   .application-pill-wrapper,
   .application-pill {
     margin-right: 0 !important;

diff --git a/...cs/application-decision/application-modification/application-modification.service.spec.ts b/...cs/application-decision/application-modification/application-modification.service.spec.ts
@@ -42,7 +42,7 @@ describe('ApplicationModificationService', () => {
       decisionMeetings: true,
     },
     card: {
-      board: true,
+      board: false,
       type: true,
       status: true,
       assignee: true,

diff --git a/...rc/alcs/application-decision/application-modification/application-modification.service.ts b/...rc/alcs/application-decision/application-modification/application-modification.service.ts
@@ -13,6 +13,7 @@ import {
 import { ApplicationService } from '../../application/application.service';
 import { Board } from '../../board/board.entity';
 import { CARD_TYPE } from '../../card/card-type/card-type.entity';
+import { Card } from '../../card/card.entity';
 import { CardService } from '../../card/card.service';
 import { ApplicationDecisionV1Service } from '../application-decision-v1/application-decision/application-decision-v1.service';
 import {
@@ -33,7 +34,14 @@ export class ApplicationModificationService {
     private cardService: CardService,
   ) {}
 
-  private BOARD_RECONSIDERATION_RELATIONS: FindOptionsRelations<ApplicationModification> =
+  private CARD_RELATIONS: FindOptionsRelations<Card> = {
+    board: true,
+    type: true,
+    status: true,
+    assignee: true,
+  };
+
+  private BOARD_MODIFICATION_RELATIONS: FindOptionsRelations<ApplicationModification> =
     {
       application: {
         type: true,
@@ -42,10 +50,8 @@ export class ApplicationModificationService {
         decisionMeetings: true,
       },
       card: {
-        board: true,
-        type: true,
-        status: true,
-        assignee: true,
+        ...this.CARD_RELATIONS,
+        board: false,
       },
     };
 
@@ -70,7 +76,7 @@ export class ApplicationModificationService {
   getByBoard(boardUuid: string) {
     return this.modificationRepository.find({
       where: { card: { boardUuid } },
-      relations: this.BOARD_RECONSIDERATION_RELATIONS,
+      relations: this.BOARD_MODIFICATION_RELATIONS,
     });
   }
 

diff --git a/...lication-decision/application-reconsideration/application-reconsideration.service.spec.ts b/...lication-decision/application-reconsideration/application-reconsideration.service.spec.ts
@@ -51,7 +51,7 @@ describe('ReconsiderationService', () => {
         decisionMeetings: true,
       },
       card: {
-        board: true,
+        board: false,
         type: true,
         status: true,
         assignee: true,

diff --git a/...s/application-decision/application-reconsideration/application-reconsideration.service.ts b/...s/application-decision/application-reconsideration/application-reconsideration.service.ts
@@ -43,6 +43,13 @@ export class ApplicationReconsiderationService {
     private applicationDecisionService: ApplicationDecisionV1Service,
   ) {}
 
+  private DEFAULT_CARD_RELATIONS = {
+    board: true,
+    type: true,
+    status: true,
+    assignee: true,
+  };
+
   private BOARD_RECONSIDERATION_RELATIONS: FindOptionsRelations<ApplicationReconsideration> =
     {
       application: {
@@ -51,12 +58,7 @@ export class ApplicationReconsiderationService {
         localGovernment: true,
         decisionMeetings: true,
       },
-      card: {
-        board: true,
-        type: true,
-        status: true,
-        assignee: true,
-      },
+      card: { ...this.DEFAULT_CARD_RELATIONS, board: false },
       type: true,
     };
 

diff --git a/services/apps/alcs/src/alcs/application/application.service.spec.ts b/services/apps/alcs/src/alcs/application/application.service.spec.ts
@@ -42,6 +42,7 @@ describe('ApplicationService', () => {
     type: true,
     card: {
       ...DEFAULT_CARD_RELATIONS,
+      board: false,
     },
     region: true,
     decisionMeetings: true,

diff --git a/services/apps/alcs/src/alcs/application/application.service.ts b/services/apps/alcs/src/alcs/application/application.service.ts
@@ -46,23 +46,19 @@ export class ApplicationService {
     status: true,
     assignee: true,
     type: true,
+    board: true,
   };
   private BOARD_RELATIONS: FindOptionsRelations<Application> = {
     type: true,
-    card: {
-      ...this.DEFAULT_CARD_RELATIONS,
-    },
+    card: this.DEFAULT_CARD_RELATIONS,
     region: true,
     decisionMeetings: true,
     localGovernment: true,
   };
 
   private DEFAULT_RELATIONS: FindOptionsRelations<Application> = {
     type: true,
-    card: {
-      ...this.DEFAULT_CARD_RELATIONS,
-      board: true,
-    },
+    card: this.DEFAULT_CARD_RELATIONS,
     region: true,
     decisionMeetings: true,
     localGovernment: true,
@@ -224,7 +220,13 @@ export class ApplicationService {
   ): Promise<Application[]> {
     return await this.applicationRepository.find({
       where: findOptions,
-      relations: this.DEFAULT_RELATIONS,
+      relations: {
+        ...this.DEFAULT_RELATIONS,
+        card: {
+          ...this.DEFAULT_CARD_RELATIONS,
+          board: true,
+        },
+      },
       order: sortOptions,
     });
   }
@@ -236,7 +238,10 @@ export class ApplicationService {
           boardUuid,
         },
       },
-      relations: this.BOARD_RELATIONS,
+      relations: {
+        ...this.BOARD_RELATIONS,
+        card: { ...this.DEFAULT_CARD_RELATIONS, board: false },
+      },
     });
   }