[Feat]: Notification Setting Page

src/app/core/entity/entity-type-select/entity-type-select.component.ts

@@ -1,10 +1,24 @@
-import { Component, OnInit, Input } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  forwardRef,
+} from "@angular/core";
 import { BasicAutocompleteComponent } from "../../common-components/basic-autocomplete/basic-autocomplete.component";
-import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import {
+  NG_VALUE_ACCESSOR,
+  FormControl,
+  ReactiveFormsModule,
+} from "@angular/forms";
 import { EntityConstructor } from "../model/entity";
 import { EntityRegistry } from "../database-entity.decorator";
 import { MatFormField, MatLabel } from "@angular/material/form-field";
 
+/**
+ * Component for selecting an entity type from a dropdown.
+ */
 @Component({
   selector: "app-entity-type-select",
   templateUrl: "./entity-type-select.component.html",
@@ -14,22 +28,51 @@ import { MatFormField, MatLabel } from "@angular/material/form-field";
     MatFormField,
     MatLabel,
   ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => EntityTypeSelectComponent),
+      multi: true,
+    },
+  ],
   standalone: true,
 })
+
+// TODO: Need to use the CustomFormControlDirective abstract class instead of ControlValueAccessor.
 export class EntityTypeSelectComponent implements OnInit {
   @Input() formControl: FormControl;
   @Input() allowMultiSelect = false;
   @Input() label: string;
+  @Output() selectedEntity = new EventEmitter();
 
   entityTypes: EntityConstructor[];
   optionToLabel = (option: EntityConstructor) => option.label;
   optionToId = (option: EntityConstructor) => option.ENTITY_TYPE;
+  value: any;
+  onChange = (_: string) => {};
+  onTouched = () => {};
 
   constructor(private entityRegistry: EntityRegistry) {}
 
   ngOnInit() {
     this.entityTypes = this.entityRegistry
       .getEntityTypes(true)
       .map(({ value }) => value);
+
+    this.formControl.valueChanges.subscribe((value) => {
+      this.selectedEntity.emit(value);
+    });
+  }
+
+  writeValue(value: string) {
+    this.value = value;
+  }
+
+  registerOnChange(fn: () => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
   }
 }

src/app/core/user/user-account/user-account.component.html

@@ -1,5 +1,5 @@
 <mat-tab-group appTabStateMemo>
-  <mat-tab i18n-label="User-Account label" label="User Account">
+  <mat-tab i18n-label="User Profile - tab title" label="User Account">
     <div
       class="min-width-1-3 margin-top-large flex-column gap-regular"
       [matTooltip]="tooltipText"
@@ -43,4 +43,8 @@ <h2 i18n>Your profile:</h2>
       <div i18n>Your user account is not linked to any record.</div>
     }
   </mat-tab>
+
+  <mat-tab i18n-label="User Profile - tab title" label="Notification Settings">
+    <app-notification-settings></app-notification-settings>
+  </mat-tab>
 </mat-tab-group>

src/app/core/user/user-account/user-account.component.ts

@@ -25,9 +25,10 @@ import { MatTooltipModule } from "@angular/material/tooltip";
 import { MatInputModule } from "@angular/material/input";
 import { AccountPageComponent } from "../../session/auth/keycloak/account-page/account-page.component";
 import { CurrentUserSubject } from "../../session/current-user-subject";
-import { AsyncPipe, NgIf } from "@angular/common";
+import { AsyncPipe } from "@angular/common";
 import { EntityBlockComponent } from "../../basic-datatypes/entity/entity-block/entity-block.component";
 import { SessionSubject } from "../../session/auth/session-info";
