การประเมินสมรรถนะ > การจัดการรอบการประเมิน > รอบการประเมิน

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

@@ -9,12 +9,12 @@
             {{numDataListChecked}} Selected</label>
         </div>
         <div class="mx-1 flex items-center">
-          <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
+          <button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id='check-boxall'
             class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
             <i class="fs-l transition-all duration-200"
               [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>
+          <label class="text-sm text-gray-500 ml-2 cursor-pointer" for="check-boxall">Select All</label>
         </div>
       </div>
     </div>
@@ -31,21 +31,21 @@
         </div>
       </div>
       <div class="px-1">
-        <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
+        <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
           data-hs-overlay="#evaluation-cycle-page-modal" (click)="modalStatus='add';setData()">
           <i class="ri-add-line"></i>
           Add
         </button>
       </div>
       <div class="px-1">
-        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
           data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
           <i class="ti ti-trash fs-l"></i>
           Delete
         </button>
       </div>
       <div class="px-1">
-        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
           <i class="ti ti-book fs-l"></i>
           Help
         </button>
@@ -60,7 +60,7 @@
       <thead class="height-50px">
         <tr class="font-size-12px">
           <ng-container
-            *ngFor="let item of ['รหัส','รายละเอียด','รอบปีการประเมิน','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','การจัดการ']; let f = first; let l = last">
+            *ngFor="let item of ['รหัส','รายละเอียด','รอบปีการประเมิน','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','Action']; let f = first; let l = last">
             <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" [class.!text-center]="f||l">
               <span class="font-size-12px font-weight-700">{{ item }}</span>
               <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
@@ -91,8 +91,8 @@
         <tr
           *ngFor="let item of evaluation_cycleListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
           <td class="text-center">
-            <input type="checkbox" class="ti-form-checkbox cursor-pointer"
-              id="checkbox-{{item.data.evaluationRoundId}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
+            <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>
           <td>{{item.data.tdesc}}</td>
@@ -135,26 +135,24 @@
             <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
               data-hs-overlay="#evaluation-cycle-page-modal"></i>
             <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"></i>
-            <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-delete-modal"></i>
+            <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
+              data-hs-overlay="#evaluation-cycle-page-alert-modal"></i>
             <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
               [ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span>
             <span class="badge text-white m-1 bg-secondary"  *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
-            <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0'"
-              [ngClass]="{
+            <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0'" [ngClass]="{
                 'bg-primary': item.data.statusCode.code == '0',
                 'text-white': item.data.statusCode.code == '0'
               }">
               ปิดรอบประเมิน
             </span>
-          <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '1'"
-              [ngClass]="{
+            <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '1'" [ngClass]="{
                 'bg-secondary': item.data.statusCode.code == '1',
                 'text-white': item.data.statusCode.code == '1'
               }">
               สร้างแบบฟอร์ม
             </span>
-          <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '2'"
-              [ngClass]="{
+            <span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '2'" [ngClass]="{
                 'bg-gray-400': item.data.statusCode.code == '2',
                 'text-white': item.data.statusCode.code == '2'
               }">
@@ -248,24 +246,25 @@
         </div>
       </div>
       <div class="ti-modal-body padding-16px pt-0 overflow-y-0">
-        <label for="input-label" class="ti-form-label mt-2rem">รหัส รอบการประเมิน *</label>
+        <label for="input-label" class="ti-form-label mt-2rem">รหัส รอบการประเมิน*</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.evaluationRoundId">
 
-        <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย) *</label>
+        <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)*</label>
         <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.tdesc">
 
         <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
         <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
 
-        <label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน</label>
-        <input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsyear">
+        <label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน*</label>
+        <input type="text" id="input-label" class="ti-form-input w-1/2"
+          oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="dataSelect.apsyear">
 
-        <label for="input-label" class="ti-form-label mt-2rem">เริ่มวันที่</label>
+        <label for="input-label" class="ti-form-label mt-2rem">เริ่มวันที่*</label>
         <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodStart">
 
-        <label for="input-label" class="ti-form-label mt-2rem">สิ้นสุดวันที่</label>
+        <label for="input-label" class="ti-form-label mt-2rem">สิ้นสุดวันที่*</label>
         <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd">
 
         <div class="flex justify-end mt-2rem mb-1rem">
@@ -274,10 +273,11 @@
             data-hs-overlay="#evaluation-cycle-page-modal">
             ย้อนกลับ
           </button>
