การจัดการรายละเอียดงาน > ตัวชี้วัดของตำแหน่งงาน

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

@@ -30,6 +30,7 @@ import { JobCompetencyComponent } from '../job-detail-components/job-competency/
 import { JobQualificationsComponent } from '../job-detail-components/job-qualifications/job-qualifications.component';
 import { JobDetailComponent } from '../job-detail-components/job-detail/job-detail.component';
 import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component';
+import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
 
 
 
@@ -67,6 +68,7 @@ const routes: Routes = [
       { path: "job-qualifications",title: 'คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่', component: JobQualificationsComponent },
       { path: "job-detail",title: 'รายละเอียดของงาน', component: JobDetailComponent },
       { path: "command-structure",title: 'โครงสร้างสายการบังคับบัญชา', component: CommandStructureComponent },
+      { path: "job-position-indicators",title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent },
     ]
   }
 ];

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

@@ -79,6 +79,8 @@ import { JobDetailComponent } from '../job-detail-components/job-detail/job-deta
 import { WorkDetailComponent } from '../job-detail-components/job-detail/work-detail/work-detail.component';
 import { SubCommandStructureComponent } from '../job-detail-components/command-structure/sub-command-structure/sub-command-structure.component';
 import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component';
+import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
+import { SubJobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-Indicators.component';
 
 
 @NgModule({
@@ -142,6 +144,8 @@ import { CommandStructureComponent } from '../job-detail-components/command-stru
     WorkDetailComponent,
     CommandStructureComponent,
     SubCommandStructureComponent,
+    JobPositionIndicatorsComponent,
+    SubJobPositionIndicatorsComponent,
   ],
   imports: [
     CommonModule,

src/app/components/job-detail-components/job-position-indicators/job-position-indicators.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 = ['การจัดการรายละเอียดงาน','ตัวชี้วัดของตำแหน่งงาน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

src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts

+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 = ['การจัดการรายละเอียดงาน', 'ตัวชี้วัดของตำแหน่งงาน']
+}

src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.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: 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; /* ขนาดไอคอน */
+}
+

src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts

+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

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' },
       ],
     },