aril 1.0.39 → 1.0.41

package/theme/layout/app/favorite-pages/favorite-pages-sidebar.component.ts

@@ -0,0 +1,253 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, effect, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import { PaginatorModule } from 'primeng/paginator';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { SidebarModule } from 'primeng/sidebar';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { Subject, switchMap } from 'rxjs';
+
+import { ButtonComponent } from 'aril/ui/button';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { FavoritePageResponseDTO, FavoritePagesService } from './favorite-pages.service';
+import { AddEditFavoriteModalComponent } from './modals/add-edit-favorite-modal/add-edit-favorite-modal.component';
+
+@Component({
+	standalone: true,
+	selector: 'app-favorite-pages-sidebar',
+	imports: [
+		CommonModule,
+		SidebarModule,
+		ScrollPanelModule,
+		ConfirmDialogModule,
+		PaginatorModule,
+		DynamicDialogModule,
+		ButtonComponent,
+		TranslocoModule,
+		TooltipModule
+	],
+	templateUrl: './favorite-pages-sidebar.component.html',
+	styleUrls: ['./favorite-pages-sidebar.component.scss'],
+	providers: [ConfirmationService, DialogService]
+})
+export class FavoritePagesSidebarComponent implements OnInit {
+	favoritePages = signal<FavoritePageResponseDTO[]>([]);
+	allFavoritePages = signal<FavoritePageResponseDTO[]>([]);
+	isCurrentPageFavorited = signal<boolean>(false);
+
+	currentPage = signal<number>(1);
+	pageSize = signal<number>(10);
+	totalItems = signal<number>(0);
+	totalPages = signal<number>(0);
+
+	private subjects = {
+		loadAllFavorites: new Subject<void>(),
+		deleteFavorite: new Subject<number>()
+	};
+
+	loadAllFavoritesService = toSignal(
+		this.subjects.loadAllFavorites.pipe(
+			switchMap(() =>
+				this.favoritePagesService.filterFavoritePages({
+					pageSize: 1000,
+					pageNumber: 1,
+					sortFieldName: 'label',
+					sortDirection: 1
+				})
+			)
+		)
+	);
+
+	deleteFavoriteService = toSignal(
+		this.subjects.deleteFavorite.pipe(switchMap((id) => this.favoritePagesService.deleteFavoritePage(id)))
+	);
+
+	constructor(
+		public layoutService: LayoutService,
+		private favoritePagesService: FavoritePagesService,
+		private confirmationService: ConfirmationService,
+		private messageService: MessageService,
+		private dialogService: DialogService,
+		private translocoService: TranslocoService
+	) {
+		this.initializeEffects();
+	}
+
+	ngOnInit(): void {
+		this.loadFavoritePages();
+		this.checkCurrentPageStatus();
+	}
+
+	private initializeEffects(): void {
+		effect(
+			() => {
+				const service = this.loadAllFavoritesService();
+				if (service?.response) {
+					this.allFavoritePages.set(service.response.result);
+					this.totalItems.set(service.response.result.length);
+					this.updateClientSidePagination();
+					this.checkCurrentPageStatus();
+				}
+			},
+			{ allowSignalWrites: true }
+		);
+
+		effect(
+			() => {
+				const service = this.deleteFavoriteService();
+				if (service?.response) {
+					this.loadFavoritePages();
+					this.messageService.add({
+						severity: 'success',
+						summary: this.translocoService.translate('favoritePages.success'),
+						detail: this.translocoService.translate('favoritePages.deletedSuccessfully'),
+						key: 'toast-root'
+					});
+				}
+			},
+			{ allowSignalWrites: true }
+		);
+	}
+
+	get visible(): boolean {
+		return this.layoutService.state.favoritePagesSidebarVisible;
+	}
+
+	set visible(value: boolean) {
+		this.layoutService.state.favoritePagesSidebarVisible = value;
+		if (value) {
+			this.checkCurrentPageStatus();
+		}
+	}
+
+	private loadFavoritePages(): void {
+		this.subjects.loadAllFavorites.next();
+	}
+
+	private updateClientSidePagination(): void {
+		const allFavorites = this.allFavoritePages();
+		const totalItems = allFavorites.length;
+		const pageSize = this.pageSize();
+		const currentPage = this.currentPage();
+
+		const totalPages = Math.ceil(totalItems / pageSize);
+		this.totalPages.set(totalPages);
+
+		const startIndex = (currentPage - 1) * pageSize;
+		const endIndex = Math.min(startIndex + pageSize, totalItems);
+
+		const currentPageData = allFavorites.slice(startIndex, endIndex);
+		this.favoritePages.set(currentPageData);
+	}
+
+	private checkCurrentPageStatus(): void {
+		const currentPath = this.favoritePagesService.getCurrentRoutePath();
+		const allFavorites = this.allFavoritePages();
+		const isFound = allFavorites.some((fav) => fav.url === currentPath);
+
+		this.isCurrentPageFavorited.set(isFound);
+	}
+
+	addCurrentPageToFavorites(): void {
+		const currentPath = this.favoritePagesService.getCurrentRoutePath();
+
+		const ref = this.dialogService.open(AddEditFavoriteModalComponent, {
+			header: this.translocoService.translate('favoritePages.addToFavorites'),
+			width: '500px',
+			modal: true,
+			closable: true,
+			data: {
+				mode: 'add',
+				url: currentPath
+			}
+		});
+
+		ref.onClose.subscribe((result) => {
+			if (result?.status === 'success') {
+				this.loadFavoritePages();
+			}
+		});
+	}
+
+	removeCurrentPageFromFavorites(): void {
+		const currentPath = this.favoritePagesService.getCurrentRoutePath();
+		const favorites = this.favoritePages();
+		const currentFavorite = favorites.find((fav) => fav.url === currentPath);
+
+		if (currentFavorite) {
+			this.confirmationService.confirm({
+				message: this.translocoService.translate('favoritePages.confirmDelete'),
+				header: this.translocoService.translate('favoritePages.deleteConfirmTitle'),
+				icon: 'pi pi-info-circle',
+				acceptLabel: this.translocoService.translate('acceptButtonLabel'),
+				rejectLabel: this.translocoService.translate('rejectButtonLabel'),
+				acceptButtonStyleClass: 'p-button-success',
+				rejectButtonStyleClass: 'p-button-danger p-button-outlined',
+				accept: () => {
+					this.subjects.deleteFavorite.next(currentFavorite.id);
+				}
+			});
+		}
+	}
+
+	editFavorite(favorite: FavoritePageResponseDTO, event: Event): void {
+		event.stopPropagation();
+
+		const ref = this.dialogService.open(AddEditFavoriteModalComponent, {
+			header: this.translocoService.translate('favoritePages.editFavorite'),
+			width: '500px',
+			modal: true,
+			closable: true,
+			data: {
+				mode: 'edit',
+				favorite: favorite
+			}
+		});
+
+		ref.onClose.subscribe((result) => {
+			if (result?.status === 'success') {
+				this.loadFavoritePages();
+			}
+		});
+	}
+
+	deleteFavorite(favorite: FavoritePageResponseDTO, event: Event): void {
+		event.stopPropagation();
+
+		this.confirmationService.confirm({
+			target: event.target as EventTarget,
+			message: this.translocoService.translate('favoritePages.confirmDelete', { label: favorite.label }),
+			header: this.translocoService.translate('favoritePages.deleteConfirmTitle'),
+			icon: 'pi pi-info-circle',
+			acceptLabel: this.translocoService.translate('acceptButtonLabel'),
+			rejectLabel: this.translocoService.translate('rejectButtonLabel'),
+			acceptButtonStyleClass: 'p-button-success',
+			rejectButtonStyleClass: 'p-button-danger p-button-outlined',
+			accept: () => {
+				this.subjects.deleteFavorite.next(favorite.id);
+			}
+		});
+	}
+
+	navigateToFavorite(favorite: FavoritePageResponseDTO): void {
+		this.favoritePagesService.navigateToFavoritePage(favorite);
+		this.visible = false;
+	}
+
+	trackByFavoriteId(index: number, favorite: FavoritePageResponseDTO): number {
+		return favorite.id;
+	}
+
+	onPageChange(event: any): void {
+		this.currentPage.set(event.page + 1);
+		this.pageSize.set(event.rows);
+		this.updateClientSidePagination(); // Update pagination client-side, no API call
+	}
+}

