From f0368b87f2fbc724d6dcb90b852bfd2691442296 Mon Sep 17 00:00:00 2001
From: Gavin Porter <112116086+Gavinp14@users.noreply.github.com>
Date: Fri, 27 Dec 2024 13:21:00 -0500
Subject: [PATCH] teams: smoother tasks deadlines (fixes #5377) (#7842)

Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 package.json                       |  2 +-
 src/app/tasks/tasks.component.html |  3 ++-
 src/app/tasks/tasks.component.ts   | 20 ++++++++++++++++++++
 src/app/tasks/tasks.scss           |  8 ++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 8e33f77734..67bedc05bf 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.22",
+  "version": "0.16.23",
   "myplanet": {
     "latest": "v0.21.55",
     "min": "v0.20.55"
diff --git a/src/app/tasks/tasks.component.html b/src/app/tasks/tasks.component.html
index 73ad09a824..16522e4336 100644
--- a/src/app/tasks/tasks.component.html
+++ b/src/app/tasks/tasks.component.html
@@ -15,7 +15,8 @@
   <button mat-list-item *ngFor="let task of filteredTasks; trackBy: trackById" (click)="openTaskDetail(task)" [disabled]="!editable">
     <mat-checkbox [checked]="task.completed" [disabled]="!editable" (change)="toggleTaskComplete(task)" (click)="$event.stopPropagation()"></mat-checkbox>
     <p matLine>{{task.title}}</p>
-    <p matLine><ng-container i18n>Deadline:</ng-container> {{task.deadline | date}} {{task.deadline | date: 'shortTime'}}</p>
+    <p matLine [ngClass]="{'deadline-soon': isTaskDueSoon(task),
+    'deadline-passed': isTaskOverdue(task)}"><ng-container i18n>Deadline:</ng-container> {{task.deadline | date}} {{task.deadline | date: 'shortTime'}}</p>
     <p matLine *ngIf="task.completed"><ng-container i18n>Completed:</ng-container> {{task.completedTime | date}} {{task.completedTime | date: 'shortTime'}}</p>
     <img (click)="openMemberDialog(task.assignee); $event.stopPropagation()" matTooltip="{{task.assignee | assigneeName}}" *ngIf="task.assignee" matListAvatar [src]="
       task.assignee.attachmentDoc ?
diff --git a/src/app/tasks/tasks.component.ts b/src/app/tasks/tasks.component.ts
index 9c7b7f64c7..2e22cd2544 100644
--- a/src/app/tasks/tasks.component.ts
+++ b/src/app/tasks/tasks.component.ts
@@ -72,6 +72,26 @@ export class TasksComponent implements OnInit {
     });
   }
 
+  isTaskDueSoon(task): boolean {
+    if (!task || task.completed || !task.deadline) return false;
+  
+    const now = new Date();
+    const deadline = new Date(task.deadline);
+    const twentyFourHoursFromNow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
+  
+    const isWithinNextDay = deadline <= twentyFourHoursFromNow && deadline > now;
+  
+    return isWithinNextDay;
+  }
+
+  isTaskOverdue(task): boolean {
+    if (task.completed || !task.deadline) return false;
+    
+    const now = new Date();
+    const deadline = new Date(task.deadline);
+    return deadline < now;
+  }
+
   openAddDialog(additionalFields, task: any = {}, onSuccess = (res) => {}) {
     const { fields, formGroup } = this.tasksService.addDialogForm(task);
     this.dialogsFormService.openDialogsForm(task.title ? $localize`Edit Task` : $localize`Add Task`, fields, formGroup, {
diff --git a/src/app/tasks/tasks.scss b/src/app/tasks/tasks.scss
index 65c5ece91c..14e3ba9115 100644
--- a/src/app/tasks/tasks.scss
+++ b/src/app/tasks/tasks.scss
@@ -19,6 +19,14 @@ planet-tasks {
     }
   }
 
+  .deadline-soon{
+    color: #F6BE00
+  }
+
+  .deadline-passed{
+    color: red
+  }
+
   mat-button-toggle-group {
     font-size: 14px;