Skip to content

Commit d25953e

Browse files
AbradatAbradat
authored
Merge pull request #2023 from bcgov/feature/ALCS-2091
Add Single and Multiple Date Features to Conditions Page
2 parents badd18c + 5e026ea commit d25953e

File tree

22 files changed

+967
-163
lines changed

22 files changed

+967
-163
lines changed

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

+140-25
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<h4 *ngIf="condition.type">{{ stringIndex }}. {{ condition.type.label }}</h4>
33
<app-application-type-pill [type]="statusLabel"></app-application-type-pill>
44
</div>
5-
<div class="grid-3">
5+
<div [ngClass]="isThreeColumn ? 'grid-3' : 'grid-2'">
66
<div>
77
<div class="subheading2">Component to Condition</div>
88
<span class="component-labels">{{ condition.componentLabelsStr }}</span>
@@ -17,14 +17,6 @@ <h4 *ngIf="condition.type">{{ stringIndex }}. {{ condition.type.label }}</h4>
1717
></app-no-data>
1818
</div>
1919

20-
<div *ngIf="showSingleDateField">
21-
<div class="subheading2">{{ singleDateLabel }}</div>
22-
{{ singleDateFormated }}
23-
<app-no-data
24-
*ngIf="singleDateFormated === null || singleDateFormated === undefined"
25-
></app-no-data>
26-
</div>
27-
2820
<div *ngIf="showSecurityAmountField">
2921
<div class="subheading2">Security Amount</div>
3022
{{ condition.securityAmount }}
@@ -82,23 +74,146 @@ <h4 *ngIf="condition.type">{{ stringIndex }}. {{ condition.type.label }}</h4>
8274
</div>
8375
</div>
8476
</div>
77+
</div>
78+
79+
<div class="dates-container" *ngIf="condition.dates !== undefined && condition.type?.isDateChecked">
80+
<ng-container *ngIf="showSingleDateField; else showMultipleDateTable">
81+
<ng-container *ngIf="singleDateLabel === 'Due Date'; else showEndDateContainer">
82+
<div class="single-table">
83+
<div class="single-table-header">
84+
<div class="single-column single-due">
85+
<div class="subheading2">Due</div>
86+
</div>
87+
<div class="single-column single-completed">
88+
<div class="subheading2">Completed</div>
89+
</div>
90+
<div class="single-column single-comment">
91+
<div class="subheading2">Comment</div>
92+
</div>
93+
</div>
94+
95+
<hr class="divider" />
96+
97+
<div class="single-table-row">
98+
<div class="single-column single-due">
99+
<app-inline-datepicker
100+
[value]="condition.dates[0].date ?? undefined"
101+
(save)="updateDate(condition.dates[0].uuid!, 'date', $event)"
102+
></app-inline-datepicker>
103+
</div>
104+
<div class="single-column single-completed">
105+
<app-inline-datepicker
106+
[value]="condition.dates[0].completedDate ?? undefined"
107+
(save)="updateDate(condition.dates[0].uuid!, 'completedDate', $event)"
108+
></app-inline-datepicker>
109+
</div>
110+
<div class="single-column single-comment">
111+
<app-inline-text
112+
[value]="condition.dates[0].comment ?? undefined"
113+
(save)="updateDate(condition.dates[0].uuid!, 'comment', $event)"
114+
></app-inline-text>
115+
</div>
116+
</div>
117+
<hr class="divider" />
118+
</div>
119+
</ng-container>
120+
<ng-template #showEndDateContainer>
121+
<div class="single-table">
122+
<div class="single-table-header">
123+
<div class="single-column single-end">
124+
<div class="subheading2">End Date</div>
125+
</div>
126+
</div>
127+
128+
<hr class="divider" />
129+
130+
<div class="single-table-row">
131+
<div class="single-column single-end">
132+
<app-inline-datepicker
133+
[value]="condition.dates[0].date ?? undefined"
134+
(save)="updateDate(condition.dates[0].uuid!, 'date', $event)"
135+
></app-inline-datepicker>
136+
</div>
137+
</div>
138+
<hr class="divider" />
139+
</div>
140+
</ng-template>
141+
</ng-container>
142+
143+
<ng-template #showMultipleDateTable>
144+
<table mat-table [dataSource]="dataSource" matSort class="multiple-table" style="width: 100%">
145+
<ng-container matColumnDef="index">
146+
<th mat-header-cell *matHeaderCellDef class="multiple-index">#</th>
147+
<td mat-cell *matCellDef="let element">{{ element.index }}</td>
148+
</ng-container>
85149

