diff --git a/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts b/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts index aaf49f9..afdddf2 100644 --- a/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts +++ b/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts @@ -68,15 +68,7 @@ export class EditGruopCompetenciesComponent { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล addUser() { - console.log('เพิ่มผู้ใช้งาน'); - } - - deleteUser() { - console.log('ลบผู้ใช้งาน'); - } - editUser() { - console.log('แก้ไขผู้ใช้งาน'); } currentModal = ""; diff --git a/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts b/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts index 26d2141..c440bea 100644 --- a/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts +++ b/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts @@ -33,7 +33,6 @@ export class EditGroupIndicators implements OnInit { // ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข saveData(event: any, id: any): void { const updatedText = event.target.innerText; // ข้อความที่พิมพ์เข้าไป - console.log('บันทึกข้อมูล:', id, updatedText); // เก็บข้อมูลใน localStorage localStorage.setItem(`item-${id}`, updatedText); @@ -93,16 +92,9 @@ export class EditGroupIndicators implements OnInit { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล addUser() { - console.log('เพิ่มผู้ใช้งาน'); + } - deleteUser() { - console.log('ลบผู้ใช้งาน'); - } - - editUser() { - console.log('แก้ไขผู้ใช้งาน'); - } currentModal = ""; diff --git a/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts b/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts index 86981c2..6058838 100644 --- a/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts +++ b/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts @@ -65,15 +65,7 @@ export class DevelopmentCourseComponent { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล addUser() { - console.log('เพิ่มผู้ใช้งาน'); - } - - deleteUser() { - console.log('ลบผู้ใช้งาน'); - } - - editUser() { - console.log('แก้ไขผู้ใช้งาน'); + } currentModal = ""; diff --git a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html index 7a64048..a8aaeb2 100644 --- a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html +++ b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html @@ -573,7 +573,7 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#set-idp-development-plan-alert-add-modal" (click)="addUser();showSuccess()"> + data-hs-overlay="#set-idp-development-plan-alert-add-modal" (click)="showSuccess()"> บันทึกข้อมูล </a> </div> @@ -609,7 +609,7 @@ ย้อนกลับ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" - data-hs-overlay="#set-idp-development-plan-alert-edit-modal" (click)="addUser();showSuccessEdit()"> + data-hs-overlay="#set-idp-development-plan-alert-edit-modal" (click)="showSuccessEdit()"> บันทึกข้อมูล </a> </div> @@ -645,7 +645,7 @@ </button> <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#set-idp-development-plan-alert-delete-modal" - (click)="addUser();showSuccessDelete()"> + (click)="showSuccessDelete()"> ลบข้อมูล </a> </div> diff --git a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts index d13a3ef..425d1a2 100644 --- a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts +++ b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts @@ -62,19 +62,6 @@ export class SetIdpDevelopmentPlanComponent { toggleCheckbox() { this.isChecked = !this.isChecked; // สลับสถานะ } - - // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล - addUser() { - console.log('เพิ่มผู้ใช้งาน'); - } - - deleteUser() { - console.log('ลบผู้ใช้งาน'); - } - - editUser() { - console.log('แก้ไขผู้ใช้งาน'); - } currentModal = ""; diff --git a/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts b/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts index 406405f..2526a73 100644 --- a/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts +++ b/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts @@ -65,16 +65,9 @@ export class CompetencyTopic { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล addUser() { - console.log('เพิ่มผู้ใช้งาน'); + } - deleteUser() { - console.log('ลบผู้ใช้งาน'); - } - - editUser() { - console.log('แก้ไขผู้ใช้งาน'); - } currentModal = ""; diff --git a/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts b/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts index a4084f1..6419f86 100644 --- a/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts +++ b/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts @@ -63,18 +63,7 @@ export class TypeRegistration { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล addUser() { - // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน - console.log('เพิ่มผู้ใช้งาน'); - } - - deleteUser() { - // ฟังก์ชันสำหรับการลบผู้ใช้งาน - console.log('ลบผู้ใช้งาน'); - } - editUser() { - // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน - console.log('แก้ไขผู้ใช้งาน'); } currentModal = "" constructor(private toastr: ToastrService) { } diff --git a/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts b/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts index ae2dedd..9d633bf 100644 --- a/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts +++ b/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts @@ -63,19 +63,9 @@ export class CompetencyConfigurationComponent { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล addUser() { - // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน - console.log('เพิ่มผู้ใช้งาน'); + } - deleteUser() { - // ฟังก์ชันสำหรับการลบผู้ใช้งาน - console.log('ลบผู้ใช้งาน'); - } - - editUser() { - // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน - console.log('แก้ไขผู้ใช้งาน'); - } currentModal = "" constructor(private toastr: ToastrService) { } showSuccess() { diff --git a/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts b/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts index 9b29b74..41b0edf 100644 --- a/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts +++ b/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts @@ -63,19 +63,9 @@ export class AssessmentToolComponent { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล addUser() { - // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน - console.log('เพิ่มผู้ใช้งาน'); + } - deleteUser() { - // ฟังก์ชันสำหรับการลบผู้ใช้งาน - console.log('ลบผู้ใช้งาน'); - } - - editUser() { - // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน - console.log('แก้ไขผู้ใช้งาน'); - } currentModal = "" constructor(private toastr: ToastrService) { } showSuccess() { diff --git a/src/app/components/dashboard/dashboard-routing.module.ts b/src/app/components/dashboard/dashboard-routing.module.ts index 0fc21d8..b174ef9 100644 --- a/src/app/components/dashboard/dashboard-routing.module.ts +++ b/src/app/components/dashboard/dashboard-routing.module.ts @@ -31,6 +31,7 @@ import { JobQualificationsComponent } from '../job-detail-components/job-qualifi import { JobDetailComponent } from '../job-detail-components/job-detail/job-detail.component'; import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component'; import { AssessmentManagementComponent } from '../performance-management-evaluation/assessment-management/assessment-management.component'; +import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component'; @@ -69,6 +70,7 @@ const routes: Routes = [ { path: "job-detail",title: 'รายละเอียดของงาน', component: JobDetailComponent }, { path: "command-structure",title: 'โครงสร้างสายการบังคับบัญชา', component: CommandStructureComponent }, { path: "assessment-management",title: 'การจัดการการประเมิณ', component: AssessmentManagementComponent }, + { path: "job-position-indicators",title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent }, ] } ]; diff --git a/src/app/components/dashboard/dashboard.module.ts b/src/app/components/dashboard/dashboard.module.ts index e19c7ce..ad30ac8 100644 --- a/src/app/components/dashboard/dashboard.module.ts +++ b/src/app/components/dashboard/dashboard.module.ts @@ -81,6 +81,9 @@ import { SubCommandStructureComponent } from '../job-detail-components/command-s import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component'; import { AssessmentManagementComponent } from '../performance-management-evaluation/assessment-management/assessment-management.component'; 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'; + @NgModule({ @@ -146,6 +149,8 @@ import { AssigningApproversComponent } from '../performance-management-evaluatio SubCommandStructureComponent, AssessmentManagementComponent, AssigningApproversComponent, + JobPositionIndicatorsComponent, + SubJobPositionIndicatorsComponent, ], imports: [ CommonModule, diff --git a/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html new file mode 100644 index 0000000..997f29d --- /dev/null +++ b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html @@ -0,0 +1,25 @@ +<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 = ['การจัดการรายละเอียดงาน','ตัวชี้วัดของตำแหน่งงานd']"> + ตัวชี้วัดของตำแหน่งงาน + </a> + </nav> + </div> + <div class="mt-3 px-2rem"> + <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"> + <app-sub-job-position-indicators></app-sub-job-position-indicators> + </div> + </div> + </div> +</div> \ No newline at end of file diff --git a/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.scss b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.scss diff --git a/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts new file mode 100644 index 0000000..e5fedcf --- /dev/null +++ b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-job-position-Indicators', + templateUrl: './job-position-Indicators.component.html', + styleUrls: ['./job-position-Indicators.component.scss'] +}) +export class JobPositionIndicatorsComponent { + pathTitle = ['การจัดการรายละเอียดงาน', 'ตัวชี้วัดของตำแหน่งงาน'] +} diff --git a/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html new file mode 100644 index 0000000..bd3481f --- /dev/null +++ b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html @@ -0,0 +1,358 @@ +<div class="text-lg font-sm pt-2rem pb-1rem text-primary"> + <!-- รายละเอียดสาขาและหน่วยธุรกิจ --> +</div> +<div class="page"> + + <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"> + <div class="w-full min-height-50px mb-10px justify-between items-center"> + <div class="flex justify-between"> + <div class="flex pr-2"> + <!-- Content ของ div แรก --> + <div class="px-1"> + <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"> + <i class="ri-add-line"></i> + นำเข้าข้อมูล + </button> + + <a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end" + href="javascript:void(0);"> + ดาวโหลดตัวอย่างไฟล์ + </a> + </div> + </div> + <div class="flex justify-end"> + <div class="px-1"> + <div class="relative shadow-md"> + <input type="text" id="hs-leading-icon" name="hs-leading-icon" + class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " + placeholder="Search by No. or Name" [(ngModel)]="search" + (ngModelChange)="searchChange()"> + + <div + class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> + <i class="ri-search-line text-gray"></i> + </div> + </div> + </div> + <div class="px-1"> + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" + data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"> + <i class="ri-delete-bin-6-line"></i> + Delete + </button> + </div> + <div class="px-1"> + <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> + <i class="ti ti-book fs-l"></i> + Help + </button> + </div> + </div> + </div> + </div> + + <div class="page px-rem"> + <div class="overflow-auto table-bordered rounded-t-md"> + <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1"> + <div class="overflow-auto shadow-md"> + <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> + <thead> + <tr> + <ng-container + *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)','ชื่อลักษณะงาน (อังกฤษ)','การจัดการ']; let f = first; let l = last"> + <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" + [class.!text-center]="f||l"> + <span class="!text-sm">{{ item }}</span> + <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l"> + <i class="ti ti-dots-vertical fs-l"></i> + </div> + </th> + </ng-container> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of[ + ['01','001', 'Department Manager 1','Department Manager 1'], + ['02','002', 'Department Manager 2','Department Manager 2'], + ['03','003', 'Department 1-HRD','Department 1-HRD'], + ['04','004', 'Department Manager 3','Department Manager 3'], + ['05','005', 'Department Manager 4','Department Manager 4']];let i = index"> + <td class="flex justify-center"> + {{item[0]}} + </td> + <td>{{item[1]}}</td> + <td>{{item[2]}}</td> + <td>{{item[3]}}</td> + <td class="flex justify-center"> + <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" + data-hs-overlay="#sub-job-position-indicators-modal-edit"></i> + <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" + data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"></i> + </td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length"> + <ul class="ti-pagination"> + <li> + <a aria-label="anchor" class="page-link" href="javascript:void(0);" + (click)="currentPage = (currentPage-1 || 1)"> + <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> + </a> + </li> + <li *ngFor="let item of page;let f = first;let l = last"> + <ng-container *ngIf="item==3&¤tPage!=1&¤tPage!=2&¤tPage!=3"> + <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i + class="ri-more-line"></i> + </a> + </ng-container> + <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)"> + <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage" + (click)="currentPage=item">{{item}} + </a> + </ng-container> + <ng-container + *ngIf="item==page.length-2&¤tPage!=page.length&¤tPage!=page.length-1&¤tPage!=page.length-2"> + <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i + class="ri-more-line"></i> + </a> + </ng-container> + </li> + <li> + <a aria-label="anchor" class="page-link" href="javascript:void(0);" + (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )"> + <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> + </a> + </li> + </ul> + </nav> + </div> + + + <div id="sub-job-position-indicators-modal-add" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> + <div class="max-h-full overflow-hidden ti-modal-content"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + เพิ่มข้อมูลรายละเอียดของงาน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#sub-job-position-indicators-modal-add"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-center"> + <div class="flex justify-end" style="padding-right: 1rem;"> + <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" + xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" + stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)"> + <g id="SVGRepo_bgCarrier" stroke-width="0"></g> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"> + </g> + <g id="SVGRepo_iconCarrier"> + <path d="M15 49A24 24 0 0 1 32 8"></path> + <path d="M49 15a24 24 0 0 1-17 41"></path> + <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline> + <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline> + </g> + </svg> + Clear + </button> + </div> + <div class="px-1"> + <button href="javascript:void(0);" + class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> + <i class="ti ti-book fs-l"></i> + Help + </button> + </div> + </div> + </div> + <div class="ti-modal-body mt-1"> + <label for="input-label" class="ti-form-label">รหัสงาน</label> + <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001"> + <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label> + <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1"> + <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label> + <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1"> + <label for="detail_eng" class="ti-form-label mt-2rem">ตัวชี้วัดของตำแหน่งงาน (Key Performance Indicators: KPIs)</label> + <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50"> +1. +2. +3. +4. +5. + </textarea> + <div class="flex justify-end mt-3rem mb-1rem space-x-4"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#sub-job-position-indicators-alert-add-modal"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#sub-job-position-indicators-alert-add-modal"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> + </div> + + <div id="sub-job-position-indicators-modal-edit" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> + <div class="max-h-full overflow-hidden ti-modal-content"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แก้ไขข้อมูลรายละเอียดของงาน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#sub-job-position-indicators-modal-edit"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-center"> + <div class="flex justify-end" style="padding-right: 1rem;"> + <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" + xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" + stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)"> + <g id="SVGRepo_bgCarrier" stroke-width="0"></g> + <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"> + </g> + <g id="SVGRepo_iconCarrier"> + <path d="M15 49A24 24 0 0 1 32 8"></path> + <path d="M49 15a24 24 0 0 1-17 41"></path> + <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline> + <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline> + </g> + </svg> + Clear + </button> + </div> + <div class="px-1"> + <button href="javascript:void(0);" + class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> + <i class="ti ti-book fs-l"></i> + Help + </button> + </div> + </div> + </div> + <div class="ti-modal-body mt-1"> + <label for="input-label" class="ti-form-label">รหัสงาน</label> + <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001"> + <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label> + <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1"> + <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label> + <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1"> + <label for="detail_eng" class="ti-form-label mt-2rem">ตัวชี้วัดของตำแหน่งงาน (Key Performance Indicators: KPIs)</label> + <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50"> +1. +2. +3. +4. +5. + </textarea> + <div class="flex justify-end mt-3rem mb-1rem space-x-4"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#sub-job-position-indicators-modal-edit"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#sub-job-position-indicators-alert-add-modal"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> + </div> + + <div id="sub-job-position-indicators-alert-add-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#sub-job-position-indicators-alert-add-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการบันทึกข้อมูลหรือไม่ + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#sub-job-position-indicators-modal-edit"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#sub-job-position-indicators-alert-add-modal" (click)="addBu1();showSuccessAdd()"> + บันทึกข้อมูล + </a> + </div> + </div> + </div> + </div> + </div> + <div id="sub-job-position-indicators-alert-delete-modal" class="hs-overlay hidden ti-modal"> + <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> + <div class="max-h-full overflow-hidden ti-modal-content w-full"> + <div class="ti-modal-header"> + <h3 class="text-xxl font-bold text-primary"> + แจ้งเตือน + </h3> + <div class="flex justify-end"> + <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" + data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"> + <span class="sr-only">Close</span> + <i class="ti ti-circle-x fs-xxl"></i> + </button> + </div> + </div> + <div class="ti-modal-body "> + <p class="mt-1 text-gray-800 dark:text-white/70"> + ยืนยันการลบข้อมูลหรือไม่! + </p> + + <div class="flex justify-end mt-2rem mb-1rem"> + <button type="button" + class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" + data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"> + ย้อนกลับ + </button> + <a class="ti-btn ti-btn-success" href="javascript:void(0);" + data-hs-overlay="#sub-job-position-indicators-alert-delete-modal" + (click)="addBu1();showSuccessDelete()"> + ลบข้อมูล + </a> + </div> + </div> + </div> + </div> + </div> + + </div> +</div> \ No newline at end of file diff --git a/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.scss b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.scss new file mode 100644 index 0000000..f929cb7 --- /dev/null +++ b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.scss @@ -0,0 +1,150 @@ +.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: hidden; +} +.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; +} +// .icon-container { +// display: inline-flex; +// align-items: center; +// justify-content: center; +// width: 20px; /* ปรับขนาดตามต้องการ */ +// height: 20px; /* ปรับขนาดตามต้องการ */ +// border: 2px solid #2196F3; /* กรอบสีน้ำเงิน */ +// border-radius: 5px; /* มุมโค้งมนเล็กน้อย */ +// background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */ +// margin-bottom: 10px; /* เว้นระยะห่างจาก textarea */ +// } + +// .icon-container i { +// font-size: 10px; /* ขนาดไอคอน */ +// color: #2196F3; /* สีไอคอน */ +// } + +.icon-container { + display: flex; + gap: 1px; /* ระยะห่างระหว่างไอคอน */ +} + +.icon-container i { + display: flex; + align-items: center; + justify-content: center; + width: 20px; /* ขนาดกรอบ */ + height: 20px; + border: 2px solid #2196F3; /* สีกรอบ */ + border-radius: 4px; /* มุมโค้งมน */ + background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */ + color: #2196F3; /* สีไอคอน */ + font-size: 10px; /* ขนาดไอคอน */ +} + diff --git a/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts new file mode 100644 index 0000000..12c0edc --- /dev/null +++ b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts @@ -0,0 +1,73 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ToastrService } from 'ngx-toastr'; +import { JobModel, MyJobModel } from 'src/app/shared/model/job.model'; + + +@Component({ + selector: 'app-sub-job-position-indicators', + templateUrl: './sub-job-position-indicators.component.html', + styleUrls: ['./sub-job-position-indicators.component.scss'] +}) +export class SubJobPositionIndicatorsComponent { + currentPage = 1 + page = Array.from({ length: 1 }, (_, i) => i + 1); + jobList: JobModel[] = [] + job: JobModel = new MyJobModel({}) + search = "" + constructor( + private toastr: ToastrService + ) { } + ngOnInit(): void { + } + + searchChange() { + this.currentPage = 1 + this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1); + } + jobListFilter() { + return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) || + x.tdesc.toLowerCase().includes(this.search) || + x.edesc.toLowerCase().includes(this.search)) + } + selectJob(job: JobModel) { + // this.showSuccess() + this.job = new MyJobModel(job) + } + + showSuccessAdd() { + 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', + }); + } + addBu1() { + // this.bu1Service.post(this.bu1).subscribe((response:any) => { + // if (response.success) { + // this.getBu1List() + // } + // }) + } + deleteJob(job: JobModel) { + // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => { + // if (response.success) { + // this.getBu1List() + // } + // }) + } + + } + \ No newline at end of file diff --git a/src/app/shared/services/navservice.ts b/src/app/shared/services/navservice.ts index 45b783e..e36a55f 100644 --- a/src/app/shared/services/navservice.ts +++ b/src/app/shared/services/navservice.ts @@ -108,6 +108,7 @@ export class NavService implements OnDestroy { { path: '/job-detail', title: 'รายละเอียดของงาน', type: 'link' }, { path: '/job-qualifications', title: 'คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่', type: 'link' }, { path: '/job-competency', title: 'ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน', type: 'link' }, + { path: '/job-position-indicators', title: 'ตัวชี้วัดของตำแหน่งงาน', type: 'link' }, ], },