Skip to content

M
mySkill-x
Commit 66e3de01 by DESKTOP-HBB3MIJ\myHR
Options

แก้ฟอร์ม Table ตาม comment หน้า ข้อมูลลักษณะงาน, ตั่งค่าชื่อผู้ใช้

parent 7ce6e10e
Showing with 456 additions and 393 deletions
src/app/components/account-settings/account-settings.component.html
...@@ -33,23 +33,23 @@ ...@@ -33,23 +33,23 @@
<div class="bg-card-white"> <div class="bg-card-white">
</div> </div>
<div class="block-main-content"> <div class="block-main-content">
<div class="text-xxl font-bold py-2 px-4 text-primary"> <div class="text-lg font-bold py-2 px-8 text-primary">
ตั้งค่าผู้ใช้งาน ตั้งค่าผู้ใช้งาน
</div> </div>
<div class="page"> <div class="page">
<div class="border-b border-gray-200 dark:border-white/10"> <div class="border-b border-gray-200 dark:border-white/10 px-8">
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse"> <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="ml-8 text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1" href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" (click)="pathTitle = ['ตั้งค่าผู้ใช้งาน','สร้างชื่อผู้ใช้งาน']"> aria-controls="underline-1" (click)="pathTitle = ['ตั้งค่าผู้ใช้งาน','สร้างชื่อผู้ใช้งาน']">
สร้างชื่อผู้ใช้งาน สร้างชื่อผู้ใช้งาน
</a> </a>
<a class="text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2" href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2" (click)="pathTitle = ['ตั้งค่าผู้ใช้งาน','กำหนดรหัสผ่าน']"> aria-controls="underline-2" (click)="pathTitle = ['ตั้งค่าผู้ใช้งาน','กำหนดรหัสผ่าน']">
กำหนดรหัสผ่าน กำหนดรหัสผ่าน
</a> </a>
<a class="text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3" href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
aria-controls="underline-3" (click)="pathTitle = ['ตั้งค่าผู้ใช้งาน','จัดการผู้ใช้งาน']"> aria-controls="underline-3" (click)="pathTitle = ['ตั้งค่าผู้ใช้งาน','จัดการผู้ใช้งาน']">
จัดการผู้ใช้งาน จัดการผู้ใช้งาน
......
src/app/components/account-settings/set-a-password/set-a-password.component.html
<div class="flex justify-end pt-2rem"> <div class="header-title-type">
<div class="px-1"> <div class="flex justify-between">
<div class="relative shadow-md"> <div class="flex pr-2">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <!-- Content ของ div แรก -->
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"> <div class="px-1">
<div <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
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-add-line"></i>
<i class="ri-search-line text-gray"></i> นำเข้าข้อมูล
</button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);">
ดาวโหลดตัวอย่างไฟล์
</a>
</div> </div>
</div> </div>
</div> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <div class="relative shadow-md">
data-hs-overlay="#set-a-password-modal-add"> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
<i class="ri-add-line"></i> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
Add <div
</button> 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">
</div> <i class="ri-search-line text-gray"></i>
<div class="px-1"> </div>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" </div>
data-hs-overlay="#set-a-password-alert-delete-modal"> </div>
<i class="ri-delete-bin-6-line"></i> <div class="px-1">
Delete <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
</button> data-hs-overlay="#set-a-password-modal-add">
</div> <i class="ri-add-line"></i>
<div class="px-1"> Add
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> </button>
<i class="ti ti-book fs-l"></i> </div>
Help <div class="px-1">
</button> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#set-a-password-alert-delete-modal">
</div> <i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem"> <div class="page px-rem">
<div class="border-b border-gray-200 dark:border-white/10" style="margin-left: 20px;"> <div class="overflow-auto table-bordered rounded-t-md">
<nav class="flex space-x-2 rtl:space-x-reverse" style="margin-bottom: 10px;"> <div class="overflow-auto shadow-md rounded-t-md">
<a class="custom-link justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-md font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active" <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
นำเข้าข้อมูล
</a>
<a class="justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);">
ดาวโหลดตัวอย่างไฟล์
</a>
</nav>
</div>
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
...@@ -76,9 +81,10 @@ ...@@ -76,9 +81,10 @@
['FC02','5211475','ธนศักดิ์', 'ตาศรี','ใช้งาน'], ['FC02','5211475','ธนศักดิ์', 'ตาศรี','ใช้งาน'],
['KC01','525258','สุทธิชา', 'สิบประเสริฐ','ใช้งาน'], ['KC01','525258','สุทธิชา', 'สิบประเสริฐ','ใช้งาน'],
['KC02','647589','ศรสุข', 'ยอดสิงห์','ใช้งาน']];let i = index"> ['KC02','647589','ศรสุข', 'ยอดสิงห์','ใช้งาน']];let i = index">
<td style="font-size: 12px; " class="flex justify-center"> <td class="flex justify-center items-center" style="height: 40px;">
<input type="checkbox" style="margin-right: 20px; transform:scale(0.7)"> <input type="checkbox"
{{item[0]}} style="margin-right: 20px; transform: scale(0.7);">
<span style="display: inline-block; min-width: 60px;">{{ item[0]}}</span>
</td> </td>
<td style="text-align: center; font-size: 12px;">{{item[1]}}</td> <td style="text-align: center; font-size: 12px;">{{item[1]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[2]}}</td> <td style="text-align: center; font-size: 12px;">{{item[2]}}</td>
...@@ -94,8 +100,8 @@ ...@@ -94,8 +100,8 @@
</table> </table>
</div> </div>
</div> </div>
</div>
<div class="body-content" style="margin-top: 20px; margin-left: 10px;"> <div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs"> <ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body"> <div class="box-body">
......
src/app/components/account-settings/set-a-password/set-a-password.component.scss
...@@ -114,6 +114,14 @@ form { ...@@ -114,6 +114,14 @@ form {
max-width: 600px; /* กำหนดขนาดสูงสุดให้ฟอร์ม */ max-width: 600px; /* กำหนดขนาดสูงสุดให้ฟอร์ม */
} }
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
margin-top: 50px;
margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
}
......
src/app/components/account-settings/user-settings/user-settings.component.html
<div class="flex justify-end pt-2rem"> <div class="header-title-type">
<div class="px-1"> <div class="flex justify-between">
<div class="relative shadow-md"> <div class="flex pr-2">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <!-- Content ของ div แรก -->
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"> <div class="px-1">
<div <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
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-add-line"></i>
<i class="ri-search-line text-gray"></i> นำเข้าข้อมูล
</button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);">
ดาวโหลดตัวอย่างไฟล์
</a>
</div> </div>
</div> </div>
</div> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <div class="relative shadow-md">
data-hs-overlay="#user-settings-component-modal-add"> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
<i class="ri-add-line"></i> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
Add <div
</button> 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">
</div> <i class="ri-search-line text-gray"></i>
<div class="px-1"> </div>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" </div>
data-hs-overlay="#user-settings-component-alert-delete-modal"> </div>
<i class="ri-delete-bin-6-line"></i> <div class="px-1">
Delete <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
</button> data-hs-overlay="#user-settings-component-modal-add">
</div> <i class="ri-add-line"></i>
<div class="px-1"> Add
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> </button>
<i class="ti ti-book fs-l"></i> </div>
Help <div class="px-1">
</button> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#user-settings-component-alert-delete-modal">
</div> <i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem"> <div class="page px-rem">
<div class="border-b border-gray-200 dark:border-white/10" style="margin-left: 20px;"> <div class="overflow-auto table-bordered rounded-t-md">
<nav class="flex space-x-2 rtl:space-x-reverse" style="margin-bottom: 10px;"> <div class="overflow-auto shadow-md rounded-t-md">
<a class="custom-link justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-md font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active" <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
นำเข้าข้อมูล
</a>
<a class="justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);">
ดาวโหลดตัวอย่างไฟล์
</a>
</nav>
</div>
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
...@@ -76,9 +81,10 @@ ...@@ -76,9 +81,10 @@
['FC002', '5211475','ธนศักดิ์','ตาศรี','ใช้งาน'], ['FC002', '5211475','ธนศักดิ์','ตาศรี','ใช้งาน'],
['KC001', '525258','สุทธิดา','สินประเสริฐ','ใช้งาน'], ['KC001', '525258','สุทธิดา','สินประเสริฐ','ใช้งาน'],
['KC002', '647589','ศรสุข','ยอดสิงฆ์','ใช้งาน']];let i = index"> ['KC002', '647589','ศรสุข','ยอดสิงฆ์','ใช้งาน']];let i = index">
<td style="font-size: 12px;" class="flex justify-center"> <td class="flex justify-center items-center" style="height: 40px;">
<input type="checkbox" style="margin-right: 20px; transform:scale(0.7)"> <input type="checkbox"
{{item[0]}} style="margin-right: 20px; transform: scale(0.7);">
<span style="display: inline-block; min-width: 60px;">{{ item[0]}}</span>
</td> </td>
<td style="text-align: center; font-size: 12px;">{{item[1]}}</td> <td style="text-align: center; font-size: 12px;">{{item[1]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[2]}}</td> <td style="text-align: center; font-size: 12px;">{{item[2]}}</td>
...@@ -93,8 +99,7 @@ ...@@ -93,8 +99,7 @@
</table> </table>
</div> </div>
</div> </div>
</div> <div class="body-content" style="margin-top: 20px;">
<div class="body-content" style="margin-top: 20px; margin-left: 10px;">
<ul class="nav-tabs"> <ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body"> <div class="box-body">
......
src/app/components/account-settings/user-settings/user-settings.component.scss
...@@ -137,4 +137,12 @@ a.custom-link { ...@@ -137,4 +137,12 @@ a.custom-link {
left: 50%; /* ให้อยู่กลางในแนวนอน */ left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */ transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color: #ffffff; background-color: #ffffff;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
margin-top: 50px;
margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
} }
\ No newline at end of file
src/app/components/job-description/employee-categories/employee-categories.component.html
<div class="flex justify-end pt-2rem"> <div class="header-title-type">
<div class="px-1"> <div class="flex justify-between">
<div class="relative shadow-md"> <div class="flex pr-2">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <!-- Content ของ div แรก -->
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" <div class="px-1">
[(ngModel)]="search" (ngModelChange)="searchChange()"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
<div <i class="ri-add-line"></i>
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> </button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);">
ดาวโหลดตัวอย่างไฟล์
</a>
</div> </div>
</div> </div>
</div> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <div class="relative shadow-md">
data-hs-overlay="#employee-categories-modal-add"> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
<i class="ri-add-line"></i> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
Add [(ngModel)]="search" (ngModelChange)="searchChange()">
</button> <div
</div> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<div class="px-1"> <i class="ri-search-line text-gray"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" </div>
data-hs-overlay="#employee-categories-alert-delete-modal"> </div>
<i class="ri-delete-bin-6-line"></i> </div>
Delete <div class="px-1">
</button> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
</div> data-hs-overlay="#employee-categories-modal-add">
<div class="px-1"> <i class="ri-add-line"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> Add
<i class="ti ti-book fs-l"></i> </button>
Help </div>
</button> <div class="px-1">
</div> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#employee-categories-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem"> <div class="page px-rem">
<div class="border-b border-gray-200 dark:border-white/10" style="margin-left: 20px;"> <div class="overflow-auto table-bordered rounded-t-md">
<nav class="flex space-x-2 rtl:space-x-reverse" style="margin-bottom: 10px;"> <div class="overflow-auto shadow-md rounded-t-md">
<a class="custom-link justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-md font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active" <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
นำเข้าข้อมูล
</a>
<a class="justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);">
ดาวโหลดตัวอย่างไฟล์
</a>
</nav>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
...@@ -86,12 +91,14 @@ ...@@ -86,12 +91,14 @@
<tbody *ngIf="emp_typeListFilter().length"> <tbody *ngIf="emp_typeListFilter().length">
<tr <tr
*ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-center"> <td class="flex justify-center items-center" style="height: 40px;">
<input type="checkbox" <input type="checkbox"
style="margin-right: 20px; transform:scale(0.7)" style="margin-right: 20px; transform: scale(0.7);"
[(ngModel)]="item['selected']" (change)="onCheckboxChange(item)"> [(ngModel)]="item['selected']"
{{item.codeId}} (change)="onCheckboxChange(item)">
<span style="display: inline-block; min-width: 60px;">{{ item.codeId }}</span>
</td> </td>
<td class="text-center">{{item.tdesc}}</td> <td class="text-center">{{item.tdesc}}</td>
<td class="text-center">{{item.edesc}}</td> <td class="text-center">{{item.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
...@@ -137,8 +144,6 @@ ...@@ -137,8 +144,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div> </div>
......
src/app/components/job-description/employee-categories/employee-categories.component.scss
// .button-clear {
// position: absolute;
// top: 96px;
// z-index: 1;
// right: 41vw;
// }
// .button-help {
// position: absolute;
// top: 96px;
// z-index: 1;
// right: 35vw;
// }
// table.ti-custom-table thead {
// height: 50px;
// }
// table.ti-custom-table thead th span {
// font-size: 12px;
// font-weight: bold;
// }
// .ti-modal-center{
// width: 100%;
// height: 45px;
// margin-top: 2px;
// }
// .ti-modal .ti-modal-body{
// padding: 16px;
// padding-top: 0rem;
// overflow-y: 0%;
// }
.button-clear { .button-clear {
position: absolute; position: absolute;
top: 96px; top: 96px;
...@@ -81,4 +52,12 @@ a.custom-link { ...@@ -81,4 +52,12 @@ a.custom-link {
padding: 16px; padding: 16px;
padding-top: 0rem; padding-top: 0rem;
overflow-y: 0%; overflow-y: 0%;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
margin-top: 50px;
margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
} }
\ No newline at end of file
src/app/components/job-description/employee-group-unit/employee-group-unit.component.html
<div class="flex justify-end pt-2rem"> <div class="header-title-type">
<div class="px-1"> <div class="flex justify-between">
<div class="relative shadow-md"> <div class="flex pr-2">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <!-- Content ของ div แรก -->
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" <div class="px-1">
[(ngModel)]="search" (ngModelChange)="searchChange()"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
<div <i class="ri-add-line"></i>
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> </button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);" data-hs-overlay="#employee-group-unit-component-modal-upload">
ดาวโหลดตัวอย่างไฟล์
</a>
</div> </div>
</div> </div>
</div> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <div class="relative shadow-md">
data-hs-overlay="#employee-group-unit-component-modal-add"> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
<i class="ri-add-line"></i> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
Add [(ngModel)]="search" (ngModelChange)="searchChange()">
</button> <div
</div> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<div class="px-1"> <i class="ri-search-line text-gray"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" </div>
data-hs-overlay="#employee-group-unit-component-alert-delete-modal"> </div>
<i class="ri-delete-bin-6-line"></i> </div>
Delete <div class="px-1">
</button> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
</div> data-hs-overlay="#employee-group-unit-component-modal-add">
<div class="px-1"> <i class="ri-add-line"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> Add
<i class="ti ti-book fs-l"></i> </button>
Help </div>
</button> <div class="px-1">
</div> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#employee-group-unit-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem"> <div class="page px-rem">
<div class="border-b border-gray-200 dark:border-white/10" style="margin-left: 20px;"> <div class="overflow-auto table-bordered rounded-t-md">
<nav class="flex space-x-2 rtl:space-x-reverse" style="margin-bottom: 10px;"> <div class="overflow-auto shadow-md rounded-t-md">
<a class="custom-link justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-md font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active" <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
นำเข้าข้อมูล
</a>
<a class="justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);" data-hs-overlay="#employee-group-unit-component-modal-upload">
ดาวโหลดตัวอย่างไฟล์
</a>
</nav>
</div>
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
...@@ -79,10 +83,12 @@ ...@@ -79,10 +83,12 @@
<tbody *ngIf="emp_groupListFilter().length"> <tbody *ngIf="emp_groupListFilter().length">
<tr <tr
*ngFor="let item of emp_groupListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of emp_groupListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-center"> <td class="flex justify-center items-center" style="height: 40px;">
<input type="checkbox" style="margin-right: 20px; transform:scale(0.7)"> <input type="checkbox"
{{item.groupId}} style="margin-right: 20px; transform: scale(0.7);">
<span style="display: inline-block; min-width: 60px;">{{ item.groupId }}</span>
</td> </td>
<td class="text-center">{{item.tdesc}}</td> <td class="text-center">{{item.tdesc}}</td>
<td class="text-center">{{item.edesc}}</td> <td class="text-center">{{item.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
...@@ -128,7 +134,6 @@ ...@@ -128,7 +134,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div> </div>
...@@ -263,6 +268,35 @@ ...@@ -263,6 +268,35 @@
</div> </div>
</div> </div>
<div id="employee-group-unit-component-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="modal-headerupload 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" style="margin-left: 10px;">
<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>
</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>
</div>
</div>
</div>
<div id="employee-group-unit-component-alert-modal" class="hs-overlay hidden ti-modal"> <div id="employee-group-unit-component-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="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="max-h-full overflow-hidden ti-modal-content w-full">
...@@ -286,7 +320,7 @@ ...@@ -286,7 +320,7 @@
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <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" 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="#employee-group-unit-component-alert-modal"> data-hs-overlay="#employee-group-unit-component-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
...@@ -322,7 +356,7 @@ ...@@ -322,7 +356,7 @@
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <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" 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="#employee-group-unit-component-alert-modal"> data-hs-overlay="#employee-group-unit-component-modal-edit">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
...@@ -370,31 +404,3 @@ ...@@ -370,31 +404,3 @@
</div> </div>
</div> </div>
</div> </div>
<div id="employee-group-unit-component-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="modal-headerupload 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>
</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>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/job-description/employee-group-unit/employee-group-unit.component.scss
...@@ -49,4 +49,12 @@ a.custom-link { ...@@ -49,4 +49,12 @@ a.custom-link {
padding: 16px; padding: 16px;
padding-top: 0rem; padding-top: 0rem;
overflow-y: 0%; overflow-y: 0%;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
margin-top: 50px;
margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
} }
\ No newline at end of file
src/app/components/job-description/employee-level/employee-level.component.html
<div class="flex justify-end pt-2rem"> <div class="header-title-type">
<div class="px-1"> <div class="flex justify-between">
<div class="relative shadow-md"> <div class="flex pr-2">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <!-- Content ของ div แรก -->
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" <div class="px-1">
[(ngModel)]="search" (ngModelChange)="searchChange()"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
<div <i class="ri-add-line"></i>
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> </button>
</div>
</div> <a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
</div> href="javascript:void(0);" data-hs-overlay="#employee-level-modal-upload">
<div class="px-1"> ดาวโหลดตัวอย่างไฟล์
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" </a>
data-hs-overlay="#employee-level-modal-add"> </div>
<i class="ri-add-line"></i> </div>
Add <div class="flex justify-end">
</button> <div class="px-1">
</div> <div class="relative shadow-md">
<div class="px-1"> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
data-hs-overlay="#employee-level-alert-delete-modal"> [(ngModel)]="search" (ngModelChange)="searchChange()">
<i class="ri-delete-bin-6-line"></i> <div
Delete 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">
</button> <i class="ri-search-line text-gray"></i>
</div> </div>
<div class="px-1"> </div>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> </div>
<i class="ti ti-book fs-l"></i> <div class="px-1">
Help <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
</button> data-hs-overlay="#employee-level-modal-add">
</div> <i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-level-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<div class="border-b border-gray-200 dark:border-white/10" style="margin-left: 20px;"> <div class="overflow-auto table-bordered rounded-t-md">
<nav class="flex space-x-2 rtl:space-x-reverse" style="margin-bottom: 10px;"> <div class="overflow-auto shadow-md rounded-t-md">
<a class="custom-link justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-md font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active" <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
นำเข้าข้อมูล
</a>
<a class="justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);" data-hs-overlay="#employee-level-modal-upload">
ดาวโหลดตัวอย่างไฟล์
</a>
</nav>
</div>
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
...@@ -86,10 +91,12 @@ ...@@ -86,10 +91,12 @@
<tbody *ngIf="plListFilter().length"> <tbody *ngIf="plListFilter().length">
<tr <tr
*ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-center"> <td class="flex justify-center items-center" style="height: 40px;">
<input type="checkbox" style="margin-right: 20px; transform:scale(0.7)"> <input type="checkbox"
{{item.plId}} style="margin-right: 20px; transform: scale(0.7);">
</td> <span style="display: inline-block; min-width: 60px;">{{ item.plId }}</span>
</td>
<td class="text-center" >{{item.tdesc}}</td> <td class="text-center" >{{item.tdesc}}</td>
<td class="text-center" >{{item.edesc}}</td> <td class="text-center" >{{item.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
...@@ -135,8 +142,6 @@ ...@@ -135,8 +142,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div> </div>
......
src/app/components/job-description/employee-level/employee-level.component.scss
...@@ -48,4 +48,12 @@ a.custom-link { ...@@ -48,4 +48,12 @@ a.custom-link {
top: 50%; /* ให้อยู่กลางในแนวตั้ง */ top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */ left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */ transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
margin-top: 50px;
margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
} }
\ No newline at end of file
src/app/components/job-description/job-description.component.html
...@@ -98,33 +98,33 @@ ...@@ -98,33 +98,33 @@
<div class="bg-card-white"> <div class="bg-card-white">
</div> </div>
<div class="block-main-content"> <div class="block-main-content">
<div class="text-xxl font-bold py-2 px-4 text-primary"> <div class="text-lg font-bold py-2 text-primary px-8">
ข้อมูลลักษณะงาน ข้อมูลลักษณะงาน
</div> </div>
<div class="page"> <div class="page">
<div class="border-b border-gray-200 dark:border-white/10"> <div class="border-b border-gray-200 dark:border-white/10 px-8">
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse"> <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="ml-8 text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1" href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" (click)="pathTitle = ['ข้อมูลลักษณะงาน','กลุ่มพนักงาน']"> aria-controls="underline-1" (click)="pathTitle = ['ข้อมูลลักษณะงาน','กลุ่มพนักงาน']">
กลุ่มพนักงาน กลุ่มพนักงาน
</a> </a>
<a class="text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2" href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ตำเเหน่ง']"> aria-controls="underline-2" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ตำเเหน่ง']">
ตำเเหน่ง ตำเเหน่ง
</a> </a>
<a class="text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3" href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
aria-controls="underline-3" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ลักษณะงาน']"> aria-controls="underline-3" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ลักษณะงาน']">
ลักษณะงาน ลักษณะงาน
</a> </a>
<a class="text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-4" data-hs-tab="#underline-4" href="javascript:void(0);" id="underline-item-4" data-hs-tab="#underline-4"
aria-controls="underline-4" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ประเภทพนักงาน']"> aria-controls="underline-4" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ประเภทพนักงาน']">
ประเภทพนักงาน ประเภทพนักงาน
</a> </a>
<a class="text-xxl font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary" <a class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-5" data-hs-tab="#underline-5" href="javascript:void(0);" id="underline-item-5" data-hs-tab="#underline-5"
aria-controls="underline-5" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ระดับพนักงาน (PL)']"> aria-controls="underline-5" (click)="pathTitle = ['ข้อมูลลักษณะงาน','ระดับพนักงาน (PL)']">
ระดับพนักงาน (PL) ระดับพนักงาน (PL)
......
src/app/components/job-description/job-description.component.scss
...@@ -43,4 +43,12 @@ ...@@ -43,4 +43,12 @@
} }
.body-content { .body-content {
margin-left: 10px; margin-left: 10px;
} }
\ No newline at end of file .header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
margin-top: 10px;
margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
}
\ No newline at end of file
src/app/components/job-description/position/position-unit.component.html
<div class="flex justify-end pt-2rem"> <div class="header-title-type">
<div class="px-1"> <div class="flex justify-between">
<div class="relative shadow-md"> <div class="flex pr-2">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <!-- Content ของ div แรก -->
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" <div class="px-1">
[(ngModel)]="search" (ngModelChange)="searchChange()"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
<div <i class="ri-add-line"></i>
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> </button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);" data-hs-overlay="#position-unit-component-modal-upload">
ดาวโหลดตัวอย่างไฟล์
</a>
</div> </div>
</div> </div>
</div> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <div class="relative shadow-md">
data-hs-overlay="#position-unit-component-modal-add"> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
<i class="ri-add-line"></i> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
Add [(ngModel)]="search" (ngModelChange)="searchChange()">
</button> <div
</div> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<div class="px-1"> <i class="ri-search-line text-gray"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md" </div>
data-hs-overlay="#position-unit-component-alert-delete-modal"> </div>
<i class="ri-delete-bin-6-line"></i> </div>
Delete <div class="px-1">
</button> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
</div> data-hs-overlay="#position-unit-component-modal-add">
<div class="px-1"> <i class="ri-add-line"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> Add
<i class="ti ti-book fs-l"></i> </button>
Help </div>
</button> <div class="px-1">
</div> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#position-unit-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem"> <div class="page px-rem">
<div class="border-b border-gray-200 dark:border-white/10" style="margin-left: 20px;"> <div class="overflow-auto table-bordered rounded-t-md">
<nav class="flex space-x-2 rtl:space-x-reverse" style="margin-bottom: 10px;"> <div class="overflow-auto shadow-md rounded-t-md">
<a class="custom-link justify-center rounded-t-sm hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 text-md font-medium text-center border-2 text-gray-600 hover:text-gray-900 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active" <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
นำเข้าข้อมูล
</a>
<a class="justify-center -mb-px inline-flex items-center gap-2 text-sm font-medium text-center text-secondary border-secondary border-b-2 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 align-items-end"
href="javascript:void(0);" data-hs-overlay="#position-unit-component-modal-upload">
ดาวโหลดตัวอย่างไฟล์
</a>
</nav>
</div>
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
...@@ -78,10 +83,12 @@ ...@@ -78,10 +83,12 @@
<tbody *ngIf="positionListFilter().length"> <tbody *ngIf="positionListFilter().length">
<tr <tr
*ngFor="let item of positionListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of positionListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-center"> <td class="flex justify-center items-center" style="height: 40px;">
<input type="checkbox" style="margin-right: 20px; transform:scale(0.7)"> <input type="checkbox"
{{item.positionId}} style="margin-right: 20px; transform: scale(0.7);">
<span style="display: inline-block; min-width: 60px;">{{ item.positionId }}</span>
</td> </td>
<td class="text-center">{{item.tdesc}}</td> <td class="text-center">{{item.tdesc}}</td>
<td class="text-center">{{item.edesc}}</td> <td class="text-center">{{item.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
...@@ -127,8 +134,6 @@ ...@@ -127,8 +134,6 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div> </div>
......
src/app/components/job-description/position/position-unit.component.scss
...@@ -48,4 +48,12 @@ a.custom-link { ...@@ -48,4 +48,12 @@ a.custom-link {
padding: 16px; padding: 16px;
padding-top: 0rem; padding-top: 0rem;
overflow-y: 0%; overflow-y: 0%;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
margin-top: 50px;
margin-bottom: 10px;
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
} }
\ No newline at end of file
src/app/components/name-registration/competency-topic/competency-topic.component.html
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
</div> </div>
<div class="body-content" style="margin-top: 20px;"> <div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs"> <ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body"> <div class="box-body">
<nav class="pagination-style-3 overflow-auto"> <nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination"> <ul class="ti-pagination">
......
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