Toggle open/close menuAppmodule by employeeid

src/app/portal-manage/models/permission/permission.model.ts

@@ -90,7 +90,7 @@ export interface AppModule {
   description: string;
   icon: string;
   path: string;
-  isVisible: boolean;
+  isActive: boolean;
   category: 'applications' | 'services' | 'system';
   permissions: {
     view: boolean;

src/app/portal-manage/permission-management/permission-appmodule/permission-appmodule.component.ts

@@ -58,7 +58,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการทรัพยากรบุคคลขั้นสูง',
           icon: './assets/images/logoallHR/myhr-plus.jpg',
           path: '/portal-manage/myhr-plus',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -69,7 +69,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการทรัพยากรบุคคลพื้นฐาน',
           icon: './assets/images/logoallHR/myHR-Lite-logo-new.png',
           path: '/portal-manage/myhr-lite',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -80,7 +80,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการเวลาและลงเวลา',
           icon: './assets/images/logoallHR/zeemePlus.png',
           path: '/portal-manage/zeeme',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -91,7 +91,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการใบหน้าและความปลอดภัย',
           icon: './assets/images/logoallHR/logo_myface.png',
           path: '/portal-manage/myface',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -102,7 +102,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการการเรียนรู้และฝึกอบรม',
           icon: './assets/images/logoallHR/mylearn-logo.png',
           path: '/portal-manage/mylearn',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -113,7 +113,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการงานและโครงการ',
           icon: './assets/images/logoallHR/logo_myjob.png',
           path: '/portal-manage/myjob',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -124,7 +124,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการทักษะและความสามารถ',
           icon: './assets/images/logoallHR/mySkill-x.png',
           path: '/portal-manage/myskill-x',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -136,7 +136,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจองห้องประชุม',
           icon: './assets/images/logoallHR/booking.png',
           path: '/portal-manage/meeting-booking',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -148,7 +148,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการสิทธิ์และบทบาท',
           icon: './assets/images/logoallHR/permission.png',
           path: '/portal-manage/permission-management',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -161,7 +161,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการแดชบอร์ด และคลังวิดเจ็ต',
           icon: './assets/images/logoallHR/widget.webp',
           path: '/portal-manage/dashboard-management',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         },
@@ -172,7 +172,7 @@ export class PermissionAppmoduleComponent implements OnInit {
           description: 'ระบบจัดการเอกสารและเมนูกลางสำหรับแอปพลิเคชันต่างๆ',
           icon: './assets/images/logoallHR/portal.webp',
           path: '/portal-manage/my-portal',
-          isVisible: true,
+          isActive: true,
           category: 'applications',
           permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
         }
@@ -185,8 +185,8 @@ export class PermissionAppmoduleComponent implements OnInit {
 
     onToggleAppVisibility(app: AppModule, event: Event) {
       const input = event.target as HTMLInputElement;
-      app.isVisible = input.checked;
-      console.log(`Toggled ${app.name}: ${app.isVisible}`);
+      app.isActive = input.checked;
+      console.log(`Toggled ${app.name}: ${app.isActive}`);
       // Here you would typically call a service to save this change
     }
 

src/app/portal-manage/permission-management/permission-employeelist/permission-employeelist.component.html

@@ -93,8 +93,8 @@
                 </td> -->
                 <td>
                   <div class="flex flex-row items-center !gap-2 ">
-                    <a aria-label="anchor" [routerLink]="['../permission-menumodule']"
-                      class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
+                    <a aria-label="anchor" (click)="goToMenuModule(item)"
+                      class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info cursor-pointer">
                       <i class="ri-pencil-line"></i>
                     </a>
                   </div>

src/app/portal-manage/permission-management/permission-employeelist/permission-employeelist.component.ts

 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { SharedModule } from '../../../shared/shared.module';
@@ -88,7 +88,9 @@ export class PermissionEmployeelistComponent implements OnInit {
     private permissionService: PermissionService,
     private userService: UserService,
     public translate: TranslateService,
-    private tokenService: TokenService
+    private tokenService: TokenService,
+    private router: Router,
+    private route: ActivatedRoute
   ) {
     // this.uploadConfig();
   }
@@ -246,4 +248,10 @@ export class PermissionEmployeelistComponent implements OnInit {
     }
   }
 
+  goToMenuModule(item: PermissionModel2) {
+    this.router.navigate(['../permission-menumodule', item.employeeId], { 
+      relativeTo: this.route
+    });
+  }
+
 }

