Skip to content

M
myAppraisal
Commit b0875272 by Nattana Chaiyamat
Options

การประเมินจัดการประสิทธิภาพ>การจัดการประเมิน>จัดกลุ่มประเมิน

parent b27d54ee
Showing with 373 additions and 300 deletions
src/app/components/company-components/account-settings/user-settings/user-settings.component.ts
......@@ -284,14 +284,11 @@ export class UserSettingsComponent {
clearDataUser(currentModal: string) {
if (currentModal == 'add') {
this.user.select.usernameId = ''
this.user.select.employee.employeeId = ''
this.user.select.role.roleId = ''
this.user.select.level.userLevel = ''
this.selectUser()
} else if (currentModal == 'edit') {
this.user.select.employee.employeeId = ''
this.user.select.role.roleId = ''
this.user.select.level.userLevel = ''
this.selectEmployee()
this.selectRole()
this.selectLevel()
}
}
showAlert(text: string, type: 'success' | 'error') {
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/edit-evaluation-grouping/edit-evaluation-grouping.component.html
......@@ -12,36 +12,33 @@
</div>
</div>
</div>
<div class="py-2 border-b-2 border-collapse ">
<div class="grid grid-cols-3 gap-6 mt-2 ">
<div class="mt-2rem pb-1rem border-b-2 border-collapse ">
<div class="grid grid-cols-3">
<div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">ระดับพนักงาน</label>
<label class="ti-form-label">ระดับพนักงาน</label>
</div>
</div>
<div class="grid">
<input type="text" id="input-label"
class="py-2 px-3 ltr:pr-11 rtl:pl-11 ti-form-input w-full rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10 w-1/2 bg-input-readonly"
readonly [(ngModel)]="pl.tdesc">
<div class="grid grid-cols-6">
<input type="text" class="ti-form-input !bg-input-readonly" readonly [(ngModel)]="pl.plId">
</div>
</div>
<div class="header-title-type">
<div class="flex justify-between">
<div class="header-title-type mt-2rem mb-1rem">
<div class="flex justify-between ">
<div class="flex">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-checkbox-group-1">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">0 Selected</label>
<input type="checkbox" class="ti-form-checkbox pointer-events-none" [(ngModel)]="isDataListChecked">
<label class="text-sm text-gray-500 mx-2 pointer-events-none">
{{numDataListChecked}} Selected</label>
</div>
<div class="flex items-center">
<!-- <i (click)="toggleCheckbox()"
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
(click)="toggleCheckbox()">Select All</label> -->
<div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
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">Select All</label>
</div>
</div>
</div>
......@@ -51,7 +48,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"
style="height: 40px;">
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>
......@@ -60,21 +57,23 @@
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-20px m-0 shadow-md"
data-hs-overlay="#edit-evaluation-grouping-alert-add-modal">
data-hs-overlay="#edit-evaluation-grouping-alert-modal" (click)="currentModal='save'">
<i class="ri-save-3-line"></i>
Save
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#edit-evaluation-grouping-table-modal-select">
(click)="modal.search='';searchModalChange(pmstopicListFilter())"
data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-modal">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#edit-evaluation-grouping-alert-delete-modal">
data-hs-overlay="#edit-evaluation-grouping-alert-modal"
(click)="currentModal='deleteGroup';pmsGroupAssessmentIndex=-1">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
......@@ -92,97 +91,109 @@
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr
*ngFor="let item of[
['HS-01', 'C1 CUSTOMER ORIENTED (SQCOME)','HOSHIN','5.0'],
['HS-02', 'C2 MANUFACTURING OPTIMIZATION','HOSHIN','3.0'],
['HS-03', 'C3 INCREASE EMPLOYEE ENGAGEMENT','HOSHIN','3.0'],
['HS-04', 'C4 HEALTHY FINANCIAL','HOSHIN','3.0'],
['HS-05', 'C5 RISK MANAGEMENT (TAXATION)','HOSHIN','1.0'],
['KP-01', 'ประสาทงานกับวิทยากร ผู้เข้ารับการอบรมทั้งภายในเเละภายนอกตามเเผนการฝึกอบรมพัฒนา','KPI','10.0']];let i = index">
<td style="font-size: 12px; width: 10%;" class="text-center">
<input style="margin-right: 20px;" type="checkbox"
class="ti-form-checkbox cursor-pointer ">
<label>{{item[0]}}</label>
</td>
<td style="font-size: 12px; width: 35%; word-break: break-word; white-space: normal;">
{{item[1]}}
</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="text-center" style="font-size: 12px; width: 15%;">{{item[3]}}</td>
<td class="flex justify-center items-center">
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#edit-evaluation-grouping-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f || l || item === 'ระดับความหวัง'">
<span class="text-sm">{{ item }}</span>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="pmsGroupAssessment.loading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!pmsGroupAssessment.loading&&!pmsGroupAssessmentListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!pmsGroupAssessment.loading&&pmsGroupAssessmentListFilter().length">
<tr
*ngFor="let item of pmsGroupAssessmentListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer"
id="checkbox-{{item.data.pmsTopic.pmsTopicId}}" [(ngModel)]="item.check"
(ngModelChange)="dataListCheck()">
<label for="checkbox-{{item.data.pmsTopic.pmsTopicId}}">
&nbsp;{{item.data.pmsTopic.pmsTopicId}}
</label>
</td>
<td style="font-size: 12px; width: 60%;">
{{item.data.pmsTopic.tdesc}}
</td>
<td style="font-size: 12px">
{{item.data.pmsTopic.pmsType.tdesc}}
</td>
<td style="font-size: 12px;">
{{item.data.pmsTopic.weight}}
</td>
<td class="flex justify-center">
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#edit-evaluation-grouping-alert-modal"
(click)="currentModal='delete';pmsGroupAssessmentIndex=(((currentPage-1) * 10)+i);pmsGroupAssessmentIndex=i;searchModalChange(pmstopicListFilter())"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a>
</li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{pmsGroupAssessmentListFilter().length<10
?pmsGroupAssessmentListFilter().length: (currentPage==page.length ? ((currentPage * 10) -
((currentPage * 10) - pmsGroupAssessmentListFilter().length) ) :(currentPage * 10) ) }} of
{{pmsGroupAssessmentListFilter().length}} items</span>
</ul>
</div>
</nav>
</div>
<div id="edit-evaluation-grouping-table-modal-select" 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 h-[calc(100%-3.5rem)] items-center">
<div id="edit-evaluation-grouping-pmstopic-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">
<h3 class="text-xxl font-bold text-primary">
......@@ -190,7 +201,7 @@
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-grouping-table-modal-select">
data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
......@@ -202,161 +213,130 @@
<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">
placeholder="Search by No. or Name" [(ngModel)]="modal.search"
(ngModelChange)="searchModalChange(pmstopicListFilter())">
<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 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 class="overflow-auto table-bordered" style="border-radius: 5px;">
<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 ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','Action']; let f = first; let l = last; let i = index">
<th scope="col"
class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="pmstopic.loading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]"
class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="20" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr
*ngFor="let item of[
['HS-01', 'C1 CUSTOMER ORIENTED (SQCOME)','HOSHIN','5.0'],
['HS-02', 'C2 MANUFACTURING OPTIMIZATION','HOSHIN','3.0'],
['HS-03', 'C3 INCREASE EMPLOYEE ENGAGEMENT','HOSHIN','3.0'],
['HS-04', 'C4 HEALTHY FINANCIAL','HOSHIN','3.0'],
['HS-05', 'C5 RISK MANAGEMENT (TAXATION)','HOSHIN','1.0'],
['KP-01', 'ประสาทงานกับวิทยากร ผู้เข้ารับการอบรมทั้งภายในเเละภายนอกตามเเผนการฝึกอบรมพัฒนา','KPI','10.0']];let i = index">
<td style="font-size: 12px; width: 10%;" class="text-center">
{{item[0]}}
</td>
<td
style="font-size: 12px; width: 35%; word-break: break-word; white-space: normal;">
{{item[1]}}
</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="text-center" style="font-size: 12px; width: 15%;">{{item[3]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
</td>
</tr>
</tbody>
<tbody *ngIf="!pmstopic.loading&&!pmstopicListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!pmstopic.loading&&pmstopicListFilter().length">
<tr
*ngFor="let item of pmstopicListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
{{item.data.pmsTopicId}}
</td>
<td>{{item.data.tdesc}}</td>
<td>{{item.data.pmsType.tdesc}}</td>
<td>{{item.data.weight}}</td>
<td class="text-center"> <button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#edit-evaluation-grouping-table-modal-select">
data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-modal"
(click)="selectPmstopic(item.data)">
<i class="ri-add-line"></i>
Select
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);"
aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</button></td>
<div id="edit-evaluation-grouping-alert-add-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-grouping-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</tr>
</tbody>
</table>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="modal.currentPage = (modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of modal.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&modal.currentPage!=1&&modal.currentPage!=2&&modal.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==modal.currentPage-1||item==modal.currentPage||item==modal.currentPage+1)">
<a class="page-link" href="javascript:void(0);"
[class.active]="item==modal.currentPage"
(click)="modal.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==modal.page.length-2&&modal.currentPage!=modal.page.length&&modal.currentPage!=modal.page.length-1&&modal.currentPage!=modal.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="modal.currentPage = (modal.currentPage > modal.page.length-1 ? modal.currentPage: modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((modal.currentPage-1) * 10)+1}} to {{pmstopicListFilter().length<10
?pmstopicListFilter().length: (modal.currentPage==modal.page.length ?
((modal.currentPage * 10) - ((modal.currentPage * 10) - pmstopicListFilter().length)
) :(modal.currentPage * 10) ) }} of {{pmstopicListFilter().length}} items</span>
</ul>
</nav>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#edit-evaluation-grouping-modal-add">
data-hs-overlay="#edit-evaluation-grouping-pmstopic-table-modal">
ย้อนกลับ
</button>
<!-- <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-grouping-alert-add-modal" (click)="addUser();showSuccess()">
บันทึกข้อมูล
</a> -->
</div>
</div>
</div>
</div>
</div>
<div id="edit-evaluation-grouping-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div id="edit-evaluation-grouping-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">
......@@ -365,64 +345,43 @@
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-grouping-alert-edit-modal">
data-hs-overlay="#edit-evaluation-grouping-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
<p class="mt-1 text-gray-800 dark:text-white/70" *ngIf="currentModal=='save'">
ยืนยันการบันทึกข้อมูลหรือไม่!
</p>
<p class="mt-1 text-gray-800 dark:text-white/70"
*ngIf="currentModal=='delete'||currentModal=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<div class="flex justify-end mt-2rem mb-1rem" *ngIf="currentModal=='save'">
<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="#edit-evaluation-grouping-modal-edit">
data-hs-overlay="#edit-evaluation-grouping-alert-modal">
ย้อนกลับ
</button>
<!-- <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-grouping-alert-edit-modal"
(click)="addUser();showSuccessEdit()">
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-grouping-alert-modal" (click)="savePmsGroupAssessment()">
บันทึกข้อมูล
</a> -->
</div>
</div>
</div>
</div>
</div>
<div id="edit-evaluation-grouping-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#edit-evaluation-grouping-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</a>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<div class="flex justify-end mt-2rem mb-1rem"
*ngIf="currentModal=='delete'||currentModal=='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="#edit-evaluation-grouping-alert-delete-modal">
data-hs-overlay="#edit-evaluation-grouping-alert-modal">
ย้อนกลับ
</button>
<!-- <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-grouping-alert-delete-modal"
(click)="addUser();showSuccessDelete()">
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-evaluation-grouping-alert-modal" (click)="deletePmsGroupAssessment()">
ลบข้อมูล
</a> -->
</a>
</div>
</div>
</div>
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/edit-evaluation-grouping/edit-evaluation-grouping.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
import { MyPmsGroupAssessmentModel } from 'src/app/shared/model/pms-group-assessment.model';
import { MyPmsGroupAssessment1Model, PmsGroupAssessment1Model } from 'src/app/shared/model/pms-group-assessment1.model';
import { MyPmstopicModel, PmstopicModel } from 'src/app/shared/model/pmstopic.model';
import { PmsGroupAssessmentService } from 'src/app/shared/services/pms-group-assessment.service';
import { PmstopicService } from 'src/app/shared/services/pmstopic.service';
export interface DataModal {
search: string,
currentPage: number,
page: number[]
}
@Component({
selector: 'app-edit-evaluation-grouping',
templateUrl: './edit-evaluation-grouping.component.html',
......@@ -14,19 +22,60 @@ export class EditEvaluationGroupingComponent {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
currentModal: 'add' | 'edit' | 'delete' | 'deleteGroup' = "add"
currentModal: 'save' | 'delete' | 'deleteGroup' = "save"
modal: DataModal = {
search: "",
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1)
}
pmsGroupAssessment: { loading: boolean, select: PmsGroupAssessment1Model, dataList: { check: boolean, data: PmsGroupAssessment1Model }[] } = { loading: false, select: new MyPmsGroupAssessment1Model(), dataList: [] }
pmsGroupAssessmentIndex = -1
pmstopic: { loading: boolean, select: PmstopicModel, dataList: { check: boolean, data: PmstopicModel }[] } = { loading: false, select: new MyPmstopicModel(), dataList: [] }
numDataListChecked = 0
isDataListChecked = false
isDataListCheckedAll = false
constructor(private toastr: ToastrService,
private pmsGroupAssessmentService: PmsGroupAssessmentService,
private cdr: ChangeDetectorRef
private cdr: ChangeDetectorRef,
private pmstopicService: PmstopicService
) { }
ngOnInit(): void {
this.getPmsGroupAssessmentBy_plId()
this.getPmstopicList()
}
getPmstopicList() {
this.pmstopic.loading = true
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.loading = false
this.cdr.detectChanges()
}, error: error => {
this.pmstopic.loading = false
this.cdr.detectChanges()
}
})
}
pmstopicListFilter() {
return this.pmstopic.dataList.filter(x => {
const data = x.data
if (this.pmsGroupAssessment.dataList.some(y => y.data.pmsTopic.pmsTopicId == data.pmsTopicId)) {
return
}
const match = data.pmsTopicId.toLowerCase().includes(this.modal.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase())
return match
})
}
selectPmstopic(data?: PmstopicModel) {
this.pmsGroupAssessment.dataList.push({ check: false, data: new MyPmsGroupAssessment1Model({ pmsTopic: new MyPmstopicModel(data) }) })
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.cdr.markForCheck()
}
getPmsGroupAssessmentBy_plId() {
......@@ -56,6 +105,11 @@ export class EditEvaluationGroupingComponent {
this.pmsGroupAssessment.select = new MyPmsGroupAssessment1Model(data)
}
searchModalChange(dataList: any[]) {
this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
this.cdr.markForCheck()
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.pmsGroupAssessmentListFilter().length / 10) }, (_, i) => i + 1)
......@@ -74,6 +128,49 @@ export class EditEvaluationGroupingComponent {
this.isDataListChecked = Boolean(this.numDataListChecked)
}
savePmsGroupAssessment() {
const body = {
personalLevel: new MyPLModel(this.pl),
companyId: "",
pmsGroupAssessment1List: this.pmsGroupAssessment.dataList.map(x => new MyPmsGroupAssessment1Model(x.data))
}
this.pmsGroupAssessmentService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
} else {
this.showAlert(response.message, 'error')
}
this.cdr.detectChanges()
}, error: error => {
this.showAlert(error.message, 'error')
this.cdr.detectChanges()
}
})
}
deletePmsGroupAssessment() {
switch (this.currentModal) {
case ('delete'): {
this.pmsGroupAssessment.dataList = this.pmsGroupAssessment.dataList.filter((_, i) => i != this.pmsGroupAssessmentIndex)
break;
}
case ('deleteGroup'): {
this.pmsGroupAssessment.dataList = this.pmsGroupAssessment.dataList.filter((x) => !x.check)
break;
}
}
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.cdr.markForCheck()
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
})
}
onBack() {
this.sendOnEdit.emit(false);
}
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.html
......@@ -54,8 +54,26 @@
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of pl.dataList;let i = index">
<tbody *ngIf="pl.loading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!pl.loading&&!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!pl.loading&&plListFilter().length">
<tr
*ngFor="let item of plListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td style="font-size: 12px; padding-left: 4rem;">{{item.data.plId}}</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 600px;">{{item.data.tdesc}}
</td>
......
src/app/components/performance-management-evaluation/assessment-management/evaluation-grouping/evaluation-grouping.component.ts
......@@ -99,7 +99,7 @@ export class EvaluationGroupingComponent {
plListFilter() {
return this.pl.dataList.filter(x => {
const data = x.data
const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
const match = data.plId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase())
return match;
});
}
......
src/app/components/performance-management-evaluation/name-registration-perfomance/assessment-topics/assessment-topics.component.html
......@@ -68,7 +68,7 @@
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','Action']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
......@@ -175,7 +175,8 @@
<div class="w-full flex justify-end">
<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)">
<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)">
......
src/assets/css/style.css
......@@ -24729,6 +24729,9 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.bg-input-readonly {
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.\!bg-input-readonly {
background-color: rgb(241 245 249) !important;
}
.ml-8 {
margin-left: 2rem;
......@@ -24907,10 +24910,9 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
margin-top: -0.75rem !important;
}
.\!rounded-t-none {
border-top-left-radius: 0rem !important;
border-top-right-radius: 0rem !important;
border-top-left-radius: 0rem !important;
border-top-right-radius: 0rem !important;
}
.rounded-t-none {
border-top-left-radius: 0rem;
......@@ -24919,4 +24921,4 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.masked-input {
-webkit-text-security: disc; /* Safari, Chrome */
}
\ No newline at end of file
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment