Switch between alarm icons based on reminder presence

Consequently attempt to simplify the observable structure: hasReminder$ should emit based if notificationCountChanged$ | reminderModalUpdated$ emit i.e. if there's a new notification (from polling) or when the reminder modal is closed we want to recheck the reminderCount and subsequently update the icon
opf · Dec 18, 2024 · 90a3e23 · 90a3e23
1 parent 0d6bedd
commit 90a3e23
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 47 deletions.
diff --git a/...es/work-packages/components/wp-buttons/wp-reminder-button/wp-reminder-button.component.ts b/...es/work-packages/components/wp-buttons/wp-reminder-button/wp-reminder-button.component.ts
@@ -26,21 +26,22 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
-import { OpModalService } from 'core-app/shared/components/modal/modal.service';
+import { ActionsService } from 'core-app/core/state/actions/actions.service';
+import { notificationCountChanged } from 'core-app/core/state/in-app-notifications/in-app-notifications.actions';
+import { CollectionResource } from 'core-app/features/hal/resources/collection-resource';
+import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
+import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service';
+import { reminderModalUpdated } from 'core-app/features/work-packages/components/wp-reminder-modal/reminder.actions';
 import {
   WorkPackageReminderModalComponent,
 } from 'core-app/features/work-packages/components/wp-reminder-modal/wp-reminder.modal';
-import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
-import { filter, map, startWith, switchMap } from 'rxjs/operators';
+import { OpModalService } from 'core-app/shared/components/modal/modal.service';
+import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { merge, Observable } from 'rxjs';
-import { ActionsService } from 'core-app/core/state/actions/actions.service';
-import { reminderModalUpdated } from 'core-app/features/work-packages/components/wp-reminder-modal/reminder.actions';
-import { CollectionResource } from 'core-app/features/hal/resources/collection-resource';
-import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service';
+import { filter, map, startWith, switchMap } from 'rxjs/operators';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -51,7 +52,7 @@ import { IanBellService } from 'core-app/features/in-app-notifications/bell/stat
 export class WorkPackageReminderButtonComponent extends UntilDestroyedMixin implements OnInit {
   @Input() public workPackage:WorkPackageResource;
 
-  reminderCount$:Observable<number>;
+  hasReminder$:Observable<boolean>;
 
   public buttonTitle = this.I18n.t('js.work_packages.reminders.button_label');
 
@@ -67,21 +68,27 @@ export class WorkPackageReminderButtonComponent extends UntilDestroyedMixin impl
   }
 
   ngOnInit() {
-    this.reminderCount$ = merge(
-      this
-        .actions$
-        .ofType(reminderModalUpdated)
-        .pipe(
-          map((action) => action.workPackageId),
-          filter((id) => id === this.workPackage.id?.toString()),
-          startWith(null),
-          switchMap(() => this.countReminders()),
-        ),
-      this.storeService.unread$
-        .pipe(
-          startWith(0),
-          switchMap(() => this.countReminders()),
-        ),
+    const reminderModalUpdated$ = this
+      .actions$
+      .ofType(reminderModalUpdated)
+      .pipe(
+        map((action) => action.workPackageId),
+        filter((id) => id === this.workPackage.id?.toString()),
+        startWith(null),
+      );
+    const notificationCountChanged$ = this
+      .actions$
+      .ofType(notificationCountChanged)
+      .pipe(
+        map((action) => action.count),
+      );
+
+    this.hasReminder$ = merge(
+      notificationCountChanged$,
+      reminderModalUpdated$,
+    ).pipe(
+      switchMap(() => this.countReminders()),
+      map((count) => count > 0),
     );
   }
 

diff --git a/...p/features/work-packages/components/wp-buttons/wp-reminder-button/wp-reminder-button.html b/...p/features/work-packages/components/wp-buttons/wp-reminder-button/wp-reminder-button.html
@@ -4,13 +4,10 @@
   [attr.title]="buttonTitle"
   (click)="openModal()"
 >
-  <svg
-    clock-icon
-    class="button--icon"
-    size="small"
-  ></svg>
-  <span *ngIf="(reminderCount$ | async) as reminderCount"
-        class="ml-1 text-small badge -secondary"
-        [textContent]="reminderCount">
-  </span>
+  <ng-container *ngIf="(hasReminder$ | async) as reminder; else noReminder">
+    <svg op-alarm-set-icon class="button--icon" size="small"></svg>
+  </ng-container>
+  <ng-template #noReminder>
+    <svg op-alarm-icon class="button--icon" size="small"></svg>
+  </ng-template>
 </button>
diff --git a/spec/features/work_packages/reminders_spec.rb b/spec/features/work_packages/reminders_spec.rb
@@ -88,7 +88,7 @@
 
       work_package_page.expect_and_dismiss_flash(type: :success,
                                                  message: I18n.t("work_package.reminders.success_creation_message"))
-      work_package_page.expect_reminder_button_with_count(1)
+      work_package_page.expect_reminder_button_alarm_set_icon
 
       expect(Reminder.last)
       .to have_attributes(
@@ -133,7 +133,7 @@
 
       work_package_page.expect_and_dismiss_flash(type: :success,
                                                  message: I18n.t("work_package.reminders.success_deletion_message"))
-      work_package_page.expect_reminder_button_without_count
+      work_package_page.expect_reminder_button_alarm_not_set_icon
       expect(Reminder.upcoming_and_visible_to(user_with_permissions).count).to eq(0)
     end
 
@@ -148,7 +148,7 @@
       )
 
       work_package_page.visit!
-      work_package_page.expect_reminder_button_with_count(1)
+      work_package_page.expect_reminder_button_alarm_set_icon
       work_package_page.click_reminder_button
       wait_for_network_idle
 
@@ -177,7 +177,7 @@
       end
 
       work_package_page.dismiss_flash!
-      work_package_page.expect_reminder_button_without_count
+      work_package_page.expect_reminder_button_alarm_not_set_icon
       work_package_page.click_reminder_button
       wait_for_network_idle
 
@@ -240,7 +240,7 @@
 
         work_package_page.expect_and_dismiss_flash(type: :success,
                                                    message: I18n.t("work_package.reminders.success_creation_message"))
-        work_package_page.expect_reminder_button_with_count(1)
+        work_package_page.expect_reminder_button_alarm_set_icon
       end
 
       it "renders a required error on the date or time field when either isn't set" do
@@ -294,13 +294,13 @@
         )
 
         work_package_page.visit!