src/app/portal-manage/permission-management/permission-employeelist/permission-menumodule/permission-menumodule.component.html

 <app-page-header [title]="'เลือกเมนู'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'จัดการสิทธิ์พนักงาน'" [title1Link]="'../permission-employeelist'" [title2]="'แอพลิเคชันที่เข้าถึงได้'"></app-page-header>
 
 <div *ngFor="let category of appCategories$ | async" class="mb-12">
+  <div class="flex items-center justify-between space-x-4">
     <div class="flex items-center space-x-4">
       <div
         class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center text-white text-xl shadow-lg"
@@ -17,6 +18,13 @@
       </div>
     </div>
 
+    <!-- Save/Cancel Buttons -->
+    <div *ngIf="hasChanges" class="flex items-center space-x-2">
+      <button (click)="cancelChanges()" type="button" class="ti-btn ti-btn-light"><i class="ri-close-circle-line me-2"></i>ยกเลิก</button>
+      <button (click)="saveChanges()" type="button" class="ti-btn ti-btn-primary-full"><i class="ri-save-line me-2"></i>บันทึก</button>
+    </div>
+  </div>
+
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-6">
     <div
       *ngFor="let app of category.apps; let i = index"
@@ -25,9 +33,9 @@
       <!-- Toggle Switch -->
       <div class="absolute top-4 right-4 z-10" (click)="$event.stopPropagation()">
         <label class="inline-flex items-center cursor-pointer">
-          <input type="checkbox" [checked]="app.isVisible" (change)="onToggleAppVisibility(app, $event)" class="sr-only peer">
+          <input type="checkbox" [checked]="app.isActive" (change)="onToggleAppVisibility(app, $event)" class="sr-only peer">
           <div class="relative w-11 h-6 bg-gray-300 rounded-full peer peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600"
-            [ngStyle]="{ 'background-color': app.isVisible ? '#3b82f6' : '#d1d5db' }"></div>
+            [ngStyle]="{ 'background-color': app.isActive ? '#3b82f6' : '#d1d5db' }"></div>
         </label>
       </div>
 

src/app/portal-manage/permission-management/permission-management.routes.ts

@@ -14,7 +14,7 @@ export const PERMISSION_ROUTES: Routes = [
           import('./permission-employeelist/permission-employeelist.component').then((m) => m.PermissionEmployeelistComponent),
       },
       {
-        path: 'permission-menumodule',
+        path: 'permission-menumodule/:empid',
         loadComponent: () =>
           import('./permission-employeelist/permission-menumodule/permission-menumodule.component').then((m) => m.PermissionMenumoduleComponent),
       },

src/app/portal-manage/services/permission/permission.service.ts

@@ -6,7 +6,7 @@ import  { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { map, tap } from 'rxjs/operators';
-import {PermissionModel} from './../../models/permission/permission.model';
+import {ManageEmployeeModule, PermissionModel} from './../../models/permission/permission.model';
 
 
 @Injectable({
@@ -30,4 +30,14 @@ constructor(
     return this.http.get<PermissionModel>(url);
   }
 
+  getAppmodule(empid: string): Observable<ManageEmployeeModule> {
+    const url = `${environment.url}management-permission/app-module?employeeid=${empid}`;
+    return this.http.get<ManageEmployeeModule>(url);
+  }
+
+  postAppmodule(payload: { employeeId: string | null; modules: any }): Observable<ManageEmployeeModule> {
+    const url = `${environment.url}management-permission/app-module`;
+    return this.http.post<ManageEmployeeModule>(url, payload);
+  }
+
 }