Fix application decision condition board card bugs

- Show all conditions only when editing
- Disable select for conditions used by other cards
- Show error color for table and checkboxes when no condition is selected
- Add 'No data' to conditions without end/due date values

Author: Abradat

alcs-frontend/src/app/features/board/dialogs/application-decision-condition-dialog/application-decision-condition-dialog.component.html

@@ -127,11 +127,14 @@ <h3 class="card-title">
         </ng-template>
       </div>
     </div>
-    <div class="conditions-table-container">
+    <div class="conditions-table-container" [ngClass]="{ 'error-state': isSaveDisabled() }">
       <table mat-table class="conditions-table mat-elevation-z2" [dataSource]="dataSource" style="width: 100%">
         <ng-container matColumnDef="select">
           <td mat-cell *matCellDef="let element" class="column-select">
-            <mat-checkbox [(ngModel)]="element.selected"></mat-checkbox>
+            <mat-checkbox
+              [disabled]="isConditionDisabled(element.condition)"
+              [(ngModel)]="element.selected"
+            ></mat-checkbox>
           </td>
         </ng-container>
 
@@ -155,7 +158,12 @@ <h3 class="card-title">
               <ng-template #multipleDateColumn>
                 <span class="date-label">Due Date:</span>
               </ng-template>
-              {{ getDate(element.condition) }}
+              <ng-container *ngIf="getDate(element.condition); else noDate">
+                {{ getDate(element.condition) }}
+              </ng-container>
+              <ng-template #noDate>
+                <span class="no-data">No Data</span>
+              </ng-template>
             </ng-container>
           </td>
         </ng-container>

alcs-frontend/src/app/features/board/dialogs/application-decision-condition-dialog/application-decision-condition-dialog.component.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/colors.scss';
+
 .column-select {
   width: 10%;
 }
@@ -30,6 +32,25 @@
   margin-top: 8px;
   border: 2px solid #929292;
   border-radius: 4px;
+
+  ::ng-deep .mdc-checkbox {
+    --mdc-checkbox-selected-icon-color: #{colors.$primary-color};
+    --mdc-checkbox-selected-focus-icon-color: #{colors.$primary-color};
+    --mdc-checkbox-selected-focus-icon-color: #{colors.$primary-color};
+    --mdc-checkbox-selected-hover-icon-color: #{colors.$primary-color};
+    --mdc-checkbox-selected-pressed-icon-color: #{colors.$primary-color};
+  }
+}
+
+.error-state {
+  border: 2px solid colors.$error-color !important;
+
+  ::ng-deep .mdc-checkbox {
+    --mdc-checkbox-unselected-icon-color: #{colors.$error-color};
+    --mdc-checkbox-unselected-focus-icon-color: #{colors.$error-color};
+    --mdc-checkbox-unselected-hover-icon-color: #{colors.$error-color};
+    --mdc-checkbox-unselected-pressed-icon-color: #{colors.$error-color};
+  }
 }
 
 .date-label {
@@ -85,3 +106,8 @@
   flex-direction: row;
   gap: 1px;
 }
+
+.no-data {
+  color: colors.$grey;
+  font-weight: 400;
+}

alcs-frontend/src/app/features/board/dialogs/application-decision-condition-dialog/application-decision-condition-dialog.component.ts

@@ -8,9 +8,7 @@ import {
   ApplicationDecisionDto,
   UpdateApplicationDecisionConditionCardDto,
 } from '../../../../services/application/decision/application-decision-v2/application-decision-v2.dto';
-import { ApplicationService } from '../../../../services/application/application.service';
 import { ApplicationDecisionV2Service } from '../../../../services/application/decision/application-decision-v2/application-decision-v2.service';
-import { Router } from '@angular/router';
 import { UserService } from '../../../../services/user/user.service';
 import { ConfirmationDialogService } from '../../../../shared/confirmation-dialog/confirmation-dialog.service';
 import { BoardService } from '../../../../services/board/board.service';
@@ -63,10 +61,8 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
       decisionConditionCard: ApplicationDecisionConditionCardBoardDto;
       application: ApplicationDto;
     },
-    private applicationService: ApplicationService,
     private applicationDecisionService: ApplicationDecisionV2Service,
     private applicationDecisionConditionCardService: ApplicationDecisionConditionCardService,
-    private router: Router,
     dialogRef: MatDialogRef<ApplicationDecisionConditionDialogComponent>,
     userService: UserService,
     confirmationDialogService: ConfirmationDialogService,
