'การประเมินจัดการประสิทธิภาพ'>'การตั้งค่า'>'กำหนดค่าระบบการประเมิน'

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

@@ -35,6 +35,7 @@ import { SupervisorEvaluationComponent } from '../Performance Evaluation/supervi
 import { EmployeeRegistrationComponent } from '../company-components/employee-registration/employee-registration.component';
 import { NameRegistrationPerfomanceComponent } from '../performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component';
 import { EvaluationFactorsComponent } from '../performance-management-evaluation/evaluation-factors/evaluation-factors.component';
+import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component';
 
 
 
@@ -79,6 +80,7 @@ const routes: Routes = [
       { path: "employee-registration",title: 'ทะเบียนพนักงาน', component: EmployeeRegistrationComponent },
       { path: "name-registration-perfomance",title: 'ทะเบียนกำหนดชื่อ', component: NameRegistrationPerfomanceComponent },
       { path: "evaluation-factors",title: 'การประเมินจัดการประสิทธิภาพ', component: EvaluationFactorsComponent },
+      { path: "setting-performance-evalution",title: 'การตั้งค่า', component: SettingPerformanceEvalutionComponent },
 
     ]
   }

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

@@ -102,6 +102,8 @@ import { AssessmentTopicsComponent } from '../performance-management-evaluation/
 import { ManagementCycleComponent } from '../performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component';
 import { EvaluationFactorsComponent } from '../performance-management-evaluation/evaluation-factors/evaluation-factors.component';
 import { DefineEvaluationFactorsComponent } from '../performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component';
