Skip to content

M
myAppraisal
Commit 906a4303 by Natthaphat Pankiang
Options

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

parent cfa8852e
Showing with 254 additions and 453 deletions
src/app/components/company-components/job-description/employee-categories/employee-categories.component.html
......@@ -3,7 +3,7 @@
<div class="flex pr-2">
<div class="px-1">
<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>
นำเข้าข้อมูล
</button>
......@@ -27,21 +27,17 @@
</div>
<div class="px-1">
<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>
Add
</button>
</div>
<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>
Delete
</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 class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
......@@ -71,28 +67,39 @@
</ng-container>
</tr>
</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>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="emp_typeListFilter().length">
<tbody *ngIf="!dataLoading&&emp_typeListFilter().length">
<tr
*ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.codeId}}"
[(ngModel)]="item['selected']" (change)="onCheckboxChange(item)">
<label for="checkbox-{{item.codeId}}">&nbsp;{{item.codeId}}</label>
<input *ngIf="item.data.codeId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.codeId}}"
[(ngModel)]="item.check">
<label for="checkbox-{{item.data.codeId}}">&nbsp;{{item.data.codeId}}</label>
</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td>{{item.data.tdesc}}</td>
<td>{{item.data.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
data-hs-overlay="#employee-categories-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
data-hs-overlay="#employee-categories-alert-delete-modal"></i>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#employee-categories-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.codeId!='100'"
(click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#employee-categories-page-alert-modal"></i>
</td>
</tr>
</tbody>
......@@ -130,85 +137,25 @@
</a>
</li>
</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>
</div>
<div id="employee-categories-modal-add" 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 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">
แก้ไขข้อมูลประเภทพนักงาน
{{modalStatus=='add'?'เพิ่มข้อมูลประเภทพนักงาน':'แก้ไขข้อมูลประเภทพนักงาน'}}
</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-edit">
data-hs-overlay="#employee-categories-page-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
......@@ -243,20 +190,19 @@
</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 bg-input-readonly" readonly
[(ngModel)]="emp_type.codeId">
<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">
<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>
<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">
<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-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">
data-hs-overlay="#employee-categories-page-alert-modal">
บันทึกข้อมูล
</a>
</div>
......@@ -265,7 +211,7 @@
</div>
</div>
<div id="employee-categories-alert-add-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="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
......@@ -273,100 +219,55 @@
แจ้งเตือน
</h3>
<div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-categories-alert-add-modal">
data-hs-overlay="#employee-categories-page-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>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-add-modal" (click)="addEmp_type()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-categories-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">
</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-alert-edit-modal">
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 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">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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-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" (click)="addEmp_type()">
data-hs-overlay="#employee-categories-page-alert-modal" (click)="addEmp_type()">
บันทึกข้อมูล
</a>
</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">
</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-alert-delete-modal">
data-hs-overlay="#employee-categories-page-alert-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 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>
......
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
import { ToastrService } from 'ngx-toastr';
import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model';
import { EmpTypeService } from 'src/app/shared/services/employee-type.service';
export interface DataModel {
codeId: string
tdesc: string
edesc: string
companyId: string
}
@Component({
selector: 'app-employee-categories',
......@@ -21,10 +27,14 @@ export class EmployeeCategories {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
emp_typeList: EmpTypeModel[] = []
emp_type: EmpTypeModel = new MyEmpTypeModel({})
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;
constructor(private empTypeService: EmpTypeService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
......@@ -33,125 +43,78 @@ export class EmployeeCategories {
this.getEmpTypeList()
}
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
getEmpTypeList() {
this.empTypeService.getList().subscribe({
next: response => {
this.emp_typelist = response.map(x => ({ check: false, data: { codeId: x.codeId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
this.searchChange();
this.cdr.detectChanges();
},
"upload": {
isModalOpen: false,
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 ทั้งหมดปิดแล้ว
error: err => {
console.error('Error fetching employee types:', err);
}
});
}
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() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
}
emp_typeListFilter() {
return this.emp_typeList.filter(x =>
x.codeId.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
return this.emp_typelist.filter(x => {
const data = x.data
const match = data.codeId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
return match;
});
}
selectEmp_type(emp_type?: EmpTypeModel) {
// this.showSuccess()
this.emp_type = new MyEmpTypeModel(emp_type || {})
setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", companyId: "" }));
}
// selectEmp_type(emp_type?: EmpTypeModel) {
// // this.showSuccess()
// this.emp_type = new MyEmpTypeModel(emp_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 })
this.empTypeService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEmpTypeList()
this.showSuccessAdd()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
deleteEmp_type() {
this.empTypeService.delete(this.emp_type).subscribe((response: any) => {
let body: EmpTypeModel | EmpTypeModel[] = []
if (this.dataSelect.codeId) {
body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
} 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()
this.showSuccessDelete()
}
})
}
openDeleteModal(item: EmpTypeModel) {
this.itemToDelete = item; // เก็บข้อมูลที่ต้องการลบ
}
deleteSelected() {
if (this.itemToDelete) {
// ลบ item ที่ถูกเลือกออกจาก emp_typeList
this.emp_typeList = this.emp_typeList.filter(item => item !== this.itemToDelete);
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
// ฟังก์ชันลบข้อมูลที่เลือก
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,
positionClass: 'toast-top-right',
});
}
showSuccessEdit() {
this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
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 @@
</div>
<div class="px-1">
<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>
Add
</button>
</div>
<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-level-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-level-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
......@@ -70,28 +66,40 @@
</ng-container>
</tr>
</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>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="plListFilter().length">
<tbody *ngIf="!dataLoading&&plListFilter().length">
<tr
*ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.plId}}">
<label for="checkbox-{{item.plId}}">&nbsp;{{item.plId}}</label>
<input *ngIf="item.data.plId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer"
id="checkbox-{{item.data.plId}}" [(ngModel)]="item.check">
<label for="checkbox-{{item.data.plId}}">&nbsp;{{item.data.plId}}</label>
</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td>{{item.data.tdesc}}</td>
<td>{{item.data.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)"
data-hs-overlay="#employee-level-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)"
data-hs-overlay="#employee-level-alert-delete-modal"></i>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#employee-level-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.plId!='100'"
(click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#employee-level-page-alert-modal"></i>
</td>
</tr>
</tbody>
......@@ -129,84 +137,25 @@
</a>
</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>
</nav>
</div>
<div id="employee-level-modal-add" 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 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)
{{modalStatus=='add'?'เพิ่มข้อมูลประเภทพนักงาน(PL)':'แก้ไขข้อมูลประเภทพนักงาน(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-edit">
data-hs-overlay="#employee-level-page-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
......@@ -241,20 +190,18 @@
</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 bg-input-readonly" readonly
[(ngModel)]="pl.plId">
<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">
<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>
<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">
<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">
data-hs-overlay="#employee-level-page-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-edit-modal">
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-page-alert-modal">
บันทึกข้อมูล
</a>
</div>
......@@ -291,7 +238,7 @@
</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">
......@@ -299,100 +246,55 @@
แจ้งเตือน
</h3>
<div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-add-modal">
data-hs-overlay="#employee-level-page-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">
</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-level-alert-edit-modal">
data-hs-overlay="#employee-level-page-alert-modal">
<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">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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">
data-hs-overlay="#employee-level-page-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-edit-modal"
(click)="addPL()">
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-page-alert-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="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-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">
</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-alert-delete-modal">
data-hs-overlay="#employee-level-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-delete-modal" (click)="deletePL();">
<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>
......
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
import { ToastrService } from 'ngx-toastr';
import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
import { PLService } from 'src/app/shared/services/pl.service';
export interface DataModel {
plId: string
tdesc: string
edesc: string
companyId: string
}
@Component({
selector: 'app-employee-level',
......@@ -20,66 +26,92 @@ export class EmployeeLevel implements OnInit {
}
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
plList: PLModel[] = []
pl: PLModel = new MyPLModel({})
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,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getPLList()
}
getPLList() {
this.plService.getList().subscribe(response => {
this.plList = response.map(x => new MyPLModel(x))
this.searchChange()
this.cdr.detectChanges()
})
this.plService.getList().subscribe({
next: response => {
this.plList = response.map(x => ({ check: false, data: { plId: x.plId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
this.searchChange();
this.cdr.detectChanges();
},
error: err => {
console.error('Error fetching employee types:', err);
}
});
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
}
plListFilter() {
return this.plList.filter(x => x.plId.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
return this.plList.filter(x => {
const data = x.data
const match = data.plId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
return match;
});
}
selectPL(pl?: PLModel) {
// this.showSuccess()
this.pl = new MyPLModel(pl || {})
setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { plId: "", tdesc: "", edesc: "", companyId: "" }));
}
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 })
this.plService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPLList()
this.showSuccessAdd()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
deletePL() {
this.plService.delete(this.pl).subscribe((response: any) => {
let body: PLModel | PLModel[] = []
if (this.dataSelect.plId) {
body = new MyPLModel({ plId: this.dataSelect.plId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
} 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()
this.showSuccessDelete()
} else {
this.showAlert(response.message, 'error')
}
})
}, error: error => {
this.showAlert(error.message, 'error')
}
showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessEdit() {
this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
})
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
......
src/app/shared/services/employee-type.service.ts
......@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { EmpTypeModel } from '../model/employee-type.model';
import { AlertModel } from '../model/alert.model';
@Injectable({
providedIn: 'root'
......@@ -18,16 +19,16 @@ export class EmpTypeService {
getById(codeId: string): Observable<EmpTypeModel> {
return this.http.get<EmpTypeModel>(this.urlApi + "/" + codeId)
}
post(body: EmpTypeModel) {
return this.http.post(this.urlApi, body)
post(body: EmpTypeModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: EmpTypeModel) {
delete(body: EmpTypeModel | EmpTypeModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
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';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { PLModel } from '../model/pl.model';
import { AlertModel } from '../model/alert.model';
@Injectable({
providedIn: 'root'
})
......@@ -17,16 +18,16 @@ export class PLService {
getList(): Observable<PLModel[]> {
return this.http.get<PLModel[]>(this.urlApi + "/lists")
}
post(body: PLModel) {
return this.http.post(this.urlApi, body)
post(body: PLModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: PLModel) {
delete(body: PLModel | PLModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
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