การจัดการข้อมูลองค์กร

ทะเบียนกำหนดสิทธิการเข้าใช้งาน

src/app/components/company-components/account-settings/role-permission-config/role-permission-config.component.ts

+import { ChangeDetectorRef, Component } from '@angular/core';
+import { ConfigService } from '@ks89/angular-modal-gallery/lib/services/config.service';
+import { ToastrService } from 'ngx-toastr';
+import { ConfigPermissionModel, MenuBodyModel, MyConfigPermissionModel, MyMenuBodyModel } from 'src/app/shared/model/config-permission.model';
+import { ConfigPermissionService } from 'src/app/shared/services/config-permission.service';
+import { NavService } from 'src/app/shared/services/navservice';
+@Component({
+  selector: 'app-role-permission-config',
+  templateUrl: './role-permission-config.component.html',
+  styleUrls: ['./role-permission-config.component.scss']
+})
+export class RolePermissionConfigComponent {
+  pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนกำหนดสิทธิการเข้าใช้งาน']
+  pageSize = 10
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  search = ""
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
+  currentModal: 'add' | 'edit' | 'delete' | 'updateMenu' = "add"
+
+  setMenuPage = false
+  configPermission: { loading: boolean, select: ConfigPermissionModel, dataList: { check: boolean, data: ConfigPermissionModel }[] } = { loading: false, select: new MyConfigPermissionModel(), dataList: [] }
+  menuItems: MenuBodyModel[] = []
+  menuItemsShow: Map<string, boolean> = new Map();
+  companyId = ""
+  user_level = ""
+  constructor(private toastr: ToastrService,
+    private cdr: ChangeDetectorRef,
+    private navServices: NavService,
+    private configPermissionService: ConfigPermissionService) {
+    this.navServices.items.subscribe((items) => {
+      this.menuItems = items.map(x => new MyMenuBodyModel(x as any))
+    });
+    this.companyId = this.decodeJWT(sessionStorage.getItem("accessToken") || '').companyid
+    this.user_level = this.decodeJWT(sessionStorage.getItem("accessToken") || '').user_level
+  }
+  ngOnInit(): void {
+    this.getConfigList()
+  }
+  decodeJWT(token: string) {
+    let base64Url = token.split('.')[1]; // ดึงส่วนที่เป็น Payload
+    let base64 = base64Url.replace('-', '+').replace('_', '/'); // แก้ไข base64 ให้ถูกต้อง
+    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
+      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+    return JSON.parse(jsonPayload);
+  }
+  getConfigList() {
+    this.configPermission.loading = true
+    this.configPermission.dataList = []
+    this.configPermissionService.getList().subscribe({
+      next: response => {
+        this.configPermission.dataList = response.map(x => ({ check: false, data: new MyConfigPermissionModel(x) }))
+        this.configPermission.loading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
+        this.searchChange()
+        if (this.currentModal == 'updateMenu' && (this.configPermission.select.userLevel == this.user_level)) {
+          window.location.reload();
+        }
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.configPermission.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+
+  configPermissionListFilter() {
+    return this.configPermission.dataList.filter(x => {
+      const data = x.data
+      return data.userLevel.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.edesc.toLowerCase().includes(this.search.toLowerCase())
+    })
+  }
+  selectConfigPermission(data?: ConfigPermissionModel) {
+    this.configPermission.select = new MyConfigPermissionModel(data)
+    const menuBody: MenuBodyModel[] = JSON.parse(JSON.stringify(this.configPermission.select.menuBody))
+    this.configPermission.select.menuBody = this.menuItems.map(x => new MyMenuBodyModel(x))
+    this.clearDataMenu()
+    this.configPermission.select.menuBody.forEach(x => {
+      const configMenu = menuBody.find(y => (y.path + y.title) == ((x.path || '') + x.title))
+      if (configMenu) {
+        x.show = configMenu.show
+        x.children?.forEach(y => {
+          const configChildren = configMenu.children.find(z => (z.path + z.title) == ((y.path || '') + y.title))
+          if (configChildren) {
+            y.show = configChildren.show
+          }
+        })
+      }
+    })
+    this.configPermission.select.menuBody.forEach(x => {
+      this.menuItemsShow.set(x.path + x.title, true)
+    })
+    this.cdr.detectChanges()
+  }
+  toggleMenuItemsShow(key: string) {
+    const currentValue = this.menuItemsShow.get(key) || false;
+    this.menuItemsShow.set(key, !currentValue);
+    this.cdr.detectChanges()
+  }
+
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.configPermissionListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
+  }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.configPermissionListFilter().forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+
+  dataListCheck() {
+    const dataCheck = this.configPermissionListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.configPermission.dataList.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
+
+  clearData() {
+    if (this.currentModal == 'add') {
+      this.selectConfigPermission()
+    } else {
+      this.selectConfigPermission(new MyConfigPermissionModel({ userLevel: this.configPermission.select.userLevel }))
+    }
+  }
+
+  updateConfigPermission(typeApi: 'post' | 'delete') {
+    this.configPermission.loading = true
+    let postBody: ConfigPermissionModel = new MyConfigPermissionModel()
+    let deleteBody: ConfigPermissionModel[] = []
+    switch (this.currentModal) {
+      case ('delete'): {
+        deleteBody = this.configPermission.dataList.filter(x => x.check).map(x => new MyConfigPermissionModel(x.data))
+        break;
+      }
+      default: {
+        postBody = new MyConfigPermissionModel(this.configPermission.select)
+      }
+    }
+    const api = {
+      post: this.configPermissionService.post(postBody),
+      delete: this.configPermissionService.delete(deleteBody)
+    }
+    api[typeApi].subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getConfigList()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.configPermission.loading = false
+        }
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.configPermission.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    })
+  }
+
+  clearDataMenu() {
+    this.configPermission.select.menuBody.forEach(x => {
+      x.show = true
+      x.children?.forEach(y => {
+        y.show = false
+      })
+      this.cdr.detectChanges()
+    })
+  }
+}

src/app/components/dashboard/dashboard-routing.module.ts

@@ -42,6 +42,7 @@ import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/
 import { PmsGradeRegistrationComponent } from '../performance-management-evaluation/pms-grade-registration/pms-pms-grade-registration.component';
 import { DayTypeRegistryComponent } from '../company-components/day-type-registry/day-type-registry.component';
 import { TimeAttendanceComponent } from '../performance-management-evaluation/time-attendance/time-attendance.component';
+import { RolePermissionConfigComponent } from '../company-components/account-settings/role-permission-config/role-permission-config.component';
 
 
 
@@ -91,7 +92,8 @@ const routes: Routes = [
       { path: "setting-performance-evalution", title: 'การตั้งค่า', component: SettingPerformanceEvalutionComponent },
       { path: "self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent },
       { path: "day-type-registry", title: 'ประเมินตนเอง', component: DayTypeRegistryComponent },
-      { path: "time-attendance", title: 'ทะเบียนการประเมินเวลาทำงาน', component: TimeAttendanceComponent }
+      { path: "time-attendance", title: 'ทะเบียนการประเมินเวลาทำงาน', component: TimeAttendanceComponent },
+      { path: "role-permission-config", title: 'ทะเบียนกำหนดสิทธิการเข้าใช้งาน', component: RolePermissionConfigComponent },
     ]
   }
 ];

