Skip to content

M
mySkill-x
Commit 084807ff by Mon
Options

การประเมินจัดการประสิทธิภาพ>ทะเบียนกำหนดชื่อ>ทะเบียนเกรด>ทะเบียนประเมินเวลาทำงาน… 

การประเมินจัดการประสิทธิภาพ>ทะเบียนกำหนดชื่อ>ทะเบียนเกรด>ทะเบียนประเมินเวลาทำงาน>การจัดการกระประเมิน>รอบการประเมิน>
parent 215cd931
Showing with 1643 additions and 620 deletions
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.html
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()"> [(ngModel)]="search">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i> <i class="ri-search-line text-gray"></i>
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
<div class="px-1"> <div class="px-1">
<button type="button" <button type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-45px m-0 shadow-md" class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-45px m-0 shadow-md"
data-hs-overlay="#evaluation-grouping-upload-modal" data-hs-overlay="#evaluation-grouping-upload-modal">
(click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'"> <!-- (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'" -->
<i class="ti ti-file-plus"></i> <i class="ti ti-file-plus"></i>
import import
</button> </button>
...@@ -32,6 +32,12 @@ ...@@ -32,6 +32,12 @@
</div> </div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="pl.dataList" [checkBoxSetting]="false"
[columns]="columns"
(sendSelectData)="onEdit=true;selectPl($event)">
</app-datagrid-syncfution>
</div>
<!-- <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md"> <div class="overflow-auto table-bordered rounded-t-md">
<div class="overflow-auto shadow-md"> <div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
...@@ -125,7 +131,7 @@ ...@@ -125,7 +131,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</ng-container> </ng-container>
<ng-container *ngIf="onEdit"> <ng-container *ngIf="onEdit">
<app-edit-evaluation-grouping [pl]="pl.select" <app-edit-evaluation-grouping [pl]="pl.select"
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model'; import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
import { FileService } from 'src/app/shared/services/file.service'; import { FileService } from 'src/app/shared/services/file.service';
import { PLService } from 'src/app/shared/services/pl.service'; import { PLService } from 'src/app/shared/services/pl.service';
import { ColumnModel } from '@syncfusion/ej2-grids';
@Component({ @Component({
selector: 'app-evaluation-grouping', selector: 'app-evaluation-grouping',
...@@ -22,11 +23,25 @@ export class EvaluationGroupingComponent { ...@@ -22,11 +23,25 @@ export class EvaluationGroupingComponent {
selectedFile: File | null = null; selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์'; selectedFileName: string = 'กรุณาเลือกไฟล์';
numDataListChecked = 0 columns: ColumnModel[] = [{
isDataListChecked = false field: "plId",
isDataListCheckedAll = false headerText: "รหัส",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "ชื่อระดับพนักงาน (ไทย)",
type: "string"
}]
searchSettings = {
fields: ['pmsTypeId', 'tdesc'],
operator: 'contains',
ignoreCase: false
};
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
pl: { loading: boolean, select: PLModel, dataList: { check: boolean, data: PLModel }[] } = { loading: false, select: new MyPLModel(), dataList: [] } pl: { loading: boolean, select: PLModel, dataList: PLModel [] } = { loading: false, select: new MyPLModel(), dataList: [] }
constructor(private toastr: ToastrService, private plService: PLService, private cdr: ChangeDetectorRef, private fileService: FileService) { } constructor(private toastr: ToastrService, private plService: PLService, private cdr: ChangeDetectorRef, private fileService: FileService) { }
ngOnInit(): void { ngOnInit(): void {
this.onSendPathTitle() this.onSendPathTitle()
...@@ -84,11 +99,10 @@ export class EvaluationGroupingComponent { ...@@ -84,11 +99,10 @@ export class EvaluationGroupingComponent {
this.pl.loading = true this.pl.loading = true
this.plService.getList().subscribe({ this.plService.getList().subscribe({
next: response => { next: response => {
this.pl.dataList = response.map(x => ({ check: false, data: new MyPLModel(x) })) this.pl.dataList = response.map(x => {
return new MyPLModel(x)
})
this.pl.loading = false this.pl.loading = false
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange();
this.cdr.detectChanges(); this.cdr.detectChanges();
}, error: error => { }, error: error => {
this.pl.loading = false this.pl.loading = false
...@@ -99,31 +113,25 @@ export class EvaluationGroupingComponent { ...@@ -99,31 +113,25 @@ export class EvaluationGroupingComponent {
} }
plListFilter() { plListFilter() {
return this.pl.dataList.filter(x => { return this.pl.dataList.filter(x => {
const data = x.data const data = x
const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase())
return match; return match;
}); });
} }
selectPl(data: PLModel) { selectPl(data?: PLModel) {
this.pl.select = new MyPLModel(data) if (data) {
} this.pl.select = new MyPLModel(data)
} else if (this.currentModal == 'add') {
this.pl.select = new MyPLModel()
} else if (this.currentModal == 'edit') {
this.pl.select = new MyPLModel({ plId: this.pl.select.plId })
}
}
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)
this.dataListCheck();
this.cdr.detectChanges() this.cdr.detectChanges()
} }
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.plListFilter().forEach(x => x.check = selectAll);
this.dataListCheck();
}
dataListCheck() {
const dataCheck = this.plListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.pl.dataList.filter(x => x.check).length
this.isDataListChecked = Boolean(this.numDataListChecked)
}
onSendPathTitle() { onSendPathTitle() {
if (this.onEdit) { if (this.onEdit) {
this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', 'จัดกลุ่มประเมิน', 'แก้ไขกลุ่มการประเมิน']); this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'การจัดการประเมิน', 'จัดกลุ่มประเมิน', 'แก้ไขกลุ่มการประเมิน']);
......
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center"> <!-- <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<div class="flex">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
[(ngModel)]="isDataListChecked">
<label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
{{numDataListChecked}} Selected</label>
</div>
<div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="check-boxall"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200"
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button>
<label class="text-sm text-gray-500 ml-2" for="check-boxall">Select All</label>
</div>
</div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()"> style="height: 40px;" [(ngModel)]="search">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i> <i class="ri-search-line text-gray"></i>
...@@ -44,17 +28,48 @@ ...@@ -44,17 +28,48 @@
Delete Delete
</button> </button>
</div> </div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div> </div>
</div> </div>
</div> -->
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="modalStatus='add';modalStatusEdit=true;selectPl();selectPmsMasfromEvaluationCycle();openDialog();">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
(click)="modalStatus='delete';selectPmsMasfromEvaluationCycle();deletePmsMasfromEvaluation()" >
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="pmsMasfromEvaluation.dataList"
[columns]="columns" [selectedItems]="selectedItems"
(sendSelectData)="modalStatus='edit';selectPmsMasfromEvaluationCycle($event);openDialog()" (sendSelectedItems)="onSelectItemChange($event)">
</app-datagrid-syncfution>
</div>
<!-- <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-top-0.65rem"> <div class="overflow-auto table-bordered rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px"> <thead class="height-50px">
...@@ -141,11 +156,6 @@ ...@@ -141,11 +156,6 @@
<i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal" *ngIf="item.data.statusFrom.code =='1'" <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal" *ngIf="item.data.statusFrom.code =='1'"
(click)="openModal('evaluation-cycle-person-modal',item.data.pmsEvaluationRoundId)"></i> (click)="openModal('evaluation-cycle-person-modal',item.data.pmsEvaluationRoundId)"></i>
<!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal"></i> -->
<!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
[ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span>
<span class="badge text-white m-1 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
<span class="badge text-white m-1 cursor-pointer" <span class="badge text-white m-1 cursor-pointer"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal" data-hs-overlay="#management-evaluation-cycle-page-alert-modal"
(click)="modalStatus='createForm';setData(item.data)" *ngIf="item.data.statusFrom.code == '0'" [ngClass]="{ (click)="modalStatus='createForm';setData(item.data)" *ngIf="item.data.statusFrom.code == '0'" [ngClass]="{
...@@ -210,9 +220,113 @@ ...@@ -210,9 +220,113 @@
{{pmsMasfromEvaluationCycleFilter().length}} items</span> {{pmsMasfromEvaluationCycleFilter().length}} items</span>
</ul> </ul>
</nav> </nav>
</div> </div> -->
<ng-template #managementEvaluationCycleModal let-modal>
<h3 mat-dialog-title>
{{modalStatus=='add'?'เพิ่มรอบการประเมิน':'เเก้ไขรอบการประเมิน'}}
</h3>
<div class="w-full flex justify-end mb-1rem">
<div class="absolute flex">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="selectPl();selectPmsMasfromEvaluationCycle()">
<i class="ti ti-eraser text-base"></i>
Clear
</button>
</div>
</div>
</div>
<mat-dialog-content>
<label for="input-label" class="ti-form-label mt-2rem">รหัสรอบการประเมิน<span
class="text-danger">*<ng-container *ngIf="modalStatus=='add'&&checkPrimary()">
รหัสรอบการประเมินซ้ำ
</ng-container></span></label>
<input type="text" id="input-label" class="ti-form-input w-1/2"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(ngModel)]="pmsMasfromEvaluation.select.pmsEvaluationRoundId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)<span
class="text-danger">*</span></label>
<input type="text" id="detail_th" class="ti-form-input h-16" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [(ngModel)]="pmsMasfromEvaluation.select.tdesc" [readonly]="!modalStatusEdit">
<div id="management-evaluation-cycle-page-modal" class="hs-overlay hidden ti-modal"> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [(ngModel)]="pmsMasfromEvaluation.select.edesc" [readonly]="!modalStatusEdit">
<label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน<span class="text-danger">*</span></label>
<select class="ti-form-select" [(ngModel)]="pmsMasfromEvaluation.select.apsyear" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [disabled]="!modalStatusEdit">
<option *ngFor="let item of yearList" [ngValue]="item">{{ item }}</option>
</select>
<label for="input-label" class="ti-form-label mt-2rem">เริ่มวันที่<span class="text-danger">*</span></label>
<input type="date" id="input-label" class="ti-form-input w-1/2"
[(ngModel)]="pmsMasfromEvaluation.select.apsPeriodStart" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [readonly]="!modalStatusEdit">
<label for="input-label" class="ti-form-label mt-2rem">สิ้นสุดวันที่<span class="text-danger">*</span></label>
<input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="pmsMasfromEvaluation.select.apsPeriodEnd" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [readonly]="!modalStatusEdit">
<label for="input-label" class="ti-form-label mt-2rem">ระดับพนักงาน (JL)</label>
<div *ngFor="let item of pmsMasfromEvaluation.select.personalLevel;let i = index;let f=first;let l = last"
class="grid grid-cols-2">
<div class="col-span-1">
<div class="flex relative">
<input type="text" class="ti-form-input pointer-events-none" readonly
[ngClass]="{'input-list-f1': f&&!l, 'input-list-c1': !f&&!l, 'input-list-l1': !f&&l, 'input-list-fl1': f&&l,'bg-input-readonly':!modalStatusEdit}"
[(ngModel)]="item.plId">
<div
[ngClass]="{'input-list-line-f': f&&!l, 'input-list-line-c': !f&&!l, 'input-list-line-l': !f&&l, 'input-list-line-fl': f&&l,'bg-input-readonly':!modalStatusEdit}">
<div class="input-list-line"></div>
</div>
<input type="text" class="ti-form-input pointer-events-none" readonly
[ngClass]="{'input-list-f2': f&&!l, 'input-list-c2': !f&&!l, 'input-list-l2': !f&&l, 'input-list-fl2': f&&l,'bg-input-readonly':!modalStatusEdit}"
[(ngModel)]="item.tdesc">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button *ngIf="item.plId&&modalStatusEdit" type="button" class="flex items-center text-red-500"
(click)="pl.selectIndex=i;selectPl();">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
</div>
</div>
</div>
<div class="col-span-1 ml-1" *ngIf="f&&modalStatusEdit">
<ng-component *ngTemplateOutlet="plSearchButton"></ng-component>
</div>
</div>
<div class="grid grid-cols-2" *ngIf="!pmsMasfromEvaluation.select.personalLevel.length">
<div class="col-span-1">
<div class="flex relative">
<input type="text" class="ti-form-input input-list-fl1 pointer-events-none" readonly>
<div class="input-list-line-fl">
<div class="input-list-line"></div>
</div>
<input type="text" class="ti-form-input input-list-fl2 pointer-events-none" readonly>
</div>
</div>
<div class="col-span-1 ml-1">
<ng-component *ngTemplateOutlet="plSearchButton"></ng-component>
</div>
</div>
<ng-template #plSearchButton>
<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 !m-0 h-full"
style="height: 44.8px !important;" (click)="modal.search='';searchModalChange(plListFilter())"
(click)="openPLDialog()">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</ng-template>
<span class="text-danger mt-1">**หมายเหตุ ถ้าไม่เลือกระดับ JL ระบบจะทำการเลือกทั้งหมด</span>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
<button type="button" class="ti-btn ti-btn-success" mat-button [class.ti-btn-disabled]="!pmsMasfromEvaluation.select.pmsEvaluationRoundId||!pmsMasfromEvaluation.select.tdesc||(modalStatus=='add'&&checkPrimary())" (click)="addPmsMasfromEvaluation()"
[disabled]="!pmsMasfromEvaluation.select.pmsEvaluationRoundId||!pmsMasfromEvaluation.select.tdesc||(modalStatus=='add'&&checkPrimary())">
บันทึกข้อมูล
</button>
</mat-dialog-actions>
</ng-template>
<!-- <div id="management-evaluation-cycle-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="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">
...@@ -246,12 +360,6 @@ ...@@ -246,12 +360,6 @@
Clear Clear
</button> </button>
</div> </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> </div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0"> <div class="ti-modal-body padding-16px pt-0 overflow-y-0">
...@@ -271,8 +379,6 @@ ...@@ -271,8 +379,6 @@
<input type="text" id="detail_eng" class="ti-form-input h-16" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [(ngModel)]="pmsMasfromEvaluation.edesc" [readonly]="!modalStatusEdit"> <input type="text" id="detail_eng" class="ti-form-input h-16" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [(ngModel)]="pmsMasfromEvaluation.edesc" [readonly]="!modalStatusEdit">
<label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน<span class="text-danger">*</span></label> <label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน<span class="text-danger">*</span></label>
<!-- <input type="text" id="input-label" class="ti-form-input w-1/2"
oninput="this.value = this.value.replace(/\D/g, '')" [(ngModel)]="pmsMasfromEvaluation.apsyear"> -->
<select class="ti-form-select" [(ngModel)]="pmsMasfromEvaluation.apsyear" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [disabled]="!modalStatusEdit"> <select class="ti-form-select" [(ngModel)]="pmsMasfromEvaluation.apsyear" [ngClass]="{'bg-input-readonly':!modalStatusEdit}" [disabled]="!modalStatusEdit">
<option *ngFor="let item of yearList" [ngValue]="item">{{ item }}</option> <option *ngFor="let item of yearList" [ngValue]="item">{{ item }}</option>
</select> </select>
...@@ -350,9 +456,9 @@ ...@@ -350,9 +456,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div id="management-evaluation-cycle-page-alert-modal" class="hs-overlay hidden ti-modal"> <!-- <div id="management-evaluation-cycle-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">
...@@ -432,9 +538,9 @@ ...@@ -432,9 +538,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div id="evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal"> <!-- <div id="evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out m-3 lg:!mx-auto " style="min-width: 70%;"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out m-3 lg:!mx-auto " style="min-width: 70%;">
<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">
...@@ -455,13 +561,77 @@ ...@@ -455,13 +561,77 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div id="management-evaluation-cycle-pl-table-modal" class="hs-overlay hidden ti-modal"> <ng-template #PLModal let-modal>
<h3 mat-dialog-title>
ข้อมูลระดับพนักงาน (JL)
</h3>
<mat-dialog-content>
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="PLsearchmodal.search" (ngModelChange)="onPLModalSearchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสระดับพนักงาน (JL)','รายละเอียดฝ่าย (ไทย)','รายละเอียดฝ่าย (อังกฤษ)']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f">
<span class="text-sm">{{ 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>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="plListFilter().length">
<tr *ngFor="let item of plListFilter() | slice:((PLsearchmodal.currentPage-1) * PLsearchmodal.pageSize) : (((PLsearchmodal.currentPage-1) * PLsearchmodal.pageSize) + PLsearchmodal.pageSize);let i = index"
class="cursor-pointer" (click)="selectPl(item);closePLDialog()" >
<td class="flex justify-center">
{{((PLsearchmodal.currentPage-1) * PLsearchmodal.pageSize)+(i+1)}}
</td>
<td>{{item.plId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</div>
<app-pagination [totalItems]="plListFilter().length" [pageSize]="PLsearchmodal.pageSize"
(pageChange)="PLsearchmodal.currentPage = $event"
(pageSizeChange)="PLsearchmodal.pageSize = $event;PLsearchmodal.currentPage = 1"></app-pagination>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
</mat-dialog-actions>
</ng-template>
<!-- <div id="management-evaluation-cycle-pl-table-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<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">
...@@ -586,4 +756,4 @@ ...@@ -586,4 +756,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
\ No newline at end of file \ No newline at end of file
src/app/components/performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output, Renderer2 } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model'; import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
import { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model'; import { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model';
import { PLService } from 'src/app/shared/services/pl.service'; import { PLService } from 'src/app/shared/services/pl.service';
import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-masfrom-evaluation.service'; import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-masfrom-evaluation.service';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { MatDialog } from '@angular/material/dialog';
import Swal from 'sweetalert2';
export interface DataModal { export interface DataModal {
search: string, search: string,
currentPage: number, currentPage: number,
page: number[] page: number[],
pageSize: number
} }
@Component({ @Component({
...@@ -24,8 +29,17 @@ export class ManagementCycleComponent { ...@@ -24,8 +29,17 @@ export class ManagementCycleComponent {
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
search = "" search = ""
modalStatus: 'createForm' | 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add' modalStatus: 'createForm' | 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add'
pmsMasfromEvaluationlist: { check: boolean, data: PmsMasfromEvaluationModel }[] = [] // pmsMasfromEvaluationlist: { check: boolean, data: PmsMasfromEvaluationModel }[] = []
pmsMasfromEvaluation: PmsMasfromEvaluationModel = new MyPmsMasfromEvaluationModel({}) // pmsMasfromEvaluation: PmsMasfromEvaluationModel = new MyPmsMasfromEvaluationModel({})
pmsMasfromEvaluation: {
loading: boolean,
select: PmsMasfromEvaluationModel,
dataList: PmsMasfromEvaluationModel[]
} = {
loading: false,
select: new MyPmsMasfromEvaluationModel({}),
dataList: []
}
dataLoading = false dataLoading = false
itemToDelete: PmsMasfromEvaluationModel | null = null; itemToDelete: PmsMasfromEvaluationModel | null = null;
isDataListChecked = false isDataListChecked = false
...@@ -37,8 +51,15 @@ export class ManagementCycleComponent { ...@@ -37,8 +51,15 @@ export class ManagementCycleComponent {
modal: DataModal = { modal: DataModal = {
search: "", search: "",
currentPage: 1, currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1) page: Array.from({ length: 1 }, (_, i) => i + 1),
pageSize: 10
} }
PLsearchmodal: DataModal = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "",
pageSize: 10
}
pl: { loading: boolean, selectIndex: number, dataList: PLModel[] } = { loading: false, selectIndex: -1, dataList: [] } pl: { loading: boolean, selectIndex: number, dataList: PLModel[] } = { loading: false, selectIndex: -1, dataList: [] }
currentDate = new Date() currentDate = new Date()
...@@ -48,9 +69,52 @@ export class ManagementCycleComponent { ...@@ -48,9 +69,52 @@ export class ManagementCycleComponent {
(this.currentDate.getFullYear() + 1) + "", (this.currentDate.getFullYear() + 1) + "",
] ]
columns: ColumnModel[] = [{
field: "pmsEvaluationRoundId",
headerText: "รหัส",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "รายละเอียด",
type: "string"
},
{
field: "apsyear",
headerText: "รอบปีการประเมิน",
type: "string"
},
{
field: "apsPeriodStart",
headerText: "วันที่เริ่มต้น",
type: "string"
},
{
field: "apsPeriodEnd",
headerText: "วันที่สิ้นสุด",
type: "string"
},
{
field: "statusCode.tdesc",
headerText: "สถานะ",
type: "string"
},]
searchSettings = {
fields: ['pmsEvaluationRoundId', 'tdesc', 'apsyear', 'apsPeriodStart', 'apsPeriodEnd', 'statusCode.tdesc'],
operator: 'contains',
ignoreCase: false
};
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
@ViewChild("managementEvaluationCycleModal") managementEvaluationCycleModal: any;
dialogRef: any
@ViewChild("PLModal") PLModal: any;
dialogRefPL: any
modalStatusEdit = false modalStatusEdit = false
constructor(private pmsMasfromEvaluationCycleService: PmsMasfromEvaluationCycleService, constructor(private pmsMasfromEvaluationCycleService: PmsMasfromEvaluationCycleService,
private toastr: ToastrService, private toastr: ToastrService,
private dialog: MatDialog,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private renderer: Renderer2, private renderer: Renderer2,
private pLService: PLService private pLService: PLService
...@@ -77,7 +141,7 @@ export class ManagementCycleComponent { ...@@ -77,7 +141,7 @@ export class ManagementCycleComponent {
next: response => { next: response => {
this.pl.dataList = response.map((x: any) => new MyPLModel(x)) this.pl.dataList = response.map((x: any) => new MyPLModel(x))
this.pl.loading = false this.pl.loading = false
this.searchChange() // this.searchChange()
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.pl.loading = false this.pl.loading = false
...@@ -87,35 +151,46 @@ export class ManagementCycleComponent { ...@@ -87,35 +151,46 @@ export class ManagementCycleComponent {
} }
plListFilter() { plListFilter() {
return this.pl.dataList.filter(x => return this.pl.dataList.filter(x =>
(x.plId.toLowerCase().includes(this.modal.search.toLowerCase()) || (x.plId.toLowerCase().includes(this.PLsearchmodal.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) || x.tdesc.toLowerCase().includes(this.PLsearchmodal.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.modal.search.toLowerCase())) && x.edesc.toLowerCase().includes(this.PLsearchmodal.search.toLowerCase())) &&
!this.pmsMasfromEvaluation.personalLevel.some(y => y.plId == x.plId) !this.pmsMasfromEvaluation.select.personalLevel.some(y => y.plId == x.plId)
); );
} }
onPLModalSearchChange() {
this.PLsearchmodal.currentPage = 1
this.PLsearchmodal.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
}
selectPl(data?: PLModel) { selectPl(data?: PLModel) {
if (!data) { if (!data) {
this.pmsMasfromEvaluation.personalLevel.splice(this.pl.selectIndex, 1); this.pmsMasfromEvaluation.select.personalLevel.splice(this.pl.selectIndex, 1);
return; return;
} }
this.pmsMasfromEvaluation.personalLevel.push(new MyPLModel(data)) this.pmsMasfromEvaluation.select.personalLevel.push(new MyPLModel(data))
} }
getPmsMasfromEvaluationCycleList() { getPmsMasfromEvaluationCycleList() {
this.dataLoading = true this.dataLoading = true
this.selectedItems.data.clear()
this.pmsMasfromEvaluationCycleService.getList().subscribe({ this.pmsMasfromEvaluationCycleService.getList().subscribe({
// next: response => {
// this.pmsMasfromEvaluationlist = response.map(x => ({
// check: false,
// data: new MyPmsMasfromEvaluationModel(x)
// }));
next: response => { next: response => {
this.pmsMasfromEvaluationlist = response.map(x => ({ this.pmsMasfromEvaluation.dataList = response.map(x => {
check: false, this.selectedItems.data.set(x.pmsEvaluationRoundId, false)
data: new MyPmsMasfromEvaluationModel(x) return new MyPmsMasfromEvaluationModel(x)
})); })
this.selectedItems.key = 'pmsEvaluationRoundId'
this.selectedItems.count = 0
this.dataLoading = false this.dataLoading = false
this.isDataListCheckedAll = false this.isDataListCheckedAll = false
this.dataListCheckAll() // this.dataListCheckAll()
this.searchChange(); // this.searchChange();
this.cdr.detectChanges(); this.cdr.detectChanges();
}, },
error: err => { error: err => {
...@@ -124,84 +199,178 @@ export class ManagementCycleComponent { ...@@ -124,84 +199,178 @@ export class ManagementCycleComponent {
} }
}); });
} }
dataListCheckAll() { selectPmsMasfromEvaluationCycle(pmsMasfromEvaluation?: PmsMasfromEvaluationModel) {
const selectAll = this.isDataListCheckedAll; if (pmsMasfromEvaluation) {
this.pmsMasfromEvaluationCycleFilter().forEach(x => x.check = selectAll); this.pmsMasfromEvaluation.select = new MyPmsMasfromEvaluationModel(pmsMasfromEvaluation)
this.dataListCheck(); } else if (this.modalStatus == 'add') {
} this.pmsMasfromEvaluation.select = new MyPmsMasfromEvaluationModel()
} else if (this.modalStatus == 'edit') {
this.pmsMasfromEvaluation.select = new MyPmsMasfromEvaluationModel({ pmsEvaluationRoundId: this.pmsMasfromEvaluation.select.pmsEvaluationRoundId })
}
}
// dataListCheckAll() {
// const selectAll = this.isDataListCheckedAll;
// this.pmsMasfromEvaluationCycleFilter().forEach(x => x.check = selectAll);
// this.dataListCheck();
// }
dataListCheck() { // dataListCheck() {
const dataCheck = this.pmsMasfromEvaluationCycleFilter(); // const dataCheck = this.pmsMasfromEvaluationCycleFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false; // this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.pmsMasfromEvaluationlist.filter(x => x.check).length; // this.numDataListChecked = this.pmsMasfromEvaluationlist.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked) // this.isDataListChecked = Boolean(this.numDataListChecked)
} // }
searchChange() { // searchChange() {
this.currentPage = 1 // this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.pmsMasfromEvaluationCycleFilter().length / 10) }, (_, i) => i + 1); // this.page = Array.from({ length: Math.ceil(this.pmsMasfromEvaluationCycleFilter().length / 10) }, (_, i) => i + 1);
this.dataListCheck() // this.dataListCheck()
} // }
pmsMasfromEvaluationCycleFilter() {
return this.pmsMasfromEvaluationlist.filter(x => { // pmsMasfromEvaluationCycleFilter() {
const data = x.data // return this.pmsMasfromEvaluation.loading.filter(x => {
const match = data.pmsEvaluationRoundId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase()); // const data = x.data
return match; // const match = data.pmsEvaluationRoundId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
}); // return match;
} // });
// }
setData(data?: PmsMasfromEvaluationModel) { setData(data?: PmsMasfromEvaluationModel) {
this.pmsMasfromEvaluation = new MyPmsMasfromEvaluationModel(data) this.pmsMasfromEvaluation.select = new MyPmsMasfromEvaluationModel(data)
} }
addPmsMasfromEvaluation() { addPmsMasfromEvaluation() {
if (this.pmsMasfromEvaluation.personalLevel.length == 0) { Swal.fire({
this.plListFilter().forEach(x => this.selectPl(x)) icon: 'question',
} title: 'แจ้งเตือน',
const body = new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation) text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
this.dataLoading = true showCancelButton: true,
this.pmsMasfromEvaluationCycleService.post(body).subscribe({ confirmButtonText: 'บันทึกข้อมูล',
next: response => { cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
if (this.pmsMasfromEvaluation.select.personalLevel.length === 0) {
this.plListFilter().forEach(x => this.selectPl(x));
}
const body = new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation.select);
this.dataLoading = true;
this.pmsMasfromEvaluationCycleService.post(body).subscribe({
next: response => {
if (response.success) { if (response.success) {
this.showAlert(response.message, 'success') this.showAlert(response.message, 'success');
this.getPmsMasfromEvaluationCycleList() this.getPmsMasfromEvaluationCycleList();
this.closeDialog();
} else { } else {
this.dataLoading = false this.showAlert(response.message, 'error');
this.showAlert(response.message, 'error') this.dataLoading = false;
this.cdr.detectChanges() this.cdr.detectChanges();
} }
}, error: error => { },
this.showAlert(error.message, 'error') error: error => {
this.dataLoading = false this.showAlert(error.message, 'error');
this.cdr.detectChanges() this.dataLoading = false;
} this.cdr.detectChanges();
}) }
} });
}
deletePmsMasfromEvaluation() { });
let body: PmsMasfromEvaluationModel[] = [] }
if (this.pmsMasfromEvaluation.pmsEvaluationRoundId) { deletePmsMasfromEvaluation() {
body = [new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation)] if (!this.numSelectItem()) {
} else { this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error');
body = this.pmsMasfromEvaluationlist.filter(x => x.check).map(x => new MyPmsMasfromEvaluationModel(x.data)) return;
} }
this.dataLoading = true
this.pmsMasfromEvaluationCycleService.delete(body).subscribe({ Swal.fire({
next: response => { icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการลบข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'ลบข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
this.dataLoading = true;
let body: PmsMasfromEvaluationModel[] = [];
if (this.pmsMasfromEvaluation.select.pmsEvaluationRoundId) {
body = [new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation.select)];
} else {
const selectedKeys = Array.from(this.selectedItems.data.keys());
body = this.pmsMasfromEvaluation.dataList
.filter(x => selectedKeys.includes(x.pmsEvaluationRoundId) && this.selectedItems.data.get(x.pmsEvaluationRoundId))
.map(x => new MyPmsMasfromEvaluationModel(x));
}
this.pmsMasfromEvaluationCycleService.delete(body).subscribe({
next: response => {
if (response.success) { if (response.success) {
this.showAlert(response.message, 'success') this.showAlert(response.message, 'success');
this.getPmsMasfromEvaluationCycleList() this.getPmsMasfromEvaluationCycleList();
this.closeDialog();
} else { } else {
this.dataLoading = false this.showAlert(response.message, 'error');
this.showAlert(response.message, 'error') this.dataLoading = false;
this.dataLoading = false this.cdr.detectChanges();
this.cdr.detectChanges()
} }
}, error: error => { },
this.showAlert(error.message, 'error') error: error => {
this.dataLoading = false this.showAlert(error.message, 'error');
this.cdr.detectChanges() this.dataLoading = false;
} this.cdr.detectChanges();
}) }
} });
}
});
}
// addPmsMasfromEvaluation() {
// if (this.pmsMasfromEvaluation.personalLevel.length == 0) {
// this.plListFilter().forEach(x => this.selectPl(x))
// }
// const body = new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation)
// this.dataLoading = true
// this.pmsMasfromEvaluationCycleService.post(body).subscribe({
// next: response => {
// if (response.success) {
// this.showAlert(response.message, 'success')
// this.getPmsMasfromEvaluationCycleList()
// } else {
// this.dataLoading = false
// this.showAlert(response.message, 'error')
// this.cdr.detectChanges()
// }
// }, error: error => {
// this.showAlert(error.message, 'error')
// this.dataLoading = false
// this.cdr.detectChanges()
// }
// })
// }
// deletePmsMasfromEvaluation() {
// let body: PmsMasfromEvaluationModel[] = []
// if (this.pmsMasfromEvaluation.pmsEvaluationRoundId) {
// body = [new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation)]
// } else {
// body = this.pmsMasfromEvaluationlist.filter(x => x.check).map(x => new MyPmsMasfromEvaluationModel(x.data))
// }
// this.dataLoading = true
// this.pmsMasfromEvaluationCycleService.delete(body).subscribe({
// next: response => {
// if (response.success) {
// this.showAlert(response.message, 'success')
// this.getPmsMasfromEvaluationCycleList()
// } else {
// this.dataLoading = false
// this.showAlert(response.message, 'error')
// this.dataLoading = false
// this.cdr.detectChanges()
// }
// }, error: error => {
// this.showAlert(error.message, 'error')
// this.dataLoading = false
// this.cdr.detectChanges()
// }
// })
// }
showAlert(text: string, type: 'success' | 'error') { showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
...@@ -213,7 +382,7 @@ export class ManagementCycleComponent { ...@@ -213,7 +382,7 @@ export class ManagementCycleComponent {
if (this.modalStatus == 'add') { if (this.modalStatus == 'add') {
this.setData() this.setData()
} else if (this.modalStatus == 'edit') { } else if (this.modalStatus == 'edit') {
this.setData(new MyPmsMasfromEvaluationModel({ pmsEvaluationRoundId: this.pmsMasfromEvaluation.pmsEvaluationRoundId })) this.setData(new MyPmsMasfromEvaluationModel({ pmsEvaluationRoundId: this.pmsMasfromEvaluation.select.pmsEvaluationRoundId }))
} }
} }
...@@ -235,7 +404,7 @@ export class ManagementCycleComponent { ...@@ -235,7 +404,7 @@ export class ManagementCycleComponent {
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1); this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
} }
createForm() { createForm() {
const body = new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation) const body = new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation.select)
body.active = 1 body.active = 1
this.dataLoading = true this.dataLoading = true
this.pmsMasfromEvaluationCycleService.post(body).subscribe({ this.pmsMasfromEvaluationCycleService.post(body).subscribe({
...@@ -272,8 +441,37 @@ export class ManagementCycleComponent { ...@@ -272,8 +441,37 @@ export class ManagementCycleComponent {
} }
checkPrimary() { checkPrimary() {
return this.pmsMasfromEvaluationlist.find(x => x.data.pmsEvaluationRoundId == this.pmsMasfromEvaluation.pmsEvaluationRoundId) return this.pmsMasfromEvaluation.dataList.find(x => x.pmsEvaluationRoundId == this.pmsMasfromEvaluation.select.pmsEvaluationRoundId)
} }
openDialog() {
this.dialogRef = this.dialog.open(this.managementEvaluationCycleModal, {
width: '500px',
disableClose: false,
});
}
openPLDialog() {
this.dialogRefPL = this.dialog.open(this.PLModal, {
width: '800px',
})
}
closeDialog() {
this.dialogRef.close()
}
closePLDialog() {
this.dialogRefPL.close()
}
onSelectItemChange(arg: any) {
this.selectedItems = arg
console.log(this.selectedItems)
}
numSelectItem() {
const selectedKeys = Array.from(this.selectedItems.data.keys());
const num = this.pmsMasfromEvaluation.dataList.filter(x => selectedKeys.includes(x.pmsEvaluationRoundId) && this.selectedItems.data.get(x.pmsEvaluationRoundId)).length
return num
}
} }
src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-topics/assessment-topics.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center"> <!-- <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex"> <div class="flex">
<div class="flex items-center"> <div class="flex items-center">
...@@ -39,30 +39,63 @@ ...@@ -39,30 +39,63 @@
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
data-hs-overlay="#assessment-topics-modal" (click)="modalStatus='add';selectPmstopic()"> (click)="modalStatus='add';selectPmstype();selectPmstopic();openDialog();">
<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-10 m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
data-hs-overlay="#assessment-topics-alert-modal" (click)="modalStatus='deleteGroup';selectPmstopic()"> (click)="modalStatus='delete';selectPmstopic()" >
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
</div>
</div>
</div> -->
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button"
class=" h-45px ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#department-list-upload-modal"
(click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="modalStatus='add';selectPmstype();selectPmstopic();openDialog();">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
(click)="modalStatus='delete';selectPmstopic();deletepmsTopics()" >
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div> </div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div>
</div> </div>
</div> </div>
<div class="page px-rem"> <!-- <div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
...@@ -109,9 +142,6 @@ ...@@ -109,9 +142,6 @@
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';selectPmstopic(item.data)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';selectPmstopic(item.data)"
data-hs-overlay="#assessment-topics-modal"></i> data-hs-overlay="#assessment-topics-modal"></i>
<!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
(click)="modalStatus='delete';selectPmstopic(item.data)"
data-hs-overlay="#assessment-topics-alert-modal"></i> -->
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -154,61 +184,38 @@ ...@@ -154,61 +184,38 @@
:(currentPage * 10) ) }} of {{pmstopicListFilter().length}} items</span> :(currentPage * 10) ) }} of {{pmstopicListFilter().length}} items</span>
</ul> </ul>
</nav> </nav>
</div> -->
<div class="page px-rem">
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="pmstopic.dataList"
[columns]="columns" [selectedItems]="selectedItems"
(sendSelectData)="modalStatus='edit';selectPmstopic($event);openDialog()" (sendSelectedItems)="onSelectItemChange($event)">
</app-datagrid-syncfution>
</div> </div>
<div id="assessment-topics-modal" class="hs-overlay hidden ti-modal"> <ng-template #assessmentTopicsModal let-modal>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> <h3 mat-dialog-title>
<div class="max-h-full overflow-hidden ti-modal-content"> {{modalStatus=='add'?'เพิ่มหัวข้อการประเมิน':'เเก้ไขหัวข้อการประเมิน'}}
<div class="ti-modal-header"> </h3>
<h3 class="text-xxl font-bold text-primary"> <div class="w-full flex justify-end mb-1rem">
{{modalStatus=='add'?'เพิ่มหัวข้อการประเมิน':'แก้ไขหัวข้อการประเมิน'}} <div class="absolute flex">
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-topics-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="w-full flex justify-end">
<div class="absolute flex">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="selectPmstype();selectPmstopic()">
(click)="clearPmstopic(modalStatus)"> <i class="ti ti-eraser text-base"></i>
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" Clear
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84" </button>
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>
<!-- <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>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0"> </div>
<label class="ti-form-label mt-2rem">รหัส<span class="text-danger">*<ng-container <mat-dialog-content>
*ngIf="modalStatus=='add'&&checkPrimary()"> <label class="ti-form-label mt-2rem">รหัส<span class="text-danger">*<ng-container
รหัสซ้ำ *ngIf="modalStatus=='add'&&checkPrimary()">
</ng-container></span></label> รหัสซ้ำ
<input type="text" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" </ng-container></span></label>
[readonly]="modalStatus=='edit'" [(ngModel)]="pmstopic.select.pmsTopicId"> <input type="text" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}"
<label class="ti-form-label mt-2rem">ประเภทการประเมินผล<span class="text-danger">*</span></label> [readonly]="modalStatus=='edit'" [(ngModel)]="pmstopic.select.pmsTopicId">
<label class="ti-form-label mt-2rem">ประเภทการประเมินผล<span class="text-danger">*</span></label>
<div class="flex"> <div class="flex">
<div class="relative flex rounded-md"> <div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly <input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
...@@ -218,141 +225,128 @@ ...@@ -218,141 +225,128 @@
<i class="ti ti-circle-x cursor-pointer"></i> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#assessment-topic-pmstype-table-modal"> (click)="openpmsTypeDialog()">
<i class="ri-search-line cursor-pointer text-gray"></i> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ<span class="text-danger">*</span></label> <label class="ti-form-label mt-2rem">ชื่อหัวข้อ<span class="text-danger">*</span></label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.tdesc"> <input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.tdesc">
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label> <label class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.edesc"> <input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.edesc">
<label class="ti-form-label mt-2rem">ตัวชี้วัดผลงานหลัก</label> <label class="ti-form-label mt-2rem">ตัวชี้วัดผลงานหลัก</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.indicatorsDetail"> <input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.indicatorsDetail">
<label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label> <label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.performanceGoalsDetail"> <input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.performanceGoalsDetail">
<label class="ti-form-label mt-2rem">หน่วยนับ</label> <label class="ti-form-label mt-2rem">หน่วยนับ</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.detailUnit"> <input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.detailUnit">
<label class="ti-form-label mt-2rem">กำหนดเวลาแล้วเสร็จ</label> <label class="ti-form-label mt-2rem">กำหนดเวลาแล้วเสร็จ</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.completionDate"> <input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.completionDate">
<!-- <mat-form-field> <label class="ti-form-label mt-2rem">น้ำหนัก</label>
<input matInput [matDatepicker]="firstHireDate" type="text" class="ti-form-input" <input type="text" class="ti-form-input"
[(ngModel)]="pmstopic.completionDateIso" oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
(ngModelChange)="changeDate(this.pmstopic.select, 'completionDate', pmstopic.completionDateIso);"> onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
<mat-datepicker-toggle matSuffix [for]="firstHireDate"></mat-datepicker-toggle> [(ngModel)]="pmstopic.select.weight">
<mat-datepicker #firstHireDate></mat-datepicker> <label class="ti-form-label mt-2rem">ค่าเป้าหมาย</label>
</mat-form-field> --> <div class="grid grid-cols-12 gap-x-2 mt-2rem">
<label class="ti-form-label mt-2rem">น้ำหนัก</label> <label class="ti-form-label col-span-3 align-center m-0">A (5 คะแนน)</label>
<input type="text" class="ti-form-input" <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetAdetail">
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmstopic.select.weight">
<label class="ti-form-label mt-2rem">ค่าเป้าหมาย</label>
<div class="grid grid-cols-12 gap-x-2 mt-2rem">
<label class="ti-form-label col-span-3 align-center m-0">A (5 คะแนน)</label>
<input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetAdetail">
</div>
<div class="grid grid-cols-12 gap-x-2 mt-2rem">
<label class="ti-form-label col-span-3 align-center m-0">B (4 คะแนน)</label>
<input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetBdetail">
</div>
<div class="grid grid-cols-12 gap-x-2 mt-2rem">
<label class="ti-form-label col-span-3 align-center m-0">C (3 คะแนน)</label>
<input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetCdetail">
</div>
<div class="grid grid-cols-12 gap-x-2 mt-2rem">
<label class="ti-form-label col-span-3 align-center m-0">D (2 คะแนน)</label>
<input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetDdetail">
</div>
<div class="grid grid-cols-12 gap-x-2 mt-2rem">
<label class="ti-form-label col-span-3 align-center m-0">E (1 คะแนน)</label>
<input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetEdetail">
</div>
<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="#assessment-topics-modal">
ย้อนกลับ
</button>
<button type="button" class="ti-btn ti-btn-success" data-hs-overlay="#assessment-topics-alert-modal"
[class.ti-btn-disabled]="!pmstopic.select.pmsTopicId||!pmstopic.select.pmsType.pmsTypeId||!pmstopic.select.tdesc||(modalStatus=='add'&&checkPrimary())"
[disabled]="!pmstopic.select.pmsTopicId||!pmstopic.select.pmsType.pmsTypeId||!pmstopic.select.tdesc||(modalStatus=='add'&&checkPrimary())">
บันทึกข้อมูล
</button>
</div>
</div> </div>
</div> <div class="grid grid-cols-12 gap-x-2 mt-2rem">
</div> <label class="ti-form-label col-span-3 align-center m-0">B (4 คะแนน)</label>
</div> <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetBdetail">
<div id="assessment-topics-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">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-topics-modal">
<span class="sr-only">Close</span>
<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="#assessment-topics-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
</div>
</div> </div>
<div class="ti-modal-body "> <div class="grid grid-cols-12 gap-x-2 mt-2rem">
<p class="mt-1 text-gray-800 dark:text-white/70"> <label class="ti-form-label col-span-3 align-center m-0">C (3 คะแนน)</label>
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetCdetail">
ยืนยันการบันทึกข้อมูลหรือไม่ </div>
</ng-container> <div class="grid grid-cols-12 gap-x-2 mt-2rem">
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'"> <label class="ti-form-label col-span-3 align-center m-0">D (2 คะแนน)</label>
<ng-container *ngIf="numDataListChecked"> <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetDdetail">
ยืนยันการลบข้อมูลหรือไม่ </div>
</ng-container> <div class="grid grid-cols-12 gap-x-2 mt-2rem">
<ng-container *ngIf="!numDataListChecked"> <label class="ti-form-label col-span-3 align-center m-0">E (1 คะแนน)</label>
เลือกข้อมูลที่ต้องการลบ <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmstopic.select.targetEdetail">
</ng-container> </div>
</ng-container> </mat-dialog-content>
</p> <mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
<button type="button" class="ti-btn ti-btn-success" mat-button [class.ti-btn-disabled]="!pmstopic.select.pmsTopicId||!pmstopic.select.tdesc||(modalStatus=='add'&&checkPrimary())" (click)="addpmsTopics()"
[disabled]="!pmstopic.select.pmsTopicId||!pmstopic.select.tdesc||(modalStatus=='add'&&checkPrimary())">
บันทึกข้อมูล
</button>
</mat-dialog-actions>
</ng-template>
<div class="flex justify-end mt-2rem mb-1rem"> <ng-template #assessmentTopoicsTypeModal let-modal>
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <h3 mat-dialog-title>
<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" </h3>
data-hs-overlay="#assessment-topics-modal"> <mat-dialog-content>
ย้อนกลับ <div class="flex justify-end pb-1rem">
</button> <div class="px-1">
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#assessment-topics-alert-modal" <div class="relative shadow-md">
(click)="updatePmstopic('post')"> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
บันทึกข้อมูล class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
</a> placeholder="Search by No. or Name" [(ngModel)]="pmstypemodal.search" (ngModelChange)="modalSearchChange(pmstypeListFilter())">
</ng-container> <div
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<button type="button" <i class="ri-search-line text-gray"></i>
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" </div>
data-hs-overlay="#assessment-topics-alert-modal"> </div>
ย้อนกลับ </div>
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);" data-hs-overlay="#assessment-topics-alert-modal"
*ngIf="numDataListChecked" (click)="updatePmstopic('delete')">
ลบข้อมูล
</a>
</ng-container>
</div>
</div> </div>
</div> <div class="overflow-auto border">
</div> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
</div> <thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัส','ชื่อหัวข้อ','ชื่อประเภท']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f">
<span class="text-sm">{{ 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>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!pmstypeListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="pmstypeListFilter().length">
<tr *ngFor="let item of pmstypeListFilter() | slice:((pmstypemodal.currentPage-1) * pmstypemodal.pageSize) : (((pmstypemodal.currentPage-1) * pmstypemodal.pageSize) + pmstypemodal.pageSize);let i = index"
class="cursor-pointer" (click)="selectPmstype(item.data);closepmsTypeDialog()" >
<td class="flex justify-center">
{{((pmstypemodal.currentPage-1) * pmstypemodal.pageSize)+(i+1)}}
</td>
<td>{{item.data.pmsTypeId}}</td>
<td>{{item.data.tdesc}}</td>
<td>{{item.data.shortName}}</td>
</tr>
</tbody>
</table>
</div>
<app-pagination [totalItems]="pmstypeListFilter().length" [pageSize]="pmstypemodal.pageSize"
(pageChange)="pmstypemodal.currentPage = $event"
(pageSizeChange)="pmstypemodal.pageSize = $event;pmstypemodal.currentPage = 1"></app-pagination>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
</mat-dialog-actions>
</ng-template>
<div id="assessment-topics-upload-modal" class="hs-overlay hidden ti-modal"> <div id="assessment-topics-upload-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
...@@ -393,7 +387,7 @@ ...@@ -393,7 +387,7 @@
<div id="assessment-topic-pmstype-table-modal" class="hs-overlay hidden ti-modal"> <!-- <div id="assessment-topic-pmstype-table-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<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">
...@@ -491,7 +485,7 @@ ...@@ -491,7 +485,7 @@
<span>Show {{((modal.currentPage-1) * 10)+1}} to {{pmstypeListFilter().length<10 <span>Show {{((modal.currentPage-1) * 10)+1}} to {{pmstypeListFilter().length<10
?pmstypeListFilter().length: (modal.currentPage==modal.page.length ? ((modal.currentPage * 10) - ?pmstypeListFilter().length: (modal.currentPage==modal.page.length ? ((modal.currentPage * 10) -
((modal.currentPage * 10) - pmstypeListFilter().length) ) :(modal.currentPage * 10) ) }} of ((modal.currentPage * 10) - pmstypeListFilter().length) ) :(modal.currentPage * 10) ) }} of
{{pmstypeListFilter().length}} items</span> {{pmstypeListFilter().length}} items </span>
</ul> </ul>
</nav> </nav>
<div class="flex justify-end mt-2rem mb-1rem space-x-4"> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
...@@ -504,4 +498,4 @@ ...@@ -504,4 +498,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
\ No newline at end of file \ No newline at end of file
src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-topics/assessment-topics.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { PmstopicModel, MyPmstopicModel } from 'src/app/shared/model/pmstopic.model'; import { PmstopicModel, MyPmstopicModel } from 'src/app/shared/model/pmstopic.model';
import { MyPmstypeModel, PmstypeModel } from 'src/app/shared/model/pmstype.model'; import { MyPmstypeModel, PmstypeModel } from 'src/app/shared/model/pmstype.model';
import { FileService } from 'src/app/shared/services/file.service'; import { FileService } from 'src/app/shared/services/file.service';
import { PmstopicService } from 'src/app/shared/services/pmstopic.service'; import { PmstopicService } from 'src/app/shared/services/pmstopic.service';
import { PmstypeService } from 'src/app/shared/services/pmstype.service'; import { PmstypeService } from 'src/app/shared/services/pmstype.service';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { MatDialog } from '@angular/material/dialog';
import Swal from 'sweetalert2';
interface table { interface table {
currentPage: number, currentPage: number,
page: number[], page: number[],
search: string search: string
pageSize: number
} }
@Component({ @Component({
selector: 'app-assessment-topics', selector: 'app-assessment-topics',
...@@ -18,23 +23,62 @@ interface table { ...@@ -18,23 +23,62 @@ interface table {
export class AssessmentTopicsComponent { export class AssessmentTopicsComponent {
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
numDataListChecked = 0 numDataListChecked = 0
isDataListChecked = false isDataListChecked = false
isDataListCheckedAll = false isDataListCheckedAll = false
pmstopic: { loading: boolean, select: PmstopicModel, completionDateIso: string, dataList: { check: boolean, data: PmstopicModel }[] } = { loading: false, select: new MyPmstopicModel(), completionDateIso: "", dataList: [] } pmstopic: { loading: boolean, select: PmstopicModel, completionDateIso: string, dataList: PmstopicModel [] } = { loading: false, select: new MyPmstopicModel(), completionDateIso: "", dataList: [] }
pmstype: { loading: boolean, select: PmstypeModel, dataList: { check: boolean, data: PmstypeModel }[] } = { loading: false, select: new MyPmstypeModel(), dataList: [] } pmstype: { loading: boolean, select: PmstypeModel, dataList: { check: boolean, data: PmstypeModel }[] } = { loading: false, select: new MyPmstypeModel(), dataList: [] }
modal: table = { modal: table = {
currentPage: 1, currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1), page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "" search: "",
pageSize: 10
}
pmstypemodal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "",
pageSize: 10
} }
modalStatus: "add" | "edit" | 'delete' | 'deleteGroup' = "add"
modalStatus: "add" | "edit" | 'delete' = "add"
selectedFile: File | null = null; selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์'; selectedFileName: string = 'กรุณาเลือกไฟล์';
columns: ColumnModel[] = [{
field: "pmsTopicId",
headerText: "รหัส",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "ชื่อหัวข้อ",
type: "string"
},
{
field: "pmsType.tdesc",
headerText: "ชื่อประเภท",
type: "string"
}]
searchSettings = {
fields: ['pmsTopicId', 'tdesc', 'pmsType.tdesc'],
operator: 'contains',
ignoreCase: false
};
search = ''
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
@ViewChild("assessmentTopicsModal") assessmentTopicsModal: any;
@ViewChild("assessmentTopoicsTypeModal") assessmentTopoicsTypeModal: any;
dialogRef: any
dialogRefpmsType: any
constructor(private cdr: ChangeDetectorRef, constructor(private cdr: ChangeDetectorRef,
private pmstopicService: PmstopicService, private pmstopicService: PmstopicService,
private dialog: MatDialog,
private toastr: ToastrService, private toastr: ToastrService,
private fileService: FileService, private fileService: FileService,
private pmstypeService: PmstypeService private pmstypeService: PmstypeService
...@@ -49,11 +93,10 @@ export class AssessmentTopicsComponent { ...@@ -49,11 +93,10 @@ export class AssessmentTopicsComponent {
this.pmstype.loading = true this.pmstype.loading = true
this.pmstypeService.getList().subscribe({ this.pmstypeService.getList().subscribe({
next: response => { next: response => {
this.pmstype.dataList = response.map(x => ({ check: false, data: new MyPmstypeModel(x) })) this.pmstype.dataList = response.map(x => ({
this.isDataListCheckedAll = false check: false,
this.dataListCheckAll() data: new MyPmstypeModel(x) }))
this.pmstype.loading = false this.pmstype.loading = false
this.searchChange()
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.pmstype.loading = false this.pmstype.loading = false
...@@ -65,9 +108,9 @@ export class AssessmentTopicsComponent { ...@@ -65,9 +108,9 @@ export class AssessmentTopicsComponent {
return this.pmstype.dataList.filter(x => { return this.pmstype.dataList.filter(x => {
const data = x.data const data = x.data
if (x.data.pmsTypeId != '06' && x.data.pmsTypeId != '07') { if (x.data.pmsTypeId != '06' && x.data.pmsTypeId != '07') {
const match = data.pmsTypeId.toLowerCase().includes(this.modal.search.toLowerCase()) || const match = data.pmsTypeId.toLowerCase().includes(this.pmstypemodal.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.pmstypemodal.search.toLowerCase()) ||
data.shortName.toLowerCase().includes(this.modal.search.toLowerCase()) data.shortName.toLowerCase().includes(this.pmstypemodal.search.toLowerCase())
return match return match
} }
return return
...@@ -76,16 +119,19 @@ export class AssessmentTopicsComponent { ...@@ -76,16 +119,19 @@ export class AssessmentTopicsComponent {
selectPmstype(data?: PmstypeModel) { selectPmstype(data?: PmstypeModel) {
this.pmstopic.select.pmsType = new MyPmstypeModel(data) this.pmstopic.select.pmsType = new MyPmstypeModel(data)
} }
getPmstopicList() { getPmstopicList() {
this.pmstopic.loading = true this.pmstopic.loading = true
this.selectedItems.data.clear()
this.pmstopicService.getList().subscribe({ this.pmstopicService.getList().subscribe({
next: response => { next: response => {
this.pmstopic.dataList = response.map(x => ({ check: false, data: new MyPmstopicModel(x) })) this.pmstopic.dataList = response.map(x => {
this.isDataListCheckedAll = false this.selectedItems.data.set(x.pmsTopicId, false)
this.dataListCheckAll() return new MyPmstopicModel(x)
})
this.selectedItems.key = 'pmsTopicId'
this.selectedItems.count = 0
this.pmstopic.loading = false this.pmstopic.loading = false
this.searchChange()
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.pmstopic.loading = false this.pmstopic.loading = false
...@@ -93,53 +139,84 @@ export class AssessmentTopicsComponent { ...@@ -93,53 +139,84 @@ export class AssessmentTopicsComponent {
} }
}) })
} }
pmstopicListFilter() {
return this.pmstopic.dataList.filter(x => { selectPmstopic(pmstopic?: PmstopicModel) {
const data = x.data if (pmstopic) {
const match = data.pmsTopicId.toLowerCase().includes(this.search.toLowerCase()) || this.pmstopic.select = new MyPmstopicModel(pmstopic)
data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || } else if (this.modalStatus == 'add') {
data.pmsType.tdesc.toLowerCase().includes(this.search.toLowerCase()) this.pmstopic.select = new MyPmstopicModel()
return match } else if (this.modalStatus == 'edit') {
}) this.pmstopic.select = new MyPmstopicModel({ pmsTopicId: this.pmstopic.select.pmsTopicId })
}
selectPmstopic(data?: PmstopicModel) {
this.pmstopic.select = new MyPmstopicModel(data)
this.pmstopic.completionDateIso = this.toISODate(new MyPmstopicModel(data).completionDate)
}
updatePmstopic(typeApi: 'post' | 'delete') {
let body: PmstopicModel | PmstopicModel[]
switch (this.modalStatus) {
case ('delete'): {
body = [new MyPmstopicModel(this.pmstopic.select)]
break;
}
case ('deleteGroup'): {
body = this.pmstopic.dataList.filter(x => x.check).map(x => new MyPmstopicModel(x.data))
break;
}
default: {
body = new MyPmstopicModel(this.pmstopic.select)
} }
} }
this.pmstopic.loading = true
this.pmstopicService[typeApi]((body as any)).subscribe({
next: response => { addpmsTopics() {
if (response.success) { Swal.fire({
this.showAlert(response.message, 'success') icon: 'question',
this.getPmstopicList() title: 'แจ้งเตือน',
this.searchChange() text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
} else { showCancelButton: true,
this.showAlert(response.message, 'error') confirmButtonText: 'บันทึกข้อมูล',
this.pmstopic.loading = false cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
this.pmstopic.loading = true
this.pmstopicService.post(this.pmstopic.select).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmstopicList()
this.closeDialog()
} else {
this.showAlert(response.message, 'error')
this.pmstopic.loading = false
}
}, error: error => {
this.showAlert(error.message, 'error')
this.pmstopic.loading = false
}
})
} }
this.cdr.detectChanges() })
}, error: error => { }
this.showAlert(error.message, 'error') deletepmsTopics() {
this.pmstopic.loading = false if (!this.numSelectItem()) {
this.cdr.detectChanges() this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error')
return
} }
}) Swal.fire({
} icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการลบข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'ลบข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
this.pmstopic.loading = true
const selectedKeys = Array.from(this.selectedItems.data.keys());
const body = this.pmstopic.dataList.filter(x => selectedKeys.includes(x.pmsTopicId) && this.selectedItems.data.get(x.pmsTopicId)).map(x => new MyPmstopicModel(x))
this.pmstopicService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmstopicList()
this.closeDialog()
} else {
this.showAlert(response.message, 'error')
this.pmstopic.loading = false
}
}, error: error => {
this.showAlert(error.message, 'error')
this.pmstopic.loading = false
}
})
}
});
}
showAlert(text: string, type: 'success' | 'error') { showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
...@@ -200,23 +277,6 @@ export class AssessmentTopicsComponent { ...@@ -200,23 +277,6 @@ export class AssessmentTopicsComponent {
} }
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.pmstopic.dataList.filter(x => {
const data = x.data
const match = data.pmsTopicId.toLowerCase().includes(this.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.search.toLowerCase())
return match
}).forEach(x => x.check = selectAll);
this.dataListCheck();
}
dataListCheck() {
const dataCheck = this.pmstopicListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.pmstopic.dataList.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked)
}
clearPmstopic(modalStatus: string) { clearPmstopic(modalStatus: string) {
if (modalStatus == 'add') { if (modalStatus == 'add') {
this.selectPmstopic() this.selectPmstopic()
...@@ -224,16 +284,16 @@ export class AssessmentTopicsComponent { ...@@ -224,16 +284,16 @@ export class AssessmentTopicsComponent {
this.selectPmstopic(new MyPmstopicModel({ pmsTopicId: this.pmstopic.select.pmsTopicId })) this.selectPmstopic(new MyPmstopicModel({ pmsTopicId: this.pmstopic.select.pmsTopicId }))
} }
} }
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.pmstopicListFilter().length / 10) }, (_, i) => i + 1);
this.dataListCheck()
}
modalSearchChange(dataList: any) { modalSearchChange(dataList: any) {
this.modal.currentPage = 1 this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1); this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
} }
onpmsTypeModalSearchChange() {
this.pmstypemodal.currentPage = 1
this.pmstypemodal.page = Array.from({ length: Math.ceil(this.pmstypeListFilter().length / 10) }, (_, i) => i + 1);
}
changeDate(target: { [key: string]: any }, field: string, dateIso: string) { changeDate(target: { [key: string]: any }, field: string, dateIso: string) {
target[field] = this.toYYYYMMDD(dateIso) target[field] = this.toYYYYMMDD(dateIso)
} }
...@@ -256,7 +316,37 @@ export class AssessmentTopicsComponent { ...@@ -256,7 +316,37 @@ export class AssessmentTopicsComponent {
} }
checkPrimary() { checkPrimary() {
return this.pmstopic.dataList.find(x => x.data.pmsTopicId == this.pmstopic.select.pmsTopicId) return this.pmstopic.dataList.find(x => x.pmsTopicId == this.pmstopic.select.pmsTopicId)
}
openDialog() {
this.dialogRef = this.dialog.open(this.assessmentTopicsModal, {
width: '500px',
disableClose: false,
});
}
openpmsTypeDialog() {
this.dialogRefpmsType = this.dialog.open(this.assessmentTopoicsTypeModal, {
width: '800px',
})
}
closeDialog() {
this.dialogRef.close()
}
closepmsTypeDialog() {
this.dialogRefpmsType.close()
} }
}
onSelectItemChange(arg: any) {
this.selectedItems = arg
console.log(this.selectedItems)
}
numSelectItem() {
const selectedKeys = Array.from(this.selectedItems.data.keys());
const num = this.pmstopic.dataList.filter(x => selectedKeys.includes(x.pmsTopicId) && this.selectedItems.data.get(x.pmsTopicId)).length
return num
}
}
\ No newline at end of file
src/app/components/performance-management-evaluation/pms-grade-registration/pms-grade-management/pms-grade-management.component.html
<ng-container *ngIf="!typeTab"> <ng-container *ngIf="!typeTab">
<div class="w-full min-height-50px mb-10px justify-between items-center"> <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-end">
<div class="flex"> <div class="px-1">
<div class="flex items-center"> <div class="relative shadow-md">
<input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
[(ngModel)]="isDataListChecked"> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
<label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none"> style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
{{numDataListChecked}} Selected</label> <div
</div> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<div class="mx-1 flex items-center"> <i class="ri-search-line text-gray"></i>
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()" id="checkbox"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200"
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button>
<label class="text-sm text-gray-500 ml-2" for="checkbox">Select All</label>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div> </div>
</div> </div>
<div class="px-1"> </div>
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md" <div class="px-1">
(click)="selectData();pathTitleChange('add')"> <button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
<i class="ri-add-line"></i> (click)="selectData();pathTitleChange('add')">
Add <i class="ri-add-line"></i>
</button> Add
</div> </button>
<div class="px-1"> </div>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md" <div class="px-1">
data-hs-overlay="#grade-management-alert-delete-modal" (click)="selectData()"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
<i class="ri-delete-bin-6-line"></i> data-hs-overlay="#grade-management-alert-delete-modal" (click)="selectData()">
Delete <i class="ri-delete-bin-6-line"></i>
</button> Delete
</div> </button>
</div>
<!-- <div class="px-1"> <!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i> <i class="ti ti-book fs-l"></i>
Help Help
</button> </button>
</div> --> </div> -->
</div>
</div> </div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="dataList"
[columns]="columns" [selectedItems]="selectedItems"
(sendSelectData)="typeTab='edit';selectData($event)" (sendSelectedItems)="onSelectItemChange($event)">
</app-datagrid-syncfution>
</div>
<!-- <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-top-0.65rem"> <div class="overflow-auto table-bordered rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px"> <thead class="height-50px">
...@@ -91,8 +79,6 @@ ...@@ -91,8 +79,6 @@
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectData(item);pathTitleChange('edit')"></i> (click)="selectData(item);pathTitleChange('edit')"></i>
<!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#grade-management-alert-delete-modal" (click)="selectData(item)"></i> -->
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -130,7 +116,7 @@ ...@@ -130,7 +116,7 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div> -->
<div id="grade-management-alert-delete-modal" class="hs-overlay hidden ti-modal"> <div id="grade-management-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">
......
src/app/components/performance-management-evaluation/pms-grade-registration/pms-grade-management/pms-grade-management.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { CompetencyGradeModel } from 'src/app/shared/model/competency-grades.model'; import { CompetencyGradeModel } from 'src/app/shared/model/competency-grades.model';
import { MyPmsGroupGradeModel } from 'src/app/shared/model/pms-group-grade.model'; import { MyPmsGroupGradeModel } from 'src/app/shared/model/pms-group-grade.model';
import { PmsGroupGradeService } from 'src/app/shared/services/pms-group-grade.service'; import { PmsGroupGradeService } from 'src/app/shared/services/pms-group-grade.service';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { MatDialog } from '@angular/material/dialog';
import Swal from 'sweetalert2';
export interface DataModel { export interface DataModel {
check: boolean; check: boolean;
...@@ -31,24 +34,92 @@ export class PmsGradeManagementComponent { ...@@ -31,24 +34,92 @@ export class PmsGradeManagementComponent {
dataLoading = false dataLoading = false
dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', pmsGrade: [] } dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', pmsGrade: [] }
columns: ColumnModel[] = [{
field: "code",
headerText: "รหัส",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "รายละเอียด (ไทย)",
type: "string"
},
{
field: "edesc",
headerText: "รายละเอียด (อังกฤษ)",
type: "string"
}]
searchSettings = {
fields: ['code','tdesc','edesc'],
operator: 'contains',
ignoreCase: false
};
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
@ViewChild("pmsGradeModal") pmsGradeModal: any;
dialogRef: any
constructor(private toastr: ToastrService, constructor(private toastr: ToastrService,
private pmsGroupGradeService: PmsGroupGradeService, private pmsGroupGradeService: PmsGroupGradeService,
private dialog: MatDialog,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef) {
this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนเกรด', 'การจัดการเกรด']) this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนเกรด', 'การจัดการเกรด'])
} }
ngOnInit(): void { ngOnInit(): void {
this.getPmsGroupGradeList() this.getPmsGroupGradeList()
} }
selectData(data?: DataModel) { // selectData(dataSelect?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { check: false, code: '', tdesc: '', edesc: '', pmsGrade: [] })) // if (dataSelect) {
// this.dataSelect = { ...dataSelect };
// } else if (this.typeTab === 'add') {
// this.dataSelect = {
// check: false,
// code: '',
// tdesc: '',
// edesc: '',
// pmsGrade: []
// };
// } else if (this.typeTab === 'edit') {
// this.dataSelect = {
// check: false,
// code: this.dataSelect.code,
// tdesc: '',
// edesc: '',
// pmsGrade: []
// };
// }
// }
selectData(dataSelect?: DataModel) {
if (dataSelect) {
this.dataSelect = JSON.parse(JSON.stringify(dataSelect));
} else if (this.typeTab === 'add') {
this.dataSelect = {
check: false,
code: '',
tdesc: '',
edesc: '',
pmsGrade: []
};
} else if (this.typeTab === 'edit') {
this.dataSelect = {
check: false,
code: this.dataSelect.code,
tdesc: '',
edesc: '',
pmsGrade: []
};
}
} }
getPmsGroupGradeList() { getPmsGroupGradeList() {
this.dataLoading = true this.dataLoading = true
this.selectedItems.data.clear()
this.pmsGroupGradeService.getList().subscribe({ this.pmsGroupGradeService.getList().subscribe({
next: response => { next: response => {
this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, pmsGrade: x.pmsGrade })) this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, pmsGrade: x.pmsGrade }))
this.isDataListCheckedAll = false this.isDataListCheckedAll = false
this.dataListCheckAll()
this.selectedItems.key = 'code'
this.selectedItems.count = 0
this.searchChange() this.searchChange()
this.dataLoading = false this.dataLoading = false
this.cdr.detectChanges() this.cdr.detectChanges()
...@@ -79,7 +150,6 @@ export class PmsGradeManagementComponent { ...@@ -79,7 +150,6 @@ export class PmsGradeManagementComponent {
this.currentPage = 1; this.currentPage = 1;
const filteredData = this.dataListFilter(); const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
this.dataListCheck()
} }
dataListFilter() { dataListFilter() {
...@@ -97,37 +167,95 @@ export class PmsGradeManagementComponent { ...@@ -97,37 +167,95 @@ export class PmsGradeManagementComponent {
} }
deletePmsGroupGradeList() { deletePmsGroupGradeList() {
const body = this.dataSelect.code ? new MyPmsGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc }) : if (!this.numSelectItem()) {
this.dataList.filter(x => x.check).map(x => new MyPmsGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc })) this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error')
this.dataLoading = true return
this.pmsGroupGradeService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmsGroupGradeList()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
} }
}, error: error => { Swal.fire({
this.showAlert(error.message, 'error') icon: 'question',
this.dataLoading = false title: 'แจ้งเตือน',
this.cdr.detectChanges() text: 'ยืนยันการลบข้อมูลหรือไม่',
} showCancelButton: true,
}) confirmButtonText: 'ลบข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
this.dataLoading = true
const selectedKeys = Array.from(this.selectedItems.data.keys());
const body = this.dataList.filter(x => selectedKeys.includes(x.code) && this.selectedItems.data.get(x.code)).map(x => new MyPmsGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc }))
this.pmsGroupGradeService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmsGroupGradeList()
this.closeDialog()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
}
})
}
});
}
// deletePmsGroupGradeList() {
// const body = this.dataSelect.code ? new MyPmsGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc }) :
// this.dataList.filter(x => x.check).map(x => new MyPmsGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc }))
// this.dataLoading = true
// this.pmsGroupGradeService.delete(body).subscribe({
// next: response => {
// if (response.success) {
// this.showAlert(response.message, 'success')
// this.getPmsGroupGradeList()
// } else {
// this.showAlert(response.message, 'error')
// this.dataLoading = false
// this.cdr.detectChanges()
// }
// }, error: error => {
// this.showAlert(error.message, 'error')
// this.dataLoading = false
// this.cdr.detectChanges()
// }
// })
// }
// dataListCheckAll() {
// const selectAll = this.isDataListCheckedAll;
// this.dataListFilter().forEach(x => x.check = selectAll);
// this.dataListCheck();
// }
// dataListCheck() {
// const dataCheck = this.dataListFilter();
// this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
// this.numDataListChecked = this.dataList.filter(x => x.check).length;
// this.isDataListChecked = Boolean(this.numDataListChecked)
// }
openDialog() {
this.dialogRef = this.dialog.open(this.pmsGradeModal, {
width: '500px',
disableClose: false,
});
}
closeDialog() {
this.dialogRef.close()
} }
dataListCheckAll() { onSelectItemChange(arg: any) {
const selectAll = this.isDataListCheckedAll; this.selectedItems = arg
this.dataListFilter().forEach(x => x.check = selectAll); console.log('selected',this.selectedItems)
this.dataListCheck();
} }
dataListCheck() { numSelectItem() {
const dataCheck = this.dataListFilter(); const selectedKeys = Array.from(this.selectedItems.data.keys());
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false; const num = this.dataList.filter(x => selectedKeys.includes(x.code) && this.selectedItems.data.get(x.code)).length
this.numDataListChecked = this.dataList.filter(x => x.check).length; return num
this.isDataListChecked = Boolean(this.numDataListChecked)
} }
} }
src/app/components/performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center"> <!-- <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex"> <div class="flex">
<div class="flex items-center"> <div class="flex items-center">
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" style="height: 40px;" [(ngModel)]="search" placeholder="Search by No. or Name" style="height: 40px;" [(ngModel)]="search"
(ngModelChange)="searchChange()"> >
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i> <i class="ri-search-line text-gray"></i>
...@@ -30,28 +30,59 @@ ...@@ -30,28 +30,59 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
(click)="modalStatus='add';selectData()" data-hs-overlay="#time-attendance-modal"> (click)="modalStatus='add';selectEventgrp();selectWorkingtime();openDialog();">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
(click)="modalStatus='add';selectData()" data-hs-overlay="#time-attendance-modal"
</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-10 m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
(click)="modalStatus='deleteGroup';selectData()" data-hs-overlay="#time-attendance-alert-modal"> (click)="modalStatus='deleteGroup';selectWorkingtime()" data-hs-overlay="#time-attendance-alert-modal">
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
</div> </div>
<!-- <div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i> <i class="ti ti-book fs-l"></i>
Help Help
</button> </button>
</div> --> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="page px-rem"> <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="modalStatus='add';selectEventgrp();selectWorkingtime();openDialog();">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
(click)="modalStatus='deleteGroup';selectWorkingtime();deletepmsWorkingTimes()" >
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
</div>
<!-- <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-top-0.65rem"> <div class="overflow-auto table-bordered rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px"> <thead class="height-50px">
...@@ -101,9 +132,6 @@ ...@@ -101,9 +132,6 @@
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#time-attendance-modal" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#time-attendance-modal"
(click)="modalStatus='edit';selectData(item.data)"></i> (click)="modalStatus='edit';selectData(item.data)"></i>
<!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#time-attendance-alert-modal"
(click)="modalStatus='delete';selectData(item.data)"></i> -->
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -147,9 +175,275 @@ ...@@ -147,9 +175,275 @@
items</span> items</span>
</ul> </ul>
</nav> </nav>
</div> </div> -->
<div class="page px-rem">
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="pmsWorkingTime.dataList"
[columns]="columns" [selectedItems]="selectedItems"
(sendSelectData)="modalStatus='edit';selectWorkingtime($event);openDialog()" (sendSelectedItems)="onSelectItemChange($event)">
</app-datagrid-syncfution>
</div>
<ng-template #timeAttendanceModal let-modal>
<h3 mat-dialog-title>
{{modalStatus=='add'?'เพิ่มข้อมูลประเภทวัน':'เเก้ไขข้อมูลประเภทวัน'}}
</h3>
<div class="w-full flex justify-end mb-1rem">
<div class="absolute flex">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="selectEventgrp();selectWorkingtime()">
<i class="ti ti-eraser text-base"></i>
Clear
</button>
</div>
</div>
</div>
<mat-dialog-content>
<label class="ti-form-label mt-2rem">รหัส<span class="text-danger">*<ng-container *ngIf="modalStatus=='add'&&checkPrimary()">
รหัสซ้ำ
</ng-container></span></label>
<input type="text" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}"
[readonly]="modalStatus=='edit'" [(ngModel)]="pmsWorkingTime.select.pmsWorkingTimeId">
<label class="ti-form-label mt-2rem">รหัสประเภทวัน<span class="text-danger">*</span></label>
<div *ngFor="let item of pmsWorkingTime.select.emeventgrp;let i = index;let f=first;let l = last"
class="grid grid-cols-2">
<div class="col-span-1">
<div class="flex relative">
<input type="text" class="ti-form-input pointer-events-none" readonly
[ngClass]="{'input-list-f1': f&&!l, 'input-list-c1': !f&&!l, 'input-list-l1': !f&&l, 'input-list-fl1': f&&l}"
[(ngModel)]="item.eventgrpId">
<div
[ngClass]="{'input-list-line-f': f&&!l, 'input-list-line-c': !f&&!l, 'input-list-line-l': !f&&l, 'input-list-line-fl': f&&l}">
<div class="input-list-line"></div>
</div>
<input type="text" class="ti-form-input pointer-events-none" readonly
[ngClass]="{'input-list-f2': f&&!l, 'input-list-c2': !f&&!l, 'input-list-l2': !f&&l, 'input-list-fl2': f&&l}"
[(ngModel)]="item.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button *ngIf="item.eventgrpId" type="button" class="flex items-center text-red-500"
(click)="eventgrp.selectIndex=i;selectEventgrp()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
</div>
</div>
</div>
<div class="col-span-1 ml-1" *ngIf="f">
<ng-component *ngTemplateOutlet="emeventgrpSearchButton"></ng-component>
</div>
</div>
<div class="grid grid-cols-2" *ngIf="!pmsWorkingTime.select.emeventgrp.length">
<div class="col-span-1">
<div class="flex relative">
<input type="text" class="ti-form-input input-list-fl1 pointer-events-none" readonly>
<div class="input-list-line-fl">
<div class="input-list-line"></div>
</div>
<input type="text" class="ti-form-input input-list-fl2 pointer-events-none" readonly>
</div>
</div>
<div class="col-span-1 ml-1">
<ng-component *ngTemplateOutlet="emeventgrpSearchButton"></ng-component>
</div>
</div>
<ng-template #emeventgrpSearchButton>
<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 !m-0 h-full"
style="height: 44.8px !important;"
(click)="openEventgrpDialog()"
data-hs-overlay="#time-attendance-eventgrp-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</ng-template>
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)<span class="text-danger">*</span></label>
<input type="text" class="ti-form-input" [(ngModel)]="pmsWorkingTime.select.tdesc">
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmsWorkingTime.select.edesc">
<label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmsWorkingTime.select.performanceTargets">
<label class="ti-form-label mt-2rem">หน่วยนับ</label>
<select class="ti-form-select" [(ngModel)]="pmsWorkingTime.select.detailUnit">
<option *ngFor="let item of ['นาที','ชั่วโมง','วัน','ครั้ง']" [value]="item">{{item}}</option>
</select>
<label class="ti-form-label mt-2rem">น้ำหนัก</label>
<input type="text" class="ti-form-input"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.weight">
<label class="ti-form-label mt-2rem">ค่าเป้าหมาย</label>
<div class="grid grid-cols-1 gap-y-2">
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">A (5 คะแนน) ชื่อ</label>
<input type="text" class="ti-form-input col-span-10"
[(ngModel)]="pmsWorkingTime.select.targetADetail">
</div>
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">เงื่อนไข ช่วงระหว่าง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionAMin">
<label class="ti-form-label col-span-1 align-center text-center m-0">ถึง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionAMax">
</div>
</div>
<div class="grid grid-cols-1 gap-y-2 mt-2rem">
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">B (4 คะแนน) ชื่อ</label>
<input type="text" class="ti-form-input col-span-10"
[(ngModel)]="pmsWorkingTime.select.targetBDetail">
</div>
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">เงื่อนไข ช่วงระหว่าง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionBMin">
<label class="ti-form-label col-span-1 align-center text-center m-0">ถึง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionBMax">
</div>
</div>
<div class="grid grid-cols-1 gap-y-2 mt-2rem">
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">C (3 คะแนน) ชื่อ</label>
<input type="text" class="ti-form-input col-span-10"
[(ngModel)]="pmsWorkingTime.select.targetCDetail">
</div>
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">เงื่อนไข ช่วงระหว่าง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionCMin">
<label class="ti-form-label col-span-1 align-center text-center m-0">ถึง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionCMax">
</div>
</div>
<div class="grid grid-cols-1 gap-y-2 mt-2rem">
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">D (2 คะแนน) ชื่อ</label>
<input type="text" class="ti-form-input col-span-10"
[(ngModel)]="pmsWorkingTime.select.targetDDetail">
</div>
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">เงื่อนไข ช่วงระหว่าง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionDMin">
<label class="ti-form-label col-span-1 align-center text-center m-0">ถึง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionDMax">
</div>
</div>
<div class="grid grid-cols-1 gap-y-2 mt-2rem">
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">E (1 คะแนน) ชื่อ</label>
<input type="text" class="ti-form-input col-span-10"
[(ngModel)]="pmsWorkingTime.select.targetEDetail">
</div>
<div class="col-span-1 grid grid-cols-12 gap-x-2">
<label class="ti-form-label col-span-2 align-center m-0">เงื่อนไข ช่วงระหว่าง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionEMin">
<label class="ti-form-label col-span-1 align-center text-center m-0">ถึง</label>
<input type="text" class="ti-form-input col-span-2"
oninput="this.value = this.value.replace(/[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/(\..*?)(\d{2})./g, '$1$2');"
onchange="this.value = this.value.replace('', '0');this.value = parseFloat(this.value).toFixed(2)"
[(ngModel)]="pmsWorkingTime.select.conditionEMax">
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
<button type="button" class="ti-btn ti-btn-success" mat-button [class.ti-btn-disabled]="!pmsWorkingTime.select.pmsWorkingTimeId||!pmsWorkingTime.select.tdesc||(modalStatus=='add'&&checkPrimary())" (click)="addpmsWorkingTimes()"
[disabled]="!pmsWorkingTime.select.pmsWorkingTimeId||!pmsWorkingTime.select.tdesc||(modalStatus=='add'&&checkPrimary())">
บันทึกข้อมูล
</button>
</mat-dialog-actions>
</ng-template>
<div id="time-attendance-modal" class="hs-overlay hidden ti-modal"> <ng-template #evenTgrpModal let-modal>
<h3 mat-dialog-title>
รายการทะเบียนประเภทวัน
</h3>
<mat-dialog-content>
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="eventgrpmodal.search" (ngModelChange)="oneventgrpModalSearchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ประเภทวัน','รายละเอียดไทย','รายละเอียดอังกฤษ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f">
<span class="text-sm">{{ 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>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!eventgrpListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="eventgrpListFilter().length">
<tr *ngFor="let item of eventgrpListFilter() | slice:((eventgrpmodal.currentPage-1) * eventgrpmodal.pageSize) : (((eventgrpmodal.currentPage-1) * eventgrpmodal.pageSize) + eventgrpmodal.pageSize);let i = index"
class="cursor-pointer" (click)="selectEventgrp(item.data);closeEventgrpDialog()" >
<!-- <td class="flex justify-center">
{{((eventgrpmodal.currentPage-1) * eventgrpmodal.pageSize)+(i+1)}}
</td> -->
<td>{{item.data.eventgrpId}}</td>
<td>{{item.data.tdesc}}</td>
<td>{{item.data.edesc}}</td>
</tr>
</tbody>
</table>
</div>
<app-pagination [totalItems]="eventgrpListFilter().length" [pageSize]="eventgrpmodal.pageSize"
(pageChange)="eventgrpmodal.currentPage = $event"
(pageSizeChange)="eventgrpmodal.pageSize = $event;eventgrpmodal.currentPage = 1"></app-pagination>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
ย้อนกลับ
</button>
</mat-dialog-actions>
</ng-template>
<!-- <div id="time-attendance-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)] !max-w-1/2"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] !max-w-1/2">
<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">
...@@ -184,12 +478,6 @@ ...@@ -184,12 +478,6 @@
Clear Clear
</button> </button>
</div> </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> </div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0"> <div class="ti-modal-body padding-16px pt-0 overflow-y-0">
...@@ -256,7 +544,6 @@ ...@@ -256,7 +544,6 @@
<label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label> <label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmsWorkingTime.select.performanceTargets"> <input type="text" class="ti-form-input" [(ngModel)]="pmsWorkingTime.select.performanceTargets">
<label class="ti-form-label mt-2rem">หน่วยนับ</label> <label class="ti-form-label mt-2rem">หน่วยนับ</label>
<!-- <input type="text" class="ti-form-input" [(ngModel)]="pmsWorkingTime.select.detailUnit"> -->
<select class="ti-form-select" [(ngModel)]="pmsWorkingTime.select.detailUnit"> <select class="ti-form-select" [(ngModel)]="pmsWorkingTime.select.detailUnit">
<option *ngFor="let item of ['นาที','ชั่วโมง','วัน','ครั้ง']" [value]="item">{{item}}</option> <option *ngFor="let item of ['นาที','ชั่วโมง','วัน','ครั้ง']" [value]="item">{{item}}</option>
</select> </select>
...@@ -376,9 +663,9 @@ ...@@ -376,9 +663,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div id="time-attendance-alert-modal" class="hs-overlay hidden ti-modal"> <!-- <div id="time-attendance-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">
...@@ -444,10 +731,10 @@ ...@@ -444,10 +731,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<div id="time-attendance-eventgrp-table-modal" class="hs-overlay hidden ti-modal"> <!-- <div id="time-attendance-eventgrp-table-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<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">
...@@ -571,4 +858,4 @@ ...@@ -571,4 +858,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
\ No newline at end of file \ No newline at end of file
src/app/components/performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component.ts
import { ChangeDetectorRef, Component } from '@angular/core'; import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { MyEmeventgrpModel } from 'src/app/shared/model/emeventgrp.model'; import { MyEmeventgrpModel } from 'src/app/shared/model/emeventgrp.model';
import { EventgrpModel, MyEventgrpModel, } from 'src/app/shared/model/eventgrp.model'; import { EventgrpModel, MyEventgrpModel, } from 'src/app/shared/model/eventgrp.model';
...@@ -6,10 +6,15 @@ import { PmsWorkingTimeModel, MyPmsWorkingTimeModel } from 'src/app/shared/model ...@@ -6,10 +6,15 @@ import { PmsWorkingTimeModel, MyPmsWorkingTimeModel } from 'src/app/shared/model
import { EventgrpService } from 'src/app/shared/services/eventgrp.service'; import { EventgrpService } from 'src/app/shared/services/eventgrp.service';
import { FileService } from 'src/app/shared/services/file.service'; import { FileService } from 'src/app/shared/services/file.service';
import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service'; import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service';
import { ColumnModel } from '@syncfusion/ej2-grids';
import Swal from 'sweetalert2';
import { MatDialog } from '@angular/material/dialog';
interface table { interface table {
currentPage: number, currentPage: number,
page: number[], page: number[],
search: string search: string,
pageSize: number
} }
@Component({ @Component({
selector: 'app-time-attendance-manage', selector: 'app-time-attendance-manage',
...@@ -27,13 +32,52 @@ export class TimeAttendanceManageComponent { ...@@ -27,13 +32,52 @@ export class TimeAttendanceManageComponent {
modal: table = { modal: table = {
currentPage: 1, currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1), page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "" search: "",
pageSize : 10
} }
eventgrpmodal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "",
pageSize: 10
}
eventgrp: { loading: boolean, selectIndex: number, selectList: EventgrpModel[], dataList: { check: boolean, data: EventgrpModel }[] } = { loading: false, selectIndex: -1, selectList: [new MyEventgrpModel()], dataList: [] } eventgrp: { loading: boolean, selectIndex: number, selectList: EventgrpModel[], dataList: { check: boolean, data: EventgrpModel }[] } = { loading: false, selectIndex: -1, selectList: [new MyEventgrpModel()], dataList: [] }
pmsWorkingTime: { loading: boolean, select: PmsWorkingTimeModel, dataList: { check: boolean, data: PmsWorkingTimeModel }[] } = { loading: false, select: new MyPmsWorkingTimeModel(), dataList: [] } pmsWorkingTime: { loading: boolean, select: PmsWorkingTimeModel, dataList: PmsWorkingTimeModel [] } = { loading: false, select: new MyPmsWorkingTimeModel(), dataList: [] }
columns: ColumnModel[] = [{
field: "pmsWorkingTimeId",
headerText: "รหัส",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "ชื่อหัวข้อ",
type: "string"
},
{
field: "detailUnit",
headerText: "หน่วยนับ",
type: "string"
},
{
field: "weight",
headerText: "น้ำหนัก",
type: "string"
}]
searchSettings = {
fields: ['pmsWorkingTimeId', 'tdesc', 'detailUnit', 'weight'],
operator: 'contains',
ignoreCase: false
};
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
@ViewChild("timeAttendanceModal") timeAttendanceModal: any;
@ViewChild("evenTgrpModal") evenTgrpModal: any;
dialogRef: any
dialogRefEventgrp: any
constructor( constructor(
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private dialog: MatDialog,
private fileService: FileService, private fileService: FileService,
private eventgrpService: EventgrpService, private eventgrpService: EventgrpService,
private pmsWorkingTimeService: PmsWorkingTimeService, private pmsWorkingTimeService: PmsWorkingTimeService,
...@@ -45,12 +89,18 @@ export class TimeAttendanceManageComponent { ...@@ -45,12 +89,18 @@ export class TimeAttendanceManageComponent {
} }
getPmsWorkingTimeList() { getPmsWorkingTimeList() {
this.pmsWorkingTime.loading = true this.pmsWorkingTime.loading = true
this.selectedItems.data.clear()
this.pmsWorkingTimeService.getList().subscribe({ this.pmsWorkingTimeService.getList().subscribe({
next: response => { next: response => {
this.pmsWorkingTime.dataList = response.map(x => ({ check: false, data: new MyPmsWorkingTimeModel(x) })) // this.pmsWorkingTime.dataList = response.map(x => ({ check: false, data: new MyPmsWorkingTimeModel(x) }))
this.pmsWorkingTime.dataList = response.map(x => {
this.selectedItems.data.set(x.pmsWorkingTimeId, false)
return new MyPmsWorkingTimeModel(x)
})
this.selectedItems.key = 'pmsWorkingTimeId'
this.selectedItems.count = 0
this.pmsWorkingTime.loading = false this.pmsWorkingTime.loading = false
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange() this.searchChange()
this.cdr.detectChanges(); this.cdr.detectChanges();
}, error: error => { }, error: error => {
...@@ -61,7 +111,7 @@ export class TimeAttendanceManageComponent { ...@@ -61,7 +111,7 @@ export class TimeAttendanceManageComponent {
} }
pmsWorkingTimeFilter() { pmsWorkingTimeFilter() {
return this.pmsWorkingTime.dataList.filter((x) => { return this.pmsWorkingTime.dataList.filter((x) => {
const data = x.data const data = x
const match = data.pmsWorkingTimeId.toLowerCase().includes(this.search.toLowerCase()) || const match = data.pmsWorkingTimeId.toLowerCase().includes(this.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
data.detailUnit.toLowerCase().includes(this.search.toLowerCase()) || data.detailUnit.toLowerCase().includes(this.search.toLowerCase()) ||
...@@ -73,22 +123,96 @@ export class TimeAttendanceManageComponent { ...@@ -73,22 +123,96 @@ export class TimeAttendanceManageComponent {
this.currentPage = 1; this.currentPage = 1;
const filteredData = this.pmsWorkingTimeFilter(); const filteredData = this.pmsWorkingTimeFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
this.dataListCheck();
}
selectData(data?: PmsWorkingTimeModel) {
this.pmsWorkingTime.select = new MyPmsWorkingTimeModel(data)
}
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.pmsWorkingTimeFilter().forEach(x => x.check = selectAll);
this.dataListCheck();
} }
dataListCheck() { // selectData(data?: PmsWorkingTimeModel) {
const dataCheck = this.pmsWorkingTimeFilter(); // this.pmsWorkingTime.select = new MyPmsWorkingTimeModel(data)
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false; // }
this.numDataListChecked = this.pmsWorkingTime.dataList.filter(x => x.check).length; selectWorkingtime(pmsWorkingTime?: PmsWorkingTimeModel) {
this.isDataListChecked = Boolean(this.numDataListChecked) if (pmsWorkingTime) {
this.pmsWorkingTime.select = new MyPmsWorkingTimeModel(pmsWorkingTime)
} else if (this.modalStatus == 'add') {
this.pmsWorkingTime.select = new MyPmsWorkingTimeModel()
} else if (this.modalStatus == 'edit') {
this.pmsWorkingTime.select = new MyPmsWorkingTimeModel({ pmsWorkingTimeId: this.pmsWorkingTime.select.pmsWorkingTimeId })
}
} }
addpmsWorkingTimes() {
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'บันทึกข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
this.pmsWorkingTime.loading = true
this.pmsWorkingTimeService.post(this.pmsWorkingTime.select).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmsWorkingTimeList()
this.closeDialog()
} else {
this.showAlert(response.message, 'error')
this.pmsWorkingTime.loading = false
}
}, error: error => {
this.showAlert(error.message, 'error')
this.pmsWorkingTime.loading = false
}
})
}
})
}
deletepmsWorkingTimes() {
if (!this.numSelectItem()) {
this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error')
return
}
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการลบข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'ลบข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
this.pmsWorkingTime.loading = true
const selectedKeys = Array.from(this.selectedItems.data.keys());
const body = this.pmsWorkingTime.dataList.filter(x => selectedKeys.includes(x.pmsWorkingTimeId) && this.selectedItems.data.get(x.pmsWorkingTimeId)).map(x => new MyPmsWorkingTimeModel(x))
this.pmsWorkingTimeService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmsWorkingTimeList()
this.closeDialog()
} else {
this.showAlert(response.message, 'error')
this.pmsWorkingTime.loading = false
}
}, error: error => {
this.showAlert(error.message, 'error')
this.pmsWorkingTime.loading = false
}
})
}
});
}
// dataListCheckAll() {
// const selectAll = this.isDataListCheckedAll;
// this.pmsWorkingTimeFilter().forEach(x => x.check = selectAll);
// this.dataListCheck();
// }
// dataListCheck() {
// const dataCheck = this.pmsWorkingTimeFilter();
// this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x) : false;
// this.numDataListChecked = this.pmsWorkingTime.dataList.filter(x => x).length;
// this.isDataListChecked = Boolean(this.numDataListChecked)
// }
getEventgrpList() { getEventgrpList() {
this.eventgrp.loading = true this.eventgrp.loading = true
...@@ -97,7 +221,6 @@ export class TimeAttendanceManageComponent { ...@@ -97,7 +221,6 @@ export class TimeAttendanceManageComponent {
this.eventgrp.dataList = response.map(x => ({ check: false, data: new MyEventgrpModel(x) })) this.eventgrp.dataList = response.map(x => ({ check: false, data: new MyEventgrpModel(x) }))
this.eventgrp.loading = false this.eventgrp.loading = false
this.isDataListCheckedAll = false this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange() this.searchChange()
this.cdr.detectChanges(); this.cdr.detectChanges();
}, error: error => { }, error: error => {
...@@ -109,7 +232,7 @@ export class TimeAttendanceManageComponent { ...@@ -109,7 +232,7 @@ export class TimeAttendanceManageComponent {
eventgrpListFilter() { eventgrpListFilter() {
return this.eventgrp.dataList.filter(x => { return this.eventgrp.dataList.filter(x => {
const data = x.data const data = x.data
const match = data.eventgrpId.toLowerCase().includes(this.modal.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.modal.search.toLowerCase()); const match = data.eventgrpId.toLowerCase().includes(this.eventgrpmodal.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.eventgrpmodal.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.eventgrpmodal.search.toLowerCase());
return match; return match;
}) })
} }
...@@ -135,51 +258,55 @@ export class TimeAttendanceManageComponent { ...@@ -135,51 +258,55 @@ export class TimeAttendanceManageComponent {
this.modal.currentPage = 1 this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1); this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
} }
updatePmsWorkingTime() { oneventgrpModalSearchChange() {
this.pmsWorkingTime.loading = true this.eventgrpmodal.currentPage = 1
this.pmsWorkingTimeService.post(new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)).subscribe({ this.eventgrpmodal.page = Array.from({ length: Math.ceil(this.eventgrpListFilter().length / 10) }, (_, i) => i + 1);
next: response => { }
if (response.success) { // updatePmsWorkingTime() {
this.showAlert(response.message, 'success') // this.pmsWorkingTime.loading = true
this.getPmsWorkingTimeList() // this.pmsWorkingTimeService.post(new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)).subscribe({
this.searchChange() // next: response => {
} else { // if (response.success) {
this.showAlert(response.message, 'error') // this.showAlert(response.message, 'success')
this.pmsWorkingTime.loading = false // this.getPmsWorkingTimeList()
} // this.searchChange()
this.cdr.detectChanges() // } else {
}, error: error => { // this.showAlert(response.message, 'error')
this.showAlert(error.message, 'error') // this.pmsWorkingTime.loading = false
this.pmsWorkingTime.loading = false // }
this.cdr.detectChanges() // this.cdr.detectChanges()
} // }, error: error => {
}) // this.showAlert(error.message, 'error')
} // this.pmsWorkingTime.loading = false
deletePmsWorkingTime() { // this.cdr.detectChanges()
let body: PmsWorkingTimeModel[] = [] // }
if (this.modalStatus == "deleteGroup") { // })
body = this.pmsWorkingTime.dataList.filter(x => x.check).map(x => new MyPmsWorkingTimeModel(x.data)) // }
} else { // deletePmsWorkingTime() {
body = [new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)] // let body: PmsWorkingTimeModel[] = []
} // if (this.modalStatus == "deleteGroup") {
this.pmsWorkingTime.loading = true // body = this.pmsWorkingTime.dataList.filter(x => x.check).map(x => new MyPmsWorkingTimeModel(x.data))
this.pmsWorkingTimeService.delete(body).subscribe({ // } else {
next: response => { // body = [new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)]
if (response.success) { // }
this.showAlert(response.message, 'success') // this.pmsWorkingTime.loading = true
this.getPmsWorkingTimeList() // this.pmsWorkingTimeService.delete(body).subscribe({
} else { // next: response => {
this.showAlert(response.message, 'error') // if (response.success) {
this.pmsWorkingTime.loading = false // this.showAlert(response.message, 'success')
this.cdr.detectChanges() // this.getPmsWorkingTimeList()
} // } else {
}, error: error => { // this.showAlert(response.message, 'error')
this.showAlert(error.message, 'error') // this.pmsWorkingTime.loading = false
this.pmsWorkingTime.loading = false // this.cdr.detectChanges()
this.cdr.detectChanges() // }
} // }, error: error => {
}) // this.showAlert(error.message, 'error')
} // this.pmsWorkingTime.loading = false
// this.cdr.detectChanges()
// }
// })
// }
showAlert(text: string, type: 'success' | 'error') { showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
...@@ -188,6 +315,34 @@ export class TimeAttendanceManageComponent { ...@@ -188,6 +315,34 @@ export class TimeAttendanceManageComponent {
} }
checkPrimary() { checkPrimary() {
return this.pmsWorkingTime.dataList.find(x => x.data.pmsWorkingTimeId == this.pmsWorkingTime.select.pmsWorkingTimeId) return this.pmsWorkingTime.dataList.find(x => x.pmsWorkingTimeId == this.pmsWorkingTime.select.pmsWorkingTimeId)
}
openDialog() {
this.dialogRef = this.dialog.open(this.timeAttendanceModal, {
width: '500px',
disableClose: false,
});
}
openEventgrpDialog() {
this.dialogRefEventgrp = this.dialog.open(this.evenTgrpModal, {
width: '800px',
})
}
onSelectItemChange(arg: any) {
this.selectedItems = arg
console.log(this.selectedItems)
}
numSelectItem() {
const selectedKeys = Array.from(this.selectedItems.data.keys());
const num = this.pmsWorkingTime.dataList.filter(x => selectedKeys.includes(x.pmsWorkingTimeId) && this.selectedItems.data.get(x.pmsWorkingTimeId)).length
return num
}
closeDialog() {
this.dialogRef.close()
}
closeEventgrpDialog() {
this.dialogRefEventgrp.close()
} }
} }
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