แก้ refresh-token

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

@@ -183,9 +183,9 @@
                 </div>
                 <ng-container *ngIf="changePassword">
                     <label class="ti-form-label mt-2rem">รหัสผ่านเก่า*</label>
-                    <input type="password" class="ti-form-input" [(ngModel)]="userPassword.oldPassword">
+                    <input type="text" class="masked-input ti-form-input" [(ngModel)]="userPassword.oldPassword">
                     <label class="ti-form-label mt-2rem">รหัสผ่านใหม่*</label>
-                    <input type="password" class="ti-form-input" [(ngModel)]="userPassword.newPassword">
+                    <input type="text" class="masked-input ti-form-input" [(ngModel)]="userPassword.newPassword">
                 </ng-container>
                 <div class="flex justify-end mt-2rem mb-1rem">
                     <button type="button"

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

@@ -159,7 +159,7 @@
                 <label class="ti-form-label mt-2rem">รหัสพนักงาน</label>
                 <input type="text" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="userPassword.empId">
                 <label class="ti-form-label mt-2rem">กำหนดผ่านใหม่*</label>
-                <input type="password" class="ti-form-input" [(ngModel)]="userPassword.newPassword">
+                <input type="text" class="masked-input  ti-form-input" [(ngModel)]="userPassword.newPassword">
                 <div class="flex justify-end mt-2rem mb-1rem">
                     <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/competency-management/group-competencies/group-competencies.component.html

 <ng-container *ngIf="!editTab">
     <div class="w-full min-height-50px mb-10px justify-between items-center">
-        <div class="flex">
-        </div>
-
         <div class="flex justify-end">
             <div class="px-1">
                 <div class="relative shadow-md">
@@ -18,7 +15,7 @@
             <div class="px-1">
                 <button type="button"
                     class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-45px m-0 shadow-md"