src/app/components/dashboard/dashboard.module.ts

@@ -160,6 +160,8 @@ import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.
 import { EvaluationIdpService } from 'src/app/shared/services/evaluation-Idp.service';
 import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
 import { PaginationComponent } from '../pagination/pagination.component';
+import { RolePermissionConfigComponent } from '../company-components/account-settings/role-permission-config/role-permission-config.component';
+import { ConfigPermissionService } from 'src/app/shared/services/config-permission.service';
 
 
 export const MY_DATE_FORMATS = {
@@ -286,7 +288,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     PmsSubGradeRegistrationComponent,
     DayTypeRegistryComponent,
     TimeAttendanceComponent,
-    PaginationComponent
+    PaginationComponent,
+    RolePermissionConfigComponent,
   ],
   imports: [
     CommonModule,
@@ -351,6 +354,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     PmsWorkingTimeService,
     EvaluationIdpService,
     EmpStatusService,
+    ConfigPermissionService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/shared/components/sidebar/sidebar.component.html

 <!-- Start::app-sidebar -->
 <aside class="app-sidebar" [ngClass]="{ 'sticky-pin': scrolled }" id="sidebar" style="padding-top: 0;border-width: 0;">
   <!-- Start::main-sidebar-header -->
-  <div class="main-sidebar-header" style="background-color: white;padding-top: 0px;padding-bottom: 0px;padding-left: 5px;padding-right: 5px;">
+  <div class="main-sidebar-header"
+    style="background-color: white;padding-top: 0px;padding-bottom: 0px;padding-left: 5px;padding-right: 5px;">
     <a routerLink="/dashboard/sales" class="header-logo">
       <img src="./assets/img/brand-logos/mySkill-x.png" alt="logo" class="main-logo desktop-logo"
         style="height: 100%;object-fit: contain;" />
@@ -28,7 +29,7 @@
         <ul class="main-menu">
           <!-- 1st Level Menu -->
           <ng-container *ngFor="let menuItem of menuItems">
-            <li class="slide" #activeMenuItems [ngClass]="{'slide__category':menuItem.headTitle,
+            <li *ngIf="menuItem.show" class="slide" #activeMenuItems [ngClass]="{'slide__category':menuItem.headTitle,
                   'slide has-sub':menuItem.title,
                   'open': menuItem.active,
                   'active': menuItem.selected,}">
