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 @@
<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" (ngModelChange)="searchChange()">
[(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>
......@@ -16,8 +16,8 @@
<div class="px-1">
<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"
data-hs-overlay="#evaluation-grouping-upload-modal"
(click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
data-hs-overlay="#evaluation-grouping-upload-modal">
<!-- (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'" -->
<i class="ti ti-file-plus"></i>
import
</button>
......@@ -32,6 +32,12 @@
</div>
</div>
<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 shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
......@@ -125,7 +131,7 @@
</div>
</div>
</div>
</div>
</div> -->
</ng-container>
<ng-container *ngIf="onEdit">
<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 { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
import { FileService } from 'src/app/shared/services/file.service';
import { PLService } from 'src/app/shared/services/pl.service';
import { ColumnModel } from '@syncfusion/ej2-grids';
@Component({
selector: 'app-evaluation-grouping',
......@@ -22,11 +23,25 @@ export class EvaluationGroupingComponent {
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
numDataListChecked = 0
isDataListChecked = false
isDataListCheckedAll = false
columns: ColumnModel[] = [{
field: "plId",
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) { }
ngOnInit(): void {
this.onSendPathTitle()
......@@ -84,11 +99,10 @@ export class EvaluationGroupingComponent {
this.pl.loading = true
this.plService.getList().subscribe({
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.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange();
this.cdr.detectChanges();
}, error: error => {
this.pl.loading = false
......@@ -99,31 +113,25 @@ export class EvaluationGroupingComponent {
}
plListFilter() {
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())
return match;
});
}
selectPl(data: PLModel) {
this.pl.select = new MyPLModel(data)
}
selectPl(data?: PLModel) {
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() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1)
this.dataListCheck();
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() {
if (this.onEdit) {
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 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 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()">
style="height: 40px;" [(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>
......@@ -44,17 +28,48 @@
Delete
</button>
</div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</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 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">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
......@@ -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'"
(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"
data-hs-overlay="#management-evaluation-cycle-page-alert-modal"
(click)="modalStatus='createForm';setData(item.data)" *ngIf="item.data.statusFrom.code == '0'" [ngClass]="{
......@@ -210,9 +220,113 @@
{{pmsMasfromEvaluationCycleFilter().length}} items</span>
</ul>
</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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
......@@ -246,12 +360,6 @@
Clear
</button>
</div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div>
</div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0">
......@@ -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">
<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">
<option *ngFor="let item of yearList" [ngValue]="item">{{ item }}</option>
</select>
......@@ -350,9 +456,9 @@
</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="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
......@@ -432,9 +538,9 @@
</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="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
......@@ -455,13 +561,77 @@
</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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
......@@ -586,4 +756,4 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</div> -->
\ 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 { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
import { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model';
import { PLService } from 'src/app/shared/services/pl.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 {
search: string,
currentPage: number,
page: number[]
page: number[],
pageSize: number
}
@Component({
......@@ -24,8 +29,17 @@ export class ManagementCycleComponent {
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
modalStatus: 'createForm' | 'add' | 'edit' | 'delete' | 'deleteGroup' = 'add'
pmsMasfromEvaluationlist: { check: boolean, data: PmsMasfromEvaluationModel }[] = []
pmsMasfromEvaluation: PmsMasfromEvaluationModel = new MyPmsMasfromEvaluationModel({})
// pmsMasfromEvaluationlist: { check: boolean, data: PmsMasfromEvaluationModel }[] = []
// pmsMasfromEvaluation: PmsMasfromEvaluationModel = new MyPmsMasfromEvaluationModel({})
pmsMasfromEvaluation: {
loading: boolean,
select: PmsMasfromEvaluationModel,
dataList: PmsMasfromEvaluationModel[]
} = {
loading: false,
select: new MyPmsMasfromEvaluationModel({}),
dataList: []
}
dataLoading = false
itemToDelete: PmsMasfromEvaluationModel | null = null;
isDataListChecked = false
......@@ -37,8 +51,15 @@ export class ManagementCycleComponent {
modal: DataModal = {
search: "",
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: [] }
currentDate = new Date()
......@@ -48,9 +69,52 @@ export class ManagementCycleComponent {
(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
constructor(private pmsMasfromEvaluationCycleService: PmsMasfromEvaluationCycleService,
private toastr: ToastrService,
private dialog: MatDialog,
private cdr: ChangeDetectorRef,
private renderer: Renderer2,
private pLService: PLService
......@@ -77,7 +141,7 @@ export class ManagementCycleComponent {
next: response => {
this.pl.dataList = response.map((x: any) => new MyPLModel(x))
this.pl.loading = false
this.searchChange()
// this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.pl.loading = false
......@@ -87,35 +151,46 @@ export class ManagementCycleComponent {
}
plListFilter() {
return this.pl.dataList.filter(x =>
(x.plId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.modal.search.toLowerCase())) &&
!this.pmsMasfromEvaluation.personalLevel.some(y => y.plId == x.plId)
(x.plId.toLowerCase().includes(this.PLsearchmodal.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.PLsearchmodal.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.PLsearchmodal.search.toLowerCase())) &&
!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) {
if (!data) {
this.pmsMasfromEvaluation.personalLevel.splice(this.pl.selectIndex, 1);
this.pmsMasfromEvaluation.select.personalLevel.splice(this.pl.selectIndex, 1);
return;
}
this.pmsMasfromEvaluation.personalLevel.push(new MyPLModel(data))
this.pmsMasfromEvaluation.select.personalLevel.push(new MyPLModel(data))
}
getPmsMasfromEvaluationCycleList() {
this.dataLoading = true
this.selectedItems.data.clear()
this.pmsMasfromEvaluationCycleService.getList().subscribe({
// next: response => {
// this.pmsMasfromEvaluationlist = response.map(x => ({
// check: false,
// data: new MyPmsMasfromEvaluationModel(x)
// }));
next: response => {
this.pmsMasfromEvaluationlist = response.map(x => ({
check: false,
data: new MyPmsMasfromEvaluationModel(x)
}));
this.pmsMasfromEvaluation.dataList = response.map(x => {
this.selectedItems.data.set(x.pmsEvaluationRoundId, false)
return new MyPmsMasfromEvaluationModel(x)
})
this.selectedItems.key = 'pmsEvaluationRoundId'
this.selectedItems.count = 0
this.dataLoading = false
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange();
// this.dataListCheckAll()
// this.searchChange();
this.cdr.detectChanges();
},
error: err => {
......@@ -124,84 +199,178 @@ export class ManagementCycleComponent {
}
});
}
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.pmsMasfromEvaluationCycleFilter().forEach(x => x.check = selectAll);
this.dataListCheck();
}
selectPmsMasfromEvaluationCycle(pmsMasfromEvaluation?: PmsMasfromEvaluationModel) {
if (pmsMasfromEvaluation) {
this.pmsMasfromEvaluation.select = new MyPmsMasfromEvaluationModel(pmsMasfromEvaluation)
} 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() {
const dataCheck = this.pmsMasfromEvaluationCycleFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.pmsMasfromEvaluationlist.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked)
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.pmsMasfromEvaluationCycleFilter().length / 10) }, (_, i) => i + 1);
this.dataListCheck()
}
pmsMasfromEvaluationCycleFilter() {
return this.pmsMasfromEvaluationlist.filter(x => {
const data = x.data
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;
});
}
// dataListCheck() {
// const dataCheck = this.pmsMasfromEvaluationCycleFilter();
// this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
// this.numDataListChecked = this.pmsMasfromEvaluationlist.filter(x => x.check).length;
// this.isDataListChecked = Boolean(this.numDataListChecked)
// }
// searchChange() {
// this.currentPage = 1
// this.page = Array.from({ length: Math.ceil(this.pmsMasfromEvaluationCycleFilter().length / 10) }, (_, i) => i + 1);
// this.dataListCheck()
// }
// pmsMasfromEvaluationCycleFilter() {
// return this.pmsMasfromEvaluation.loading.filter(x => {
// const data = x.data
// 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) {
this.pmsMasfromEvaluation = new MyPmsMasfromEvaluationModel(data)
this.pmsMasfromEvaluation.select = new MyPmsMasfromEvaluationModel(data)
}
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 => {
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'บันทึกข้อมูล',
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) {
this.showAlert(response.message, 'success')
this.getPmsMasfromEvaluationCycleList()
this.showAlert(response.message, 'success');
this.getPmsMasfromEvaluationCycleList();
this.closeDialog();
} else {
this.dataLoading = false
this.showAlert(response.message, 'error')
this.cdr.detectChanges()
this.showAlert(response.message, 'error');
this.dataLoading = false;
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))
},
error: error => {
this.showAlert(error.message, 'error');
this.dataLoading = false;
this.cdr.detectChanges();
}
});
}
});
}
deletePmsMasfromEvaluation() {
if (!this.numSelectItem()) {
this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error');
return;
}
this.dataLoading = true
this.pmsMasfromEvaluationCycleService.delete(body).subscribe({
next: response => {
Swal.fire({
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) {
this.showAlert(response.message, 'success')
this.getPmsMasfromEvaluationCycleList()
this.showAlert(response.message, 'success');
this.getPmsMasfromEvaluationCycleList();
this.closeDialog();
} else {
this.dataLoading = false
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
this.showAlert(response.message, 'error');
this.dataLoading = false;
this.cdr.detectChanges();
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
},
error: error => {
this.showAlert(error.message, 'error');
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') {
this.toastr[type](text, 'แจ้งเตือน', {
......@@ -213,7 +382,7 @@ export class ManagementCycleComponent {
if (this.modalStatus == 'add') {
this.setData()
} 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 {
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
}
createForm() {
const body = new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation)
const body = new MyPmsMasfromEvaluationModel(this.pmsMasfromEvaluation.select)
body.active = 1
this.dataLoading = true
this.pmsMasfromEvaluationCycleService.post(body).subscribe({
......@@ -272,8 +441,37 @@ export class ManagementCycleComponent {
}
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">
<div class="flex items-center">
......@@ -39,30 +39,63 @@
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#assessment-topics-modal" (click)="modalStatus='add';selectPmstopic()">
<i class="ri-add-line"></i>
Add
<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-10 m-0 shadow-md"
data-hs-overlay="#assessment-topics-alert-modal" (click)="modalStatus='deleteGroup';selectPmstopic()">
<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()" >
<i class="ri-delete-bin-6-line"></i>
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 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 class="page px-rem">
<!-- <div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
......@@ -109,9 +142,6 @@
<td class="flex justify-center">
<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>
<!-- <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>
</tr>
</tbody>
......@@ -154,61 +184,38 @@
:(currentPage * 10) ) }} of {{pmstopicListFilter().length}} items</span>
</ul>
</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 id="assessment-topics-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
{{modalStatus=='add'?'เพิ่มหัวข้อการประเมิน':'แก้ไขหัวข้อการประเมิน'}}
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#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">
<ng-template #assessmentTopicsModal 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)="clearPmstopic(modalStatus)">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="selectPmstype();selectPmstopic()">
<i class="ti ti-eraser text-base"></i>
Clear
</button>
</div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div>
</div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0">
<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)]="pmstopic.select.pmsTopicId">
<label class="ti-form-label mt-2rem">ประเภทการประเมินผล<span class="text-danger">*</span></label>
</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)]="pmstopic.select.pmsTopicId">
<label class="ti-form-label mt-2rem">ประเภทการประเมินผล<span class="text-danger">*</span></label>
<div class="flex">
<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
......@@ -218,141 +225,128 @@
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<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>
</button>
</div>
</div>
</div>
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ<span class="text-danger">*</span></label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.tdesc">
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.edesc">
<label class="ti-form-label mt-2rem">ตัวชี้วัดผลงานหลัก</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.indicatorsDetail">
<label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.performanceGoalsDetail">
<label class="ti-form-label mt-2rem">หน่วยนับ</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.detailUnit">
<label class="ti-form-label mt-2rem">กำหนดเวลาแล้วเสร็จ</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.completionDate">
<!-- <mat-form-field>
<input matInput [matDatepicker]="firstHireDate" type="text" class="ti-form-input"
[(ngModel)]="pmstopic.completionDateIso"
(ngModelChange)="changeDate(this.pmstopic.select, 'completionDate', pmstopic.completionDateIso);">
<mat-datepicker-toggle matSuffix [for]="firstHireDate"></mat-datepicker-toggle>
<mat-datepicker #firstHireDate></mat-datepicker>
</mat-form-field> -->
<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)]="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>
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ<span class="text-danger">*</span></label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.tdesc">
<label class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.edesc">
<label class="ti-form-label mt-2rem">ตัวชี้วัดผลงานหลัก</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.indicatorsDetail">
<label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.performanceGoalsDetail">
<label class="ti-form-label mt-2rem">หน่วยนับ</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.detailUnit">
<label class="ti-form-label mt-2rem">กำหนดเวลาแล้วเสร็จ</label>
<input type="text" class="ti-form-input" [(ngModel)]="pmstopic.select.completionDate">
<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)]="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>
</div>
</div>
<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 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="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<ng-container *ngIf="numDataListChecked">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="!numDataListChecked">
เลือกข้อมูลที่ต้องการลบ
</ng-container>
</ng-container>
</p>
<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>
</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]="!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-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-topics-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#assessment-topics-alert-modal"
(click)="updatePmstopic('post')">
บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-topics-alert-modal">
ย้อนกลับ
</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>
<ng-template #assessmentTopoicsTypeModal 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)]="pmstypemodal.search" (ngModelChange)="modalSearchChange(pmstypeListFilter())">
<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>
</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="!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 class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
......@@ -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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
......@@ -491,7 +485,7 @@
<span>Show {{((modal.currentPage-1) * 10)+1}} to {{pmstypeListFilter().length<10
?pmstypeListFilter().length: (modal.currentPage==modal.page.length ? ((modal.currentPage * 10) -
((modal.currentPage * 10) - pmstypeListFilter().length) ) :(modal.currentPage * 10) ) }} of
{{pmstypeListFilter().length}} items</span>
{{pmstypeListFilter().length}} items </span>
</ul>
</nav>
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
......@@ -504,4 +498,4 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</div> -->
\ No newline at end of file
src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-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 { PmstopicModel, MyPmstopicModel } from 'src/app/shared/model/pmstopic.model';
import { MyPmstypeModel, PmstypeModel } from 'src/app/shared/model/pmstype.model';
import { FileService } from 'src/app/shared/services/file.service';
import { PmstopicService } from 'src/app/shared/services/pmstopic.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 {
currentPage: number,
page: number[],
search: string
pageSize: number
}
@Component({
selector: 'app-assessment-topics',
......@@ -18,23 +23,62 @@ interface table {
export class AssessmentTopicsComponent {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
numDataListChecked = 0
isDataListChecked = 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: [] }
modal: table = {
currentPage: 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;
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,
private pmstopicService: PmstopicService,
private dialog: MatDialog,
private toastr: ToastrService,
private fileService: FileService,
private pmstypeService: PmstypeService
......@@ -49,11 +93,10 @@ export class AssessmentTopicsComponent {
this.pmstype.loading = true
this.pmstypeService.getList().subscribe({
next: response => {
this.pmstype.dataList = response.map(x => ({ check: false, data: new MyPmstypeModel(x) }))
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.pmstype.dataList = response.map(x => ({
check: false,
data: new MyPmstypeModel(x) }))
this.pmstype.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.pmstype.loading = false
......@@ -65,9 +108,9 @@ export class AssessmentTopicsComponent {
return this.pmstype.dataList.filter(x => {
const data = x.data
if (x.data.pmsTypeId != '06' && x.data.pmsTypeId != '07') {
const match = data.pmsTypeId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) ||
data.shortName.toLowerCase().includes(this.modal.search.toLowerCase())
const match = data.pmsTypeId.toLowerCase().includes(this.pmstypemodal.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.pmstypemodal.search.toLowerCase()) ||
data.shortName.toLowerCase().includes(this.pmstypemodal.search.toLowerCase())
return match
}
return
......@@ -76,16 +119,19 @@ export class AssessmentTopicsComponent {
selectPmstype(data?: PmstypeModel) {
this.pmstopic.select.pmsType = new MyPmstypeModel(data)
}
getPmstopicList() {
this.pmstopic.loading = true
this.selectedItems.data.clear()
this.pmstopicService.getList().subscribe({
next: response => {
this.pmstopic.dataList = response.map(x => ({ check: false, data: new MyPmstopicModel(x) }))
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.pmstopic.dataList = response.map(x => {
this.selectedItems.data.set(x.pmsTopicId, false)
return new MyPmstopicModel(x)
})
this.selectedItems.key = 'pmsTopicId'
this.selectedItems.count = 0
this.pmstopic.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.pmstopic.loading = false
......@@ -93,53 +139,84 @@ export class AssessmentTopicsComponent {
}
})
}
pmstopicListFilter() {
return 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()) ||
data.pmsType.tdesc.toLowerCase().includes(this.search.toLowerCase())
return match
})
}
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)
selectPmstopic(pmstopic?: PmstopicModel) {
if (pmstopic) {
this.pmstopic.select = new MyPmstopicModel(pmstopic)
} else if (this.modalStatus == 'add') {
this.pmstopic.select = new MyPmstopicModel()
} else if (this.modalStatus == 'edit') {
this.pmstopic.select = new MyPmstopicModel({ pmsTopicId: this.pmstopic.select.pmsTopicId })
}
}
this.pmstopic.loading = true
this.pmstopicService[typeApi]((body as any)).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmstopicList()
this.searchChange()
} else {
this.showAlert(response.message, 'error')
this.pmstopic.loading = false
addpmsTopics() {
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'บันทึกข้อมูล',
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')
this.pmstopic.loading = false
this.cdr.detectChanges()
})
}
deletepmsTopics() {
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.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') {
this.toastr[type](text, 'แจ้งเตือน', {
......@@ -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) {
if (modalStatus == 'add') {
this.selectPmstopic()
......@@ -224,16 +284,16 @@ export class AssessmentTopicsComponent {
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) {
this.modal.currentPage = 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) {
target[field] = this.toYYYYMMDD(dateIso)
}
......@@ -256,7 +316,37 @@ export class AssessmentTopicsComponent {
}
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">
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<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="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 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 class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
(click)="selectData();pathTitleChange('add')">
<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-10 m-0 shadow-md"
data-hs-overlay="#grade-management-alert-delete-modal" (click)="selectData()">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
(click)="selectData();pathTitleChange('add')">
<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-10 m-0 shadow-md"
data-hs-overlay="#grade-management-alert-delete-modal" (click)="selectData()">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div>
</div>
</div>
<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">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
......@@ -91,8 +79,6 @@
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(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>
</tr>
</tbody>
......@@ -130,7 +116,7 @@
</li>
</ul>
</nav>
</div>
</div> -->
<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">
......
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 { CompetencyGradeModel } from 'src/app/shared/model/competency-grades.model';
import { MyPmsGroupGradeModel } from 'src/app/shared/model/pms-group-grade.model';
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 {
check: boolean;
......@@ -31,24 +34,92 @@ export class PmsGradeManagementComponent {
dataLoading = false
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,
private pmsGroupGradeService: PmsGroupGradeService,
private dialog: MatDialog,
private cdr: ChangeDetectorRef) {
this.sendPathTitle.emit(['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนเกรด', 'การจัดการเกรด'])
}
ngOnInit(): void {
this.getPmsGroupGradeList()
}
selectData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { check: false, code: '', tdesc: '', edesc: '', pmsGrade: [] }))
// selectData(dataSelect?: DataModel) {
// 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() {
this.dataLoading = true
this.selectedItems.data.clear()
this.pmsGroupGradeService.getList().subscribe({
next: response => {
this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, pmsGrade: x.pmsGrade }))
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.selectedItems.key = 'code'
this.selectedItems.count = 0
this.searchChange()
this.dataLoading = false
this.cdr.detectChanges()
......@@ -79,7 +150,6 @@ export class PmsGradeManagementComponent {
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
this.dataListCheck()
}
dataListFilter() {
......@@ -97,37 +167,95 @@ export class PmsGradeManagementComponent {
}
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()
if (!this.numSelectItem()) {
this.showAlert('กรุณาเลือกข้อมูลที่ต้องการลบ', 'error')
return
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
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() {
const selectAll = this.isDataListCheckedAll;
this.dataListFilter().forEach(x => x.check = selectAll);
this.dataListCheck();
onSelectItemChange(arg: any) {
this.selectedItems = arg
console.log('selected',this.selectedItems)
}
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)
numSelectItem() {
const selectedKeys = Array.from(this.selectedItems.data.keys());
const num = this.dataList.filter(x => selectedKeys.includes(x.code) && this.selectedItems.data.get(x.code)).length
return num
}
}
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">
<div class="flex items-center">
......@@ -21,7 +21,7 @@
<div class="relative shadow-md">
<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"
(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>
......@@ -30,28 +30,59 @@
</div>
<div class="px-1">
<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>
Add
(click)="modalStatus='add';selectData()" data-hs-overlay="#time-attendance-modal"
</button>
</div>
<div class="px-1">
<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>
Delete
</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">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div>
</div>
</div>
</div>
<div class="page px-rem">
</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';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">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
......@@ -101,9 +132,6 @@
<td class="flex justify-center">
<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>
<!-- <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>
</tr>
</tbody>
......@@ -147,9 +175,275 @@
items</span>
</ul>
</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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
......@@ -184,12 +478,6 @@
Clear
</button>
</div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div>
</div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0">
......@@ -256,7 +544,6 @@
<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>
<!-- <input type="text" class="ti-form-input" [(ngModel)]="pmsWorkingTime.select.detailUnit"> -->
<select class="ti-form-select" [(ngModel)]="pmsWorkingTime.select.detailUnit">
<option *ngFor="let item of ['นาที','ชั่วโมง','วัน','ครั้ง']" [value]="item">{{item}}</option>
</select>
......@@ -376,9 +663,9 @@
</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="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
......@@ -444,10 +731,10 @@
</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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
......@@ -571,4 +858,4 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</div> -->
\ 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 { MyEmeventgrpModel } from 'src/app/shared/model/emeventgrp.model';
import { EventgrpModel, MyEventgrpModel, } from 'src/app/shared/model/eventgrp.model';
......@@ -6,10 +6,15 @@ import { PmsWorkingTimeModel, MyPmsWorkingTimeModel } from 'src/app/shared/model
import { EventgrpService } from 'src/app/shared/services/eventgrp.service';
import { FileService } from 'src/app/shared/services/file.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 {
currentPage: number,
page: number[],
search: string
search: string,
pageSize: number
}
@Component({
selector: 'app-time-attendance-manage',
......@@ -27,13 +32,52 @@ export class TimeAttendanceManageComponent {
modal: table = {
currentPage: 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: [] }
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(
private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private dialog: MatDialog,
private fileService: FileService,
private eventgrpService: EventgrpService,
private pmsWorkingTimeService: PmsWorkingTimeService,
......@@ -45,12 +89,18 @@ export class TimeAttendanceManageComponent {
}
getPmsWorkingTimeList() {
this.pmsWorkingTime.loading = true
this.selectedItems.data.clear()
this.pmsWorkingTimeService.getList().subscribe({
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.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange()
this.cdr.detectChanges();
}, error: error => {
......@@ -61,7 +111,7 @@ export class TimeAttendanceManageComponent {
}
pmsWorkingTimeFilter() {
return this.pmsWorkingTime.dataList.filter((x) => {
const data = x.data
const data = x
const match = data.pmsWorkingTimeId.toLowerCase().includes(this.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
data.detailUnit.toLowerCase().includes(this.search.toLowerCase()) ||
......@@ -73,22 +123,96 @@ export class TimeAttendanceManageComponent {
this.currentPage = 1;
const filteredData = this.pmsWorkingTimeFilter();
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() {
const dataCheck = this.pmsWorkingTimeFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.pmsWorkingTime.dataList.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked)
// selectData(data?: PmsWorkingTimeModel) {
// this.pmsWorkingTime.select = new MyPmsWorkingTimeModel(data)
// }
selectWorkingtime(pmsWorkingTime?: PmsWorkingTimeModel) {
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() {
this.eventgrp.loading = true
......@@ -97,7 +221,6 @@ export class TimeAttendanceManageComponent {
this.eventgrp.dataList = response.map(x => ({ check: false, data: new MyEventgrpModel(x) }))
this.eventgrp.loading = false
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.searchChange()
this.cdr.detectChanges();
}, error: error => {
......@@ -109,7 +232,7 @@ export class TimeAttendanceManageComponent {
eventgrpListFilter() {
return this.eventgrp.dataList.filter(x => {
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;
})
}
......@@ -135,51 +258,55 @@ export class TimeAttendanceManageComponent {
this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
}
updatePmsWorkingTime() {
this.pmsWorkingTime.loading = true
this.pmsWorkingTimeService.post(new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmsWorkingTimeList()
this.searchChange()
} else {
this.showAlert(response.message, 'error')
this.pmsWorkingTime.loading = false
}
this.cdr.detectChanges()
}, error: error => {
this.showAlert(error.message, 'error')
this.pmsWorkingTime.loading = false
this.cdr.detectChanges()
}
})
}
deletePmsWorkingTime() {
let body: PmsWorkingTimeModel[] = []
if (this.modalStatus == "deleteGroup") {
body = this.pmsWorkingTime.dataList.filter(x => x.check).map(x => new MyPmsWorkingTimeModel(x.data))
} else {
body = [new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)]
}
this.pmsWorkingTime.loading = true
this.pmsWorkingTimeService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmsWorkingTimeList()
} else {
this.showAlert(response.message, 'error')
this.pmsWorkingTime.loading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.pmsWorkingTime.loading = false
this.cdr.detectChanges()
}
})
}
oneventgrpModalSearchChange() {
this.eventgrpmodal.currentPage = 1
this.eventgrpmodal.page = Array.from({ length: Math.ceil(this.eventgrpListFilter().length / 10) }, (_, i) => i + 1);
}
// updatePmsWorkingTime() {
// this.pmsWorkingTime.loading = true
// this.pmsWorkingTimeService.post(new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)).subscribe({
// next: response => {
// if (response.success) {
// this.showAlert(response.message, 'success')
// this.getPmsWorkingTimeList()
// this.searchChange()
// } else {
// this.showAlert(response.message, 'error')
// this.pmsWorkingTime.loading = false
// }
// this.cdr.detectChanges()
// }, error: error => {
// this.showAlert(error.message, 'error')
// this.pmsWorkingTime.loading = false
// this.cdr.detectChanges()
// }
// })
// }
// deletePmsWorkingTime() {
// let body: PmsWorkingTimeModel[] = []
// if (this.modalStatus == "deleteGroup") {
// body = this.pmsWorkingTime.dataList.filter(x => x.check).map(x => new MyPmsWorkingTimeModel(x.data))
// } else {
// body = [new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)]
// }
// this.pmsWorkingTime.loading = true
// this.pmsWorkingTimeService.delete(body).subscribe({
// next: response => {
// if (response.success) {
// this.showAlert(response.message, 'success')
// this.getPmsWorkingTimeList()
// } else {
// this.showAlert(response.message, 'error')
// this.pmsWorkingTime.loading = false
// this.cdr.detectChanges()
// }
// }, error: error => {
// this.showAlert(error.message, 'error')
// this.pmsWorkingTime.loading = false
// this.cdr.detectChanges()
// }
// })
// }
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
......@@ -188,6 +315,34 @@ export class TimeAttendanceManageComponent {
}
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