From 4013d0149bc7f945efb765e7da12654c39847c80 Mon Sep 17 00:00:00 2001
From: Dirk Peter <67102395+dirk-peter-sag@users.noreply.github.com>
Date: Fri, 30 Aug 2024 17:37:02 +0200
Subject: [PATCH] #5: adds highlighting to reminders (#42)

Co-authored-by: Dirk Peter <dirk.peter@softwareg.com>
---
 .../reminder-drawer.component.html            |  5 +++-
 .../reminder-drawer.component.less            | 18 +++++++++++
 .../reminder-drawer.component.ts              | 30 +++++++++++++++++--
 src/app/reminder-plugin/reminder.model.ts     |  1 +
 4 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
index ab3a897..52980d5 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.html
@@ -114,7 +114,10 @@ <h2 translate>Reminder</h2>
 
 <!-- single reminder item template -->
 <ng-template #reminderItem let-reminder="reminder">
-  <li class="reminder-item" [class.text-muted]="reminder.status !== reminderStatus.active">
+  <li class="reminder-item" [ngClass]="{
+    'text-muted': reminder.status !== reminderStatus.active,
+    'changed': reminder.changed
+  }">
     <header>
       <i
         class="status-icon"
diff --git a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less
index dda6358..37546f7 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.less
@@ -129,6 +129,24 @@ aside {
   overflow: hidden;
   box-shadow: inset 0 -1px 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color));
 
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transition: all .3s ease-in-out;
+    box-shadow: inset 0 0 10px var(--c8y-brand-primary);
+  }
+
+  &.changed::after {
+    opacity: 1;
+  }
+
   .btn-hollow {
     background-color: transparent !important;
     color: @color-gray-4;
diff --git a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
index a0445a6..077ae11 100644
--- a/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
+++ b/src/app/reminder-plugin/components/reminder-drawer/reminder-drawer.component.ts
@@ -10,8 +10,9 @@ import {
   ReminderStatus,
   ReminderType,
   REMINDER_DRAWER_OPEN_CLASS,
+  REMINDER_HIGHLIGHT_DURATION_SECONDS,
   REMINDER_LOCAL_STORAGE_DEFAULT_CONFIG,
-  REMINDER_MAIN_HEADER_CLASS
+  REMINDER_MAIN_HEADER_CLASS,
 } from '../../reminder.model';
 import { ReminderService } from '../../services/reminder.service';
 import { ReminderModalComponent } from '../reminder-modal/reminder-modal.component';
@@ -52,6 +53,7 @@ export class ReminderDrawerComponent implements OnDestroy {
   private rightDrawerOpen = false;
   private updateTimer?: NodeJS.Timeout;
   private _open = false;
+  private _previousState: Reminder['id'][][] = [];
 
   constructor(
     private alertService: AlertService,
@@ -118,6 +120,8 @@ export class ReminderDrawerComponent implements OnDestroy {
     this.reminders = reminders;
     this.lastUpdate = new Date();
     this.reminderGroups = this.reminderService.groupReminders(reminders);
+
+    if (reminders.length) this.highlightChanges();
   }
 
   private getReminderTypes(): void {
@@ -128,7 +132,7 @@ export class ReminderDrawerComponent implements OnDestroy {
   }
 
   private handleConfigChange(config: ReminderConfig): void {
-    if (this.reminderTypeFilter !== config.filter.reminderType) {
+    if (this.reminderTypeFilter !== config.filter?.reminderType) {
       this.reminderTypeFilter = config.filter.reminderType;
       this.filterByType();
     }
@@ -137,6 +141,28 @@ export class ReminderDrawerComponent implements OnDestroy {
     this.browserNotificationsEnabled = config.browser;
   }
 
+  private highlightChanges(): void {
+    if (!this._previousState.length) return;
+
+    // check if a reminder is new in a group
+    this.reminderGroups.forEach((group, index) => {
+      group.reminders.forEach((reminder) => {
+        if (!this._previousState[index].includes(reminder.id)) {
+          reminder.changed = true;
+          setTimeout(
+            () => delete reminder.changed,
+            REMINDER_HIGHLIGHT_DURATION_SECONDS * 1000
+          );
+        }
+      });
+    });
+
+    // store current state for future comparison
+    this._previousState = this.reminderGroups.map((group) => {
+      return group.reminders.map((reminder) => reminder.id);
+    });
+  }
+
   private initSubscriptions(): void {
     // check if the actual drawer was opened
     this.subscriptions.add(
diff --git a/src/app/reminder-plugin/reminder.model.ts b/src/app/reminder-plugin/reminder.model.ts
index 8764e66..4ec50b1 100644
--- a/src/app/reminder-plugin/reminder.model.ts
+++ b/src/app/reminder-plugin/reminder.model.ts
@@ -7,6 +7,7 @@ export const REMINDER_DRAWER_OPEN_CLASS = 'drawerOpen';
 export const REMINDER_MAIN_HEADER_CLASS = 'app-main-header';
 export const REMINDER_MAX_COUNTER = 10;
 export const REMINDER_TEXT_LENGTH = 100;
+export const REMINDER_HIGHLIGHT_DURATION_SECONDS = 5;
 export const REMINDER_TENENAT_OPTION_CATEGORY: ITenantOption['category'] = 'c8y.reminder';
 export const REMINDER_TENENAT_OPTION_TYPE_KEY: ITenantOption['key'] = 'types';
 export const REMINDER_LOCAL_STORAGE_FILTER = 'c8y_rpFilter';