Skip to content

M
mySkill-x
Commit 7c12a7e4 by Natthaphat
Options

การประเมินสมรรถนะ > การจัดการสมรรถนะ > กำหนดผู้ประเมิน

parent 7dfbe0f3
Showing with 171 additions and 264 deletions
src/app/components/competency-assessment/competency-management/set-approvers/set-approvers.component.html
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by Name" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()"> [(ngModel)]="search">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i> <i class="ri-search-line text-gray"></i>
...@@ -20,156 +20,36 @@ ...@@ -20,156 +20,36 @@
import import
</button> </button>
</div> </div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div> </div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md"> <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="groupapprove_list"
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered" [columns]="columns" [checkBoxSetting]="false"
style="table-layout: auto;width: 100%;overflow-x: hidden;white-space: normal; word-break: break-word;"> (sendSelectData)="currentModal='edit';selectGroupapprove($event);openDialog()">
<thead> </app-datagrid-syncfution>
<tr>
<ng-container
*ngFor="let item of ['ชื่อพนักงาน','ลำดับที่ 1','ลำดับที่ 2','ลำดับที่ 3','ลำดับที่ 4','ลำดับที่ 5','การจัดการ']; 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">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="groupapprove_listLoading">
<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="!groupapprove_listLoading&&!groupapprove_listFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!groupapprove_listLoading&&groupapprove_listFilter().length">
<tr
*ngFor="let item of groupapprove_listFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td style="word-break: break-word;white-space: normal;">{{item.apsassessy.fname}}
{{item.apsassessy.lname}}</td>
<td style="word-break: break-word;white-space: normal;">{{item.apsapprove1.fname}}
{{item.apsapprove1.lname}}</td>
<td style="word-break: break-word;white-space: normal;">{{item.apsapprove2.fname}}
{{item.apsapprove2.lname}}</td>
<td style="word-break: break-word;white-space: normal;">{{item.apsapprove3.fname}}
{{item.apsapprove3.lname}}</td>
<td style="word-break: break-word;white-space: normal;">{{item.apsapprove4.fname}}
{{item.apsapprove4.lname}}</td>
<td style="word-break: break-word;white-space: normal;">{{item.apsapprove5.fname}}
{{item.apsapprove5.lname}}</td>
<td style="word-break: break-word;white-space: normal;" class="text-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="currentModel='edit';selectGroupapprove(item)"
data-hs-overlay="#set-approvers-modal"></i>
</td>
</tr>
</tbody>
</table>
</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>
</nav>
</div> </div>
<ng-template #setApproversModal let-modal>
<div id="set-approvers-modal" class="hs-overlay hidden ti-modal"> <h3 mat-dialog-title>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> {{currentModal=='add'?'เพิ่มหัวข้อสมรรถนะ':'กำหนดผู้ประเมิน'}}
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
กำหนดผู้ประเมิน
</h3> </h3>
<div class="flex justify-end"> <div class="w-full flex justify-end mb-1rem">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <div class="absolute flex">
data-hs-overlay="#set-approvers-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="clear()"> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" (click)="clear()">
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84" <i class="ti ti-eraser text-base"></i>
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 Clear
</button> </button>
</div> </div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div> </div>
</div> </div>
<div class="ti-modal-body mt-1"> <mat-dialog-content>
<label for="input-label" class="ti-form-label">ชื่อพนักงาน<span class="text-danger">*</span></label> <label for="input-label" class="ti-form-label">ชื่อพนักงาน<span class="text-danger">*</span></label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly <input type="text" id="input-label" class="ti-form-input w-1/2 !bg-input-readonly" readonly
[value]="groupapprove.apsassessy.fname + ' ' + groupapprove.apsassessy.lname"> [value]="groupapprove.apsassessy.thFullName">
<label for="input-label" class="ti-form-label mt-2rem">ระดับพนักงาน</label> <label for="input-label" class="ti-form-label mt-2rem">ระดับพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[value]="groupapprove.personalLevel.tdesc"> [value]="groupapprove.personalLevel.tdesc">
...@@ -178,8 +58,7 @@ ...@@ -178,8 +58,7 @@
<div class="relative flex rounded-md w-2/3"> <div class="relative flex rounded-md w-2/3">
<input type="text" name="hs-leading-button-add-on-with-icon-and-button" <input type="text" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly
style="padding-right: 2.5rem;" style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove1.thFullName">
[value]="groupapprove.apsapprove1.fname +' '+groupapprove.apsapprove1.lname">
<div <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"> 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 type="button" class="flex items-center text-red-500" <button type="button" class="flex items-center text-red-500"
...@@ -187,7 +66,7 @@ ...@@ -187,7 +66,7 @@
<i class="ti ti-circle-x cursor-pointer"></i> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="empnumber = 1" data-hs-overlay="#set-approvers-table-modal"> (click)="empnumber = 1;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -199,8 +78,7 @@ ...@@ -199,8 +78,7 @@
<div class="relative flex rounded-md w-2/3"> <div class="relative flex rounded-md w-2/3">
<input type="text" name="hs-leading-button-add-on-with-icon-and-button" <input type="text" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly
style="padding-right: 2.5rem;" style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove2.thFullName">
[value]="groupapprove.apsapprove2.fname +' '+groupapprove.apsapprove2.lname">
<div <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"> 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 type="button" class="flex items-center text-red-500" <button type="button" class="flex items-center text-red-500"
...@@ -208,7 +86,7 @@ ...@@ -208,7 +86,7 @@
<i class="ti ti-circle-x cursor-pointer"></i> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#set-approvers-table-modal" (click)="empnumber = 2"> (click)="empnumber = 2;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -221,8 +99,7 @@ ...@@ -221,8 +99,7 @@
<div class="relative flex rounded-md w-2/3"> <div class="relative flex rounded-md w-2/3">
<input type="text" name="hs-leading-button-add-on-with-icon-and-button" <input type="text" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly
style="padding-right: 2.5rem;" style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove3.thFullName">
[value]="groupapprove.apsapprove3.fname +' '+groupapprove.apsapprove3.lname">
<div <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"> 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 type="button" class="flex items-center text-red-500" <button type="button" class="flex items-center text-red-500"
...@@ -230,7 +107,7 @@ ...@@ -230,7 +107,7 @@
<i class="ti ti-circle-x cursor-pointer"></i> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#set-approvers-table-modal" (click)="empnumber = 3"> (click)="empnumber = 3;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -243,8 +120,7 @@ ...@@ -243,8 +120,7 @@
<div class="relative flex rounded-md w-2/3"> <div class="relative flex rounded-md w-2/3">
<input type="text" name="hs-leading-button-add-on-with-icon-and-button" <input type="text" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly
style="padding-right: 2.5rem;" style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove4.thFullName">
[value]="groupapprove.apsapprove4.fname +' '+groupapprove.apsapprove4.lname">
<div <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"> 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 type="button" class="flex items-center text-red-500" <button type="button" class="flex items-center text-red-500"
...@@ -252,7 +128,7 @@ ...@@ -252,7 +128,7 @@
<i class="ti ti-circle-x cursor-pointer"></i> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#set-approvers-table-modal" (click)="empnumber = 4"> (click)="empnumber = 4;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -265,8 +141,7 @@ ...@@ -265,8 +141,7 @@
<div class="relative flex rounded-md w-2/3"> <div class="relative flex rounded-md w-2/3">
<input type="text" name="hs-leading-button-add-on-with-icon-and-button" <input type="text" name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" readonly
style="padding-right: 2.5rem;" style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove5.thFullName">
[value]="groupapprove.apsapprove5.fname +' '+groupapprove.apsapprove5.lname">
<div <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"> 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 type="button" class="flex items-center text-red-500" <button type="button" class="flex items-center text-red-500"
...@@ -274,92 +149,58 @@ ...@@ -274,92 +149,58 @@
<i class="ti ti-circle-x cursor-pointer"></i> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#set-approvers-table-modal" (click)="empnumber = 5"> (click)="empnumber = 5;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
<div class="flex justify-end mt-3rem mb-1rem space-x-4"> </mat-dialog-content>
<button type="button" <mat-dialog-actions align="end">
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 type="button" mat-button [mat-dialog-close]
data-hs-overlay="#set-approvers-modal"> 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>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <button type="button" class="ti-btn ti-btn-success" mat-button (click)="addgroupapprove()"
data-hs-overlay="#set-approvers-alert-modal"> [class.ti-btn-disabled]="!groupapprove.apsapprove1.thFullName||!groupapprove.apsapprove2.thFullName||!groupapprove.apsapprove3.thFullName||(currentModal=='add')"
[disabled]="!groupapprove.apsapprove1.thFullName||!groupapprove.apsapprove2.thFullName||!groupapprove.apsapprove3.thFullName||(currentModal=='add')">
บันทึกข้อมูล บันทึกข้อมูล
</a> </button>
</div> </mat-dialog-actions>
</div> </ng-template>
</div>
</div>
</div>
<div id="set-approvers-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"> <ng-template #employeeTableModal let-modal>
<div class="max-h-full overflow-hidden ti-modal-content"> <h3 mat-dialog-title>
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
รายชื่อพนักงาน รายชื่อพนักงาน
</h3> </h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <mat-dialog-content>
data-hs-overlay="#set-approvers-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem"> <div class="flex justify-end pb-1rem">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " 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)]="search" [(ngModel)]="search" (ngModelChange)="searchEMP()">
(ngModelChange)="searchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i> <i class="ri-search-line text-gray"></i>
</div> </div>
</div> </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>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border"> <div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อ','นามสกุล','ตำเเหน่ง','หน่วยงาน','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อ','นามสกุล','ตำเเหน่ง','หน่วยงาน','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l"> [class.!text-center]="f">
<span class="text-sm">{{ item }}</span> <span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
*ngIf="!f && i==1"> <i class="ti ti-dots-vertical fs-l"></i>
<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>
<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="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> </div>
</th> </th>
</ng-container> </ng-container>
...@@ -373,59 +214,39 @@ ...@@ -373,59 +214,39 @@
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="employee_listFilter().length"> <tbody *ngIf="employee_listFilter().length">
<ng-container *ngIf="currentModel=='edit'">
<tr <tr
*ngFor="let item of employee_listFilter() | slice:((employeeModal.currentPage-1) * 10) : (((employeeModal.currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of employee_listFilter() | slice:((employeeModal.currentPage-1) * 10) : (((employeeModal.currentPage-1) * 10) + 10);let i = index">
<td style="font-size: 12px;">{{item.employeeId}}</td> <td>{{item.employeeId}}</td>
<td style="font-size: 12px; width: 20%;">{{item.fname}}</td> <td>{{item.fname}}</td>
<td style="font-size: 12px; width: 20%;">{{item.lname}}</td> <td>{{item.lname}}</td>
<td <td>
style="font-size: 12px; width: 20%; word-break: break-word; white-space: normal;">
{{item.position.tdesc}} {{item.position.tdesc}}
</td> </td>
<td style="font-size: 12px; width: 10%;">{{item.bu1.bu1id}}</td> <td>{{item.bu1.bu1id}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<div class="px-1"> <div class="px-1">
<button type="button" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" (click)="selectEMP(item);closeDialogEmp()">
(click)="selectEMP(item)" data-hs-overlay="#set-approvers-modal">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Select Select
</button> </button>
</div> </div>
</td> </td>
</tr> </tr>
</ng-container>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> <app-pagination [totalItems]="groupapprove_listFilter().length" [pageSize]="employeeModal.pageSize"
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="employeeModal.page.length"> (pageChange)="employeeModal.currentPage = $event"
<ul class="ti-pagination"> (pageSizeChange)="employeeModal.pageSize = $event;employeeModal.currentPage = 1"></app-pagination>
<li> </mat-dialog-content>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <mat-dialog-actions align="end">
(click)="employeeModal.currentPage = (employeeModal.currentPage-1 || 1)"> <button type="button" mat-button [mat-dialog-close]
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
</a> ย้อนกลับ
</li> </button>
<li *ngFor="let item of employeeModal.page"> </mat-dialog-actions>
<a class="page-link" href="javascript:void(0);" </ng-template>
[class.active]="item==employeeModal.currentPage"
(click)="employeeModal.currentPage=item">{{item}}
</a>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="employeeModal.currentPage = (employeeModal.currentPage > employeeModal.page.length-1 ? employeeModal.currentPage: employeeModal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div id="set-approvers-upload-modal" class="hs-overlay hidden ti-modal" aria-overlay="'false'"> <div id="set-approvers-upload-modal" class="hs-overlay hidden ti-modal" aria-overlay="'false'">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
......
src/app/components/competency-assessment/competency-management/set-approvers/set-approvers.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model'; import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
import { GroupApproveModel, MyGroupApproveModel } from 'src/app/shared/model/group-approve.model'; import { GroupApproveModel, MyGroupApproveModel } from 'src/app/shared/model/group-approve.model';
...@@ -9,6 +11,7 @@ interface table { ...@@ -9,6 +11,7 @@ interface table {
currentPage: number, currentPage: number,
page: number[], page: number[],
search: string search: string
pageSize: number
} }
@Component({ @Component({
...@@ -16,14 +19,15 @@ interface table { ...@@ -16,14 +19,15 @@ interface table {
templateUrl: './set-approvers.component.html', templateUrl: './set-approvers.component.html',
styleUrls: ['./set-approvers.component.scss'] styleUrls: ['./set-approvers.component.scss']
}) })
export class SetApproversComponent { export class SetApproversComponent implements OnInit{
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
searchModal = ""
groupapprove_list: GroupApproveModel[] = [] groupapprove_list: GroupApproveModel[] = []
groupapprove_listLoading = false groupapprove_listLoading = false
groupapprove: GroupApproveModel = new MyGroupApproveModel() groupapprove: GroupApproveModel = new MyGroupApproveModel()
search = ""
employee_list: EmployeeModel[] = [] employee_list: EmployeeModel[] = []
employee_listLoading = false employee_listLoading = false
...@@ -31,19 +35,67 @@ export class SetApproversComponent { ...@@ -31,19 +35,67 @@ export class SetApproversComponent {
employeeModal: table = { employeeModal: table = {
currentPage: 1, currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1), page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "" search: "",
pageSize: 10
} }
empnumber = 0 empnumber = 0
currentModel: 'add' | 'edit' | 'delete' = "add" currentModal: 'add' | 'edit' | 'delete' = "add"
selectedFile: File | null = null; selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์'; selectedFileName: string = 'กรุณาเลือกไฟล์';
columns: ColumnModel[] = [{
field: "apsassessy.thFullName",
headerText: "ชื่อพนักงาน",
type: "string",
isPrimaryKey: true,
},
{
field: "apsapprove1.thFullName",
headerText: "ลำดับที่ 1",
type: "string"
},
{
field: "apsapprove2.thFullName",
headerText: "ลำดับที่ 2",
type: "string"
},
{
field: "apsapprove3.thFullName",
headerText: "ลำดับที่ 3",
type: "string"
},
{
field: "apsapprove4.thFullName",
headerText: "ลำดับที่ 4",
type: "string"
},
{
field: "apsapprove5.thFullName",
headerText: "ลำดับที่ 5",
type: "string"
}]
searchSettings = {
fields: ['apsassessy.thFullName', 'apsapprove1.thFullName', 'apsapprove2.thFullName','apsapprove3.thFullName','apsapprove4.thFullName','apsapprove5.thFullName'],
operator: 'contains',
ignoreCase: false
};
search = ''
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
@ViewChild("setApproversModal") setApproversModal: any;
@ViewChild("employeeTableModal") employeeTableModal: any;
dialogRef: any
dialogRefEmp: any
constructor(private groupapproveService: GroupApproveService, constructor(private groupapproveService: GroupApproveService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private employeeService: EmployeeService, private employeeService: EmployeeService,
private fileService: FileService private fileService: FileService,
private dialog: MatDialog
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getGroupapprove_list() this.getGroupapprove_list()
...@@ -114,8 +166,10 @@ export class SetApproversComponent { ...@@ -114,8 +166,10 @@ export class SetApproversComponent {
}) })
} }
employee_listFilter() { employee_listFilter() {
return this.employee_list.filter(x => x.fname.toLowerCase().includes(this.search.toLowerCase()) || return this.employee_list.filter(x =>
x.lname.toLowerCase().includes(this.search.toLowerCase())) x.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
x.position.edesc.toLowerCase().includes(this.search.toLowerCase()))
} }
searchEMP() { searchEMP() {
...@@ -139,15 +193,19 @@ export class SetApproversComponent { ...@@ -139,15 +193,19 @@ export class SetApproversComponent {
} else if (this.empnumber == 5) { } else if (this.empnumber == 5) {
this.groupapprove.apsapprove5 = data this.groupapprove.apsapprove5 = data
} }
} }
getGroupapprove_list() { getGroupapprove_list() {
this.groupapprove_listLoading = true this.groupapprove_listLoading = true
this.selectedItems.data.clear()
this.groupapproveService.getList().subscribe({ this.groupapproveService.getList().subscribe({
next: response => { next: response => {
this.groupapprove_list = response.map(x => new MyGroupApproveModel(x)) this.groupapprove_list = response.map(x => {
this.selectedItems.data.set(x.personalLevel.plId, false)
return new MyGroupApproveModel(x)
})
this.selectedItems.key = 'personalLevel.plId'
this.selectedItems.count = 0
this.groupapprove_listLoading = false this.groupapprove_listLoading = false
this.searchChange()
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.groupapprove_listLoading = false this.groupapprove_listLoading = false
...@@ -155,27 +213,34 @@ export class SetApproversComponent { ...@@ -155,27 +213,34 @@ export class SetApproversComponent {
} }
}) })
} }
searchChange() { searchChange() {
this.currentPage = 1 this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.groupapprove_listFilter().length / 10) }, (_, i) => i + 1) this.page = Array.from({ length: Math.ceil(this.groupapprove_listFilter().length / 10) }, (_, i) => i + 1)
} }
groupapprove_listFilter() { groupapprove_listFilter() {
return this.groupapprove_list.filter(x => return this.groupapprove_list.filter(x =>
x.apsassessy.employeeId.toLowerCase().includes(this.search.toLowerCase()) || (x.apsassessy.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsassessy.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove1.employeeId.toLowerCase().includes(this.search.toLowerCase()) || x.apsapprove1.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove1.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove2.employeeId.toLowerCase().includes(this.search.toLowerCase()) || x.apsapprove2.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove2.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove3.employeeId.toLowerCase().includes(this.search.toLowerCase()) || x.apsapprove3.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove3.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove4.employeeId.toLowerCase().includes(this.search.toLowerCase()) || x.apsapprove4.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove4.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove5.employeeId.toLowerCase().includes(this.search.toLowerCase()) || x.apsapprove5.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
(x.apsassessy.fname.toLowerCase() + " " + x.apsassessy.lname.toLowerCase()).includes(this.search.toLowerCase()) || x.apsapprove5.thFullName.toLowerCase().includes(this.search.toLowerCase()))
(x.apsapprove1.fname.toLowerCase() + " " + x.apsapprove1.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
(x.apsapprove2.fname.toLowerCase() + " " + x.apsapprove2.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
(x.apsapprove3.fname.toLowerCase() + " " + x.apsapprove3.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
(x.apsapprove4.fname.toLowerCase() + " " + x.apsapprove4.lname.toLowerCase()).includes(this.search.toLowerCase()) ||
(x.apsapprove5.fname.toLowerCase() + " " + x.apsapprove5.lname.toLowerCase()).includes(this.search.toLowerCase())
) )
} }
selectGroupapprove(groupapprove?: GroupApproveModel) { selectGroupapprove(groupapprove?: GroupApproveModel) {
this.groupapprove = new MyGroupApproveModel(groupapprove) this.groupapprove = new MyGroupApproveModel(groupapprove)
} }
...@@ -232,4 +297,24 @@ export class SetApproversComponent { ...@@ -232,4 +297,24 @@ export class SetApproversComponent {
this.groupapprove.apsapprove4 = data this.groupapprove.apsapprove4 = data
this.groupapprove.apsapprove5 = data this.groupapprove.apsapprove5 = data
} }
openDialog() {
this.dialogRef = this.dialog.open(this.setApproversModal, {
width: '500px',
})
}
closeDialog() {
this.dialogRef.close()
}
openDialogEmp() {
this.dialogRefEmp = this.dialog.open(this.employeeTableModal, {
width: '1200px',
})
}
closeDialogEmp() {
this.dialogRefEmp.close()
}
} }
\ 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