package/theme/layout/app/favorite-pages/favorite-pages.service.d.ts

@@ -0,0 +1,54 @@
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { RestClient, ServiceCallStateMap, ServiceResponse } from 'aril/http';
+import * as i0 from "@angular/core";
+export interface FavoritePageResponseDTO {
+    id: number;
+    creator: string;
+    created: number;
+    updater: string;
+    updated: number;
+    version: number;
+    username: string;
+    url: string;
+    label: string;
+}
+export interface FavoritePageSaveRequestDTO {
+    url: string;
+    label: string;
+}
+export interface FavoritePageUpdateRequestDTO {
+    label: string;
+    version: number;
+}
+export interface FavoritePageFilterRequestDTO {
+    pageSize?: number;
+    pageNumber?: number;
+    sortFieldName?: string;
+    sortDirection?: number;
+}
+export interface SearchResultDTO<T> {
+    resultInfo: {
+        totalPage: number;
+        totalItem: number;
+    };
+    result: T[];
+    searchAfterValues: any[];
+}
+export declare const favoritePageEndpoints: {
+    filter: string;
+    favorite: string;
+};
+export declare class FavoritePagesService extends RestClient {
+    private router;
+    states: ServiceCallStateMap<FavoritePagesService>;
+    constructor(router: Router);
+    getCurrentRoutePath(): string;
+    navigateToFavoritePage(favorite: FavoritePageResponseDTO): void;
+    filterFavoritePages(post: FavoritePageFilterRequestDTO): Observable<ServiceResponse<SearchResultDTO<FavoritePageResponseDTO>>>;
+    saveFavoritePage(post: FavoritePageSaveRequestDTO): Observable<ServiceResponse<FavoritePageResponseDTO>>;
+    updateFavoritePage(id: number, post: FavoritePageUpdateRequestDTO): Observable<ServiceResponse<FavoritePageResponseDTO>>;
+    deleteFavoritePage(id: number): Observable<ServiceResponse<boolean>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FavoritePagesService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FavoritePagesService>;
+}

