Skip to content

Commit 6723a51

Browse files
AbradatAbradat
committed
update application decision condition card dialog
1 parent f418ce5 commit 6723a51

File tree

10 files changed

+385
-59
lines changed

10 files changed

+385
-59
lines changed

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

+37-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,49 @@
1+
import { NO_ERRORS_SCHEMA } from '@angular/core';
12
import { ComponentFixture, TestBed } from '@angular/core/testing';
2-
3+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4+
import { createMock, DeepMocked } from '@golevelup/ts-jest';
5+
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
6+
import { MatTableModule } from '@angular/material/table';
7+
import { MatSortModule } from '@angular/material/sort';
8+
import { HttpClientTestingModule } from '@angular/common/http/testing';
9+
import { RouterTestingModule } from '@angular/router/testing';
10+
import { ApplicationDecisionConditionCardService } from '../../../../../services/application/decision/application-decision-v2/application-decision-condition/application-decision-condition-card/application-decision-condition-card.service';
11+
import { BoardService } from '../../../../../services/board/board.service';
12+
import { ToastService } from '../../../../../services/toast/toast.service';
313
import { ConditionCardDialogComponent } from './condition-card-dialog.component';
414

515
describe('ConditionCardDialogComponent', () => {
616
let component: ConditionCardDialogComponent;
717
let fixture: ComponentFixture<ConditionCardDialogComponent>;
18+
let mockDecisionConditionCardService: DeepMocked<ApplicationDecisionConditionCardService>;
19+
let mockBoardService: DeepMocked<BoardService>;
20+
let mockToastService: DeepMocked<ToastService>;
821

922
beforeEach(async () => {
23+
mockDecisionConditionCardService = createMock();
24+
mockBoardService = createMock();
25+
mockToastService = createMock();
26+
1027
await TestBed.configureTestingModule({
11-
imports: [ConditionCardDialogComponent]
12-
})
13-
.compileComponents();
14-
28+
declarations: [ConditionCardDialogComponent],
29+
imports: [
30+
MatDialogModule,
31+
BrowserAnimationsModule,
32+
MatTableModule,
33+
MatSortModule,
34+
HttpClientTestingModule,
35+
RouterTestingModule,
36+
],
37+
providers: [
38+
{ provide: MAT_DIALOG_DATA, useValue: { conditions: [], decision: 'decision-uuid' } },
39+
{ provide: MatDialogRef, useValue: {} },
40+
{ provide: ApplicationDecisionConditionCardService, useValue: mockDecisionConditionCardService },
41+
{ provide: BoardService, useValue: mockBoardService },
42+
{ provide: ToastService, useValue: mockToastService },
43+
],
44+
schemas: [NO_ERRORS_SCHEMA],
45+
}).compileComponents();
46+
1547
fixture = TestBed.createComponent(ConditionCardDialogComponent);
1648
component = fixture.componentInstance;
1749
fixture.detectChanges();

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,11 @@ export class ConditionCardDialogComponent implements OnInit {
7373
decisionUuid: this.data.decision,
7474
cardStatusCode: this.selectedStatus,
7575
};
76-
try {
77-
await this.decisionConditionCardService.create(createDto);
76+
const res = await this.decisionConditionCardService.create(createDto);
77+
if (res) {
7878
this.toastService.showSuccessToast('Condition card created successfully');
79-
this.dialogRef.close(true);
8079
this.dialogRef.close({ action: 'save', result: true });
81-
} catch (error) {
80+
} else {
8281
this.toastService.showErrorToast('Failed to create condition card');
8382
this.dialogRef.close({ action: 'save', result: false });
8483
}

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

+11
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { PlanningReferralDto } from '../../services/planning-review/planning-rev
2727
import { ToastService } from '../../services/toast/toast.service';
2828
import { CardType } from '../../shared/card/card.component';
2929
import { BoardComponent } from './board.component';
30+
import { ApplicationDecisionConditionCardService } from '../../services/application/decision/application-decision-v2/application-decision-condition/application-decision-condition-card/application-decision-condition-card.service';
3031

3132
describe('BoardComponent', () => {
3233
let component: BoardComponent;
@@ -46,6 +47,7 @@ describe('BoardComponent', () => {
4647
let noticeOfIntentModificationService: DeepMocked<NoticeOfIntentModificationService>;
4748
let notificationService: DeepMocked<NotificationService>;
4849
let inquiryService: DeepMocked<InquiryService>;
50+
let applicationDecisionConditionCardService: DeepMocked<ApplicationDecisionConditionCardService>;
4951

5052
let boardEmitter = new BehaviorSubject<BoardWithFavourite[]>([]);
5153

@@ -100,6 +102,7 @@ describe('BoardComponent', () => {
100102
noiModifications: [],
101103
notifications: [],
102104
inquiries: [],
105+
applicationDecisionConditions: [],
103106
});
104107

105108
dialog = createMock();
@@ -115,6 +118,7 @@ describe('BoardComponent', () => {
115118
noticeOfIntentModificationService = createMock();
116119
notificationService = createMock();
117120
inquiryService = createMock();
121+
applicationDecisionConditionCardService = createMock();
118122

119123
const params = {
120124
boardCode: 'boardCode',
@@ -184,6 +188,10 @@ describe('BoardComponent', () => {
184188
provide: InquiryService,
185189
useValue: inquiryService,
186190
},
191+
{
192+
provide: ApplicationDecisionConditionCardService,
193+
useValue: applicationDecisionConditionCardService,
194+
},
187195
{
188196
provide: Title,
189197
useValue: titleService,
@@ -227,6 +235,7 @@ describe('BoardComponent', () => {
227235
noiModifications: [],
228236
notifications: [],
229237
inquiries: [],
238+
applicationDecisionConditions: [],
230239
});
231240

232241
boardEmitter.next([mockBoard]);
@@ -248,6 +257,7 @@ describe('BoardComponent', () => {
248257
noiModifications: [],
249258
notifications: [],
250259
inquiries: [],
260+
applicationDecisionConditions: [],
251261
});
252262

253263
boardEmitter.next([mockBoard]);
@@ -291,6 +301,7 @@ describe('BoardComponent', () => {
291301
noiModifications: [],
292302
notifications: [],
293303
inquiries: [],
304+
applicationDecisionConditions: [],
294305
});
295306

296307
boardEmitter.next([mockBoard]);

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

+81-25
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ <h6 class="card-type-label">Application</h6>
99
<div class="left">
1010
<h3 class="card-title">
1111
<span class="margin-right">{{ cardTitle }}</span>
12-
<app-application-type-pill [type]="application.type"></app-application-type-pill>
1312
</h3>
1413
</div>
1514
<div class="center">
1615
<button
16+
*ngIf="decision"
1717
color="accent"
1818
mat-flat-button
1919
[mat-dialog-close]="isDirty"
@@ -23,35 +23,25 @@ <h3 class="card-title">
2323
</button>
2424
</div>
2525
</div>
26-
<div>
27-
<span class="region">{{ application.localGovernment?.name }} - {{ application.region?.label }} Region</span>
26+
<div class="pill-row">
27+
<app-application-type-pill [type]="application.type"></app-application-type-pill>
28+
<app-application-type-pill
29+
*ngIf="applicationDecisionConditionCard.isModification"
30+
[type]="getStatusPill('MODIFICATION')"
31+
></app-application-type-pill>
32+
<app-application-type-pill
33+
*ngIf="applicationDecisionConditionCard.isReconsideration"
34+
[type]="getStatusPill('RECONSIDERATION')"
35+
></app-application-type-pill>
36+
<app-application-type-pill [type]="getStatusPill('CONDITION')"></app-application-type-pill>
2837
</div>
2938
<div class="header-row">
3039
<div class="left">
31-
<!-- <app-time-tracker [data]="application"></app-time-tracker> -->
32-
<!-- <app-application-submission-status-type-pill
33-
*ngIf="status"
34-
[type]="status"
35-
></app-application-submission-status-type-pill> -->
40+
<div>
41+
<span class="region">{{ application.localGovernment?.name }} - {{ application.region?.label }} Region</span>
42+
</div>
3643
</div>
3744
<div class="right">
38-
<!-- TODO: Implement move board feature in the future -->
39-
<!-- <button matTooltip="Move Board" [matMenuTriggerFor]="moveMenu" mat-icon-button>
40-
<mat-icon>move_down</mat-icon>
41-
</button>
42-
<mat-menu class="move-board-menu" xPosition="before" #moveMenu="matMenu">
43-
<button (click)="onBoardSelected(board)" *ngFor="let board of allowedBoards" mat-menu-item>
44-
<div class="board-menu-item">
45-
<span class="favourite-board-icon-container"
46-
><mat-icon *ngIf="board.isFavourite" class="favourite-board-icon">star</mat-icon>
47-
</span>
48-
<span>{{ board.title }}</span>
49-
<span *ngIf="card && card!.boardCode === board.code"
50-
><mat-icon class="selected-board-icon">check</mat-icon></span
51-
>
52-
</div>
53-
</button>
54-
</mat-menu> -->
5545
<button
5646
*ngIf="canArchive"
5747
matTooltip="Archive Card"
@@ -118,6 +108,72 @@ <h3 class="card-title">
118108
</ng-template>
119109
</ng-select>
120110
</div>
111+
<div class="conditions-container">
112+
<div class="conditions-header-container">
113+
<span class="conditions-header">Decision # - Conditions to Review</span>
114+
<div class="buttons-container">
115+
<ng-container *ngIf="!isEditing; else editMode">
116+
<button class="edit-button" mat-icon-button (click)="editClicked()">
117+
<mat-icon class="edit-icon">edit</mat-icon>
118+
</button>
119+
</ng-container>
120+
<ng-template #editMode>
121+
<button type="button" mat-stroked-button color="primary" (click)="onCancel()">Cancel</button>
122+
<button type="button" mat-flat-button color="primary" [disabled]="isSaveDisabled()" (click)="onSave()">
123+
Save
124+
</button>
125+
</ng-template>
126+
</div>
127+
</div>
128+
<div class="conditions-table-container">
129+
<table mat-table class="conditions-table mat-elevation-z2" [dataSource]="dataSource" style="width: 100%">
130+
<ng-container matColumnDef="select">
131+
<td mat-cell *matCellDef="let element" class="column-select">
132+
<mat-checkbox [(ngModel)]="element.selected"></mat-checkbox>
133+
</td>
134+
</ng-container>
135+
136+
<ng-container matColumnDef="condition">
137+
<td mat-cell *matCellDef="let element" class="column-condition">
138+
{{ element.index }}. {{ element.condition.type.label }}
139+
</td>
140+
</ng-container>
141+
142+
<ng-container matColumnDef="date">
143+
<td mat-cell *matCellDef="let element" class="column-date">
144+
<ng-container *ngIf="element.condition.type.isDateChecked">
145+
<ng-container *ngIf="element.condition.type.dateType === 'Single'; else multipleDateColumn">
146+
<ng-container *ngIf="element.condition.type.singleDateLabel === 'Due Date'; else singleEndDate">
147+
<span class="date-label">Due Date: </span>
148+
</ng-container>
149+
<ng-template #singleEndDate>
150+
<span class="date-label">End Date: </span>
151+
</ng-template>
152+
</ng-container>
153+
<ng-template #multipleDateColumn>
154+
<span class="date-label">Due Date:</span>
155+
</ng-template>
156+
{{ getDate(element.condition) }}
157+
</ng-container>
158+
</td>
159+
</ng-container>
160+
161+
<ng-container matColumnDef="status">
162+
<td mat-cell *matCellDef="let element" class="column-status">
163+
<app-application-type-pill [type]="getStatusPill(element.condition.status)"></app-application-type-pill>
164+
</td>
165+
</ng-container>
166+
167+
<tr
168+
mat-row
169+
*matRowDef="let row; columns: displayColumns"
170+
[class.disabled-row]="isConditionDisabled(row.condition)"
171+
matTooltip="Condition is being used by another card"
172+
[matTooltipDisabled]="!isConditionDisabled(row.condition)"
173+
></tr>
174+
</table>
175+
</div>
176+
</div>
121177
<div class="subtasks-wrapper">
122178
<app-subtasks *ngIf="card" [cardUuid]="card.uuid"></app-subtasks>
123179
</div>

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

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.column-select {
2+
width: 10%;
3+
}
4+
5+
.column-condition {
6+
width: 40%;
7+
}
8+
9+
.column-date {
10+
width: 35%;
11+
}
12+
13+
.column-status {
14+
width: 15%;
15+
}
16+
17+
.conditions-table {
18+
width: 100%;
19+
}
20+
21+
.disabled-row {
22+
background-color: #f0f0f0;
23+
pointer-events: none;
24+
opacity: 0.6;
25+
}
26+
27+
.conditions-table-container {
28+
max-height: 300px;
29+
overflow-y: auto;
30+
margin-top: 8px;
31+
border: 2px solid #929292;
32+
border-radius: 4px;
33+
}
34+
35+
.date-label {
36+
font-weight: 700;
37+
color: #313132;
38+
}
39+
40+
.conditions-container {
41+
display: flex;
42+
flex-direction: column;
43+
margin-top: 20px;
44+
}
45+
46+
.conditions-header-container {
47+
display: flex;
48+
flex-direction: row;
49+
justify-content: space-between;
50+
}
51+
52+
.buttons-container {
53+
width: 30%;
54+
display: flex;
55+
flex-direction: row;
56+
gap: 20px;
57+
justify-content: flex-end;
58+
}
59+
60+
.conditions-header {
61+
font-weight: 700;
62+
color: #565656;
63+
flex-grow: 1;
64+
}
65+
66+
.edit-button {
67+
position: relative;
68+
height: 32px;
69+
width: 32px;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
}
74+
75+
.edit-icon {
76+
position: absolute;
77+
top: 50%;
78+
left: 50%;
79+
font-size: 24px;
80+
transform: translate(-50%, -50%);
81+
}
82+
83+
.pill-row {
84+
display: flex;
85+
flex-direction: row;
86+
gap: 1px;
87+
}

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

-22
This file was deleted.

0 commit comments

Comments
 (0)