+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';
 
 @NgModule({
   declarations: [
@@ -185,7 +187,9 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
     EditEvaluationGroupingComponent,
     ManagementCycleComponent,
     EvaluationFactorsComponent,
-    DefineEvaluationFactorsComponent
+    DefineEvaluationFactorsComponent,
+    SettingPerformanceEvalutionComponent,
+    AssessmentSystemConfigurationComponent,
   ],
   imports: [
     CommonModule,

src/app/components/performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.component.html

+<div class="header-title-type">
+    <div class="flex justify-end">
+       <div class="px-1">
+           <button type="button"
+               class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md">
+               <i class="ri-save-3-line"></i>
+               Save
+           </button>
+        </div>
+        <div class="px-1">
+            <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
+                <i class="ti ti-book fs-l"></i>
+                Help
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="body-content">
+<div class="page">
+   <div class="grid grid-cols-3 gap-6">
+       <div class="col-span-1">
+           <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">ปีการประเมิน *</label>
+       </div>
+   </div>
+   <div class="grid grid-cols-3 gap-6">
+       <div class="col-span-1">
+           <input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="2567">
+       </div>
+   </div>
+   <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label>
+   <div class="box-body">
+       <div class="grid grid-cols-6 flex gap-x-6">
+         <div class="flex col-span-1 mt-5">
+           <input type="radio" name="radio1" class="ti-form-radio" id="hs-radio-group-1" checked>
+           <label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ระดับพนักงาน (PL)</label>
+         </div>
+
+         <div class="flex col-span-2 mt-5 ml-4rem">
+           <input type="radio" name="radio1" class="ti-form-radio" id="hs-radio-group-2">
+           <label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ลักษณะงาน ( JD)</label>
+         </div>
+
+       </div>
+   </div>
+   <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">เเสดงผลประเมินสมรรถนะ *</label>
+   <div class="box-body">
+       <div class="grid grid-cols-6 flex gap-x-6">
+         <div class="flex col-span-1 mt-5">
+           <input type="radio" name="radio2" class="ti-form-radio" id="hs-radio-group-3" checked>
+           <label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">เเสดงผล</label>
+         </div>
+
+         <div class="flex col-span-2 mt-5 ml-4rem">
+           <input type="radio" name="radio2" class="ti-form-radio" id="hs-radio-group-4">
+           <label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ไม่เเสดงผล</label>
+         </div>
+
+       </div>
+   </div>
+   <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">เเสดงผลประเมินเวลาทำงาน *</label>
+   <div class="box-body">
+       <div class="grid grid-cols-6 flex gap-x-6">
+         <div class="flex col-span-1 mt-5">
+           <input type="radio" name="radio3" class="ti-form-radio" id="hs-radio-group-5" checked>
+           <label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">เเสดงผล</label>
+         </div>
+
+         <div class="flex col-span-2 mt-5 ml-4rem">
+           <input type="radio" name="radio3" class="ti-form-radio" id="hs-radio-group-6">
+           <label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 font-bold dark:text-white/70">ไม่เเสดงผล</label>
+         </div>
+
+       </div>
+   </div>
+   
+</div>
+</div>
\ No newline at end of file

src/app/components/performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.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*/
+  }
+  
+  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 เพื่อให้มีความยืดหยุ่น */
+    justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+    align-items: center; /* จัดกลางแนวตั้ง */
+    padding-top: 50px;
+    padding-bottom: 1rem;
+  }
+  .body-content{
+    margin-bottom: 30px;
+    height: 100%;
+    width: 100%;
+  }
+  table {
+    width: 50%; 
+    border-collapse: collapse; 
+    border: 1px solid black; 
+  }
+  th{
+    font-weight: bold;
+  }
+  th, td {
+    border: 1px solid black; /* เส้นขอบของเซลล์ */
+    padding: 15px; 
+    text-align: center; 
+  }
+  th:first-child{
+    width: 125px;
+    font-size: 18px;
+  }
+  td{
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  td:first-child{
+    font-size: 18px;
+    font-weight: bold;
+  }
+  td span {
+    display: inline-block; /*span มีลักษณะเป็นกรอบ */
+    padding: 5px 10px;
+    border: 1px solid black;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+    width: 60px;
+  }
+  input[type="radio"]:checked {
+    background-color: #569BF5;
+    border-color: #569BF5;
+}
+  
+  
\ No newline at end of file

src/app/components/performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+    selector: 'app-assessment-system-configuration',
+    templateUrl: './assessment-system-configuration.component.html',
+    styleUrls: ['./assessment-system-configuration.component.scss']
+})
+export class AssessmentSystemConfigurationComponent {
+  @Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การตั้งค่า', 'กำหนดค่าระบบการประเมิน'];
+  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
+  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  isChecked: boolean = false;
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การตั้งค่า', tab.text]);
+    this.activeTab = tab.id;
+  }
+
+  toggleCheckbox(): void {
+    this.isChecked = !this.isChecked;
+  }
+
+  // การจัดการการเปิดปิด modal
+  modalOptions: {
+    [nameModal: string]: {
+      isModalOpen: boolean;
+      modalSize: string;
+      backdropClose: boolean;
+    };
+  } = {
+    "add": {
+      isModalOpen: false,
+      modalSize: 'm',
+      backdropClose: true,
+    },
+    "edit": {
+      isModalOpen: false,
+      modalSize: 'm',
+      backdropClose: true,
+    }
+  };
+
+  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';
+  }
+
+  closeModal(name: string) {
+    this.modalOptions[name].isModalOpen = false;
+    if (!this.isAnyModalOpen()) {
+      document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
+    }
+  }
+
+  isAnyModalOpen(): boolean {
+    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
+  }
+
+  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
+  addUser() {
+    
+  }
+
+  currentModal = ""
+  constructor(private toastr: ToastrService) { }
+  showSuccess() {
+    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+  showSuccessEdit() {
+    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+  showSuccessDelete() {
+    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+}
+

src/app/components/performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component.html

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="text-lg font-bold py-2 text-primary px-8">
+        การตั้งค่า
+    </div>
+    <div class="page">
+        <div class="border-b border-gray-200 dark:border-white/10 px-8">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="text-base font-medium 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  dark:text-white/70 hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1" (click)="pathTitle = ['การประเมินจัดการประสิทธิภาพ','การตั้งค่า','กำหนดค่าระบบการประเมิน']">
+                    กำหนดค่าระบบการประเมิน
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-3rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-assessment-system-configuration [pathTitle]="pathTitle"
+                    (sendPathTitle)="pathTitle=$event"></app-assessment-system-configuration>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.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/setting-performance-evalution/setting-performance-evalution.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-setting-performance-evalution',
+  templateUrl: './setting-performance-evalution.component.html',
+  styleUrls: ['./setting-performance-evalution.component.scss']
+})
+export class SettingPerformanceEvalutionComponent {
+  pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'การตั้งค่า','กำหนดค่าระบบการประเมิน']
+}

src/app/shared/services/navservice.ts

@@ -143,7 +143,7 @@ export class NavService implements OnDestroy {
         { path: '/evaluation-factors', title: 'ปัจจัยการประเมินผล', type: 'link' },
         { path: '/assessment-management', title: 'การจัดการการประเมิน', type: 'link' },
         { path: '/evaluation-cycle-performance', title: 'รอบการประเมิน', type: 'link' },
-        { path: '', title: 'การตั่งค่า', type: 'link' },
+        { path: '/setting-performance-evalution', title: 'การตั่งค่า', type: 'link' },
         { path: '', title: 'รายงาน', type: 'link' },
       ],
     },