Skip to content

M
myAppraisal
Commit 3a8f8103 by Nakarin Luankla
Options

UPDATE การจัดการข้อมูลองค์กร

parent 156a9d4c
Showing with 75 additions and 563 deletions
src/app/components/company-components/account-settings/account-settings.component.html
<!-- <app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<div>
<p class="text-xxl font-bold py-2 px-4 text-primary ltr:ml-5" style="margin-bottom: 15px;">ตั้งค่าผู้ใช้งาน</p>
</div>
<div class="body-content" style="margin-left: 10px;">
<ul class="nav-tabs">
<li class="nav-item" *ngFor="let item of [{id:'tab1',text:'สร้างชื่อผู้ใช้งาน'},
{id:'tab2',text:'กำหนดรหัสผ่าน'},
{id:'tab3',text:'จัดการผู้ใช้งาน'}]" (click)="changeTab(item)">
<a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
</li>
</ul>
<div class="tab-content">
<div *ngIf="activeTab === 'tab1'" class="tab-pane">
<div class="mt-5">
<app-user-settings [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-user-settings>
</div>
</div>
<div *ngIf="activeTab === 'tab2'" class="tab-pane">
<div class="mt-5">
<app-set-a-password [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-set-a-password>
</div>
</div>
</div>
</div>
</div> -->
<app-page-header [pathTitle]="pathTitle"></app-page-header> <app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white"> <div class="bg-card-white">
</div> </div>
...@@ -56,7 +25,7 @@ ...@@ -56,7 +25,7 @@
</a> </a>
</nav> </nav>
</div> </div>
<div class="mt-3 px-3rem"> <div class="mt-3 px-3rem !-mt-3 pt-50px">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"> <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-user-settings [pathTitle]="pathTitle" <app-user-settings [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-user-settings> (sendPathTitle)="pathTitle=$event"></app-user-settings>
......
src/app/components/company-components/account-settings/set-a-password/set-a-password.component.html
<div class="header-title-type"> <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<!-- Content ของ div แรก -->
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#company-registration-page-upload-modal">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
นำเข้าข้อมูล นำเข้าข้อมูล
</button> </button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
<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);"> href="javascript:void(0);">
ดาวน์โหลดตัวอย่างไฟล์ ดาวน์โหลดตัวอย่างไฟล์
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
...@@ -49,26 +48,19 @@ ...@@ -49,26 +48,19 @@
</div> </div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<div class="overflow-auto shadow-md rounded-t-md"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','Action']; let f = first; let l = last; let i = index"> *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" style="text-align: center;" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
[class.!text-center]="f||l"> <span class="font-size-12px font-weight-700">{{ item }}</span>
<span class="text-sm">{{ item }}</span> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="f && l"> <i class="ti ti-dots-vertical fs-l"></i>
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" </div>
height="16" fill="currentColor" viewBox="0 0 16 16"> </th>
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
...@@ -81,15 +73,14 @@ ...@@ -81,15 +73,14 @@
['FC02','5211475','ธนศักดิ์', 'ตาศรี','ใช้งาน'], ['FC02','5211475','ธนศักดิ์', 'ตาศรี','ใช้งาน'],
['KC01','525258','สุทธิชา', 'สิบประเสริฐ','ใช้งาน'], ['KC01','525258','สุทธิชา', 'สิบประเสริฐ','ใช้งาน'],
['KC02','647589','ศรสุข', 'ยอดสิงห์','ใช้งาน']];let i = index"> ['KC02','647589','ศรสุข', 'ยอดสิงห์','ใช้งาน']];let i = index">
<td class="flex justify-center items-center" style="height: 40px;"> <td class="text-center">
<input type="checkbox" <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item[0]}}">
style="margin-right: 20px; transform: scale(0.7);"> <label for="checkbox-{{item[0]}}">&nbsp;{{item[0]}}</label>
<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 class="text-center">{{item[1]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[2]}}</td> <td>{{item[2]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[3]}}</td> <td>{{item[3]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[4]}}</td> <td class="text-center">{{item[4]}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#set-a-password-modal-edit"></i> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#set-a-password-modal-edit"></i>
...@@ -99,7 +90,6 @@ ...@@ -99,7 +90,6 @@
</tbody> </tbody>
</table> </table>
</div> </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">
......
src/app/components/company-components/account-settings/set-a-password/set-a-password.component.scss
.button-clear {
position: absolute;
top: 96px;
z-index: 1;
right: 41vw;
}
.button-help {
position: absolute;
top: 0;
right: 0; /* ย้ายไปที่มุมขวาบน */
margin: 4.2rem; /* เพิ่มระยะห่างจากขอบบนและขวา */
}
table.ti-custom-table thead {
height: 50px;
}
table.ti-custom-table thead th span {
font-size: 12px;
font-weight: bold;
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
width: 100%;
cursor: pointer;
margin-bottom: 10px;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 2px solid #569bf5;
line-height: 0.8;
}
.ti-pagination .page-link.active {
background-color: #569bf5;
color: white;
border-radius: 50%;
padding: 8px 12px;
}
.box-body {
padding: 0rem;
}
.page{
min-height: 0vh;
}
.ti-modal-content-new {
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
position: relative; /* ทำให้สามารถจัดตำแหน่งได้ */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color: white;
overflow: hidden; /* ป้องกันการเลื่อนในโมดอล */
}
.ti-modal-body-new {
height: 50vh;
display: flex;
justify-content: center; /* จัดแนวนอนให้ตรงกลาง */
align-items: center; /* จัดแนวตั้งให้ตรงกลาง */
padding: 1rem;
}
form {
width: 100%; /* ให้ฟอร์มใช้พื้นที่เต็ม */
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/company-components/account-settings/user-settings/user-settings.component.html
<div class="header-title-type"> <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<!-- Content ของ div แรก -->
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#company-registration-page-upload-modal">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
นำเข้าข้อมูล นำเข้าข้อมูล
</button> </button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
<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);"> href="javascript:void(0);">
ดาวน์โหลดตัวอย่างไฟล์ ดาวน์โหลดตัวอย่างไฟล์
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
...@@ -49,26 +48,19 @@ ...@@ -49,26 +48,19 @@
</div> </div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<div class="overflow-auto shadow-md rounded-t-md"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['ชื่อล็อคอิน','รหัสพนักงาน','ชื่อ','นามสกุล','สถานะ','Action']; let f = first; let l = last; let i = index"> *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" style="text-align: center;" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
[class.!text-center]="f||l"> <span class="font-size-12px font-weight-700">{{ item }}</span>
<span class="text-sm">{{ item }}</span> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&!i"> <i class="ti ti-dots-vertical fs-l"></i>
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" </div>
height="16" fill="currentColor" viewBox="0 0 16 16"> </th>
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
...@@ -81,15 +73,14 @@ ...@@ -81,15 +73,14 @@
['FC002', '5211475','ธนศักดิ์','ตาศรี','ใช้งาน'], ['FC002', '5211475','ธนศักดิ์','ตาศรี','ใช้งาน'],
['KC001', '525258','สุทธิดา','สินประเสริฐ','ใช้งาน'], ['KC001', '525258','สุทธิดา','สินประเสริฐ','ใช้งาน'],
['KC002', '647589','ศรสุข','ยอดสิงฆ์','ใช้งาน']];let i = index"> ['KC002', '647589','ศรสุข','ยอดสิงฆ์','ใช้งาน']];let i = index">
<td class="flex justify-center items-center" style="height: 40px;"> <td class="text-center">
<input type="checkbox" <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item[0]}}">
style="margin-right: 20px; transform: scale(0.7);"> <label for="checkbox-{{item[0]}}">&nbsp;{{item[0]}}</label>
<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 class="text-center">{{item[1]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[2]}}</td> <td>{{item[2]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[3]}}</td> <td>{{item[3]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[4]}}</td> <td class="text-center">{{item[4]}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#user-settings-component-modal-edit"></i> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#user-settings-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#user-settings-component-alert-delete-modal"></i> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#user-settings-component-alert-delete-modal"></i>
...@@ -131,7 +122,6 @@ ...@@ -131,7 +122,6 @@
<p>Show 1 to 10 of 50 items</p> <p>Show 1 to 10 of 50 items</p>
</ul> </ul>
</div> </div>
</div>
......
src/app/components/company-components/account-settings/user-settings/user-settings.component.scss
.button-clear {
position: absolute;
top: 96px;
z-index: 1;
right: 41vw;
}
.button-help {
position: absolute;
top: 0px;
z-index: 1;
right: 0vw;
margin: 4.2rem;
margin-right: 10px; /* เพิ่มใหม่ 12/16*/
}
table.ti-custom-table thead {
height: 50px;
}
table.ti-custom-table thead th span {
font-size: 12px;
font-weight: bold;
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
width: 100%;
cursor: pointer;
margin-bottom: 10px;
height: 20%;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 2px solid #569bf5;
line-height: 0.8;
}
.ti-pagination .page-link.active {
background-color: #569bf5;
color: white;
border-radius: 50%;
padding: 8px 12px;
}
.box-body{
padding: 0rem;
}
.page{
min-height: 0vh;
}
// .ti-modal-content{
// width: 70%; /* ความกว้างที่คุณต้องการ */
// position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
// top: 50%; /* ให้อยู่กลางในแนวตั้ง */
// left: 50%; /* ให้อยู่กลางในแนวนอน */
// transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
// }
.ti-modal-content {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 90%; /* จำกัดความสูงให้อยู่ใน modal */
overflow-y: auto; /* เปิดการเลื่อนแนวตั้ง */
}
// .ti-modal-body-content {
// display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
// justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
// flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
// height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
// margin-left: 100px;
// margin-right: 50px;
// }
.ti-modal-body-content {
display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
margin-left: calc(15% - 30px);
margin-right: 20px;
}
.ti-modal-content-alert{
width: 35%; /* ความกว้างที่คุณต้องการ */
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
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/company-components/employee-registration/employee-registration.component.html
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</a> </a>
</nav> </nav>
</div> </div>
<div class="mt-3 px-3rem"> <div class="mt-3 px-3rem !-mt-3 pt-50px">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"> <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-sub-employee-registration [pathTitle]="pathTitle" <app-sub-employee-registration [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-sub-employee-registration> (sendPathTitle)="pathTitle=$event"></app-sub-employee-registration>
......
src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.html
<div class="header-title-type"> <div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<!-- Content ของ div แรก --> <div class="px-1">
<div class="px-1"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"> data-hs-overlay="#company-registration-page-upload-modal">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
นำเข้าข้อมูล นำเข้าข้อมูล
</button> </button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
<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);">
href="javascript:void(0);" data-hs-overlay="#sub-employee-registration-modal-upload"> ดาวน์โหลดตัวอย่างไฟล์
ดาวน์โหลดตัวอย่างไฟล์ </a>
</a> </div>
</div> </div>
</div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
...@@ -57,18 +56,12 @@ ...@@ -57,18 +56,12 @@
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัสพนักงาน','ชื่อ','นามสกุล','ตำแหน่ง','หน่วยงาน','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัสพนักงาน','ชื่อ','นามสกุล','ตำแหน่ง','หน่วยงาน','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
style="text-align: center;" [class.!text-center]="f||l"> <span class="font-size-12px font-weight-700">{{ item }}</span>
<span class="text-sm">{{ item }}</span> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&!i"> <i class="ti ti-dots-vertical fs-l"></i>
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50" height="16"
fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div> </div>
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
...@@ -81,14 +74,15 @@ ...@@ -81,14 +74,15 @@
['FC002', 'สุมาลี','รักษีสิงห์','ช่างเทคนิคอาวุโส','หน่วย COC หยิบสินค้า-SLR'], ['FC002', 'สุมาลี','รักษีสิงห์','ช่างเทคนิคอาวุโส','หน่วย COC หยิบสินค้า-SLR'],
['KC001', 'กรวิภา','ชัยสวัสดิ์','Service Forkift','FAC Store R/M Unit'], ['KC001', 'กรวิภา','ชัยสวัสดิ์','Service Forkift','FAC Store R/M Unit'],
['KC002', 'กสินธร','สีปัญญา','พนักงานแนะนำสินค้า','หน่วย COC หยิบสินค้า-SLR']];let i = index"> ['KC002', 'กสินธร','สีปัญญา','พนักงานแนะนำสินค้า','หน่วย COC หยิบสินค้า-SLR']];let i = index">
<td class="flex justify-center items-center" style="height: 40px;"> <td class="text-center">
<input type="checkbox" style="margin-right: 20px; transform: scale(0.7);"> <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item[0]}}" >
<span style="display: inline-block; min-width: 60px;">{{ item[0]}}</span> <label for="checkbox-{{item[0]}}">&nbsp;{{item[0]}}</label>
</td> </td>
<td style="text-align: center; font-size: 12px;">{{item[1]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[2]}}</td> <td >{{item[1]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[3]}}</td> <td >{{item[2]}}</td>
<td style="text-align: center; font-size: 12px;">{{item[4]}}</td> <td >{{item[3]}}</td>
<td >{{item[4]}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#sub-employee-registration-modal-edit"></i> data-hs-overlay="#sub-employee-registration-modal-edit"></i>
......
src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.scss
.button-clear {
position: absolute;
top: 96px;
z-index: 1;
right: 41vw;
}
.button-help {
position: absolute;
top: 0px;
z-index: 1;
right: 0vw;
margin: 4.2rem;
margin-right: 10px; /* เพิ่มใหม่ 12/16*/
}
table.ti-custom-table thead {
height: 50px;
}
table.ti-custom-table thead th span {
font-size: 12px;
font-weight: bold;
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
width: 100%;
cursor: pointer;
margin-bottom: 10px;
height: 20%;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 2px solid #569bf5;
line-height: 0.8;
}
.ti-pagination .page-link.active {
background-color: #569bf5;
color: white;
border-radius: 50%;
padding: 8px 12px;
}
.box-body{
padding: 0rem;
}
.page{
min-height: 0vh;
}
.ti-modal-content {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 90%; /* จำกัดความสูงให้อยู่ใน modal */
overflow-y: auto; /* เปิดการเลื่อนแนวตั้ง */
}
.ti-modal-body-content {
display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
margin-left: calc(15% - 30px);
margin-right: 20px;
}
.ti-modal .ti-modal-header-upload{
display: flex;
align-items: center;
justify-content: center;
border-bottom-width: 1px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
.ti-modal-content-upload{
background-color: white;
width: 25%; /* ความกว้างที่คุณต้องการ */
height: 80%;
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
}
.ti-modal-content-alert{
width: 35%; /* ความกว้างที่คุณต้องการ */
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
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
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