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

src/app/components/competency-assessment/evaluation-cycle-manager/define-document-form/define-document-form.component.scss

+.ti-modal-content-new {
+  top: 50%;
+  /* ให้อยู่กลางในแนวตั้ง */
+  left: 50%;
+  /* ให้อยู่กลางในแนวนอน */
+  position: relative;
+  /* ทำให้สามารถจัดตำแหน่งได้ */
+  transform: translate(-50%, -50%);
+  /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+  background-color: white;
+  overflow: hidden;
+  /* ป้องกันการเลื่อนในโมดอล */
+}
+
+.ti-modal-body-new {
+  height: 50vh;
+  display: flex;
+  justify-content: center;
+  /* จัดแนวนอนให้ตรงกลาง */
+  align-items: center;
+  /* จัดแนวตั้งให้ตรงกลาง */
+  padding: 1rem;
+
+}
+
+.swal2-confirm {
+  background-color: #1DBE5A !important;
+}
+
+.swal2-cancel {
+  background-color: #B3B3B3 !important;
+}
+
+.div:where(.swal2-icon) {
+  position: relative;
+  box-sizing: content-box;
+  justify-content: center;
+  width: 5em;
+  height: 5em;
+  margin: 2.5em auto .6em;
+  border: .25em solid rgba(0, 0, 0, 0);
+  border-radius: 50%;
+  border-color: white;
+  font-family: inherit;
+  line-height: 5em;
+  cursor: default;
+  user-select: none;
+}

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

+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { SwalService } from 'src/app/components/advanced/sweetalert/sweetalert.component';
+import Swal from 'sweetalert2';
+
+export interface dataModel {
+  check: boolean;
+  code: string;
+  period: string;
+  year: string;
+  startDate: string;
+  endDate: string;
+  status: string;
+}
+
+@Component({
+  selector: 'app-define-document-form',
+  templateUrl: './define-document-form.component.html',
+  styleUrls: ['./define-document-form.component.scss'],
+})
+export class DefineDocumentFormComponent {
+  [x: string]: any;
+  @Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
+  currentPage = 1;
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  search = '';
+  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',
+    },
+  ];
+  dataSelect: dataModel = {
+    check: false,
+    code: '',
+    period: '',
+    year: '',
+    startDate: '',
+    endDate: '',
+    status: '',
+  };
+  modalStatus: 'add' | 'edit' = 'add';
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private swalService: SwalService,
+    private toastr: ToastrService
+  ) {}
+
+  onEdit() {
+    this.sendGroupShow.emit('2');
+  }
+
+  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;
+    const filteredData = this.dataListFilter();
+    this.page = Array.from(
+      { length: Math.ceil(filteredData.length / 10) },
+      (_, i) => i + 1
+    );
+    this.dataListCheck();
+  }
+
+  showSuccessDelete() {
+    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+
+  basicAlert3() {
+    Swal.fire({
+      iconHtml: '<i class="ri-file-upload-line"></i>',
+      title: 'ส่งออกเอกสาร',
+      text: 'คุณต้องการส่งออกเอกสารฉบับนี้ใช่หรือไม่',
+      showCancelButton: true,
+      confirmButtonText: 'ส่งออกเอกสาร',
+      confirmButtonColor: '#1DBE5A',
+      cancelButtonText: 'ย้อนกลับ',
+      cancelButtonColor: '#B3B3B3',
+      reverseButtons: true,
+      customClass: {
+        icon: 'custom-icon',
+      },
+    }).then((result) => {
+      if (result.isConfirmed) {
+        Swal.fire({
+          title: 'ส่งออกสำเร็จ!',
+          text: 'เอกสารของคุณถูกส่งออกแล้ว',
+          icon: 'success',
+          confirmButtonColor: '#0162e8',
+        });
+      } else if (result.dismiss === Swal.DismissReason.cancel) {
+        Swal.fire({
+          title: 'ยกเลิก!',
+          text: 'การส่งออกถูกยกเลิก',
+          icon: 'error',
+          confirmButtonColor: '#f43f5e',
+        });
+      }
+    });
+  }
+}

