การประเมินสมรรถนะ > การจัดการสมรรถนะ > ตัวชี้วัดเเละหลักสูตร

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.scss

@@ -3,58 +3,58 @@
   top: 96px;
   z-index: 1;
   right: 41vw;
-  }
-  .button-help {
+}
+.button-help {
   position: absolute;
   top: 0px;
   z-index: 1;
   right: 0vw;
   margin: 4.2rem;
   margin-right: 10px; /* เพิ่มใหม่ 12/16*/
-  }
+}
 
-  .htable{
+.htable {
   height: 400px;
-  }
-  table.ti-custom-table thead {
+}
+table.ti-custom-table thead {
   height: 60px;
-  }
-  table.ti-custom-table thead th span {
+}
+table.ti-custom-table thead th span {
   font-size: 12px;
   font-weight: bold;
-  }
-  .ti-custom-table td{
+}
+.ti-custom-table td {
   padding-left: 0.9rem;
   padding-right: 1rem;
-  }
+}
 
-  .ti-custom-table thead th:first-child {
+.ti-custom-table thead th:first-child {
   width: 120px; /* ปรับความกว้างตามที่ต้องการ */
   text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */
   padding-left: 2px;
   padding-right: 2px;
-  }
-  .ti-custom-table thead th:last-child {
+}
+.ti-custom-table thead th:last-child {
   width: 400px; /* ปรับความกว้างตามที่ต้องการ */
-  }
-  a.custom-link {
+}
+a.custom-link {
   padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
-  }
-  /* สไตล์ของแถบเมนู */
-  .nav-tabs {
+}
+/* สไตล์ของแถบเมนู */
+.nav-tabs {
   display: flex;
   width: 100%;
   cursor: pointer;
   margin-bottom: 10px;
   height: 20%;
-  }
+}
 