-          <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-            data-hs-overlay="#evaluation-cycle-page-alert-modal">
+          <button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#evaluation-cycle-page-alert-modal"
+            [class.ti-btn-disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd"
+            [disabled]="!dataSelect.evaluationRoundId||!dataSelect.tdesc||!dataSelect.apsyear||!dataSelect.apsPeriodStart||!dataSelect.apsPeriodEnd">
             บันทึกข้อมูล
-          </a>
+          </button>
         </div>
       </div>
     </div>

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

-import { ChangeDetectorRef, Component} from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
 import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
@@ -30,7 +30,7 @@ export class EvaluationCycleComponent {
   evaluation_cyclelist: { check: boolean, data: DataModel }[] = []
   evaluation_cycle: EvaluationCycleModel = new MyEvaluationCycleModel({})
   dataLoading = false
-  dataSelect: DataModel = { evaluationRoundId: "", tdesc: "", edesc: "", apsyear: "", apsPeriodStart: "", apsPeriodEnd: "", statusCode: new MyStatusCodeModel({})}
+  dataSelect: DataModel = { evaluationRoundId: "", tdesc: "", edesc: "", apsyear: "", apsPeriodStart: "", apsPeriodEnd: "", statusCode: new MyStatusCodeModel({}) }
   itemToDelete: EvaluationCycleModel | null = null;
   isDataListChecked = false
   isDataListCheckedAll = false
@@ -46,9 +46,9 @@ export class EvaluationCycleComponent {
   }
 
   getEvaluationCycleList() {
+    this.dataLoading = true
     this.evaluationCycleService.getList().subscribe({
       next: response => {
-        console.log('API response:', response);
         this.evaluation_cyclelist = response.map(x => ({
           check: false,
           data: {
@@ -61,35 +61,40 @@ export class EvaluationCycleComponent {
             statusCode: new MyStatusCodeModel(x.statusCode || {})
           }
         }));
+
+        this.dataLoading = false
+        this.isDataListCheckedAll = false
+        this.dataListCheckAll()
         this.searchChange();
         this.cdr.detectChanges();
       },
       error: err => {
-        console.error('Error fetching evaluation cycles:', err);
+        this.dataLoading = false
+        this.cdr.detectChanges();
       }
     });
   }
-  dataListCheck() {
-    const dataCheck = this.evaluation_cycleListFilter();
-    this.isDataListChecked = dataCheck.some(x => x.check);
-    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-    this.numDataListChecked = dataCheck.filter(x => x.check).length;
-}
-    
-dataListCheckAll() {
+  dataListCheckAll() {
     const selectAll = this.isDataListCheckedAll;
-    this.evaluation_cyclelist.forEach(x => x.check = selectAll);
+    this.evaluation_cycleListFilter().forEach(x => x.check = selectAll);
     this.dataListCheck();
-}
+  }
 
+  dataListCheck() {
+    const dataCheck = this.evaluation_cycleListFilter();
+    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+    this.numDataListChecked = this.evaluation_cyclelist.filter(x => x.check).length;
+    this.isDataListChecked = Boolean(this.numDataListChecked)
+  }
   searchChange() {
     this.currentPage = 1
     this.page = Array.from({ length: Math.ceil(this.evaluation_cycleListFilter().length / 10) }, (_, i) => i + 1);
+    this.dataListCheck()
   }
   evaluation_cycleListFilter() {
     return this.evaluation_cyclelist.filter(x => {
       const data = x.data
-      const match = data.evaluationRoundId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
+      const match = data.evaluationRoundId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
       return match;
     });
   }
@@ -103,19 +108,24 @@ dataListCheckAll() {
       apsPeriodEnd: "",
       statusCode: new MyStatusCodeModel({})
     }));
-}
+  }
   addevaluation_cycle() {
     const body = new MyEvaluationCycleModel({ evaluationRoundId: this.dataSelect.evaluationRoundId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, apsyear: this.dataSelect.apsyear, apsPeriodStart: this.dataSelect.apsPeriodStart, apsPeriodEnd: this.dataSelect.apsPeriodEnd, statusCode: this.dataSelect.statusCode })
+    this.dataLoading = true
     this.evaluationCycleService.post(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getEvaluationCycleList()
         } else {
+          this.dataLoading = false
           this.showAlert(response.message, 'error')
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }
@@ -127,16 +137,22 @@ dataListCheckAll() {
     } else {
       body = this.evaluation_cyclelist.filter(x => x.check).map(x => new MyEvaluationCycleModel({ evaluationRoundId: x.data.evaluationRoundId, tdesc: x.data.tdesc, edesc: x.data.edesc, apsyear: x.data.apsyear, apsPeriodStart: x.data.apsPeriodStart, apsPeriodEnd: x.data.apsPeriodEnd, statusCode: x.data.statusCode }))
     }
+    this.dataLoading = true
     this.evaluationCycleService.delete(body).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')
           this.getEvaluationCycleList()
         } else {
+          this.dataLoading = false
           this.showAlert(response.message, 'error')
+          this.dataLoading = false
+          this.cdr.detectChanges()
         }
       }, error: error => {
         this.showAlert(error.message, 'error')
+        this.dataLoading = false
+        this.cdr.detectChanges()
       }
     })
   }

src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.html

@@ -26,7 +26,7 @@
         <div class="grid grid-cols-3 gap-6">
             <div class="col-span-1">
                 <input type="text" class="ti-form-input w-2/3 pr-10"
-                    oninput="this.value = this.value.replace(/\D/g, '')">
+                    oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="setting.data.apsyear">
             </div>
         </div>
         <div class="grid grid-cols-3 gap-6 mt-10">

src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts

@@ -32,7 +32,7 @@ export class CompetencyConfigurationComponent {
   }
   saveSetting() {
     this.setting.loading = true
-    this.settingAssessmentService.post(this.setting.data).subscribe({
+    this.settingAssessmentService.post(new MySettingAssessmentModel({ ...this.setting.data, expectationLevel: +(this.setting.data.expectationLevel) })).subscribe({
       next: response => {
         if (response.success) {
           this.showAlert(response.message, 'success')