src/app/components/competency-assessment/evaluation-cycle-manager/define-document-form/edit-define-document-form/edit-define-document-form.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*/
+}
+
+table.ti-custom-table th {
+  height: 60px;
+}
+
+table.ti-custom-table thead {
+  height: 50px;
+}
+table.ti-custom-table thead th span {
+  font-size: 12px;
+  font-weight: bold;
+}
+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 {
+  overflow: auto;
+}
+.header-title-type {
+  width: 100%;
+  min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
+  // margin-top: 50px;
+  // margin-bottom: 16px;
+  justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+  align-items: center; /* จัดกลางแนวตั้ง */
+  padding-top: 50px;
+  padding-bottom: 1rem;
+}
+.bg-input-readonly{
+  background-color:  rgb(241 245 249);
+}
\ No newline at end of file

src/app/components/competency-assessment/evaluation-cycle-manager/define-document-form/edit-define-document-form/edit-define-document-form.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-edit-define-document-form',
+  templateUrl: './edit-define-document-form.component.html',
+  styleUrls: ['./edit-define-document-form.component.scss']
+})
+export class EditDefineDocumentFormComponent {
+  @Input() pathTitle = ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'จัดกลุ่มสมรรถนะ'];
+  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
+  @Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
+  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', tab.text]);
+    this.activeTab = tab.id;
+  }
+  onBack() {
+    this.sendGroupShow.emit('1');  // เปลี่ยนกลับไปหน้า 1
+  }
+  // การจัดการการเปิดปิด 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 อื่นยังเปิดอยู่หรือไม่
+  }
+
+  // ฟังก์ชัน toggle checkbox
+  isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
+  
+  toggleCheckbox() {
+    this.isChecked = !this.isChecked; // สลับสถานะ
+  }
+
+  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
+  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/competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component.html

@@ -11,24 +11,29 @@
                 <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 = ['การประเมินสมรรถนะ', 'การจัดการรอบการประเมิน', 'รอบการประเมิน']">
+                    (click)="activeTab='underline-1';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 = ['การประเมินสมรรถนะ', 'การจัดการรอบการประเมิน', 'กำหนดฟอร์มเอกสาร']">
+                    (click)="activeTab='underline-2';pathTitle = ['การประเมินสมรรถนะ', 'การจัดการรอบการประเมิน', 'กำหนดฟอร์มเอกสาร']">
                     กำหนดฟอร์มเอกสาร
                 </a>
             </nav>
         </div>
-        <div class="pt-50px px-2rem">
+        <div class="px-2rem" [ngClass]="{'pt-50px': groupShow !== '2'}">
             <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
                 <app-evaluation-cycle></app-evaluation-cycle>
             </div>
-            <div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
-                รายละเอียดกำหนดฟอร์มเอกสาร
+            <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2"
+                *ngIf="activeTab === 'underline-2'">
+                <app-define-document-form *ngIf="groupShow=='1'"
+                    (sendGroupShow)="groupShow=$event"></app-define-document-form>
+                <app-edit-define-document-form *ngIf="groupShow=='2'"
+                    (sendGroupShow)="groupShow=$event"></app-edit-define-document-form>
             </div>
         </div>
+        
     </div>
 </div>
\ No newline at end of file

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

@@ -6,4 +6,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class EvaluationCycleManagerComponent {
   @Input() pathTitle = ['การประเมินสมรรถนะ', 'การจัดการรอบการประเมิน', 'รอบการประเมิน']
+  activeTab: string = 'underline-1'; // Tab แรกแสดงเป็นค่าเริ่มต้น
+  groupShow = '1'
 }
\ No newline at end of file

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

@@ -84,6 +84,8 @@ import { AssessmentManagementComponent } from '../performance-management-evaluat
 import { AssigningApproversComponent } from '../performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component';
 import { SubJobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component';
 import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
+import { DefineDocumentFormComponent } from '../competency-assessment/evaluation-cycle-manager/define-document-form/define-document-form.component';
+import { EditDefineDocumentFormComponent } from '../competency-assessment/evaluation-cycle-manager/define-document-form/edit-define-document-form/edit-define-document-form.component';
 
 @NgModule({
   declarations: [
@@ -150,6 +152,8 @@ import { JobPositionIndicatorsComponent } from '../job-detail-components/job-pos
     AssigningApproversComponent,
     JobPositionIndicatorsComponent,
     SubJobPositionIndicatorsComponent,
+    DefineDocumentFormComponent,
+    EditDefineDocumentFormComponent,
   ],
   imports: [
     CommonModule,