เเก้ชน

package.json

@@ -8,7 +8,8 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "sass": "sass ./src/assets/scss:./src/assets/css/",
-    "sass-min": "sass ./src/assets/scss:./src/assets/css/ --style compressed"
+    "sass-min": "sass ./src/assets/scss:./src/assets/css/ --style compressed",
+    "build-serve":"node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng build  --aot --configuration production --output-hashing none"
   },
   "private": true,
   "dependencies": {

src/app/components/company-components/account-settings/account-settings.component.html

@@ -10,28 +10,35 @@
             <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                 <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                     href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
-                    aria-controls="underline-1" (click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน','สร้างชื่อผู้ใช้งาน']">
+                    aria-controls="underline-1"
+                    (click)="currentPage =1 ;pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน','สร้างชื่อผู้ใช้งาน']">
                     สร้างชื่อผู้ใช้งาน
                 </a>
                 <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
-                    aria-controls="underline-2" (click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน','กำหนดรหัสผ่าน']">
+                    aria-controls="underline-2"
+                    (click)="currentPage =2 ;pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน','กำหนดรหัสผ่าน']">
                     กำหนดรหัสผ่าน
                 </a>
                 <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
-                    aria-controls="underline-3" (click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน','จัดการผู้ใช้งาน']">
+                    aria-controls="underline-3"
+                    (click)="currentPage =3 ;pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน','จัดการผู้ใช้งาน']">
                     จัดการผู้ใช้งาน
                 </a>
             </nav>
         </div>
-        <div class="mt-3 px-3rem !-mt-3 pt-50px">
-            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
-                <app-user-settings [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event"></app-user-settings>
+        <div class="mt-3 px-2rem !-mt-3 pt-50px">
+            <div *ngIf="currentPage==1" id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-user-settings></app-user-settings>
             </div>
-            <div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
-                <app-set-a-password [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-set-a-password>
+            <div *ngIf="currentPage==2" id="underline-2" class="hidden" role="tabpanel"
+                aria-labelledby="underline-item-2">
+                <app-set-a-password></app-set-a-password>
+            </div>
+            <div *ngIf="currentPage==3" id="underline-3" class="hidden" role="tabpanel"
+                aria-labelledby="underline-item-3">
+                <app-manage-user></app-manage-user>
             </div>
         </div>
     </div>

src/app/components/company-components/account-settings/account-settings.component.ts

@@ -6,5 +6,6 @@ import { Component } from '@angular/core';
   styleUrls: ['./account-settings.component.scss']
 })
 export class AccountSettingsComponent {
-  pathTitle = ['การจัดการข้อมูลองค์กร','ตั้งค่าผู้ใช้งาน', 'สร้างชื่อผู้ใช้งาน']
+  pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างชื่อผู้ใช้งาน']
+  currentPage = 1
 }

src/app/components/company-components/account-settings/manage-user/manage-user.component.ts

+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { MyUserModel, UserModel } from 'src/app/shared/model/user.model';
+import { FileService } from 'src/app/shared/services/file.service';
+import { UserService } from 'src/app/shared/services/user.service';
+export interface DataPassword {
+  usernameId: string,
+  empId: string,
+  companyId: string,
+  oldPassword: string,
+  newPassword: string,
+}
+@Component({
+  selector: 'app-manage-user',
+  templateUrl: './manage-user.component.html',
+  styleUrls: ['./manage-user.component.scss']
+})
+export class ManageUserComponent {
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  companyId = ""
+  user: { loading: boolean, select: UserModel, dataList: { check: boolean, data: UserModel }[] } = { loading: false, select: new MyUserModel(), dataList: [] }
+  search = ""
+
+  userPassword: DataPassword = {
+    usernameId: "",
+    empId: "",
+    companyId: "",
+    oldPassword: "",
+    newPassword: "",
+  }
+
+  changePassword = false
+  constructor(private toastr: ToastrService,
+    private cdr: ChangeDetectorRef,
+    private userService: UserService) {
+    this.companyId = this.decodeJWT(sessionStorage.getItem("accessToken") || '').companyid
+  }
+  ngOnInit(): void {
+    this.getUserList()
+  }
+
+  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);
+  }
+
+
+  getUserList() {
+    this.user.loading = true
+    this.userService.getList("false").subscribe({
+      next: response => {
+        this.user.dataList = response.map(x => ({ check: false, data: new MyUserModel(x) }))
+        this.user.loading = false
+        this.searchChange()
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.user.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+  userListFilter() {
+    return this.user.dataList.filter(x => {
+      const data = x.data
+      const match = data.usernameId.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.empId.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.employee.thFullName.toLowerCase().includes(this.search.toLowerCase())
+      return match
+    })
+  }
+  selectUser(data: UserModel) {
+    this.user.select = new MyUserModel(data)
+    this.userPassword = {
+      usernameId: this.user.select.usernameId,
+      empId: this.user.select.empId,
+      companyId: this.user.select.companyId,
+      oldPassword: "",
+      newPassword: "",
+    }
+  }
+
+  updateUserPassword() {
+    if (this.changePassword) {
+      this.user.loading = true
+      this.userService.changePassword(this.userPassword).subscribe({
+        next: response => {
+          if (response.success) {
+            this.updateUser()
+          } else {
+            this.showAlert(response.message, 'error')
+            this.user.loading = false
+          }
+          this.cdr.detectChanges()
+        }, error: error => {
+          this.showAlert(error.message, 'error')
+          this.user.loading = false
+          this.cdr.detectChanges()
+        }
+      })
+    } else {
+      this.updateUser()
+    }
+  }
+
+  updateUser() {
+    this.user.loading = true
+    this.userService.post(new MyUserModel(this.user.select)).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getUserList()
+          this.searchChange()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.user.loading = false
+        }
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.user.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.userListFilter().length / 10) }, (_, i) => i + 1);
+  }
+  selectDataModal(target: { [key: string]: any }, field: string, data: any) {
+    target[field] = JSON.parse(JSON.stringify(data))
+  }
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    })
+  }
+}
\ No newline at end of file

src/app/components/company-components/account-settings/set-a-password/set-a-password.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
-
+import { MyUserModel, UserModel } from 'src/app/shared/model/user.model';
+import { FileService } from 'src/app/shared/services/file.service';
+import { UserService } from 'src/app/shared/services/user.service';
+export interface DataPassword {
+  usernameId: string,
+  empId: string,
+  companyId: string,
+  oldPassword: string,
+  newPassword: string,
+}
 @Component({
   selector: 'app-set-a-password',
   templateUrl: './set-a-password.component.html',
   styleUrls: ['./set-a-password.component.scss']
 })
 export class SetAPasswordComponent {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  selectedFile: File | null = null;
+  selectedFileName: string = 'กรุณาเลือกไฟล์';
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  companyId = ""
+  user: { loading: boolean, select: UserModel, dataList: { check: boolean, data: UserModel }[] } = { loading: false, select: new MyUserModel(), dataList: [] }
+  search = ""
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text])
-    this.activeTab = tab.id;
+  userPassword: DataPassword = {
+    usernameId: "",
+    empId: "",
+    companyId: "",
+    oldPassword: "",
+    newPassword: "",
   }
-  modalOptions: {
-    [nameModal: string]: {  // ชื่อตรวจสอบการเปิดปิด
-      isModalOpen: boolean; // เปิด/ปิด 
-      modalSize: string; // ขนาดของ Modal  (s,m,l,vw10-vw100 )
-      backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
-    }
-  } = {
-      "add": {
-        isModalOpen: false,
-        modalSize: 'm',
-        backdropClose: true,
-      },
-      "edit": {
-        isModalOpen: false,
-        modalSize: 'm',
-        backdropClose: true,
+  constructor(private toastr: ToastrService,
+    private cdr: ChangeDetectorRef,
+    private userService: UserService,
+    private fileService: FileService) {
+    this.companyId = this.decodeJWT(sessionStorage.getItem("accessToken") || '').companyid
+  }
+  ngOnInit(): void {
+    this.getUserList()
+  }
+
+  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);
+  }
+
+
+  getUserList() {
+    this.user.loading = true
+    this.userService.getList("true").subscribe({
+      next: response => {
+        this.user.dataList = response.map(x => ({ check: false, data: new MyUserModel(x) }))
+        this.user.loading = false
+        this.searchChange()
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.user.loading = false
+        this.cdr.detectChanges()
       }
+    })
+  }
+  userListFilter() {
+    return this.user.dataList.filter(x => {
+      const data = x.data
+      const match = data.usernameId.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.empId.toLowerCase().includes(this.search.toLowerCase()) ||
+        data.employee.thFullName.toLowerCase().includes(this.search.toLowerCase())
+      return match
+    })
+  }
+  selectUser(data?: UserModel) {
+    this.user.select = new MyUserModel({ ...data, companyId: data?.companyId || this.companyId, status: data?.status || '0' })
+    this.userPassword = {
+      usernameId: this.user.select.usernameId,
+      empId: this.user.select.empId,
+      companyId: this.user.select.companyId,
+      oldPassword: "",
+      newPassword: "",
+    }
+  }
+  onFileSelected(event: any) {
+    this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
+    this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
+  }
+  uploadFile() {
+    if (!this.selectedFile) {
+      alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
+      return
     }
-    constructor(private toastr: ToastrService) { }
+    const formData = new FormData();
+    formData.append('file', this.selectedFile);
+    this.user.loading = true
+    this.fileService.upload(formData, 'mbu1').subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getUserList()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.user.loading = false
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.user.loading = false
+      }
+    })
+  }
+  downloadFile() {
+    const fileName = 'IMPORT_USER.xlsx'
+    this.fileService.download(fileName).subscribe({
+      next: response => {
+        const url = window.URL.createObjectURL(response);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+      }
+    })
 
-  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
-    this.modalOptions[name].modalSize = size;
-    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
-    this.modalOptions[name].isModalOpen = true;
-    document.body.style.overflow = 'hidden'; // ล็อก Scroll
   }
 