package/theme/layout/app/favorite-pages/favorite-pages.service.ts

@@ -0,0 +1,87 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Observable } from 'rxjs';
+
+import { HTTPMethods, ProxyTypes, RestClient, ServiceCall, ServiceCallStateMap, ServiceResponse } from 'aril/http';
+
+export interface FavoritePageResponseDTO {
+	id: number;
+	creator: string;
+	created: number;
+	updater: string;
+	updated: number;
+	version: number;
+	username: string;
+	url: string;
+	label: string;
+}
+
+export interface FavoritePageSaveRequestDTO {
+	url: string;
+	label: string;
+}
+
+export interface FavoritePageUpdateRequestDTO {
+	label: string;
+	version: number;
+}
+
+export interface FavoritePageFilterRequestDTO {
+	pageSize?: number;
+	pageNumber?: number;
+	sortFieldName?: string;
+	sortDirection?: number; // 1=ASC, 2=DESC
+}
+
+export interface SearchResultDTO<T> {
+	resultInfo: {
+		totalPage: number;
+		totalItem: number;
+	};
+	result: T[];
+	searchAfterValues: any[];
+}
+
+// API Endpoints
+export const favoritePageEndpoints = {
+	filter: 'favorite-pages/filter',
+	favorite: 'favorite-pages'
+};
+
+@Injectable({ providedIn: 'root' })
+export class FavoritePagesService extends RestClient {
+	override states: ServiceCallStateMap<FavoritePagesService> = {};
+
+	constructor(private router: Router) {
+		super();
+	}
+
+	getCurrentRoutePath(): string {
+		return this.router.url;
+	}
+
+	navigateToFavoritePage(favorite: FavoritePageResponseDTO): void {
+		this.router.navigate([favorite.url]);
+	}
+
+	@ServiceCall(HTTPMethods.POST, ProxyTypes.ClientSide, favoritePageEndpoints.filter)
+	filterFavoritePages(post: FavoritePageFilterRequestDTO) {
+		return new Observable<ServiceResponse<SearchResultDTO<FavoritePageResponseDTO>>>();
+	}
+
+	@ServiceCall(HTTPMethods.POST, ProxyTypes.ClientSide, favoritePageEndpoints.favorite)
+	saveFavoritePage(post: FavoritePageSaveRequestDTO) {
+		return new Observable<ServiceResponse<FavoritePageResponseDTO>>();
+	}
+
+	@ServiceCall(HTTPMethods.PUT, ProxyTypes.ClientSide, favoritePageEndpoints.favorite)
+	updateFavoritePage(id: number, post: FavoritePageUpdateRequestDTO) {
+		return new Observable<ServiceResponse<FavoritePageResponseDTO>>();
+	}
+
+	@ServiceCall(HTTPMethods.DELETE, ProxyTypes.ClientSide, favoritePageEndpoints.favorite)
+	deleteFavoritePage(id: number) {
+		return new Observable<ServiceResponse<boolean>>();
+	}
+}

package/theme/layout/app/favorite-pages/modals/add-edit-favorite-modal/add-edit-favorite-modal.component.d.ts

