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 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"
-    >
-      <i [class]="category.icon"></i>
-    </div>
-    <div>
-      <h2
-        class="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-2"
+  <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"
       >
-        {{ category.name }}
-      </h2>
-      <p class="text-gray-600">{{ category.description }}</p>
+        <i [class]="category.icon"></i>
+      </div>
+      <div>
+        <h2
+          class="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-2"
+        >
+          {{ category.name }}
+        </h2>
+        <p class="text-gray-600">{{ category.description }}</p>
+      </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>
 
@@ -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-employeelist/permission-menumodule/permission-menumodule.component.ts

 import { Component, OnInit } from '@angular/core';
-import { Router, RouterLink, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { Observable, of } from 'rxjs';
+import { Observable, of, switchMap, map, BehaviorSubject } from 'rxjs';
 import { SharedModule } from '../../../../shared/shared.module';
 import { TokenService } from '../../../../shared/services/token.service';
-import { AppModule, AppCategory, ManageEmployeeModule } from '../../../models/permission/permission.model';
+import { AppModule, AppCategory, ManageEmployeeModule, Module } from '../../../models/permission/permission.model';
+import { PermissionService } from '../../../services/permission/permission.service';
+import swal from 'sweetalert';
 
 @Component({
   selector: 'app-permission-menumodule',
@@ -14,178 +16,238 @@ import { AppModule, AppCategory, ManageEmployeeModule } from '../../../models/pe
   imports: [RouterModule, CommonModule, SharedModule]
 })
 export class PermissionMenumoduleComponent implements OnInit {
-  accessibleApps$: Observable<AppModule[]> | undefined;
-  appCategories$: Observable<AppCategory[]> | undefined;
+  private categoriesSubject = new BehaviorSubject<AppCategory[]>([]);
+  appCategories$: Observable<AppCategory[]> = this.categoriesSubject.asObservable();
+
+  employeeId: string | null = null;
+  hasChanges = false;
+
+  private allModules: AppModule[] = [];
+  private originalState: string = '[]';
+
   constructor(
     private tokenService: TokenService,
-    private router: Router
-  ) { }
+    private router: Router,
+    private route: ActivatedRoute,
+    private permissionService: PermissionService
+  ) {
+    this.allModules = this.getAppModules();
+  }
 
   ngOnInit() {
-    this.loadAppCategories();
-  }
-  private loadAppCategories(): void {
-    this.appCategories$ = of(this.getAppCategories());
-  }
-  private loadAccessibleApps(): void {
-    // แสดงทุกเมนูก่อน โดยไม่ต้องตรวจสอบสิทธิ์
-    this.accessibleApps$ = of(this.getAppModules());
+    this.route.paramMap.pipe(
+      switchMap(params => {
+        this.employeeId = params.get('empid');
+        if (this.employeeId) {
+          return this.permissionService.getAppmodule(this.employeeId);
+        } else {
+          return of({ employeeId: '', modules: [] });
+        }
+      })
+    ).subscribe(employeeModule => {
+      this.updateDisplayedApps(employeeModule);
+    });
   }
 
-  private getAppCategories(): AppCategory[] {
-    const apps = this.getAppModules();
+  private updateDisplayedApps(employeeModule: ManageEmployeeModule): void {
+    const employeeApps = new Map(employeeModule.modules.map(m => [m.app, m.isActive]));
+    const displayedApps = this.allModules.map(app => ({
+      ...app,
+      isActive: employeeApps.get(app.name) ?? false
+    }));
+
+    this.originalState = JSON.stringify(displayedApps.map(a => ({app: a.name, isActive: a.isActive})).sort((a, b) => a.app.localeCompare(b.app)));
+    this.hasChanges = false;
+    this.categoriesSubject.next(this.buildCategories(displayedApps));
+  }
 
+  private buildCategories(apps: AppModule[]): AppCategory[] {
     return [
       {
         id: 'applications',
         name: 'แอปพลิเคชันที่เข้าถึงได้',
         description: 'แอปพลิเคชันหลักสำหรับการทำงานประจำวัน',
         icon: 'ri-apps-line',
-        apps: apps.filter(app => app.category === 'applications')
+        apps: apps
       },
     ];
   }
 
+  onToggleAppVisibility(app: AppModule, event: Event): void {
+    const input = event.target as HTMLInputElement;
+    app.isActive = input.checked;
+
+    const currentCategories = this.categoriesSubject.getValue();
+    const currentApps = currentCategories.flatMap(c => c.apps);
+    const currentState = JSON.stringify(currentApps.map(a => ({app: a.name, isActive: a.isActive})).sort((a, b) => a.app.localeCompare(b.app)));
+
+    this.hasChanges = currentState !== this.originalState;
+  }
+
+  saveChanges(): void {
+    if (!this.employeeId || !this.hasChanges) return;
+
+    const currentCategories = this.categoriesSubject.getValue();
+    const modules: Module[] = currentCategories.flatMap(c => c.apps).map(a => ({
+      app: a.name,
+      isActive: a.isActive
+    }));
+
+    const payload = { 
+      employeeId: this.employeeId,
+      modules: modules
+    };
+
+    this.permissionService.postAppmodule(payload).subscribe({
+      next: (res) => {
+        swal('สำเร็จ', 'บันทึกการเปลี่ยนแปลงสิทธิ์เรียบร้อยแล้ว', 'success');
+        const displayedApps = currentCategories.flatMap(c => c.apps);
+        this.originalState = JSON.stringify(displayedApps.map(a => ({app: a.name, isActive: a.isActive})).sort((a, b) => a.app.localeCompare(b.app)));
+        this.hasChanges = false;
+      },
+      error: (err) => {
+        console.error('Save failed', err);
+        swal('ผิดพลาด', 'ไม่สามารถบันทึกการเปลี่ยนแปลงได้', 'error');
+      }
+    });
+  }
+
+  cancelChanges(): void {
+    // Re-fetch data to revert all changes
+    if(this.employeeId) {
+        this.permissionService.getAppmodule(this.employeeId).subscribe(employeeModule => {
+            this.updateDisplayedApps(employeeModule);
+        });
+    }
+  }
+
   private getAppModules(): AppModule[] {
     return [
-      // แอปพลิเคชันที่เข้าถึงได้
       {
         id: 'myhr-plus',
-        name: 'myhr-plus',
+        name: 'MYHR',
         displayName: 'myHR-Plus',
         description: 'ระบบจัดการทรัพยากรบุคคลขั้นสูง',
         icon: './assets/images/logoallHR/myhr-plus.jpg',
         path: '/portal-manage/myhr-plus',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
       {
         id: 'myhr-lite',
-        name: 'myhr-lite',
+        name: 'MYHR-LITE',
         displayName: 'myHR-Lite',
         description: 'ระบบจัดการทรัพยากรบุคคลพื้นฐาน',
         icon: './assets/images/logoallHR/myHR-Lite-logo-new.png',
         path: '/portal-manage/myhr-lite',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
       {
         id: 'zeeme',
-        name: 'zeeme',
+        name: 'ZEESERVER',
         displayName: 'Zeeme Plus',
         description: 'ระบบจัดการเวลาและลงเวลา',
         icon: './assets/images/logoallHR/zeemePlus.png',
         path: '/portal-manage/zeeme',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
       {
         id: 'myface',
-        name: 'myface',
+        name: 'MYFACE',
         displayName: 'myFace',
         description: 'ระบบจัดการใบหน้าและความปลอดภัย',
         icon: './assets/images/logoallHR/logo_myface.png',
         path: '/portal-manage/myface',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
       {
         id: 'mylearn',
-        name: 'mylearn',
+        name: 'MYLEARN',
         displayName: 'myLearn',
         description: 'ระบบจัดการการเรียนรู้และฝึกอบรม',
         icon: './assets/images/logoallHR/mylearn-logo.png',
         path: '/portal-manage/mylearn',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
       {
         id: 'myjob',
-        name: 'myjob',
+        name: 'MYJOB',
         displayName: 'myJob',
         description: 'ระบบจัดการงานและโครงการ',
         icon: './assets/images/logoallHR/logo_myjob.png',
         path: '/portal-manage/myjob',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
       {
         id: 'myskill-x',
-        name: 'myskill-x',
+        name: 'MYSKILL-X',
         displayName: 'mySkill-X',
         description: 'ระบบจัดการทักษะและความสามารถ',
         icon: './assets/images/logoallHR/mySkill-x.png',
         path: '/portal-manage/myskill-x',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
-
       {
         id: 'meetingBooking',
-        name: 'meeting-booking',
+        name: 'MEETING-BOOKING',
         displayName: 'Meeting Booking',
         description: 'ระบบจองห้องประชุม',
         icon: './assets/images/logoallHR/booking.png',
         path: '/portal-manage/meeting-booking',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
-      // การตั้งค่าระบบ
       {
         id: 'permissionManagement',
-        name: 'permission-management',
+        name: 'PERMISSION',
         displayName: 'Permission Management',
         description: 'ระบบจัดการสิทธิ์และบทบาท',
         icon: './assets/images/logoallHR/permission.png',
         path: '/portal-manage/permission-management',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
-
-
       {
         id: 'dashboardManagement',
-        name: 'dashboard-management',
+        name: 'DASHBOARD',
         displayName: 'Dashboard Management',
         description: 'ระบบจัดการแดชบอร์ด และคลังวิดเจ็ต',
         icon: './assets/images/logoallHR/widget.webp',
         path: '/portal-manage/dashboard-management',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       },
       {
         id: 'my-portal',
-        name: 'my-portal',
+        name: 'MYPORTAL',
         displayName: 'my-Portal',
         description: 'ระบบจัดการเอกสารและเมนูกลางสำหรับแอปพลิเคชันต่างๆ',
         icon: './assets/images/logoallHR/portal.webp',
         path: '/portal-manage/my-portal',
-        isVisible: true,
+        isActive: false,
         category: 'applications',
         permissions: { view: true, create: true, edit: true, delete: true, export: true, import: true }
       }
     ];
   }
-
   navigateToApp(app: AppModule) {
 
   }
 
-  onToggleAppVisibility(app: AppModule, event: Event) {
-    const input = event.target as HTMLInputElement;
-    app.isVisible = input.checked;
-    console.log(`Toggled ${app.name}: ${app.isVisible}`);
-    // Here you would typically call a service to save this change
-  }
-
 }

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);
+  }
+
 }