-        work_package_page.expect_reminder_button_with_count(1)
+        work_package_page.expect_reminder_button_alarm_set_icon
         center.expect_bell_count(0)
 
         perform_enqueued_jobs
 
         center.expect_bell_count(1)
-        work_package_page.expect_reminder_button_without_count
+        work_package_page.expect_reminder_button_alarm_not_set_icon
       end
     end
 
@@ -314,7 +314,7 @@
       it "renders the reminder button with the correct count" do
         work_package_page.visit!
         work_package_page.expect_reminder_button
-        work_package_page.expect_reminder_button_with_count(1)
+        work_package_page.expect_reminder_button_alarm_set_icon
       end
 
       specify "clicking on the reminder button opens the edit reminder modal" do
@@ -339,7 +339,7 @@
       it "renders the reminder button without a count" do
         work_package_page.visit!
         work_package_page.expect_reminder_button
-        work_package_page.expect_reminder_button_without_count
+        work_package_page.expect_reminder_button_alarm_not_set_icon
       end
 
       specify "clicking on the reminder button opens the create reminder modal" do

diff --git a/spec/support/pages/work_packages/full_work_package.rb b/spec/support/pages/work_packages/full_work_package.rb
@@ -60,15 +60,15 @@ def expect_reminder_button
       expect(page).to have_test_selector("op-wp-reminder-button")
     end
 
-    def expect_reminder_button_with_count(count)
+    def expect_reminder_button_alarm_set_icon
       page.within_test_selector("op-wp-reminder-button") do
-        expect(page).to have_css(".badge", text: count, wait: 10)
+        expect(page).to have_css("svg[op-alarm-set-icon]", wait: 10)
       end
     end
 
-    def expect_reminder_button_without_count
+    def expect_reminder_button_alarm_not_set_icon
       expect(page).to have_test_selector("op-wp-reminder-button")
-      expect(page).to have_no_css(".badge")
+      expect(page).to have_css("svg[op-alarm-icon]", wait: 10)
     end
 
     def expect_no_reminder_button