aril 1.1.63 → 1.1.65

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

@@ -1,295 +1,295 @@
-import { NgClass } from '@angular/common';
-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
-	};
-
-	constructor(
-		private translateJsonPipe: TranslateJsonPipe,
-		private menuService: AppMenuService,
-		private router: Router,
-		private keycloak: KeycloakService,
-		private translocoService: TranslocoService,
-		private layoutService: LayoutService
-	) {
-		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();
-		}
-	}
-
-	// 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 {
-		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);
-	}
-
-	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 { 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
+	};
+
+	constructor(
+		private translateJsonPipe: TranslateJsonPipe,
+		private menuService: AppMenuService,
+		private router: Router,
+		private keycloak: KeycloakService,
+		private translocoService: TranslocoService,
+		private layoutService: LayoutService
+	) {
+		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();
+		}
+	}
+
+	// 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 {
+		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);
+	}
+
+	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;
+		}
+	}
+}