aril 1.1.96 → 1.2.0

package/theme/layout/app/expandableMenu/expandable-menu.component.ts

@@ -1,374 +1,373 @@
-import { NgClass } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { Component, HostListener, OnDestroy, OnInit, Signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router, RouterLink } from '@angular/router';
-
-import { TooltipModule } from 'primeng/tooltip';
-
-import { TranslocoService } from '@ngneat/transloco';
-import { KeycloakService } from 'keycloak-angular';
-import { Subscription, filter } from 'rxjs';
-
-import { PluginMenuItem } from 'aril/boot/config/apps';
-import { TranslateJsonPipe } from 'aril/util/pipes';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuService } from '../../service/app.menu.service';
-
-@Component({
-	standalone: true,
-	selector: 'app-expandable-menu',
-	imports: [RouterLink, NgClass, TooltipModule],
-	templateUrl: 'expandable-menu.component.html',
-	providers: [TranslateJsonPipe]
-})
-export class ExpandableMenuComponent implements OnInit, OnDestroy {
-	activeLang: Signal<string>;
-	overlayMenuOpenSubscription: Subscription | null = null;
-	routerSubscription: Subscription | null = null;
-	username: string;
-
-	isHostMode = (<any>globalThis).isHostMode;
-	hostMenuItems = (<any>globalThis).hostMenuItems;
-	cachedMenuItems: PluginMenuItem[] = [];
-
-	selectedMainMenuItem: PluginMenuItem | null = null;
-
-	get sidebarExpanded(): boolean {
-		return this.layoutService.state.secondarySidebarExpanded;
-	}
-
-	set sidebarExpanded(value: boolean) {
-		this.layoutService.setSecondarySidebarExpanded(value);
-	}
-
-	tooltipText = {
-		toggleButton: {
-			expanded: {
-				tr: 'Menüyü Gizle',
-				en: 'Hide Menu'
-			},
-			collapsed: {
-				tr: 'Menüyü Göster',
-				en: 'Show Menu'
-			}
-		},
-		lockButton: {
-			locked: {
-				tr: 'Otomatik Kapanmayı Aç',
-				en: 'Enable Auto-Close'
-			},
-			unlocked: {
-				tr: 'Menüyü Kilitle',
-				en: 'Lock Menu'
-			}
-		}
-	};
-
-	private readonly MAX_LENGTH = {
-		main: 8,
-		secondary: 20,
-		tertiary: 20
-	};
-
-	actionLoadingItems = new Set<string>();
-	private actionSubscription: Subscription | null = null;
-
-	constructor(
-		private translateJsonPipe: TranslateJsonPipe,
-		private menuService: AppMenuService,
-		private router: Router,
-		private keycloak: KeycloakService,
-		private translocoService: TranslocoService,
-		private layoutService: LayoutService,
-		private http: HttpClient
-	) {
-		this.activeLang = toSignal(this.translocoService.langChanges$, { initialValue: 'tr' });
-		this.username = this.keycloak.getUsername().charAt(0).toUpperCase();
-	}
-
-	// Getter for layout service states
-	get selectedMainItem(): number | null {
-		return this.layoutService.state.selectedMainItem;
-	}
-
-	get secondarySidebarExpanded(): boolean {
-		return this.layoutService.state.secondarySidebarExpanded;
-	}
-
-	// Check if text is truncated and needs tooltip
-	isTextTruncated(
-		label: any,
-		lang: string | null,
-		menuType: 'main' | 'secondary' | 'tertiary' | 'nested' = 'secondary'
-	): boolean {
-		if (!label || !lang || !label[lang]) return false;
-
-		const text = label[lang];
-		const textLength = text.length;
-		const maxLength = menuType === 'nested' ? this.MAX_LENGTH.tertiary : this.MAX_LENGTH[menuType];
-		return textLength > maxLength;
-	}
-
-	// Recursively check if a menu item or its children match the current route
-	isActiveRoute(menuItem: PluginMenuItem): boolean {
-		if (!menuItem || !menuItem.routerLink) return false;
-
-		// Get current URL path after the hash
-		const currentUrl = this.router.url;
-		const hashUrl = currentUrl.indexOf('#') > -1 ? currentUrl.split('#')[1] : currentUrl;
-
-		// Check for exact match first
-		if (hashUrl === menuItem.routerLink || hashUrl === '/' + menuItem.routerLink) {
-			return true;
-		}
-
-		// Check if current URL starts with the routerLink (handles child routes)
-		if (
-			menuItem.routerLink !== '/' &&
-			(hashUrl.startsWith(menuItem.routerLink + '/') || hashUrl.startsWith('/' + menuItem.routerLink + '/'))
-		) {
-			return true;
-		}
-
-		// Check child items if they exist
-		if (menuItem.items && menuItem.items.length > 0) {
-			return menuItem.items.some((childItem) => this.isActiveRoute(childItem));
-		}
-
-		return false;
-	}
-
-	ngOnInit() {
-		this.updateMenuItems();
-		this.initializeMenu();
-		this.updateActiveMenuFromCurrentRoute();
-
-		// Subscribe to route changes to handle secondary sidebar closing
-		this.routerSubscription = this.router.events
-			.pipe(filter((event) => event instanceof NavigationEnd))
-			.subscribe(() => {
-				// Update active menu based on the new route
-				this.updateActiveMenuFromCurrentRoute();
-			});
-
-		// Subscribe to overlay menu open notifications
-		this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
-			if (this.layoutService.state.staticMenuMobileActive) {
-				this.layoutService.setSecondarySidebarExpanded(true);
-			}
-		});
-	}
-
-	ngOnDestroy() {
-		if (this.overlayMenuOpenSubscription) {
-			this.overlayMenuOpenSubscription.unsubscribe();
-		}
-
-		if (this.routerSubscription) {
-			this.routerSubscription.unsubscribe();
-		}
-
-		this.actionSubscription?.unsubscribe();
-	}
-
-	// Initialize the menu with proper active state
-	initializeMenu() {
-		this.layoutService.setSelectedMainItem(null);
-		this.selectedMainMenuItem = null;
-		this.layoutService.setSecondarySidebarExpanded(false);
-		this.updateMenuItems();
-	}
-
-	updateMenuFromRootKey(index: number): void {
-		this.updateMenuItems();
-		const menuItems = this.getMenuItems();
-
-		if (index >= 0 && index < menuItems.length) {
-			const item = menuItems[index];
-			if (!item.separator) {
-				this.layoutService.setSelectedMainItem(index);
-				this.selectedMainMenuItem = item;
-				this.layoutService.setSecondarySidebarExpanded(true);
-			}
-		}
-	}
-
-	updateMenuItems(): void {
-		this.cachedMenuItems = this.isHostMode ? this.hostMenuItems() : this.menuService.menuItems();
-	}
-
-	getMenuItems(): PluginMenuItem[] {
-		return this.cachedMenuItems;
-	}
-
-	selectMainItem(index: number, item: PluginMenuItem): void {
-		// Handle action items at top level
-		if (item.action && (!item.items || item.items.length === 0)) {
-			this.onActionItemClick(item);
-			return;
-		}
-
-		if (item.routerLink && (!item.items || item.items.length === 0)) {
-			this.layoutService.setSecondarySidebarExpanded(false);
-			this.layoutService.setSelectedMainItem(index);
-			this.selectedMainMenuItem = item;
-			this.router.navigate([item.routerLink]);
-			return;
-		}
-
-		// Handle regular menu items with submenu
-		if (this.selectedMainItem === index) {
-			this.layoutService.toggleSecondarySidebar();
-		} else {
-			this.layoutService.setSelectedMainItem(index);
-			this.selectedMainMenuItem = item;
-
-			if (item.items && item.items.length > 0) {
-				this.layoutService.setSecondarySidebarExpanded(true);
-			} else {
-				this.layoutService.setSecondarySidebarExpanded(false);
-			}
-		}
-
-		// For mobile devices, ensure the menu stays open
-		if (this.isMobile()) {
-			this.layoutService.state.staticMenuMobileActive = true;
-		}
-	}
-
-	toggleSecondarySidebar(): void {
-		this.layoutService.toggleSecondarySidebar();
-	}
-
-	isMobile(): boolean {
-		return this.layoutService.isMobile();
-	}
-
-	// Listen for resize events - now handled more efficiently by layout service
-	@HostListener('window:resize')
-	onResize() {
-		if (!this.isMobile() && this.layoutService.state.staticMenuMobileActive) {
-			this.layoutService.closeMobileMenu();
-		}
-	}
-
-	updateActiveMenuFromCurrentRoute(): void {
-		const menuItems = this.getMenuItems();
-
-		for (let i = 0; i < menuItems.length; i++) {
-			const menuItem = menuItems[i];
-			if (this.isActiveRoute(menuItem)) {
-				this.layoutService.setSelectedMainItem(i);
-				this.selectedMainMenuItem = menuItem;
-
-				if (menuItem.items && menuItem.items.length > 0) {
-					if (!this.isMobile() && !this.secondarySidebarExpanded && !this.layoutService.state.staticMenuMobileActive) {
-						this.layoutService.setSecondarySidebarExpanded(true);
-					}
-				} else {
-					this.layoutService.setSecondarySidebarExpanded(false);
-				}
-				return;
-			}
-		}
-	}
-
-	isHaveSelectedChildItem(item: PluginMenuItem): boolean {
-		if (!item || !item.items || item.items.length === 0) return false;
-
-		for (const child of item.items) {
-			if (this.isActiveRoute(child)) {
-				return true;
-			}
-
-			if (child.items && child.items.length > 0) {
-				if (this.isHaveSelectedChildItem(child)) {
-					return true;
-				}
-			}
-		}
-
-		return false;
-	}
-
-	getLocalText(text: any): string {
-		return this.translateJsonPipe.transform(text);
-	}
-
-	getActionItemKey(item: PluginMenuItem): string {
-		return item.action?.url + '|' + item.action?.successRoute;
-	}
-
-	isActionLoading(item: PluginMenuItem): boolean {
-		return this.actionLoadingItems.has(this.getActionItemKey(item));
-	}
-
-	onActionItemClick(item: PluginMenuItem, event?: Event): void {
-		if (event) {
-			event.preventDefault();
-			event.stopPropagation();
-		}
-
-		if (!item.action || this.isActionLoading(item)) return;
-
-		// Cancel any previous action request
-		this.actionSubscription?.unsubscribe();
-
-		const key = this.getActionItemKey(item);
-		this.actionLoadingItems.add(key);
-
-		const request$ =
-			item.action.method === 'GET'
-				? this.http.get(item.action.url)
-				: this.http.post(item.action.url, item.action.body ?? {});
-
-		this.actionSubscription = request$.subscribe({
-			next: (response: any) => {
-				this.actionLoadingItems.delete(key);
-				const route = this.buildSuccessRoute(item.action!, response);
-				this.router.navigate([route]);
-			},
-			error: () => {
-				this.actionLoadingItems.delete(key);
-			}
-		});
-	}
-
-	private buildSuccessRoute(action: PluginMenuItem['action'], response: any): string {
-		if (!action?.successRouteResponseKey) return action?.successRoute ?? '/';
-
-		const value = this.getValueByPath(response, action.successRouteResponseKey);
-		if (value === undefined || value === null) return action.successRoute;
-
-		return `${action.successRoute}/${value}`;
-	}
-
-	private getValueByPath(obj: any, path: string): any {
-		if (!obj || !path) return undefined;
-
-		return path.split('.').reduce((current, key) => {
-			if (current === undefined || current === null) return undefined;
-
-			// Handle array access like 'result[0]'
-			const arrayMatch = key.match(/^(.+?)\[(\d+)\]$/);
-			if (arrayMatch) {
-				const arrayKey = arrayMatch[1];
-				const index = parseInt(arrayMatch[2], 10);
-				return current[arrayKey]?.[index];
-			}
-
-			return current[key];
-		}, obj);
-	}
-
-	toggleSidebar() {
-		// Eğer seçili bir ana menü öğesi varsa ve alt menüleri varsa toggle yapabiliriz
-		if (this.selectedMainMenuItem && this.selectedMainMenuItem.items && this.selectedMainMenuItem.items.length > 0) {
-			this.sidebarExpanded = !this.sidebarExpanded;
-		} else if (this.sidebarExpanded) {
-			this.sidebarExpanded = false;
-		}
-	}
-}
+import { NgClass } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, HostListener, OnDestroy, OnInit, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router, RouterLink } from '@angular/router';
+
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoService } from '@ngneat/transloco';
+import { KeycloakService } from 'keycloak-angular';
+import { Subscription, filter } from 'rxjs';
+
+import { bridge } from 'aril/boot/bridge';
+import { PluginMenuItem } from 'aril/boot/config/apps';
+import { TranslateJsonPipe } from 'aril/util/pipes';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.service';
+
+@Component({
+	standalone: true,
+	selector: 'app-expandable-menu',
+	imports: [RouterLink, NgClass, TooltipModule],
+	templateUrl: 'expandable-menu.component.html',
+	providers: [TranslateJsonPipe]
+})
+export class ExpandableMenuComponent implements OnInit, OnDestroy {
+	activeLang: Signal<string>;
+	overlayMenuOpenSubscription: Subscription | null = null;
+	routerSubscription: Subscription | null = null;
+	username: string;
+
+	cachedMenuItems: PluginMenuItem[] = [];
+
+	selectedMainMenuItem: PluginMenuItem | null = null;
+
+	get sidebarExpanded(): boolean {
+		return this.layoutService.state.secondarySidebarExpanded;
+	}
+
+	set sidebarExpanded(value: boolean) {
+		this.layoutService.setSecondarySidebarExpanded(value);
+	}
+
+	tooltipText = {
+		toggleButton: {
+			expanded: {
+				tr: 'Menüyü Gizle',
+				en: 'Hide Menu'
+			},
+			collapsed: {
+				tr: 'Menüyü Göster',
+				en: 'Show Menu'
+			}
+		},
+		lockButton: {
+			locked: {
+				tr: 'Otomatik Kapanmayı Aç',
+				en: 'Enable Auto-Close'
+			},
+			unlocked: {
+				tr: 'Menüyü Kilitle',
+				en: 'Lock Menu'
+			}
+		}
+	};
+
+	private readonly MAX_LENGTH = {
+		main: 8,
+		secondary: 20,
+		tertiary: 20
+	};
+
+	actionLoadingItems = new Set<string>();
+	private actionSubscription: Subscription | null = null;
+
+	constructor(
+		private translateJsonPipe: TranslateJsonPipe,
+		private menuService: AppMenuService,
+		private router: Router,
+		private keycloak: KeycloakService,
+		private translocoService: TranslocoService,
+		private layoutService: LayoutService,
+		private http: HttpClient
+	) {
+		this.activeLang = toSignal(this.translocoService.langChanges$, { initialValue: 'tr' });
+		this.username = this.keycloak.getUsername().charAt(0).toUpperCase();
+	}
+
+	// Getter for layout service states
+	get selectedMainItem(): number | null {
+		return this.layoutService.state.selectedMainItem;
+	}
+
+	get secondarySidebarExpanded(): boolean {
+		return this.layoutService.state.secondarySidebarExpanded;
+	}
+
+	// Check if text is truncated and needs tooltip
+	isTextTruncated(
+		label: any,
+		lang: string | null,
+		menuType: 'main' | 'secondary' | 'tertiary' | 'nested' = 'secondary'
+	): boolean {
+		if (!label || !lang || !label[lang]) return false;
+
+		const text = label[lang];
+		const textLength = text.length;
+		const maxLength = menuType === 'nested' ? this.MAX_LENGTH.tertiary : this.MAX_LENGTH[menuType];
+		return textLength > maxLength;
+	}
+
+	// Recursively check if a menu item or its children match the current route
+	isActiveRoute(menuItem: PluginMenuItem): boolean {
+		if (!menuItem || !menuItem.routerLink) return false;
+
+		// Get current URL path after the hash
+		const currentUrl = this.router.url;
+		const hashUrl = currentUrl.indexOf('#') > -1 ? currentUrl.split('#')[1] : currentUrl;
+
+		// Check for exact match first
+		if (hashUrl === menuItem.routerLink || hashUrl === '/' + menuItem.routerLink) {
+			return true;
+		}
+
+		// Check if current URL starts with the routerLink (handles child routes)
+		if (
+			menuItem.routerLink !== '/' &&
+			(hashUrl.startsWith(menuItem.routerLink + '/') || hashUrl.startsWith('/' + menuItem.routerLink + '/'))
+		) {
+			return true;
+		}
+
+		// Check child items if they exist
+		if (menuItem.items && menuItem.items.length > 0) {
+			return menuItem.items.some((childItem) => this.isActiveRoute(childItem));
+		}
+
+		return false;
+	}
+
+	ngOnInit() {
+		this.updateMenuItems();
+		this.initializeMenu();
+		this.updateActiveMenuFromCurrentRoute();
+
+		// Subscribe to route changes to handle secondary sidebar closing
+		this.routerSubscription = this.router.events
+			.pipe(filter((event) => event instanceof NavigationEnd))
+			.subscribe(() => {
+				// Update active menu based on the new route
+				this.updateActiveMenuFromCurrentRoute();
+			});
+
+		// Subscribe to overlay menu open notifications
+		this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+			if (this.layoutService.state.staticMenuMobileActive) {
+				this.layoutService.setSecondarySidebarExpanded(true);
+			}
+		});
+	}
+
+	ngOnDestroy() {
+		if (this.overlayMenuOpenSubscription) {
+			this.overlayMenuOpenSubscription.unsubscribe();
+		}
+
+		if (this.routerSubscription) {
+			this.routerSubscription.unsubscribe();
+		}
+
+		this.actionSubscription?.unsubscribe();
+	}
+
+	// Initialize the menu with proper active state
+	initializeMenu() {
+		this.layoutService.setSelectedMainItem(null);
+		this.selectedMainMenuItem = null;
+		this.layoutService.setSecondarySidebarExpanded(false);
+		this.updateMenuItems();
+	}
+
+	updateMenuFromRootKey(index: number): void {
+		this.updateMenuItems();
+		const menuItems = this.getMenuItems();
+
+		if (index >= 0 && index < menuItems.length) {
+			const item = menuItems[index];
+			if (!item.separator) {
+				this.layoutService.setSelectedMainItem(index);
+				this.selectedMainMenuItem = item;
+				this.layoutService.setSecondarySidebarExpanded(true);
+			}
+		}
+	}
+
+	updateMenuItems(): void {
+		this.cachedMenuItems = bridge.isHostMode() ? bridge.hostMenuItems() : this.menuService.menuItems();
+	}
+
+	getMenuItems(): PluginMenuItem[] {
+		return this.cachedMenuItems;
+	}
+
+	selectMainItem(index: number, item: PluginMenuItem): void {
+		// Handle action items at top level
+		if (item.action && (!item.items || item.items.length === 0)) {
+			this.onActionItemClick(item);
+			return;
+		}
+
+		if (item.routerLink && (!item.items || item.items.length === 0)) {
+			this.layoutService.setSecondarySidebarExpanded(false);
+			this.layoutService.setSelectedMainItem(index);
+			this.selectedMainMenuItem = item;
+			this.router.navigate([item.routerLink]);
+			return;
+		}
+
+		// Handle regular menu items with submenu
+		if (this.selectedMainItem === index) {
+			this.layoutService.toggleSecondarySidebar();
+		} else {
+			this.layoutService.setSelectedMainItem(index);
+			this.selectedMainMenuItem = item;
+
+			if (item.items && item.items.length > 0) {
+				this.layoutService.setSecondarySidebarExpanded(true);
+			} else {
+				this.layoutService.setSecondarySidebarExpanded(false);
+			}
+		}
+
+		// For mobile devices, ensure the menu stays open
+		if (this.isMobile()) {
+			this.layoutService.state.staticMenuMobileActive = true;
+		}
+	}
+
+	toggleSecondarySidebar(): void {
+		this.layoutService.toggleSecondarySidebar();
+	}
+
+	isMobile(): boolean {
+		return this.layoutService.isMobile();
+	}
+
+	// Listen for resize events - now handled more efficiently by layout service
+	@HostListener('window:resize')
+	onResize() {
+		if (!this.isMobile() && this.layoutService.state.staticMenuMobileActive) {
+			this.layoutService.closeMobileMenu();
+		}
+	}
+
+	updateActiveMenuFromCurrentRoute(): void {
+		const menuItems = this.getMenuItems();
+
+		for (let i = 0; i < menuItems.length; i++) {
+			const menuItem = menuItems[i];
+			if (this.isActiveRoute(menuItem)) {
+				this.layoutService.setSelectedMainItem(i);
+				this.selectedMainMenuItem = menuItem;
+
+				if (menuItem.items && menuItem.items.length > 0) {
+					if (!this.isMobile() && !this.secondarySidebarExpanded && !this.layoutService.state.staticMenuMobileActive) {
+						this.layoutService.setSecondarySidebarExpanded(true);
+					}
+				} else {
+					this.layoutService.setSecondarySidebarExpanded(false);
+				}
+				return;
+			}
+		}
+	}
+
+	isHaveSelectedChildItem(item: PluginMenuItem): boolean {
+		if (!item || !item.items || item.items.length === 0) return false;
+
+		for (const child of item.items) {
+			if (this.isActiveRoute(child)) {
+				return true;
+			}
+
+			if (child.items && child.items.length > 0) {
+				if (this.isHaveSelectedChildItem(child)) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+
+	getLocalText(text: any): string {
+		return this.translateJsonPipe.transform(text);
+	}
+
+	getActionItemKey(item: PluginMenuItem): string {
+		return item.action?.url + '|' + item.action?.successRoute;
+	}
+
+	isActionLoading(item: PluginMenuItem): boolean {
+		return this.actionLoadingItems.has(this.getActionItemKey(item));
+	}
+
+	onActionItemClick(item: PluginMenuItem, event?: Event): void {
+		if (event) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+
+		if (!item.action || this.isActionLoading(item)) return;
+
+		// Cancel any previous action request
+		this.actionSubscription?.unsubscribe();
+
+		const key = this.getActionItemKey(item);
+		this.actionLoadingItems.add(key);
+
+		const request$ =
+			item.action.method === 'GET'
+				? this.http.get(item.action.url)
+				: this.http.post(item.action.url, item.action.body ?? {});
+
+		this.actionSubscription = request$.subscribe({
+			next: (response: any) => {
+				this.actionLoadingItems.delete(key);
+				const route = this.buildSuccessRoute(item.action!, response);
+				this.router.navigate([route]);
+			},
+			error: () => {
+				this.actionLoadingItems.delete(key);
+			}
+		});
+	}
+
+	private buildSuccessRoute(action: PluginMenuItem['action'], response: any): string {
+		if (!action?.successRouteResponseKey) return action?.successRoute ?? '/';
+
+		const value = this.getValueByPath(response, action.successRouteResponseKey);
+		if (value === undefined || value === null) return action.successRoute;
+
+		return `${action.successRoute}/${value}`;
+	}
+
+	private getValueByPath(obj: any, path: string): any {
+		if (!obj || !path) return undefined;
+
+		return path.split('.').reduce((current, key) => {
+			if (current === undefined || current === null) return undefined;
+
+			// Handle array access like 'result[0]'
+			const arrayMatch = key.match(/^(.+?)\[(\d+)\]$/);
+			if (arrayMatch) {
+				const arrayKey = arrayMatch[1];
+				const index = parseInt(arrayMatch[2], 10);
+				return current[arrayKey]?.[index];
+			}
+
+			return current[key];
+		}, obj);
+	}
+
+	toggleSidebar() {
+		// Eğer seçili bir ana menü öğesi varsa ve alt menüleri varsa toggle yapabiliriz
+		if (this.selectedMainMenuItem && this.selectedMainMenuItem.items && this.selectedMainMenuItem.items.length > 0) {
+			this.sidebarExpanded = !this.sidebarExpanded;
+		} else if (this.sidebarExpanded) {
+			this.sidebarExpanded = false;
+		}
+	}
+}