Update to new structure

2022-07-22 13:13:50 +03:00
parent 12bc4574d2
commit af7e863f4d
422 changed files with 5238 additions and 209563 deletions
--- a/src/app/layout/app.menuitem.component.ts
+++ b/src/app/layout/app.menuitem.component.ts
@@ -0,0 +1,166 @@
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { MenuService } from './app.menu.service';
+import { LayoutService } from './service/app.layout.service';
+
+@Component({
+    /* tslint:disable:component-selector */
+    selector: '[app-menuitem]',
+    /* tslint:enable:component-selector */
+    template: `
+		<ng-container>
+            <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div>
+			<a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" (click)="itemClick($event)"
+			   [ngClass]="item.class" [attr.target]="item.target" tabindex="0" pRipple>
+				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+				<span class="layout-menuitem-text">{{item.label}}</span>
+				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+			</a>
+			<a *ngIf="(item.routerLink && !item.items) && item.visible !== false" (click)="itemClick($event)" [ngClass]="item.class" 
+			   [routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="item.routerLinkOptions||{exact: true}"
+               [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" 
+               [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" [queryParams]="item.queryParams"
+               [attr.target]="item.target" tabindex="0" pRipple>
+				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+				<span class="layout-menuitem-text">{{item.label}}</span>
+				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+			</a>
+
+			<ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
+				<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+					<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
+				</ng-template>
+			</ul>
+		</ng-container>
+    `,
+    host: {
+        '[class.layout-root-menuitem]': 'root',
+        '[class.active-menuitem]': 'active'
+    },
+    animations: [
+        trigger('children', [
+            state('collapsed', style({
+                height: '0'
+            })),
+            state('expanded', style({
+                height: '*'
+            })),
+            state('hidden', style({
+                display: 'none'
+            })),
+            state('visible', style({
+                display: 'block'
+            })),
+            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+        ])
+    ]
+})
+export class AppMenuitemComponent implements OnInit, OnDestroy {
+
+    @Input() item: any;
+
+    @Input() index!: number;
+
+    @Input() root!: boolean;
+
+    @Input() parentKey!: string;
+
+    active = false;
+
+    menuSourceSubscription: Subscription;
+
+    menuResetSubscription: Subscription;
+
+    key: string = "";
+
+    constructor(public layoutService: LayoutService, private cd: ChangeDetectorRef, public router: Router, private menuService: MenuService) {
+        this.menuSourceSubscription = this.menuService.menuSource$.subscribe(value => {
+            Promise.resolve(null).then(() => {
+                if (value.routeEvent) {
+                    this.active = (value.key === this.key || value.key.startsWith(this.key + '-')) ? true : false;
+                }
+                else {
+                    if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
+                        this.active = false;
+                    }
+                }
+            });
+        });
+
+        this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
+            this.active = false;
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(params => {
+                if (this.item.routerLink) {
+                    this.updateActiveStateFromRoute();
+                }
+            });
+    }
+
+    ngOnInit() {
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+
+        if (this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+    }
+
+    updateActiveStateFromRoute() {
+        let activeRoute = this.router.isActive(this.item.routerLink[0], { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' });
+
+        if (activeRoute) {
+            this.menuService.onMenuStateChange({ key: this.key, routeEvent: true });
+        }
+    }
+
+    itemClick(event: Event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        // execute command
+        if (this.item.command) {
+            this.item.command({ originalEvent: event, item: this.item });
+        }
+
+        // toggle active state
+        if (this.item.items) {
+            this.active = !this.active;
+
+            if (this.root && this.active) {
+                this.layoutService.onOverlaySubmenuOpen();
+            }
+        }
+        else {
+            if (this.layoutService.isMobile()) {
+                this.layoutService.state.staticMenuMobileActive = false;
+            }
+        }
+
+        this.menuService.onMenuStateChange({ key: this.key });
+    }
+
+    get submenuAnimation() {
+        if (this.layoutService.isDesktop() && (this.layoutService.isHorizontal() || this.layoutService.isSlim()))
+            return this.active ? 'visible' : 'hidden';
+        else
+            return this.root ? 'expanded' : (this.active ? 'expanded' : 'collapsed');
+    }
+
+    ngOnDestroy() {
+        if (this.menuSourceSubscription) {
+            this.menuSourceSubscription.unsubscribe();
+        }
+
+        if (this.menuResetSubscription) {
+            this.menuResetSubscription.unsubscribe();
+        }
+    }
+}