aril 1.1.97 → 1.2.0

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

@@ -1,336 +1,336 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { Component, OnDestroy, OnInit, Signal, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
-import { NavigationEnd, Router, RouterLink } from '@angular/router';
-
-import { ScrollPanelModule } from 'primeng/scrollpanel';
-import { TooltipModule } from 'primeng/tooltip';
-
-import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { Subscription, filter } from 'rxjs';
-
-import { bridge } from 'aril/boot/bridge';
-import { MenuItemAction, 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';
-
-interface MenuNode {
-	key: string;
-	label: any;
-	icon?: string;
-	routerLink?: string;
-	action?: MenuItemAction;
-	children?: MenuNode[];
-	expanded: boolean;
-	actionLoading?: boolean;
-}
-
-@Component({
-	standalone: true,
-	selector: 'app-static-sidebar',
-	imports: [RouterLink, NgClass, NgTemplateOutlet, ScrollPanelModule, TooltipModule, FormsModule, TranslocoModule],
-	templateUrl: './static-sidebar.component.html',
-	styleUrl: './static-sidebar.component.scss',
-	providers: [TranslateJsonPipe]
-})
-export class StaticSidebarComponent implements OnInit, OnDestroy {
-	activeLang: Signal<string>;
-	menuNodes = signal<MenuNode[]>([]);
-	filteredNodes = signal<MenuNode[]>([]);
-	searchTerm = signal<string>('');
-
-	private routerSubscription: Subscription | null = null;
-	private actionSubscription: Subscription | null = null;
-
-	private readonly MAX_LENGTH = { level0: 25, level1: 20, level2: 16, level3: 13 };
-
-	constructor(
-		private readonly menuService: AppMenuService,
-		private readonly router: Router,
-		private readonly layoutService: LayoutService,
-		private readonly translateJsonPipe: TranslateJsonPipe,
-		private readonly translocoService: TranslocoService,
-		private readonly http: HttpClient
-	) {
-		this.activeLang = toSignal(this.translocoService.langChanges$, { initialValue: 'tr' });
-	}
-
-	get isCollapsed(): boolean {
-		return this.layoutService.isStaticSidebarCollapsed();
-	}
-
-	get topLevelNodes(): MenuNode[] {
-		return this.menuNodes();
-	}
-
-	ngOnInit() {
-		this.buildMenuTree();
-		this.routerSubscription = this.router.events
-			.pipe(filter((event) => event instanceof NavigationEnd))
-			.subscribe(() => this.buildMenuTree());
-	}
-
-	ngOnDestroy() {
-		this.routerSubscription?.unsubscribe();
-		this.actionSubscription?.unsubscribe();
-	}
-
-	isTextTruncated(label: any, lang: string | null, level = 0): boolean {
-		if (!label || !lang || !label[lang]) return false;
-		const text = label[lang];
-		const len = text.length;
-		const limits = [this.MAX_LENGTH.level0, this.MAX_LENGTH.level1, this.MAX_LENGTH.level2, this.MAX_LENGTH.level3];
-		return len > limits[Math.min(level, 3)];
-	}
-
-	isMobile(): boolean {
-		return this.layoutService.isMobile();
-	}
-
-	buildMenuTree() {
-		const menuItems = this.getMenuItems();
-		const nodes = this.convertToMenuNodes(menuItems);
-		this.menuNodes.set(nodes);
-		this.filteredNodes.set([...nodes]);
-		this.expandActiveMenu();
-	}
-
-	private expandActiveMenu() {
-		const nodes = this.menuNodes();
-		this.findAndExpandActiveNode(nodes);
-		this.filteredNodes.set([...this.filteredNodes()]);
-	}
-
-	private findAndExpandActiveNode(nodes: MenuNode[]): MenuNode | null {
-		for (const node of nodes) {
-			if (this.isActiveRouteForNode(node)) {
-				return node;
-			}
-
-			if (node.children && node.children.length > 0) {
-				const activeChild = this.findAndExpandActiveNode(node.children);
-				if (activeChild) {
-					// we find active child and then opened its parent nodes
-					node.expanded = true;
-					return activeChild;
-				}
-			}
-		}
-		return null;
-	}
-
-	convertToMenuNodes(items: PluginMenuItem[], parentKey = ''): MenuNode[] {
-		return items
-			.filter((item) => !item.separator)
-			.map((item, index) => {
-				const key = parentKey ? `${parentKey}-${index}` : `${index}`;
-				const node: MenuNode = {
-					key,
-					label: item.label,
-					icon: item.icon,
-					routerLink: item.action ? undefined : item.routerLink,
-					action: item.action,
-					expanded: false
-				};
-				if (item.items && item.items.length > 0) {
-					node.children = this.convertToMenuNodes(item.items, key);
-				}
-				return node;
-			});
-	}
-
-	getMenuItems(): PluginMenuItem[] {
-		return bridge.isHostMode() ? bridge.hostMenuItems() : this.menuService.menuItems();
-	}
-
-	getLocalText(text: any): string {
-		return this.translateJsonPipe.transform(text);
-	}
-
-	isActiveRouteForNode(node: MenuNode): boolean {
-		if (!node.routerLink) return false;
-		const currentUrl = this.router.url;
-		const hashUrl = currentUrl.indexOf('#') > -1 ? currentUrl.split('#')[1] : currentUrl;
-		if (hashUrl === node.routerLink || hashUrl === '/' + node.routerLink) return true;
-		return (
-			node.routerLink !== '/' &&
-			(hashUrl.startsWith(node.routerLink + '/') || hashUrl.startsWith('/' + node.routerLink + '/'))
-		);
-	}
-
-	// use on collapsed mode
-	isNodeOrChildActive(node: MenuNode): boolean {
-		if (this.isActiveRouteForNode(node)) {
-			return true;
-		}
-		if (node.children && node.children.length > 0) {
-			return node.children.some((child) => this.isNodeOrChildActive(child));
-		}
-
-		return false;
-	}
-
-	isTopLevelNodeActive(node: MenuNode): boolean {
-		return this.isNodeOrChildActive(node);
-	}
-
-	isChildNodeActive(node: MenuNode): boolean {
-		return this.isActiveRouteForNode(node);
-	}
-
-	toggleNode(node: MenuNode, level = 0) {
-		const wasExpanded = node.expanded;
-		if (level === 0) {
-			// Diğer ana menüleri kapat
-			this.closeOtherTopLevelNodes(node);
-		}
-		node.expanded = !wasExpanded;
-
-		this.filteredNodes.set([...this.filteredNodes()]);
-	}
-
-	private closeOtherTopLevelNodes(exceptNode: MenuNode) {
-		const nodes = this.menuNodes();
-		nodes.forEach((node) => {
-			if (node !== exceptNode) {
-				node.expanded = false;
-				this.closeAllChildNodes(node);
-			}
-		});
-	}
-
-	private closeAllChildNodes(node: MenuNode) {
-		if (node.children) {
-			node.children.forEach((child) => {
-				child.expanded = false;
-				this.closeAllChildNodes(child);
-			});
-		}
-	}
-
-	trackByKey(index: number, node: MenuNode): any {
-		return node.key;
-	}
-
-	onMenuItemClick() {
-		if (this.isMobile()) {
-			this.layoutService.closeMobileMenu();
-		}
-
-		this.searchTerm.set('');
-		this.filteredNodes.set(this.menuNodes() || []);
-	}
-
-	onActionItemClick(node: MenuNode, event: Event) {
-		event.preventDefault();
-		event.stopPropagation();
-
-		if (!node.action || node.actionLoading) return;
-
-		// Cancel any previous action request
-		this.actionSubscription?.unsubscribe();
-
-		node.actionLoading = true;
-
-		const request$ =
-			node.action.method === 'GET' ?
-				this.http.get(node.action.url)
-			:	this.http.post(node.action.url, node.action.body ?? {});
-
-		this.actionSubscription = request$.subscribe({
-			next: (response: any) => {
-				node.actionLoading = false;
-				const route = this.buildSuccessRoute(node.action!, response);
-				this.router.navigate([route]);
-				this.onMenuItemClick();
-			},
-			error: () => {
-				node.actionLoading = false;
-			}
-		});
-	}
-
-	private buildSuccessRoute(action: MenuItemAction, 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);
-	}
-
-	onCollapsedItemClick(node: MenuNode) {
-		if (this.isCollapsed) {
-			this.layoutService.onMenuToggle();
-		}
-		this.closeOtherTopLevelNodes(node);
-		if (node.children && node.children.length > 0) {
-			node.expanded = true;
-		}
-		this.filteredNodes.set([...this.filteredNodes()]);
-		if (node.routerLink) {
-			this.onMenuItemClick();
-		}
-	}
-
-	onSearchChange(): void {
-		const currentSearchTerm = this.searchTerm()?.toLowerCase()?.trim();
-		if (!currentSearchTerm) {
-			this.filteredNodes.set(this.menuNodes() || []);
-			return;
-		}
-		this.filteredNodes.set(this.filterNodes(this.menuNodes(), currentSearchTerm));
-	}
-
-	private filterNodes(nodes: MenuNode[], searchTerm: string): MenuNode[] {
-		const filtered: MenuNode[] = [];
-		const currentLang = this.translocoService.getActiveLang();
-
-		for (const node of nodes) {
-			// Convert label to string for search based on active language
-			const labelText =
-				typeof node.label === 'string' ?
-					node.label
-				:	(node.label as any)?.[currentLang] || (node.label as any)?.tr || (node.label as any)?.en || '';
-
-			const matches = labelText.toLowerCase().includes(searchTerm);
-			let filteredChildren: MenuNode[] = [];
-
-			if (node.children) {
-				filteredChildren = this.filterNodes(node.children, searchTerm);
-			}
-
-			if (matches || filteredChildren.length > 0) {
-				filtered.push({
-					...node,
-					children: filteredChildren.length > 0 ? filteredChildren : node.children,
-					expanded: filteredChildren.length > 0
-				});
-			}
-		}
-
-		return filtered;
-	}
-}
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnDestroy, OnInit, Signal, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { NavigationEnd, Router, RouterLink } from '@angular/router';
+
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { Subscription, filter } from 'rxjs';
+
+import { bridge } from 'aril/boot/bridge';
+import { MenuItemAction, 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';
+
+interface MenuNode {
+	key: string;
+	label: any;
+	icon?: string;
+	routerLink?: string;
+	action?: MenuItemAction;
+	children?: MenuNode[];
+	expanded: boolean;
+	actionLoading?: boolean;
+}
+
+@Component({
+	standalone: true,
+	selector: 'app-static-sidebar',
+	imports: [RouterLink, NgClass, NgTemplateOutlet, ScrollPanelModule, TooltipModule, FormsModule, TranslocoModule],
+	templateUrl: './static-sidebar.component.html',
+	styleUrl: './static-sidebar.component.scss',
+	providers: [TranslateJsonPipe]
+})
+export class StaticSidebarComponent implements OnInit, OnDestroy {
+	activeLang: Signal<string>;
+	menuNodes = signal<MenuNode[]>([]);
+	filteredNodes = signal<MenuNode[]>([]);
+	searchTerm = signal<string>('');
+
+	private routerSubscription: Subscription | null = null;
+	private actionSubscription: Subscription | null = null;
+
+	private readonly MAX_LENGTH = { level0: 25, level1: 20, level2: 16, level3: 13 };
+
+	constructor(
+		private readonly menuService: AppMenuService,
+		private readonly router: Router,
+		private readonly layoutService: LayoutService,
+		private readonly translateJsonPipe: TranslateJsonPipe,
+		private readonly translocoService: TranslocoService,
+		private readonly http: HttpClient
+	) {
+		this.activeLang = toSignal(this.translocoService.langChanges$, { initialValue: 'tr' });
+	}
+
+	get isCollapsed(): boolean {
+		return this.layoutService.isStaticSidebarCollapsed();
+	}
+
+	get topLevelNodes(): MenuNode[] {
+		return this.menuNodes();
+	}
+
+	ngOnInit() {
+		this.buildMenuTree();
+		this.routerSubscription = this.router.events
+			.pipe(filter((event) => event instanceof NavigationEnd))
+			.subscribe(() => this.buildMenuTree());
+	}
+
+	ngOnDestroy() {
+		this.routerSubscription?.unsubscribe();
+		this.actionSubscription?.unsubscribe();
+	}
+
+	isTextTruncated(label: any, lang: string | null, level = 0): boolean {
+		if (!label || !lang || !label[lang]) return false;
+		const text = label[lang];
+		const len = text.length;
+		const limits = [this.MAX_LENGTH.level0, this.MAX_LENGTH.level1, this.MAX_LENGTH.level2, this.MAX_LENGTH.level3];
+		return len > limits[Math.min(level, 3)];
+	}
+
+	isMobile(): boolean {
+		return this.layoutService.isMobile();
+	}
+
+	buildMenuTree() {
+		const menuItems = this.getMenuItems();
+		const nodes = this.convertToMenuNodes(menuItems);
+		this.menuNodes.set(nodes);
+		this.filteredNodes.set([...nodes]);
+		this.expandActiveMenu();
+	}
+
+	private expandActiveMenu() {
+		const nodes = this.menuNodes();
+		this.findAndExpandActiveNode(nodes);
+		this.filteredNodes.set([...this.filteredNodes()]);
+	}
+
+	private findAndExpandActiveNode(nodes: MenuNode[]): MenuNode | null {
+		for (const node of nodes) {
+			if (this.isActiveRouteForNode(node)) {
+				return node;
+			}
+
+			if (node.children && node.children.length > 0) {
+				const activeChild = this.findAndExpandActiveNode(node.children);
+				if (activeChild) {
+					// we find active child and then opened its parent nodes
+					node.expanded = true;
+					return activeChild;
+				}
+			}
+		}
+		return null;
+	}
+
+	convertToMenuNodes(items: PluginMenuItem[], parentKey = ''): MenuNode[] {
+		return items
+			.filter((item) => !item.separator)
+			.map((item, index) => {
+				const key = parentKey ? `${parentKey}-${index}` : `${index}`;
+				const node: MenuNode = {
+					key,
+					label: item.label,
+					icon: item.icon,
+					routerLink: item.action ? undefined : item.routerLink,
+					action: item.action,
+					expanded: false
+				};
+				if (item.items && item.items.length > 0) {
+					node.children = this.convertToMenuNodes(item.items, key);
+				}
+				return node;
+			});
+	}
+
+	getMenuItems(): PluginMenuItem[] {
+		return bridge.isHostMode() ? bridge.hostMenuItems() : this.menuService.menuItems();
+	}
+
+	getLocalText(text: any): string {
+		return this.translateJsonPipe.transform(text);
+	}
+
+	isActiveRouteForNode(node: MenuNode): boolean {
+		if (!node.routerLink) return false;
+		const currentUrl = this.router.url;
+		const hashUrl = currentUrl.indexOf('#') > -1 ? currentUrl.split('#')[1] : currentUrl;
+		if (hashUrl === node.routerLink || hashUrl === '/' + node.routerLink) return true;
+		return (
+			node.routerLink !== '/' &&
+			(hashUrl.startsWith(node.routerLink + '/') || hashUrl.startsWith('/' + node.routerLink + '/'))
+		);
+	}
+
+	// use on collapsed mode
+	isNodeOrChildActive(node: MenuNode): boolean {
+		if (this.isActiveRouteForNode(node)) {
+			return true;
+		}
+		if (node.children && node.children.length > 0) {
+			return node.children.some((child) => this.isNodeOrChildActive(child));
+		}
+
+		return false;
+	}
+
+	isTopLevelNodeActive(node: MenuNode): boolean {
+		return this.isNodeOrChildActive(node);
+	}
+
+	isChildNodeActive(node: MenuNode): boolean {
+		return this.isActiveRouteForNode(node);
+	}
+
+	toggleNode(node: MenuNode, level = 0) {
+		const wasExpanded = node.expanded;
+		if (level === 0) {
+			// Diğer ana menüleri kapat
+			this.closeOtherTopLevelNodes(node);
+		}
+		node.expanded = !wasExpanded;
+
+		this.filteredNodes.set([...this.filteredNodes()]);
+	}
+
+	private closeOtherTopLevelNodes(exceptNode: MenuNode) {
+		const nodes = this.menuNodes();
+		nodes.forEach((node) => {
+			if (node !== exceptNode) {
+				node.expanded = false;
+				this.closeAllChildNodes(node);
+			}
+		});
+	}
+
+	private closeAllChildNodes(node: MenuNode) {
+		if (node.children) {
+			node.children.forEach((child) => {
+				child.expanded = false;
+				this.closeAllChildNodes(child);
+			});
+		}
+	}
+
+	trackByKey(index: number, node: MenuNode): any {
+		return node.key;
+	}
+
+	onMenuItemClick() {
+		if (this.isMobile()) {
+			this.layoutService.closeMobileMenu();
+		}
+
+		this.searchTerm.set('');
+		this.filteredNodes.set(this.menuNodes() || []);
+	}
+
+	onActionItemClick(node: MenuNode, event: Event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (!node.action || node.actionLoading) return;
+
+		// Cancel any previous action request
+		this.actionSubscription?.unsubscribe();
+
+		node.actionLoading = true;
+
+		const request$ =
+			node.action.method === 'GET' ?
+				this.http.get(node.action.url)
+			:	this.http.post(node.action.url, node.action.body ?? {});
+
+		this.actionSubscription = request$.subscribe({
+			next: (response: any) => {
+				node.actionLoading = false;
+				const route = this.buildSuccessRoute(node.action!, response);
+				this.router.navigate([route]);
+				this.onMenuItemClick();
+			},
+			error: () => {
+				node.actionLoading = false;
+			}
+		});
+	}
+
+	private buildSuccessRoute(action: MenuItemAction, 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);
+	}
+
+	onCollapsedItemClick(node: MenuNode) {
+		if (this.isCollapsed) {
+			this.layoutService.onMenuToggle();
+		}
+		this.closeOtherTopLevelNodes(node);
+		if (node.children && node.children.length > 0) {
+			node.expanded = true;
+		}
+		this.filteredNodes.set([...this.filteredNodes()]);
+		if (node.routerLink) {
+			this.onMenuItemClick();
+		}
+	}
+
+	onSearchChange(): void {
+		const currentSearchTerm = this.searchTerm()?.toLowerCase()?.trim();
+		if (!currentSearchTerm) {
+			this.filteredNodes.set(this.menuNodes() || []);
+			return;
+		}
+		this.filteredNodes.set(this.filterNodes(this.menuNodes(), currentSearchTerm));
+	}
+
+	private filterNodes(nodes: MenuNode[], searchTerm: string): MenuNode[] {
+		const filtered: MenuNode[] = [];
+		const currentLang = this.translocoService.getActiveLang();
+
+		for (const node of nodes) {
+			// Convert label to string for search based on active language
+			const labelText =
+				typeof node.label === 'string' ?
+					node.label
+				:	(node.label as any)?.[currentLang] || (node.label as any)?.tr || (node.label as any)?.en || '';
+
+			const matches = labelText.toLowerCase().includes(searchTerm);
+			let filteredChildren: MenuNode[] = [];
+
+			if (node.children) {
+				filteredChildren = this.filterNodes(node.children, searchTerm);
+			}
+
+			if (matches || filteredChildren.length > 0) {
+				filtered.push({
+					...node,
+					children: filteredChildren.length > 0 ? filteredChildren : node.children,
+					expanded: filteredChildren.length > 0
+				});
+			}
+		}
+
+		return filtered;
+	}
+}