Skip to content

Commit

Permalink
Merge pull request #2089 from bcgov/feature/ALCS-2406
Browse files Browse the repository at this point in the history 
Add Support to Move Application Conditions to Other Boards
  • Loading branch information
@Abradat
Abradat authored Jan 25, 2025
2 parents 91b6153 + 78e1099 commit a86055d
Show file tree
Hide file tree
Showing 12 changed files with 234 additions and 77 deletions.
13 changes: 5 additions & 8 deletions alcs-frontend/src/app/features/board/board.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,14 +314,6 @@ export class BoardComponent implements OnInit, OnDestroy {
...mappedPlanningReferrals,
...mappedNotifications,
].sort(noiSort);
} else if (boardCode === BOARD_TYPE_CODES.APP_CON) {
const appConSort = (a: CardData, b: CardData) => {
if (a.highPriority !== b.highPriority) {
return b.highPriority ? 1 : -1;
}
return 0;
};
this.cards = mappedAppDecisionConditions.sort(appConSort);
} else {
const sorted = [];
sorted.push(
Expand All @@ -336,6 +328,7 @@ export class BoardComponent implements OnInit, OnDestroy {
...mappedPlanningReferrals.filter((r) => r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
...mappedInquiries.filter((r) => r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
...mappedNotifications.filter((r) => r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
...mappedAppDecisionConditions.filter((r) => r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
// non-high priority
...mappedNoticeOfIntents
.filter((a) => !a.highPriority)
Expand All @@ -349,6 +342,7 @@ export class BoardComponent implements OnInit, OnDestroy {
...mappedPlanningReferrals.filter((r) => !r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
...mappedInquiries.filter((r) => !r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
...mappedNotifications.filter((r) => !r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
...mappedAppDecisionConditions.filter((r) => !r.highPriority).sort((a, b) => a.dateReceived - b.dateReceived),
);
this.cards = sorted;
}
Expand Down Expand Up @@ -537,7 +531,10 @@ export class BoardComponent implements OnInit, OnDestroy {
dateReceived: 0,
isExpired,
isPastDue,
isInConditionBoard: this.currentBoardCode === BOARD_TYPE_CODES.APP_CON,
decisionIsFlagged: applicationDecisionCondition.decisionIsFlagged,
isModification: applicationDecisionCondition.isModification,
isReconsideration: applicationDecisionCondition.isReconsideration,
};
}

Expand Down
16 changes: 16 additions & 0 deletions ...pplication-decision-condition-dialog/application-decision-condition-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,22 @@ <h3 class="card-title">
</div>
</div>
<div class="right">
<button matTooltip="Move Board" [matMenuTriggerFor]="moveMenu" mat-icon-button>
<mat-icon>move_down</mat-icon>
</button>
<mat-menu class="move-board-menu" xPosition="before" #moveMenu="matMenu">
<button (click)="onBoardSelected(board)" *ngFor="let board of allowedBoards" mat-menu-item>
<div class="board-menu-item">
<span class="favourite-board-icon-container"
><mat-icon *ngIf="board.isFavourite" class="favourite-board-icon">star</mat-icon>
</span>
<span>{{ board.title }}</span>
<span *ngIf="card && card!.boardCode === board.code"
><mat-icon class="selected-board-icon">check</mat-icon></span
>
</div>
</button>
</mat-menu>
<button
*ngIf="canArchive"
matTooltip="Archive Card"
Expand Down
32 changes: 31 additions & 1 deletion .../application-decision-condition-dialog/application-decision-condition-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
import { ApplicationDecisionV2Service } from '../../../../services/application/decision/application-decision-v2/application-decision-v2.service';
import { UserService } from '../../../../services/user/user.service';
import { ConfirmationDialogService } from '../../../../shared/confirmation-dialog/confirmation-dialog.service';
import { BoardService } from '../../../../services/board/board.service';
import { BoardService, BoardWithFavourite } from '../../../../services/board/board.service';
import { ToastService } from '../../../../services/toast/toast.service';
import { CardService } from '../../../../services/card/card.service';
import { AuthenticationService } from '../../../../services/authentication/authentication.service';
Expand All @@ -30,6 +30,7 @@ import {
MODIFICATION_TYPE_LABEL,
RECON_TYPE_LABEL,
} from '../../../../shared/application-type-pill/application-type-pill.constants';
import { Router } from '@angular/router';

@Component({
selector: 'app-application-decision-condition-dialog',
Expand Down Expand Up @@ -70,6 +71,7 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
toastService: ToastService,
cardService: CardService,
authService: AuthenticationService,
private router: Router,
) {
super(authService, dialogRef, cardService, confirmationDialogService, toastService, userService, boardService);
}
Expand Down Expand Up @@ -222,4 +224,32 @@ export class ApplicationDecisionConditionDialogComponent extends CardDialogCompo
isSaveDisabled(): boolean {
return !this.dataSource.data.some((item) => item.selected);
}

async onBoardSelected(board: BoardWithFavourite) {
this.selectedBoard = board.code;
try {
await this.boardService.changeBoard(this.applicationDecisionConditionCard.card!.uuid, board.code);
const loadedBoard = await this.boardService.fetchBoardDetail(board.code);
if (loadedBoard) {
this.boardStatuses = loadedBoard.statuses;
}

this.isDirty = true;
const toast = this.toastService.showSuccessToast(`Application Condition moved to ${board.title}`, 'Go to Board');
toast.onAction().subscribe(() => {
this.router.navigate(['/board', board.code]);
});
await this.reloadApplicationCondition();
} catch (e) {
this.toastService.showErrorToast('Failed to move to new board');
}
}

async reloadApplicationCondition() {
const applicationDecisionConditionCard = await this.applicationDecisionConditionCardService.getByCard(
this.applicationDecisionConditionCard.card.uuid,
);
this.applicationDecisionConditionCard = applicationDecisionConditionCard!;
this.populateData();
}
}
2 changes: 1 addition & 1 deletion alcs-frontend/src/app/shared/application-type-pill/application-type-pill.constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const CLOSED_PR_LABEL = {

export const CONDITION_LABEL = {
label: 'Condition',
shortLabel: 'Condition',
shortLabel: 'COND',
backgroundColor: '#fff',
borderColor: '#454545',
textColor: '#000',
Expand Down
154 changes: 91 additions & 63 deletions alcs-frontend/src/app/shared/card/card.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,80 +10,108 @@
</div>
<div class="card-content">
<div class="upper-card">
<div class="subtext">
{{ cardData.typeLabel }}
<div class="row">
<div class="subtext">
{{ cardData.typeLabel }}
</div>
</div>
<div class="row">
<span
class="ellipsis"
[id]="cardData.id"
[matTooltip]="cardData.titleTooltip"
(mouseover)="onMouseHover(cardData.id)"
(focus)="onMouseHover(cardData.id)"
[matTooltipDisabled]="!cardData.verticalOutBound"
>{{ cardData.title }}</span
>
<span class="high-priority" *ngIf="cardData.highPriority">!</span>
</div>
<span
class="ellipsis"
[id]="cardData.id"
[matTooltip]="cardData.titleTooltip"
(mouseover)="onMouseHover(cardData.id)"
(focus)="onMouseHover(cardData.id)"
[matTooltipDisabled]="!cardData.verticalOutBound"
>{{ cardData.title }}</span
>
<span class="high-priority" *ngIf="cardData.highPriority">!</span>
<div class="labels">
<app-application-type-pill
*ngFor="let type of cardData.labels"
[type]="type"
[useShortLabel]="true"
></app-application-type-pill>
<div class="row">
<div class="labels">
<app-application-type-pill
*ngFor="let type of cardData.labels"
[type]="type"
[useShortLabel]="true"
></app-application-type-pill>
<ng-container *ngIf="isConditionCard && !isInConditionBoard">
<app-application-type-pill
[type]="getStatusPill('CONDITION')"
[useShortLabel]="true"
></app-application-type-pill>
<app-application-type-pill
*ngIf="isModification"
[type]="getStatusPill('MODIFICATION')"
[useShortLabel]="true"
></app-application-type-pill>
<app-application-type-pill
*ngIf="isReconsideration"
[type]="getStatusPill('RECONSIDERATION')"
[useShortLabel]="true"
></app-application-type-pill>
</ng-container>
</div>
</div>
</div>
<div class="lower-card">
<div *ngIf="!isConditionCard">
<div
*ngIf="cardData.activeDays !== undefined"
class="day-count active-days center"
matTooltip="Active days: {{ cardData.activeDays }} "
>
<mat-icon>calendar_month</mat-icon>
<span *ngIf="!cardData.maxActiveDays || cardData.activeDays < cardData.maxActiveDays" class="center">
{{ cardData.activeDays }}
</span>
<span *ngIf="cardData.maxActiveDays && cardData.activeDays >= cardData.maxActiveDays" class="center">
{{ cardData.maxActiveDays }}+
</span>
</div>
<div
*ngIf="cardData.pausedDays !== undefined"
class="day-count center"
matTooltip="Paused days: {{ cardData.pausedDays }} "
>
<mat-icon>pause</mat-icon>
<span class="center">{{ cardData.pausedDays }}</span>
</div>
<div *ngIf="cardData.showDueDate && cardData.dueDate" class="due-date center">
<span class="center">Due: {{ cardData.dueDate | momentFormat }}</span>
</div>
<div *ngIf="cardData.activeDays && cardData.dueDate !== undefined" class="due-date center">
<span *ngIf="!cardData.maxActiveDays || cardData.activeDays < cardData.maxActiveDays" class="center"
>Due: {{ cardData.dueDate | momentFormat }}</span
<div class="left-card">
<div *ngIf="!isConditionCard">
<div
*ngIf="cardData.activeDays !== undefined"
class="day-count active-days center"
matTooltip="Active days: {{ cardData.activeDays }} "
>
<span *ngIf="cardData.maxActiveDays && cardData.activeDays >= cardData.maxActiveDays" class="center red-text"
>Overdue</span
<mat-icon>calendar_month</mat-icon>
<span *ngIf="!cardData.maxActiveDays || cardData.activeDays < cardData.maxActiveDays" class="center">
{{ cardData.activeDays }}
</span>
<span *ngIf="cardData.maxActiveDays && cardData.activeDays >= cardData.maxActiveDays" class="center">
{{ cardData.maxActiveDays }}+
</span>
</div>
<div
*ngIf="cardData.pausedDays !== undefined"
class="day-count center"
matTooltip="Paused days: {{ cardData.pausedDays }} "
>
<mat-icon>pause</mat-icon>
<span class="center">{{ cardData.pausedDays }}</span>
</div>
<div *ngIf="cardData.showDueDate && cardData.dueDate" class="due-date center">
<span class="center">Due: {{ cardData.dueDate | momentFormat }}</span>
</div>
<div *ngIf="cardData.activeDays && cardData.dueDate !== undefined" class="due-date center">
<span *ngIf="!cardData.maxActiveDays || cardData.activeDays < cardData.maxActiveDays" class="center"
>Due: {{ cardData.dueDate | momentFormat }}</span
>
<span
*ngIf="cardData.maxActiveDays && cardData.activeDays >= cardData.maxActiveDays"
class="center red-text"
>Overdue</span
>
</div>
</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 class="condition-status-pill" *ngIf="isConditionCard && isInConditionBoard">
<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>
</div>

<div class="flag-avatar-container">
<mat-icon
*ngIf="cardData.cardType === CardType.APP_CON && cardData.decisionIsFlagged"
svgIcon="personal_places"
class="flag-icon"
></mat-icon>
<div class="right-card">
<div class="flag-avatar-container">
<mat-icon
*ngIf="cardData.cardType === CardType.APP_CON && cardData.decisionIsFlagged"
svgIcon="personal_places"
class="flag-icon"
></mat-icon>

<app-avatar-circle
*ngIf="cardData.assignee"
[initials]="cardData.assignee.initials || ''"
[name]="cardData.assignee.prettyName"
></app-avatar-circle>
<app-avatar-circle
*ngIf="cardData.assignee"
[initials]="cardData.assignee.initials || ''"
[name]="cardData.assignee.prettyName"
></app-avatar-circle>
</div>
</div>
</div>
</div>
Expand Down
21 changes: 20 additions & 1 deletion alcs-frontend/src/app/shared/card/card.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ $date-ht: 32px;
font-size: 1.4em;
font-weight: bold;
color: colors.$error-color;
float: right;
}

.day-count {
Expand All @@ -96,6 +95,8 @@ $date-ht: 32px;

.labels {
margin-top: 6px;
display: flex;
justify-items: flex-start;
}

.cdk-drag-placeholder {
Expand Down Expand Up @@ -150,3 +151,21 @@ mat-card {
.flag-icon {
color: blue;
}

.left-card {
display: flex;
justify-content: flex-start;
flex: 1;
}

.right-card {
display: flex;
justify-content: flex-end;
flex: 1;
}

.row {
width: 100%;
display: flex;
justify-content: space-between;
}
Loading

0 comments on commit a86055d

Please sign in to comment.