@@ -47,7 +48,7 @@
                 <span class="side-menu__label">{{menuItem.title}}</span>
               </a>
               <!-- has-Sub -->
-              <a class="side-menu__item with-sub" [routerLink]="menuItem.type ? null: [menuItem.path]"
+              <a class="side-menu__item with-sub cursor-pointer" [routerLink]="menuItem.type ? null: [menuItem.path]"
                 [ngClass]="{active: menuItem.selected}" *ngIf="menuItem.type === 'sub'"
                 (click)="toggleNavActive(menuItem)">
                 <i *ngIf="menuItem.icon" class="side-menu__icon demoicon ri-{{menuItem.icon}}"></i>
@@ -64,21 +65,22 @@
                 [ngStyle]="{ display: menuItem.active ? 'block' : 'none' }">
                 <li class="slide side-menu__label1"><a href="javascript:void(0)">{{menuItem.title}}</a></li>
                 <ng-container *ngFor="let childrenItem of menuItem.children">
-                  <li class="slide" activeMenuItems
+                  <li *ngIf="childrenItem.show" class="slide" activeMenuItems
                     [ngClass]="{'is-expanded': childrenItem.active, active: childrenItem.active, 'sub-slide': childrenItem.type === 'sub'}">
                     <!-- link -->
-                    <a class="side-menu__item" [routerLink]="!childrenItem.type ? null : [childrenItem.path] "
-                      routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"
-                      *ngIf="childrenItem.type === 'link'" (click)="setNavActive(childrenItem)">
+                    <a class="side-menu__item !white-space-normal"
+                      [routerLink]="!childrenItem.type ? null : [childrenItem.path] " routerLinkActive="active"
+                      [routerLinkActiveOptions]="{exact: true}" *ngIf="childrenItem.type === 'link'"
+                      (click)="setNavActive(childrenItem)">
                       {{childrenItem.title}}
                     </a>
                     <!-- empty -->
-                    <a class="side-menu__item" href="javascript:;" *ngIf="childrenItem.type === 'empty' "
-                      (click)="setNavActive(childrenItem)">
+                    <a class="side-menu__item !white-space-normal" href="javascript:;"
+                      *ngIf="childrenItem.type === 'empty' " (click)="setNavActive(childrenItem)">
                       {{childrenItem.title }}
                     </a>
                     <!-- sub -->
-                    <a class="side-menu__item" [ngClass]="{active: childrenItem.selected}"
+                    <a class="side-menu__item !white-space-normal" [ngClass]="{active: childrenItem.selected}"
                       [routerLink]="childrenItem.type ? null : [childrenItem.path]" *ngIf="childrenItem.type === 'sub'"
                       (click)="toggleNavActive(childrenItem)">
                       <span class="">{{childrenItem.title}}</span>

src/app/shared/components/sidebar/sidebar.component.ts

-import { Component, ViewChild, ElementRef, Renderer2, HostListener } from '@angular/core';
+import { Component, ViewChild, ElementRef, Renderer2, HostListener, ChangeDetectorRef } from '@angular/core';
 import { Menu, NavService } from '../../services/navservice';
 import { Subscription, fromEvent } from 'rxjs';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { NavigationEnd, Router } from '@angular/router';
 import { checkHoriMenu, switcherArrowFn } from './sidebar';
