แผนพัฒนา IDP (checkbox)

src/app/components/competency-assessment/idp-development-plan/idp-development-plan.component.html

@@ -17,8 +17,7 @@
         </div>
         <div class="mt-3 px-3rem">
             <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
-                <app-set-idp-development-plan [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event"></app-set-idp-development-plan>
+                <app-set-idp-development-plan></app-set-idp-development-plan>
             </div>
         </div>
     </div>

src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
+import { IdpDevelopmentModel, MyIdpDevelopmentModel } from 'src/app/shared/model/idp-development.model';
+import { IdpDevelopmentService } from 'src/app/shared/services/idp-development.service';
 
 @Component({
   selector: 'app-set-idp-development-plan',
@@ -7,66 +9,47 @@ import { ToastrService } from 'ngx-toastr';
   styleUrls: ['./set-idp-development-plan.component.scss']
 })
 export class SetIdpDevelopmentPlanComponent {
-  @Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนหลักสูตร', 'หลักสูตรการพัฒนา'];
-  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
-  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+  idpLoading = false
+  idpData: IdpDevelopmentModel = new MyIdpDevelopmentModel({})
+  constructor(private idpDevelopmentService: IdpDevelopmentService,
+    private toastr: ToastrService,
+    private cdr: ChangeDetectorRef
+  ) { }
 
-  // ฟังก์ชันในการเปลี่ยนแท็บ
-  changeTab(tab: { id: string, text: string }) {
-    this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ตั้งค่าผู้ใช้งาน', tab.text]);
-    this.activeTab = tab.id;
+  ngOnInit(): void {
+    this.getIdpData()
   }
 
-  // การจัดการการเปิดปิด 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 ทั้งหมดปิดแล้ว
-    }
+  getIdpData() {
+    this.idpLoading = true
+    this.idpDevelopmentService.getList().subscribe({
+      next: response => {
+        this.idpData = new MyIdpDevelopmentModel(response)
+        this.idpData.developmentPlan.sort((a, b) => +a.planId - +b.planId)
+        this.idpLoading = false
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.idpLoading = false
+        this.cdr.detectChanges()
+      }
+    })
   }
 
-  isAnyModalOpen(): boolean {
-    return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
+  saveIdp() {
+    this.idpDevelopmentService.post(this.idpData).subscribe({
+      next: response => {
+        if (response.success) {
+          this.showAlert(response.message, 'success')
+          this.getIdpData()
+        } else {
+          this.showAlert(response.message, 'error')
+        }
+      }, error: error => {
+        this.showAlert(error.message, 'error')
+      }
+    })
   }
 
-  // ฟังก์ชัน toggle checkbox
-  isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
-  
-  toggleCheckbox() {
-    this.isChecked = !this.isChecked; // สลับสถานะ
-  }
-  
-  currentModal = "";
-  
-  constructor(private toastr: ToastrService) { }
-
   showSuccess() {
     this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
       timeOut: 3000,
@@ -74,17 +57,10 @@ export class SetIdpDevelopmentPlanComponent {
     });
   }
 
-  showSuccessEdit() {
-    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
       timeOut: 3000,
       positionClass: 'toast-top-right',
-    });
-  }
-
-  showSuccessDelete() {
-    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    });
+    })
   }
 }

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

@@ -132,6 +132,7 @@ import { BranchService } from 'src/app/shared/services/่branch.service';
 import { JobCodeService } from 'src/app/shared/services/่job-code.service';
 import { FileService } from 'src/app/shared/services/file.service';
 import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service';
+import { IdpDevelopmentService } from 'src/app/shared/services/idp-development.service';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -294,6 +295,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     BranchService,
     FileService,
     CompetencyGroupGradeService,
+    IdpDevelopmentService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/shared/model/idp-development.model.ts

+export interface DevelopmentPlan {
+    planId: string;
+    companyId: string;
+    ojtJobAssignment: boolean;
+    coachMentor: boolean;
+    training: boolean;
+  }
+  
+  export interface IdpDevelopmentModel {
+    evaluationId: string;
+    companyId: string;
+    score: number;
+    developmentPlan: DevelopmentPlan[];
+  }
+  
+  export class MyIdpDevelopmentModel implements IdpDevelopmentModel {
+    evaluationId: string;
+    companyId: string;
+    score: number;
+    developmentPlan: DevelopmentPlan[];
+  
+    constructor(data: Partial<IdpDevelopmentModel>) {
+      this.evaluationId = data.evaluationId || '';
+      this.companyId = data.companyId || '';
+      this.score = data.score ?? 0;
+      this.developmentPlan = data.developmentPlan || [];
+    }
+  }
+  
\ No newline at end of file

src/app/shared/services/idp-development.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { AlertModel } from '../model/alert.model';
+import { IdpDevelopmentModel } from '../model/idp-development.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class IdpDevelopmentService {
+    api = "/idp"
+    urlApi = environment.baseUrl + this.api
+    constructor(private http: HttpClient) {
+    }
+    getList(): Observable<IdpDevelopmentModel> {
+        return this.http.get<IdpDevelopmentModel>(this.urlApi + "/lists")
+    }
+    // getById(companyId: string): Observable<IdpDevelopmentModel> {
+    //     return this.http.get<IdpDevelopmentModel>(this.urlApi + "/" + companyId)
+    // }
+    post(body: IdpDevelopmentModel): Observable<AlertModel> {
+        return this.http.post<AlertModel>(this.urlApi, body)
+      }
+    delete(body: IdpDevelopmentModel | IdpDevelopmentModel[]): Observable<AlertModel> {
+        const options = {
+          headers: new HttpHeaders({
+            "Content-Type": "application/json",
+          }),
+          body: body
+        };
+    return this.http.delete<AlertModel>(this.urlApi, options)
+    }
+}