การประเมินสมรรถนะ >

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

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

@@ -142,8 +142,8 @@
                     </button>
                 </div>
             </div>
-            <div class="w-full h-45px margin-top-2px">
-                <div class="flex justify-end pr-1rem">
+            <div class="w-full flex justify-end">
+                <div class="absolute flex">
                     <div class="px-1">
                         <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
                             <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
@@ -169,7 +169,7 @@
                     </div>
                 </div>
             </div>
-            <div class="padding-16px pt-0 overflow-y-0">
+            <div class="ti-modal-body padding-16px pt-0 overflow-y-0">
                 <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)]="bu1.bu1id">
                 <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
@@ -207,8 +207,8 @@
                     </button>
                 </div>
             </div>
-            <div class="ti-modal-center">
-                <div class="flex justify-end" class="pr-1rem">
+            <div class="w-full flex justify-end">
+                <div class="absolute flex">
                     <div class="px-1">
                         <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
                             <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"

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

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 
+export interface dataModel {
+    check: boolean,
+    code: string,
+    period: string,
+    year: string,
+    startDate: string,
+    endDate: string,
+    status: string
+}
+
 @Component({
     selector: 'app-evaluation-cycle',
     templateUrl: './evaluation-cycle.component.html',
@@ -10,10 +20,91 @@ export class EvaluationCycleComponent {
     currentPage = 1
     page = Array.from({ length: 1 }, (_, i) => i + 1);
     search = ""
-    isChecked = false
+    numDataListChecked = 0
+    isDataListChecked = false
+    isDataListCheckedAll = false
+    dataList: dataModel[] = [
+        {
+            check: false,
+            code: "Y67P2",
+            period: "ช่วงเวลาที่ 2",
+            year: "2567",
+            startDate: "01-07-2567",
+            endDate: "31-12-2567",
+            status: "1"
+        },
+        {
+            check: false,
+            code: "Y68P1",
+            period: "ช่วงเวลาที่ 1",
+            year: "2568",
+            startDate: "01-01-2568",
+            endDate: "30-06-2568",
+            status: "2"
+        },
+        {
+            check: false,
+            code: "Y67P1",
+            period: "ช่วงเวลาที่ 1",
+            year: "2567",
+            startDate: "01-01-2567",
+            endDate: "30-06-2567",
+            status: "3"
+        },
+    ]
+    dataSelect: dataModel = {
+        check: false,
+        code: "",
+        period: "",
+        year: "",
+        startDate: "",
+        endDate: "",
+        status: "",
+    }
+    modalStatus: "add" | "edit" = "add"
+    constructor(private cdr: ChangeDetectorRef) {
+    }
+
+    dataListSelect(data?: dataModel) {
+        this.dataSelect = data || {
+            check: false,
+            code: "",
+            period: "",
+            year: "",
+            startDate: "",
+            endDate: "",
+            status: "",
+        }
+        this.cdr.detectChanges()
+    }
+
+    dataListFilter() {
+        return this.dataList.filter(x => {
+            const match = x.code.includes(this.search) || x.period.includes(this.search);
+            if (!match) x.check = false;
+            return match;
+        });
+    }
+
+    dataListCheck() {
+        const dataCheck = this.dataListFilter();
+        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() {
+        const selectAll = this.isDataListCheckedAll;
+        this.dataList.forEach(x => x.check = selectAll);
+        this.dataListCheck();
+    }
+
     searchChange() {
-        this.currentPage = 1
-        this.page = Array.from({ length: Math.ceil([1, 2, 3, 4].length / 10) }, (_, i) => i + 1);
+        this.currentPage = 1;
+        const filteredData = this.dataListFilter();
+        this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
+        this.dataListCheck();
     }
+
 }
 

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

@@ -71,7 +71,7 @@ import { SettingCompetencyComponent } from '../competency-assessment/setting-com
 import { CompetencyConfigurationComponent } from '../competency-assessment/setting-competency/competency-configuration/competency-configuration.component';
 import { IdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/idp-development-plan.component';
 import { SetIdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component';
-
+import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 
 @NgModule({
   declarations: [
@@ -137,7 +137,8 @@ import { SetIdpDevelopmentPlanComponent } from '../competency-assessment/idp-dev
     NgxChartsModule,
     NgSelectModule,
     HttpClientModule,
-    FormsModule 
+    FormsModule,
+    NgxDaterangepickerMd.forRoot(),
   ],
   providers: [Bu1Service,Bu2Service,Bu3Service,Bu4Service,Bu5Service,Bu6Service,Bu7Service,PositionService,PLService,EmpGroupService,EmpTypeService,{
     provide: HTTP_INTERCEPTORS,

src/assets/css/style.css

@@ -24748,18 +24748,22 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
   font-weight: 700;
 }
 
-.height-50px{
+.height-50px {
   height: 50px;
 }
-.margin-top-2px{
-  margin-top:2px;
+.margin-top-2px {
+  margin-top: 2px;
 }
-.padding-16px{
+.padding-16px {
   padding: 16px;
 }
-.overflow-y-0{
+.overflow-y-0 {
   overflow-y: 0%;
 }
-.min-height-50px{
-  min-height: 50px
+.min-height-50px {
+  min-height: 50px;
+}
+
+.justify-around {
+  justify-content: space-around;
 }