feat(Due Dates): distinguish past due from future due dates.

KnowledgeCanvas · Feb 17, 2023 · 26d2ef2 · 26d2ef2
1 parent 7d3e190
commit 26d2ef2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/src/kc_angular/src/app/components/source-components/ks-icon.component.ts b/src/kc_angular/src/app/components/source-components/ks-icon.component.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022 Rob Royce
+ * Copyright (c) 2022-2023 Rob Royce
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -37,7 +37,9 @@ import {SettingsService} from "../../services/ipc-services/settings.service";
            [tooltipOptions]="{showDelay: 750, tooltipStyleClass: ks && ks.ingestType === 'file' ? 'ks-file-icon-tooltip' : 'ks-icon-tooltip'}"
            tooltipPosition="bottom"
            alt="Knowledge Source Icon">
-      <div *ngIf="ks && ks.dateDue" class="due-indicator">
+      <div *ngIf="showDuedate && ks && ks.dateDue" class="due-indicator" [class.due-future]="!pastDue"
+           [class.due-past]="pastDue"
+           [pTooltip]="pastDue ? 'Past due by ' + (ks.dateDue | countdown) : 'Due in ' + (ks.dateDue | countdown)">
         <div class="pi pi-calendar"></div>
       </div>
     </div>
@@ -56,8 +58,15 @@ import {SettingsService} from "../../services/ipc-services/settings.service";
         height: 12px;
         bottom: 0;
         left: 24px;
+      }
+
+      .due-past {
         color: var(--red-500);
       }
+
+      .due-future {
+        color: var(--primary-color);
+      }
     `
   ]
 })
@@ -81,11 +90,19 @@ export class KsIconComponent implements OnInit {
 
   @Input() animate: boolean = true;
 
+  @Input() showDuedate: boolean = true;
+
+  pastDue: boolean = false;
+
   constructor(private dnd: DragAndDropService, private command: KsCommandService, private settings: SettingsService) {
   }
 
   ngOnInit(): void {
     this.animate = this.settings.get().display.animations;
+
+    if (this.ks?.dateDue) {
+      this.pastDue = new Date > this.ks.dateDue;
+    }
   }
 
   onDragStart($event: DragEvent, ks?: Partial<KnowledgeSource>) {

diff --git a/src/kc_angular/src/app/pipes/countdown.pipe.ts b/src/kc_angular/src/app/pipes/countdown.pipe.ts
@@ -1,17 +1,17 @@
-/**
- Copyright 2022 Rob Royce
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
+/*
+ * Copyright (c) 2023 Rob Royce
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
  */
 
 import {Pipe, PipeTransform} from '@angular/core';
@@ -26,9 +26,9 @@ export class CountdownPipe implements PipeTransform {
     let now = new Date();
     let diffTime = dateDiffInDays(then, now);
     let countdown;
-    if (diffTime > 365) {
+    if (diffTime > 365 || diffTime <= -365) {
       countdown = `1yr+`;
-    } else if (diffTime >= 90) {
+    } else if (diffTime >= 90 || diffTime <= -90) {
       countdown = '90d+';
     } else {
       countdown = `${Math.abs(diffTime)}d`;