การประเมินจัดการประสิทธิภาพ > ทะเบียนกำหนดชื่อ > ประเภทการประเมิน

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

@@ -34,6 +34,7 @@ import { AssessmentManagementComponent } from '../performance-management-evaluat
 import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
 import { EvaluationCyclePerformanceComponent } from '../performance-management-evaluation/evaluation-cycle-performance/evaluation-cycle-performance.component';
 import { EmployeeRegistrationComponent } from '../company-components/employee-registration/employee-registration.component';
+import { NameRegistrationPerfomanceComponent } from '../performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component';
 
 
 
@@ -75,6 +76,7 @@ const routes: Routes = [
       { path: "job-position-indicators",title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent },
       { path: "evaluation-cycle-performance",title: 'รอบการประเมิน', component: EvaluationCyclePerformanceComponent },
       { path: "employee-registration",title: 'ทะเบียนพนักงาน', component: EmployeeRegistrationComponent },
+      { path: "name-registration-perfomance",title: 'ทะเบียนกำหนดชื่อ', component: NameRegistrationPerfomanceComponent },
     ]
   }
 ];

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

@@ -91,6 +91,8 @@ import { DocumentFormComponent } from '../performance-management-evaluation/eval
 import { EditEvaluationFormComponent } from '../performance-management-evaluation/evaluation-cycle-performance/document-form/edit-evaluation-form/edit-evaluation-form.component';
 import { EmployeeRegistrationComponent } from '../company-components/employee-registration/employee-registration.component';
 import { SubEmployeeRegistrationComponent } from '../company-components/employee-registration/sub-employee-registration/sub-employee-registration.component';
+import { NameRegistrationPerfomanceComponent } from '../performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component';
+import { AssessmentTypesComponent } from '../performance-management-evaluation/name-registration-perfomance/assessment-types/assessment-types.component';
 
 @NgModule({
   declarations: [
@@ -164,7 +166,8 @@ import { SubEmployeeRegistrationComponent } from '../company-components/employee
     EditEvaluationFormComponent,
     EmployeeRegistrationComponent,
     SubEmployeeRegistrationComponent,
-
+    NameRegistrationPerfomanceComponent,
+    AssessmentTypesComponent
   ],
   imports: [
     CommonModule,

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

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    border-top: 2px solid #ccc;
+    width: 100%;
+    cursor: pointer;
+    border-top: 2px solid #ccc;
+}
+
+.nav-item {
+    list-style: none;
+    margin-right: 40px; /* ช่องว่างระหว่างเมนู */
+
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: medium;
+    text-align: left;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+    color: #569bf5; /* สีตัวอักษรในสถานะ active */
+    font-size: medium;
+    border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
+}
+
+.tab-content {
+    margin-top: 20px;
+}
+
+.tab-pane.active {
+    display: block;
+}
+.body-content {
+    margin-left: 10px;
+}
\ No newline at end of file

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

+import { ChangeDetectorRef, Component } from '@angular/core';
+export interface dataModel {
+  check: boolean,
+  code: string,
+  nameTypeTh: string,
+  nameTypeEn: string,
+  name: string
+  weight: string
+}
+
+
+@Component({
+  selector: 'app-assessment-types',
+  templateUrl: './assessment-types.component.html',
+  styleUrls: ['./assessment-types.component.scss']
+})
+export class AssessmentTypesComponent {
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  search = ""
+  numDataListChecked = 0
+  isDataListChecked = false
+  isDataListCheckedAll = false
+  dataList: dataModel[] = [
+    {
+      check: false,
+      code: "01",
+      nameTypeTh: "การบริหารแบบแผนปัญญา",
+      nameTypeEn: "Hoshin Kanri Management",
+      name: "Hoshin",
+      weight: "1.2"
+    },
+    {
+      check: false,
+      code: "02",
+      nameTypeTh: "ตัวชี้วัดความสำเร็จ",
+      nameTypeEn: "Key Performance Indicator",
+      name: "KPI",
+      weight: "1.2"
+    },
+    {
+      check: false,
+      code: "03",
+      nameTypeTh: "การบริหารทีมงานข้ามสายงาน",
+      nameTypeEn: "Cross Functional Management",
+      name: "Cross Functional",
+      weight: "1.2"
+    },
+    {
+      check: false,
+      code: "04",
+      nameTypeTh: "กิจกรรมพิเศษ",
+      nameTypeEn: "Special Activities",
+      name: "Special Activities",
+      weight: "1.2"
+    }
+  ]
+  dataSelect: dataModel = {
+    check: false,
+    code: "",
+    nameTypeTh: "",
+    nameTypeEn: "",
+    name: "",
+    weight: ""
+  }
+  modalStatus: "add" | "edit" = "add"
+  constructor(private cdr: ChangeDetectorRef) {
+  }
+
+  dataListSelect(data?: dataModel) {
+    this.dataSelect = data || {
+      check: false,
+      code: "",
+      nameTypeTh: "",
+      nameTypeEn: "",
+      name: "",
+      weight: ""
+    }
+    this.cdr.detectChanges()
+  }
+
+  dataListFilter() {
+    return this.dataList.filter(x => {
+      const match = x.code.includes(this.search) || x.nameTypeTh.includes(this.search) || x.nameTypeEn.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;
+    const filteredData = this.dataListFilter();
+    this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
+    this.dataListCheck();
+  }
+
+}
+

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

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        ทะเบียนกำหนดชื่อ
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 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  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนกำหนดชื่อ','ประเภทการประเมิน']">
+                    ประเภทการประเมิน
+                </a>
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 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  hover:text-secondary"
+                    href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
+                    aria-controls="underline-2"
+                    (click)="pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนกำหนดชื่อ','หัวข้อการประเมิน']">
+                    หัวข้อการประเมิน
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-assessment-types></app-assessment-types>
+            </div>
+            <div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
+                หัวข้อการประเมิน
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    border-top: 2px solid #ccc;
+    width: 100%;
+    cursor: pointer;
+    border-top: 2px solid #ccc;
+}
+
+.nav-item {
+    list-style: none;
+    margin-right: 40px; /* ช่องว่างระหว่างเมนู */
+
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: medium;
+    text-align: left;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+    color: #569bf5; /* สีตัวอักษรในสถานะ active */
+    font-size: medium;
+    border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
+}
+
+.tab-content {
+    margin-top: 20px;
+}
+
+.tab-pane.active {
+    display: block;
+}
+.body-content {
+    margin-left: 10px;
+}
\ No newline at end of file

src/app/components/performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-name-registration-perfomance',
+  templateUrl: './name-registration-perfomance.component.html',
+  styleUrls: ['./name-registration-perfomance.component.scss']
+})
+export class NameRegistrationPerfomanceComponent {
+  pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนกำหนดชื่อ', 'ประเภทการประเมิน']
+}

src/app/shared/services/navservice.ts

@@ -138,7 +138,7 @@ export class NavService implements OnDestroy {
       active: false,
       path: '/assessment-management',
       children: [
-        { path: '', title: 'ทะเบียนกำหนดชื่อ', type: 'link' },
+        { path: '/name-registration-perfomance', title: 'ทะเบียนกำหนดชื่อ', type: 'link' },
         { path: '', title: 'ทะเบียนเกรด', type: 'link' },
         { path: '', title: 'ปัจจัยการประเมินผล', type: 'link' },
         { path: '/assessment-management', title: 'การจัดการการประเมิน', type: 'link' },