Skip to content

M
mySkill-x
Commit 7c12a7e4 by Natthaphat
Options

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

parent 7dfbe0f3
Showing with 313 additions and 406 deletions
src/app/components/competency-assessment/competency-management/set-approvers/set-approvers.component.html
......@@ -3,8 +3,8 @@
<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 Name"
[(ngModel)]="search" (ngModelChange)="searchChange()">
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>
......@@ -20,412 +20,233 @@
import
</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="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"
style="table-layout: auto;width: 100%;overflow-x: hidden;white-space: normal; word-break: break-word;">
<thead>
<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>
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="groupapprove_list"
[columns]="columns" [checkBoxSetting]="false"
(sendSelectData)="currentModal='edit';selectGroupapprove($event);openDialog()">
</app-datagrid-syncfution>
</div>
<div id="set-approvers-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">
กำหนดผู้ประเมิน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#set-approvers-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
<ng-template #setApproversModal let-modal>
<h3 mat-dialog-title>
{{currentModal=='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)="clear()">
<i class="ti ti-eraser text-base"></i>
Clear
</button>
</div>
</div>
</div>
<mat-dialog-content>
<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
[value]="groupapprove.apsassessy.thFullName">
<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
[value]="groupapprove.personalLevel.tdesc">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 1</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove1.thFullName">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 1;selectEMP();empnumber = 2;selectEMP();empnumber = 3;selectEMP();empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="empnumber = 1;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="clear()">
<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
</div>
<ng-container *ngIf="groupapprove.apsapprove1.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 2</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove2.thFullName">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 2;selectEMP();empnumber = 3;selectEMP();empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<i class="ti ti-circle-x cursor-pointer"></i>
</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 type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="empnumber = 2;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div> -->
</div>
</div>
<div class="ti-modal-body mt-1">
<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
[value]="groupapprove.apsassessy.fname + ' ' + groupapprove.apsassessy.lname">
<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
[value]="groupapprove.personalLevel.tdesc">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 1</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;"
[value]="groupapprove.apsapprove1.fname +' '+groupapprove.apsapprove1.lname">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 1;selectEMP();empnumber = 2;selectEMP();empnumber = 3;selectEMP();empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="empnumber = 1" data-hs-overlay="#set-approvers-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
<ng-container *ngIf="groupapprove.apsapprove1.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 2</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;"
[value]="groupapprove.apsapprove2.fname +' '+groupapprove.apsapprove2.lname">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 2;selectEMP();empnumber = 3;selectEMP();empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<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="#set-approvers-table-modal" (click)="empnumber = 2">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="groupapprove.apsapprove2.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 3</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;"
[value]="groupapprove.apsapprove3.fname +' '+groupapprove.apsapprove3.lname">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 3;selectEMP();empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<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="#set-approvers-table-modal" (click)="empnumber = 3">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="groupapprove.apsapprove3.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 4</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;"
[value]="groupapprove.apsapprove4.fname +' '+groupapprove.apsapprove4.lname">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<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="#set-approvers-table-modal" (click)="empnumber = 4">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="groupapprove.apsapprove4.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 5</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;"
[value]="groupapprove.apsapprove5.fname +' '+groupapprove.apsapprove5.lname">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 5;selectEMP()">
<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="#set-approvers-table-modal" (click)="empnumber = 5">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="groupapprove.apsapprove2.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 3</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove3.thFullName">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 3;selectEMP();empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="empnumber = 3;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</ng-container>
<div class="flex justify-end mt-3rem 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="#set-approvers-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#set-approvers-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</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">
<div class="max-h-full overflow-hidden ti-modal-content">
<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="#set-approvers-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="groupapprove.apsapprove3.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 4</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove4.thFullName">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 4;selectEMP();empnumber = 5;selectEMP()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="empnumber = 4;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
<div class="ti-modal-body">
<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)]="search"
(ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<!-- <div 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
</ng-container>
<ng-container *ngIf="groupapprove.apsapprove4.employeeId">
<label class="ti-form-label mt-2rem">ผู้ประเมินลำดับที่ 5</label>
<div class="flex">
<div class="relative flex rounded-md w-2/3">
<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
style="padding-right: 2.5rem;" [value]="groupapprove.apsapprove5.thFullName">
<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 type="button" class="flex items-center text-red-500"
(click)="empnumber = 5;selectEMP()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
(click)="empnumber = 5;openDialogEmp()">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div> -->
</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">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อ','นามสกุล','ตำเเหน่ง','หน่วยงาน','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[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>
<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>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!employee_listFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="employee_listFilter().length">
<ng-container *ngIf="currentModel=='edit'">
<tr
*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 style="font-size: 12px; width: 20%;">{{item.fname}}</td>
<td style="font-size: 12px; width: 20%;">{{item.lname}}</td>
<td
style="font-size: 12px; width: 20%; word-break: break-word; white-space: normal;">
{{item.position.tdesc}}
</td>
<td style="font-size: 12px; width: 10%;">{{item.bu1.bu1id}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
(click)="selectEMP(item)" data-hs-overlay="#set-approvers-modal">
<i class="ri-add-line"></i>
Select
</button>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</ng-container>
</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 (click)="addgroupapprove()"
[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')">
บันทึกข้อมูล
</button>
</mat-dialog-actions>
</ng-template>
<ng-template #employeeTableModal 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)]="search" (ngModelChange)="searchEMP()">
<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>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="employeeModal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="employeeModal.currentPage = (employeeModal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of employeeModal.page">
<a class="page-link" href="javascript:void(0);"
[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 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="!employee_listFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="employee_listFilter().length">
<tr
*ngFor="let item of employee_listFilter() | slice:((employeeModal.currentPage-1) * 10) : (((employeeModal.currentPage-1) * 10) + 10);let i = index">
<td>{{item.employeeId}}</td>
<td>{{item.fname}}</td>
<td>{{item.lname}}</td>
<td>
{{item.position.tdesc}}
</td>
<td>{{item.bu1.bu1id}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
(click)="selectEMP(item);closeDialogEmp()">
<i class="ri-add-line"></i>
Select
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<app-pagination [totalItems]="groupapprove_listFilter().length" [pageSize]="employeeModal.pageSize"
(pageChange)="employeeModal.currentPage = $event"
(pageSizeChange)="employeeModal.pageSize = $event;employeeModal.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="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">
......
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 { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
import { GroupApproveModel, MyGroupApproveModel } from 'src/app/shared/model/group-approve.model';
......@@ -9,6 +11,7 @@ interface table {
currentPage: number,
page: number[],
search: string
pageSize: number
}
@Component({
......@@ -16,14 +19,15 @@ interface table {
templateUrl: './set-approvers.component.html',
styleUrls: ['./set-approvers.component.scss']
})
export class SetApproversComponent {
export class SetApproversComponent implements OnInit{
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
searchModal = ""
groupapprove_list: GroupApproveModel[] = []
groupapprove_listLoading = false
groupapprove: GroupApproveModel = new MyGroupApproveModel()
search = ""
employee_list: EmployeeModel[] = []
employee_listLoading = false
......@@ -31,19 +35,67 @@ export class SetApproversComponent {
employeeModal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: ""
search: "",
pageSize: 10
}
empnumber = 0
currentModel: 'add' | 'edit' | 'delete' = "add"
currentModal: 'add' | 'edit' | 'delete' = "add"
selectedFile: File | null = null;
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,
private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private employeeService: EmployeeService,
private fileService: FileService
private fileService: FileService,
private dialog: MatDialog
) { }
ngOnInit(): void {
this.getGroupapprove_list()
......@@ -114,8 +166,10 @@ export class SetApproversComponent {
})
}
employee_listFilter() {
return this.employee_list.filter(x => x.fname.toLowerCase().includes(this.search.toLowerCase()) ||
x.lname.toLowerCase().includes(this.search.toLowerCase()))
return this.employee_list.filter(x =>
x.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
x.position.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
searchEMP() {
......@@ -139,15 +193,19 @@ export class SetApproversComponent {
} else if (this.empnumber == 5) {
this.groupapprove.apsapprove5 = data
}
}
getGroupapprove_list() {
this.groupapprove_listLoading = true
this.selectedItems.data.clear()
this.groupapproveService.getList().subscribe({
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.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.groupapprove_listLoading = false
......@@ -155,26 +213,33 @@ export class SetApproversComponent {
}
})
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.groupapprove_listFilter().length / 10) }, (_, i) => i + 1)
}
groupapprove_listFilter() {
return this.groupapprove_list.filter(x =>
x.apsassessy.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove1.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove2.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove3.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.apsapprove4.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.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())
(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.thFullName.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.thFullName.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.thFullName.toLowerCase().includes(this.search.toLowerCase()))
)
}
selectGroupapprove(groupapprove?: GroupApproveModel) {
this.groupapprove = new MyGroupApproveModel(groupapprove)
......@@ -232,4 +297,24 @@ export class SetApproversComponent {
this.groupapprove.apsapprove4 = 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