86-
<div class="full-width">
87-
<div class="subheading2">Description</div>
88-
<span
89-
class="decision-condition-description"
90-
[id]="condition.uuid + 'Description'"
91-
[ngClass]="{ 'ellipsis-3': !isReadMoreClicked }"
92-
>{{ condition.description }}</span
150+
<ng-container matColumnDef="due">
151+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="multiple-due">Due</th>
152+
<td mat-cell *matCellDef="let element">
153+
<app-inline-datepicker
154+
[value]="condition.dates[element.index - 1].date ?? undefined"
155+
(save)="updateDate(condition.dates[element.index - 1].uuid!, 'date', $event)"
156+
></app-inline-datepicker>
157+
</td>
158+
</ng-container>
159+
160+
<ng-container matColumnDef="completed">
161+
<th mat-header-cell *matHeaderCellDef mat-sort-header class="multiple-completed">Completed</th>
162+
<td mat-cell *matCellDef="let element">
163+
<app-inline-datepicker
164+
[value]="condition.dates[element.index - 1].completedDate ?? undefined"
165+
(save)="updateDate(condition.dates[element.index - 1].uuid!, 'completedDate', $event)"
166+
></app-inline-datepicker>
167+
</td>
168+
</ng-container>
169+
170+
<ng-container matColumnDef="comment">
171+
<th mat-header-cell *matHeaderCellDef class="multiple-comment">Comment</th>
172+
<td mat-cell *matCellDef="let element" class="wrap-text">
173+
<app-inline-text
174+
[value]="condition.dates[element.index - 1].comment ?? undefined"
175+
(save)="updateDate(condition.dates[element.index - 1].uuid!, 'comment', $event)"
176+
></app-inline-text>
177+
</td>
178+
</ng-container>
179+
180+
<ng-container matColumnDef="action">
181+
<th mat-header-cell *matHeaderCellDef class="multiple-action">Action</th>
182+
<td mat-cell *matCellDef="let element">
183+
<button mat-icon-button color="primary" (click)="onDeleteDate(element.uuid)" *ngIf="dates.length > 1">
184+
<mat-icon>delete</mat-icon>
185+
</button>
186+
</td>
187+
</ng-container>
188+
189+
<tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
190+
<tr mat-row *matRowDef="let row; columns: displayColumns"></tr>
191+
</table>
192+
193+
<button type="button" mat-stroked-button color="primary" class="add-date-btn" (click)="addNewDate()">
194+
+ DUE DATES
195+
</button>
196+
</ng-template>
197+
</div>
198+
199+
<div
200+
class="full-width"
201+
[ngClass]="{ 'description-no-date-container': !(condition.dates !== undefined && condition.type?.isDateChecked) }"
202+
>
203+
<div class="subheading2">Description</div>
204+
<span
205+
class="decision-condition-description"
206+
[id]="condition.uuid + 'Description'"
207+
[ngClass]="{ 'ellipsis-3': !isReadMoreClicked }"
208+
>{{ condition.description }}</span
209+
>
210+
<app-no-data *ngIf="condition.description === null || condition.description === undefined"></app-no-data>
211+
<div class="read-more">
212+
<a
213+
(click)="onToggleReadMore()"
214+
(keypress)="onToggleReadMore()"
215+
[ngClass]="{ 'display-none': !isReadMoreVisible || !condition.description }"
216+
>{{ isReadMoreClicked ? 'Read Less' : 'Read More' }}</a
93217
>
94-
<app-no-data *ngIf="condition.description === null || condition.description === undefined"></app-no-data>
95-
<div class="read-more">
96-
<a
97-
(click)="onToggleReadMore()"
98-
(keypress)="onToggleReadMore()"
99-
[ngClass]="{ 'display-none': !isReadMoreVisible || !condition.description }"
100-
>{{ isReadMoreClicked ? 'Read Less' : 'Read More' }}</a
101-
>
102-
</div>
103218
</div>
104219
</div>

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

+79
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,82 @@
55
.decision-condition-description {
66
white-space: pre-line;
77
}
8+
9+
.dates-container {
10+
width: 100%;
11+
margin: 10px 0 20px 0;
12+
}
13+
14+
.single-table {
15+
display: flex;
16+
flex-direction: column;
17+
width: 100%;
18+
border: none;
19+
}
20+
21+
.single-table-header {
22+
display: flex;
23+
padding: 8px 8px;
24+
}
25+
26+
.divider {
27+
margin: 0;
28+
border: none;
29+
border-top: 1px solid #0000001f;
30+
}
31+
32+
.single-table-row {
33+
display: flex;
34+
padding: 4px 8px;
35+
}
36+
37+
.single-column {
38+
padding: 4px 8px;
39+
word-wrap: break-word;
40+
}
41+
42+
.single-due {
43+
flex: 0 0 20%;
44+
}
45+
46+
.single-end {
47+
flex: 1;
48+
}
49+
50+
.single-completed {
51+
flex: 0 0 20%;
52+
}
53+
54+
.single-comment {
55+
flex: 1;
56+
}
57+
58+
.description-no-date-container {
59+
margin-top: 18px;
60+
}
61+
62+
.multiple-table {
63+
width: 100%;
64+
margin-bottom: 20px;
65+
background-color: transparent;
66+
67+
.multiple-index {
68+
width: 5%;
69+
}
70+
71+
.multiple-due {
72+
width: 25%;
73+
}
74+
75+
.multiple-completed {
76+
width: 25%;
77+
}
78+
79+
.multiple-comment {
80+
width: 40%;
81+
}
82+
83+
.mutliple-actions {
84+
width: 5%;
85+
}
86+
}

0 commit comments

Comments
 (0)