Skip to content

M
myAppraisal
Commit 906a4303 by Natthaphat Pankiang
Options

หน้า ข้อมูลลักษณะงาน หัวข้อ ประเภทพนักงาน, ระดับพนักงาน (PL) ลบหลายอัน

parent cfa8852e
Showing with 348 additions and 549 deletions
src/app/components/company-components/job-description/employee-categories/employee-categories.component.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="flex pr-2"> <div class="flex pr-2">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#company-registration-page-upload-modal"> data-hs-overlay="#employee-categories-page-upload-modal">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
นำเข้าข้อมูล นำเข้าข้อมูล
</button> </button>
...@@ -27,21 +27,17 @@ ...@@ -27,21 +27,17 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-modal-add" (click)="selectEmp_type()"> data-hs-overlay="#employee-categories-page-modal" (click)="modalStatus='add';setData()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
...@@ -71,28 +67,39 @@ ...@@ -71,28 +67,39 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!emp_typeListFilter().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&&!emp_typeListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="emp_typeListFilter().length"> <tbody *ngIf="!dataLoading&&emp_typeListFilter().length">
<tr <tr
*ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.codeId}}" <input *ngIf="item.data.codeId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.codeId}}"
[(ngModel)]="item['selected']" (change)="onCheckboxChange(item)"> [(ngModel)]="item.check">
<label for="checkbox-{{item.codeId}}">&nbsp;{{item.codeId}}</label> <label for="checkbox-{{item.data.codeId}}">&nbsp;{{item.data.codeId}}</label>
</td> </td>
<td>{{item.tdesc}}</td> <td>{{item.data.tdesc}}</td>
<td>{{item.edesc}}</td> <td>{{item.data.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#employee-categories-modal-edit"></i> data-hs-overlay="#employee-categories-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)" <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.codeId!='100'"
data-hs-overlay="#employee-categories-alert-delete-modal"></i> (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#employee-categories-page-alert-modal"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -130,85 +137,25 @@ ...@@ -130,85 +137,25 @@
</a> </a>
</li> </li>
</ul> </ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{emp_typeListFilter().length<10 ?emp_typeListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - emp_typeListFilter().length) )
:(currentPage * 10) ) }} of {{emp_typeListFilter().length}} items</span>
</ul>
</nav> </nav>
</div> </div>
<div id="employee-categories-modal-add" class="hs-overlay hidden ti-modal"> <div id="employee-categories-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">
<h3 class="text-xxl font-bold text-primary">
เพิ่มข้อมูลประเภทพนักงาน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-categories-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="emp_type.codeId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_type.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)]="emp_type.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button"
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"
data-hs-overlay="#employee-categories-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-categories-modal-edit" 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="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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แก้ไขข้อมูลประเภทพนักงาน {{modalStatus=='add'?'เพิ่มข้อมูลประเภทพนักงาน':'แก้ไขข้อมูลประเภทพนักงาน'}}
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-categories-modal-edit"> data-hs-overlay="#employee-categories-page-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -243,56 +190,19 @@ ...@@ -243,56 +190,19 @@
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label> <label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly <input type="text" id="input-label" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(ngModel)]="dataSelect.codeId">
[(ngModel)]="emp_type.codeId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label> <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_type.tdesc"> <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="emp_type.edesc"> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4"> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" <button type="button"
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" 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"
data-hs-overlay="#employee-categories-modal-edit"> data-hs-overlay="#employee-categories-page-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-categories-alert-add-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">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-categories-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
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"
data-hs-overlay="#employee-categories-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-add-modal" (click)="addEmp_type()"> data-hs-overlay="#employee-categories-page-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -301,7 +211,7 @@ ...@@ -301,7 +211,7 @@
</div> </div>
</div> </div>
<div id="employee-categories-alert-edit-modal" class="hs-overlay hidden ti-modal"> <div id="employee-categories-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"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -309,66 +219,57 @@ ...@@ -309,66 +219,57 @@
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#employee-categories-alert-edit-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#employee-categories-page-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-categories-page-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการแก้ไขข้อมูลหรือไม่ <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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 type="button"
data-hs-overlay="#employee-categories-modal-edit"> 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"
ย้อนกลับ data-hs-overlay="#employee-categories-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" </button>
data-hs-overlay="#employee-categories-alert-edit-modal" (click)="addEmp_type()"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
บันทึกข้อมูล data-hs-overlay="#employee-categories-page-alert-modal" (click)="addEmp_type()">
</a> บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button"
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"
data-hs-overlay="#employee-categories-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#employee-categories-page-alert-modal" (click)="deleteEmp_type()">
ลบข้อมูล
</a>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="employee-categories-alert-delete-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">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-categories-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
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"
data-hs-overlay="#employee-categories-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-delete-modal" (click)=" deleteEmp_type()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-components/job-description/employee-categories/employee-categories.component.ts
...@@ -2,6 +2,12 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angu ...@@ -2,6 +2,12 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angu
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model'; import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model';
import { EmpTypeService } from 'src/app/shared/services/employee-type.service'; import { EmpTypeService } from 'src/app/shared/services/employee-type.service';
export interface DataModel {
codeId: string
tdesc: string
edesc: string
companyId: string
}
@Component({ @Component({
selector: 'app-employee-categories', selector: 'app-employee-categories',
...@@ -21,10 +27,14 @@ export class EmployeeCategories { ...@@ -21,10 +27,14 @@ export class EmployeeCategories {
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
emp_typeList: EmpTypeModel[] = []
emp_type: EmpTypeModel = new MyEmpTypeModel({})
search = "" search = ""
modalStatus = 'add'
emp_typelist: { check: boolean, data: DataModel }[] = []
emp_type: EmpTypeModel = new MyEmpTypeModel({})
dataLoading = false
dataSelect: DataModel = { codeId: "", tdesc: "", edesc: "", companyId: "" }
itemToDelete: EmpTypeModel | null = null; itemToDelete: EmpTypeModel | null = null;
constructor(private empTypeService: EmpTypeService, constructor(private empTypeService: EmpTypeService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef
...@@ -33,125 +43,78 @@ export class EmployeeCategories { ...@@ -33,125 +43,78 @@ export class EmployeeCategories {
this.getEmpTypeList() this.getEmpTypeList()
} }
modalOptions: { getEmpTypeList() {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด this.empTypeService.getList().subscribe({
isModalOpen: boolean; // เปิด/ปิด next: response => {
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 ) this.emp_typelist = response.map(x => ({ check: false, data: { codeId: x.codeId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด ) this.searchChange();
} this.cdr.detectChanges();
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}, },
"upload": { error: err => {
isModalOpen: false, console.error('Error fetching employee types:', err);
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;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
} }
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
getEmpTypeList() {
this.empTypeService.getList().subscribe(response => {
this.emp_typeList = response.map(x => new MyEmpTypeModel(x))
this.searchChange()
this.cdr.detectChanges()
})
}
searchChange() { searchChange() {
this.currentPage = 1 this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
} }
emp_typeListFilter() { emp_typeListFilter() {
return this.emp_typeList.filter(x => return this.emp_typelist.filter(x => {
x.codeId.includes(this.search) || const data = x.data
x.tdesc.includes(this.search) || const match = data.codeId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
x.edesc.includes(this.search)) return match;
});
} }
selectEmp_type(emp_type?: EmpTypeModel) { setData(data?: DataModel) {
// this.showSuccess() this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", companyId: "" }));
this.emp_type = new MyEmpTypeModel(emp_type || {})
} }
// selectEmp_type(emp_type?: EmpTypeModel) {
// // this.showSuccess()
// this.emp_type = new MyEmpTypeModel(emp_type || {})
// }
addEmp_type() { addEmp_type() {
this.empTypeService.post(this.emp_type).subscribe((response: any) => { const body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
if (response.success) { this.empTypeService.post(body).subscribe({
this.getEmpTypeList() next: response => {
this.showSuccessAdd() if (response.success) {
this.showAlert(response.message, 'success')
this.getEmpTypeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
deleteEmp_type() { deleteEmp_type() {
this.empTypeService.delete(this.emp_type).subscribe((response: any) => { let body: EmpTypeModel | EmpTypeModel[] = []
if (response.success) { if (this.dataSelect.codeId) {
this.getEmpTypeList() body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
this.showSuccessDelete() } else {
body = this.emp_typelist.filter(x => x.check).map(x => new MyEmpTypeModel({ codeId: x.data.codeId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }))
}
this.empTypeService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEmpTypeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
showAlert(text: string, type: 'success' | 'error') {
openDeleteModal(item: EmpTypeModel) { this.toastr[type](text, 'แจ้งเตือน', {
this.itemToDelete = item; // เก็บข้อมูลที่ต้องการลบ
}
deleteSelected() {
if (this.itemToDelete) {
// ลบ item ที่ถูกเลือกออกจาก emp_typeList
this.emp_typeList = this.emp_typeList.filter(item => item !== this.itemToDelete);
}
}
// ฟังก์ชันลบข้อมูลที่เลือก
deleteSelectedItems() {
this.emp_typeList = this.emp_typeList.filter(item => !item['selected']);
}
onCheckboxChange(emp_type: EmpTypeModel) {
console.log('Checkbox changed:', emp_type);
}
showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); });
} }
showSuccessEdit() {
this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
} }
src/app/components/company-components/job-description/employee-level/employee-level.component.html
...@@ -27,21 +27,17 @@ ...@@ -27,21 +27,17 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-level-modal-add" (click)="selectPL()"> data-hs-overlay="#employee-level-page-modal" (click)="modalStatus='add';setData()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
<i class="ri-delete-bin-6-line"></i> data-hs-overlay="#employee-level-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
Delete <i class="ri-delete-bin-6-line"></i>
</button> Delete
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md" </button>
data-hs-overlay="#employee-level-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
...@@ -70,28 +66,40 @@ ...@@ -70,28 +66,40 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!plListFilter().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&&!plListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="plListFilter().length"> <tbody *ngIf="!dataLoading&&plListFilter().length">
<tr <tr
*ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.plId}}"> <input *ngIf="item.data.plId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer"
<label for="checkbox-{{item.plId}}">&nbsp;{{item.plId}}</label> id="checkbox-{{item.data.plId}}" [(ngModel)]="item.check">
<label for="checkbox-{{item.data.plId}}">&nbsp;{{item.data.plId}}</label>
</td> </td>
<td>{{item.tdesc}}</td> <td>{{item.data.tdesc}}</td>
<td>{{item.edesc}}</td> <td>{{item.data.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#employee-level-modal-edit"></i> data-hs-overlay="#employee-level-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)" <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.plId!='100'"
data-hs-overlay="#employee-level-alert-delete-modal"></i> (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#employee-level-page-alert-modal"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -100,113 +108,54 @@ ...@@ -100,113 +108,54 @@
</div> </div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination"> <ul class="ti-pagination">
<li> <li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)"> (click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a> </a>
</li> </li>
<li *ngFor="let item of page;let f = first;let l = last"> <li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3"> <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> </a>
</ng-container> </ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)"> <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage" <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}} (click)="currentPage=item">{{item}}
</a> </a>
</ng-container> </ng-container>
<ng-container <ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2"> *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> </a>
</ng-container> </ng-container>
</li> </li>
<li> <li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )"> (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a> </a>
</li> </li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{plListFilter().length<10 ?plListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - plListFilter().length) )
:(currentPage * 10) ) }} of {{plListFilter().length}} items</span>
</ul> </ul>
</nav> </nav>
</div> </div>
<div id="employee-level-modal-add" class="hs-overlay hidden ti-modal"> <div id="employee-level-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">
<h3 class="text-xxl font-bold text-primary">
เพิ่มข้อมูลประเภทพนักงาน(PL)
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="pl.plId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="pl.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)]="pl.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button"
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"
data-hs-overlay="#employee-level-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-level-modal-edit" 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="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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แก้ไขข้อมูลระดับพนักงาน(PL) {{modalStatus=='add'?'เพิ่มข้อมูลประเภทพนักงาน(PL)':'แก้ไขข้อมูลประเภทพนักงาน(PL)'}}
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-modal-edit"> data-hs-overlay="#employee-level-page-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -241,20 +190,18 @@ ...@@ -241,20 +190,18 @@
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</label> <label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly <input type="text" id="input-label" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(ngModel)]="dataSelect.plId">
[(ngModel)]="pl.plId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label> <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="pl.tdesc"> <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="pl.edesc"> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4"> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" <button type="button"
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" 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"
data-hs-overlay="#employee-level-modal-edit"> data-hs-overlay="#employee-level-page-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-page-alert-modal">
data-hs-overlay="#employee-level-alert-edit-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -291,110 +238,65 @@ ...@@ -291,110 +238,65 @@
</div> </div>
</div> </div>
<div id="employee-level-alert-add-modal" class="hs-overlay hidden ti-modal"> <div id="employee-level-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">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
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"
data-hs-overlay="#employee-level-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-add-modal"
(click)="addPL()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-level-alert-edit-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">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการแก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
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"
data-hs-overlay="#employee-level-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-edit-modal"
(click)="addPL()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-level-alert-delete-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"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#employee-level-alert-delete-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#employee-level-page-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</div> </button>
</div> </ng-container>
<div class="ti-modal-body "> <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<p class="mt-1 text-gray-800 dark:text-white/70"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
ยืนยันการลบข้อมูลหรือไม่ data-hs-overlay="#employee-level-page-alert-modal">
</p> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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 type="button"
data-hs-overlay="#employee-level-alert-delete-modal"> 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"
ย้อนกลับ data-hs-overlay="#employee-level-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" </button>
data-hs-overlay="#employee-level-alert-delete-modal" (click)="deletePL();"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
ลบข้อมูล data-hs-overlay="#employee-level-page-alert-modal" (click)="addPL()">
</a> บันทึกข้อมูล
</div> </a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button"
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"
data-hs-overlay="#employee-level-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#employee-level-page-alert-modal" (click)="deletePL()">
ลบข้อมูล
</a>
</ng-container>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/components/company-components/job-description/employee-level/employee-level.component.ts
...@@ -2,6 +2,12 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } fro ...@@ -2,6 +2,12 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } fro
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model'; import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
import { PLService } from 'src/app/shared/services/pl.service'; import { PLService } from 'src/app/shared/services/pl.service';
export interface DataModel {
plId: string
tdesc: string
edesc: string
companyId: string
}
@Component({ @Component({
selector: 'app-employee-level', selector: 'app-employee-level',
...@@ -20,66 +26,92 @@ export class EmployeeLevel implements OnInit { ...@@ -20,66 +26,92 @@ export class EmployeeLevel implements OnInit {
} }
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
plList: PLModel[] = []
pl: PLModel = new MyPLModel({})
search = "" search = ""
modalStatus = 'add'
plList: { check: boolean, data: DataModel }[] = []
pl: PLModel = new MyPLModel({})
dataLoading = false
dataSelect: DataModel = { plId: "", tdesc: "", edesc: "", companyId: "" }
itemToDelete: PLModel | null = null;
constructor(private plService: PLService, constructor(private plService: PLService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getPLList() this.getPLList()
} }
getPLList() { getPLList() {
this.plService.getList().subscribe(response => { this.plService.getList().subscribe({
this.plList = response.map(x => new MyPLModel(x)) next: response => {
this.searchChange() this.plList = response.map(x => ({ check: false, data: { plId: x.plId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
this.cdr.detectChanges() this.searchChange();
}) this.cdr.detectChanges();
},
error: err => {
console.error('Error fetching employee types:', err);
}
});
} }
searchChange() { searchChange() {
this.currentPage = 1 this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
} }
plListFilter() { plListFilter() {
return this.plList.filter(x => x.plId.includes(this.search) || return this.plList.filter(x => {
x.tdesc.includes(this.search) || const data = x.data
x.edesc.includes(this.search)) const match = data.plId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
return match;
});
} }
selectPL(pl?: PLModel) {
// this.showSuccess() setData(data?: DataModel) {
this.pl = new MyPLModel(pl || {}) this.dataSelect = JSON.parse(JSON.stringify(data || { plId: "", tdesc: "", edesc: "", companyId: "" }));
} }
addPL() { addPL() {
this.plService.post(this.pl).subscribe((response: any) => { const body = new MyPLModel({ plId: this.dataSelect.plId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
if (response.success) { this.plService.post(body).subscribe({
this.getPLList() next: response => {
this.showSuccessAdd() if (response.success) {
this.showAlert(response.message, 'success')
this.getPLList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
deletePL() { deletePL() {
this.plService.delete(this.pl).subscribe((response: any) => { let body: PLModel | PLModel[] = []
if (response.success) { if (this.dataSelect.plId) {
this.getPLList() body = new MyPLModel({ plId: this.dataSelect.plId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
this.showSuccessDelete() } else {
body = this.plList.filter(x => x.check).map(x => new MyPLModel({ plId: x.data.plId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }))
}
this.plService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPLList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', { showAlert(text: string, type: 'success' | 'error') {
timeOut: 3000, this.toastr[type](text, 'แจ้งเตือน', {
positionClass: 'toast-top-right',
});
}
showSuccessEdit() {
this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); });
......
src/app/shared/services/employee-type.service.ts
...@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core'; ...@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { EmpTypeModel } from '../model/employee-type.model'; import { EmpTypeModel } from '../model/employee-type.model';
import { AlertModel } from '../model/alert.model';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
...@@ -18,16 +19,16 @@ export class EmpTypeService { ...@@ -18,16 +19,16 @@ export class EmpTypeService {
getById(codeId: string): Observable<EmpTypeModel> { getById(codeId: string): Observable<EmpTypeModel> {
return this.http.get<EmpTypeModel>(this.urlApi + "/" + codeId) return this.http.get<EmpTypeModel>(this.urlApi + "/" + codeId)
} }
post(body: EmpTypeModel) { post(body: EmpTypeModel): Observable<AlertModel> {
return this.http.post(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
delete(body: EmpTypeModel) { delete(body: EmpTypeModel | EmpTypeModel[]): Observable<AlertModel> {
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
"Content-Type": "application/json", "Content-Type": "application/json",
}), }),
body: body body: body
}; };
return this.http.delete(this.urlApi, options) return this.http.delete<AlertModel>(this.urlApi, options)
} }
} }
src/app/shared/services/pl.service.ts
...@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core'; ...@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { PLModel } from '../model/pl.model'; import { PLModel } from '../model/pl.model';
import { AlertModel } from '../model/alert.model';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
...@@ -17,16 +18,16 @@ export class PLService { ...@@ -17,16 +18,16 @@ export class PLService {
getList(): Observable<PLModel[]> { getList(): Observable<PLModel[]> {
return this.http.get<PLModel[]>(this.urlApi + "/lists") return this.http.get<PLModel[]>(this.urlApi + "/lists")
} }
post(body: PLModel) { post(body: PLModel): Observable<AlertModel> {
return this.http.post(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
delete(body: PLModel) { delete(body: PLModel | PLModel[]): Observable<AlertModel> {
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
"Content-Type": "application/json", "Content-Type": "application/json",
}), }),
body: body body: body
}; };
return this.http.delete(this.urlApi, options) return this.http.delete<AlertModel>(this.urlApi, options)
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment