Skip to content

M
myAppraisal
Commit 78c35be9 by Natthaphat Pankiang
Options

Merge branch 'DEV' into 'master' 

Dev

See merge request !1
parents 51774a1e c24c76a6
Showing with 2115 additions and 530 deletions
src/app/app-routing.module.ts
......@@ -29,7 +29,7 @@ const routes: Routes = [
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabledNonBlocking', useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule {
......
src/app/components/account-settings/account-settings.component.html 0 → 100644
<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>
\ No newline at end of file
src/app/components/account-settings/account-settings.component.scss 0 → 100644
/* สไตล์ของแถบเมนู */
.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/account-settings/account-settings.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-account-settings',
templateUrl: './account-settings.component.html',
styleUrls: ['./account-settings.component.scss']
})
export class AccountSettingsComponent {
pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน']
activeTab: string = 'tab1';
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text]
this.activeTab = tab.id
}
}
src/app/components/account-settings/set-a-password/set-a-password.component.scss 0 → 100644
.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 {
width: 50%; /* ความกว้างที่คุณต้องการ */
height: 80%;
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
}
.ti-modal-body {
display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
margin-left: 100px;
}
src/app/components/account-settings/set-a-password/set-a-password.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-set-a-password',
templateUrl: './set-a-password.component.html',
styleUrls: ['./set-a-password.component.scss']
})
export class SetAPasswordComponent {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text])
this.activeTab = tab.id;
}
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/account-settings/user-settings/user-settings.component.scss 0 → 100644
.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;
}
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-body {
display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
margin-left: 100px;
margin-right: 50px;
}
\ No newline at end of file
src/app/components/account-settings/user-settings/user-settings.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-user-settings',
templateUrl: './user-settings.component.html',
styleUrls: ['./user-settings.component.scss']
})
export class UserSettingsComponent {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', 'สร้างรหัสผู้ใช้งาน']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ตั้งค่าผู้ใช้งาน', tab.text])
this.activeTab = tab.id;
}
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/company-registration/branch-business-unit/branch-business-unit.component.html
<div class="head-title">
<div class="text-xxl font-bold pt-2rem pb-1rem text-primary">
รายละเอียดสาขาและหน่วยธุรกิจ
</div>
<div class="body-content">
<ul class="nav-tabs">
<li class="nav-item" *ngFor="let item of [{id:'tab1',text:'ทะเบียนฝ่าย'},
{id:'tab2',text:'ทะเบียนแผนก'},
{id:'tab3',text:'ทะเบียนส่วน'},
{id:'tab4',text:'ส่วนย่อย1'},
{id:'tab5',text:'ส่วนย่อย2'},
{id:'tab6',text:'ส่วนย่อย3'},
{id:'tab7',text:'ส่วนย่อย4'}]" (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="page">
<div class="border-b border-gray-200 dark:border-white/10">
<nav class="flex space-x-2 rtl:space-x-reverse">
<a class="w-28 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-sm 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"
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
ทะเบียนฝ่าย
</a>
<a class="w-28 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-sm 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"
href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2" aria-controls="card-type-2">
ทะเบียนแผนก
</a>
<a class="w-28 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-sm 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"
href="javascript:void(0);" id="card-type-item-3" data-hs-tab="#card-type-3" aria-controls="card-type-3">
ทะเบียนส่วน
</a>
<a class="w-28 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-sm 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"
href="javascript:void(0);" id="card-type-item-4" data-hs-tab="#card-type-4" aria-controls="card-type-4">
ส่วนย่อย1
</a>
<a class="w-28 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-sm 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"
href="javascript:void(0);" id="card-type-item-5" data-hs-tab="#card-type-5" aria-controls="card-type-5">
ส่วนย่อย2
</a>
<a class="w-28 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-sm 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"
href="javascript:void(0);" id="card-type-item-6" data-hs-tab="#card-type-6" aria-controls="card-type-6">
ส่วนย่อย3
</a>
<a class="w-28 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-sm 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"
href="javascript:void(0);" id="card-type-item-7" data-hs-tab="#card-type-7" aria-controls="card-type-7">
ส่วนย่อย4
</a>
</nav>
</div>
<div class="">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<app-department-register></app-department-register>
</div>
<div *ngIf="activeTab === 'tab2'" class="tab-pane">
<div id="card-type-2" class="hidden" role="tabpanel" aria-labelledby="card-type-item-2">
<app-department-list></app-department-list>
</div>
<div *ngIf="activeTab === 'tab3'" class="tab-pane">
<div id="card-type-3" class="hidden" role="tabpanel" aria-labelledby="card-type-item-3">
<app-section-registration></app-section-registration>
</div>
<div *ngIf="activeTab === 'tab4'" class="tab-pane">
<div id="card-type-4" class="hidden" role="tabpanel" aria-labelledby="card-type-item-4">
<app-sub-department-one></app-sub-department-one>
</div>
<div *ngIf="activeTab === 'tab5'" class="tab-pane">
<div id="card-type-5" class="hidden" role="tabpanel" aria-labelledby="card-type-item-5">
<app-sub-department-two></app-sub-department-two>
</div>
<div *ngIf="activeTab === 'tab6'" class="tab-pane">
<div id="card-type-6" class="hidden" role="tabpanel" aria-labelledby="card-type-item-6">
<app-sub-department-three></app-sub-department-three>
</div>
<div *ngIf="activeTab === 'tab7'" class="tab-pane">
<div id="card-type-7" class="hidden" role="tabpanel" aria-labelledby="card-type-item-7">
<app-sub-department-four></app-sub-department-four>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/branch-business-unit.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.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;
}
src/app/components/company-registration/branch-business-unit/department-list/department-list.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.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: 3.5px solid #569bf5;
}
\ No newline at end of file
.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;
}
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/department-list/department-list.component.ts
......@@ -6,13 +6,44 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
styleUrls: ['./department-list.component.scss']
})
export class DepartmentListComponent {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
this.activeTab = tab.id;
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.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: 3.5px solid #569bf5;
}
.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;
}
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, } from '@angular/core';
import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
import { Bu1Service } from 'src/app/shared/services/bu1.service';
@Component({
selector: 'app-department-register',
templateUrl: './department-register.component.html',
styleUrls: ['./department-register.component.scss']
})
export class DepartmentRegisterComponent {
export class DepartmentRegisterComponent implements OnInit {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
bu1List: Bu1Model[] = []
bu1: Bu1Model = new MyBu1Model({})
search = ""
constructor(private bu1Service: Bu1Service) { }
ngOnInit(): void {
this.getBu1List()
}
getBu1List() {
this.bu1Service.getList().subscribe(response => {
this.bu1List = response
this.searchChange()
})
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.bu1ListFilter().length / 10) }, (_, i) => i + 1);
}
bu1ListFilter() {
return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
}
selectBu1(bu1: Bu1Model) {
this.bu1 = new MyBu1Model(bu1)
}
addBu1() {
// this.bu1Service.post(this.bu1).subscribe((response:any) => {
// if (response.success) {
// this.getBu1List()
// }
// })
}
deleteBu1(bu1: Bu1Model) {
// this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
// if (response.success) {
// this.getBu1List()
// }
// })
}
}
src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.scss 0 → 100644
.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;
}
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/section-registration/section-registration.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-section-registration',
templateUrl: './section-registration.component.html',
styleUrls: ['./section-registration.component.scss']
})
export class SectionRegistrationComponent {
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.scss 0 → 100644
.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;
}
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-sub-department-four',
templateUrl: './sub-department-four.component.html',
styleUrls: ['./sub-department-four.component.scss']
})
export class SubDepartmentFourComponent {
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.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: 3.5px solid #569bf5;
}
\ No newline at end of file
.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;
}
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts
......@@ -6,13 +6,45 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
styleUrls: ['./sub-department-one.component.scss']
})
export class SubDepartmentOneComponent {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
this.activeTab = tab.id;
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.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: 3.5px solid #569bf5;
}
\ No newline at end of file
.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;
}
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts
......@@ -6,13 +6,43 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
styleUrls: ['./sub-department-three.component.scss']
})
export class SubDepartmentThreeComponent {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
this.activeTab = tab.id;
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.scss 0 → 100644
.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;
}
\ No newline at end of file
src/app/components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-sub-department-two',
templateUrl: './sub-department-two.component.html',
styleUrls: ['./sub-department-two.component.scss']
})
export class SubDepartmentTwoComponent {
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/company-registration/company-registration.component.html
......@@ -2,25 +2,33 @@
<div class="bg-card-white">
</div>
<div class="block-main-content">
<div class="head-title">
<div class="text-xxl font-bold py-2 px-4 text-primary">
ทะเบียนบริษัท
</div>
<div class="body-content">
<ul class="nav-tabs">
<li class="nav-item" *ngFor="let item of [{id:'tab1',text:'ทะเบียนบริษัท'},
{id:'tab2',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">
<p>ทะเบียนบริษัท</p>
<div class="page">
<div class="border-b border-gray-200 dark:border-white/10">
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="pl-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"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1"
(click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','ทะเบียนบริษัท']">
ทะเบียนบริษัท
</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"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2"
(click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','สาขาและหน่วยธุรกิจ' ,'ทะเบียนฝ่าย']">
สาขาและหน่วยธุรกิจ
</a>
</nav>
</div>
<div class="mt-3 px-3rem">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
รายละเอียดทะเบียนบริษัท
</div>
<div *ngIf="activeTab === 'tab2'" class="tab-pane">
<div class="mt-5"></div>
<div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
<app-branch-business-unit [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-branch-business-unit>
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
\ No newline at end of file
src/app/components/company-registration/company-registration.component.scss
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
border-bottom: 2px solid #ccc; /* เส้นใต้ */
width: 100%;
cursor: pointer;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #569bf5; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
src/app/components/company-registration/company-registration.component.ts
......@@ -7,11 +7,4 @@ import { Component } from '@angular/core';
})
export class CompanyRegistrationComponent {
pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'ทะเบียนบริษัท']
activeTab: string = 'tab1';
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', tab.text]
this.activeTab = tab.id
}
}
src/app/components/dashboard/dashboard-routing.module.ts
......@@ -13,6 +13,8 @@ import { ProjectsComponent } from './projects/projects.component';
import { StocksComponent } from './stocks/stocks.component';
import { CourseComponent } from './course/course.component';
import { CompanyRegistrationComponent } from '../company-registration/company-registration.component';
import { JobDescriptionComponent } from '../job-description/job-description.component';
import { AccountSettingsComponent } from '../account-settings/account-settings.component';
const routes: Routes = [
{
path: "",
......@@ -32,6 +34,8 @@ const routes: Routes = [
// myComponent
{ path: "company-registration", component: CompanyRegistrationComponent },
{ path: "job-description", component: JobDescriptionComponent },
{ path: "account-settings", component: AccountSettingsComponent },
]
}
];
......
src/app/components/dashboard/dashboard.module.ts
......@@ -24,8 +24,24 @@ import { CompanyRegistrationComponent } from '../company-registration/company-re
import { DepartmentRegisterComponent } from '../company-registration/branch-business-unit/department-register/department-register.component';
import { BranchBusinessUnitComponent } from '../company-registration/branch-business-unit/branch-business-unit.component';
import { DepartmentListComponent } from '../company-registration/branch-business-unit/department-list/department-list.component';
import { SubDepartmentOneComponent} from '../company-registration/branch-business-unit/sub-department-one/sub-department-one.component';
import { SubDepartmentThreeComponent} from '../company-registration/branch-business-unit/sub-department-three/sub-department-three.component';
import { SubDepartmentOneComponent } from '../company-registration/branch-business-unit/sub-department-one/sub-department-one.component';
import { SubDepartmentThreeComponent } from '../company-registration/branch-business-unit/sub-department-three/sub-department-three.component';
import { SubDepartmentTwoComponent } from '../company-registration/branch-business-unit/sub-department-two/sub-department-two.component';
import { SubDepartmentFourComponent } from '../company-registration/branch-business-unit/sub-department-four/sub-department-four.component';
import { SectionRegistrationComponent } from '../company-registration/branch-business-unit/section-registration/section-registration.component';
import { JobDescriptionComponent } from '../job-description/job-description.component';
import { PositionUnitComponent } from '../job-description/position/position-unit.component';
import { EmployeeGroupUnit } from '../job-description/employee-group-unit/employee-group-unit.component';
import { EmployeeCategories } from '../job-description/employee-categories/employee-categories.component';
import { AccountSettingsComponent } from '../account-settings/account-settings.component';
import { UserSettingsComponent } from '../account-settings/user-settings/user-settings.component';
import { EmployeeLevel } from '../job-description/employee-level/employee-level.component';
import { SetAPasswordComponent } from '../account-settings/set-a-password/set-a-password.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Bu1Service } from 'src/app/shared/services/bu1.service';
import { HttpRequestInterceptor } from 'src/app/shared/services/http-request.interceptor';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
SalesComponent,
......@@ -46,8 +62,19 @@ import { SubDepartmentThreeComponent} from '../company-registration/branch-busin
BranchBusinessUnitComponent,
DepartmentRegisterComponent,
DepartmentListComponent,
SectionRegistrationComponent,
SubDepartmentOneComponent,
SubDepartmentTwoComponent,
SubDepartmentThreeComponent,
SubDepartmentFourComponent,
JobDescriptionComponent,
PositionUnitComponent,
EmployeeGroupUnit,
EmployeeCategories,
AccountSettingsComponent,
UserSettingsComponent,
EmployeeLevel,
SetAPasswordComponent
],
imports: [
CommonModule,
......@@ -58,6 +85,13 @@ import { SubDepartmentThreeComponent} from '../company-registration/branch-busin
SharedModule,
NgxChartsModule,
NgSelectModule,
HttpClientModule,
FormsModule
],
providers: [Bu1Service, {
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
multi: true,
},]
})
export class DashboardModule { }
src/app/components/job-description/employee-categories/employee-categories.component.scss 0 → 100644
.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;
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
\ No newline at end of file
src/app/components/job-description/employee-categories/employee-categories.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-employee-categories',
templateUrl: './employee-categories.component.html',
styleUrls: ['./employee-categories.component.scss']
})
export class EmployeeCategories {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
this.activeTab = tab.id;
}
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/job-description/employee-group-unit/employee-group-unit.component.scss 0 → 100644
.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;
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
.ti-modal-content-upload{
background-color: white;
width: 25%; /* ความกว้างที่คุณต้องการ */
height: 80%;
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
}
.modal-headerupload{
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;
}
\ No newline at end of file
src/app/components/job-description/employee-group-unit/employee-group-unit.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-employee-group-unit',
templateUrl: './employee-group-unit.component.html',
styleUrls: ['./employee-group-unit.component.scss']
})
export class EmployeeGroupUnit {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
this.activeTab = tab.id;
}
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"upload":{
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/job-description/employee-level/employee-level.component.scss 0 → 100644
.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;
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
.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 กลับมาให้ตรงกลาง */
}
\ No newline at end of file
src/app/components/job-description/employee-level/employee-level.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-employee-level',
templateUrl: './employee-level.component.html',
styleUrls: ['./employee-level.component.scss']
})
export class EmployeeLevel {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
this.activeTab = tab.id;
}
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"upload": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/components/job-description/job-description.component.html 0 → 100644
<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">
<ul class="nav-tabs">
<li class="nav-item" *ngFor="let item of [{id:'tab1',text:'กลุ่มพนักงาน'},
{id:'tab2',text:'ตำเเหน่ง'},
{id:'tab3',text:'ลักษณะงาน'},
{id:'tab4',text:'ประเภทพนักงาน'},
{id:'tab5',text:'ระดับพนักงาน (PL)'}]" (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-employee-group-unit [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-employee-group-unit>
</div>
</div>
<div *ngIf="activeTab === 'tab2'" class="tab-pane">
<div class="mt-5">
<app-position-unit [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-position-unit>
</div>
</div>
<div *ngIf="activeTab === 'tab3'" class="tab-pane">
<div class="mt-5">
</div>
</div>
<div *ngIf="activeTab === 'tab4'" class="tab-pane">
<div class="mt-5">
<app-employee-categories [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-employee-categories>
</div>
</div>
<div *ngIf="activeTab === 'tab5'" class="tab-pane">
<div class="mt-5">
<app-employee-level [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-employee-level>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/job-description/job-description.component.scss 0 → 100644
/* สไตล์ของแถบเมนู */
.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;
}
.body-content {
margin-left: 10px;
}
\ No newline at end of file
src/app/components/job-description/job-description.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-job-description',
templateUrl: './job-description.component.html',
styleUrls: ['./job-description.component.scss']
})
export class JobDescriptionComponent {
pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
activeTab: string = 'tab1';
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text]
this.activeTab = tab.id
}
}
src/app/components/job-description/position/position-unit.component.scss 0 → 100644
.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;
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
.ti-modal-content-upload{
background-color: white;
width: 25%; /* ความกว้างที่คุณต้องการ */
height: 80%;
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
}
.modal-headerupload{
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;
}
\ No newline at end of file
src/app/components/job-description/position/position-unit.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-position-unit',
templateUrl: './position-unit.component.html',
styleUrls: ['./position-unit.component.scss']
})
export class PositionUnitComponent {
@Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ']
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'สาขาและหน่วยธุรกิจ', tab.text])
this.activeTab = tab.id;
}
modalOptions: {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด
isModalOpen: boolean; // เปิด/ปิด
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"upload":{
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
}
src/app/shared/components/page-header/page-header.component.html
......@@ -5,12 +5,16 @@
<!-- Page Header New -->
<div class="block justify-between page-header sm:flex">
<ol class="flex items-center whitespace-nowrap min-w-0">
<li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page"
*ngFor="let item of pathTitle;let l = last">
<span class="flex items-center">
<li class="text-sm" *ngFor="let item of pathTitle;let l = last">
<a class="flex items-center text-gray-500 hover:text-primary dark:text-white" href="javascript:void(0);">
{{item}}
<i *ngIf="!l" class="ri-arrow-right-s-line mx-3 text-gray-500"></i>
</span>
<svg *ngIf="!l"
class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-300 dark:text-white/10 rtl:rotate-180"
width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor"
stroke-width="2" stroke-linecap="round" />
</svg>
</a>
</li>
</ol>
</div>
......
src/app/shared/model/bu1.model.ts 0 → 100644
export interface Bu1Model {
bu1id: string;
tdesc: string;
edesc: string;
}
export class MyBu1Model implements Bu1Model {
bu1id: string;
tdesc: string;
edesc: string;
constructor(data: Partial<Bu1Model>) {
this.bu1id = data.bu1id || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
}
}
src/app/shared/services/bu1.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Bu1Model } from '../model/bu1.model';
@Injectable({
providedIn: 'root'
})
export class Bu1Service {
api = "/bu1"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<Bu1Model[]> {
return this.http.get<Bu1Model[]>(this.urlApi + "/lists")
}
// post(body: Bu1Model) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: Bu1Model) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
}
src/app/shared/services/http-request.interceptor.ts 0 → 100644
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpErrorResponse
} from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
@Injectable()
export class HttpRequestInterceptor {
responseCache = new Map()
constructor() { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.startsWith("./")) {
return next.handle(req);
} else {
const authHeader = 'Bearer ' + "eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJNWUhSUExVUyIsInJvbGVzIjpbIlVTRVIiXSwid29ya2FyZWEiOiJUS1ciLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJ6bWxvZ2luIjoiZmFsc2UiLCJyb2xlX2xldmVsIjoiNiIsImVtcGxveWVlaWQiOiIxMDAwMDA4MiIsImJyYW5jaCI6Im15aHIzIiwiZW1wX3Bvc2l0aW9uIjoiMDk3IiwidXNlcl9yb2xlIjoiQWxsIiwidWlkIjoiMTAwMDAwODIiLCJjb21wYW55aWQiOiIxMDAiLCJhY3RvcmlkIjoiMTAwMDAwODIiLCJsYW5nIjoidGgiLCJhZCI6ImZhbHNlIiwiZmlyc3Rsb2dpbiI6ImZhbHNlIiwidXJsX215aHIiOiJodHRwOi8vaHJwbHVzLXN0ZC5teWhyLmNvLnRoL2hyIiwiYXBwX25hbWUiOiJteWhyIiwicmVnaW9uYWxsdHkiOiJFTkciLCJ0b2tlbl96ZWVtZSI6IiIsInVzZXJfbGV2ZWwiOiJNWUhSIiwiZnVsbG5hbWUiOiLguJnguLLguKLguK3guJ7guLTguKPguLHguJXguJnguYwgIOC4l-C4lOC4quC4reC4miIsImNvbWlkIjoiIiwiam9iIjoiMDk3LTI0NjkiLCJ1c2VyIjoibXlociIsInptX3VzZXIiOiIiLCJ1c2VybmFtZSI6Im15aHIiLCJtZW1iZXJpZCI6IiJ9.5VUk7ZilGchdTTm-5YC0xIL53cEYX6AkfEW4d8Xd-1g";
const overideReq = {
headers: req.headers.set('Authorization', authHeader),
url: req.url,
};
const authReq = req.clone(overideReq);
return next.handle(authReq).pipe(tap(response => {
this.responseCache.set(req.urlWithParams, response)
}));
}
}
}
src/app/shared/services/navservice.ts
......@@ -94,7 +94,20 @@ export class NavService implements OnDestroy {
active: false,
path: '/company-registration'
},
{
title: 'ข้อมูลลักษณะงาน',
type: 'link',
selected: false,
active: false,
path: '/job-description'
},
{
title: 'ตั้งค่าชื่อผู้ใช้',
type: 'link',
selected: false,
active: false,
path: '/account-settings'
},
......
src/assets/css/style.css
......@@ -3352,7 +3352,8 @@ select option:active,
}
}
.ti-pagination li .page-link.active{
background-color: rgb(var(--color-primary));
/* background-color: rgb(var(--color-primary)); */
background-color: rgb(var(--color-secondary));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
......@@ -3897,6 +3898,9 @@ select option:active,
.ms-1{
margin-inline-start: 0.25rem;
}
.m-auto{
margin: auto;
}
.mt-0{
margin-top: 0px;
}
......@@ -4095,6 +4099,9 @@ select option:active,
.h-\[500px\]{
height: 500px;
}
.h-45px{
height: 45px;
}
.h-\[calc\(100\%-3\.5rem\)\]{
height: calc(100% - 3.5rem);
}
......@@ -5481,6 +5488,9 @@ select option:active,
.bg-pink-800\/20{
background-color: rgb(157 23 77 / 0.2);
}
.bg-soft-secondary{
background-color: rgb(var(--color-secondary) / 0.1) !important;
}
.bg-primary{
background-color: rgb(var(--color-primary));
}
......@@ -5957,6 +5967,12 @@ select option:active,
.pl-3{
padding-left: 0.75rem;
}
.pl-8{
padding-left: 2rem;
}
.pr-8{
padding-right: 2rem;
}
.pr-3{
padding-right: 0.75rem;
}
......@@ -5975,6 +5991,206 @@ select option:active,
.pt-3{
padding-top: 0.75rem;
}
.pt-1rem{
padding-top: 1rem;
}
.pt-2rem{
padding-top: 2rem;
}
.pt-3rem{
padding-top: 3rem;
}
.pt-4rem{
padding-top: 4rem;
}
.pt-5rem{
padding-top: 5rem;
}
.pb-1rem{
padding-bottom: 1rem;
}
.pb-2rem{
padding-bottom: 2rem;
}
.pb-3rem{
padding-bottom: 3rem;
}
.pb-4rem{
padding-bottom: 4rem;
}
.pb-5rem{
padding-bottom: 5rem;
}
.pl-1rem{
padding-left: 1rem;
}
.pl-2rem{
padding-left: 2rem;
}
.pl-3rem{
padding-left: 3rem;
}
.pl-4rem{
padding-left: 4rem;
}
.pl-5rem{
padding-left: 5rem;
}
.pr-1rem{
padding-right: 1rem;
}
.pr-2rem{
padding-right: 2rem;
}
.pr-3rem{
padding-right: 3rem;
}
.pr-4rem{
padding-right: 4rem;
}
.pr-5rem{
padding-right: 5rem;
}
.px-1rem{
padding-left: 1rem;
padding-right: 1rem;
}
.px-2rem{
padding-left: 2rem;
padding-right: 2rem;
}
.px-3rem{
padding-left: 3rem;
padding-right: 3rem;
}
.px-4rem{
padding-left: 4rem;
padding-right: 4rem;
}
.px-5rem{
padding-left: 5rem;
padding-right: 5rem;
}
.py-1rem{
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-2rem{
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-3rem{
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-4rem{
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-5rem{
padding-top: 5rem;
padding-bottom: 5rem;
}
.pt-10px{
padding-top: 10px;
}
.pt-20px{
padding-top: 20px;
}
.pt-30px{
padding-top: 30px;
}
.pt-40px{
padding-top: 40px;
}
.pt-50px{
padding-top: 50px;
}
.pb-10px{
padding-bottom: 10px;
}
.pb-20px{
padding-bottom: 20px;
}
.pb-30px{
padding-bottom: 30px;
}
.pb-40px{
padding-bottom: 40px;
}
.pb-50px{
padding-bottom: 50px;
}
.pl-10px{
padding-left: 10px;
}
.pl-20px{
padding-left: 20px;
}
.pl-30px{
padding-left: 30px;
}
.pl-40px{
padding-left: 40px;
}
.pl-50px{
padding-left: 50px;
}
.pr-10px{
padding-right: 10px;
}
.pr-20px{
padding-right: 20px;
}
.pr-30px{
padding-right: 30px;
}
.pr-40px{
padding-right: 40px;
}
.pr-50px{
padding-right: 50px;
}
.px-10px{
padding-left: 10px;
padding-right: 10px;
}
.px-20px{
padding-left: 20px;
padding-right: 20px;
}
.px-30px{
padding-left: 30px;
padding-right: 30px;
}
.px-40px{
padding-left: 40px;
padding-right: 40px;
}
.px-50px{
padding-left: 50px;
padding-right: 50px;
}
.py-10px{
padding-top: 10px;
padding-bottom: 10px;
}
.py-20px{
padding-top: 20px;
padding-bottom: 20px;
}
.py-30px{
padding-top: 30px;
padding-bottom: 30px;
}
.py-40px{
padding-top: 40px;
padding-bottom: 40px;
}
.py-50px{
padding-top: 50px;
padding-bottom: 50px;
}
.text-left{
text-align: left;
}
......@@ -6056,6 +6272,10 @@ select option:active,
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xxl{
font-size: 1.5rem;
line-height: 1.75rem;
}
.text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
......@@ -6636,10 +6856,10 @@ select option:active,
--color-primary: 21 76 156;
--color-primary-rgb: 21,76,156;
--color-secondary: 96 165 250;
--color-success: 34 197 94;
--color-info: 76 117 207;
--color-warning: 234 179 8;
--color-danger: 244 63 94;
--color-success: 29 190 90;
--color-info: 159 73 241;
--color-warning: 231 169 39;
--color-danger: 242 51 84;
--body-bg: 242 246 249;
--default-text-color: 71 85 105;
--default-border: 243 243 243;
......@@ -6653,6 +6873,7 @@ select option:active,
--header-border-color: 243 243 243;
--dark-bg: 30 41 59;
--dark-bg2: 249 250 251;
--color-indigo : 89 91 234;
}
.dark {
--body-bg: 41 53 73;
......@@ -21207,3 +21428,287 @@ div:where(.swal2-container) div:where(.swal2-validation-message){
}
}
/*# sourceMappingURL=style.css.map */
.ti-btn-soft-warning .svg-warning{
stroke: #E7A927;
}
.ti-btn-soft-warning:hover .svg-warning path {
stroke: white;
}
.svg-primary{
stroke: #194C9C;
}
.align-items-end{
align-items: end;
}
.fs-l{
font-size: large;
}
.fs-xl{
font-size: x-large;
}
.fs-xxl{
font-size: xx-large;
}
.fw-b{
font-weight: bolder;
}
.mt-1rem{
margin-top: 1rem;
}
.mt-2rem{
margin-top: 2rem;
}
.mt-3rem{
margin-top: 3rem;
}
.mt-4rem{
margin-top: 4rem;
}
.mt-5rem{
margin-top: 5rem;
}
.mb-1rem{
margin-bottom: 1rem;
}
.mb-2rem{
margin-bottom: 2rem;
}
.mb-3rem{
margin-bottom: 3rem;
}
.mb-4rem{
margin-bottom: 4rem;
}
.mb-5rem{
margin-bottom: 5rem;
}
.ml-1rem{
margin-left: 1rem;
}
.ml-2rem{
margin-left: 2rem;
}
.ml-3rem{
margin-left: 3rem;
}
.ml-4rem{
margin-left: 4rem;
}
.ml-5rem{
margin-left: 5rem;
}
.mr-1rem{
margin-right: 1rem;
}
.mr-2rem{
margin-right: 2rem;
}
.mr-3rem{
margin-right: 3rem;
}
.mr-4rem{
margin-right: 4rem;
}
.mr-5rem{
margin-right: 5rem;
}
.mx-1rem{
margin-left: 1rem;
margin-right: 1rem;
}
.mx-2rem{
margin-left: 2rem;
margin-right: 2rem;
}
.mx-3rem{
margin-left: 3rem;
margin-right: 3rem;
}
.mx-4rem{
margin-left: 4rem;
margin-right: 4rem;
}
.mx-5rem{
margin-left: 5rem;
margin-right: 5rem;
}
.my-1rem{
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-2rem{
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-3rem{
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-4rem{
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-5rem{
margin-top: 5rem;
margin-bottom: 5rem;
}
.mt-10px{
margin-top: 10px;
}
.mt-20px{
margin-top: 20px;
}
.mt-30px{
margin-top: 30px;
}
.mt-40px{
margin-top: 40px;
}
.mt-50px{
margin-top: 50px;
}
.mb-10px{
margin-bottom: 10px;
}
.mb-20px{
margin-bottom: 20px;
}
.mb-30px{
margin-bottom: 30px;
}
.mb-40px{
margin-bottom: 40px;
}
.mb-50px{
margin-bottom: 50px;
}
.ml-10px{
margin-left: 10px;
}
.ml-20px{
margin-left: 20px;
}
.ml-30px{
margin-left: 30px;
}
.ml-40px{
margin-left: 40px;
}
.ml-50px{
margin-left: 50px;
}
.mr-10px{
margin-right: 10px;
}
.mr-20px{
margin-right: 20px;
}
.mr-30px{
margin-right: 30px;
}
.mr-40px{
margin-right: 40px;
}
.mr-50px{
margin-right: 50px;
}
.mx-10px{
margin-left: 10px;
margin-right: 10px;
}
.mx-20px{
margin-left: 20px;
margin-right: 20px;
}
.mx-30px{
margin-left: 30px;
margin-right: 30px;
}
.mx-40px{
margin-left: 40px;
margin-right: 40px;
}
.mx-50px{
margin-left: 50px;
margin-right: 50px;
}
.my-10px{
margin-top: 10px;
margin-bottom: 10px;
}
.my-20px{
margin-top: 20px;
margin-bottom: 20px;
}
.my-30px{
margin-top: 30px;
margin-bottom: 30px;
}
.my-40px{
margin-top: 40px;
margin-bottom: 40px;
}
.my-50px{
margin-top: 50px;
margin-bottom: 50px;
}
.i-gray{
--tw-text-opacity: 1 !important;
color: rgb(100 116 139 / var(--tw-text-opacity)) !important;
}
.i-gray:hover{
--tw-text-opacity: 1;
color: rgb(15 23 42 / var(--tw-text-opacity)) !important;
}
.ti-btn-soft-indigo{
background-color: rgb(var(--color-indigo) / 0.1);
color: rgb(var(--color-indigo));
--tw-ring-offset-color: #fff;
}
.ti-btn-soft-indigo:hover{
background-color: rgb(var(--color-indigo));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.ti-btn-soft-indigo:focus{
--tw-ring-color: rgb(var(--color-indigo));
}
.ti-btn-indigo{
background-color: rgb(var(--color-indigo));
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.ti-btn-indigo:hover{
background-color: rgb(var(--color-indigo));
}
.ti-btn-indigo:focus{
--tw-ring-color: rgb(var(--color-indigo));
}
.ti-btn-soft-indigo .svg-indigo{
stroke: #595bea;
}
.ti-btn-soft-indigo:hover .svg-indigo path {
stroke: white;
}
.ti-modal .ti-modal-header-button{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom-width: 1px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
.bg-input-readonly{
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
\ No newline at end of file
src/environments/environment.ts
......@@ -12,6 +12,7 @@ export const environment = {
appId: '********************************',
measurementId: '********************************',
},
baseUrl: 'https://hrplus-std.myhr.co.th/plus',
};
/*
......
src/styles.scss
......@@ -346,18 +346,7 @@ ngx-dropzone {
}
/* colorpicker */
.body-content {
display: flex;
flex-direction: column;
padding: 0.5rem 1rem 1rem 1rem;
}
.head-title {
color: rgb(var(--color-primary));
font-weight: 700;
display: flex;
padding: 1rem 1rem 0.5rem 1rem;
font-size: x-large;
}
.bg-card-white {
background-color: #ffffff;
height: 100vh;
......@@ -383,116 +372,4 @@ ngx-dropzone {
background: white;
margin-left: -1.75rem;
}
}
.input-wrapper {
position: relative;
max-width: 20rem;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
display: flex;
align-items: center; // จัดให้อยู่กลางในแนวตั้ง
justify-content: space-between; // จัดไอคอนให้ไปอยู่ข้างขวา
}
.input-wrapper input {
font-family: Montserrat !important;
padding: 0.5rem;
padding-left: 2.5rem; // เพิ่มพื้นที่สำหรับไอคอน
}
.input-wrapper .icon {
position: absolute;
left: 1rem; // ตำแหน่งไอคอนที่ซ้าย
pointer-events: none; // ไอคอนไม่ทำให้การคลิกใน input หยุด
}
.button-blue-light {
min-width: 5rem;
background-color: #e6f0ff;
--tw-text-opacity: 1;
color: #569bf5;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.button-purple-light {
min-width: 5rem;
background-color: #f1e4fe;
--tw-text-opacity: 1;
color: #9f49f1;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.button-yellow-light {
min-width: 5rem;
background-color: #fef8bf;
--tw-text-opacity: 1;
color: #e7a927;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
border-width: 1px;
border-color: transparent;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.shadow-gray-smoke {
box-shadow: rgba(149, 157, 165, 0.2) 0px 6px 24px;
}
.head-table {
padding: 10px 20px; /* เพิ่มระยะขอบ */
font-weight: bold !important;
font-size: large !important;
background-color: #e6f0ff; /* พื้นหลังสำหรับ header */
color: rgb(var(--color-primary));
}
.head-table-icon {
fill: rgb(var(--color-primary)); /* สีไอคอน */
margin: auto;
}
.body-table-center {
display: flex;
justify-content: 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