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

src/app/components/job-detail-components/job-competency/sub-job-competency/sub-job-competency.component.html

@@ -188,11 +188,11 @@
              </div>
              <div class="ti-modal-body" style="padding-top: 0px;">
                  <label for="input-label" class="ti-form-label mt-1rem">รหัสงาน</label>
-                 <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="selectJob.jobcodeId">
+                 <input type="text" id="input-label" class="ti-form-input  bg-input-readonly" readonly [(ngModel)]="selectJob.jobcodeId">
                  <label for="detail_th" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (ไทย)</label>
-                 <input type="text" id="detail_th" class="ti-form-input w-2/3 bg-input-readonly" readonly [(ngModel)]="selectJob.tdesc">
+                 <input type="text" id="detail_th" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.tdesc">
                  <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อลักษณะงาน (อังกฤษ)</label>
-                 <input type="text" id="detail_eng" class="ti-form-input w-2/3 bg-input-readonly" readonly [(ngModel)]="selectJob.edesc">
+                 <input type="text" id="detail_eng" class="ti-form-input bg-input-readonly" readonly [(ngModel)]="selectJob.edesc">
                  <label for="detail_eng" class="ti-form-label mt-2rem">ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน ( Job Competency)</label>
                 <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50" [(ngModel)]="selectJob.competencyWorkText"></textarea>
                  <div class="flex justify-end mt-2rem mb-1rem">

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 { ChangeDetectorRef, Component} from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
-import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
-
+import { JobCodeModel, MyJobCodeModel } from 'src/app/shared/model/job-code.model';
+import { FileService } from 'src/app/shared/services/file.service';
+import { JobCodeService } from 'src/app/shared/services/job-code.service';
 
 @Component({
   selector: 'app-sub-job-position-indicators',
@@ -9,65 +10,140 @@ import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
   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.includes(this.search) ||
-        x.tdesc.includes(this.search) ||
-        x.edesc.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()
-      //   }
-      // })
-    }
+    currentPage = 1
+     page = Array.from({ length: 1 }, (_, i) => i + 1);
+     pageSize=10
+     search = ""
+     jobCodeList:JobCodeModel[]=[]
+     loading = false
+ 
+     selectedFile: File | null = null;
+     selectedFileName: string = 'กรุณาเลือกไฟล์';
+ 
+     selectJob:JobCodeModel=new MyJobCodeModel({})
+     modalStatus=''
+     constructor(
+       private toastr: ToastrService,
+       private fileService: FileService,
+       private jobcodeService: JobCodeService,
+        private cdr: ChangeDetectorRef,
+     ) { }
+     ngOnInit(): void {
+       this.getListJob();
+     }
+     getListJob(){
+       this.loading = false
+       this.jobcodeService.getList().subscribe({
+         next: response => {
+           this.jobCodeList = response.map((x: any) => new MyJobCodeModel(x))
+           this.jobCodeList = this.jobCodeList.sort((a, b) => a.jobcodeId.localeCompare(b.jobcodeId))
+           this.loading = false
+           this.searchChange()
+           this.cdr.detectChanges()
+         }, error: error => {
+           this.loading = false
+           this.cdr.detectChanges()
+         }
+       })
+     }
+ 
+     searchChange() {
+       this.currentPage = 1
+       this.page = Array.from({ length: Math.ceil(this.jobcodeFilter().length / this.pageSize) }, (_, i) => i + 1);
+     }
+     edit(item :JobCodeModel){
+       this.selectJob = new MyJobCodeModel({})
+       this.selectJob = new MyJobCodeModel(item)
+     }
+     clearValue(){
+       this.selectJob.competencyWorkText = ''
+     }
+     save(){
+       this.jobcodeService.post(this.selectJob).subscribe((response:any) => {
+         if (response.success) {
+           this.showAlert(response.message, 'success')
+           this.selectJob = new MyJobCodeModel({})
+           this.getListJob();
+         } else {
+           this.showAlert(response.message, 'error')
+         }
+         this.cdr.detectChanges()
+       })
+     }
+     deleteJob(){
+       this.jobcodeService.delete(this.selectJob).subscribe((response:any) => {
+         if (response.success) {
+           this.showAlert(response.message, 'success')
+           this.selectJob = new MyJobCodeModel({})
+           this.getListJob();
+         } else {
+           this.showAlert(response.message, 'error')
+         }
+         this.cdr.detectChanges()
+       })
+     }
+     jobcodeFilter() {
+       return this.jobCodeList.filter(x =>
+         x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+         x.edesc.toLowerCase().includes(this.search.toLowerCase()) ||
+         x.jobcodeId.toLowerCase().includes(this.search.toLowerCase())
+       )
+     }
+     onFileSelected(event: any) {
+       this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
+       this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
+     }
+   
+     uploadFile() {
+       if (!this.selectedFile) {
+         alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
+         return
+       }
+       const formData = new FormData();
+       formData.append('file', this.selectedFile);
+       this.loading = true
+       this.fileService.uploadExcel(formData, 'IMPORT_KPI').subscribe({
+         next: response => {
+           if (response.success) {
+             this.showAlert(response.message, 'success')
+             this.getListJob();
+           } else {
+             this.showAlert(response.message, 'error')
+             this.loading = false
+           }
+         }, error: error => {
+           this.showAlert(error.message, 'error')
+           this.loading = false
+         }
+       })
+     }
+ 
+ 
+     downloadFile() {
+       const fileName = 'IMPORT_MJOBCODEV2.xlsx'
+       this.fileService.downloadTemplate(fileName).subscribe({
+         next: response => {
+           const url = window.URL.createObjectURL(response);
+           const a = document.createElement("a");
+           a.href = url;
+           a.download = fileName;
+           document.body.appendChild(a);
+           a.click();
+           document.body.removeChild(a);
+           window.URL.revokeObjectURL(url);
+         }, error: error => {
+           this.showAlert(error.message, 'error')
+         }
+       })
+   
+     }
+ 
+     showAlert(text: string, type: 'success' | 'error') {
+       this.toastr[type](text, 'แจ้งเตือน', {
+         timeOut: 3000,
+         positionClass: 'toast-top-right',
+       })
+     }
   
   }
   
\ No newline at end of file

src/app/shared/model/job-code.model.ts

@@ -44,6 +44,7 @@ export interface JobCodeModel {
     allPositionWorkPercent: number
     otherWorkText: string
     otherWorkPercent: number
+    kpiWorkText: string
 }
 
 export class MyJobCodeModel implements JobCodeModel {
@@ -82,6 +83,7 @@ export class MyJobCodeModel implements JobCodeModel {
     allPositionWorkPercent: number
     otherWorkText: string
     otherWorkPercent: number
+    kpiWorkText: string
     constructor(data: Partial<JobCodeModel>) {
         this.jobcodeId = data.jobcodeId || ""
         this.tdesc = data.tdesc || ""
@@ -118,6 +120,7 @@ export class MyJobCodeModel implements JobCodeModel {
         this.allPositionWorkPercent = data.allPositionWorkPercent ?? 0
         this.otherWorkText = data.otherWorkText || ""
         this.otherWorkPercent = data.otherWorkPercent ?? 0
+        this.kpiWorkText = data.kpiWorkText || ""
     }
 }