@@ -0,0 +1,36 @@
+import { OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { TranslocoService } from '@ngneat/transloco';
+import { FavoritePageResponseDTO, FavoritePagesService } from '../../favorite-pages.service';
+import * as i0 from "@angular/core";
+interface ModalData {
+    mode: 'add' | 'edit';
+    url?: string;
+    favorite?: FavoritePageResponseDTO;
+}
+export declare class AddEditFavoriteModalComponent implements OnInit {
+    private readonly formBuilder;
+    private readonly dialogRef;
+    private readonly dialogConfig;
+    private readonly favoritePagesService;
+    private readonly messageService;
+    private readonly translocoService;
+    favoriteForm: FormGroup;
+    modalData: ModalData;
+    private subjects;
+    saveFavoriteService: import("@angular/core").Signal<import("../../../../../../../../dist/http").ServiceResponse<FavoritePageResponseDTO> | undefined>;
+    updateFavoriteService: import("@angular/core").Signal<import("../../../../../../../../dist/http").ServiceResponse<FavoritePageResponseDTO> | undefined>;
+    constructor(formBuilder: FormBuilder, dialogRef: DynamicDialogRef, dialogConfig: DynamicDialogConfig, favoritePagesService: FavoritePagesService, messageService: MessageService, translocoService: TranslocoService);
+    ngOnInit(): void;
+    private initializeEffects;
+    private initializeForm;
+    get isAddMode(): boolean;
+    get isEditMode(): boolean;
+    submit(): void;
+    cancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AddEditFavoriteModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AddEditFavoriteModalComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}
+export {};

package/theme/layout/app/favorite-pages/modals/add-edit-favorite-modal/add-edit-favorite-modal.component.html

@@ -0,0 +1,27 @@
+<div *transloco="let t; read: 'favoritePages'">
+	<aril-form [formGroup]="favoriteForm">
+		<aril-field [label]="t('label')" [cols]="{ xl: 12, lg: 12, md: 12, sm: 12 }" [markAsRequired]="true">
+			<aril-text formControlName="label" [placeholder]="t('labelPlaceholder')"> </aril-text>
+		</aril-field>
+
+		<aril-field [label]="t('path')" [cols]="{ xl: 12, lg: 12, md: 12, sm: 12 }">
+			<aril-text formControlName="url"> </aril-text>
+		</aril-field>
+
+		<div class="col-12 flex justify-content-end mt-4 gap-2">
+			<aril-button
+				color="danger"
+				[label]="t('cancel')"
+				[outlined]="true"
+				icon="TIMES"
+				(clickEvent)="cancel()">
+			</aril-button>
+			<aril-form-submit
+				[label]="t('save')"
+				color="success"
+				icon="CHECK"
+				[formGroup]="favoriteForm"
+				(validEvent)="submit()" />
+		</div>
+	</aril-form>
+</div>

package/theme/layout/app/favorite-pages/modals/add-edit-favorite-modal/add-edit-favorite-modal.component.ts

@@ -0,0 +1,165 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, effect } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { Subject, switchMap } from 'rxjs';
+
+import { ButtonComponent } from 'aril/ui/button';
+import { FieldComponent } from 'aril/ui/field';
+import { ARiLFormModule } from 'aril/ui/form';
+import { TextComponent } from 'aril/ui/text';
+
+import {
+	FavoritePageResponseDTO,
+	FavoritePageSaveRequestDTO,
+	FavoritePageUpdateRequestDTO,
+	FavoritePagesService
+} from '../../favorite-pages.service';
+
+interface ModalData {
+	mode: 'add' | 'edit';
+	url?: string; // For add mode
+	favorite?: FavoritePageResponseDTO; // For edit mode
+}
+
+@Component({
+	standalone: true,
+	imports: [
+		CommonModule,
+		ReactiveFormsModule,
+		FormsModule,
+		ARiLFormModule,
+		FieldComponent,
+		TextComponent,
+		ButtonComponent,
+		TranslocoModule
+	],
+	templateUrl: './add-edit-favorite-modal.component.html'
+})
+export class AddEditFavoriteModalComponent implements OnInit {
+	favoriteForm!: FormGroup;
+	modalData: ModalData;
+
+	private subjects = {
+		saveFavorite: new Subject<FavoritePageSaveRequestDTO>(),
+		updateFavorite: new Subject<FavoritePageUpdateRequestDTO>()
+	};
+
+	saveFavoriteService = toSignal(
+		this.subjects.saveFavorite.pipe(switchMap((data) => this.favoritePagesService.saveFavoritePage(data)))
+	);
+
+	updateFavoriteService = toSignal(
+		this.subjects.updateFavorite.pipe(
+			switchMap((data) => this.favoritePagesService.updateFavoritePage(this.modalData.favorite?.id as number, data))
+		)
+	);
+
+	constructor(
+		private readonly formBuilder: FormBuilder,
+		private readonly dialogRef: DynamicDialogRef,
+		private readonly dialogConfig: DynamicDialogConfig,
+		private readonly favoritePagesService: FavoritePagesService,
+		private readonly messageService: MessageService,
+		private readonly translocoService: TranslocoService
+	) {
+		this.modalData = this.dialogConfig.data;
+		this.initializeEffects();
+		this.initializeForm();
+	}
+
+	ngOnInit(): void {
+		if (!this.modalData || !['add', 'edit'].includes(this.modalData.mode)) {
+			this.dialogRef.close('error');
+		}
+	}
+
+	private initializeEffects(): void {
+		// Save favorite effect
+		effect(
+			() => {
+				const service = this.saveFavoriteService();
+				if (service?.response) {
+					this.messageService.add({
+						severity: 'success',
+						summary: this.translocoService.translate('favoritePages.success'),
+						detail: this.translocoService.translate('favoritePages.saveSuccessfully'),
+						key: 'toast-root'
+					});
+					this.dialogRef.close({ status: 'success', data: service.response });
+				}
+			},
+			{ allowSignalWrites: true }
+		);
+
+		// Update favorite effect
+		effect(
+			() => {
+				const service = this.updateFavoriteService();
+				if (service?.response) {
+					this.messageService.add({
+						severity: 'success',
+						summary: this.translocoService.translate('favoritePages.success'),
+						detail: this.translocoService.translate('favoritePages.updatedSuccessfully'),
+						key: 'toast-root'
+					});
+					this.dialogRef.close({ status: 'success', data: service.response });
+				}
+			},
+			{ allowSignalWrites: true }
+		);
+	}
+
+	private initializeForm(): void {
+		if (this.modalData.mode === 'add') {
+			this.favoriteForm = this.formBuilder.group({
+				label: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(100)]],
+				url: [{ value: this.modalData.url || '', disabled: true }]
+			});
+		} else if (this.modalData.mode === 'edit' && this.modalData.favorite) {
+			this.favoriteForm = this.formBuilder.group({
+				label: [
+					this.modalData.favorite.label,
+					[Validators.required, Validators.minLength(1), Validators.maxLength(100)]
+				],
+				url: [{ value: this.modalData.favorite.url, disabled: true }]
+			});
+		}
+	}
+
+	get isAddMode(): boolean {
+		return this.modalData.mode === 'add';
+	}
+
+	get isEditMode(): boolean {
+		return this.modalData.mode === 'edit';
+	}
+
+	submit(): void {
+		const formValue = this.favoriteForm.value;
+
+		if (this.isAddMode) {
+			const saveRequest: FavoritePageSaveRequestDTO = {
+				url: this.modalData.url!,
+				label: formValue.label.trim()
+			};
+			this.subjects.saveFavorite.next(saveRequest);
+		} else if (this.isEditMode && this.modalData.favorite) {
+			const updateRequest: any = {
+				label: formValue.label.trim(),
+				url: this.modalData.url!,
+				version: this.modalData.favorite.version
+			};
+			this.subjects.updateFavorite.next(updateRequest);
+		}
+	}
+
+	cancel(): void {
+		this.dialogRef.close('cancel');
+	}
+}