+import { NotificationSettingsComponent } from "../../../features/notification/notification-settings/notification-settings.component";
 
 /**
  * User account form to allow the user to view and edit information.
@@ -45,7 +46,7 @@ import { SessionSubject } from "../../session/auth/session-info";
     AccountPageComponent,
     AsyncPipe,
     EntityBlockComponent,
-    NgIf,
+    NotificationSettingsComponent,
   ],
   standalone: true,
 })

src/app/features/notification/notification-item/notification-item.component.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-
 import { NotificationItemComponent } from "./notification-item.component";
 import { NotificationEvent } from "../model/notification-event";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";

src/app/features/notification/notification-method-select/notification-method-select.component.html

@@ -0,0 +1,17 @@
+<mat-form-field>
+  <mat-label>{{ label }}</mat-label>
+  <mat-select
+    (selectionChange)="onSelectionChange($event)"
+    placeholder="Choose notification channels"
+    i18n-placeholder="Notification Method Select placeholder"
+    [disabled]="disabled"
+    multiple
+    [value]="selectedNotificationMethod"
+  >
+    @for (notificationMethod of notificationMethods; track notificationMethod) {
+      <mat-option [value]="notificationMethod.key">
+        {{ notificationMethod.label }}
+      </mat-option>
+    }
+  </mat-select>
+</mat-form-field>

src/app/features/notification/notification-method-select/notification-method-select.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { NotificationMethodSelectComponent } from "./notification-method-select.component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+
+describe("NotificationCenterSelectComponent", () => {
+  let component: NotificationMethodSelectComponent;
+  let fixture: ComponentFixture<NotificationMethodSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NotificationMethodSelectComponent, BrowserAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NotificationMethodSelectComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/notification/notification-method-select/notification-method-select.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { MatSelectChange, MatSelectModule } from "@angular/material/select";
+import { NotificationChannel } from "../model/notification-config";
+
+@Component({
+  standalone: true,
+  imports: [MatSelectModule, FormsModule, CommonModule],
+  selector: "app-notification-method-select",
+  templateUrl: "./notification-method-select.component.html",
+})
+export class NotificationMethodSelectComponent {
+  notificationMethods: { key: NotificationChannel; label: string }[] = [
+    { key: "push", label: $localize`:notification method option:Push` },
+  ];
+
+  @Input() label: string =
+    $localize`:notification method select label:Notification method`;
+  @Input() selectedNotificationMethod: string[] = [];
+  @Input() disabled: boolean = false;
+  @Output() selectionChange = new EventEmitter<NotificationChannel[]>();
+
+  onSelectionChange(event: MatSelectChange) {
+    this.selectionChange.emit(event.value);
+  }
+}

src/app/features/notification/notification-settings/notification-settings.component.html

@@ -0,0 +1,197 @@
+<div class="notifications-container">
+  <h1 class="notification-setting-title" i18n>Notifications Settings</h1>
+  <div i18n>
+    Notifications can remind you of events in the system that are important to
+    you. For example, you can set up custom notifications to see when certain
+    records are added or changed (e.g. when a new participant has registered
+    through a public form; or when a colleague assigned a task to you). These
+    notifications are visible in the toolbar and can be sent to you via email or
+    push notifications.
+  </div>
+
+  <div class="notification-types-container">
+    <h3 class="no-margin" i18n>
+      <strong>What notifications you receive</strong>
+    </h3>
+    <div i18n>
+      Define rules for events that you want to get notifications for. You can
+      add as many rules as you want. Disable a rule temporarily to pause these
+      notifications without deleting the conditions completely.
+    </div>
+
+    @for (
+      notificationRule of notificationRules.controls;
+      track notificationRule;
+      let index = $index
+    ) {
+      <div
+        class="flex-column justify-space-between align-center notifications-options-container"
+      >
+        <div
+          class="flex-column justify-space-between align-center notification-options-wrapper"
+        >
+          <div
+            class="flex-row justify-content-center align-center notification-rule-option"
+          >
+            <app-entity-type-select
+              [allowMultiSelect]="false"
+              label="Select an entity type"
+              [formControl]="getFormField(index, 'entityType')"
+            ></app-entity-type-select>
+            <app-help-button
+              text="A notification type is based on the selected entity. For instance, choosing 'task' will enable notifications for newly created tasks in the system."
+              i18n-text
+            ></app-help-button>
+          </div>
+
+          <div class="flex-row align-center full-width">
+            <mat-form-field class="notification-rule-option">
+              <mat-label i18n>Notification condition</mat-label>
+              <input
+                matInput
+                placeholder="TO BE IMPLEMENTED LATER"
+                disabled="true"
+                i18n-placeholder="Notification condition placeholder"
+              />
+            </mat-form-field>
+            <app-help-button
+              text="You can choose a notification based on the selected entity. For example, if you select 'task', you can create a notification for when a task is assigned to a user."
+              i18n-text
+            ></app-help-button>
+          </div>
+
+          <div
+            class="flex-row justify-content-center align-center notification-rule-option"
+          >
+            <app-notification-method-select></app-notification-method-select>
+            <app-help-button
+              text="Define a notification method to receive notifications"
+              i18n-text
+            ></app-help-button>
+          </div>
+        </div>
+
+        <div class="flex-row notification-rule-actions">
+          <div class="flex-row align-center">
+            <mat-slide-toggle
+              [formControl]="getFormField(index, 'enabled')"
+              class="notification-toggle"
+              matTooltip="You can enable or disable notifications. If you do not want to delete this notification rule, you can disable it to 'pause' these notifications."
+              i18n-matTooltip
+            ></mat-slide-toggle>
+          </div>
+
+          <button
+            mat-icon-button
+            (click)="confirmRemoveNotificationRule(index)"
+            matTooltip="Remove notification rule"
+            i18n-matTooltip
+          >
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+
+          <button
+            mat-icon-button
+            (click)="testNotification()"
+            matTooltip="Test notification"
+            i18n-matTooltip
+          >
+            <fa-icon icon="paper-plane"></fa-icon>
+          </button>
+        </div>
+      </div>
+    }
+    <div class="add-new-notification-rule">
+      <button
+        mat-stroked-button
+        class="add-new-rule-button"
+        color="accent"
+        (click)="addNewNotificationRule()"
+        matTooltip="Define another type of notifications for your user account"
+        i18n-matTooltip
+      >
+        <fa-icon aria-label="add element" icon="plus-circle"></fa-icon>
+        <span i18n class="new-notification-rule"
+          >Add new notification rule</span
+        >
+      </button>
+    </div>
+  </div>
+
+  <div class="browser-notifications-container">
+    <div class="browser-notifications-title">
+      <h3 i18n class="no-margin flex-row align-center">
+        <strong>Where you receive notifications</strong>
+        @if (hasPushNotificationEnabled) {
+          <div
+            class="enabled-text"
+            matTooltip="Push notifications are enabled. You’ll receive real-time updates for important activities."
+            i18n-matTooltip
+          >
+            Enabled
+          </div>
+        } @else {
+          <div
+            class="disabled-text"
+            matTooltip="Push notifications are disabled. Turn them on in settings to stay informed about updates."
+            i18n-matTooltip
+          >
+            Disabled
+          </div>
+        }
+      </h3>
+      <div i18n>
+        Notifications are always visible through the bell icon in the toolbar at
+        the top of the application. You can enable other ways to get
+        notifications sent to you below.
+      </div>
+    </div>
+    <div class="receive-notifications-container">
+      <div>
+        <div class="flex-row">
+          <fa-icon icon="window-maximize"></fa-icon>
+          <p class="notification-toggle" i18n>Browser</p>
+        </div>
+        <div
+          class="flex-row align-center justify-space-between browser-notification-list"
+        >
+          <div class="flex-row align-center">
+            <span i18n>Notification Center (in app)</span>
+            <app-help-button
+              text="View notifications in the app's interface. Click the icon in the top toolbar to see all notifications, including those you already read. The notification center is always available and cannot be disabled."
+              i18n-text
+            ></app-help-button>
+          </div>
+        </div>
+        <div
+          class="flex-row align-center justify-space-between browser-notification-list"
+        >
+          <div class="flex-row align-center">
+            <span i18n>Push notifications</span>
+            <app-help-button
+              text="A notification on your system (e.g. a normal Android smartphone notification). You see these alerts without needing to open the app."
+              i18n-text
+            ></app-help-button>
+          </div>
+          <mat-slide-toggle (change)="onEnableNotification()" />
+        </div>
+      </div>
+
+      <div>
+        <div class="flex-row">
+          <fa-icon icon="envelope"></fa-icon>
+          <p class="notification-toggle" i18n>Email</p>
+        </div>
+        <div
+          class="flex-row align-center justify-space-between browser-notification-list"
+        >
+          <div class="flex-row align-center">
+            <span i18n>Email</span>
+            <span class="coming-soon-label" i18n>Coming Soon</span>
+          </div>
+          <mat-slide-toggle disabled></mat-slide-toggle>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>