-  closeModal(name: string) {
-    this.modalOptions[name].isModalOpen = false;
-    // ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
-    if (!this.isAnyModalOpen()) {
-      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
-    }
+
+  updateUserPassword() {
+    this.user.loading = true
+    this.userService.changePassword(this.userPassword).subscribe({
+      next: response => {
+        if (response.success) {
+          this.updateUser()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.user.loading = false
+        }
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.user.loading = false
+        this.cdr.detectChanges()
+      }
+    })
   }
 
-  isAnyModalOpen(): boolean {
-    // Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
-    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
+  updateUser() {
+    this.user.loading = true
+    this.userService.post(new MyUserModel({ ...this.user.select, status: '1' })).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getUserList()
+        } else {
+          this.showAlert(response.message, 'error')
+          this.user.loading = false
+        }
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.user.loading = false
+        this.cdr.detectChanges()
+      }
+    })
   }
-  showSuccessAdd() {
-    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.userListFilter().length / 10) }, (_, i) => i + 1);
   }
-  showSuccessEdit() {
-    this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+  selectDataModal(target: { [key: string]: any }, field: string, data: any) {
+    target[field] = JSON.parse(JSON.stringify(data))
   }
-  showSuccessDelete() {
-    this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
-    });
+    })
   }
-
-}
+}
\ No newline at end of file

src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.html

@@ -191,8 +191,9 @@
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
-                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
-                            style="padding-right: 3.5rem;" [(ngModel)]="bu1.bu1id" (ngModelChange)="bu1idChange()">
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
+                            style="padding-right: 3.5rem;"  [(ngModel)]="bu1.bu1id"
+                            (ngModelChange)="bu1idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
                             <button type="button" class="flex items-center text-red-500" (click)="selectBu1()">
@@ -293,7 +294,7 @@
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
-                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
                             style="padding-right: 3.5rem;" [(ngModel)]="bu1.bu1id" (ngModelChange)="bu1idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
@@ -678,7 +679,7 @@
 </div>
 
 <div id="department-list-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าทะเบียนแผนก

src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.ts

