ประเมิน idp

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

@@ -38,6 +38,7 @@ import { EvaluationFactorsComponent } from '../performance-management-evaluation
 import { GradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-registration.component';
 import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component';
 import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluation/self-evaluation.component';
+import { IdpEvalutionComponent } from '../evaluation/idp-evalution.component';
 
 
 
@@ -84,8 +85,7 @@ const routes: Routes = [
       { path: "evaluation-factors", title: 'การประเมินจัดการประสิทธิภาพ', component: EvaluationFactorsComponent },
       { path: "grade-registration", title: 'ทะเบียนเกรด', component: GradeRegistrationComponent },
       { path: "setting-performance-evalution", title: 'การตั้งค่า', component: SettingPerformanceEvalutionComponent },
-      { path: "self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent },
-
+      { path: "self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent }
     ]
   }
 ];

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

@@ -110,6 +110,7 @@ import { SubGradeRegistrationComponent } from '../competency-assessment/grade-re
 import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component';
 import { AssessmentSystemConfigurationComponent } from '../performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.component';
 import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluation/self-evaluation.component';
+import { IdpEvalutionComponent } from '../evaluation/idp-evalution.component';
 
 @NgModule({
   declarations: [
@@ -201,7 +202,8 @@ import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluati
     SubGradeRegistrationComponent,
     SettingPerformanceEvalutionComponent,
     AssessmentSystemConfigurationComponent,
-    SelfEvaluationComponent
+    SelfEvaluationComponent,
+    IdpEvalutionComponent
   ],
   imports: [
     CommonModule,
@@ -216,7 +218,7 @@ import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluati
     FormsModule,
     NgxDaterangepickerMd.forRoot(),
   ],
-  providers: [Bu1Service,Bu2Service,Bu3Service,Bu4Service,Bu5Service,Bu6Service,Bu7Service,PositionService,PLService,EmpGroupService,EmpTypeService,{
+  providers: [Bu1Service, Bu2Service, Bu3Service, Bu4Service, Bu5Service, Bu6Service, Bu7Service, PositionService, PLService, EmpGroupService, EmpTypeService, {
     provide: HTTP_INTERCEPTORS,
     useClass: HttpRequestInterceptor,
     multi: true,

src/app/components/evaluation/idp-evalution.component.ts

+import { Component } from '@angular/core';
+export interface DataModel {
+  code: string,
+  bis: BisModel[],
+  startDate: string,
+  endDate: string
+}
+export interface BisModel {
+  name: string,
+  oj: boolean,
+  cm: boolean,
+  t: boolean,
+  cdr: CdrModel
+}
+export interface CdrModel {
+  check: boolean,
+  name: string,
+  code: string
+}
+@Component({
+  selector: 'app-idp-evalution',
+  templateUrl: './idp-evalution.component.html',
+  styleUrls: ['./idp-evalution.component.scss']
+})
+export class IdpEvalutionComponent {
+  pathTitle = ['การประเมินผล', 'ประเมินผล']
+  hoveredCode: string | null = null;
+  dataList: DataModel[] = [{
+    code: "CC-01",
+    bis: [{
+      name: "สอนงานด้านความปลอดภัย และคุณภาพของบริษัทให้กับพนักงานในหน่วยงาน",
+      oj: true,
+      cm: false,
+      t: true,
+      cdr: {
+        check: false,
+        name: "จิตใต้สำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับระดับพนักงาน S3-S4",
+        code: "CC-01-4"
+      }
+    }, {
+      name: "ติดตามและปรับปรุงการทำงานด้านความปลอดภัยและ คุณภาพของทีมงาน",
+      oj: false,
+      cm: false,
+      t: false,
+      cdr: {
+        check: false,
+        name: "",
+        code: ""
+      }
+    }],
+    startDate: "01-01-2023",
+    endDate: "31-12-2023"
+  }, {
+    code: "CC-02",
+    bis: [{
+      name: "สอนงาน และพัฒนาทีมงานให้เกิดการทำงานเป็นทีมโดยยึดเป้าหมายเดียวกัน (TAT Goal) และคำนึงถึงความต้องการของลูกค้าเป็นหลัก (Next Customer)",
+      oj: true,
+      cm: false,
+      t: false,
+      cdr: {
+        check: false,
+        name: "",
+        code: ""
+      }
+    }],
+    startDate: "01-01-2023",
+    endDate: "31-12-2023"
+  }, {
+    code: "CC-03",
+    bis: [],
+    startDate: "",
+    endDate: ""
+  }]
+
+  getNestedValue(obj: any, path: string) {
+    return path.split('.').reduce((acc, key) => acc && acc[key], obj);
+  }
+  checkBg(data: any[], field: string) {
+    return data.every(x => !this.getNestedValue(x, field));
+  }
+  dataListFilter() {
+    return this.dataList
+  }
+}

src/app/components/performance-evaluation/self-evaluation/self-evaluation.component.html

@@ -275,7 +275,7 @@
                     </tr>
                 </thead>
                 <tbody *ngIf="!dataList3Filter().length">
-                    <tr>
+                    <tr class="hover:table-hover2-hover">
                         <td class="text-center" colspan="100%">
                             ไม่พบข้อมูล
                         </td>
@@ -296,12 +296,12 @@
                                     {{data.code}}
                                 </ng-container>
                             </td>
-                            <td class="align-start" style="white-space:normal">
+                            <td class="align-start !white-space-normal">
                                 <ng-container *ngIf="f">
                                     {{data.name}}
                                 </ng-container>
                             </td>
-                            <td class="align-start" style="white-space:normal">
+                            <td class="align-start !white-space-normal">
                                 {{item.name}}
                             </td>
                             <td class="align-center text-center">

src/assets/css/style.css

@@ -3800,6 +3800,9 @@ select option:focus {
 .col-span-4 {
   grid-column: span 4 / span 4;
 }
+.col-span-5 {
+  grid-column: span 5 / span 5;
+}
 .col-span-6 {
   grid-column: span 6 / span 6;
 }
@@ -24452,9 +24455,15 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
 .fs-xxl {
   font-size: xx-large;
 }
+.fs-xxl {
+  font-size: xxx-large;
+}
 .fw-b {
   font-weight: bolder;
 }
+.\!fw-b {
+  font-weight: bolder !important;
+}
 
 .mt-1rem {
   margin-top: 1rem;
@@ -24862,6 +24871,17 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
+.ti-custom-table-hover2 tbody tr.hover\:table-hover2-hover:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
 .border-none {
   border: none;
 }
+
+.bg-table-gray {
+  background-color: rgb(170 170 170);
+}
+.\!white-space-normal {
+  white-space: normal !important;
+}