ตาราง ทะเบียนกำหนดชื่อ > ประเภทสมรรถนะ

src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts

 import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 import { ToastrService } from 'ngx-toastr';
 import { MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.model';
 import { MyCompetencytypeModel } from 'src/app/shared/model/competencytype.model';
@@ -30,7 +31,6 @@ export interface DataModel2 {
 export class CompetencyTopic {
   currentPage = 1
   page = Array.from({ length: 1 }, (_, i) => i + 1);
-  search = ""
 
   currentPageModal = 1
   pageModal = Array.from({ length: 1 }, (_, i) => i + 1);
@@ -39,7 +39,7 @@ export class CompetencyTopic {
   isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
   currentModal = "";
   dataLoading = false
-  dataSelectList: DataModel[] = [];
+  topicList: CompetencytopicService[] = [];
   dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", definition: "", file: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }
   competencytypeListLoading = false
   competencytypeList: DataModel2[] = []
@@ -49,12 +49,36 @@ export class CompetencyTopic {
   selectedFileName: string = 'กรุณาเลือกไฟล์';
   examFile: File | null = null;
   examFileName: string = 'กรุณาเลือกไฟล์';
-  selectedItems: string[] = [];
 
 
   numDataListChecked = 0
   isDataListChecked = false
   isDataListCheckedAll = false
+
+  columns: ColumnModel[] = [{
+      field: "competencyTypeId",
+      headerText: "รหัส",
+      type: "string",
+      isPrimaryKey: true,
+    },
+    {
+      field: "tdesc",
+      headerText: "ชื่อประเภท",
+      type: "string"
+    },
+    {
+      field: "shortName",
+      headerText: "ชื่อย่อ",
+      type: "string"
+    }]
+    searchSettings = {
+      fields: ['competencyTypeId', 'tdesc', 'shortName'],
+      operator: 'contains',
+      ignoreCase: false
+    };
+    search = ''
+    selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
+  
   constructor(private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private fileService: FileService,

src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts

 import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
 import { ToastrService } from 'ngx-toastr';
 import { CompetencytypeModel, MyCompetencytypeModel } from 'src/app/shared/model/competencytype.model';
 import { CompetencytypeService } from 'src/app/shared/services/competencytype.service';
 import { FileService } from 'src/app/shared/services/file.service';
-export interface DataModel {
-  id: string
-  companyId: string
-  edesc: string
-  name: string
-  code: string
-  level: string
-  weight: number
-  checked: boolean
-}
+
 @Component({
   selector: 'app-type-registration',
   templateUrl: './type-registration.component.html',
   styleUrls: ['./type-registration.component.scss']
 })
 export class TypeRegistration {
-  isChecked: boolean = false;
-  currentPage = 1
-  selectedItems: string[] = [];
-  page = Array.from({ length: 1 }, (_, i) => i + 1);
 
-  numDataListChecked = 0
-  isDataListChecked = false
-  isDataListCheckedAll = false
 
-  dataSelectList: DataModel[] = [];
+  typeList: CompetencytypeModel[] = [];
   dataLoading = false
-  dataSelect: DataModel = { id: "", companyId: "", edesc: "", name: "", code: "", level: "", weight: 0.00, checked: false }
-  competoncy_typeList: { check: boolean; data: DataModel & { checked?: boolean } }[] = []
   competoncy_type: CompetencytypeModel = new MyCompetencytypeModel({})
-  modalStatus: 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add'
-  search = ""
+  currentModal: 'add' | 'edit' | 'delete' = 'add'
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
 
+  columns: ColumnModel[] = [{
+    field: "competencyTypeId",
+    headerText: "รหัส",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "tdesc",
+    headerText: "ชื่อประเภท",
+    type: "string"
+  },
+  {
+    field: "shortName",
+    headerText: "ชื่อย่อ",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['competencyTypeId', 'tdesc', 'shortName'],
+    operator: 'contains',
+    ignoreCase: false
+  };
+  search = ''
+  selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
+
   constructor(private competencytypeService: CompetencytypeService,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
@@ -100,13 +106,16 @@ export class TypeRegistration {
 
   getCompetencytypeList() {
     this.dataLoading = true
+    this.selectedItems.data.clear()
     this.competencytypeService.getList().subscribe({
       next: response => {
-        this.competoncy_typeList = response.map(x => ({ check: false, data: { id: x.competencyTypeId, companyId: x.companyId, edesc: x.edesc, name: x.tdesc, code: x.shortName, weight: x.weight, level: x.expectationLevel, checked: false } }))
+        this.typeList = response.map(x => {
+          this.selectedItems.data.set(x.competencyTypeId, false)
+          return new MyCompetencytypeModel(x)
+        })
+        this.selectedItems.key = 'competencyTypeId'
+        this.selectedItems.count = 0
         this.dataLoading = false
-        this.isDataListCheckedAll = false
-        this.dataListCheckAll()
-        this.searchChange()
         this.cdr.detectChanges()
       }, error: error => {
         this.dataLoading = false
@@ -114,24 +123,16 @@ export class TypeRegistration {
       }
     })
   }
-  searchChange() {
-    this.currentPage = 1
-    this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
-    this.dataListCheck()
-  }
-  dataListFilter() {
-    return this.competoncy_typeList.filter(x => {
-      const data = x.data
-      const match = data.id.toLowerCase().includes(this.search.toLowerCase()) || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.code.toLowerCase().includes(this.search.toLowerCase());
-      return match;
-    });
-  }
-  setData(data?: DataModel) {
-    this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", companyId: "", name: "", edesc: "", code: "", level: "", checked: false }));
+
+  edit(item?: CompetencytypeModel) {
+    this.competoncy_type = new MyCompetencytypeModel(item || {})
   }
+
+
+
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addType_registration() {
-    const body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, weight: +(this.dataSelect.weight), expectationLevel: this.dataSelect.level })
+    const body = new MyCompetencytypeModel(this.competoncy_type)
     this.dataLoading = true
     this.competencytypeService.post(body).subscribe({
       next: response => {
@@ -151,14 +152,10 @@ export class TypeRegistration {
     })
   }
   deleteType_registration() {
-    let body: CompetencytypeModel | CompetencytypeModel[] = [];
 
-    if (this.dataSelect.id) {
-      body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, weight: +(this.dataSelect.weight), expectationLevel: this.dataSelect.level });
-    } else {
-      body = this.competoncy_typeList.filter(x => x.check).map(x => new MyCompetencytypeModel({ competencyTypeId: x.data.id, tdesc: x.data.name, edesc: x.data.edesc, shortName: x.data.code, weight: +(this.dataSelect.weight), expectationLevel: x.data.level }));
-    }
     this.dataLoading = true
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const body = this.typeList.filter(x => selectedKeys.includes(x.competencyTypeId) && this.selectedItems.data.get(x.competencyTypeId)).map(x => new MyCompetencytypeModel(x))
     this.competencytypeService.delete(body).subscribe({
       next: response => {
         if (response.success) {
@@ -185,32 +182,27 @@ export class TypeRegistration {
   }
 
 
-  dataListCheckAll() {
-    const selectAll = this.isDataListCheckedAll;
-    this.competoncy_typeList.filter(x => {
-      const data = x.data
-      const match = data.id.toLowerCase().includes(this.search.toLowerCase()) || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.code.toLowerCase().includes(this.search.toLowerCase());
-      return match;
-    }).forEach(x => x.check = selectAll);
-    this.dataListCheck();
-  }
 
-  dataListCheck() {
-    const dataCheck = this.dataListFilter();
-    this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-    this.numDataListChecked = this.competoncy_typeList.filter(x => x.check).length;
-    this.isDataListChecked = Boolean(this.numDataListChecked)
-  }
-  clearData(modalStatus: string) {
-    if (modalStatus == 'add') {
-      this.setData()
-    } else if (modalStatus == 'edit') {
-      this.setData({ id: this.dataSelect.id, companyId: "", name: "", edesc: "", code: "", level: "", weight: 0.00, checked: this.dataSelect.checked })
+  clearData(currentModal: string) {
+    if (currentModal == 'add') {
+      this.competoncy_type = new MyCompetencytypeModel({})
+    } else if (currentModal == 'edit') {
+      this.competoncy_type = new MyCompetencytypeModel({ ...this.competoncy_type, competencyTypeId: this.competoncy_type.competencyTypeId })
     }
   }
 
   checkPrimary() {
-    return this.competoncy_typeList.find(x => x.data.id == this.dataSelect.id)
+    return this.typeList.find(x => x.competencyTypeId == this.competoncy_type.competencyTypeId)
+  }
+
+  numSelectItem() {
+    const selectedKeys = Array.from(this.selectedItems.data.keys());
+    const num = this.typeList.filter(x => selectedKeys.includes(x.competencyTypeId) && this.selectedItems.data.get(x.competencyTypeId)).length
+    return num
+  }
+
+  onSelectItemChange(arg: any) {
+    this.selectedItems = arg
   }
 }