Skip to content

M
myAppraisal
Commit e895511d by Nattana Chaiyamat
Options

ทะเบียนพนักงาน

parent 4e8508bd
Showing with 1974 additions and 515 deletions
src/app/components/company-components/employee-registration/employee-registration.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
border-top: 2px solid #ccc;
width: 100%;
cursor: pointer;
border-top: 2px solid #ccc;
}
.nav-item {
list-style: none;
margin-right: 40px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: medium;
text-align: left;
padding-left: 0px;
padding-right: 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #569bf5; /* สีตัวอักษรในสถานะ active */
font-size: medium;
border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.html
......@@ -3,7 +3,7 @@
<div class="flex pr-2">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#company-registration-page-upload-modal">
data-hs-overlay="#sub-employee-registration-modal-upload">
<i class="ri-add-line"></i>
นำเข้าข้อมูล
</button>
......@@ -18,7 +18,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;">
[(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>
......@@ -26,20 +26,20 @@
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#sub-employee-registration-modal-add">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
data-hs-overlay="#sub-employee-registration-modal" (click)="selectEmployee();modalType='add'">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-20px m-0 shadow-md">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-info h-45px m-0 shadow-md">
<i class="ri-printer-line"></i>
Print
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<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>
......@@ -56,7 +56,7 @@
<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 !text-center">
<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" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
......@@ -65,70 +65,89 @@
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['CC001', 'สุชาตา','บาทวงษ์','กรรมการผู้จัดการ','-'],
['CC002', 'ฐานปนีย์','สกุลวงษ์','ผู้ช่วยหัวหน้าหน่วย','หน่วย COC หยิบสินค้า-SLR'],
['CC003', 'วิครุฑ','มานะดี','Product Consultant Unit','หน่วย COC หยิบสินค้า-SLR'],
['FC001', 'อุทุมพร','ประชาดี','Key Account Manager','หน่วย COC หยิบสินค้า-SLR'],
['FC002', 'สุมาลี','รักษีสิงห์','ช่างเทคนิคอาวุโส','หน่วย COC หยิบสินค้า-SLR'],
['KC001', 'กรวิภา','ชัยสวัสดิ์','Service Forkift','FAC Store R/M Unit'],
['KC002', 'กสินธร','สีปัญญา','พนักงานแนะนำสินค้า','หน่วย COC หยิบสินค้า-SLR']];let i = index">
<tbody *ngIf="employee.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="!employee.loading&&!employeeFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!employee.loading&&employeeFilter().length">
<tr
*ngFor="let item of employeeFilter() | 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[0]}}">
<label for="checkbox-{{item[0]}}">&nbsp;{{item[0]}}</label>
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.employeeId}}"
[(ngModel)]="item.check">
<label for="checkbox-{{item.data.employeeId}}">&nbsp;{{item.data.employeeId}}</label>
</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>{{item[4]}}</td>
<td>{{item.data.fname}}</td>
<td>{{item.data.lname}}</td>
<td>{{item.data.position.tdesc}}</td>
<td>{{item.data.jobCode.bu1.tdesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#sub-employee-registration-modal-edit"></i>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-employee-registration-modal"
(click)="selectEmployee(item.data);modalType='update'"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#sub-employee-registration-alert-delete-modal"></i>
data-hs-overlay="#sub-employee-registration-alert-delete-modal"
(click)="selectEmployee(item.data);modalType='delete'"></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">
<p>Show 1 to 10 of 50 items</p>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{employeeFilter().length<10 ?employeeFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - employeeFilter().length) )
:(currentPage * 10) ) }} of {{employeeFilter().length}} items</span>
</ul>
</div>
</nav>
</div>
<div id="sub-employee-registration-modal-add" class="hs-overlay hidden ti-modal">
<div id="sub-employee-registration-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">
......@@ -137,27 +156,17 @@
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-employee-registration-modal-add">
data-hs-overlay="#sub-employee-registration-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 py-4">
<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;">
<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 py-4">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<div class="w-full flex justify-end">
<div class="absolute flex">
<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>
......@@ -165,502 +174,1166 @@
</div>
</div>
<div class="ti-modal-body mt-5">
<form class="space-y-3">
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="space-y-3">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">รหัสพนักงาน</label>
<input type="email"
class="sm:col-span-6 ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
placeholder="">
<input type="text" class="sm:col-span-6 ti-form-input" [(ngModel)]="employee.select.employeeId">
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-4">ชื่อ-นามสกุล</label>
<div class="col-span-4 relative mt-2">
<div>
<div class="relative flex rounded-md">
<input type="text"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
</div>
<div class="col-span-4 mt-2">
<div class=" flex rounded-md">
<input type="text" class="ti-form-input" [(ngModel)]="employee.select.fname">
</div>
</div>
<div class="flex col-span-4 relative mt-2">
<input type="password"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
placeholder="">
<div class="flex col-span-4 mt-2">
<input type="text" class="ti-form-input" [(ngModel)]="employee.select.lname">
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">กลุ่มพนักงาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<div class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="employee.select.empGroup.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-employee-registration-empgroup-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">วันเริ่มงาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2 align-center">วันเริ่มงาน</label>
<div class="col-span-6 sm:col-span-6 ">
<mat-form-field>
<input matInput [matDatepicker]="firstHireDate" type="text"
class="ti-form-input rounded-l-none focus:z-10 flatpickr-input !text-gray-500" id="datetime"
[(ngModel)]="employee.select.dateIso"
(ngModelChange)="changeDate(this.employee.select, 'firstHireDate', employee.select.dateIso);">
<mat-datepicker-toggle matSuffix [for]="firstHireDate"></mat-datepicker-toggle>
<mat-datepicker #firstHireDate></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">BU</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<div class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="employee.select.bu1.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-employee-registration-bu-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ตำแหน่ง</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<div class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="employee.select.position.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-employee-registration-position-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ลักษณะงาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<div class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="employee.select.jobCode.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-employee-registration-jobcode-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">สาขา</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<div class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="employee.select.branch.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-employee-registration-branch-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ประเภทพนังาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ประเภทพนักงาน</label>
<div class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="employee.select.empType.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-employee-registration-emptype-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<div class="grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ระดับพนักงาน (PL)</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
<div class="col-span-6 sm:col-span-6 ">
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="employee.select.personalLevel.tdesc">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-employee-registration-pl-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center my-3">
<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="#sub-employee-registration-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<!-- จัดปุ่มให้ตรงกับ Input -->
<div class="sm:grid grid-cols-12 gap-x-6" style="margin-bottom: 80px;">
<div class="col-span-3"></div>
<div class="col-span-6 sm:col-span-6 flex 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="#sub-employee-registration-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</form>
<div id="sub-employee-registration-modal-upload" 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)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white">
นำเข้าข้อมูลพนักงาน
</h5>
</div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
<h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="mt-2 p-2">
<div class="flex rounded-md">
<input type="text" id="hs-trailing-button-add-on-with-icon" name="hs-trailing-button-add-on-with-icon"
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md ">
<button aria-label="button" type="button"
class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
<i class="ti ti-upload"></i>
</button>
</div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4">
<a class="ti-btn ti-btn-secondary" href="javascript:void(0);">
อัปโหลด
</a>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-modal-edit" 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 id="sub-employee-registration-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="#sub-employee-registration-alert-add-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>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-employee-registration-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-add-modal" (click)="updateEmployeeList(modalType)">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-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="#sub-employee-registration-alert-delete-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>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-employee-registration-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-delete-modal" (click)="updateEmployeeList('delete')">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-empgroup-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="#sub-employee-registration-modal-edit">
data-hs-overlay="#sub-employee-registration-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 py-4">
<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"
style="height: 40px;">
[(ngModel)]="modal.search" (ngModelChange)="searchModalChange(empGroupListFilter())">
<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 py-4">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
<div 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="empGroup.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="!empGroup.loading&&!empGroupListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!empGroup.loading&&empGroupListFilter().length">
<tr
*ngFor="let item of empGroupListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" (click)="selectDataModal(this.employee.select,'empGroup',item)"
data-hs-overlay="#sub-employee-registration-modal">
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.groupId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</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 {{empGroupListFilter().length<10
?empGroupListFilter().length: (modal.currentPage==modal.page.length ? ((modal.currentPage * 10) -
((modal.currentPage * 10) - empGroupListFilter().length) ) :(modal.currentPage * 10) ) }} of
{{empGroupListFilter().length}} items</span>
</ul>
</nav>
<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="#sub-employee-registration-modal">
ย้อนกลับ
</button>
</div>
</div>
<div class="ti-modal-body mt-5">
<form class="space-y-3">
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">รหัสพนักงาน</label>
<input type="email"
class="sm:col-span-6 ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
placeholder="">
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-4">ชื่อ-นามสกุล</label>
<div class="col-span-4 relative mt-2">
<div>
<div class="relative flex rounded-md">
<input type="text"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
</div>
</div>
</div>
<div class="flex col-span-4 relative mt-2">
<input type="password"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
placeholder="">
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">กลุ่มพนักงาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">วันเริ่มงาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">BU</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ตำแหน่ง</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ลักษณะงาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">สาขา</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ประเภทพนังาน</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
</div>
</div>
</div>
<div id="sub-employee-registration-bu-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">
ข้อมูลBU
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-employee-registration-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="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)]="modal.search" (ngModelChange)="searchModalChange(bu1ListFilter())">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
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="sm:grid grid-cols-12 gap-x-6">
<label class="col-span-3 ti-form-label text-primary mt-2">ระดับพนักงาน (PL)</label>
<div class="col-span-6 sm:col-span-6 relative">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input ltr:pr-11 rtl:pl-11 rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10">
</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="bu1.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="!bu1.loading&&!bu1ListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!bu1.loading&&bu1ListFilter().length">
<tr
*ngFor="let item of bu1ListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" (click)="selectDataModal(this.employee.select,'bu1',item)"
data-hs-overlay="#sub-employee-registration-modal">
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.bu1id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</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 {{bu1ListFilter().length<10 ?bu1ListFilter().length:
(modal.currentPage==modal.page.length ? ((modal.currentPage * 10) - ((modal.currentPage * 10) -
bu1ListFilter().length) ) :(modal.currentPage * 10) ) }} of {{bu1ListFilter().length}} items</span>
</ul>
</nav>
<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="#sub-employee-registration-modal">
ย้อนกลับ
</button>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-position-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="#sub-employee-registration-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="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)]="modal.search" (ngModelChange)="searchModalChange(positionListFilter())">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4">
<svg class="h-4 w-4 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
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>
<!-- จัดปุ่มให้ตรงกับ Input -->
<div class="sm:grid grid-cols-12 gap-x-6" style="margin-bottom: 80px;">
<div class="col-span-3"></div>
<div class="col-span-6 sm:col-span-6 flex 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="#sub-employee-registration-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-add-modal">
บันทึกข้อมูล
</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="position.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="!position.loading&&!positionListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!position.loading&&positionListFilter().length">
<tr
*ngFor="let item of positionListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" (click)="selectDataModal(this.employee.select,'position',item)"
data-hs-overlay="#sub-employee-registration-modal">
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.positionId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</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>
</div>
</div>
</form>
</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 {{positionListFilter().length<10
?positionListFilter().length: (modal.currentPage==modal.page.length ? ((modal.currentPage * 10) -
((modal.currentPage * 10) - positionListFilter().length) ) :(modal.currentPage * 10) ) }} of
{{positionListFilter().length}} items</span>
</ul>
</nav>
<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="#sub-employee-registration-modal">
ย้อนกลับ
</button>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-modal-upload" 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-upload">
<div class="ti-modal-header-upload bg-primary">
<h5 class="text-xxl font-bold text-white">
นำเข้าข้อมูลบริษัท
</h5>
</div>
<h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="mt-2 px-2">
<div class="flex rounded-md">
<input type="text" id="hs-trailing-button-add-on-with-icon" name="hs-trailing-button-add-on-with-icon"
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
<button aria-label="button" type="button"
class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm">
<i class="ti ti-upload"></i>
<div id="sub-employee-registration-jobcode-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="#sub-employee-registration-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4">
<a class="ti-btn ti-btn-primary" href="javascript:void(0);">
อัปโหลด
</a>
</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)]="modal.search" (ngModelChange)="searchModalChange(jobcodeListFilter())">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสลักษณะงาน','รายละเอียดฝ่าย(ไทย)','รายละเอียดฝ่าย(อังกฤษ)']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="jobcode.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="!jobcode.loading&&!jobcodeListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!jobcode.loading&&jobcodeListFilter().length">
<tr
*ngFor="let item of jobcodeListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" (click)="selectDataModal(this.employee.select,'jobCode',item)"
data-hs-overlay="#sub-employee-registration-modal">
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.jobcodeId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</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 {{jobcodeListFilter().length<10
?jobcodeListFilter().length: (modal.currentPage==modal.page.length ? ((modal.currentPage * 10) -
((modal.currentPage * 10) - jobcodeListFilter().length) ) :(modal.currentPage * 10) ) }} of
{{jobcodeListFilter().length}} items</span>
</ul>
</nav>
<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="#sub-employee-registration-modal">
ย้อนกลับ
</button>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-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-alert w-full">
<div id="sub-employee-registration-branch-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="#sub-employee-registration-alert-add-modal">
data-hs-overlay="#sub-employee-registration-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>
<div class="flex justify-end mt-2rem mb-1rem">
<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)]="modal.search" (ngModelChange)="searchModalChange(branchListFilter())">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสสาขา','รายละเอียดฝ่าย(ไทย)','รายละเอียดฝ่าย(อังกฤษ)']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="branch.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="!branch.loading&&!branchListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!branch.loading&&branchListFilter().length">
<tr
*ngFor="let item of branchListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" (click)="selectDataModal(this.employee.select,'branch',item)"
data-hs-overlay="#sub-employee-registration-modal">
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.branchId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</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 {{branchListFilter().length<10 ?branchListFilter().length:
(modal.currentPage==modal.page.length ? ((modal.currentPage * 10) - ((modal.currentPage * 10) -
branchListFilter().length) ) :(modal.currentPage * 10) ) }} of {{branchListFilter().length}}
items</span>
</ul>
</nav>
<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="#sub-employee-registration-modal-edit">
data-hs-overlay="#sub-employee-registration-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-add-modal" (click)="addUser();showSuccess()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-alert-edit-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-alert w-full">
<div id="sub-employee-registration-emptype-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="#sub-employee-registration-alert-edit-modal">
data-hs-overlay="#sub-employee-registration-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>
<div class="flex justify-end mt-2rem mb-1rem">
<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)]="modal.search" (ngModelChange)="searchModalChange(empTypeListFilter())">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสประเภทพนักงาน','รายละเอียดฝ่าย(ไทย)','รายละเอียดฝ่าย(อังกฤษ)']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="empType.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="!empType.loading&&!empTypeListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!empType.loading&&empTypeListFilter().length">
<tr
*ngFor="let item of empTypeListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" (click)="selectDataModal(this.employee.select,'empType',item)"
data-hs-overlay="#sub-employee-registration-modal">
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.codeId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</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 {{empTypeListFilter().length<10
?empTypeListFilter().length: (modal.currentPage==modal.page.length ? ((modal.currentPage * 10) -
((modal.currentPage * 10) - empTypeListFilter().length) ) :(modal.currentPage * 10) ) }} of
{{empTypeListFilter().length}} items</span>
</ul>
</nav>
<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="#sub-employee-registration-modal-edit">
data-hs-overlay="#sub-employee-registration-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="sub-employee-registration-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-alert w-full">
<div id="sub-employee-registration-pl-table-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
ข้อมูลระดับพนักงาน (PL)
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-employee-registration-alert-delete-modal">
data-hs-overlay="#sub-employee-registration-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>
<div class="flex justify-end mt-2rem mb-1rem">
<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)]="modal.search" (ngModelChange)="searchModalChange(empTypeListFilter())">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสระดับพนักงาน (PL)','รายละเอียดฝ่าย(ไทย)','รายละเอียดฝ่าย(อังกฤษ)']; 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="empType.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="!empType.loading&&!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!empType.loading&&plListFilter().length">
<tr
*ngFor="let item of plListFilter() | slice:((modal.currentPage-1) * 10) : (((modal.currentPage-1) * 10) + 10);let i = index"
class="cursor-pointer" (click)="selectDataModal(this.employee.select,'personalLevel',item)"
data-hs-overlay="#sub-employee-registration-modal">
<td class="flex justify-center">
{{((modal.currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.codeId}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</tbody>
</table>
</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 {{plListFilter().length<10 ?plListFilter().length:
(modal.currentPage==modal.page.length ? ((modal.currentPage * 10) - ((modal.currentPage * 10) -
plListFilter().length) ) :(modal.currentPage * 10) ) }} of {{plListFilter().length}} items</span>
</ul>
</nav>
<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="#sub-employee-registration-alert-delete-modal">
data-hs-overlay="#sub-employee-registration-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-employee-registration-alert-delete-modal" (click)="addUser();showSuccessDelete()">
ลบข้อมูล
</a>
</div>
</div>
</div>
......
src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { BranchModel, MyBranchModel } from 'src/app/shared/model/branch.model';
import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
import { EmpGroupModel, MyEmpGroupModel } from 'src/app/shared/model/emp-group.model';
import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model';
import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
import { JobCodeModel, MyJobCodeModel } from 'src/app/shared/model/job-code.model';
import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
import { MyPositionModel, PositionModel } from 'src/app/shared/model/position.model';
import { Bu1Service } from 'src/app/shared/services/bu1.service';
import { EmpGroupService } from 'src/app/shared/services/emp-group.service';
import { EmpTypeService } from 'src/app/shared/services/employee-type.service';
import { EmployeeService } from 'src/app/shared/services/employee.service';
import { PLService } from 'src/app/shared/services/pl.service';
import { PositionService } from 'src/app/shared/services/position.service';
import { BranchService } from 'src/app/shared/services/่branch.service';
import { JobCodeService } from 'src/app/shared/services/่job-code.service';
export interface DataEmployee {
loading: boolean
select: EmployeeModel
select: EmployeeModel | any
dataList: {
check: boolean
data: EmployeeModel
}[]
}
export interface DataModal {
search: string,
currentPage: number,
page: number[]
}
@Component({
selector: 'app-sub-employee-registration',
templateUrl: './sub-employee-registration.component.html',
......@@ -18,19 +37,195 @@ export interface DataEmployee {
export class SubEmployeeRegistrationComponent {
employee: DataEmployee = { loading: false, select: new MyEmployeeModel({}), dataList: [] }
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
modalType: 'add' | 'update' | 'delete' = 'add'
modal: DataModal = {
search: "",
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1)
}
empGroup: { loading: boolean, dataList: EmpGroupModel[] } = { loading: false, dataList: [] }
bu1: { loading: boolean, dataList: Bu1Model[] } = { loading: false, dataList: [] }
position: { loading: boolean, dataList: PositionModel[] } = { loading: false, dataList: [] }
jobcode: { loading: boolean, dataList: JobCodeModel[] } = { loading: false, dataList: [] }
branch: { loading: boolean, dataList: BranchModel[] } = { loading: false, dataList: [] }
empType: { loading: boolean, dataList: EmpTypeModel[] } = { loading: false, dataList: [] }
pl: { loading: boolean, dataList: PLModel[] } = { loading: false, dataList: [] }
constructor(private toastr: ToastrService,
private employeeService: EmployeeService,
private cdr: ChangeDetectorRef) { }
private cdr: ChangeDetectorRef,
private empGroupService: EmpGroupService,
private bu1Service: Bu1Service,
private positionService: PositionService,
private jobcodeService: JobCodeService,
private branchService: BranchService,
private empTypeService: EmpTypeService,
private pLService: PLService) { }
ngOnInit(): void {
this.getEmployeeList()
this.getEmpGroupList()
this.getBu1List()
this.getPositionList()
this.getJobcodeList()
this.getBranchList()
this.getEmpTypeList()
this.getPlList()
}
getPlList() {
this.pl.loading = false
this.pLService.getList().subscribe({
next: response => {
this.pl.dataList = response.map((x: any) => new MyPLModel(x))
this.pl.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.pl.loading = false
this.cdr.detectChanges()
}
})
}
plListFilter() {
return this.empType.dataList.filter(x => x.codeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
getEmpTypeList() {
this.empType.loading = false
this.empTypeService.getList().subscribe({
next: response => {
this.empType.dataList = response.map((x: any) => new MyEmpTypeModel(x))
this.empType.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.empType.loading = false
this.cdr.detectChanges()
}
})
}
empTypeListFilter() {
return this.empType.dataList.filter(x => x.codeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
getBranchList() {
this.branch.loading = false
this.branchService.getList().subscribe({
next: response => {
this.branch.dataList = response.map((x: any) => new MyBranchModel(x))
this.branch.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.branch.loading = false
this.cdr.detectChanges()
}
})
}
branchListFilter() {
return this.branch.dataList.filter(x => x.branchId.toLowerCase().includes(this.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
getJobcodeList() {
this.jobcode.loading = false
this.jobcodeService.getList().subscribe({
next: response => {
this.jobcode.dataList = response.map((x: any) => new MyJobCodeModel(x))
this.jobcode.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.jobcode.loading = false
this.cdr.detectChanges()
}
})
}
jobcodeListFilter() {
return this.jobcode.dataList.filter(x => x.jobcodeId.toLowerCase().includes(this.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
getPageList() {
this.employee.loading = false
this.employeeService.getPageList().subscribe({
getPositionList() {
this.position.loading = false
this.positionService.getList().subscribe({
next: response => {
this.employee.dataList = response.map(x => ({ check: false, data: new MyEmployeeModel(x) }))
this.position.dataList = response.map((x: any) => new MyPositionModel(x))
this.position.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.position.loading = false
this.cdr.detectChanges()
}
})
}
positionListFilter() {
return this.position.dataList.filter(x => x.positionId.toLowerCase().includes(this.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
getBu1List() {
this.bu1.loading = false
this.bu1Service.getList().subscribe({
next: response => {
this.bu1.dataList = response.map((x: any) => new MyBu1Model(x))
this.bu1.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.bu1.loading = false
this.cdr.detectChanges()
}
})
}
bu1ListFilter() {
return this.bu1.dataList.filter(x => x.bu1id.toLowerCase().includes(this.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
getEmpGroupList() {
this.empGroup.loading = false
this.empGroupService.getList().subscribe({
next: response => {
this.empGroup.dataList = response.map((x: any) => new MyEmpGroupModel(x))
this.empGroup.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.empGroup.loading = false
this.cdr.detectChanges()
}
})
}
empGroupListFilter() {
return this.empGroup.dataList.filter(x => x.groupId.toLowerCase().includes(this.search.toLowerCase()) ||
x.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
x.edesc.toLowerCase().includes(this.search.toLowerCase()))
}
getEmployeeList() {
this.employee.loading = true
this.employeeService.getPageListAll().subscribe({
next: response => {
this.employee.dataList = response.map((x: any) => ({ check: false, data: new MyEmployeeModel(x) }))
this.employee.loading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.employee.loading = false
......@@ -38,33 +233,67 @@ export class SubEmployeeRegistrationComponent {
}
})
}
// searchChange() {
// this.currentPage = 1
// this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
// }
// emp_typeListFilter() {
// return this.emp_typeList.filter(x =>
// x.codeId.includes(this.search) ||
// x.tdesc.includes(this.search) ||
// x.edesc.includes(this.search))
// }
// selectEmp_type(emp_type?: EmpTypeModel) {
// // this.showSuccess()
// this.emp_type = new MyEmpTypeModel(emp_type || {})
// }
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
updateEmployeeList(type: 'add' | 'update' | 'delete') {
this.employeeService[type](this.employee.select).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEmployeeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.employeeFilter().length / 10) }, (_, i) => i + 1);
}
employeeFilter() {
return this.employee.dataList.filter(x =>
x.data.employeeId.includes(this.search) ||
x.data.fname.includes(this.search) ||
x.data.lname.includes(this.search) ||
x.data.position.tdesc.includes(this.search) ||
x.data.jobCode.tdesc.includes(this.search))
}
selectEmployee(data?: EmployeeModel) {
this.employee.select = { ...new MyEmployeeModel(data || {}), dateIso: this.toISODate(data?.firstHireDate) }
}
changeDate(target: { [key: string]: any }, field: string, dateIso: string) {
target[field] = this.toYYYYMMDD(dateIso)
}
toISODate(dateInput?: string | null): string {
if (!dateInput) return "";
const parsedDate = new Date(dateInput);
return isNaN(parsedDate.getTime()) ? new Date().toISOString() : parsedDate.toISOString();
}
toYYYYMMDD(dateInput?: string | null): string {
if (!dateInput) return "";
const parsedDate = new Date(dateInput);
const options: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: '2-digit',
day: '2-digit',
};
const formattedDate = parsedDate.toLocaleDateString('en-GB', options);
const [day, month, year] = formattedDate.split('/');
return `${year}-${month}-${day}`;
}
addUser() {
searchModalChange(dataList: any[]) {
this.modal.currentPage = 1
this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
}
selectDataModal(target: { [key: string]: any }, field: string, data: any) {
target[field] = JSON.parse(JSON.stringify(data))
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
})
}
}
src/app/components/dashboard/dashboard.module.ts
......@@ -120,6 +120,40 @@ import { CompetencytopicService } from 'src/app/shared/services/competencytopic.
import { AssessmentService } from 'src/app/shared/services/assessment.service';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
import { EmployeeService } from 'src/app/shared/services/employee.service';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import { NativeDateAdapter } from '@angular/material/core';
import { BranchService } from 'src/app/shared/services/่branch.service';
import { JobCodeService } from 'src/app/shared/services/่job-code.service';
export const MY_DATE_FORMATS = {
parse: {
dateInput: 'DD-MM-YYYY', // รูปแบบที่ใช้สำหรับการแปลงวันที่จาก input
},
display: {
dateInput: 'DD-MM-YYYY', // รูปแบบที่ใช้ในการแสดงวันที่
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'DD-MM-YYYY',
monthYearA11yLabel: 'MMMM YYYY',
},
};
export class CustomDateAdapter extends NativeDateAdapter {
override format(date: Date, displayFormat: object): string {
if (typeof displayFormat === 'string' && displayFormat === 'DD-MM-YYYY') {
return `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1)
.toString()
.padStart(2, '0')}/${date.getFullYear()}`;
} else {
return super.format(date, displayFormat);
}
}
}
@NgModule({
declarations: [
SalesComponent,
......@@ -228,6 +262,11 @@ import { EmployeeService } from 'src/app/shared/services/employee.service';
HttpClientModule,
FormsModule,
NgxDaterangepickerMd.forRoot(),
MatDatepickerModule,
MatNativeDateModule,
MatInputModule,
MatFormFieldModule,
MatIconModule,
],
providers: [
Bu1Service,
......@@ -247,10 +286,14 @@ import { EmployeeService } from 'src/app/shared/services/employee.service';
AssessmentService,
CompetencycourseService,
EmployeeService,
JobCodeService,
BranchService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
multi: true,
},]
},
{ provide: DateAdapter, useClass: CustomDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }]
})
export class DashboardModule { }
src/app/shared/model/bank-branch.model.ts 0 → 100644
export interface BankBranchModel {
bankId: string
branchId: string
tdesc: string
edesc: string
}
export class MyBankBranchModel implements BankBranchModel {
bankId: string
branchId: string
tdesc: string
edesc: string
constructor(data: Partial<BankBranchModel>) {
this.bankId = data.bankId || ""
this.branchId = data.branchId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
}
}
src/app/shared/model/bank.model.ts 0 → 100644
export interface BankModel {
bankId: string
tdesc: string
edesc: string
bankCode: string
}
export class MyBankModel implements BankModel {
bankId: string
tdesc: string
edesc: string
bankCode: string
constructor(data: Partial<BankModel>) {
this.bankId = data.bankId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.bankCode = data.bankCode || ""
}
}
src/app/shared/model/banks.model.ts 0 → 100644
import { BankBranchModel, MyBankBranchModel } from "./bank-branch.model"
import { BankModel, MyBankModel } from "./bank.model"
export interface BanksModel {
employeeId: string
lineNo: string
accountId: string
bank: BankModel
bankBranch: BankBranchModel
}
export class MyBanksModel implements BanksModel {
employeeId: string
lineNo: string
accountId: string
bank: BankModel
bankBranch: BankBranchModel
constructor(data: Partial<BanksModel>) {
this.employeeId = data.employeeId || ""
this.lineNo = data.lineNo || ""
this.accountId = data.accountId || ""
this.bank = new MyBankModel(data.bank || {})
this.bankBranch = new MyBankBranchModel(data.bankBranch || {})
}
}
src/app/shared/model/boss.model.ts 0 → 100644
import { JobCodeModel, MyJobCodeModel } from "./job-code.model";
import { MyPrefixModel, PrefixModel } from "./prefix.model";
export interface BossModel {
employeeId: string
prefix: PrefixModel
fname: string
lname: string
efname: string
elname: string
empType: string
empPosition: string
job: JobCodeModel
thFullName: string
engFullName: string
}
export class MyBossModel implements BossModel {
employeeId: string
prefix: PrefixModel
fname: string
lname: string
efname: string
elname: string
empType: string
empPosition: string
job: JobCodeModel
thFullName: string
engFullName: string
constructor(data: Partial<BossModel>) {
this.employeeId = data.employeeId || ""
this.prefix = new MyPrefixModel(data.prefix || {})
this.fname = data.fname || ""
this.lname = data.lname || ""
this.efname = data.efname || ""
this.elname = data.elname || ""
this.empType = data.empType || ""
this.empPosition = data.empPosition || ""
this.job = new MyJobCodeModel(data.job || {})
this.thFullName = data.thFullName || ""
this.engFullName = data.engFullName || ""
}
}
src/app/shared/model/costcenter.model.ts 0 → 100644
export interface CostcenterModel{
costcenterId: string
tdesc: string
edesc: string
mainCostCenterCode: string
}
export class MyCostcenterModel implements CostcenterModel {
costcenterId: string
tdesc: string
edesc: string
mainCostCenterCode: string
constructor(data: Partial<CostcenterModel>) {
this.costcenterId = data.costcenterId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.mainCostCenterCode = data.mainCostCenterCode || ""
}
}
src/app/shared/model/employee-type.model.ts
export interface EmpTypeModel{
export interface EmpTypeModel {
[x: string]: any;
codeId: string;
tdesc: string;
......
src/app/shared/model/employee.model.ts
import { AgeModel, MyAgeModel } from "./age.model"
import { BanksModel, MyBanksModel } from "./banks.model"
import { BossModel, MyBossModel } from "./boss.model"
import { BranchModel, MyBranchModel } from "./branch.model"
import { Bu1Model, MyBu1Model } from "./bu1.model"
import { Bu2Model, MyBu2Model } from "./bu2.model"
import { Bu3Model, MyBu3Model } from "./bu3.model"
import { Bu4Model, MyBu4Model } from "./bu4.model"
import { Bu5Model, MyBu5Model } from "./bu5.model"
import { Bu6Model, MyBu6Model } from "./bu6.model"
import { Bu7Model, MyBu7Model } from "./bu7.model"
import { CostcenterModel, MyCostcenterModel } from "./costcenter.model"
import { EmpGroupModel, MyEmpGroupModel } from "./emp-group.model"
import { EmpTypeModel, MyEmpTypeModel } from "./employee-type.model"
import { JobCodeModel, MyJobCodeModel } from "./job-code.model"
import { MyNationalModel, NationalModel } from "./national.model"
import { MyNationalityModel, NationalityModel } from "./nationality.model"
......@@ -6,7 +19,10 @@ import { MyPLModel, PLModel } from "./pl.model"
import { MyPositionModel, PositionModel } from "./position.model"
import { MyPrefixModel, PrefixModel } from "./prefix.model"
import { MyReligionModel, ReligionModel } from "./religion.model"
import { MySalatypeModel, SalatypeModel } from "./salatype.model"
import { MyStatusModel, StatusModel } from "./status.model"
import { MyTime0Model, Time0Model } from "./time0.model"
import { MyWorkareaModel, WorkareaModel } from "./workarea.model"
export interface EmployeeModel {
employeeId: string
......@@ -46,6 +62,54 @@ export interface EmployeeModel {
position: PositionModel
jobCode: JobCodeModel
personalLevel: PLModel
companyId: string
idExpireDate: string
passportNo: string
passportExpireDate: string
bossId: string
boss: BossModel
bu1: Bu1Model
bu2: Bu2Model
bu3: Bu3Model
bu4: Bu4Model
bu5: Bu5Model
bu6: Bu6Model
bu7: Bu7Model
empGroup: EmpGroupModel
firstHireDate: string
startDate: string
ageWork: AgeModel
empType: EmpTypeModel
time0: Time0Model
publicHoliday: string
proDate: string
proEvery: string
approveDate: string
workarea: WorkareaModel
telExt: string
costcenter: CostcenterModel
branch: BranchModel
zeemeLogOnName: string
salatype: SalatypeModel
effSalatype: string
salary: string
empEvery: string
curchgincDate: string
receiverBankNo: string
receiverBank: string
receiverBankBranch: string
banks: BanksModel[]
taxTable: string
compenTaxTable: string
idTax: string
calTax: string
fixTax: string
calSoc: string
calPvf: string
taxMethodAct: string
ssoFlag: string
thFullName: string
engFullName: string
}
export class MyEmployeeModel implements EmployeeModel {
......@@ -86,6 +150,54 @@ export class MyEmployeeModel implements EmployeeModel {
position: PositionModel
jobCode: JobCodeModel
personalLevel: PLModel
companyId: string
idExpireDate: string
passportNo: string
passportExpireDate: string
bossId: string
boss: BossModel
bu1: Bu1Model
bu2: Bu2Model
bu3: Bu3Model
bu4: Bu4Model
bu5: Bu5Model
bu6: Bu6Model
bu7: Bu7Model
empGroup: EmpGroupModel
firstHireDate: string
startDate: string
ageWork: AgeModel
empType: EmpTypeModel
time0: Time0Model
publicHoliday: string
proDate: string
proEvery: string
approveDate: string
workarea: WorkareaModel
telExt: string
costcenter: CostcenterModel
branch: BranchModel
zeemeLogOnName: string
salatype: SalatypeModel
effSalatype: string
salary: string
empEvery: string
curchgincDate: string
receiverBankNo: string
receiverBank: string
receiverBankBranch: string
banks: BanksModel[]
taxTable: string
compenTaxTable: string
idTax: string
calTax: string
fixTax: string
calSoc: string
calPvf: string
taxMethodAct: string
ssoFlag: string
thFullName: string
engFullName: string
constructor(data: Partial<EmployeeModel>) {
this.employeeId = data.employeeId || ""
this.prefix = new MyPrefixModel(data.prefix || {})
......@@ -124,6 +236,54 @@ export class MyEmployeeModel implements EmployeeModel {
this.position = new MyPositionModel(data.position || {})
this.jobCode = new MyJobCodeModel(data.jobCode || {})
this.personalLevel = new MyPLModel(data.personalLevel || {})
this.companyId = data.companyId || ""
this.idExpireDate = data.idExpireDate || ""
this.passportNo = data.passportNo || ""
this.passportExpireDate = data.passportExpireDate || ""
this.bossId = data.bossId || ""
this.boss = new MyBossModel(data.boss || {})
this.bu1 = new MyBu1Model(data.bu1 || {})
this.bu2 = new MyBu2Model(data.bu2 || {})
this.bu3 = new MyBu3Model(data.bu3 || {})
this.bu4 = new MyBu4Model(data.bu4 || {})
this.bu5 = new MyBu5Model(data.bu5 || {})
this.bu6 = new MyBu6Model(data.bu6 || {})
this.bu7 = new MyBu7Model(data.bu7 || {})
this.empGroup = new MyEmpGroupModel(data.empGroup || {})
this.firstHireDate = data.firstHireDate || ""
this.startDate = data.startDate || ""
this.ageWork = new MyAgeModel(data.ageWork || {})
this.empType = new MyEmpTypeModel(data.empType || {})
this.time0 = new MyTime0Model(data.time0 || {})
this.publicHoliday = data.publicHoliday || ""
this.proDate = data.proDate || ""
this.proEvery = data.proEvery || ""
this.approveDate = data.approveDate || ""
this.workarea = new MyWorkareaModel(data.workarea || {})
this.telExt = data.telExt || ""
this.costcenter = new MyCostcenterModel(data.costcenter || {})
this.branch = new MyBranchModel(data.branch || {})
this.zeemeLogOnName = data.zeemeLogOnName || ""
this.salatype = new MySalatypeModel(data.salatype || {})
this.effSalatype = data.effSalatype || ""
this.salary = data.salary || ""
this.empEvery = data.empEvery || ""
this.curchgincDate = data.curchgincDate || ""
this.receiverBankNo = data.receiverBankNo || ""
this.receiverBank = data.receiverBank || ""
this.receiverBankBranch = data.receiverBankBranch || ""
this.banks = data.banks?.map(x => new MyBanksModel(x)) || []
this.taxTable = data.taxTable || ""
this.compenTaxTable = data.compenTaxTable || ""
this.idTax = data.idTax || ""
this.calTax = data.calTax || ""
this.fixTax = data.fixTax || ""
this.calSoc = data.calSoc || ""
this.calPvf = data.calPvf || ""
this.taxMethodAct = data.taxMethodAct || ""
this.ssoFlag = data.ssoFlag || ""
this.thFullName = data.thFullName || ""
this.engFullName = data.engFullName || ""
}
}
src/app/shared/model/job-code.model.ts
......@@ -30,6 +30,8 @@ export interface JobCodeModel {
eexperience: string
eresponsibility: string
equalification: string
jobObjective: string
supervisor: string
}
export class MyJobCodeModel implements JobCodeModel {
......@@ -54,6 +56,8 @@ export class MyJobCodeModel implements JobCodeModel {
eexperience: string
eresponsibility: string
equalification: string
jobObjective: string
supervisor: string
constructor(data: Partial<JobCodeModel>) {
this.jobcodeId = data.jobcodeId || ""
this.tdesc = data.tdesc || ""
......@@ -76,6 +80,8 @@ export class MyJobCodeModel implements JobCodeModel {
this.eexperience = data.eexperience || ""
this.eresponsibility = data.eresponsibility || ""
this.equalification = data.equalification || ""
this.jobObjective = data.jobObjective || ""
this.supervisor = data.supervisor || ""
}
}
src/app/shared/model/page.model.ts 0 → 100644
import { MyPageableModel, PageableModel } from "./pageable.model"
import { MySortModel, SortModel } from "./sort.model"
export interface PageModel {
content: any
pageable: PageableModel
totalElements: number
totalPages: number
last: boolean
size: number
number: number
sort: SortModel
numberOfElements: number
first: boolean
empty: boolean
}
export class MyPageModel implements PageModel {
content: any
pageable: PageableModel
totalElements: number
totalPages: number
last: boolean
size: number
number: number
sort: SortModel
numberOfElements: number
first: boolean
empty: boolean
constructor(data: Partial<PageModel>) {
this.content = data.content
this.pageable = new MyPageableModel(data.pageable || {})
this.totalElements = data.totalElements ?? 0
this.totalPages = data.totalPages ?? 0
this.last = data.last || false
this.size = data.size ?? 0
this.number = data.number ?? 0
this.sort = new MySortModel(data.sort || {})
this.numberOfElements = data.numberOfElements ?? 0
this.first = data.first || false
this.empty = data.empty || false
}
}
src/app/shared/model/pageable.model.ts 0 → 100644
import { MySortModel, SortModel } from "./sort.model"
export interface PageableModel {
sort: SortModel
offset: number
pageNumber: number
pageSize: number
paged: boolean
unpaged: boolean
}
export class MyPageableModel implements PageableModel {
sort: SortModel
offset: number
pageNumber: number
pageSize: number
paged: boolean
unpaged: boolean
constructor(data: Partial<PageableModel>) {
this.sort = new MySortModel(data.sort || {})
this.offset = data.offset ?? 0
this.pageNumber = data.pageNumber ?? 0
this.pageSize = data.pageSize ?? 0
this.paged = data.paged || false
this.unpaged = data.unpaged || false
}
}
src/app/shared/model/province.model.ts 0 → 100644
export interface ProvinceModel {
provinceId: string
longTname: string
longEname: string
}
export class MyProvinceModel implements ProvinceModel {
provinceId: string
longTname: string
longEname: string
constructor(data: Partial<ProvinceModel>) {
this.provinceId = data.provinceId || ""
this.longTname = data.longTname || ""
this.longEname = data.longEname || ""
}
}
src/app/shared/model/salatype.model.ts 0 → 100644
export interface SalatypeModel {
codeId: string
tdesc: string
edesc: string
}
export class MySalatypeModel implements SalatypeModel {
codeId: string
tdesc: string
edesc: string
constructor(data: Partial<SalatypeModel>) {
this.codeId = data.codeId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
}
}
src/app/shared/model/sort.model.ts 0 → 100644
export interface SortModel {
empty: boolean
unsorted: boolean
sorted: boolean
}
export class MySortModel implements SortModel {
empty: boolean
unsorted: boolean
sorted: boolean
constructor(data: Partial<SortModel>) {
this.empty = data.empty || false
this.unsorted = data.unsorted || false
this.sorted = data.sorted || false
}
}
src/app/shared/model/time0.model.ts 0 → 100644
export interface Time0Model {
time0id: string
tdesc: string
edesc: string
stickTm: string
hourD: number
}
export class MyTime0Model implements Time0Model {
time0id: string
tdesc: string
edesc: string
stickTm: string
hourD: number
constructor(data: Partial<Time0Model>) {
this.time0id = data.time0id || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.stickTm = data.stickTm || ""
this.hourD = data.hourD ?? 0
}
}
src/app/shared/model/workarea.model.ts 0 → 100644
import { MyProvinceModel, ProvinceModel } from "./province.model"
export interface WorkareaModel {
workareaId: string
tdesc: string
edesc: string
store: string
province: ProvinceModel
}
export class MyWorkareaModel implements WorkareaModel {
workareaId: string
tdesc: string
edesc: string
store: string
province: ProvinceModel
constructor(data: Partial<WorkareaModel>) {
this.workareaId = data.workareaId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.store = data.store || ""
this.province = new MyProvinceModel(data.province || {})
}
}
src/app/shared/services/employee.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { expand, map, Observable, reduce } from 'rxjs';
import { environment } from 'src/environments/environment';
import { EmployeeModel } from '../model/employee.model';
import { AlertModel } from '../model/alert.model';
import { PageModel } from '../model/page.model';
@Injectable({
providedIn: 'root'
})
......@@ -11,25 +13,37 @@ export class EmployeeService {
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getPageList(): Observable<EmployeeModel[]> {
return this.http.get<EmployeeModel[]>(this.urlApi + "/profiles")
getPageList(page: string, size: string): Observable<PageModel> {
return this.http.get<PageModel>(this.urlApi + "/lists?page=" + page + "&size=" + size)
}
getPageListAll(): Observable<EmployeeModel[]> {
return this.http.get<PageModel>(`${this.urlApi}/lists?page=0&size=100`).pipe(
expand(response =>
!response.last
? this.http.get<PageModel>(`${this.urlApi}/lists?page=${response.pageable.pageNumber + 1}&size=100`)
: []
),
map(response => response.content),
reduce((acc: EmployeeModel[], data) => [...acc, ...data], [])
);
}
getById(employeeId: string): Observable<EmployeeModel> {
return this.http.get<EmployeeModel>(this.urlApi + "/profile?employeeId=" + employeeId)
}
add(body: EmployeeModel) {
return this.http.post(this.urlApi + '/profile-create', body)
add(body: EmployeeModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi + '/profile-create', body)
}
update(body: EmployeeModel) {
return this.http.post(this.urlApi + '/profile-update', body)
update(body: EmployeeModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi + '/profile-update', body)
}
delete(body: EmployeeModel) {
delete(body: EmployeeModel): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
return this.http.delete<AlertModel>(this.urlApi, options)
}
}
src/app/shared/services/่branch.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { BranchModel } from '../model/branch.model';
@Injectable({
providedIn: 'root'
})
export class BranchService {
api = "/branch"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<BranchModel[]> {
return this.http.get<BranchModel[]>(this.urlApi + "/lists")
}
getById(branchId: string): Observable<BranchModel> {
return this.http.get<BranchModel>(this.urlApi + "/" + branchId)
}
// post(body: BranchModel): Observable<AlertModel> {
// return this.http.post<AlertModel>(this.urlApi, body)
// }
// delete(body: BranchModel | BranchModel[]): Observable<AlertModel> {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete<AlertModel>(this.urlApi, options)
// }
}
src/app/shared/services/่job-code.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { JobCodeModel } from '../model/job-code.model';
@Injectable({
providedIn: 'root'
})
export class JobCodeService {
api = "/jobcode"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<JobCodeModel[]> {
return this.http.get<JobCodeModel[]>(this.urlApi + "/lists")
}
getById(jobcodeId: string): Observable<JobCodeModel> {
return this.http.get<JobCodeModel>(this.urlApi + "/" + jobcodeId)
}
// post(body: JobCodeModel): Observable<AlertModel> {
// return this.http.post<AlertModel>(this.urlApi, body)
// }
// delete(body: JobCodeModel | JobCodeModel[]): Observable<AlertModel> {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete<AlertModel>(this.urlApi, options)
// }
}
src/assets/css/style.css
......@@ -5140,6 +5140,10 @@ select option:focus {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.\!rounded-t-sm {
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
}
.rounded-t-sm {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
......@@ -24902,3 +24906,13 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
.\!\-mt-3 {
margin-top: -0.75rem !important;
}
.\!rounded-t-none {
border-top-left-radius: 0rem !important;
border-top-right-radius: 0rem !important;
}
.rounded-t-none {
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
}
\ 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