[init] init version

src/app/pages/@layouts/layouts.component.ts

@@ -0,0 +1,127 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AppService } from '../../app.service';
+import { MENU } from "../../@config/menus";
+import { lastValueFrom } from "rxjs";
+import { API } from "../../@config/app";
+import { environment } from 'src/environments/environment';
+
+@Component({
+    selector: 'app-pages-layouts',
+    templateUrl: './layouts.component.html',
+    styles: [],
+})
+export class PagesLayoutsComponent implements OnInit {
+
+    menus = MENU;
+    isToggleSidebar = false;
+    innerWidth: any;
+    auth: any = {};
+    isCollapsed: any = [];
+    breadcrumb: any = [];
+    permissionCheck = false;
+    permission: any = [];
+
+    constructor(
+        private app: AppService,
+        private router: Router,
+        private activatedRoute: ActivatedRoute,
+        public changeDetectorRef: ChangeDetectorRef,
+    ) {
+
+    }
+
+    async ngOnInit() {
+        this.onCollapsed();
+        this.getBreadcrumb();
+        await this.initAuth();
+        this.changeDetectorRef.markForCheck()
+    }
+    async initAuth() {
+        this.auth = this.app.auth();
+
+        if (!this.permissionCheck) {
+            const users = await lastValueFrom(this.app.get(`${API.users}/getById/${this.auth.id}`));
+            this.permission = users.permission;
+            this.permissionCheck = true;
+        }
+
+    }
+
+    roleCheck(perm: string){
+        if(!environment.production) return true
+        return this.permission.includes(perm)
+    }
+
+    getBreadcrumb() {
+        this.breadcrumb = [];
+        let router: any = this.router.url;
+        router = router.split('/');
+        this.mapBreadcrumb(router, this.menus)
+        this.changeDetectorRef.markForCheck()
+
+    }
+
+    mapBreadcrumb(router: any, items: any) {
+        items.map((item: any) => {
+            this.addItemBreadcrumb(router, item);
+            if (item.children) this.mapBreadcrumb(router, item.children);
+
+        });
+    }
+
+    addItemBreadcrumb(router: any, item: any) {
+
+        const data = {
+            name: item.name,
+            link: item.link,
+        }
+        if (router[2]) {
+            if (item.link === router[2]) this.breadcrumb.push(data);
+        }
+        if (router[3]) {
+            if (item.link === `${router[2]}/${router[3]}`) this.breadcrumb.push(data);
+        }
+        if (router[4]) {
+            if (item.link === `${router[2]}/${router[3]}/${router[4]}`) this.breadcrumb.push(data);
+        }
+        if (router[5]) {
+            if (item.link === `${router[2]}/${router[3]}/${router[4]}/${router[5]}`) this.breadcrumb.push(data);
+        }
+        if (router[6]) {
+            if (item.link === `${router[2]}/${router[3]}/${router[4]}/${router[5]}/${router[6]}`) this.breadcrumb.push(data);
+        }
+    }
+
+    onCollapsed() {
+        let router: any = this.router.url;
+        router = router.split('/');
+        this.menus.forEach((item: any, i: number) => {
+            // item.collapsed = false;
+            if (item.type === 'collapsable') {
+                if (router.includes(item.link)) {
+                    item.collapsed = true;
+                }
+            }
+        });
+    }
+
+    logout() {
+        this.app.logout();
+        return this.router.navigate(['/auth']);
+    }
+
+
+    toggleSidebar() {
+        this.isToggleSidebar = !this.isToggleSidebar;
+    }
+
+    closeSidebar() {
+        this.isToggleSidebar = false;
+    }
+
+    onDeactivate() {
+        this.ngOnInit();
+    }
+}
+