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

src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-types/assessment-types.component.html

@@ -23,13 +23,61 @@
 
 <div class="page px-rem">
     <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="pmstype.dataList"
-        [columns]="columns" [selectedItems]="selectedItems" modalName="#assessment-types-modal"
-        (sendSelectData)="modalStatus='edit';selectPmstype($event)" (sendSelectedItems)="onSelectItemChange($event)">
+        [columns]="columns" [selectedItems]="selectedItems" 
+        (sendSelectData)="modalStatus='edit';selectPmstype($event);openDialog()" (sendSelectedItems)="onSelectItemChange($event)">
     </app-datagrid-syncfution>
 </div>
 
 
-<div id="assessment-types-modal" class="hs-overlay hidden ti-modal">
+<ng-template #assessmentTypesModal let-modal>
+    <h3 mat-dialog-title>
+        {{modalStatus=='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)="selectPmstype()">
+                    <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()&&modalStatus=='add'">
+                    ประเภทการประเมินซ้ำ
+                </ng-container>
+            </span>
+        </label>
+        <input type="text" id="input-label" class="ti-form-input w-1/2"
+            [class.!border-red]="checkPrimary()&&modalStatus=='add'" [(ngModel)]="pmstype.select.pmsTypeId"
+            [readonly]="modalStatus=='edit'" [class.!bg-input-readonly]="modalStatus=='edit'">
+        <label for="detail_th" class="ti-form-label mt-2rem">ชื่อประเภท (ไทย)<span
+                class="text-danger">*</span></label>
+        <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="pmstype.select.tdesc">
+        <label for="detail_eng" class="ti-form-label mt-2rem">ชื่อประเภทอังกฤษ</label>
+        <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="pmstype.select.edesc">
+        <label for="detail_eng" class="ti-form-label mt-2rem">ชื่อย่อ</label>
+        <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="pmstype.select.shortName">
+        <label for="detail_eng" class="ti-form-label mt-2rem">น้ำหนัก</label>
+        <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="pmstype.select.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)="addPmstype()"
+            [class.ti-btn-disabled]="!pmstype.select.pmsTypeId||!pmstype.select.tdesc||(checkPrimary()&&modalStatus=='add')"
+            [disabled]="!pmstype.select.pmsTypeId||!pmstype.select.tdesc||(checkPrimary()&&modalStatus=='add')">
+            บันทึกข้อมูล
+        </button>
+    </mat-dialog-actions>
+</ng-template>
+
+<!-- <div id="assessment-types-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">
@@ -201,4 +249,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file

src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-types/assessment-types.component.ts

-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
 import { MyPmstypeModel, PmstypeModel } from 'src/app/shared/model/pmstype.model';
 import { FileService } from 'src/app/shared/services/file.service';
 import { PmstypeService } from 'src/app/shared/services/pmstype.service';
 import { ColumnModel } from '@syncfusion/ej2-grids';
+import Swal from 'sweetalert2';
+import { MatDialog } from '@angular/material/dialog';
+
 @Component({
   selector: 'app-assessment-types',
   templateUrl: './assessment-types.component.html',
@@ -36,11 +39,14 @@ export class AssessmentTypesComponent {
   };
   search = ""
   selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
+   @ViewChild("assessmentTypesModal") assessmentTypesModal: any;
+    dialogRef: any
 
   selectedFile: File | null = null;
   selectedFileName: string = 'กรุณาเลือกไฟล์';
   constructor(private cdr: ChangeDetectorRef,
     private pmstypeService: PmstypeService,
+    private dialog: MatDialog,
     private toastr: ToastrService,
     private fileService: FileService
   ) {
@@ -81,6 +87,73 @@ export class AssessmentTypesComponent {
     }
   }
 
+  addPmstype() {
+      Swal.fire({
+        icon: 'question',
+        title: 'แจ้งเตือน',
+        text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
+        showCancelButton: true,
+        confirmButtonText: 'บันทึกข้อมูล',
+        cancelButtonText: 'ย้อนกลับ',
+        reverseButtons: true,
+      }).then((result) => {
+        if (result.isConfirmed) {
+          this.pmstype.loading = true
+          this.pmstypeService.post(this.pmstype.select).subscribe({
+            next: response => {
+              if (response.success) {
+                this.showAlert(response.message, 'success')
+                this.getPmstypeList()
+                this.closeDialog()
+              } else {
+                this.showAlert(response.message, 'error')
+                this.pmstype.loading = false
+              }
+            }, error: error => {
+              this.showAlert(error.message, 'error')
+              this.pmstype.loading = false
+            }
+          })
+        }
+      })
+    }
+    deletePmstype() {
+      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.pmstype.loading = true
+          const selectedKeys = Array.from(this.selectedItems.data.keys());
+          const body = this.pmstype.dataList.filter(x => selectedKeys.includes(x.pmsTypeId) && this.selectedItems.data.get(x.pmsTypeId)).map(x => new MyPmstypeModel(x))
+          this.pmstypeService.delete(body).subscribe({
+            next: response => {
+              if (response.success) {
+                this.showAlert(response.message, 'success')
+                this.getPmstypeList()
+                this.closeDialog()
+              } else {
+                this.showAlert(response.message, 'error')
+                this.pmstype.loading = false
+              }
+            }, error: error => {
+              this.showAlert(error.message, 'error')
+              this.pmstype.loading = false
+            }
+          })
+        }
+      });
+    }
+
   updatePmstype(typeApi: 'post' | 'delete') {
     let body: PmstypeModel | PmstypeModel[]
     switch (this.modalStatus) {
@@ -190,6 +263,16 @@ export class AssessmentTypesComponent {
     this.selectedItems = arg
   }
 
+  openDialog() {
+    this.dialogRef = this.dialog.open(this.assessmentTypesModal, {
+      width: '500px',
+      disableClose: false,
+    });
+  }
+  closeDialog() {
+    this.dialogRef.close()
+  }
+
 }