@@ -83,22 +79,32 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
   }
 
   async populateData() {
+    await this.loadDecision();
+
+    this.populateCardData(this.applicationDecisionConditionCard.card);
+    this.cardTitle = `${this.application.fileNumber} (${this.application.applicant})`;
+
+    this.loadTableData(true);
+  }
+
+  async loadDecision() {
     const decision = await this.applicationDecisionService.getByUuid(
       this.applicationDecisionConditionCard.decisionUuid,
       true,
     );
     if (decision) {
       this.decision = decision;
     }
+  }
 
-    this.populateCardData(this.applicationDecisionConditionCard.card);
-    this.cardTitle = `${this.application.fileNumber} (${this.application.applicant})`;
-
-    this.dataSource.data = this.decision.conditions.map((condition, index) => ({
+  loadTableData(filterSelected: boolean = false) {
+    const data = this.decision.conditions.map((condition, index) => ({
       condition,
       index: countToString(index + 1),
       selected: this.isConditionSelected(condition),
     }));
+
+    filterSelected ? (this.dataSource.data = data.filter((item) => item.selected)) : (this.dataSource.data = data);
   }
 
   isConditionSelected(condition: ApplicationDecisionConditionDto): boolean {
@@ -171,11 +177,14 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
   editClicked() {
     this.isEditing = true;
     this.displayColumns = this.editColumns;
+    this.loadTableData();
   }
 
   onCancel() {
     this.isEditing = false;
     this.displayColumns = this.defaultColumns;
+
+    this.loadTableData(true);
   }
 
   async onSave() {
@@ -188,13 +197,16 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
       this.applicationDecisionConditionCard.uuid,
       updateDto,
     );
-    if (res) {
-      this.toastService.showSuccessToast('Condition card updated successfully');
-    } else {
-      this.toastService.showErrorToast('Failed to update condition card');
-    }
+    res
+      ? this.toastService.showSuccessToast('Condition card updated successfully')
+      : this.toastService.showErrorToast('Failed to update condition card');
+
     this.isEditing = false;
     this.displayColumns = this.defaultColumns;
+    this.isDirty = true;
+
+    await this.loadDecision();
+    this.loadTableData(true);
   }
 
   isSaveDisabled(): boolean {

services/apps/alcs/src/alcs/application-decision/application-decision-condition/application-decision-condition-card/application-decision-condition-card.service.spec.ts

@@ -16,9 +16,7 @@ import {
   ServiceNotFoundException,
   ServiceValidationException,
 } from '../../../../../../../libs/common/src/exceptions/base.exception';
-import { ApplicationDecisionConditionCardBoardDto } from './application-decision-condition-card.dto';
 import { Card } from '../../../card/card.entity';
-import { ApplicationType } from '../../../code/application-code/application-type/application-type.entity';
 import { ApplicationProfile } from '../../../../common/automapper/application.automapper.profile';
 
 describe('ApplicationDecisionConditionCardService', () => {
@@ -30,6 +28,31 @@ describe('ApplicationDecisionConditionCardService', () => {
   let mockCardService: DeepMocked<CardService>;
   let mockMapper: DeepMocked<Mapper>;
 
+  const CARD_RELATIONS = {
+    board: true,
+    type: true,
+    status: true,
+    assignee: true,
+  };
+
+  const BOARD_CARD_RELATIONS = {
+    card: CARD_RELATIONS,
+    conditions: true,
+    decision: {
+      application: {
+        type: true,
+      },
+    },
+  };
+
+  const DEFAULT_RELATIONS = {
+    conditions: true,
+    card: CARD_RELATIONS,
+    decision: {
+      application: true,
+    },
+  };
+
   beforeEach(async () => {
     mockRepository = createMock();
     mockConditionService = createMock();
@@ -165,7 +188,7 @@ describe('ApplicationDecisionConditionCardService', () => {
 
       expect(mockRepository.findOne).toHaveBeenCalledWith({
         where: { uuid },
-        relations: ['conditions', 'decision'],
+        relations: DEFAULT_RELATIONS,
       });
       expect(result).toEqual(conditionCard);
     });
@@ -199,7 +222,7 @@ describe('ApplicationDecisionConditionCardService', () => {
 
       expect(mockRepository.findOne).toHaveBeenCalledWith({
         where: { uuid },
-        relations: ['conditions', 'decision'],
+        relations: DEFAULT_RELATIONS,
       });
       expect(mockBoardService.getApplicationDecisionConditionBoard).toHaveBeenCalled();
       expect(mockConditionService.findByUuids).toHaveBeenCalledWith(dto.conditionsUuids);

services/apps/alcs/src/alcs/application-decision/application-decision-condition/application-decision-condition-card/application-decision-condition-card.service.ts

@@ -49,7 +49,7 @@ export class ApplicationDecisionConditionCardService {
     },
   };
 
-  private DEFAULT_RELATIONS = {
+  DEFAULT_RELATIONS = {
     conditions: true,
     card: this.CARD_RELATIONS,
     decision: {