@@ -104,7 +104,7 @@ export class DepartmentListComponent implements OnInit {
     this.bu2ListLoading = true
     this.bu2Service.getList().subscribe({
       next: response => {
-        this.bu2List = response
+        this.bu2List = response.map(x => new MyBu2Model(x))
         this.bu2ListLoading = false
         this.onBu2TableSearchChange()
         this.cdr.detectChanges()
@@ -150,7 +150,7 @@ export class DepartmentListComponent implements OnInit {
 
   getBu1List() {
     this.bu1Service.getList().subscribe(response => {
-      this.bu1List = response
+      this.bu1List = response.map(x => new MyBu1Model(x))
       this.onBu1ModalSearchChange()
     })
   }

src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.html

@@ -344,7 +344,7 @@
 </div>
 
 <div id="department-register-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าทะเบียนฝ่าย

src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.ts

@@ -82,7 +82,7 @@ export class DepartmentRegisterComponent implements OnInit {
     this.bu1ListLoading = true
     this.bu1Service.getList().subscribe({
       next: response => {
-        this.bu1List = response
+        this.bu1List = response.map(x => new MyBu1Model(x))
         this.bu1ListLoading = false
         this.searchChange()
         this.cdr.detectChanges()

src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.html

@@ -190,7 +190,7 @@
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
-                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
                             style="padding-right: 3.5rem;" [(ngModel)]="bu2.bu2id" (ngModelChange)="bu2idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
@@ -297,7 +297,7 @@
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
-                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
                             style="padding-right: 3.5rem;" [(ngModel)]="bu2.bu2id" (ngModelChange)="bu2idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
@@ -683,7 +683,7 @@
 </div>
 
 <div id="section-registration-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าทะเบียนส่วน

src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.ts

@@ -105,7 +105,7 @@ export class SectionRegistrationComponent implements OnInit {
     this.bu3ListLoading = true
     this.bu3Service.getList().subscribe({
       next: response => {
-        this.bu3List = response
+        this.bu3List = response.map(x => new MyBu3Model(x))
         this.bu3ListLoading = false
         this.onBu3TableSearchChange()
         this.cdr.detectChanges()
@@ -184,7 +184,7 @@ export class SectionRegistrationComponent implements OnInit {
 
   getBu2List() {
     this.bu2Service.getList().subscribe(response => {
-      this.bu2List = response
+      this.bu2List = response.map(x => new MyBu2Model(x))
       this.onBu2ModalSearchChange()
     })
   }

src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.ts

@@ -19,7 +19,7 @@ interface table {
 export class SubDepartmentFourComponent implements OnInit {
   bu7List: Bu7Model[] = []
   bu7ListLoading = false
-  bu7: Bu7Model = new MyBu7Model({})
+  bu7: Bu7Model = new MyBu7Model()
   bu7Table: table = {
     currentPage: 1,
     page: Array.from({ length: 1 }, (_, i) => i + 1),
@@ -35,13 +35,13 @@ export class SubDepartmentFourComponent implements OnInit {
     search: ""
   }
   bu6List: Bu6Model[] = []
-  bu6: Bu6Model = new MyBu6Model({})
+  bu6: Bu6Model = new MyBu6Model()
   bu6Modal: table = {
     currentPage: 1,
     page: Array.from({ length: 1 }, (_, i) => i + 1),
     search: ""
   }
-  currentModal = ""
+  currentModal: 'add' | 'edit' | 'delete' = "add"
   constructor(private bu7Service: Bu7Service,
     private bu6Service: Bu6Service,
     private toastr: ToastrService,
@@ -65,6 +65,7 @@ export class SubDepartmentFourComponent implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
+    this.bu7ListLoading = true
     this.fileService.upload(formData, 'mbu7').subscribe({
       next: response => {
         if (response.success) {
@@ -72,9 +73,11 @@ export class SubDepartmentFourComponent implements OnInit {
           this.getBu7List()
         } else {
           this.showAlert(response.message, 'error')
+          this.bu7ListLoading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.bu7ListLoading = false
       }
     })
   }
@@ -102,7 +105,7 @@ export class SubDepartmentFourComponent implements OnInit {
     this.bu7ListLoading = true
     this.bu7Service.getList().subscribe({
       next: response => {
-        this.bu7List = response
+        this.bu7List = response.map(x => new MyBu7Model(x))
         this.bu7ListLoading = false
         this.onBu7TableSearchChange()
         this.cdr.detectChanges()
@@ -118,8 +121,8 @@ export class SubDepartmentFourComponent implements OnInit {
   }
   filterBu7Table() {
     return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
-    x.tdesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
-    x.edesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()))
+      x.tdesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()))
   }
   selectBu7(bu7?: Bu7Model) {
     this.bu7 = new MyBu7Model(bu7 || {})
@@ -141,10 +144,11 @@ export class SubDepartmentFourComponent implements OnInit {
   }
   filterBu7Modal() {
     return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Modal.search.toLowerCase()) ||
-    x.tdesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()) ||
-    x.edesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()))
+      x.tdesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()))
   }
   addBu7() {
+    this.bu7ListLoading = true
     this.bu7Service.post({ ...this.bu7, parent: this.bu6.bu6id }).subscribe({
       next: response => {
         if (response.success) {
@@ -152,13 +156,16 @@ export class SubDepartmentFourComponent implements OnInit {
           this.getBu7List()
         } else {
           this.showAlert(response.message, 'error')
+          this.bu7ListLoading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.bu7ListLoading = false
       }
     })
   }
   deleteBu7() {
+    this.bu7ListLoading = true
     this.bu7Service.delete(this.bu7).subscribe({
       next: response => {
         if (response.success) {
@@ -166,16 +173,18 @@ export class SubDepartmentFourComponent implements OnInit {
           this.getBu7List()
         } else {
           this.showAlert(response.message, 'error')
+          this.bu7ListLoading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.bu7ListLoading = false
       }
     })
   }
 
   getBu6List() {
     this.bu6Service.getList().subscribe(response => {
-      this.bu6List = response
+      this.bu6List = response.map(x => new MyBu6Model(x))
       this.onBu6ModalSearchChange()
     })
   }
@@ -189,8 +198,8 @@ export class SubDepartmentFourComponent implements OnInit {
   }
   filterBu6Modal() {
     return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
-    x.tdesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
-    x.edesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()))
+      x.tdesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()))
   }
   selectBu6(bu6?: Bu6Model) {
     this.bu6 = new MyBu6Model(bu6 || {})

src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html

@@ -192,7 +192,7 @@
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
-                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
                             style="padding-right: 3.5rem;" [(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
@@ -299,7 +299,7 @@
                     <div class="relative flex rounded-md">
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
-                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
+                            class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
                             style="padding-right: 3.5rem;" [(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
@@ -690,7 +690,7 @@
 </div>
 
 <div id="sub-department-one-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าทะเบียนส่วนย่อย1

src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts

@@ -104,7 +104,7 @@ export class SubDepartmentOneComponent implements OnInit {
     this.bu4ListLoading = true
     this.bu4Service.getList().subscribe({
       next: response => {
-        this.bu4List = response
+        this.bu4List = response.map(x => new MyBu4Model(x))
         this.bu4ListLoading = false
         this.onBu4TableSearchChange()
         this.cdr.detectChanges()
@@ -183,7 +183,7 @@ export class SubDepartmentOneComponent implements OnInit {
 
   getBu3List() {
     this.bu3Service.getList().subscribe(response => {
-      this.bu3List = response
+      this.bu3List = response.map(x => new MyBu3Model(x))
       this.onBu3ModalSearchChange()
     })
   }

src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts

@@ -19,7 +19,7 @@ interface table {
 export class SubDepartmentThreeComponent implements OnInit {
   bu6List: Bu6Model[] = []
   bu6ListLoading = false
-  bu6: Bu6Model = new MyBu6Model({})
+  bu6: Bu6Model = new MyBu6Model()
   bu6Table: table = {
     currentPage: 1,
     page: Array.from({ length: 1 }, (_, i) => i + 1),
@@ -41,7 +41,7 @@ export class SubDepartmentThreeComponent implements OnInit {
     page: Array.from({ length: 1 }, (_, i) => i + 1),
     search: ""
   }
-  currentModal = ""
+  currentModal: 'add' | 'edit' | 'detele' = "add"
   constructor(private bu6Service: Bu6Service,
     private bu5Service: Bu5Service,
     private toastr: ToastrService,
@@ -65,6 +65,7 @@ export class SubDepartmentThreeComponent implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
+    this.bu6ListLoading = true
     this.fileService.upload(formData, 'mbu6').subscribe({
       next: response => {
         if (response.success) {
@@ -72,9 +73,11 @@ export class SubDepartmentThreeComponent implements OnInit {
           this.getBu6List()
         } else {
           this.showAlert(response.message, 'error')
+          this.bu6ListLoading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.bu6ListLoading = false
       }
     })
   }
@@ -102,7 +105,7 @@ export class SubDepartmentThreeComponent implements OnInit {
     this.bu6ListLoading = true
     this.bu6Service.getList().subscribe({
       next: response => {
-        this.bu6List = response
+        this.bu6List = response.map(x => new MyBu6Model(x))
         this.bu6ListLoading = false
         this.onBu6TableSearchChange()
         this.cdr.detectChanges()
@@ -118,11 +121,11 @@ export class SubDepartmentThreeComponent implements OnInit {
   }
   filterBu6Table() {
     return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
-    x.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
-    x.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()))
+      x.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()))
   }
   selectBu6(bu6?: Bu6Model) {
-    this.bu6 = new MyBu6Model(bu6 || {})
+    this.bu6 = new MyBu6Model(bu6)
     this.selectBu5()
     if (this.bu6.parent) {
       this.bu5Service.getById(this.bu6.parent).subscribe(response => {
@@ -141,10 +144,11 @@ export class SubDepartmentThreeComponent implements OnInit {
   }
   filterBu6Modal() {
     return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
-    x.tdesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
-    x.edesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()))
+      x.tdesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()))
   }
   addBu6() {
+    this.bu6ListLoading = true
     this.bu6Service.post({ ...this.bu6, parent: this.bu5.bu5id }).subscribe({
       next: response => {
         if (response.success) {
@@ -152,13 +156,16 @@ export class SubDepartmentThreeComponent implements OnInit {
           this.getBu6List()
         } else {
           this.showAlert(response.message, 'error')
+          this.bu6ListLoading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.bu6ListLoading = false
       }
     })
   }
   deleteBu6() {
+    this.bu6ListLoading = true
     this.bu6Service.delete(this.bu6).subscribe({
       next: response => {
         if (response.success) {
@@ -166,16 +173,18 @@ export class SubDepartmentThreeComponent implements OnInit {
           this.getBu6List()
         } else {
           this.showAlert(response.message, 'error')
+          this.bu6ListLoading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.bu6ListLoading = false
       }
     })
   }
 
   getBu5List() {
     this.bu5Service.getList().subscribe(response => {
-      this.bu5List = response
+      this.bu5List = response.map(x => new MyBu5Model(x))
       this.onBu5ModalSearchChange()
     })
   }
@@ -189,11 +198,11 @@ export class SubDepartmentThreeComponent implements OnInit {
   }
   filterBu5Modal() {
     return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
-    x.tdesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
-    x.edesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()))
+      x.tdesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
+      x.edesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()))
   }
   selectBu5(bu5?: Bu5Model) {
-    this.bu5 = new MyBu5Model(bu5 || {})
+    this.bu5 = new MyBu5Model(bu5)
   }
 
   showAlert(text: string, type: 'success' | 'error') {

src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.html

@@ -191,7 +191,8 @@
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
                             class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
-                            style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
+                            readonly style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id"
+                            (ngModelChange)="bu4idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
                             <button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
@@ -298,7 +299,8 @@
                         <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
                             name="hs-leading-button-add-on-with-icon-and-button"
                             class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
-                            style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
+                            readonly style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id"
+                            (ngModelChange)="bu4idChange()">
                         <div
                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
                             <button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
@@ -680,7 +682,7 @@
 </div>
 
 <div id="sub-department-two-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าทะเบียนส่วนย่อย2

src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.ts

@@ -104,7 +104,7 @@ export class SubDepartmentTwoComponent implements OnInit {
     this.bu5ListLoading = true
     this.bu5Service.getList().subscribe({
       next: response => {
-        this.bu5List = response
+        this.bu5List = response.map(x => new MyBu5Model(x))
         this.bu5ListLoading = false
         this.onBu5TableSearchChange()
         this.cdr.detectChanges()
@@ -183,7 +183,7 @@ export class SubDepartmentTwoComponent implements OnInit {
 
   getBu4List() {
     this.bu4Service.getList().subscribe(response => {
-      this.bu4List = response
+      this.bu4List = response.map(x => new MyBu4Model(x))
       this.onBu4ModalSearchChange()
     })
   }

src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html

@@ -281,7 +281,7 @@
 </div>
 
 <div id="company-registration-page-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าข้อมูลบริษัท

src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.html

@@ -347,7 +347,7 @@
 </div>
 
 <div id="sub-employee-registration-modal-upload" class="hs-overlay hidden ti-modal">
-  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
     <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
       <h5 class="text-xxl font-bold text-white">
         นำเข้าข้อมูลพนักงาน

src/app/components/company-components/job-description/employee-categories/employee-categories.component.ts

@@ -16,16 +16,6 @@ export interface DataModel {
   styleUrls: ['./employee-categories.component.scss']
 })
 export class EmployeeCategories {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
-
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
-    this.activeTab = tab.id;
-  }
-
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
   search = ""
@@ -39,6 +29,9 @@ export class EmployeeCategories {
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private empTypeService: EmpTypeService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -59,6 +52,7 @@ export class EmployeeCategories {
       return
     }
     const formData = new FormData();
+    this.dataLoading = true
     formData.append('file', this.selectedFile);
     this.fileService.upload(formData, 'employment_type').subscribe({
       next: response => {
@@ -67,9 +61,13 @@ export class EmployeeCategories {
           this.getEmpTypeList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges();
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges();
       }
     })
   }
@@ -99,6 +97,8 @@ export class EmployeeCategories {
       next: response => {
         this.emp_typelist = response.map(x => ({ check: false, data: { codeId: x.codeId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
         this.dataLoading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.searchChange();
         this.cdr.detectChanges();
       }, error: error => {
@@ -112,11 +112,12 @@ export class EmployeeCategories {
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   emp_typeListFilter() {
     return this.emp_typelist.filter(x => {
       const data = x.data
-      const match = data.codeId.toLowerCase().includes(this.search) || data.tdesc.toLowerCase().includes(this.search) || data.edesc.toLowerCase().includes(this.search);
+      const match = data.codeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
       return match;
     });
   }
@@ -126,6 +127,7 @@ export class EmployeeCategories {
 
   addEmp_type() {
     const body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
+    this.dataLoading = true
     this.empTypeService.post(body).subscribe({
       next: response => {
         if (response.success) {
@@ -133,9 +135,13 @@ export class EmployeeCategories {
           this.getEmpTypeList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -147,6 +153,7 @@ export class EmployeeCategories {
     } else {
       body = this.emp_typelist.filter(x => x.check).map(x => new MyEmpTypeModel({ codeId: x.data.codeId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }))
     }
+    this.dataLoading = true
     this.empTypeService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -154,9 +161,13 @@ export class EmployeeCategories {
           this.getEmpTypeList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -167,4 +178,32 @@ export class EmployeeCategories {
       positionClass: 'toast-top-right',
     });
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.emp_typelist.filter(x => {
+      const data = x.data
+      const match = data.codeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
+      return match;
+    }).forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+  dataListCheck() {
+    const dataCheck = this.emp_typeListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.emp_typelist.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
+
+
+  clearEmp_type(modalStatus: string) {
+    if (modalStatus == 'add') {
+      this.dataSelect.codeId = ''
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    } else if (modalStatus == 'edit') {
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    }
+  }
 }

src/app/components/company-components/job-description/employee-group-unit/employee-group-unit.component.ts

@@ -17,19 +17,9 @@ export interface DataModel {
   styleUrls: ['./employee-group-unit.component.scss']
 })
 export class EmployeeGroupUnit implements OnInit {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
-
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
-    this.activeTab = tab.id;
-  }
-
   currentPage = 1
   selectedItems: string[] = [];
-  modalStatus = 'add'
+  modalStatus: 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add'
   page = Array.from({ length: 1 }, (_, i) => i + 1);
   dataLoading = false
   dataSelect: DataModel = { groupId: "", tdesc: "", edesc: "", companyId: "", checked: false }
@@ -39,6 +29,9 @@ export class EmployeeGroupUnit implements OnInit {
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private empGroupService: EmpGroupService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -61,6 +54,7 @@ export class EmployeeGroupUnit implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
+    this.dataLoading = true
     this.fileService.upload(formData, 'mgroup').subscribe({
       next: response => {
         if (response.success) {
@@ -68,9 +62,11 @@ export class EmployeeGroupUnit implements OnInit {
           this.getEmpGroupList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
       }
     })
   }
@@ -101,6 +97,8 @@ export class EmployeeGroupUnit implements OnInit {
         this.emp_groupList = response.map(x => ({ check: false, data: { groupId: x.groupId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId, checked: false } }))
         this.dataLoading = false
         this.searchChange()
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.cdr.detectChanges()
       }, error: error => {
         this.dataLoading = false
@@ -112,11 +110,12 @@ export class EmployeeGroupUnit implements OnInit {
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.emp_groupListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   emp_groupListFilter() {
     return this.emp_groupList.filter(x => {
       const data = x.data
-      const match = data.groupId.toLowerCase().includes(this.search) || data.tdesc.toLowerCase().includes(this.search) || data.edesc.toLowerCase().includes(this.search);
+      const match = data.groupId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
       return match;
     });
   }
@@ -126,6 +125,7 @@ export class EmployeeGroupUnit implements OnInit {
 
   addEmp_group() {
     const body = new MyEmpGroupModel({ groupId: this.dataSelect.groupId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
+    this.dataLoading = true
     this.empGroupService.post(body).subscribe({
       next: response => {
         if (response.success) {
@@ -133,20 +133,24 @@ export class EmployeeGroupUnit implements OnInit {
           this.getEmpGroupList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
   deleteEmp_group() {
     let body: EmpGroupModel | EmpGroupModel[] = [];
-  
     if (this.dataSelect.groupId) {
-      body = new MyEmpGroupModel({groupId: this.dataSelect.groupId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId });
+      body = new MyEmpGroupModel({ groupId: this.dataSelect.groupId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId });
     } else {
       body = this.emp_groupList.filter(x => x.check).map(x => new MyEmpGroupModel({ groupId: x.data.groupId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }));
     }
+    this.dataLoading = true
     this.empGroupService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -154,28 +158,34 @@ export class EmployeeGroupUnit implements OnInit {
           this.getEmpGroupList();
         } else {
           this.showAlert(response.message, 'error');
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       },
       error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     });
   }
-  
 
-  toggleSelectAll(event: Event) {
-    const checked = (event.target as HTMLInputElement).checked;
-
-    this.emp_groupList.forEach(item => {
-      item.check = checked;  // อัปเดตค่า check ใน emp_groupList
-    });
-
-    // อัปเดตรายการ selectedItems ด้วย groupId ของรายการที่ถูกเลือก
-    this.selectedItems = checked ? this.emp_groupList.map(item => item.data.groupId) : [];
-
-    this.cdr.detectChanges();  // แจ้ง Angular ให้รีเฟรช UI
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.emp_groupList.filter(x => {
+      const data = x.data
+      const match = data.groupId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
+      return match;
+    }).forEach(x => x.check = selectAll);
+    this.dataListCheck();
   }
 
+  dataListCheck() {
+    const dataCheck = this.emp_groupListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.emp_groupList.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
 
   showAlert(text: string, type: 'success' | 'error') {
     this.toastr[type](text, 'แจ้งเตือน', {
@@ -183,4 +193,15 @@ export class EmployeeGroupUnit implements OnInit {
       positionClass: 'toast-top-right',
     })
   }
+
+  clearEmp_group(modalStatus: string) {
+    if (modalStatus == 'add') {
+      this.dataSelect.groupId = ''
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    } else if (modalStatus == 'edit') {
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    }
+  }
 }

src/app/components/company-components/job-description/employee-level/employee-level.component.ts

@@ -16,15 +16,6 @@ export interface DataModel {
   styleUrls: ['./employee-level.component.scss']
 })
 export class EmployeeLevel implements OnInit {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
-
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
-    this.activeTab = tab.id;
-  }
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
   search = ""
@@ -38,6 +29,10 @@ export class EmployeeLevel implements OnInit {
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
+
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private plService: PLService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -60,6 +55,7 @@ export class EmployeeLevel implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
+    this.dataLoading = true
     this.fileService.upload(formData, 'pl').subscribe({
       next: response => {
         if (response.success) {
@@ -67,9 +63,13 @@ export class EmployeeLevel implements OnInit {
           this.getPLList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -99,6 +99,8 @@ export class EmployeeLevel implements OnInit {
       next: response => {
         this.plList = response.map(x => ({ check: false, data: { plId: x.plId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
         this.dataLoading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.searchChange();
         this.cdr.detectChanges();
       }, error: error => {
@@ -112,12 +114,14 @@ export class EmployeeLevel implements OnInit {
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck();
+    this.cdr.detectChanges()
   }
 
   plListFilter() {
     return this.plList.filter(x => {
       const data = x.data
-      const match = data.plId.toLowerCase().includes(this.search) || data.tdesc.toLowerCase().includes(this.search) || data.edesc.toLowerCase().includes(this.search);
+      const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
       return match;
     });
   }
@@ -128,6 +132,7 @@ export class EmployeeLevel implements OnInit {
 
   addPL() {
     const body = new MyPLModel({ plId: this.dataSelect.plId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
+    this.dataLoading = true
     this.plService.post(body).subscribe({
       next: response => {
         if (response.success) {
@@ -135,9 +140,13 @@ export class EmployeeLevel implements OnInit {
           this.getPLList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = true
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = true
+        this.cdr.detectChanges()
       }
     })
   }
@@ -149,6 +158,7 @@ export class EmployeeLevel implements OnInit {
     } else {
       body = this.plList.filter(x => x.check).map(x => new MyPLModel({ plId: x.data.plId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }))
     }
+    this.dataLoading = true
     this.plService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -156,9 +166,13 @@ export class EmployeeLevel implements OnInit {
           this.getPLList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = true
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = true
+        this.cdr.detectChanges()
       }
     })
   }
@@ -169,4 +183,32 @@ export class EmployeeLevel implements OnInit {
       positionClass: 'toast-top-right',
     });
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.plList.filter(x => {
+      const data = x.data
+      const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
+      return match;
+    }).forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+  dataListCheck() {
+    const dataCheck = this.plListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.plList.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
+
+
+  clearPl(modalStatus: string) {
+    if (modalStatus == 'add') {
+      this.dataSelect.plId = ''
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    } else if (modalStatus == 'edit') {
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    }
+  }
 }

src/app/components/company-components/job-description/job-description.component.html

@@ -10,44 +10,56 @@
             <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                 <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                     href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
-                    aria-controls="underline-1" (click)="pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','กลุ่มพนักงาน']">
+                    aria-controls="underline-1"
+                    (click)="currentPath = 1;pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','กลุ่มพนักงาน']">
                     กลุ่มพนักงาน
                 </a>
                 <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
-                    aria-controls="underline-2" (click)="pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','ตำเเหน่ง']">
+                    aria-controls="underline-2"
+                    (click)="currentPath = 2;pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','ตำเเหน่ง']">
                     ตำเเหน่ง
                 </a>
+                <!-- <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
+                    href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
+                    aria-controls="underline-3"
+                    (click)="currentPath = 3;pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','ลักษณะงาน']">
+                    ลักษณะงาน
+                </a> -->
                 <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-4" data-hs-tab="#underline-4"
-                    aria-controls="underline-4" (click)="pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','ประเภทพนักงาน']">
+                    aria-controls="underline-4"
+                    (click)="currentPath = 4;pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','ประเภทพนักงาน']">
                     ประเภทพนักงาน
                 </a>
                 <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-5" data-hs-tab="#underline-5"
-                    aria-controls="underline-5" (click)="pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','ระดับพนักงาน (PL)']">
+                    aria-controls="underline-5"
+                    (click)="currentPath = 5;pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน','ระดับพนักงาน (PL)']">
                     ระดับพนักงาน (PL)
                 </a>
             </nav>
         </div>
-        <div class="mt-3 px-3rem !-mt-3 pt-50px">
-            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1" >
-                <app-employee-group-unit [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event"></app-employee-group-unit>
+        <div class="mt-3 px-2rem !-mt-3 pt-50px">
+            <div *ngIf="currentPath == 1" id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-employee-group-unit></app-employee-group-unit>
             </div>
-            <div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
-                <app-position-unit [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-position-unit>
+            <div *ngIf="currentPath == 2" id="underline-2" class="hidden" role="tabpanel"
+                aria-labelledby="underline-item-2">
+                <app-position-unit></app-position-unit>
             </div>
-            <div id="underline-3" class="hidden" role="tabpanel" aria-labelledby="underline-item-3">
+            <div *ngIf="currentPath == 3" id="underline-3" class="hidden" role="tabpanel"
+                aria-labelledby="underline-item-3">
                 ลักษณะงาน
             </div>
-            <div id="underline-4" class="hidden" role="tabpanel" aria-labelledby="underline-item-4">
-                <app-employee-categories [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event"></app-employee-categories>
+            <div *ngIf="currentPath == 4" id="underline-4" class="hidden" role="tabpanel"
+                aria-labelledby="underline-item-4">
+                <app-employee-categories></app-employee-categories>
             </div>
-            <div id="underline-5" class="hidden" role="tabpanel" aria-labelledby="underline-item-5">
-                <app-employee-level [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-employee-level>
+            <div *ngIf="currentPath == 5" id="underline-5" class="hidden" role="tabpanel"
+                aria-labelledby="underline-item-5">
+                <app-employee-level></app-employee-level>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file

src/app/components/company-components/job-description/job-description.component.ts

@@ -6,5 +6,6 @@ import { Component } from '@angular/core';
   styleUrls: ['./job-description.component.scss']
 })
 export class JobDescriptionComponent {
-  pathTitle = ['การจัดการข้อมูลองค์กร','ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
+  pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
+  currentPath = 1
 }

src/app/components/company-components/job-description/position/position-unit.component.ts

@@ -18,15 +18,6 @@ export interface DataModel {
   styleUrls: ['./position-unit.component.scss']
 })
 export class PositionUnitComponent implements OnInit {
-  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
-
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
-    this.activeTab = tab.id;
-  }
   currentPage = 1
   selectedItems: string[] = [];
   search = ""
@@ -39,6 +30,9 @@ export class PositionUnitComponent implements OnInit {
   dataLoading = false
   dataSelect: DataModel = { positionId: "", tdesc: "", edesc: "", consolidate: "", shortName: "", companyId: "" }
 
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
   constructor(private positionService: PositionService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -60,6 +54,7 @@ export class PositionUnitComponent implements OnInit {
     }
     const formData = new FormData();
     formData.append('file', this.selectedFile);
+    this.dataLoading = true
     this.fileService.upload(formData, 'mposition').subscribe({
       next: response => {
         if (response.success) {
@@ -67,9 +62,13 @@ export class PositionUnitComponent implements OnInit {
           this.getPositionList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges();
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges();
       }
     })
   }
@@ -96,8 +95,10 @@ export class PositionUnitComponent implements OnInit {
     this.dataLoading = true
     this.positionService.getList().subscribe({
       next: response => {
-        this.positionList = response.map(x => ({ check: false, data: { positionId: x.positionId, tdesc: x.tdesc, edesc: x.edesc, consolidate: x.consolidate, shortName: x.shortName, companyId: x.companyId } }))
+        this.positionList = response.map(x => new MyPositionModel(x)).map(x => ({ check: false, data: { positionId: x.positionId, tdesc: x.tdesc, edesc: x.edesc, consolidate: x.consolidate, shortName: x.shortName, companyId: x.companyId } }))
         this.dataLoading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.searchChange()
         this.cdr.detectChanges();
       }, error: error => {
@@ -110,28 +111,23 @@ export class PositionUnitComponent implements OnInit {
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.positionListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   positionListFilter() {
     return this.positionList.filter(x => {
-      const data = x.data;
-      const searchLower = this.search.toLowerCase();
-  
-      return (
-        (data.positionId?.toLowerCase() || '').includes(searchLower) ||
-        (data.tdesc?.toLowerCase() || '').includes(searchLower) ||
-        (data.edesc?.toLowerCase() || '').includes(searchLower) ||
-        (data.consolidate?.toLowerCase() || '').includes(searchLower) ||
-        (data.shortName?.toLowerCase() || '').includes(searchLower)
-      );
+      const data = x.data
+      const match = data.positionId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
+      return match;
     });
   }
-  
+
   setData(data?: DataModel) {
     this.dataSelect = JSON.parse(JSON.stringify(data || { positionId: "", tdesc: "", edesc: "", consolidate: "", shortName: "", companyId: "" }));
   }
 
   addPosition() {
     const body = new MyPositionModel({ positionId: this.dataSelect.positionId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, consolidate: this.dataSelect.consolidate, shortName: this.dataSelect.shortName, companyId: this.dataSelect.companyId })
+    this.dataLoading = true
     this.positionService.post(body).subscribe({
       next: response => {
         if (response.success) {
@@ -139,9 +135,13 @@ export class PositionUnitComponent implements OnInit {
           this.getPositionList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -152,6 +152,7 @@ export class PositionUnitComponent implements OnInit {
     } else {
       body = this.positionList.filter(x => x.check).map(x => new MyPositionModel({ positionId: x.data.positionId, tdesc: x.data.tdesc, edesc: x.data.edesc, consolidate: x.data.consolidate, shortName: x.data.shortName, companyId: x.data.companyId }))
     }
+    this.dataLoading = true
     this.positionService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -159,9 +160,13 @@ export class PositionUnitComponent implements OnInit {
           this.getPositionList()
         } else {
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -171,5 +176,33 @@ export class PositionUnitComponent implements OnInit {
       positionClass: 'toast-top-right',
     });
   }
+
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.positionList.filter(x => {
+      const data = x.data
+      const match = data.positionId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
+      return match;
+    }).forEach(x => x.check = selectAll);
+    this.dataListCheck();
+  }
+  dataListCheck() {
+    const dataCheck = this.positionListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.positionList.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
+
+
+  clearPosition(modalStatus: string) {
+    if (modalStatus == 'add') {
+      this.dataSelect.positionId = ''
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    } else if (modalStatus == 'edit') {
+      this.dataSelect.tdesc = ''
+      this.dataSelect.edesc = ''
+    }
+  }
 }
 

src/app/components/competency-assessment/course-registration/development-course/development-course.component.html

@@ -217,6 +217,8 @@
                 <label for="detail_eng" class="ti-form-label mt-2rem">หัวข้อเรื่อง</label>
                 <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
                     [(ngModel)]="dataSelect.topic"> </textarea>
+                <label for="input-label" class="ti-form-label">Link myLearn</label>
+                <input type="text" id="input-label" class="ti-form-input h-10" [(ngModel)]="dataSelect.courseLinkMylearn">
                 <div class="flex justify-end mt-3rem mb-1rem space-x-4">
                     <button type="button"
                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
@@ -289,6 +291,8 @@
                 <label for="detail_eng" class="ti-form-label mt-2rem">หัวข้อเรื่อง</label>
                 <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
                     [(ngModel)]="dataSelect.topic"> </textarea>
+                    <label for="input-label" class="ti-form-label">Link myLearn</label>
+                    <input type="text" id="input-label" class="ti-form-input h-10" [(ngModel)]="dataSelect.courseLinkMylearn">
                 <div class="flex justify-end mt-3rem mb-1rem space-x-4">
                     <button type="button"
                         class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"

src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts

@@ -8,6 +8,7 @@ export interface DataModel {
   edesc: string
   detail: string
   topic: string
+  courseLinkMylearn: string
   checked: boolean
 }
 @Component({
@@ -82,7 +83,7 @@ export class DevelopmentCourseComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    const body = new MyCompetencycourseModel({ competencyCourseId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, courseTopic: this.dataSelect.topic, courseDetail: this.dataSelect.detail })
+    const body = new MyCompetencycourseModel({ competencyCourseId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, courseTopic: this.dataSelect.topic, courseDetail: this.dataSelect.detail, courseLinkMylearn: this.dataSelect.courseLinkMylearn })
     this.competencycourseService.post(body).subscribe((response: any) => {
       if (response.success) {
         this.showSuccess()
@@ -91,7 +92,7 @@ export class DevelopmentCourseComponent {
     })
   }
   deleteUser() {
-    const body = new MyCompetencycourseModel({ competencyCourseId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, courseTopic: this.dataSelect.topic, courseDetail: this.dataSelect.detail })
+    const body = new MyCompetencycourseModel({ competencyCourseId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, courseTopic: this.dataSelect.topic, courseDetail: this.dataSelect.detail,courseLinkMylearn: this.dataSelect.courseLinkMylearn })
     this.competencycourseService.delete(body).subscribe((response: any) => {
       if (response.success) {
         this.showSuccessDelete()
@@ -104,7 +105,7 @@ export class DevelopmentCourseComponent {
 
   mockData: DataModel[] = []
   dataLoading = false
-  dataSelect: DataModel = { id: "", name: "", edesc: "", topic: "", detail: "", checked: false }
+  dataSelect: DataModel = { id: "", name: "", edesc: "", topic: "", detail: "",courseLinkMylearn:"", checked: false }
   mockDataSelect: any = []
 
 
@@ -119,7 +120,7 @@ export class DevelopmentCourseComponent {
     this.dataLoading = true
     this.competencycourseService.getList().subscribe({
       next: response => {
-        this.mockData = response.map(x => ({ id: x.competencyCourseId, name: x.tdesc, edesc: x.edesc, topic: x.courseTopic, detail: x.courseDetail, checked: false }))
+        this.mockData = response.map(x => ({ id: x.competencyCourseId, name: x.tdesc, edesc: x.edesc, topic: x.courseTopic, detail: x.courseDetail,courseLinkMylearn:x.courseLinkMylearn, checked: false }))
         this.dataLoading = false
         this.searchChange()
         this.cdr.detectChanges()

src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html

@@ -91,7 +91,7 @@
         <tr
           *ngFor="let item of evaluation_cycleListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
           <td class="text-center">
-            <input *ngIf="item.data.evaluationRoundId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer"
+            <input type="checkbox" class="ti-form-checkbox cursor-pointer"
               id="checkbox-{{item.data.evaluationRoundId}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
             <label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
           </td>

src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.html

@@ -109,10 +109,11 @@
                     <td>{{item.data.name}}</td>
                     <td class="text-center">{{item.data.code}}</td>
                     <td class="flex justify-center">
-                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
+                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                            (click)="modalStatus='edit';setData(item.data)"
                             data-hs-overlay="#competency-topic-page-modal"></i>
-                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.id!='100'"
-                        (click)="modalStatus='delete';setData(item.data)"
+                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
+                            (click)="modalStatus='delete';setData(item.data)"
                             data-hs-overlay="#competency-topic-page-alert-modal"></i>
                     </td>
                 </tr>
@@ -204,7 +205,9 @@
             </div>
             <div class="ti-modal-body mt-1">
                 <label for="input-label" class="ti-form-label">รหัส*</label>
-                <input type="text" id="input-label" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(ngModel)]="dataSelect.id">
+                <input type="text" id="input-label" class="ti-form-input w-1/2"
+                    [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
+                    [(ngModel)]="dataSelect.id">
                 <label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)</label>
                 <input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
                 <label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
@@ -608,7 +611,7 @@
 </div>
 
 <div id="competency-topic-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าหัวข้อสมรรถนะ

src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.html

@@ -49,7 +49,8 @@
             </div>
             <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
-                    data-hs-overlay="#type-registration-component-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
+                    data-hs-overlay="#type-registration-component-page-alert-modal"
+                    (click)="modalStatus='deleteGroup';setData()">
                     <i class="ri-delete-bin-6-line"></i>
                     Delete
                 </button>
@@ -101,17 +102,18 @@
                 <tr
                     *ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
                     <td class="text-center">
-                        <input *ngIf="item.data.id!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
+                        <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
                             [(ngModel)]="item.check" (change)="checkSelect()">
                         <label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label>
                     </td>
                     <td>{{item.data.name}}</td>
                     <td class="text-center">{{item.data.code}}</td>
                     <td class="flex justify-center">
-                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
+                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                            (click)="modalStatus='edit';setData(item.data)"
                             data-hs-overlay="#type-registration-component-page-modal"></i>
-                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.id!='100'"
-                        (click)="modalStatus='delete';setData(item.data)"
+                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
+                            (click)="modalStatus='delete';setData(item.data)"
                             data-hs-overlay="#type-registration-component-page-alert-modal"></i>
                     </td>
                 </tr>
@@ -203,7 +205,9 @@
             </div>
             <div class="ti-modal-body" style="padding-top: 0px;">
                 <label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
-                <input type="text" id="input-label" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(ngModel)]="dataSelect.id">
+                <input type="text" id="input-label" class="ti-form-input w-1/2"
+                    [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
+                    [(ngModel)]="dataSelect.id">
                 <label for="detail_th" class="ti-form-label mt-1rem">ชื่อประเภท (ไทย)*</label>
                 <input type="text" id="detail_th" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.name">
                 <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อประเภท (อังกฤษ)</label>
@@ -271,7 +275,8 @@
                             ย้อนกลับ
                         </button>
                         <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                            data-hs-overlay="#type-registration-component-page-alert-modal" (click)="addType_registration()">
+                            data-hs-overlay="#type-registration-component-page-alert-modal"
+                            (click)="addType_registration()">
                             บันทึกข้อมูล
                         </a>
                     </ng-container>
@@ -282,7 +287,8 @@
                             ย้อนกลับ
                         </button>
                         <a class="ti-btn ti-btn-danger" href="javascript:void(0);"
-                            data-hs-overlay="#type-registration-component-page-alert-modal" (click)="deleteType_registration()">
+                            data-hs-overlay="#type-registration-component-page-alert-modal"
+                            (click)="deleteType_registration()">
                             ลบข้อมูล
                         </a>
                     </ng-container>
@@ -293,7 +299,7 @@
 </div>
 
 <div id="type-registration-component-upload-modal" class="hs-overlay hidden ti-modal">
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
+    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
         <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
             <h5 class="text-xxl font-bold text-white">
                 นำเข้าประเภทสมรรถนะ

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

@@ -135,6 +135,8 @@ import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-
 import { IndicatorsCoursesService } from 'src/app/shared/services/indicators-courses.service';
 import { IdpDevelopmentService } from 'src/app/shared/services/idp-development.service';
 import { GroupApproveService } from 'src/app/shared/services/group-approve.service';
+import { UserService } from 'src/app/shared/services/user.service';
+import { ManageUserComponent } from '../company-components/account-settings/manage-user/manage-user.component';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -253,7 +255,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     IdpEvalutionComponent,
     CompanyRegistrationPageComponent,
     PmsEvalutionComponent,
-    CEvaluationComponent
+    CEvaluationComponent,
+    ManageUserComponent
   ],
   imports: [
     CommonModule,
@@ -300,6 +303,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     IndicatorsCoursesService,
     IdpDevelopmentService,
     GroupApproveService,
+    UserService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/components/job-detail-components/job-competency/sub-job-competency/sub-job-competency.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
+import { JobCodeModel, MyJobCodeModel } from 'src/app/shared/model/job-code.model';
 import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+import { FileService } from 'src/app/shared/services/file.service';
+import { JobCodeService } from 'src/app/shared/services/่job-code.service';
 
 
 @Component({
@@ -9,31 +12,108 @@ import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
   styleUrls: ['./sub-job-competency.component.scss']
 })
 export class SubJobCompetencyComponent {
-  currentPage = 1
+    currentPage = 1
     page = Array.from({ length: 1 }, (_, i) => i + 1);
-    jobList: JobModel[] = []
-    job: JobModel = new MyJobModel({})
     search = ""
+    jobCodeList:JobCodeModel[]=[]
+    loading = false
+
+    selectedFile: File | null = null;
+    selectedFileName: string = 'กรุณาเลือกไฟล์';
     constructor(
-      private toastr: ToastrService
+      private toastr: ToastrService,
+      private fileService: FileService,
+      private jobcodeService: JobCodeService,
+       private cdr: ChangeDetectorRef,
     ) { }
     ngOnInit(): void {
+      this.getListJob();
+    }
+    getListJob(){
+      this.loading = false
+      this.jobcodeService.getList().subscribe({
+        next: response => {
+          this.jobCodeList = response.map((x: any) => new MyJobCodeModel(x))
+          console.log("🚀 ~ SubJobCompetencyComponent ~ this.jobcodeService.getList ~  this.jobCodeList:",  this.jobCodeList)
+          this.loading = false
+          this.searchChange()
+          this.cdr.detectChanges()
+        }, error: error => {
+          this.loading = false
+          this.cdr.detectChanges()
+        }
+      })
     }
-    
+
     searchChange() {
       this.currentPage = 1
-      this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+      this.page = Array.from({ length: Math.ceil(this.jobcodeFilter().length / 10) }, (_, i) => i + 1);
     }
-    jobListFilter() {
-      return this.jobList.filter(x => x.jobid.includes(this.search) ||
-        x.tdesc.includes(this.search) ||
-        x.edesc.includes(this.search))
+
+    jobcodeFilter() {
+      return this.jobCodeList.filter(x =>
+        x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+        x.edesc.toLowerCase().includes(this.search.toLowerCase()) ||
+        x.jobcodeId.toLowerCase().includes(this.search.toLowerCase())
+      )
     }
-    selectJob(job: JobModel) {
-      // this.showSuccess()
-      this.job = new MyJobModel(job)
+    onFileSelected(event: any) {
+      this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
+      this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
     }
   
+    uploadFile() {
+      if (!this.selectedFile) {
+        alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
+        return
+      }
+      const formData = new FormData();
+      formData.append('file', this.selectedFile);
+      // this.bu3ListLoading = true
+      this.fileService.upload(formData, 'MJOBCODE_COMPETENCY').subscribe({
+        next: response => {
+          if (response.success) {
+            this.showAlert(response.message, 'success')
+            // this.getBu3List()
+          } else {
+            this.showAlert(response.message, 'error')
+            // this.bu3ListLoading = false
+          }
+        }, error: error => {
+          this.showAlert(error.message, 'error')
+          // this.bu3ListLoading = false
+        }
+      })
+    }
+
+
+    downloadFile() {
+      const fileName = 'IMPORT_MJOBCODEV2.xlsx'
+      this.fileService.download(fileName).subscribe({
+        next: response => {
+          const url = window.URL.createObjectURL(response);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = fileName;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          window.URL.revokeObjectURL(url);
+        }, error: error => {
+          this.showAlert(error.message, 'error')
+        }
+      })
+  
+    }
+
+    showAlert(text: string, type: 'success' | 'error') {
+      this.toastr[type](text, 'แจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      })
+    }
+
+   
     showSuccessAdd() {
       this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
         timeOut: 3000,
@@ -54,27 +134,7 @@ export class SubJobCompetencyComponent {
         positionClass: 'toast-top-right',
       });
     }
-    addBu1() {
-      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
-      //   if (response.success) {
-      //     this.getBu1List()
-      //   }
-      // })
-    }
-    editBu1() {
-      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
-      //   if (response.success) {
-      //     this.getBu1List()
-      //   }
-      // })
-    }
-    deleteJob(job: JobModel) {
-      // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
-      //   if (response.success) {
-      //     this.getBu1List()
-      //   }
-      // })
-    }
+   
   
   }
   

src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-types/assessment-types.component.html

@@ -2,7 +2,7 @@
     <div class="flex justify-between">
         <div class="flex pr-2">
             <div class="flex">
-                <div class="flex items-center">
+                <!-- <div class="flex items-center">
                     <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
                         [(ngModel)]="isDataListChecked">
                     <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
@@ -15,7 +15,7 @@
                             [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
                     </button>
                     <label class="text-sm text-gray-500 ml-2">Select All</label>
-                </div>
+                </div> -->
             </div>
         </div>
         <div class="flex justify-end">
@@ -30,7 +30,7 @@
                     </div>
                 </div>
             </div>
-            <div class="px-1">
+            <!-- <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                     (click)="modalStatus='add';dataListSelect()" data-hs-overlay="#assessment-types-modal">
                     <i class="ri-add-line"></i>
@@ -43,7 +43,7 @@
                     <i class="ti ti-trash fs-l"></i>
                     Delete
                 </button>
-            </div>
+            </div> -->
             <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
                     <i class="ti ti-book fs-l"></i>
@@ -81,19 +81,20 @@
             <tbody *ngIf="dataListFilter().length">
                 <tr
                     *ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
-                    <td class="flex justify-around">
+                    <!-- <td class="flex justify-around">
                         <input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check"
                             (ngModelChange)="dataListCheck()">
                         <label>{{item.code}}</label>
-                    </td>
+                    </td> -->
+                    <td class="text-center">{{item.code}}</td>
                     <td>{{item.nameTypeTh}} ({{item.nameTypeEn}})</td>
                     <td>{{item.name}}</td>
                     <td class="flex justify-center items-center">
                         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
                             (click)="modalStatus='edit';dataListSelect(item)"
                             data-hs-overlay="#assessment-types-modal"></i>
-                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
-                            data-hs-overlay="#assessment-types-delete-modal"></i>
+                        <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
+                            data-hs-overlay="#assessment-types-delete-modal"></i> -->
                     </td>
                 </tr>
             </tbody>

src/app/shared/model/bu6.model.ts

@@ -13,12 +13,12 @@ export class MyBu6Model implements Bu6Model {
     edesc: string;
     parent: string;
     companyId: string;
-    constructor(data: Partial<Bu6Model>) {
-        this.bu6id = data.bu6id || ""
-        this.tdesc = data.tdesc || ""
-        this.edesc = data.edesc || ""
-        this.parent = data.parent || ""
-        this.companyId = data.companyId || ""
+    constructor(data?: Partial<Bu6Model>) {
+        this.bu6id = data?.bu6id || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+        this.parent = data?.parent || ""
+        this.companyId = data?.companyId || ""
     }
 }
 

src/app/shared/model/bu7.model.ts

@@ -13,12 +13,12 @@ export class MyBu7Model implements Bu7Model {
     edesc: string;
     parent: string;
     companyId: string;
-    constructor(data: Partial<Bu7Model>) {
-        this.bu7id = data.bu7id || ""
-        this.tdesc = data.tdesc || ""
-        this.edesc = data.edesc || ""
-        this.parent = data.parent || ""
-        this.companyId = data.companyId || ""
+    constructor(data?: Partial<Bu7Model>) {
+        this.bu7id = data?.bu7id || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+        this.parent = data?.parent || ""
+        this.companyId = data?.companyId || ""
     }
 }
 

src/app/shared/model/competencycourse.model.ts

@@ -5,6 +5,7 @@ export interface CompetencycourseModel {
     tdesc: string
     courseDetail: string
     courseTopic: string
+    courseLinkMylearn: string
 }
 
 export class MyCompetencycourseModel implements CompetencycourseModel {
@@ -14,6 +15,7 @@ export class MyCompetencycourseModel implements CompetencycourseModel {
     tdesc: string
     courseDetail: string
     courseTopic: string
+    courseLinkMylearn: string
     constructor(data: Partial<CompetencycourseModel>) {
         this.competencyCourseId = data.competencyCourseId || ""
         this.companyId = data.companyId || ""
@@ -21,6 +23,7 @@ export class MyCompetencycourseModel implements CompetencycourseModel {
         this.tdesc = data.tdesc || ""
         this.courseDetail = data.courseDetail || ""
         this.courseTopic = data.courseTopic || ""
+        this.courseLinkMylearn = data.courseLinkMylearn || ""
     }
 }
 

src/app/shared/model/employee.model.ts

@@ -198,92 +198,92 @@ export class MyEmployeeModel implements EmployeeModel {
     ssoFlag: string
     thFullName: string
     engFullName: string
-    constructor(data: Partial<EmployeeModel>) {
-        this.employeeId = data.employeeId || ""
-        this.prefix = new MyPrefixModel(data.prefix || {})
-        this.fname = data.fname || ""
-        this.lname = data.lname || ""
-        this.efname = data.efname || ""
-        this.elname = data.elname || ""
-        this.nickname = data.nickname || ""
-        this.enickname = data.enickname || ""
-        this.birthDate = data.birthDate || ""
-        this.status = new MyStatusModel(data.status || {})
-        this.age = new MyAgeModel(data.age || {})
-        this.swipeCardId = data.swipeCardId || ""
-        this.idPeople = data.idPeople || ""
-        this.idexpdate = data.idexpdate || ""
-        this.passport_no = data.passport_no || ""
-        this.passport_expire_date = data.passport_expire_date || ""
-        this.height = data.height || ""
-        this.weight = data.weight || ""
-        this.blood = data.blood || ""
-        this.rh = data.rh || ""
-        this.eyeColor = data.eyeColor || ""
-        this.hairColor = data.hairColor || ""
-        this.shirtSize = data.shirtSize || ""
-        this.waistSize = data.waistSize || ""
-        this.national = new MyNationalModel(data.national || {})
-        this.nationality = new MyNationalityModel(data.nationality || {})
-        this.religion = new MyReligionModel(data.religion || {})
-        this.sex = data.sex || ""
-        this.email = data.email || ""
-        this.emailMicrosoft365 = data.emailMicrosoft365 || ""
-        this.emailPersonal = data.emailPersonal || ""
-        this.picture = data.picture || ""
-        this.telNo = data.telNo || ""
-        this.mobile = data.mobile || ""
-        this.position = new MyPositionModel(data.position || {})
-        this.jobCode = new MyJobCodeModel(data.jobCode || {})
-        this.personalLevel = new MyPLModel(data.personalLevel || {})
-        this.companyId = data.companyId || ""
-        this.idExpireDate = data.idExpireDate || ""
-        this.passportNo = data.passportNo || ""
-        this.passportExpireDate = data.passportExpireDate || ""
-        this.bossId = data.bossId || ""
-        this.boss = new MyBossModel(data.boss || {})
-        this.bu1 = new MyBu1Model(data.bu1 || {})
-        this.bu2 = new MyBu2Model(data.bu2 || {})
-        this.bu3 = new MyBu3Model(data.bu3 || {})
-        this.bu4 = new MyBu4Model(data.bu4 || {})
-        this.bu5 = new MyBu5Model(data.bu5 || {})
-        this.bu6 = new MyBu6Model(data.bu6 || {})
-        this.bu7 = new MyBu7Model(data.bu7 || {})
-        this.empGroup = new MyEmpGroupModel(data.empGroup || {})
-        this.firstHireDate = data.firstHireDate || ""
-        this.startDate = data.startDate || ""
-        this.ageWork = new MyAgeModel(data.ageWork || {})
-        this.empType = new MyEmpTypeModel(data.empType || {})
-        this.time0 = new MyTime0Model(data.time0 || {})
-        this.publicHoliday = data.publicHoliday || ""
-        this.proDate = data.proDate || ""
-        this.proEvery = data.proEvery || ""
-        this.approveDate = data.approveDate || ""
-        this.workarea = new MyWorkareaModel(data.workarea || {})
-        this.telExt = data.telExt || ""
-        this.costcenter = new MyCostcenterModel(data.costcenter || {})
-        this.branch = new MyBranchModel(data.branch || {})
-        this.zeemeLogOnName = data.zeemeLogOnName || ""
-        this.salatype = new MySalatypeModel(data.salatype || {})
-        this.effSalatype = data.effSalatype || ""
-        this.salary = data.salary || ""
-        this.empEvery = data.empEvery || ""
-        this.curchgincDate = data.curchgincDate || ""
-        this.receiverBankNo = data.receiverBankNo || ""
-        this.receiverBank = data.receiverBank || ""
-        this.receiverBankBranch = data.receiverBankBranch || ""
-        this.banks = data.banks?.map(x => new MyBanksModel(x)) || []
-        this.taxTable = data.taxTable || ""
-        this.compenTaxTable = data.compenTaxTable || ""
-        this.idTax = data.idTax || ""
-        this.calTax = data.calTax || ""
-        this.fixTax = data.fixTax || ""
-        this.calSoc = data.calSoc || ""
-        this.calPvf = data.calPvf || ""
-        this.taxMethodAct = data.taxMethodAct || ""
-        this.ssoFlag = data.ssoFlag || ""
-        this.thFullName = data.thFullName || ""
-        this.engFullName = data.engFullName || ""
+    constructor(data?: Partial<EmployeeModel>) {
+        this.employeeId = data?.employeeId || ""
+        this.prefix = new MyPrefixModel(data?.prefix || {})
+        this.fname = data?.fname || ""
+        this.lname = data?.lname || ""
+        this.efname = data?.efname || ""
+        this.elname = data?.elname || ""
+        this.nickname = data?.nickname || ""
+        this.enickname = data?.enickname || ""
+        this.birthDate = data?.birthDate || ""
+        this.status = new MyStatusModel(data?.status || {})
+        this.age = new MyAgeModel(data?.age || {})
+        this.swipeCardId = data?.swipeCardId || ""
+        this.idPeople = data?.idPeople || ""
+        this.idexpdate = data?.idexpdate || ""
+        this.passport_no = data?.passport_no || ""
+        this.passport_expire_date = data?.passport_expire_date || ""
+        this.height = data?.height || ""
+        this.weight = data?.weight || ""
+        this.blood = data?.blood || ""
+        this.rh = data?.rh || ""
+        this.eyeColor = data?.eyeColor || ""
+        this.hairColor = data?.hairColor || ""
+        this.shirtSize = data?.shirtSize || ""
+        this.waistSize = data?.waistSize || ""
+        this.national = new MyNationalModel(data?.national || {})
+        this.nationality = new MyNationalityModel(data?.nationality || {})
+        this.religion = new MyReligionModel(data?.religion || {})
+        this.sex = data?.sex || ""
+        this.email = data?.email || ""
+        this.emailMicrosoft365 = data?.emailMicrosoft365 || ""
+        this.emailPersonal = data?.emailPersonal || ""
+        this.picture = data?.picture || ""
+        this.telNo = data?.telNo || ""
+        this.mobile = data?.mobile || ""
+        this.position = new MyPositionModel(data?.position || {})
+        this.jobCode = new MyJobCodeModel(data?.jobCode || {})
+        this.personalLevel = new MyPLModel(data?.personalLevel || {})
+        this.companyId = data?.companyId || ""
+        this.idExpireDate = data?.idExpireDate || ""
+        this.passportNo = data?.passportNo || ""
+        this.passportExpireDate = data?.passportExpireDate || ""
+        this.bossId = data?.bossId || ""
+        this.boss = new MyBossModel(data?.boss || {})
+        this.bu1 = new MyBu1Model(data?.bu1 || {})
+        this.bu2 = new MyBu2Model(data?.bu2 || {})
+        this.bu3 = new MyBu3Model(data?.bu3 || {})
+        this.bu4 = new MyBu4Model(data?.bu4 || {})
+        this.bu5 = new MyBu5Model(data?.bu5 || {})
+        this.bu6 = new MyBu6Model(data?.bu6 || {})
+        this.bu7 = new MyBu7Model(data?.bu7 || {})
+        this.empGroup = new MyEmpGroupModel(data?.empGroup || {})
+        this.firstHireDate = data?.firstHireDate || ""
+        this.startDate = data?.startDate || ""
+        this.ageWork = new MyAgeModel(data?.ageWork || {})
+        this.empType = new MyEmpTypeModel(data?.empType || {})
+        this.time0 = new MyTime0Model(data?.time0 || {})
+        this.publicHoliday = data?.publicHoliday || ""
+        this.proDate = data?.proDate || ""
+        this.proEvery = data?.proEvery || ""
+        this.approveDate = data?.approveDate || ""
+        this.workarea = new MyWorkareaModel(data?.workarea || {})
+        this.telExt = data?.telExt || ""
+        this.costcenter = new MyCostcenterModel(data?.costcenter || {})
+        this.branch = new MyBranchModel(data?.branch || {})
+        this.zeemeLogOnName = data?.zeemeLogOnName || ""
+        this.salatype = new MySalatypeModel(data?.salatype || {})
+        this.effSalatype = data?.effSalatype || ""
+        this.salary = data?.salary || ""
+        this.empEvery = data?.empEvery || ""
+        this.curchgincDate = data?.curchgincDate || ""
+        this.receiverBankNo = data?.receiverBankNo || ""
+        this.receiverBank = data?.receiverBank || ""
+        this.receiverBankBranch = data?.receiverBankBranch || ""
+        this.banks = data?.banks?.map(x => new MyBanksModel(x)) || []
+        this.taxTable = data?.taxTable || ""
+        this.compenTaxTable = data?.compenTaxTable || ""
+        this.idTax = data?.idTax || ""
+        this.calTax = data?.calTax || ""
+        this.fixTax = data?.fixTax || ""
+        this.calSoc = data?.calSoc || ""
+        this.calPvf = data?.calPvf || ""
+        this.taxMethodAct = data?.taxMethodAct || ""
+        this.ssoFlag = data?.ssoFlag || ""
+        this.thFullName = data?.thFullName || ""
+        this.engFullName = data?.engFullName || ""
     }
 }
 

src/app/shared/model/level.model.ts

+export interface LevelModel {
+    userLevel: string
+    tdesc: string
+    edesc: string
+}
+export class MyLevelModel implements LevelModel {
+    userLevel: string
+    tdesc: string
+    edesc: string
+    constructor(data?: Partial<LevelModel>) {
+        this.userLevel = data?.userLevel || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+    }
+}
+

src/app/shared/model/role.model.ts

+export interface RoleModel {
+    roleId: string
+    tdesc: string
+    edesc: string
+}
+export class MyRoleModel implements RoleModel {
+    roleId: string
+    tdesc: string
+    edesc: string
+    constructor(data?: Partial<RoleModel>) {
+        this.roleId = data?.roleId || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
+    }
+}
+

src/app/shared/model/user.model.ts

+import { LevelModel, MyLevelModel } from "./level.model";
+import { EmployeeModel, MyEmployeeModel } from "./employee.model";
+import { MyRoleModel, RoleModel } from "./role.model";
+
+export interface UserModel {
+    usernameId: string
+    empId: string
+    companyId: string
+    userRole: string
+    userLevel: string
+    lang: string
+    passwordStatus: string
+    expireDate: string
+    adAccount: string
+    status: string
+    role: RoleModel
+    level: LevelModel
+    employee: EmployeeModel
+}
+
+export class MyUserModel implements UserModel {
+    usernameId: string
+    empId: string
+    companyId: string
+    userRole: string
+    userLevel: string
+    lang: string
+    passwordStatus: string
+    expireDate: string
+    adAccount: string
+    status: string
+    role: RoleModel
+    level: LevelModel
+    employee: EmployeeModel
+    constructor(data?: Partial<UserModel>) {
+        this.usernameId = data?.usernameId || ""
+        this.empId = data?.empId || ""
+        this.companyId = data?.companyId || ""
+        this.userRole = data?.userRole || ""
+        this.userLevel = data?.userLevel || ""
+        this.lang = data?.lang || ""
+        this.passwordStatus = data?.passwordStatus || ""
+        this.expireDate = data?.expireDate || ""
+        this.adAccount = data?.adAccount || ""
+        this.status = data?.status || ""
+        this.role = new MyRoleModel(data?.role)
+        this.level = new MyLevelModel(data?.level)
+        this.employee = new MyEmployeeModel(data?.employee)
+    }
+}
+

src/app/shared/services/user.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 { UserModel } from '../model/user.model';
+import { RoleModel } from '../model/role.model';
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  api = "/user"
+  urlApi = environment.baseUrl + this.api
+  constructor(private http: HttpClient) {
+  }
+  getList(pwdempty?: string): Observable<UserModel[]> {
+    return this.http.get<UserModel[]>(this.urlApi + "/lists" + (pwdempty ? '?pwdempty=' + pwdempty : ""))
+  }
+  getRoleList(): Observable<RoleModel[]> {
+    return this.http.get<RoleModel[]>(this.urlApi + "/role/lists")
+  }
+  getLevelList(): Observable<RoleModel[]> {
+    return this.http.get<RoleModel[]>(this.urlApi + "/level/lists")
+  }
+  checkUser(username: string): Observable<AlertModel> {
+    return this.http.get<AlertModel>(this.urlApi + "/validate-username/" + username)
+  }
+  changePassword(body: {
+    usernameId: string,
+    empId: string,
+    companyId: string,
+    oldPassword: string,
+    newPassword: string,
+  }): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi + "/change-password", body)
+  }
+  post(body: UserModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi + "/create", body)
+  }
+  delete(body: UserModel[]): Observable<AlertModel> {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    };
+    return this.http.delete<AlertModel>(this.urlApi + '/delete', options)
+  }
+}