-                    data-hs-overlay="#group-competencies-modal-add"
+                    data-hs-overlay="#group-competencies-upload-modal"
                     (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
                     <i class="ti ti-file-plus"></i>
                     import
@@ -130,7 +127,7 @@
 </ng-container>
 
 
-<div id="group-competencies-modal-add" class="hs-overlay hidden ti-modal">
+<div id="group-competencies-upload-modal" class="hs-overlay hidden ti-modal">
     <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">
@@ -156,7 +153,7 @@
                 </div>
                 <div class="flex justify-center mt-2rem mb-1rem space-x-4">
                     <button type="submit" class="ti-btn ti-btn-secondary"
-                        data-hs-overlay="#group-competencies-modal-add" [class.ti-btn-disabled]="!selectedFile"
+                        data-hs-overlay="#group-competencies-upload-modal" [class.ti-btn-disabled]="!selectedFile"
                         (click)="uploadFile()" [disabled]="!selectedFile" [disabled]="!selectedFile">
                         อัปโหลด
                     </button>

src/app/components/competency-assessment/competency-management/group-competencies/group-competencies.component.ts

@@ -58,6 +58,7 @@ export class GroupCompetenciesComponent {
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
+          this.dataLoading = false
         } else {
           this.showAlert(response.message, 'error')
           this.dataLoading = false

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

@@ -279,6 +279,7 @@ export class CompetencyTopic {
           this.showAlert(response.message, 'success')
           this.getCompetencytypeList()
           this.getCompetencytopicList()
+          this.dataLoading = false
         } else {
           this.showAlert(response.message, 'error')
           this.dataLoading = false

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

@@ -140,6 +140,7 @@ import { UserService } from 'src/app/shared/services/user.service';
 import { ManageUserComponent } from '../company-components/account-settings/manage-user/manage-user.component';
 import { PmstypeService } from 'src/app/shared/services/pmstype.service';
 import { PmstopicService } from 'src/app/shared/services/pmstopic.service';
+import { PmsGroupAssessmentService } from 'src/app/shared/services/pms-group-assessment.service';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -310,6 +311,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     UserService,
     PmstypeService,
     PmstopicService,
+    PmsGroupAssessmentService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/components/performance-management-evaluation/assessment-management/assessment-management.component.html

@@ -26,16 +26,11 @@
         <div class="mt-3 px-2rem !-mt-3 pt-50px">
             <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"
                 *ngIf="activeTab === 'underline-1'">
-                <app-evaluation-grouping *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-evaluation-grouping>
-                <app-edit-evaluation-grouping *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event"
-                    (sendGroupShow)="groupShow=$event"></app-edit-evaluation-grouping>
+                <app-evaluation-grouping (sendPathTitle)="pathTitle=$event"></app-evaluation-grouping>
             </div>
             <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2"
                 *ngIf="activeTab === 'underline-2'">
-                <app-assigning-approvers *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-assigning-approvers>
+                <app-assigning-approvers></app-assigning-approvers>
             </div>
         </div>
     </div>

src/app/components/performance-management-evaluation/assessment-management/assessment-management.component.ts

@@ -6,7 +6,6 @@ import { Component } from '@angular/core';
   styleUrls: ['./assessment-management.component.scss']
 })
 export class AssessmentManagementComponent {
-  pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน','จัดกลุ่มการประเมิน']
-  activeTab: string = 'underline-1';
-  groupShow = '1'
+  pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', 'จัดกลุ่มการประเมิน']
+  activeTab: string = 'underline-1'
 }

src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/edit-evaluation-grouping/edit-evaluation-grouping.component.scss

-.button-clear {
-    position: absolute;
-    top: 96px;
-    z-index: 1;
-    right: 41vw;
-  }
-  .button-help {
-    position: absolute;
-    top: 0px;
-    z-index: 1;
-    right: 0vw;
-    margin: 4.2rem;
-    margin-right: 10px; /* เพิ่มใหม่ 12/16*/
-  }
-  
-  table.ti-custom-table th {
-    height: 60px;
-  }
-  
-  table.ti-custom-table thead {
-    height: 50px;
-  }
-  table.ti-custom-table thead th span {
-    font-size: 12px;
-    font-weight: bold;
-  }
-  a.custom-link {
-    padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
-  }
-  /* สไตล์ของแถบเมนู */
-  .nav-tabs {
-    display: flex;
-    width: 100%;
-    cursor: pointer;
-    margin-bottom: 10px;
-    height: 20%;
-  }
-  
-  .nav-item {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  
-  .nav-link {
-    text-decoration: none;
-    padding: 10px 20px;
-    display: inline-block;
-    font-size: large;
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: #ccc;
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .nav-link:hover {
-    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
-  
-  .nav-link.active {
-    color: #ffffff; /* สีตัวอักษรในสถานะ active */
-    font-size: large;
-    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
-    background-color: rgb(var(--color-primary));
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: rgb(var(--color-primary));
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .tab-content {
-    margin-top: 20px;
-  }
-  
-  .tab-pane.active {
-    display: block;
-  }
-  
-  .nav-item-text {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
-    text-decoration: none;
-    display: inline-block;
-    font-size: large;
-    color: #569bf5;
-    border-bottom: 2px solid #569bf5;
-    line-height: 0.8;
-  }
-  .ti-pagination .page-link.active {
-    background-color: #569bf5;
-    color: white;
-    border-radius: 50%;
-    padding: 8px 12px;
-  }
-  .box-body{
-    padding: 0rem;
-  }
-  .page{
-    min-height: 0vh;
-  }
-  
-  .ti-modal {
-    overflow: hidden;
-  }
-  .header-title-type {
-    width: 100%;
-    min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
-    // margin-top: 50px;
-    // margin-bottom: 16px;
-    justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
-    align-items: center; /* จัดกลางแนวตั้ง */
-    padding-top: 50px;
-    padding-bottom: 1rem;
-  }
-  .bg-input-readonly{
-    background-color:  rgb(241 245 249);
-  }
\ No newline at end of file

src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/edit-evaluation-grouping/edit-evaluation-grouping.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 { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
+import { MyPmsGroupAssessment1Model, PmsGroupAssessment1Model } from 'src/app/shared/model/pms-group-assessment1.model';
+import { PmsGroupAssessmentService } from 'src/app/shared/services/pms-group-assessment.service';
 @Component({
   selector: 'app-edit-evaluation-grouping',
   templateUrl: './edit-evaluation-grouping.component.html',
   styleUrls: ['./edit-evaluation-grouping.component.scss']
 })
 export class EditEvaluationGroupingComponent {
-  @Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', 'จัดกลุ่มประเมิน'];
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  @Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  @Output() sendOnEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Input() pl: PLModel = new MyPLModel()
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  search = ""
+  currentModal: 'add' | 'edit' | 'delete' | 'deleteGroup' = "add"
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', tab.text]);
-    this.activeTab = tab.id;
-  }
-  onBack() {
-    this.sendGroupShow.emit('1');  // เปลี่ยนกลับไปหน้า 1
-  }
-  // การจัดการการเปิดปิด modal
-  modalOptions: {
-    [nameModal: string]: {
-      isModalOpen: boolean;
-      modalSize: string;
-      backdropClose: boolean;
-    };
-  } = {
-    "add": {
-      isModalOpen: false,
-      modalSize: 'm',
-      backdropClose: true,
-    },
-    "edit": {
-      isModalOpen: false,
-      modalSize: 'm',
-      backdropClose: true,
-    }
-  };
+  pmsGroupAssessment: { loading: boolean, select: PmsGroupAssessment1Model, dataList: { check: boolean, data: PmsGroupAssessment1Model }[] } = { loading: false, select: new MyPmsGroupAssessment1Model(), dataList: [] }
 
-  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
-    this.modalOptions[name].modalSize = size;
-    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
-    this.modalOptions[name].isModalOpen = true;
-    this.currentModal = name;  // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
-    document.body.style.overflow = 'hidden';
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
+  constructor(private toastr: ToastrService,
+    private pmsGroupAssessmentService: PmsGroupAssessmentService,
+    private cdr: ChangeDetectorRef
+  ) { }
+  ngOnInit(): void {
+    this.getPmsGroupAssessmentBy_plId()
   }
 
-  closeModal(name: string) {
-    this.modalOptions[name].isModalOpen = false;
-    if (!this.isAnyModalOpen()) {
-      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
-    }
+  getPmsGroupAssessmentBy_plId() {
+    this.pmsGroupAssessment.loading = true
+    this.pmsGroupAssessmentService.getBy_plId(this.pl.plId).subscribe({
+      next: response => {
+        this.pmsGroupAssessment.dataList = response.pmsGroupAssessment1List.map(x => ({ check: false, data: new MyPmsGroupAssessment1Model(x) }))
+        this.pmsGroupAssessment.loading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
+        this.searchChange();
+        this.cdr.detectChanges();
+      }, error: error => {
+        this.pmsGroupAssessment.loading = false
+        this.cdr.detectChanges()
+      }
+    });
   }
-
-  isAnyModalOpen(): boolean {
-    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
+  pmsGroupAssessmentListFilter() {
+    return this.pmsGroupAssessment.dataList.filter(x => {
+      const data = x.data
+      const match = data.pmsTopic.pmsTopicId.toLowerCase().includes(this.search.toLowerCase()) || data.pmsTopic.tdesc.toLowerCase().includes(this.search.toLowerCase())
+      return match;
+    });
   }
-
-  // ฟังก์ชัน toggle checkbox
-  isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
-  
-  toggleCheckbox() {
-    this.isChecked = !this.isChecked; // สลับสถานะ
+  selectPmsGroupAssessment(data: PmsGroupAssessment1Model) {
+    this.pmsGroupAssessment.select = new MyPmsGroupAssessment1Model(data)
   }
 
-  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
-  addUser() {
-
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.pmsGroupAssessmentListFilter().length / 10) }, (_, i) => i + 1)
+    this.dataListCheck();
+    this.cdr.detectChanges()
   }
-  
-  currentModal = "";
-  
-  constructor(private toastr: ToastrService) { }
-
-  showSuccess() {
-    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.pmsGroupAssessmentListFilter().forEach(x => x.check = selectAll);
+    this.dataListCheck();
   }
-
-  showSuccessEdit() {
-    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+  dataListCheck() {
+    const dataCheck = this.pmsGroupAssessmentListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.pmsGroupAssessment.dataList.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
   }
 
-  showSuccessDelete() {
-    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+  onBack() {
+    this.sendOnEdit.emit(false);
   }
+
 }

src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.scss

-.button-clear {
-    position: absolute;
-    top: 96px;
-    z-index: 1;
-    right: 41vw;
-  }
-  .button-help {
-    position: absolute;
-    top: 0px;
-    z-index: 1;
-    right: 0vw;
-    margin: 4.2rem;
-    margin-right: 10px; /* เพิ่มใหม่ 12/16*/
-  }
-  
-  table.ti-custom-table thead {
-    height: 60px;
-  }
-  table.ti-custom-table thead th span {
-    font-size: 12px;
-    font-weight: bold;
-  }
-  .ti-custom-table td{
-    padding-left: 0.9rem;
-    padding-right: 1rem;
-  }
-  
-  .ti-custom-table thead th:first-child {
-    width: 105px; /* ปรับความกว้างตามที่ต้องการ */
-    text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */
-  }
-  .ti-custom-table thead th:last-child {
-    width: 150px; /* ปรับความกว้างตามที่ต้องการ */
-  }
-  a.custom-link {
-    padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
-  }
-  /* สไตล์ของแถบเมนู */
-  .nav-tabs {
-    display: flex;
-    width: 100%;
-    cursor: pointer;
-    margin-bottom: 10px;
-    height: 20%;
-  }
-  
-  .nav-item {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  
-  .nav-link {
-    text-decoration: none;
-    padding: 10px 20px;
-    display: inline-block;
-    font-size: large;
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: #ccc;
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .nav-link:hover {
-    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
-  
-  .nav-link.active {
-    color: #ffffff; /* สีตัวอักษรในสถานะ active */
-    font-size: large;
-    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
-    background-color: rgb(var(--color-primary));
-    border-width: 2px 2px 0px 2px;
-    border-style: solid;
-    border-color: rgb(var(--color-primary));
-    border-radius: 5px 5px 0px 0px;
-  }
-  
-  .tab-content {
-    margin-top: 20px;
-  }
-  
-  .tab-pane.active {
-    display: block;
-  }
-  
-  .nav-item-text {
-    list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
-    text-decoration: none;
-    display: inline-block;
-    font-size: large;
-    color: #569bf5;
-    border-bottom: 2px solid #569bf5;
-    line-height: 0.8;
-  }
-  .ti-pagination .page-link.active {
-    background-color: #569bf5;
-    color: white;
-    border-radius: 50%;
-    padding: 8px 12px;
-  }
-  .box-body{
-    padding: 0rem;
-  }
-  .page{
-    min-height: 0vh;
-  }
-  
-  .ti-modal-content-alert{
-    width: 35%;  /* ความกว้างที่คุณต้องการ */
-    position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
-    top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
-    left: 50%;  /* ให้อยู่กลางในแนวนอน */
-    transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
-    background-color: #ffffff;
-  }
-  .header-title-type {
-    width: 100%;
-    min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
-    // margin-top: 50px;
-    // margin-bottom: 10px;
-    justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
-    align-items: center; /* จัดกลางแนวตั้ง */
-    padding-top: 50px;
-    padding-bottom: 1rem;
-  }
-  
-  
-  
\ No newline at end of file

src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.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 { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
+import { FileService } from 'src/app/shared/services/file.service';
+import { PLService } from 'src/app/shared/services/pl.service';
 
 @Component({
-    selector: 'app-evaluation-grouping',
-    templateUrl: './evaluation-grouping.component.html',
-    styleUrls: ['./evaluation-grouping.component.scss']
+  selector: 'app-evaluation-grouping',
+  templateUrl: './evaluation-grouping.component.html',
+  styleUrls: ['./evaluation-grouping.component.scss']
 })
 export class EvaluationGroupingComponent {
-  @Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', 'จัดกลุ่มประเมิน'];
   @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  @Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
-  isChecked: boolean = false;
-  
+  onEdit = false
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', tab.text]);
-    this.activeTab = tab.id;
-  }
-
-  onEdit(){
-    this.sendGroupShow.emit('2');
-  }
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  search = ""
+  currentModal: 'add' | 'edit' | 'delete' | 'deleteGroup' = "add"
 
-  toggleCheckbox(): void {
-    this.isChecked = !this.isChecked;
-  }
+  selectedFile: File | null = null;
+  selectedFileName: string = 'กรุณาเลือกไฟล์';
 
-  // การจัดการการเปิดปิด modal
-  modalOptions: {
-    [nameModal: string]: {
-      isModalOpen: boolean;
-      modalSize: string;
-      backdropClose: boolean;
-    };
-  } = {
-    "add": {
-      isModalOpen: false,
-      modalSize: 'm',
-      backdropClose: true,
-    },
-    "edit": {
-      isModalOpen: false,
-      modalSize: 'm',
-      backdropClose: true,
-    }
-  };
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
 
-  openModal(name: string, size: string, closeOnBackdrop?: boolean) {
-    this.modalOptions[name].modalSize = size;
-    this.modalOptions[name].backdropClose = closeOnBackdrop || false;
-    this.modalOptions[name].isModalOpen = true;
-    this.currentModal = name;  // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
-    document.body.style.overflow = 'hidden';
+  pl: { loading: boolean, select: PLModel, dataList: { check: boolean, data: PLModel }[] } = { loading: false, select: new MyPLModel(), dataList: [] }
+  constructor(private toastr: ToastrService, private plService: PLService, private cdr: ChangeDetectorRef, private fileService: FileService) { }
+  ngOnInit(): void {
+    this.onSendPathTitle()
+    this.getPLList()
+  }
+  onFileSelected(event: any) {
+    this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
+    this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
   }
 
-  closeModal(name: string) {
-    this.modalOptions[name].isModalOpen = false;
-    if (!this.isAnyModalOpen()) {
-      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
+  uploadFile() {
+    if (!this.selectedFile) {
+      alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
+      return
     }
+    const formData = new FormData();
+    formData.append('file', this.selectedFile);
+    this.pl.loading = true
+    this.fileService.uploadExcel(formData, '').subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.pl.loading = false
+        } else {
+          this.showAlert(response.message, 'error')
+          this.pl.loading = false
+          this.cdr.detectChanges()
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+        this.pl.loading = false
+        this.cdr.detectChanges()
+      }
+    })
   }
+  downloadFile() {
+    const fileName = '.xlsx'
+    this.fileService.downloadTemplate(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')
+      }
+    })
 
-  isAnyModalOpen(): boolean {
-    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
   }
-
-  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
-  addUser() {
-    // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
-    console.log('เพิ่มผู้ใช้งาน');
+  getPLList() {
+    this.pl.loading = true
+    this.plService.getList().subscribe({
+      next: response => {
+        this.pl.dataList = response.map(x => ({ check: false, data: new MyPLModel(x) }))
+        this.pl.loading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
+        this.searchChange();
+        this.cdr.detectChanges();
+      }, error: error => {
+        this.pl.loading = false
+        console.error('Error fetching employee types:', error);
+        this.cdr.detectChanges()
+      }
+    });
   }
-
-  deleteUser() {
-    // ฟังก์ชันสำหรับการลบผู้ใช้งาน
-    console.log('ลบผู้ใช้งาน');
+  plListFilter() {
+    return this.pl.dataList.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;
+    });
   }
-
-  editUser() {
-    // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
-    console.log('แก้ไขผู้ใช้งาน');
+  selectPl(data: PLModel) {
+    this.pl.select = new MyPLModel(data)
   }
-  currentModal = ""
-  constructor(private toastr: ToastrService) { }
-  showSuccess() {
-    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1)
+    this.dataListCheck();
+    this.cdr.detectChanges()
   }
-  showSuccessEdit() {
-    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+  dataListCheckAll() {
+    const selectAll = this.isDataListCheckedAll;
+    this.plListFilter().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.pl.dataList.filter(x => x.check).length
+    this.isDataListChecked = Boolean(this.numDataListChecked)
   }
-  showSuccessDelete() {
-    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+  onSendPathTitle() {
+    if (this.onEdit) {
+      this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', 'จัดกลุ่มประเมิน', 'แก้ไขกลุ่มการประเมิน']);
+    } else if (!this.onEdit) {
+      this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', 'จัดกลุ่มประเมิน']);
+    }
+  }
+
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
-    });
+    })
   }
+
 }
 

src/app/shared/model/pms-group-assessment.model.ts

+import { MyPLModel, PLModel } from "./pl.model"
+import { MyPmsGroupAssessment1Model, PmsGroupAssessment1Model } from "./pms-group-assessment1.model"
+
+export interface PmsGroupAssessmentModel {
+    personalLevel: PLModel
+    companyId: string
+    pmsGroupAssessment1List: PmsGroupAssessment1Model[]
+}
+
+
+export class MyPmsGroupAssessmentModel implements PmsGroupAssessmentModel {
+    personalLevel: PLModel
+    companyId: string
+    pmsGroupAssessment1List: PmsGroupAssessment1Model[]
+    constructor(data?: Partial<PmsGroupAssessmentModel>) {
+        this.personalLevel = new MyPLModel(data?.personalLevel)
+        this.companyId = data?.companyId || ""
+        this.pmsGroupAssessment1List = data?.pmsGroupAssessment1List?.map(x => new MyPmsGroupAssessment1Model(x)) || []
+    }
+}
+

src/app/shared/model/pms-group-assessment1.model.ts

+import { MyPmstopicModel, PmstopicModel } from "./pmstopic.model"
+
+export interface PmsGroupAssessment1Model {
+    companyId: string
+    pmsTopic: PmstopicModel
+}
+
+
+export class MyPmsGroupAssessment1Model implements PmsGroupAssessment1Model {
+    companyId: string
+    pmsTopic: PmstopicModel
+    constructor(data?: Partial<PmsGroupAssessment1Model>) {
+        this.companyId = data?.companyId || ""
+        this.pmsTopic = new MyPmstopicModel(data?.pmsTopic)
+    }
+}
+

src/app/shared/services/http-request.interceptor.ts

@@ -16,7 +16,7 @@ export class HttpRequestInterceptor {
   private refreshTokenSubject: BehaviorSubject<string | null> = new BehaviorSubject<string | null>(null);
   private responseCache = new Map<string, any>();  // ใช้เก็บ cache ของ response
 
-  constructor(private authService: AuthService) {}
+  constructor(private authService: AuthService) { }
 
   // intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   //   if (req.url.startsWith("./") || !sessionStorage.getItem("accessToken")) {
@@ -36,7 +36,7 @@ export class HttpRequestInterceptor {
   // }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    if (req.url.includes('/api/authen/refresh-token') ||req.url.startsWith('./') || !sessionStorage.getItem('accessToken')) {
+    if (req.url.includes('/api/auth/refresh-token') || req.url.startsWith('./') || !sessionStorage.getItem('accessToken')) {
       return next.handle(req);
     }
     const authHeader = 'Bearer ' + sessionStorage.getItem('accessToken');

src/app/shared/services/pms-group-assessment.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 { PLModel } from '../model/pl.model';
+import { AlertModel } from '../model/alert.model';
+import { PmsGroupAssessmentModel } from '../model/pms-group-assessment.model';
+@Injectable({
+  providedIn: 'root'
+})
+export class PmsGroupAssessmentService {
+  api = "/pms-group-assessment"
+  urlApi = environment.baseUrl + this.api
+  constructor(private http: HttpClient) {
+  }
+  getBy_plId(plId: string): Observable<PmsGroupAssessmentModel> {
+    return this.http.get<PmsGroupAssessmentModel>(this.urlApi + "/" + plId)
+  }
+  getList(): Observable<PmsGroupAssessmentModel[]> {
+    return this.http.get<PmsGroupAssessmentModel[]>(this.urlApi + "/lists")
+  }
+  post(body: PmsGroupAssessmentModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi, body)
+  }
+  delete(body: PmsGroupAssessmentModel | PmsGroupAssessmentModel[]): Observable<AlertModel> {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    };
+    return this.http.delete<AlertModel>(this.urlApi, options)
+  }
+}
\ No newline at end of file

src/assets/css/style.css

@@ -24915,4 +24915,8 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
 .rounded-t-none {
   border-top-left-radius: 0rem;
   border-top-right-radius: 0rem;
+}
+
+.masked-input {
+  -webkit-text-security: disc; /* Safari, Chrome */
 }
\ No newline at end of file