teams: smoother tasks deadlines (fixes #5377) (#7842)

Co-authored-by: dogi <dogi@users.noreply.github.com>

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"

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 ?

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, {

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;