Merge pull request #2066 from bcgov/feature/ALCS-1871-2

Application Condition Card UI/UX features

Author: Abradat

alcs-frontend/src/app/features/application/application.component.html

@@ -4,6 +4,7 @@
       [application]="application"
       [modifications]="modifications"
       [reconsiderations]="reconsiderations"
+      [conditionCards]="decisionConditionCards"
       [showStatus]="true"
       [submissionStatusService]="applicationStatusService"
       [applicationDetailService]="applicationDetailService"

alcs-frontend/src/app/features/application/application.component.spec.ts

@@ -15,6 +15,7 @@ import { ApplicationSubmissionService } from '../../services/application/applica
 import { ApplicationSubmissionStatusService } from '../../services/application/application-submission-status/application-submission-status.service';
 
 import { ApplicationComponent } from './application.component';
+import { ApplicationDecisionConditionCardService } from '../../services/application/decision/application-decision-v2/application-decision-condition/application-decision-condition-card/application-decision-condition-card.service';
 
 describe('ApplicationComponent', () => {
   let component: ApplicationComponent;
@@ -25,6 +26,7 @@ describe('ApplicationComponent', () => {
   let mockReviewService: DeepMocked<ApplicationReviewService>;
   let mockAppSubmissionService: DeepMocked<ApplicationSubmissionService>;
   let mockAppStatusService: DeepMocked<ApplicationSubmissionStatusService>;
+  let mockApplicationDecisionConditionCardService: DeepMocked<ApplicationDecisionConditionCardService>;
 
   beforeEach(async () => {
     mockAppDetailService = createMock();
@@ -40,6 +42,8 @@ describe('ApplicationComponent', () => {
     mockAppSubmissionService = createMock();
     mockAppStatusService = createMock();
 
+    mockApplicationDecisionConditionCardService = createMock();
+
     await TestBed.configureTestingModule({
       providers: [
         {
@@ -70,6 +74,10 @@ describe('ApplicationComponent', () => {
           provide: ApplicationSubmissionStatusService,
           useValue: mockAppStatusService,
         },
+        {
+          provide: ApplicationDecisionConditionCardService,
+          useValue: mockApplicationDecisionConditionCardService,
+        },
         {
           provide: ActivatedRoute,
           useValue: {

alcs-frontend/src/app/features/application/application.component.ts

@@ -30,6 +30,9 @@ import { ReviewComponent } from './review/review.component';
 import { ApplicationSubmissionStatusService } from '../../services/application/application-submission-status/application-submission-status.service';
 import { ApplicationTagService } from '../../services/application/application-tag/application-tag.service';
 import { FileTagService } from '../../services/common/file-tag.service';
+import { ApplicationDecisionV2Service } from '../../services/application/decision/application-decision-v2/application-decision-v2.service';
+import { ApplicationDecisionConditionCardDto } from '../../services/application/decision/application-decision-v2/application-decision-v2.dto';
+import { ApplicationDecisionConditionCardService } from '../../services/application/decision/application-decision-v2/application-decision-condition/application-decision-condition-card/application-decision-condition-card.service';
 
 export const unsubmittedRoutes = [
   {
@@ -184,6 +187,7 @@ export class ApplicationComponent implements OnInit, OnDestroy {
   application: ApplicationDto | undefined;
   reconsiderations: ApplicationReconsiderationDto[] = [];
   modifications: ApplicationModificationDto[] = [];
+  decisionConditionCards: ApplicationDecisionConditionCardDto[] = [];
   submission?: ApplicationSubmissionDto;
 
   isApplicantSubmission = false;
@@ -195,6 +199,7 @@ export class ApplicationComponent implements OnInit, OnDestroy {
     public applicationSubmissionService: ApplicationSubmissionService,
     private reconsiderationService: ApplicationReconsiderationService,
     private modificationService: ApplicationModificationService,
+    private decisionConditionCardService: ApplicationDecisionConditionCardService,
     private route: ActivatedRoute,
     private titleService: Title,
     public applicationStatusService: ApplicationSubmissionStatusService,
@@ -214,6 +219,9 @@ export class ApplicationComponent implements OnInit, OnDestroy {
         this.reconsiderationService.fetchByApplication(application.fileNumber);
         this.modificationService.fetchByApplication(application.fileNumber);
 
+        this.decisionConditionCards =
+          (await this.decisionConditionCardService.fetchByApplicationFileNumber(application.fileNumber)) || [];
+
         this.isApplicantSubmission = application.source !== SYSTEM_SOURCE_TYPES.ALCS;
         let wasSubmittedToLfng = false;
 

alcs-frontend/src/app/features/application/decision/conditions/condition-card-dialog/condition-card-dialog.component.html

@@ -25,7 +25,7 @@ <h3>Create New Condition Card</h3>
   <div class="section">
     <span>Add one or more conditions*</span>
     <div class="table-container">
-      <table mat-table class="conditions-table mat-elevation-z2" [dataSource]="dataSource" style="width: 100%">
+      <table mat-table class="conditions-table mat-elevation-z3" [dataSource]="dataSource" style="width: 100%">
         <ng-container matColumnDef="select">
           <th mat-header-cell *matHeaderCellDef class="column-select"></th>
           <td mat-cell *matCellDef="let element" class="column-select">
@@ -53,6 +53,8 @@ <h3>Create New Condition Card</h3>
           mat-row
           *matRowDef="let row; columns: displayColumns"
           [class.disabled-row]="isConditionCardNotNull(row)"
+          matTooltip="Condition is already used by another card"
+          [matTooltipDisabled]="!isConditionCardNotNull(row)"
         ></tr>
       </table>
     </div>

alcs-frontend/src/app/features/application/decision/conditions/condition-card-dialog/condition-card-dialog.component.scss

@@ -43,10 +43,11 @@
 .table-container {
   max-height: 300px;
   overflow-y: auto;
+  padding: 2px;
 }
 
 .disabled-row {
-  background-color: #f0f0f0; // Light gray background
-  pointer-events: none; // Disable interactions
-  opacity: 0.6; // Make it look disabled
+  background-color: #f0f0f0;
+  opacity: 0.6;
+  cursor: default;
 }

alcs-frontend/src/app/features/application/decision/conditions/condition-card-dialog/condition-card-dialog.component.ts

@@ -11,6 +11,7 @@ import { ApplicationDecisionConditionCardService } from '../../../../../services
 import { BOARD_TYPE_CODES, BoardService } from '../../../../../services/board/board.service';
 import { BoardDto, BoardStatusDto } from '../../../../../services/board/board.dto';
 import { ToastService } from '../../../../../services/toast/toast.service';
+import { CardType } from '../../../../../shared/card/card.component';
 
 @Component({
   selector: 'app-condition-card-dialog',
@@ -75,7 +76,11 @@ export class ConditionCardDialogComponent implements OnInit {
     };
     const res = await this.decisionConditionCardService.create(createDto);
     if (res) {
-      this.toastService.showSuccessToast('Condition card created successfully');
+      this.toastService.showSuccessToastWithLink(
+        'Condition card created successfully',
+        'GO TO BOARD',
+        `/board/appcon?card=${res.cardUuid}&type=${CardType.APP_CON}`,
+      );
       this.dialogRef.close({ action: 'save', result: true });
     } else {
       this.toastService.showErrorToast('Failed to create condition card');

alcs-frontend/src/app/features/board/board.component.ts

@@ -31,7 +31,7 @@ import {
   RECON_TYPE_LABEL,
   RETROACTIVE_TYPE_LABEL,
 } from '../../shared/application-type-pill/application-type-pill.constants';
-import { CardData, CardSelectedEvent, CardType } from '../../shared/card/card.component';
+import { CardData, CardSelectedEvent, CardType, ConditionCardData } from '../../shared/card/card.component';
 import { DragDropColumn } from '../../shared/drag-drop-board/drag-drop-column.interface';
 import { AppModificationDialogComponent } from './dialogs/app-modification/app-modification-dialog.component';
 import { CreateAppModificationDialogComponent } from './dialogs/app-modification/create/create-app-modification-dialog.component';
@@ -507,7 +507,19 @@ export class BoardComponent implements OnInit, OnDestroy {
 
   private mapApplicationDecisionConditionToCard(
     applicationDecisionCondition: ApplicationDecisionConditionCardBoardDto,
-  ): CardData {
+  ): ConditionCardData {
+    let isExpired = false;
+    let isPastDue = false;
+
+    for (const condition of applicationDecisionCondition.conditions) {
+      if (condition.status === 'EXPIRED') {
+        isExpired = true;
+      }
+      if (condition.status === 'PASTDUE') {
+        isPastDue = true;
+      }
+    }
+
     return {
       status: applicationDecisionCondition.card!.status.code,
       typeLabel: 'Application',
@@ -521,6 +533,8 @@ export class BoardComponent implements OnInit, OnDestroy {
       cardUuid: applicationDecisionCondition.card.uuid,
       paused: false,
       dateReceived: 0,
+      isExpired,
+      isPastDue,
     };
   }
 

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

@@ -110,7 +110,9 @@ <h3 class="card-title">
   </div>
   <div class="conditions-container">
     <div class="conditions-header-container">
-      <span class="conditions-header">Decision # - Conditions to Review</span>
+      <span class="conditions-header"
+        >Decision #{{ applicationDecisionConditionCard.decisionOrder }} - Conditions to Review</span
+      >
       <div class="buttons-container">
         <ng-container *ngIf="!isEditing; else editMode">
           <button class="edit-button" mat-icon-button (click)="editClicked()">
@@ -168,7 +170,7 @@ <h3 class="card-title">
           mat-row
           *matRowDef="let row; columns: displayColumns"
           [class.disabled-row]="isConditionDisabled(row.condition)"
-          matTooltip="Condition is being used by another card"
+          matTooltip="Condition is already used by another card"
           [matTooltipDisabled]="!isConditionDisabled(row.condition)"
         ></tr>
       </table>

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

@@ -20,7 +20,7 @@
 
 .disabled-row {
   background-color: #f0f0f0;
-  pointer-events: none;
+  cursor: default;
   opacity: 0.6;
 }
 

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

@@ -110,7 +110,6 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
       return false;
     }
     return condition.conditionCard?.uuid !== this.applicationDecisionConditionCard.uuid;
-    // return condition.conditionCard?.uuid !== this.applicationDecisionConditionCard.uuid;
   }
 
   getStatusPill(status: string) {
@@ -185,7 +184,6 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
       conditionsUuids: selectedConditions,
     };
 
-    console.log(updateDto);
     const res = await this.applicationDecisionConditionCardService.update(
       this.applicationDecisionConditionCard.uuid,
       updateDto,
@@ -195,6 +193,8 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
     } else {
       this.toastService.showErrorToast('Failed to update condition card');
     }
+    this.isEditing = false;
+    this.displayColumns = this.defaultColumns;
   }
 
   isSaveDisabled(): boolean {

alcs-frontend/src/app/services/application/decision/application-decision-v2/application-decision-condition/application-decision-condition-card/application-decision-condition-card.service.ts

@@ -67,4 +67,18 @@ export class ApplicationDecisionConditionCardService {
     }
     return;
   }
+
+  async fetchByApplicationFileNumber(fileNumber: string): Promise<ApplicationDecisionConditionCardDto[] | undefined> {
+    try {
+      return await firstValueFrom(
+        this.http.get<ApplicationDecisionConditionCardDto[]>(`${this.url}/application/${fileNumber}`),
+      );
+    } catch (e: any) {
+      console.error(e);
+      this.toastService.showErrorToast(
+        'Failed to fetch Application Decision Condition Cards by Application File Number',
+      );
+    }
+    return;
+  }
 }

alcs-frontend/src/app/services/application/decision/application-decision-v2/application-decision-v2.dto.ts

@@ -302,6 +302,7 @@ export interface ApplicationDecisionConditionCardDto {
   uuid: string;
   conditions: ApplicationDecisionConditionDto[];
   cardUuid: string;
+  card: CardDto;
   decisionUuid: string;
   applicationFileNumber: string;
 }
@@ -326,6 +327,7 @@ export interface ApplicationDecisionConditionCardBoardDto {
   conditions: ApplicationDecisionConditionDto[];
   card: CardDto;
   decisionUuid: string;
+  decisionOrder: number;
   fileNumber: string;
   applicant: string;
   type?: ApplicationTypeDto;

alcs-frontend/src/app/services/toast/toast.service.ts

@@ -1,11 +1,15 @@
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ToastService {
-  constructor(private snackBar: MatSnackBar) {}
+  constructor(
+    private snackBar: MatSnackBar,
+    private router: Router,
+  ) {}
 
   private TOAST_DURATION = 3000;
   private ACTION_TOAST_DURATION = 6000;
@@ -29,4 +33,21 @@ export class ToastService {
       panelClass: 'error',
     });
   }
+
+  showSuccessToastWithLink(text: string, action: string, link: string) {
+    const snackBarRef = this.snackBar.open(text, action, {
+      duration: action ? this.ACTION_TOAST_DURATION : this.TOAST_DURATION,
+      panelClass: 'success',
+    });
+
+    snackBarRef.onAction().subscribe(() => {
+      const url = new URL(link, window.location.origin);
+      const route = url.pathname;
+      const queryParams: { [key: string]: string } = {};
+      url.searchParams.forEach((value, key) => {
+        queryParams[key] = value;
+      });
+      this.router.navigate([route], { queryParams });
+    });
+  }
 }

alcs-frontend/src/app/shared/card/card.component.html

@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="lower-card">
-      <div>
+      <div *ngIf="!isConditionCard">
         <div
           *ngIf="cardData.activeDays !== undefined"
           class="day-count active-days center"
@@ -66,6 +66,10 @@
           >
         </div>
       </div>
+      <div class="condition-status-pill">
+        <app-application-type-pill *ngIf="isExpired" [type]="getStatusPill('EXPIRED')"></app-application-type-pill>
+        <app-application-type-pill *ngIf="isPastDue" [type]="getStatusPill('PASTDUE')"></app-application-type-pill>
+      </div>
       <app-avatar-circle
         *ngIf="cardData.assignee"
         [initials]="cardData.assignee.initials || ''"

alcs-frontend/src/app/shared/card/card.component.ts

@@ -2,6 +2,10 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ApplicationDecisionMeetingDto } from '../../services/application/application.dto';
 import { AssigneeDto } from '../../services/user/user.dto';
 import { ApplicationPill } from '../application-type-pill/application-type-pill.component';
+import {
+  DECISION_CONDITION_EXPIRED_LABEL,
+  DECISION_CONDITION_PASTDUE_LABEL,
+} from '../application-type-pill/application-type-pill.constants';
 
 export interface CardData {
   id: string;
@@ -28,6 +32,11 @@ export interface CardData {
   showDueDate?: boolean;
 }
 
+export interface ConditionCardData extends CardData {
+  isExpired: boolean;
+  isPastDue: boolean;
+}
+
 export interface CardSelectedEvent {
   uuid: string;
   cardType: CardType;
@@ -42,7 +51,7 @@ export enum CardType {
   NOI_MODI = 'NOIM',
   NOTIFICATION = 'NOTI',
   INQUIRY = 'INQR',
-  APP_CON = 'APP_CON',
+  APP_CON = 'APPCON',
 }
 
 const lineHeight = 24;
@@ -53,10 +62,14 @@ const lineHeight = 24;
   styleUrls: ['./card.component.scss'],
 })
 export class CardComponent implements OnInit {
-  @Input() cardData!: CardData;
+  @Input() cardData!: CardData | ConditionCardData;
 
   @Output() cardSelected = new EventEmitter<CardSelectedEvent>();
 
+  isConditionCard = false;
+  isExpired = false;
+  isPastDue = false;
+
   constructor() {}
 
   onClick(uuid: string, cardType: CardType) {
@@ -82,6 +95,10 @@ export class CardComponent implements OnInit {
         this.cardData.latestDecisionDate = this.getLatestDecisionDate();
       }
     }
+
+    this.isConditionCard = this.cardData.cardType === CardType.APP_CON;
+    this.isExpired = this.isConditionCard ? (this.cardData as ConditionCardData).isExpired : false;
+    this.isPastDue = this.isConditionCard ? (this.cardData as ConditionCardData).isPastDue : false;
   }
 
   onMouseHover(e: any) {
@@ -93,4 +110,12 @@ export class CardComponent implements OnInit {
 
     return;
   }
+
+  getStatusPill(status: string) {
+    if (status === 'PASTDUE') {
+      return DECISION_CONDITION_PASTDUE_LABEL;
+    } else {
+      return DECISION_CONDITION_EXPIRED_LABEL;
+    }
+  }
 }