แก้ modal ใหม่ ทะเบียนกำหนดชื่อ > ประเภทสมรรถนะ

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

@@ -27,15 +27,15 @@
             </div>
             <div class="px-1">
                 <button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
-                    data-hs-overlay="#type-registration-component-page-modal" (click)="currentModal='add';edit()">
+                    data-hs-overlay="#type-registration-component-page-modal" (click)="currentModal='add';edit()"
+                    (click)="openDialog()">
                     <i class="ri-add-line"></i>
                     Add
                 </button>
             </div>
             <div class="px-1">
                 <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
-                    data-hs-overlay="#type-registration-component-page-alert-modal"
-                    (click)="currentModal='delete';edit()">
+                    (click)="currentModal='delete';deleteType_registration()">
                     <i class="ri-delete-bin-6-line"></i>
                     Delete
                 </button>
@@ -48,13 +48,68 @@
 
 <div class="page px-rem">
     <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="typeList"
-        [columns]="columns" [selectedItems]="selectedItems" modalName="#type-registration-component-page-modal"
-        (sendSelectData)="currentModal='edit';edit($event)" (sendSelectedItems)="onSelectItemChange($event)">
+        [columns]="columns" [selectedItems]="selectedItems"
+        (sendSelectData)="currentModal='edit';edit($event);openDialog()"
+        (sendSelectedItems)="onSelectItemChange($event)">
     </app-datagrid-syncfution>
 </div>
 
 
-<div id="type-registration-component-page-modal" class="hs-overlay hidden ti-modal">
+<ng-template #typeRegistrationModal let-modal>
+    <h3 mat-dialog-title>
+        {{currentModal=='add'?'เพิ่มประเภทสมรรถนะ':'แก้ไขประเภทสมรรถนะ'}}
+    </h3>
+    <div class="w-full flex justify-end">
+        <div class="absolute flex">
+            <div class="px-1">
+                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="selectCompetencyType()">
+                    <i class="ti ti-eraser text-base"></i>
+                    Clear
+                </button>
+            </div>
+        </div>
+    </div>
+    <mat-dialog-content>
+        <label for="input-label" class="ti-form-label mt-2rem">รหัส
+            <span class="text-danger">*
+                <ng-container *ngIf="checkPrimary()&&currentModal=='add'">
+                    รหัสซ้ำ
+                </ng-container>
+            </span>
+        </label>
+        <input type="text" id="input-label" class="ti-form-input w-1/2"
+            [ngClass]="{'bg-input-readonly':currentModal=='edit'}" [readonly]="currentModal=='edit'"
+            [(ngModel)]="competoncy_type.competencyTypeId">
+        <label for="detail_th" class="ti-form-label mt-1rem">ชื่อประเภท (ไทย)<span class="text-danger">*</span></label>
+        <input type="text" id="detail_th" class="ti-form-input w-2/3" [(ngModel)]="competoncy_type.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" [(ngModel)]="competoncy_type.edesc">
+        <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อย่อ<span class="text-danger">*</span></label>
+        <input type="text" id="detail_eng" class="ti-form-input w-2/3" [(ngModel)]="competoncy_type.shortName">
+        <label for="detail_eng" class="ti-form-label mt-1rem">ระดับความคาดหวัง <span
+                class="text-danger">*</span></label>
+        <input type="text" id="detail_eng" class="ti-form-input" style="width: 200px;"
+            oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="competoncy_type.expectationLevel">
+        <label for="detail_eng" class="ti-form-label mt-1rem">น้ำหนัก</label>
+        <input type="text" id="detail_eng" class="ti-form-input" style="width: 200px;"
+            oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
+            onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
+            [(ngModel)]="competoncy_type.weight">
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+        <button type="button" mat-button [mat-dialog-close]
+            class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+            ย้อนกลับ
+        </button>
+        <button type="button" class="ti-btn ti-btn-success" mat-button (click)="addType_registration()"
+        [class.ti-btn-disabled]="!competoncy_type.competencyTypeId||!competoncy_type.tdesc||!competoncy_type.shortName||(currentModal=='add'&&checkPrimary())"
+        [disabled]="!competoncy_type.competencyTypeId||!competoncy_type.tdesc||!competoncy_type.shortName||(currentModal=='add'&&checkPrimary())">
+            บันทึกข้อมูล
+        </button>
+    </mat-dialog-actions>
+</ng-template>
+
+<!-- <div id="type-registration-component-page-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
         <div class="max-h-full overflow-hidden ti-modal-content">
             <div class="ti-modal-header">
@@ -131,7 +186,7 @@
             </div>
         </div>
     </div>
