aril 1.2.36 → 1.2.38

package/theme/layout/app/notifications/notifications-sidebar.component.ts

@@ -1,21 +1,22 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit, effect, signal } from '@angular/core';
+import { Component, OnInit, computed, effect, signal, untracked } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 
-import { BadgeModule } from 'primeng/badge';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { PaginatorModule } from 'primeng/paginator';
-import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { MenuItem } from 'primeng/api';
+import { Menu, MenuModule } from 'primeng/menu';
 import { SidebarModule } from 'primeng/sidebar';
 import { TooltipModule } from 'primeng/tooltip';
 
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { KeycloakService } from 'keycloak-angular';
-import { Subject, switchMap } from 'rxjs';
+import { map, mergeMap, Subject, switchMap } from 'rxjs';
 
 import { ButtonComponent } from 'aril/ui/button';
+import { SwitchComponent } from 'aril/ui/switch';
 import { regularIcons, solidIcons } from 'aril/util/lib';
 import { SafePipe } from 'aril/util/pipes';
 
@@ -29,14 +30,13 @@ import { NotificationsService } from '../../service/notifications.service';
 	selector: 'app-notifications-sidebar',
 	imports: [
 		CommonModule,
+		FormsModule,
 		SidebarModule,
-		ScrollPanelModule,
-		ConfirmDialogModule,
-		PaginatorModule,
+		MenuModule,
 		ButtonComponent,
+		SwitchComponent,
 		TranslocoModule,
 		TooltipModule,
-		BadgeModule,
 		FontAwesomeModule,
 		SafePipe
 	],
