Skip to content

M
myAppraisal
Commit 8fb0c4e5 by LAPTOP-CV4JFSHE\kantavee
Options

delete checkbox jobdescript>employee-group-unit,position

parent 59eeeefd
Showing with 208 additions and 35 deletions
src/app/components/company-components/job-description/employee-group-unit/employee-group-unit.component.html
......@@ -33,15 +33,11 @@
</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-group-unit-component-alert-delete-checkbox-modal" (click)="selectEmp_group()">
<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-group-unit-component-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">
......@@ -60,6 +56,11 @@
<ng-container
*ngFor="let item of ['รหัสกลุ่มพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">
<ng-container *ngIf="i === 0">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" (change)="toggleSelectAll($event)" style="margin-right: 10px;">
</ng-container>
</span>
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
......@@ -79,7 +80,8 @@
<tr
*ngFor="let item of emp_groupListFilter() | 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.groupId}}">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.groupId}}" [checked]="selectedItems.includes(item.groupId)"
(change)="toggleSelection(item.groupId, $event)">
<label for="checkbox-{{item.groupId}}">&nbsp;{{item.groupId}}</label>
</td>
<td>{{item.tdesc}}</td>
......@@ -88,7 +90,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)"
data-hs-overlay="#employee-group-unit-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal"></i>
data-hs-overlay="#employee-group-unit-component-alert-delete-modal" ></i>
</td>
</tr>
</tbody>
......@@ -396,4 +398,40 @@
</div>
</div>
</div>
</div>
<div id="employee-group-unit-component-alert-delete-checkbox-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-group-unit-component-alert-delete-checkbox-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-group-unit-component-alert-delete-checkbox-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-delete-checkbox-modal" (click)="deleteSelectedItems()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-components/job-description/employee-group-unit/employee-group-unit.component.ts
......@@ -14,6 +14,7 @@ export class EmployeeGroupUnit implements OnInit {
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
currentPage = 1
selectedItems: string[] = [];
page = Array.from({ length: 1 }, (_, i) => i + 1);
emp_groupList: EmpGroupModel[] = []
emp_group: EmpGroupModel = new MyEmpGroupModel({})
......@@ -134,6 +135,41 @@ export class EmployeeGroupUnit implements OnInit {
}
})
}
toggleSelection(groupId: string, event: Event) {
const checked = (event.target as HTMLInputElement).checked;
if (checked) {
this.selectedItems.push(groupId);
} else {
this.selectedItems = this.selectedItems.filter(id => id !== groupId);
}
}
toggleSelectAll(event: Event) {
const checked = (event.target as HTMLInputElement).checked;
if (checked) {
this.selectedItems = this.emp_groupListFilter().map(item => item.groupId);
} else {
this.selectedItems = [];
}
}
deleteSelectedItems() {
if (this.selectedItems.length === 0) {
alert("เลือกข้อมูลก่อนลบ");
return;
}
const selectedGroups = this.emp_groupListFilter().filter(item => this.selectedItems.includes(item.groupId));
this.empGroupService.delete(selectedGroups).subscribe({
next: (response) => {
console.log("ลบสำเร็จ", response);
this.selectedItems = [];
this.getEmpGroupList();
this.showSuccessDelete()
},
error: (error) => {
console.error("เกิดข้อผิดพลาดในการลบ", error);
}
});
}
}
src/app/components/company-components/job-description/position/position-unit.component.html
......@@ -33,15 +33,11 @@
</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="#position-unit-component-alert-delete-check-modal" (click)="selectPosition()">
<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="#position-unit-component-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">
......@@ -81,7 +77,8 @@
*ngFor="let item of positionListFilter() | 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.positionId}}">
id="checkbox-{{item.positionId}}" [checked]="selectedItems.includes(item.positionId)"
(change)="toggleSelection(item.positionId, $event)">
<label for="checkbox-{{item.positionId}}">&nbsp;{{item.positionId}}</label>
</td>
<td>{{item.tdesc}}</td>
......@@ -396,4 +393,40 @@
</div>
</div>
</div>
</div>
<div id="position-unit-component-alert-delete-check-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="#position-unit-component-alert-delete-check-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="#position-unit-component-alert-delete-check-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-delete-check-modal" (click)="deleteSelectedItems()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-components/job-description/position/position-unit.component.ts
......@@ -19,6 +19,7 @@ export class PositionUnitComponent implements OnInit {
this.activeTab = tab.id;
}
currentPage = 1
selectedItems: string[] = [];
page = Array.from({ length: 1 }, (_, i) => i + 1);
positionList: PositionModel[] = []
position: PositionModel = new MyPositionModel({})
......@@ -85,6 +86,41 @@ export class PositionUnitComponent implements OnInit {
}
})
}
toggleSelection(positionId: string, event: Event) {
const checked = (event.target as HTMLInputElement).checked;
if (checked) {
this.selectedItems.push(positionId);
} else {
this.selectedItems = this.selectedItems.filter(id => id !== positionId);
}
}
toggleSelectAll(event: Event) {
const checked = (event.target as HTMLInputElement).checked;
if (checked) {
this.selectedItems = this.positionListFilter().map(item => item.positionId);
} else {
this.selectedItems = [];
}
}
deleteSelectedItems() {
if (this.selectedItems.length === 0) {
alert("เลือกข้อมูลก่อนลบ");
return;
}
const selectedGroups = this.positionListFilter().filter(item => this.selectedItems.includes(item.positionId));
this.positionService.delete(selectedGroups).subscribe({
next: (response) => {
console.log("ลบสำเร็จ", response);
this.selectedItems = [];
this.getPositionList();
this.showSuccessDelete()
},
error: (error) => {
console.error("เกิดข้อผิดพลาดในการลบ", error);
}
});
}
}
src/app/shared/services/emp-group.service.ts
......@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { EmpGroupModel } from '../model/emp-group.model';
import { AlertModel } from '../model/alert.model';
@Injectable({
providedIn: 'root'
......@@ -18,16 +19,28 @@ export class EmpGroupService {
getById(groupId: string): Observable<EmpGroupModel> {
return this.http.get<EmpGroupModel>(this.urlApi + "/" + groupId)
}
post(body: EmpGroupModel) {
return this.http.post(this.urlApi, body)
}
delete(body: EmpGroupModel) {
// post(body: EmpGroupModel) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: EmpGroupModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
post(body: EmpGroupModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: EmpGroupModel | EmpGroupModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
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/position.service.ts
......@@ -3,6 +3,8 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { PositionModel } from '../model/position.model';
import { AlertModel } from '../model/alert.model';
@Injectable({
providedIn: 'root'
})
......@@ -17,16 +19,28 @@ import { PositionModel } from '../model/position.model';
getList(): Observable<PositionModel[]> {
return this.http.get<PositionModel[]>(this.urlApi + "/lists")
}
post(body: PositionModel) {
return this.http.post(this.urlApi, body)
// post(body: PositionModel) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: PositionModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
post(body: PositionModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: PositionModel) {
delete(body: PositionModel | PositionModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
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