+import { ConfigPermissionService } from '../../services/config-permission.service';
+import { ConfigPermissionModel, MenuBodyModel, MyConfigPermissionModel } from '../../model/config-permission.model';
 
 @Component({
   selector: 'app-sidebar',
@@ -58,31 +60,36 @@ export class SidebarComponent {
   options = { autoHide: false, scrollbarMinSize: 100 };
   icon!: SafeHtml;
 
-  public menuItems!: Menu[];
+  public menuItems: Menu[] = [];
   public menuitemsSubscribe$!: Subscription;
+  user_level = ""
+  configPermission: { loading: boolean, data: ConfigPermissionModel } = { loading: false, data: new MyConfigPermissionModel() }
 
   constructor(
     private navServices: NavService,
     private sanitizer: DomSanitizer,
     public router: Router,
     public renderer: Renderer2,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private configPermissionService: ConfigPermissionService,
+    private cdr: ChangeDetectorRef,
   ) {
     this.screenWidth = window.innerWidth;
+    this.user_level = this.decodeJWT(sessionStorage.getItem("accessToken") || '').user_level
   }
 
   ngOnInit() {
     this.menuitemsSubscribe$ = this.navServices.items.subscribe((items) => {
       this.menuItems = items;
     });
-
+    this.getConfigPermissionByUserLevel()
     this.ParentActive();
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
         this.ParentActive();
       }
     });
-    if(window.innerWidth <= 992){
+    if (window.innerWidth <= 992) {
       document.documentElement?.setAttribute('toggled', 'close');
     }
     const WindowResize = fromEvent(window, 'resize');
@@ -98,11 +105,68 @@ export class SidebarComponent {
     if (document.documentElement.getAttribute('data-nav-layout') == 'horizontal' && window.innerWidth > 992) {
       this.closeNavActive()
     }
+
+
+  }
+
+  public getConfigPermissionByUserLevel() {
+    this.configPermission.loading = true
+    this.configPermissionService.getByUserLevel(this.user_level).subscribe({
+      next: response => {
+        this.configPermission.data = new MyConfigPermissionModel(response)
+        this.menuItems.forEach(x => {
+          // เปิดทุกเมนู
+          // x.show = true
+          // x.children?.forEach(y => {
+          //   y.show = true
+          // })
+
+          // เปิดตาม config
+          const configMenu = this.configPermission.data.menuBody.find(y => (y.path + y.title) == ((x.path || '') + x.title))
+          if (configMenu) {
+            x.show = configMenu.show
+            x.children?.forEach(y => {
+              const configChildren = configMenu.children.find(z => (z.path + z.title) == ((y.path || '') + y.title))
+              if (configChildren) {
+                y.show = configChildren.show
+              }
+            })
+          }
+        })
+        let path404check = '/404page'
+        this.menuItems.forEach(x => {
+          if (x.show && path404check == '/404page') {
+            x.children?.forEach(y => {
+              if (y.show) {
+                path404check = y.path || '404page'
+              }
+            })
+          }
+        })
+        this.router.navigate([path404check]);
+        this.configPermission.loading = false
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.configPermission.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+
+  decodeJWT(token: string) {
+    let base64Url = token.split('.')[1]; // ดึงส่วนที่เป็น Payload
+    let base64 = base64Url.replace('-', '+').replace('_', '/'); // แก้ไข base64 ให้ถูกต้อง
+    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
+      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+    return JSON.parse(jsonPayload);
   }
 
+
+
   //Active Nav State
   setNavActive(item: any) {
-    this.menuItems?.filter((menuItem) => {
+    this.menuItems?.filter((menuItem: Menu) => {
       if (menuItem !== item) {
         menuItem.active = false;
         this.navServices.collapseSidebar = false;
@@ -241,7 +305,7 @@ export class SidebarComponent {
     if (!this.eventTriggered && this.screenWidth <= 992) {
       document.documentElement?.setAttribute('toggled', 'close')
 
-      
+
       // Trigger your event or perform any action here
       this.eventTriggered = true; // Set the flag to true to prevent further triggering
     } else if (this.screenWidth > 992) {

src/app/shared/model/config-permission.model.ts

+export interface ConfigPermissionModel {
+    userLevel: string
+    tdesc: string
+    edesc: string
+    companyId: string
+    menuBody: MenuBodyModel[]
+}
+
+
+export class MyConfigPermissionModel implements ConfigPermissionModel {
+    userLevel: string
+    tdesc: string
+    edesc: string
+    companyId: string
+    menuBody: MenuBodyModel[]
+    constructor(data?: Partial<ConfigPermissionModel>) {
+        this.userLevel = data?.userLevel || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+        this.companyId = data?.companyId || ""
+        this.menuBody = data?.menuBody?.map(x => new MyMenuBodyModel(x)) || []
+    }
+}
+
+export interface MenuBodyModel {
+    path: string
+    show: boolean
+    type: string
+    title: string
+    active: boolean
+    children: {
+        path: string
+        show: boolean
+        type: string
+        title: string
+    }[]
+    selected: boolean
+    headTitle?: string;
+    headTitle2?: string;
+    icon?: string;
+    badgeValue?: string;
+    badgeClass?: string;
+    bookmark?: boolean;
+    children2?: {
+        path: string
+        show: boolean
+        type: string
+        title: string
+    }[];
+    Menusub?: boolean;
+    target?: boolean;
+}
+
+
+export class MyMenuBodyModel implements MenuBodyModel {
+    path: string
+    show: boolean
+    type: string
+    title: string
+    active: boolean
+    children: {
+        path: string
+        show: boolean
+        type: string
+        title: string
+    }[]
+    selected: boolean
+    headTitle?: string;
+    headTitle2?: string;
+    icon?: string;
+    badgeValue?: string;
+    badgeClass?: string;
+    bookmark?: boolean;
+    children2?: {
+        path: string
+        show: boolean
+        type: string
+        title: string
+    }[];
+    Menusub?: boolean;
+    target?: boolean;
+    constructor(data?: Partial<MenuBodyModel>) {
+        this.path = data?.path || ''
+        this.show = data?.show ?? false
+        this.type = data?.type || ""
+        this.title = data?.title || ""
+        this.active = data?.active ?? false
+        this.children = data?.children?.map(x => ({
+            path: x.path || '',
+            show: x.show ?? false,
+            type: x.type || '',
+            title: x.title || ''
+        })) || []
+        this.selected = data?.selected ?? false
+        // this.headTitle = data?.headTitle || ""
+        // this.headTitle2 = data?.headTitle2 || ""
+        // this.icon = data?.icon || ""
+        // this.badgeValue = data?.badgeValue || ""
+        // this.badgeClass = data?.badgeClass || ""
+        // this.bookmark = data?.bookmark ?? false
+        // this.children2 = data?.children2?.map(x => ({
+        //     path: x.path || '',
+        //     show: x.show ?? false,
+        //     type: x.type || '',
+        //     title: x.title || ''
+        // })) || []
+        // this.Menusub = data?.Menusub ?? false
+        // this.target = data?.target ?? false
+    }
+}
+

src/app/shared/services/config-permission.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { AlertModel } from '../model/alert.model';
+import { ConfigPermissionModel } from '../model/config-permission.model';
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigPermissionService {
+  api = "/config"
+  urlApi = environment.baseUrl + this.api
+  constructor(private http: HttpClient) {
+  }
+  getByUserLevel(userLevel: string): Observable<ConfigPermissionModel> {
+    return this.http.get<ConfigPermissionModel>(this.urlApi + "/permission-view-screen/" + userLevel)
+  }
+  getList(): Observable<ConfigPermissionModel[]> {
+    return this.http.get<ConfigPermissionModel[]>(this.urlApi + "/permission-view-screen/lists")
+  }
+  post(body: ConfigPermissionModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi + '/permission-view-screen', body)
+  }
+  delete(body: ConfigPermissionModel[]): Observable<AlertModel> {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    };
+    return this.http.delete<AlertModel>(this.urlApi + "/permission-view-screen", options)
+  }
+}
\ No newline at end of file

src/app/shared/services/navservice.ts

@@ -2,6 +2,7 @@ import { Injectable, OnDestroy } from '@angular/core';
 import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
 import { takeUntil, debounceTime } from 'rxjs/operators';
 import { Router } from '@angular/router';
+import { MenuBodyModel, MyMenuBodyModel } from '../model/config-permission.model';
 // Menu
 export interface Menu {
   headTitle?: string;
@@ -19,6 +20,7 @@ export interface Menu {
   children2?: Menu[];
   Menusub?: boolean;
   target?: boolean;
+  show?: boolean
 }
 
 @Injectable({
@@ -91,10 +93,11 @@ export class NavService implements OnDestroy {
       type: 'sub',
       selected: false,
       active: false,
-      path: '/supervisor-evaluation',
+      path: '',
+      show: false,
       children: [
-        { path: '/self-evaluation', title: 'ประเมินตนเอง', type: 'link' },
-        { path: '/supervisor-evaluation', title: 'ประเมินโดยหัวหน้า', type: 'link' },
+        { path: '/self-evaluation', title: 'ประเมินตนเอง', type: 'link', show: false },
+        { path: '/supervisor-evaluation', title: 'ประเมินโดยหัวหน้า', type: 'link', show: false },
       ],
     },
     {
@@ -102,12 +105,15 @@ export class NavService implements OnDestroy {
       type: 'sub',
       selected: false,
       active: false,
+      path: '',
+      show: false,
       children: [
-        { path: '/company-registration', title: 'ทะเบียนบริษัท', type: 'link' },
-        { path: '/job-description', title: 'ข้อมูลลักษณะงาน', type: 'link' },
-        { path: '/employee-registration', title: 'ทะเบียนพนักงาน', type: 'link' },
-        { path: '/day-type-registry', title: 'ทะเบียนประเภทวัน', type: 'link' },
-        { path: '/account-settings', title: 'ตั้งค่าชื่อผู้ใช้', type: 'link' },
+        { path: '/company-registration', title: 'ทะเบียนบริษัท', type: 'link', show: false },
+        { path: '/job-description', title: 'ข้อมูลลักษณะงาน', type: 'link', show: false },
+        { path: '/employee-registration', title: 'ทะเบียนพนักงาน', type: 'link', show: false },
+        { path: '/day-type-registry', title: 'ทะเบียนประเภทวัน', type: 'link', show: false },
+        { path: '/account-settings', title: 'ตั้งค่าชื่อผู้ใช้', type: 'link', show: false },
+        { path: '/role-permission-config', title: 'ทะเบียนกำหนดสิทธิการเข้าใช้งาน', type: 'link', show: false },
       ],
     },
     {
@@ -115,13 +121,15 @@ export class NavService implements OnDestroy {
       type: 'sub',
       selected: false,
       active: false,
+      path: '',
+      show: false,
       children: [
-        { path: '/job-detail-management', title: 'ข้อมูลทั่วไป', type: 'link' },
-        { path: '/command-structure', title: 'โครงสร้างสายการบังคับบัญชา', type: 'link' },
-        { path: '/job-detail', title: 'รายละเอียดของงาน', type: 'link' },
-        { path: '/job-qualifications', title: 'คุณสมบัติที่จำเป็น', type: 'link' },
-        { path: '/job-competency', title: 'ความสามารถในตำเเหน่งงาน', type: 'link' },
-        { path: '/job-position-indicators', title: 'ตัวชี้วัดของตำแหน่งงาน', type: 'link' },
+        { path: '/job-detail-management', title: 'ข้อมูลทั่วไป', type: 'link', show: false },
+        { path: '/command-structure', title: 'โครงสร้างสายการบังคับบัญชา', type: 'link', show: false },
+        { path: '/job-detail', title: 'รายละเอียดของงาน', type: 'link', show: false },
+        { path: '/job-qualifications', title: 'คุณสมบัติที่จำเป็น', type: 'link', show: false },
+        { path: '/job-competency', title: 'ความสามารถในตำเเหน่งงาน', type: 'link', show: false },
+        { path: '/job-position-indicators', title: 'ตัวชี้วัดของตำแหน่งงาน', type: 'link', show: false },
       ],
     },
 
@@ -130,16 +138,17 @@ export class NavService implements OnDestroy {
       type: 'sub',
       selected: false,
       active: false,
-      path: '/name-registration',
+      path: '',
+      show: false,
       children: [
-        { path: '/name-registration', title: 'ทะเบียนกำหนดชื่อ', type: 'link' },
-        { path: '/grade-registration', title: 'ทะเบียนเกรด', type: 'link' },
-        { path: '/tool-register', title: 'ทะเบียนเครื่องมือ', type: 'link' },
-        { path: '/course-registration', title: 'ทะเบียนหลักสูตร', type: 'link' },
-        { path: '/idp-development-plan', title: 'แผนพัฒนา IDP', type: 'link' },
-        { path: '/competency-management', title: 'การจัดการสมรรถนะ', type: 'link' },
-        { path: '/evaluation-cycle-manager', title: 'การจัดการรอบการประเมิน', type: 'link' },
-        { path: '/setting-competency', title: 'การตั้งค่า', type: 'link' }
+        { path: '/name-registration', title: 'ทะเบียนกำหนดชื่อ', type: 'link', show: false },
+        { path: '/grade-registration', title: 'ทะเบียนเกรด', type: 'link', show: false },
+        { path: '/tool-register', title: 'ทะเบียนเครื่องมือ', type: 'link', show: false },
+        { path: '/course-registration', title: 'ทะเบียนหลักสูตร', type: 'link', show: false },
+        { path: '/idp-development-plan', title: 'แผนพัฒนา IDP', type: 'link', show: false },
+        { path: '/competency-management', title: 'การจัดการสมรรถนะ', type: 'link', show: false },
+        { path: '/evaluation-cycle-manager', title: 'การจัดการรอบการประเมิน', type: 'link', show: false },
+        { path: '/setting-competency', title: 'การตั้งค่า', type: 'link', show: false }
       ],
     },
     {
@@ -147,19 +156,18 @@ export class NavService implements OnDestroy {
       type: 'sub',
       selected: false,
       active: false,
-      path: '/name-registration-perfomance',
+      path: '',
+      show: false,
       children: [
-        { path: '/name-registration-perfomance', title: 'ทะเบียนกำหนดชื่อ', type: 'link' },
-        { path: '/grade-registration-sub', title: 'ทะเบียนเกรด', type: 'link' },
-        { path: '/time-attendance', title: 'ทะเบียนการประเมินเวลาทำงาน', type: 'link' },
-        { path: '/evaluation-factors', title: 'ปัจจัยการประเมินผล', type: 'link' },
-        { path: '/assessment-management', title: 'การจัดการการประเมิน', type: 'link' },
-        { path: '/evaluation-cycle-performance', title: 'รอบการประเมิน', type: 'link' },
-        { path: '/setting-performance-evalution', title: 'การตั้งค่า', type: 'link' }
+        { path: '/name-registration-perfomance', title: 'ทะเบียนกำหนดชื่อ', type: 'link', show: false },
+        { path: '/grade-registration-sub', title: 'ทะเบียนเกรด', type: 'link', show: false },
+        { path: '/time-attendance', title: 'ทะเบียนการประเมินเวลาทำงาน', type: 'link', show: false },
+        { path: '/evaluation-factors', title: 'ปัจจัยการประเมินผล', type: 'link', show: false },
+        { path: '/assessment-management', title: 'การจัดการการประเมิน', type: 'link', show: false },
+        { path: '/evaluation-cycle-performance', title: 'รอบการประเมิน', type: 'link', show: false },
+        { path: '/setting-performance-evalution', title: 'การตั้งค่า', type: 'link', show: false }
       ],
     },
-
-
   ];
   // Array
   items = new BehaviorSubject<Menu[]>(this.MENUITEMS);

src/app/shared/sharedmodule.ts

 import { RouterModule } from '@angular/router';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { CommonModule } from '@angular/common';
-import {  NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { FullLayoutComponent } from './layout-components/full-layout/full-layout.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SimplebarAngularModule } from 'simplebar-angular';
@@ -16,6 +16,9 @@ import { HoverEffectSidebarDirective } from './directives/hover-effect-sidebar.d
 import { SidemenuToggleDirective } from './directives/sidemenuToggle';
 import { AuthService } from './services/auth.service';
 import { ToggleThemeDirective } from './directives/toggle-theme.directive';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { ConfigPermissionService } from './services/config-permission.service';
+import { HttpRequestInterceptor } from './services/http-request.interceptor';
 
 @NgModule({
   declarations: [
@@ -48,6 +51,13 @@ import { ToggleThemeDirective } from './directives/toggle-theme.directive';
     FooterComponent,
     SidemenuToggleDirective,
   ],
-  providers: [AuthService],
+  providers: [AuthService,
+    ConfigPermissionService,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: HttpRequestInterceptor,
+      multi: true,
+    },
+  ],
 })
-export class SharedModule {}
+export class SharedModule { }

src/assets/css/style.css

@@ -25008,4 +25008,12 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
 }
 \!.bg-white {
   background-color: white !important;
+}
+
+.align-self-center{
+  align-self: center
+}
+
+.user-select-none{
+  user-select: none;
 }
\ No newline at end of file