package/theme/layout/app/history/history-sidebar.component.d.ts

@@ -0,0 +1,30 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { TranslocoService } from '@ngneat/transloco';
+import { LayoutService } from '../../service/app.layout.service';
+import { HistoryItem, HistoryService } from './history.service';
+import * as i0 from "@angular/core";
+export declare class HistorySidebarComponent implements OnInit, OnDestroy {
+    layoutService: LayoutService;
+    private historyService;
+    private confirmationService;
+    private messageService;
+    private translocoService;
+    history: import("@angular/core").WritableSignal<HistoryItem[]>;
+    filteredHistory: import("@angular/core").WritableSignal<HistoryItem[]>;
+    searchTerm: import("@angular/core").WritableSignal<string>;
+    private destroy$;
+    constructor(layoutService: LayoutService, historyService: HistoryService, confirmationService: ConfirmationService, messageService: MessageService, translocoService: TranslocoService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get visible(): boolean;
+    set visible(value: boolean);
+    onSearchChange(): void;
+    private applyFilter;
+    navigateToItem(item: HistoryItem): void;
+    clearAllHistory(event: Event): void;
+    trackByItemId(index: number, item: HistoryItem): string | number;
+    getLocalizedTitle(item: HistoryItem): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HistorySidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HistorySidebarComponent, "app-history-sidebar", never, {}, {}, never, never, true, never>;
+}