-  .nav-item {
+.nav-item {
   list-style: none;
   margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
+}
 
-  .nav-link {
+.nav-link {
   text-decoration: none;
   padding: 10px 20px;
   display: inline-block;
@@ -63,13 +63,13 @@
   border-style: solid;
   border-color: #ccc;
   border-radius: 5px 5px 0px 0px;
-  }
+}
 
-  .nav-link:hover {
+.nav-link:hover {
   background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-  }
+}
 
-  .nav-link.active {
+.nav-link.active {
   color: #ffffff; /* สีตัวอักษรในสถานะ active */
   font-size: large;
   border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
@@ -78,74 +78,58 @@
   border-style: solid;
   border-color: rgb(var(--color-primary));
   border-radius: 5px 5px 0px 0px;
-  }
+}
 
-  .tab-content {
+.tab-content {
   margin-top: 20px;
-  }
+}
 
-  .tab-pane.active {
+.tab-pane.active {
   display: block;
-  }
+}
 
-  .nav-item-text {
+.nav-item-text {
   list-style: none;
   margin-right: 10px; /* ช่องว่างระหว่างเมนู */
-  }
-  .nav-link-text {
+}
+.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 {
+}
+.ti-pagination .page-link.active {
   background-color: #569bf5;
   color: white;
   border-radius: 50%;
   padding: 8px 12px;
-  }
-  .box-body{
+}
+.box-body {
   padding: 0rem;
-  }
-  .page{
+}
+.page {
   min-height: 0vh;
-  }
-
-  
-  .ti-modal-content {
-    padding: 1rem;
-    height: 650px; 
-    overflow-y: auto;
-  }
-  
-  .ti-modal-content-alert{
-    width: 35%;  /* ความกว้างที่คุณต้องการ */
-    position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
-    top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
-    left: 50%;  /* ให้อยู่กลางในแนวนอน */
-    transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
-    background-color: #ffffff;
-  }
+}
 
-  .header-title-type {
+.header-title-type {
   width: 100%;
   min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
   justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
   align-items: center; /* จัดกลางแนวตั้ง */
   padding-top: 50px;
   padding-bottom: 1rem;
-  }
+}
 
-  .body-content{
+.body-content {
   margin-bottom: 30px;
   overflow-y: auto;
-  }
+}
 
-  .bg-input-readonly{
+.bg-input-readonly {
   background-color: rgb(241 245 249);
-  }
+}
 
 .ciricon {
   height: 12px; /* กำหนดความสูงของวงกลม */
@@ -161,4 +145,3 @@
 .ri-close-line {
   font-size: 15px; /* ขนาดไอคอน */
 }
-  
\ No newline at end of file

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html

@@ -3,8 +3,7 @@
     <div class="flex justify-end">
       <div class="flex pr-2">
         <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"
+          <input type="text" 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">
@@ -35,14 +34,24 @@
             </ng-container>
           </tr>
         </thead>
-        <tbody *ngIf="!dataListFilter().length">
+        <tbody *ngIf="dataLoading">
+          <tr>
+            <td class="text-center" colspan="100%">
+              <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
+                aria-label="loading">
+                <span class="sr-only">Loading...</span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+        <tbody *ngIf="!dataLoading&&!dataListFilter().length">
           <tr>
             <td class="text-center" colspan="100%">
               ไม่พบข้อมูล
             </td>
           </tr>
         </tbody>
-        <tbody *ngIf="dataListFilter().length">
+        <tbody *ngIf="!dataLoading&&dataListFilter().length">
           <tr
             *ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
             <td class="text-center">
@@ -52,7 +61,8 @@
             <td class="text-center">{{item.type}}</td>
             <td class="flex justify-center">
               <i class="ti ti-eye cursor-pointer i-gray fs-l px-1"></i>
-              <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="editTab=true;pathTitleChange()"></i>
+              <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                (click)="selectIndicatorsCourses(item);editTab=true;pathTitleChange()"></i>
               <i class="ti ti-file-download cursor-pointer i-gray fs-l px-1"></i>
             </td>
           </tr>
@@ -101,5 +111,6 @@
 
 
 <ng-container *ngIf="editTab">
-  <app-edit-group-indicators (sendEdit)="editTab=$event;pathTitleChange()"></app-edit-group-indicators>
+  <app-edit-group-indicators [competencytopic]="indicatorsCourses"
+    (sendEdit)="editTab=$event;pathTitleChange()"></app-edit-group-indicators>
 </ng-container>
\ No newline at end of file

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.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 { CompetencytopicModel, MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.model';
+import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service';
 export interface DataModel {
   code: string,
   name: string,
@@ -17,19 +19,38 @@ export class IndicatorsAndCurriculumComponent {
   search = ""
   page = Array.from({ length: 1 }, (_, i) => i + 1);
 
-  dataList: DataModel[] = [
-    { code: "CC-01", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)", type: "CC" },
-    { code: "CC-02", name: "การทำงานเป็นทีมแบบ TAT (TAT Teamwork)", type: "CC" },
-    { code: "CC-03", name: "ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)", type: "CC" },
-    { code: "MC-01", name: "การคิดเชิงกลยุทธ์ (Strategic Thinking)", type: "MC" },
-    { code: "MC-02", name: "การมีทัศนคติที่เติบโต (Mindset-Growth)", type: "MC" },
-    { code: "PC-01", name: "ความรู้ด้านกฎหมายแรงงาน, กฎหมายแพ่งพาณิชย์, กฎหมายอาญา", type: "PC" },
-  ]
-  constructor(private toastr: ToastrService) {
+  dataList: DataModel[] = []
+  indicatorsCoursesList: CompetencytopicModel[] = []
+  indicatorsCourses: CompetencytopicModel = new MyCompetencytopicModel({})
+  dataLoading = false
+  constructor(private toastr: ToastrService,
+    private cdr: ChangeDetectorRef,
+    private competencytopicService: CompetencytopicService,
+  ) {
     this.pathTitleChange()
+  }
+  ngOnInit(): void {
+    this.getList()
+  }
+  getList() {
+    this.dataLoading = true
+    this.competencytopicService.getList().subscribe({
+      next: response => {
+        this.dataList = response.map(x => ({ code: x.competencyTopicId, name: x.tdesc, type: x.competencyType.tdesc }))
+        this.indicatorsCoursesList = response
+        this.dataLoading = false
         this.searchChange()
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.dataLoading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+  selectIndicatorsCourses(data: DataModel) {
+    const indicatorsCourses = this.indicatorsCoursesList.find(x => x.competencyTopicId == data.code)
+    this.indicatorsCourses = new MyCompetencytopicModel(indicatorsCourses || {})
   }
-
   pathTitleChange() {
     this.sendPathTitle.emit(this.editTab ? ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร', 'การจัดการตัวชี้วัดเเละหลักสูตร'] : ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร'])
   }

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

@@ -130,6 +130,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 { IndicatorsCoursesService } from 'src/app/shared/services/indicators-courses.service';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -290,6 +291,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     BranchService,
     FileService,
     CompetencyGroupGradeService,
+    IndicatorsCoursesService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/shared/model/competency-assessment.model.ts

+export interface CompetencyAssessmentModel {
+    assessmentId: string
+    companyId: string
+    edesc: string
+    tdesc: string
+    shortName: string
+}
+export class MyCompetencyAssessmentModel implements CompetencyAssessmentModel {
+    assessmentId: string
+    companyId: string
+    edesc: string
+    tdesc: string
+    shortName: string
+    constructor(data: Partial<CompetencyAssessmentModel>) {
+        this.assessmentId = data.assessmentId || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+        this.companyId = data.companyId || ""
+        this.shortName = data.shortName || ""
+    }
+}
+

src/app/shared/model/competency-course.model.ts

+export interface CompetencyCourseModel {
+    competencyCourseId: string
+    companyId: string
+    edesc: string
+    tdesc: string
+    courseDetail: string
+    courseTopic: string
+}
+export class MyCompetencyCourseModel implements CompetencyCourseModel {
+    competencyCourseId: string
+    companyId: string
+    edesc: string
+    tdesc: string
+    courseDetail: string
+    courseTopic: string
+    constructor(data: Partial<CompetencyCourseModel>) {
+        this.competencyCourseId = data.competencyCourseId || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+        this.companyId = data.companyId || ""
+        this.courseDetail = data.courseDetail || ""
+        this.courseTopic = data.courseTopic || ""
+    }
+}
+

src/app/shared/model/competency-indicators-courses1-list.model.ts

+import { CompetencyCourseModel, MyCompetencyCourseModel } from "./competency-course.model"
+import { CompetencyIndicatorsCourses2ListModel, MyCompetencyIndicatorsCourses2ListModel } from "./competency-indicators-courses2-list.model"
+
+export interface CompetencyIndicatorsCourses1ListModel {
+    lineNo: number
+    companyId: string
+    competencyCourseId: string
+    competencyCourse: CompetencyCourseModel[]
+    competencyIndicatorsCourses2List: CompetencyIndicatorsCourses2ListModel[]
+}
+export class MyCompetencyIndicatorsCourses1ListModel implements CompetencyIndicatorsCourses1ListModel {
+    lineNo: number
+    companyId: string
+    competencyCourseId: string
+    competencyCourse: CompetencyCourseModel[]
+    competencyIndicatorsCourses2List: CompetencyIndicatorsCourses2ListModel[]
+    constructor(data: Partial<CompetencyIndicatorsCourses1ListModel>) {
+        this.lineNo = data.lineNo ?? 0
+        this.companyId = data.companyId || ""
+        this.competencyCourseId = data.competencyCourseId || ""
+        this.competencyCourse = data.competencyCourse?.map(x => new MyCompetencyCourseModel(x)) || []
+        this.competencyIndicatorsCourses2List = data.competencyIndicatorsCourses2List?.map(x => new MyCompetencyIndicatorsCourses2ListModel(x)) || []
+    }
+}
+

src/app/shared/model/competency-indicators-courses2-list.model.ts

+import { CompetencyAssessmentModel, MyCompetencyAssessmentModel } from "./competency-assessment.model"
+
+export interface CompetencyIndicatorsCourses2ListModel {
+    runNo: number
+    companyId: string
+    assessmentId: string
+    behavioralIndicators: string
+    competencyAssessment: CompetencyAssessmentModel[]
+}
+export class MyCompetencyIndicatorsCourses2ListModel implements CompetencyIndicatorsCourses2ListModel {
+    runNo: number
+    companyId: string
+    assessmentId: string
+    behavioralIndicators: string
+    competencyAssessment: CompetencyAssessmentModel[]
+    constructor(data: Partial<CompetencyIndicatorsCourses2ListModel>) {
+        this.runNo = data.runNo ?? 0
+        this.companyId = data.companyId || ""
+        this.assessmentId = data.assessmentId || ""
+        this.behavioralIndicators = data.behavioralIndicators || ""
+        this.competencyAssessment = data.competencyAssessment?.map(x => new MyCompetencyAssessmentModel(x)) || []
+    }
+}
+

src/app/shared/model/indicators-courses.model.ts

+
+import { CompetencyIndicatorsCourses1ListModel, MyCompetencyIndicatorsCourses1ListModel } from "./competency-indicators-courses1-list.model";
+import { CompetencytopicModel, MyCompetencytopicModel } from "./competencytopic.model";
+
+export interface IndicatorsCoursesModel {
+    competencyTopic: CompetencytopicModel
+    companyId: string
+    edesc: string
+    tdesc: string
+    indicatorsCourseDetailTh: string
+    indicatorsCourseDetailEn: string
+    competencyIndicatorsCourses1List: CompetencyIndicatorsCourses1ListModel[]
+}
+
+export class MyIndicatorsCoursesModel implements IndicatorsCoursesModel {
+    competencyTopic: CompetencytopicModel
+    companyId: string
+    edesc: string
+    tdesc: string
+    indicatorsCourseDetailTh: string
+    indicatorsCourseDetailEn: string
+    competencyIndicatorsCourses1List: CompetencyIndicatorsCourses1ListModel[]
+    constructor(data: Partial<IndicatorsCoursesModel>) {
+        this.competencyTopic = new MyCompetencytopicModel(data.competencyTopic || {})
+        this.companyId = data.companyId || ""
+        this.edesc = data.edesc || ""
+        this.tdesc = data.tdesc || ""
+        this.indicatorsCourseDetailTh = data.indicatorsCourseDetailTh || ""
+        this.indicatorsCourseDetailEn = data.indicatorsCourseDetailEn || ""
+        this.competencyIndicatorsCourses1List = data.competencyIndicatorsCourses1List?.map(x => new MyCompetencyIndicatorsCourses1ListModel(x)) || []
+    }
+}
+

src/app/shared/services/indicators-courses.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 { IndicatorsCoursesModel } from '../model/indicators-courses.model';
+@Injectable({
+  providedIn: 'root'
+})
+export class IndicatorsCoursesService {
+  api = "/indicators-courses"
+  urlApi = environment.baseUrl + this.api
+  constructor(private http: HttpClient) {
+  }
+  getList(): Observable<IndicatorsCoursesModel[]> {
+    return this.http.get<IndicatorsCoursesModel[]>(this.urlApi + "/lists")
+  }
+  getById(competencyIndicatorsId: string): Observable<IndicatorsCoursesModel> {
+    return this.http.get<IndicatorsCoursesModel>(this.urlApi + "/" + competencyIndicatorsId)
+  }
+  post(body: IndicatorsCoursesModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi, body)
+  }
+  delete(body: IndicatorsCoursesModel): Observable<AlertModel> {
+    const options = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    };
+    return this.http.delete<AlertModel>(this.urlApi, options)
+  }
+}