@@ -44,8 +44,16 @@ import { NotificationsService } from '../../service/notifications.service';
 	styleUrls: ['./notifications-sidebar.component.scss']
 })
 export class NotificationsSidebarComponent implements OnInit {
+	private readonly pageSize = 10;
+
 	notifications = signal<SmsEmailAuditResponseDTO[]>([]);
-	selectedNotification: SmsEmailAuditResponseDTO | null = null;
+	totalRecords = signal(0);
+	onlyUnread = signal(true);
+	pageNumber = signal(1);
+
+	remainingCount = computed(() => Math.max(this.totalRecords() - this.notifications().length, 0));
+
+	menuItems: MenuItem[] = [];
 
 	ActivityTypesEnum = ActivityTypesEnum;
 	DetailNotificationTypeEnum = DetailNotificationTypeEnum;
@@ -57,11 +65,42 @@ export class NotificationsSidebarComponent implements OnInit {
 
 	private subjects = {
 		markAsRead: new Subject<string>(),
+		markAllAsRead: new Subject<void>(),
 		loadNotifications: new Subject<void>()
 	};
 
 	markAsReadService = toSignal(
-		this.subjects.markAsRead.pipe(switchMap((id) => this.notificationsService.markAsReadNotification(id)))
+		this.subjects.markAsRead.pipe(
+			mergeMap((id) => this.notificationsService.markAsReadNotification(id).pipe(map((result) => ({ result, id }))))
+		)
+	);
+
+	markAllAsReadService = toSignal(
+		this.subjects.markAllAsRead.pipe(
+			switchMap(() =>
+				this.notificationsService.markAllAsReadNotification({
+					toList: [this.getUserMail, ...this.getUserPhones],
+					endDate: new Date().dateToLong('time') || 0
+				})
+			)
+		)
+	);
+
+	loadNotificationsService = toSignal(
+		this.subjects.loadNotifications.pipe(
+			switchMap(() =>
+				this.notificationsService.getNotifications({
+					pager: {
+						pageSize: this.pageSize,
+						pageNumber: this.pageNumber()
+					},
+					startDate: this.oneMonthAgo.dateToLong('time') || 0,
+					endDate: new Date().dateToLong('time') || 0,
+					...(this.onlyUnread() ? { read: false } : {}),
+					toList: [this.getUserMail, ...this.getUserPhones]
+				})
+			)
+		)
 	);
 
 	get getUserPhones(): string[] {
@@ -78,22 +117,13 @@ export class NotificationsSidebarComponent implements OnInit {
 		return this.keycloak.getKeycloakInstance().profile?.email as string;
 	}
 
-	loadNotificationsService = toSignal(
-		this.subjects.loadNotifications.pipe(
-			switchMap(() =>
-				this.notificationsService.getNotifications({
-					pager: {
-						pageSize: 10,
-						pageNumber: 1
-					},
-					startDate: this.oneMonthAgo.dateToLong('time') || 0,
-					endDate: new Date().dateToLong('time') || 0,
-					read: false,
-					toList: [this.getUserMail, ...this.getUserPhones],
-				})
-			)
-		)
-	);
+	get unreadCount(): number {
+		return this.layoutService.getUnreadNotificationCount();
+	}
+
+	get loading(): boolean {
+		return !!this.notificationsService.states.getNotifications?.waitingForResponse;
+	}
 
 	constructor(
 		public layoutService: LayoutService,
@@ -106,10 +136,6 @@ export class NotificationsSidebarComponent implements OnInit {
 	}
 
 	ngOnInit(): void {
-		this.loadNotifications();
-	}
-
-	private loadNotifications(): void {
 		this.subjects.loadNotifications.next();
 	}
 
@@ -118,23 +144,57 @@ export class NotificationsSidebarComponent implements OnInit {
 			() => {
 				const service = this.loadNotificationsService();
 				if (service?.response) {
-					this.notifications.set(service.response.result);
-					// Update unread count in layoutService
-					this.layoutService.setUnreadNotificationCount(service?.response.resultInfo.totalItem || 0);
+					const result = service.response.result || [];
+					const isFirstPage = untracked(this.pageNumber) === 1;
+					this.notifications.update((current) =>
+						isFirstPage ? result : [...current, ...result.filter((item) => !current.some((existing) => existing.id === item.id))]
+					);
+					this.totalRecords.set(service.response.resultInfo.totalItem || 0);
+					if (untracked(this.onlyUnread)) {
+						this.layoutService.setUnreadNotificationCount(service.response.resultInfo.totalItem || 0);
+					}
 				}
 			},
 			{ allowSignalWrites: true }
 		);
-		effect(() => {
-			const service = this.markAsReadService();
-			if (service?.response) {
-				this.loadNotifications();
-
-				if (this.selectedNotification?.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
-					this.router.navigate([`mng/todo-tasks/detail/${this.selectedNotification?.referenceId}`]);
+		effect(
+			() => {
+				const marked = this.markAsReadService();
+				if (marked?.result?.response) {
+					this.applyMarkedAsRead(marked.id);
 				}
-			}
-		});
+			},
+			{ allowSignalWrites: true }
+		);
+		effect(
+			() => {
+				const service = this.markAllAsReadService();
+				if (service?.response) {
+					this.applyAllMarkedAsRead();
+				}
+			},
+			{ allowSignalWrites: true }
+		);
+	}
+
+	private applyMarkedAsRead(id: string): void {
+		if (untracked(this.onlyUnread)) {
+			this.notifications.update((items) => items.filter((item) => item.id !== id));
+			this.totalRecords.update((total) => Math.max(total - 1, 0));
+		} else {
+			this.notifications.update((items) => items.map((item) => (item.id === id ? { ...item, read: true } : item)));
+		}
+		this.layoutService.setUnreadNotificationCount(Math.max(this.layoutService.getUnreadNotificationCount() - 1, 0));
+	}
+
+	private applyAllMarkedAsRead(): void {
+		if (untracked(this.onlyUnread)) {
+			this.notifications.set([]);
+			this.totalRecords.set(0);
+		} else {
+			this.notifications.update((items) => items.map((item) => (item.read ? item : { ...item, read: true })));
+		}
+		this.layoutService.setUnreadNotificationCount(0);
 	}
 
 	get visible(): boolean {
@@ -145,26 +205,92 @@ export class NotificationsSidebarComponent implements OnInit {
 		this.layoutService.state.notificationsSidebarVisible = value;
 	}
 
-	markNotificationAsRead(notification: SmsEmailAuditResponseDTO): void {
-		this.selectedNotification = notification;
-		this.subjects.markAsRead.next(notification.id);
-		this.visible = false;
+	onOnlyUnreadChange(value: boolean): void {
+		this.onlyUnread.set(value);
+		this.pageNumber.set(1);
+		this.notifications.set([]);
+		this.subjects.loadNotifications.next();
+	}
 
-		if (notification?.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
-			this.router.navigate([`mng/todo-tasks/detail/${notification?.referenceId}`]);
-		} else if (notification?.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {
-			this.router.navigate([`mng/bulk-operations/${notification?.referenceId}`]);
-		}
+	onSidebarShow(): void {
+		this.pageNumber.set(1);
+		this.subjects.loadNotifications.next();
+	}
+
+	showMore(): void {
+		this.pageNumber.set(Math.floor(this.notifications().length / this.pageSize) + 1);
+		this.subjects.loadNotifications.next();
+	}
+
+	toggleMenu(event: Event, menu: Menu): void {
+		this.menuItems = [
+			...(this.unreadCount > 0 ?
+				[
+					{
+						label: this.translocoService.translate('notifications.markAllAsRead'),
+						icon: 'pi pi-check-circle',
+						command: () => this.subjects.markAllAsRead.next()
+					}
+				]
+			:	[]),
+			{
+				label: this.translocoService.translate('notifications.allNotificationsPage'),
+				icon: 'pi pi-external-link',
+				command: () => this.navigateToAllNotifications()
+			}
+		];
+		menu.toggle(event);
 	}
 
-	markNotificationAsReadOnDotIcon(notification: SmsEmailAuditResponseDTO): void {
+	markNotificationAsRead(notification: SmsEmailAuditResponseDTO): void {
 		if (!notification.read) {
 			this.subjects.markAsRead.next(notification.id);
 		}
 	}
 
-	trackByNotificationId(index: number, notification: SmsEmailAuditResponseDTO): string {
-		return notification.id;
+	openNotification(notification: SmsEmailAuditResponseDTO): void {
+		const isTodo = notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM;
+		const isBatch = notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB;
+		if (!isTodo && !isBatch) {
+			return;
+		}
+		this.markNotificationAsRead(notification);
+		this.visible = false;
+		const route = isTodo ? `mng/todo-tasks/detail/${notification.referenceId}` : `mng/bulk-operations/${notification.referenceId}`;
+		this.router.navigate([route]);
+	}
+
+	isNavigable(notification: SmsEmailAuditResponseDTO): boolean {
+		return (
+			notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM ||
+			notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB
+		);
+	}
+
+	getNotificationIcon(notification: SmsEmailAuditResponseDTO): IconProp {
+		if (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
+			return solidIcons.faListCheck;
+		}
+		if (notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {
+			return solidIcons.faGear;
+		}
+		if (notification.type === ActivityTypesEnum.SMS) {
+			return regularIcons.faMessage;
+		}
+		return notification.read ? regularIcons.faEnvelopeOpen : regularIcons.faEnvelope;
+	}
+
+	getNotificationIconClass(notification: SmsEmailAuditResponseDTO): string {
+		if (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
+			return 'todo';
+		}
+		if (notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {
+			return 'batch';
+		}
+		if (notification.type === ActivityTypesEnum.SMS) {
+			return 'sms';
+		}
+		return notification.read ? 'email-read' : 'email-unread';
 	}
 
 	getNotificationTitle(notification: SmsEmailAuditResponseDTO): string {

package/theme/layout/service/interfaces/interfaces.d.ts

@@ -88,7 +88,7 @@ export interface SmsEmailAuditRequestDto {
     refMdId?: number;
     referenceId?: string;
     traceId?: string;
-    read: boolean;
+    read?: boolean;
     pager?: Pager;
     username?: string;
     startReadTime?: number;
@@ -116,6 +116,10 @@ export interface SmsEmailAuditResponseDTO {
     traceId: string;
     detailNotificationType: string;
 }
+export interface MarkAllReadNotificationRequestDTO {
+    toList: string[];
+    endDate: number;
+}
 export interface Pager {
     pageSize: number;
     pageNumber: number;

package/theme/layout/service/interfaces/interfaces.ts

@@ -105,7 +105,7 @@ export interface SmsEmailAuditRequestDto {
 	refMdId?: number;
 	referenceId?: string;
 	traceId?: string;
-	read: boolean;
+	read?: boolean;
 	pager?: Pager;
 	username?: string;
 	startReadTime?: number;
@@ -135,6 +135,11 @@ export interface SmsEmailAuditResponseDTO {
 	detailNotificationType: string;
 }
 
+export interface MarkAllReadNotificationRequestDTO {
+	toList: string[];
+	endDate: number;
+}
+
 export interface Pager {
 	pageSize: number;
 	pageNumber: number;

package/theme/layout/service/notifications.service.d.ts

@@ -7,6 +7,7 @@ export declare class NotificationsService extends RestClient {
     constructor();
     getNotifications(post: Interfaces.SmsEmailAuditRequestDto): Observable<ServiceResponse<Interfaces.Response<Interfaces.SmsEmailAuditResponseDTO>>>;
     markAsReadNotification(pluginId: string): Observable<ServiceResponse<boolean>>;
+    markAllAsReadNotification(post: Interfaces.MarkAllReadNotificationRequestDTO): Observable<ServiceResponse<boolean>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NotificationsService>;
 }

package/theme/layout/service/notifications.service.ts

@@ -23,4 +23,9 @@ export class NotificationsService extends RestClient {
 	markAsReadNotification(pluginId: string) {
 		return new Observable<ServiceResponse<boolean>>();
 	}
+
+	@ServiceCall(HTTPMethods.PUTBYPARAMS, ProxyTypes.ClientSide, 'audits/read-all', { success: 'notifications.markedAllAsRead' })
+	markAllAsReadNotification(post: Interfaces.MarkAllReadNotificationRequestDTO) {
+		return new Observable<ServiceResponse<boolean>>();
+	}
 }