-</div>
+</div> -->
 
 <div id="type-registration-component-page-alert-modal" class="hs-overlay hidden ti-modal">
     <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">

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

-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 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';
+import Swal from 'sweetalert2';
 
 @Component({
   selector: 'app-type-registration',
@@ -44,7 +46,10 @@ export class TypeRegistration {
   search = ''
   selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
 
+  @ViewChild("typeRegistrationModal") typeRegistrationModal: any;
+  dialogRef: any
   constructor(private competencytypeService: CompetencytypeService,
+    private dialog: MatDialog,
     private toastr: ToastrService,
     private cdr: ChangeDetectorRef,
     private fileService: FileService
@@ -128,57 +133,92 @@ export class TypeRegistration {
     this.competoncy_type = new MyCompetencytypeModel(item || {})
   }
 
+  selectCompetencyType(CompetencyType?: CompetencytypeModel) {
+    if (CompetencyType) {
+      this.competoncy_type = new MyCompetencytypeModel(CompetencyType)
+    } else if (this.currentModal == 'add') {
+      this.competoncy_type = new MyCompetencytypeModel()
+    } else if (this.currentModal == 'edit') {
+      this.competoncy_type = new MyCompetencytypeModel({ competencyTypeId: this.competoncy_type.competencyTypeId })
+    }
+  }
 
-
-  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addType_registration() {
-    const body = new MyCompetencytypeModel(this.competoncy_type)
-    this.dataLoading = true
-    this.competencytypeService.post(body).subscribe({
-      next: response => {
-        if (response.success) {
-          this.showAlert(response.message, 'success')
-          this.getCompetencytypeList()
-        } else {
-          this.showAlert(response.message, 'error')
-          this.dataLoading = false
-          this.cdr.detectChanges()
-        }
-      }, error: error => {
-        this.showAlert(error.message, 'error')
-        this.dataLoading = false
-        this.cdr.detectChanges()
+    Swal.fire({
+      icon: 'question',
+      title: 'แจ้งเตือน',
+      text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
+      showCancelButton: true,
+      confirmButtonText: 'บันทึกข้อมูล',
+      cancelButtonText: 'ย้อนกลับ',
+      reverseButtons: true,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.dataLoading = true
+        this.competencytypeService.post(this.competoncy_type).subscribe({
+          next: response => {
+            if (response.success) {
+              this.showAlert(response.message, 'success')
+              this.getCompetencytypeList()
+              this.closeDialog()
+            } else {
+              this.showAlert(response.message, 'error')
+              this.dataLoading = false
+            }
+          }, error: error => {
+            this.showAlert(error.message, 'error')
+            this.dataLoading = false
+          }
+        })
       }
     })
   }
-  deleteType_registration() {
 
-    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) {
-          this.showAlert(response.message, 'success');
-        } else {
-          this.showAlert(response.message, 'error');
-        }
-        this.getCompetencytypeList();
-        this.cdr.detectChanges()
-      },
-      error: error => {
-        this.showAlert(error.message, 'error')
-        this.dataLoading = false
-        this.cdr.detectChanges()
+  deleteType_registration() {
+    if (!this.numSelectItem()) {
+      this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error')
+      return
+    }
+    Swal.fire({
+      icon: 'question',
+      title: 'แจ้งเตือน',
+      text: 'ยืนยันการลบข้อมูลหรือไม่',
+      showCancelButton: true,
+      confirmButtonText: 'ลบข้อมูล',
+      cancelButtonText: 'ย้อนกลับ',
+      reverseButtons: true,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        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) {
+              this.showAlert(response.message, 'success');
+            } else {
+              this.showAlert(response.message, 'error');
+            }
+            this.getCompetencytypeList();
+            this.cdr.detectChanges()
+          },
+          error: error => {
+            this.showAlert(error.message, 'error')
+            this.dataLoading = false
+            this.cdr.detectChanges()
+          }
+        })
       }
     });
   }
 
   showAlert(text: string, type: 'success' | 'error') {
-    this.toastr[type](text, 'แจ้งเตือน', {
-      timeOut: 3000,
-      positionClass: 'toast-top-right',
-    })
+    Swal.fire({
+      title: 'แจ้งเตือน',
+      text: text,
+      icon: type,
+      confirmButtonText: 'ตกลง',
+    });
   }
 
 
@@ -204,5 +244,15 @@ export class TypeRegistration {
   onSelectItemChange(arg: any) {
     this.selectedItems = arg
   }
+
+  openDialog() {
+    this.dialogRef = this.dialog.open(this.typeRegistrationModal, {
+      width: '500px',
+      disableClose: false,
+    });
+  }
+  closeDialog() {
+    this.dialogRef.close()
+  }
 }