Skip to content

M
myAppraisal
Commit 034da90d by Nattana Chaiyamat
Options

ทะเบียนฝ่าย 

ทะเบียนแผนก
ทะเบียนส่วน
ทะเบียนส่วนย่อย1 2 3 4
กลุ่มพนักงาน
ตำแหน่ง
ทะเบียนประเภทพนักงาน
ทะเบียนระดับพนักงาน
ประเภทสมรรถนะ
หัวข้อสมรรถนะ
เครื่องมือประเมิน
หลักสูตรการพัฒนา
parent 815f2cbb
Showing with 3735 additions and 2778 deletions
src/app/authentication/authentication.module.ts
......@@ -6,6 +6,9 @@ import { LoginPageComponent } from './login-page/login-page.component';
import { RegisterPageComponent } from './register-page/register-page.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthService } from '../shared/services/auth.service';
import { HttpRequestInterceptor } from '../shared/services/http-request.interceptor';
@NgModule({
declarations: [LoginPageComponent, RegisterPageComponent],
......@@ -15,6 +18,12 @@ import { AngularFireAuthModule } from '@angular/fire/compat/auth';
AngularFireAuthModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule
],
providers: [AuthService, {
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
multi: true,
},]
})
export class AuthenticationModule {}
export class AuthenticationModule { }
src/app/authentication/login-page/login-page.component.ts
......@@ -16,13 +16,13 @@ export class LoginPageComponent {
constructor(@Inject(DOCUMENT)
private document: Document,
private elementRef: ElementRef,
private renderer: Renderer2,
private formBuilder: FormBuilder,
private router: Router,
private authservice: AuthService,) {
private elementRef: ElementRef,
private renderer: Renderer2,
private formBuilder: FormBuilder,
private router: Router,
private authservice: AuthService,) {
const bodyElement = this.renderer.selectRootElement('body', true);
this.renderer.setAttribute(bodyElement, 'class', 'cover1 justify-center');
this.renderer.setAttribute(bodyElement, 'class', 'cover1 justify-center');
}
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
......@@ -37,15 +37,15 @@ export class LoginPageComponent {
this.renderer.addClass(this.document.body, 'bg-white');
this.renderer.addClass(this.document.body, 'dark:bg-bgdark');
const html : any = this.elementRef.nativeElement.ownerDocument.documentElement;
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;
html.removeAttribute('data-header-styles', 'light');
//html.removeAttribute('data-nav-layout','vertical');
html.classList.add('h-full', 'light');
if (localStorage.getItem('synto-header-mode') == 'dark') {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;
html.classList.add('h-full', 'dark');
}
if (localStorage.getItem('synto-header-mode') == 'dark') {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;
html.classList.add('h-full', 'dark');
}
}
// firebase
......@@ -105,11 +105,26 @@ export class LoginPageComponent {
}
Submit() {
if (
this.loginForm.controls['username'].value === 'spruko@admin.com' &&
this.loginForm.controls['password'].value === 'sprukoadmin'
) {
this.router.navigate(['/self-evaluation']);
// if (
// this.loginForm.controls['username'].value === 'spruko@admin.com' &&
// this.loginForm.controls['password'].value === 'sprukoadmin'
// ) {
// this.router.navigate(['/self-evaluation']);
// } else {
// this.error = 'Please check email and passowrd';
// }
if (this.loginForm.controls['username'].value &&
this.loginForm.controls['password'].value) {
sessionStorage.clear()
this.authservice.loginWithUserPass(this.loginForm.controls['username'].value,
this.loginForm.controls['password'].value).subscribe({
next: response => {
sessionStorage.setItem("accessToken", response.accessToken)
this.router.navigate(['/self-evaluation']);
}, error: error => {
this.error = 'Please check email and passowrd';
}
})
} else {
this.error = 'Please check email and passowrd';
}
......@@ -126,12 +141,12 @@ export class LoginPageComponent {
this.renderer.removeClass(this.document.body, '!py-0');
this.renderer.removeClass(this.document.body, 'bg-white');
this.renderer.removeClass(this.document.body, 'dark:bg-bgdark');
if (localStorage.getItem('synto-header-mode') == 'dark') {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;
html.classList.remove('h-full', 'dark');
}
if (localStorage.getItem('synto-header-mode') == 'dark') {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;
html.classList.remove('h-full', 'dark');
}
const authe: any = document.querySelector('.h-full');
authe.removeAttribute('class', 'h-full');
const authe: any = document.querySelector('.h-full');
authe.removeAttribute('class', 'h-full');
}
}
src/app/authentication/login-page/login-page2.component.html
......@@ -74,14 +74,15 @@
</div>
</div>
<!-- End Checkbox -->
<a routerLink="/self-evaluation"
<button type="submit" (click)="Submit()"
class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-sm border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:outline-none focus:ring-0 focus:ring-primary focus:ring-offset-0 transition-all text-sm dark:focus:ring-offset-white/10">Sign
in</a>
in</button>
<div class="text-center">
<p class="mt-3 text-sm text-gray-600 dark:text-white/70">
Don't have an account yet?
(คุณมีบัญชีเเล้วหรือยัง?)
<a class="text-primary decoration-2 hover:underline font-medium" routerLink="/auth/register">
<a class="text-primary decoration-2 hover:underline font-medium"
routerLink="/auth/register">
Sign up here
(กรุณาลงทะเบียนที่นี่ หากคุณยังไม่มีบัญชีเข้าใช้)
</a>
......@@ -100,4 +101,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.html
......@@ -85,7 +85,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu2(item);currentModal='edit'"
data-hs-overlay="#department-list-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu2(item)" data-hs-overlay="#department-list-alert-delete-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu2(item)" data-hs-overlay="#department-list-alert-delete-modal"></i>
</td>
</tr>
</tbody>
......@@ -575,7 +575,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#department-list-alert-modal" (click)="addBu2();showSuccess()">
data-hs-overlay="#department-list-alert-modal" (click)="addBu2()">
บันทึกข้อมูล
</a>
</div>
......@@ -616,7 +616,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#department-list-alert-edit-modal" (click)="addBu2();showSuccessEdit()">
data-hs-overlay="#department-list-alert-edit-modal" (click)="addBu2()">
บันทึกข้อมูล
</a>
</div>
......@@ -656,7 +656,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#department-list-alert-delete-modal" (click)="addBu2();showSuccessDelete()">
data-hs-overlay="#department-list-alert-delete-modal" (click)="deleteBu2()">
ลบข้อมูล
</a>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.ts
......@@ -48,6 +48,7 @@ export class DepartmentListComponent implements OnInit {
this.bu2Service.getList().subscribe(response => {
this.bu2List = response
this.onBu2TableSearchChange()
this.cdr.detectChanges()
})
}
onBu2TableSearchChange() {
......@@ -55,9 +56,9 @@ export class DepartmentListComponent implements OnInit {
this.bu2Table.page = Array.from({ length: Math.ceil(this.filterBu2Table().length / 10) }, (_, i) => i + 1);
}
filterBu2Table() {
return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Table.search) ||
x.tdesc.toLowerCase().includes(this.bu2Table.search) ||
x.edesc.toLowerCase().includes(this.bu2Table.search))
return this.bu2List.filter(x => x.bu2id.includes(this.bu2Table.search) ||
x.tdesc.includes(this.bu2Table.search) ||
x.edesc.includes(this.bu2Table.search))
}
selectBu2(bu2?: Bu2Model) {
this.bu2 = new MyBu2Model(bu2 || {})
......@@ -78,25 +79,12 @@ export class DepartmentListComponent implements OnInit {
this.bu2Modal.page = Array.from({ length: Math.ceil(this.filterBu2Modal().length / 10) }, (_, i) => i + 1);
}
filterBu2Modal() {
return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu2Modal.search) ||
x.edesc.toLowerCase().includes(this.bu2Modal.search))
}
addBu2() {
// this.bu2Service.post(this.bu2).subscribe((response:any) => {
// if (response.success) {
// this.getBu2List()
// }
// })
}
deleteBu2(bu2: Bu2Model) {
// this.bu2Service.delete(new MyBu2Model(bu2)).subscribe((response:any) => {
// if (response.success) {
// this.getBu2List()
// }
// })
return this.bu2List.filter(x => x.bu2id.includes(this.bu2Modal.search) ||
x.tdesc.includes(this.bu2Modal.search) ||
x.edesc.includes(this.bu2Modal.search))
}
getBu1List() {
this.bu1Service.getList().subscribe(response => {
this.bu1List = response
......@@ -112,9 +100,9 @@ export class DepartmentListComponent implements OnInit {
this.selectBu1(bu1 || new MyBu1Model({ bu1id: this.bu1.bu1id }))
}
filterBu1Modal() {
return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.bu1Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu1Modal.search) ||
x.edesc.toLowerCase().includes(this.bu1Modal.search))
return this.bu1List.filter(x => x.bu1id.includes(this.bu1Modal.search) ||
x.tdesc.includes(this.bu1Modal.search) ||
x.edesc.includes(this.bu1Modal.search))
}
selectBu1(bu1?: Bu1Model) {
this.bu1 = new MyBu1Model(bu1 || {})
......@@ -126,17 +114,33 @@ export class DepartmentListComponent implements OnInit {
positionClass: 'toast-top-right',
});
}
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
addBu2() {
this.bu2Service.post({ ...this.bu2, parent: this.bu1.bu1id }).subscribe((response: any) => {
if (response.success) {
this.showSuccess()
this.getBu2List()
}
})
}
deleteBu2() {
this.bu2Service.delete(this.bu2).subscribe((response: any) => {
if (response.success) {
this.showSuccessDelete()
this.getBu2List()
}
})
}
}
src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.html
......@@ -26,7 +26,7 @@
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
data-hs-overlay="#department-register-modal-add">
data-hs-overlay="#department-register-modal-add" (click)="selectBu1()">
<i class="ri-add-line"></i>
Add
</button>
......@@ -63,14 +63,24 @@
</ng-container>
</tr>
</thead>
<tbody *ngIf="!bu1ListFilter().length">
<tbody *ngIf="bu1ListLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!bu1ListLoading&&!bu1ListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="bu1ListFilter().length">
<tbody *ngIf="!bu1ListLoading&&bu1ListFilter().length">
<tr
*ngFor="let item of bu1ListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">{{((currentPage-1) * 10)+(i+1)}}</td>
......@@ -80,7 +90,8 @@
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectBu1(item)"
data-hs-overlay="#department-register-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu1(item)"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu1(item)"
data-hs-overlay="#department-register-delete-alert-modal"></i>
</td>
</tr>
</tbody>
......@@ -176,10 +187,10 @@
data-hs-overlay="#department-register-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
<button type="button" class="ti-btn ti-btn-success"
data-hs-overlay="#department-register-alert-modal">
บันทึกข้อมูล
</a>
</button>
</div>
</div>
</div>
......@@ -239,13 +250,13 @@
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#department-register-modal-edit" data-hs-overlay-close>
data-hs-overlay="#department-register-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#department-register-alert-modal" data-hs-overlay-close>
<button type="button" class="ti-btn ti-btn-success"
data-hs-overlay="#department-register-alert-modal">
บันทึกข้อมูล
</a>
</button>
</div>
</div>
</div>
......@@ -278,10 +289,46 @@
data-hs-overlay="#department-register-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#department-register-alert-modal" (click)="addBu1()">
<button type="button" class="ti-btn ti-btn-success" (click)="addBu1()"
data-hs-overlay="#department-register-alert-modal">
บันทึกข้อมูล
</a>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="department-register-delete-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#department-register-delete-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#department-register-delete-alert-modal">
ย้อนกลับ
</button>
<button type="button" class="ti-btn ti-btn-success" (click)="deleteBu1()"
data-hs-overlay="#department-register-delete-alert-modal">
ลบข้อมูล
</button>
</div>
</div>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.ts
import { Component, EventEmitter, Input, OnInit, } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
import { Bu1Service } from 'src/app/shared/services/bu1.service';
......@@ -12,18 +12,28 @@ export class DepartmentRegisterComponent implements OnInit {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
bu1List: Bu1Model[] = []
bu1ListLoading = false
bu1: Bu1Model = new MyBu1Model({})
search = ""
constructor(private bu1Service: Bu1Service,
private toastr: ToastrService
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getBu1List()
}
getBu1List() {
this.bu1Service.getList().subscribe(response => {
this.bu1List = response
this.searchChange()
this.bu1ListLoading = true
this.bu1Service.getList().subscribe({
next: response => {
this.bu1List = response
this.bu1ListLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.bu1ListLoading = false
this.cdr.detectChanges()
}
})
}
searchChange() {
......@@ -31,34 +41,41 @@ export class DepartmentRegisterComponent implements OnInit {
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))
return this.bu1List.filter(x => x.bu1id.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectBu1(bu1: Bu1Model) {
// this.showSuccess()
this.bu1 = new MyBu1Model(bu1)
selectBu1(bu1?: Bu1Model) {
this.bu1 = new MyBu1Model(bu1 || {})
}
showSuccess() {
this.toastr.success('This is an example of tip', 'TIP', {
showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
addBu1() {
// this.bu1Service.post(this.bu1).subscribe((response:any) => {
// if (response.success) {
// this.getBu1List()
// }
// })
this.bu1Service.post(this.bu1).subscribe((response: any) => {
if (response.success) {
this.showSuccessAdd()
this.getBu1List()
}
})
}
deleteBu1(bu1: Bu1Model) {
// this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
// if (response.success) {
// this.getBu1List()
// }
// })
deleteBu1() {
this.bu1Service.delete(this.bu1).subscribe((response: any) => {
if (response.success) {
this.showSuccessDelete()
this.getBu1List()
}
})
}
......
src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.html
......@@ -85,7 +85,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu3(item);currentModal='edit'"
data-hs-overlay="#section-registration-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu3(item)" data-hs-overlay="#section-registration-alert-delete-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu3(item)" data-hs-overlay="#section-registration-alert-delete-modal"></i>
</td>
</tr>
</tbody>
......@@ -575,7 +575,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#section-registration-alert-modal" (click)="addBu3();showSuccess()">
data-hs-overlay="#section-registration-alert-modal" (click)="addBu3()">
บันทึกข้อมูล
</a>
</div>
......@@ -616,7 +616,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#section-registration-alert-edit-modal" (click)="addBu3();showSuccessEdit()">
data-hs-overlay="#section-registration-alert-edit-modal" (click)="addBu3()">
บันทึกข้อมูล
</a>
</div>
......@@ -657,7 +657,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#section-registration-alert-delete-modal" (click)="addBu3();showSuccessDelete()">
data-hs-overlay="#section-registration-alert-delete-modal" (click)="deleteBu3()">
ลบข้อมูล
</a>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.ts
......@@ -48,6 +48,7 @@ export class SectionRegistrationComponent implements OnInit {
this.bu3Service.getList().subscribe(response => {
this.bu3List = response
this.onBu3TableSearchChange()
this.cdr.detectChanges()
})
}
onBu3TableSearchChange() {
......@@ -55,9 +56,9 @@ export class SectionRegistrationComponent implements OnInit {
this.bu3Table.page = Array.from({ length: Math.ceil(this.filterBu3Table().length / 10) }, (_, i) => i + 1);
}
filterBu3Table() {
return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Table.search) ||
x.tdesc.toLowerCase().includes(this.bu3Table.search) ||
x.edesc.toLowerCase().includes(this.bu3Table.search))
return this.bu3List.filter(x => x.bu3id.includes(this.bu3Table.search) ||
x.tdesc.includes(this.bu3Table.search) ||
x.edesc.includes(this.bu3Table.search))
}
selectBu3(bu3?: Bu3Model) {
this.bu3 = new MyBu3Model(bu3 || {})
......@@ -78,23 +79,25 @@ export class SectionRegistrationComponent implements OnInit {
this.bu3Modal.page = Array.from({ length: Math.ceil(this.filterBu3Modal().length / 10) }, (_, i) => i + 1);
}
filterBu3Modal() {
return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu3Modal.search) ||
x.edesc.toLowerCase().includes(this.bu3Modal.search))
return this.bu3List.filter(x => x.bu3id.includes(this.bu3Modal.search) ||
x.tdesc.includes(this.bu3Modal.search) ||
x.edesc.includes(this.bu3Modal.search))
}
addBu3() {
// this.bu3Service.post(this.bu3).subscribe((response:any) => {
// if (response.success) {
// this.getBu3List()
// }
// })
}
deleteBu3(bu3: Bu3Model) {
// this.bu3Service.delete(new MyBu3Model(bu3)).subscribe((response:any) => {
// if (response.success) {
// this.getBu3List()
// }
// })
this.bu3Service.post({ ...this.bu3, parent: this.bu2.bu2id }).subscribe((response:any) => {
if (response.success) {
this.getBu3List()
this.showSuccess()
}
})
}
deleteBu3() {
this.bu3Service.delete(this.bu3).subscribe((response:any) => {
if (response.success) {
this.getBu3List()
this.showSuccessDelete()
}
})
}
getBu2List() {
......@@ -112,9 +115,9 @@ export class SectionRegistrationComponent implements OnInit {
this.selectBu2(bu2 || new MyBu2Model({ bu2id: this.bu2.bu2id }))
}
filterBu2Modal() {
return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu2Modal.search) ||
x.edesc.toLowerCase().includes(this.bu2Modal.search))
return this.bu2List.filter(x => x.bu2id.includes(this.bu2Modal.search) ||
x.tdesc.includes(this.bu2Modal.search) ||
x.edesc.includes(this.bu2Modal.search))
}
selectBu2(bu2?: Bu2Model) {
this.bu2 = new MyBu2Model(bu2 || {})
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.html
......@@ -84,7 +84,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu7(item);currentModal='edit'"
data-hs-overlay="#sub-department-four-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu7(item)"
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu7(item)"
data-hs-overlay="#sub-department-four-alert-delete-modal"></i>
</td>
</tr>
......@@ -575,7 +575,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-four-alert-add-modal" (click)="addBu7(); showSuccessAdd()">
data-hs-overlay="#sub-department-four-alert-add-modal" (click)="addBu7();">
บันทึกข้อมูล
</a>
</div>
......@@ -616,7 +616,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-four-alert-edit-modal" (click)="addBu7(); showSuccessAdd()">
data-hs-overlay="#sub-department-four-alert-edit-modal" (click)="addBu7();">
บันทึกข้อมูล
</a>
</div>
......@@ -652,7 +652,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-four-alert-delete-modal" (click)="addBu7(); showSuccessDelete()">
data-hs-overlay="#sub-department-four-alert-delete-modal" (click)="deleteBu7();">
ลบข้อมูล
</a>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.ts
import { ChangeDetectorRef ,Component, EventEmitter, Input, OnInit } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { Bu6Model, MyBu6Model } from 'src/app/shared/model/bu6.model';
import { Bu7Model, MyBu7Model } from 'src/app/shared/model/bu7.model';
......@@ -49,6 +49,7 @@ export class SubDepartmentFourComponent implements OnInit {
this.bu7Service.getList().subscribe(response => {
this.bu7List = response
this.onBu7TableSearchChange()
this.cdr.detectChanges()
})
}
onBu7TableSearchChange() {
......@@ -56,9 +57,9 @@ export class SubDepartmentFourComponent implements OnInit {
this.bu7Table.page = Array.from({ length: Math.ceil(this.filterBu7Table().length / 10) }, (_, i) => i + 1);
}
filterBu7Table() {
return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Table.search) ||
x.tdesc.toLowerCase().includes(this.bu7Table.search) ||
x.edesc.toLowerCase().includes(this.bu7Table.search))
return this.bu7List.filter(x => x.bu7id.includes(this.bu7Table.search) ||
x.tdesc.includes(this.bu7Table.search) ||
x.edesc.includes(this.bu7Table.search))
}
selectBu7(bu7?: Bu7Model) {
this.bu7 = new MyBu7Model(bu7 || {})
......@@ -79,23 +80,25 @@ export class SubDepartmentFourComponent implements OnInit {
this.bu7Modal.page = Array.from({ length: Math.ceil(this.filterBu7Modal().length / 10) }, (_, i) => i + 1);
}
filterBu7Modal() {
return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu7Modal.search) ||
x.edesc.toLowerCase().includes(this.bu7Modal.search))
return this.bu7List.filter(x => x.bu7id.includes(this.bu7Modal.search) ||
x.tdesc.includes(this.bu7Modal.search) ||
x.edesc.includes(this.bu7Modal.search))
}
addBu7() {
// this.bu7Service.post(this.bu7).subscribe((response:any) => {
// if (response.success) {
// this.getBu7List()
// }
// })
}
deleteBu7(bu7: Bu7Model) {
// this.bu7Service.delete(new MyBu7Model(bu7)).subscribe((response:any) => {
// if (response.success) {
// this.getBu7List()
// }
// })
this.bu7Service.post({ ...this.bu7, parent: this.bu6.bu6id }).subscribe((response: any) => {
if (response.success) {
this.getBu7List()
this.showSuccessAdd()
}
})
}
deleteBu7() {
this.bu7Service.delete(this.bu7).subscribe((response: any) => {
if (response.success) {
this.getBu7List()
this.showSuccessDelete()
}
})
}
getBu6List() {
......@@ -113,9 +116,9 @@ export class SubDepartmentFourComponent implements OnInit {
this.selectBu6(bu6 || new MyBu6Model({ bu6id: this.bu6.bu6id }))
}
filterBu6Modal() {
return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu6Modal.search) ||
x.edesc.toLowerCase().includes(this.bu6Modal.search))
return this.bu6List.filter(x => x.bu6id.includes(this.bu6Modal.search) ||
x.tdesc.includes(this.bu6Modal.search) ||
x.edesc.includes(this.bu6Modal.search))
}
selectBu6(bu6?: Bu6Model) {
this.bu6 = new MyBu6Model(bu6 || {})
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html
......@@ -12,22 +12,23 @@
</a>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="bu4Table.search" (ngModelChange)="onBu4TableSearchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="currentModal='add';selectBu3();selectBu4()" data-hs-overlay="#sub-department-one-modal-add">
(click)="currentModal='add';selectBu3();selectBu4()"
data-hs-overlay="#sub-department-one-modal-add">
<i class="ri-add-line"></i>
Add
</button>
......@@ -44,84 +45,87 @@
Help
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่1','รายละเอียดส่วนย่อยที่1 (ไทย)','รายละเอียดส่วนย่อยที่1 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!filterBu4Table().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="filterBu4Table().length">
<tr
*ngFor="let item of filterBu4Table() | slice:((bu4Table.currentPage-1) * 10) : (((bu4Table.currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
{{((bu4Table.currentPage-1) * 10)+(i+1)}}
</td>
<td class="text-center">{{item.bu4id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu4(item);currentModal='edit'"
data-hs-overlay="#sub-department-one-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu4(item)" data-hs-overlay="#sub-department-one-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu4Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu4Table.currentPage = (bu4Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu4Table.page;let f = first;let l = last">
<ng-container *ngIf="item==3&&bu4Table.currentPage!=1&&bu4Table.currentPage!=2&&bu4Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==bu4Table.currentPage-1||item==bu4Table.currentPage||item==bu4Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu4Table.currentPage"
(click)="bu4Table.currentPage=item">{{item}}
</a>
</ng-container>
<thead>
<tr>
<ng-container
*ngIf="item==bu4Table.page.length-2&&bu4Table.currentPage!=bu4Table.page.length&&bu4Table.currentPage!=bu4Table.page.length-1&&bu4Table.currentPage!=bu4Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
*ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่1','รายละเอียดส่วนย่อยที่1 (ไทย)','รายละเอียดส่วนย่อยที่1 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu4Table.currentPage = (bu4Table.currentPage > bu4Table.page.length-1 ? bu4Table.currentPage: bu4Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</tr>
</thead>
<tbody *ngIf="!filterBu4Table().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="filterBu4Table().length">
<tr
*ngFor="let item of filterBu4Table() | slice:((bu4Table.currentPage-1) * 10) : (((bu4Table.currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
{{((bu4Table.currentPage-1) * 10)+(i+1)}}
</td>
<td class="text-center">{{item.bu4id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu4(item);currentModal='edit'"
data-hs-overlay="#sub-department-one-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu4(item)"
data-hs-overlay="#sub-department-one-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu4Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu4Table.currentPage = (bu4Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu4Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu4Table.currentPage!=1&&bu4Table.currentPage!=2&&bu4Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu4Table.currentPage-1||item==bu4Table.currentPage||item==bu4Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu4Table.currentPage"
(click)="bu4Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu4Table.page.length-2&&bu4Table.currentPage!=bu4Table.page.length&&bu4Table.currentPage!=bu4Table.page.length-1&&bu4Table.currentPage!=bu4Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</li>
</ul>
</nav>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu4Table.currentPage = (bu4Table.currentPage > bu4Table.page.length-1 ? bu4Table.currentPage: bu4Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
......@@ -173,13 +177,17 @@
<label class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" style="padding-right: 3.5rem;"
[(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu3()">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu3()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#sub-department-one-bu3-table-modal">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-department-one-bu3-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
......@@ -191,13 +199,17 @@
</div>
<label class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="relative flex rounded-md w-1/2">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" style="padding-right: 3.5rem;"
[(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#sub-department-one-bu4-table-modal">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-department-one-bu4-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
......@@ -266,26 +278,29 @@
</div>
</div>
<div class="ti-modal-body">
<label for="hs-trailing-button-add-on-with-icon"
class="ti-form-label ">อยู่ภายใต้หน่วยงาน</label>
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" style="padding-right: 3.5rem;"
[(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu3()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#sub-department-one-bu3-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
<div class="flex rounded-md w-1/2 pl-1rem">
<input type="text" id="input-label" class="ti-form-input w-full pr-10 bg-input-readonly"
readonly [value]="bu3.tdesc">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label ">อยู่ภายใต้หน่วยงาน</label>
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu3()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-department-one-bu3-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
<div class="flex rounded-md w-1/2 pl-1rem">
<input type="text" id="input-label" class="ti-form-input w-full pr-10 bg-input-readonly"
readonly [value]="bu3.tdesc">
</div>
</div>
<label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full">
......@@ -575,7 +590,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-one-alert-modal" (click)="addBu4();showSuccess()">
data-hs-overlay="#sub-department-one-alert-modal" (click)="addBu4()">
บันทึกข้อมูล
</a>
</div>
......@@ -616,7 +631,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-one-alert-edit-modal" (click)="addBu4();showSuccessEdit()">
data-hs-overlay="#sub-department-one-alert-edit-modal" (click)="addBu4()">
บันทึกข้อมูล
</a>
</div>
......@@ -657,7 +672,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-one-alert-delete-modal" (click)="addBu4();showSuccessDelete()">
data-hs-overlay="#sub-department-one-alert-delete-modal" (click)="deleteBu4();">
ลบข้อมูล
</a>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts
......@@ -48,6 +48,7 @@ export class SubDepartmentOneComponent implements OnInit {
this.bu4Service.getList().subscribe(response => {
this.bu4List = response
this.onBu4TableSearchChange()
this.cdr.detectChanges()
})
}
onBu4TableSearchChange() {
......@@ -55,9 +56,9 @@ export class SubDepartmentOneComponent implements OnInit {
this.bu4Table.page = Array.from({ length: Math.ceil(this.filterBu4Table().length / 10) }, (_, i) => i + 1);
}
filterBu4Table() {
return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Table.search) ||
x.tdesc.toLowerCase().includes(this.bu4Table.search) ||
x.edesc.toLowerCase().includes(this.bu4Table.search))
return this.bu4List.filter(x => x.bu4id.includes(this.bu4Table.search) ||
x.tdesc.includes(this.bu4Table.search) ||
x.edesc.includes(this.bu4Table.search))
}
selectBu4(bu4?: Bu4Model) {
this.bu4 = new MyBu4Model(bu4 || {})
......@@ -78,23 +79,25 @@ export class SubDepartmentOneComponent implements OnInit {
this.bu4Modal.page = Array.from({ length: Math.ceil(this.filterBu4Modal().length / 10) }, (_, i) => i + 1);
}
filterBu4Modal() {
return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu4Modal.search) ||
x.edesc.toLowerCase().includes(this.bu4Modal.search))
return this.bu4List.filter(x => x.bu4id.includes(this.bu4Modal.search) ||
x.tdesc.includes(this.bu4Modal.search) ||
x.edesc.includes(this.bu4Modal.search))
}
addBu4() {
// this.bu4Service.post(this.bu4).subscribe((response:any) => {
// if (response.success) {
// this.getBu4List()
// }
// })
}
deleteBu4(bu4: Bu4Model) {
// this.bu4Service.delete(new MyBu4Model(bu4)).subscribe((response:any) => {
// if (response.success) {
// this.getBu4List()
// }
// })
this.bu4Service.post({ ...this.bu4, parent: this.bu3.bu3id }).subscribe((response: any) => {
if (response.success) {
this.getBu4List()
this.showSuccess()
}
})
}
deleteBu4() {
this.bu4Service.delete(this.bu4).subscribe((response: any) => {
if (response.success) {
this.getBu4List()
this.showSuccessDelete()
}
})
}
getBu3List() {
......@@ -112,9 +115,9 @@ export class SubDepartmentOneComponent implements OnInit {
this.selectBu3(bu3 || new MyBu3Model({ bu3id: this.bu3.bu3id }))
}
filterBu3Modal() {
return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu3Modal.search) ||
x.edesc.toLowerCase().includes(this.bu3Modal.search))
return this.bu3List.filter(x => x.bu3id.includes(this.bu3Modal.search) ||
x.tdesc.includes(this.bu3Modal.search) ||
x.edesc.includes(this.bu3Modal.search))
}
selectBu3(bu3?: Bu3Model) {
this.bu3 = new MyBu3Model(bu3 || {})
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.html
......@@ -84,7 +84,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu6(item);currentModal='edit'"
data-hs-overlay="#sub-department-three-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu6(item)"
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu6(item)"
data-hs-overlay="#sub-department-three-alert-delete-modal"></i>
</td>
</tr>
......@@ -575,7 +575,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-three-alert-add-modal" (click)="addBu6(); showSuccessAdd()">
data-hs-overlay="#sub-department-three-alert-add-modal" (click)="addBu6();">
บันทึกข้อมูล
</a>
</div>
......@@ -616,7 +616,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-three-alert-edit-modal" (click)="addBu6(); showSuccessEdit()">
data-hs-overlay="#sub-department-three-alert-edit-modal" (click)="addBu6();">
บันทึกข้อมูล
</a>
</div>
......@@ -652,7 +652,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-three-alert-delete-modal" (click)="addBu6(); showSuccessDelete()">
data-hs-overlay="#sub-department-three-alert-delete-modal" (click)="deleteBu6()">
ลบข้อมูล
</a>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts
......@@ -49,6 +49,7 @@ export class SubDepartmentThreeComponent implements OnInit {
this.bu6Service.getList().subscribe(response => {
this.bu6List = response
this.onBu6TableSearchChange()
this.cdr.detectChanges()
})
}
onBu6TableSearchChange() {
......@@ -56,9 +57,9 @@ export class SubDepartmentThreeComponent implements OnInit {
this.bu6Table.page = Array.from({ length: Math.ceil(this.filterBu6Table().length / 10) }, (_, i) => i + 1);
}
filterBu6Table() {
return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Table.search) ||
x.tdesc.toLowerCase().includes(this.bu6Table.search) ||
x.edesc.toLowerCase().includes(this.bu6Table.search))
return this.bu6List.filter(x => x.bu6id.includes(this.bu6Table.search) ||
x.tdesc.includes(this.bu6Table.search) ||
x.edesc.includes(this.bu6Table.search))
}
selectBu6(bu6?: Bu6Model) {
this.bu6 = new MyBu6Model(bu6 || {})
......@@ -79,23 +80,25 @@ export class SubDepartmentThreeComponent implements OnInit {
this.bu6Modal.page = Array.from({ length: Math.ceil(this.filterBu6Modal().length / 10) }, (_, i) => i + 1);
}
filterBu6Modal() {
return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu6Modal.search) ||
x.edesc.toLowerCase().includes(this.bu6Modal.search))
return this.bu6List.filter(x => x.bu6id.includes(this.bu6Modal.search) ||
x.tdesc.includes(this.bu6Modal.search) ||
x.edesc.includes(this.bu6Modal.search))
}
addBu6() {
// this.bu6Service.post(this.bu6).subscribe((response:any) => {
// if (response.success) {
// this.getBu6List()
// }
// })
}
deleteBu6(bu6: Bu6Model) {
// this.bu6Service.delete(new MyBu6Model(bu6)).subscribe((response:any) => {
// if (response.success) {
// this.getBu6List()
// }
// })
this.bu6Service.post({ ...this.bu6, parent: this.bu5.bu5id }).subscribe((response: any) => {
if (response.success) {
this.getBu6List()
this.showSuccessAdd()
}
})
}
deleteBu6() {
this.bu6Service.delete(this.bu6).subscribe((response: any) => {
if (response.success) {
this.getBu6List()
this.showSuccessDelete()
}
})
}
getBu5List() {
......@@ -113,9 +116,9 @@ export class SubDepartmentThreeComponent implements OnInit {
this.selectBu5(bu5 || new MyBu5Model({ bu5id: this.bu5.bu5id }))
}
filterBu5Modal() {
return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu5Modal.search) ||
x.edesc.toLowerCase().includes(this.bu5Modal.search))
return this.bu5List.filter(x => x.bu5id.includes(this.bu5Modal.search) ||
x.tdesc.includes(this.bu5Modal.search) ||
x.edesc.includes(this.bu5Modal.search))
}
selectBu5(bu5?: Bu5Model) {
this.bu5 = new MyBu5Model(bu5 || {})
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.html
......@@ -12,22 +12,23 @@
</a>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="bu5Table.search" (ngModelChange)="onBu5TableSearchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
(click)="currentModal='add';selectBu4();selectBu5()" data-hs-overlay="#sub-department-two-modal-add">
(click)="currentModal='add';selectBu4();selectBu5()"
data-hs-overlay="#sub-department-two-modal-add">
<i class="ri-add-line"></i>
Add
</button>
......@@ -44,84 +45,86 @@
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่2','รายละเอียดส่วนย่อยที่2 (ไทย)','รายละเอียดส่วนย่อยที่2 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!filterBu5Table().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="filterBu5Table().length">
<tr
*ngFor="let item of filterBu5Table() | slice:((bu5Table.currentPage-1) * 10) : (((bu5Table.currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
{{((bu5Table.currentPage-1) * 10)+(i+1)}}
</td>
<td class="text-center">{{item.bu5id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu5(item);currentModal='edit'"
data-hs-overlay="#sub-department-two-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu5(item)"
data-hs-overlay="#sub-department-two-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu5Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu5Table.currentPage = (bu5Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu5Table.page;let f = first;let l = last">
<ng-container *ngIf="item==3&&bu5Table.currentPage!=1&&bu5Table.currentPage!=2&&bu5Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==bu5Table.currentPage-1||item==bu5Table.currentPage||item==bu5Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu5Table.currentPage"
(click)="bu5Table.currentPage=item">{{item}}
</a>
</ng-container>
<thead>
<tr>
<ng-container
*ngIf="item==bu5Table.page.length-2&&bu5Table.currentPage!=bu5Table.page.length&&bu5Table.currentPage!=bu5Table.page.length-1&&bu5Table.currentPage!=bu5Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
*ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่2','รายละเอียดส่วนย่อยที่2 (ไทย)','รายละเอียดส่วนย่อยที่2 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu5Table.currentPage = (bu5Table.currentPage > bu5Table.page.length-1 ? bu5Table.currentPage: bu5Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</tr>
</thead>
<tbody *ngIf="!filterBu5Table().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="filterBu5Table().length">
<tr
*ngFor="let item of filterBu5Table() | slice:((bu5Table.currentPage-1) * 10) : (((bu5Table.currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
{{((bu5Table.currentPage-1) * 10)+(i+1)}}
</td>
<td class="text-center">{{item.bu5id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu5(item);currentModal='edit'"
data-hs-overlay="#sub-department-two-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectBu5(item)"
data-hs-overlay="#sub-department-two-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu5Table.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu5Table.currentPage = (bu5Table.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu5Table.page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&bu5Table.currentPage!=1&&bu5Table.currentPage!=2&&bu5Table.currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==bu5Table.currentPage-1||item==bu5Table.currentPage||item==bu5Table.currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu5Table.currentPage"
(click)="bu5Table.currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==bu5Table.page.length-2&&bu5Table.currentPage!=bu5Table.page.length&&bu5Table.currentPage!=bu5Table.page.length-1&&bu5Table.currentPage!=bu5Table.page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</li>
</ul>
</nav>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu5Table.currentPage = (bu5Table.currentPage > bu5Table.page.length-1 ? bu5Table.currentPage: bu5Table.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
......@@ -172,13 +175,17 @@
<label class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" style="padding-right: 3.5rem;"
[(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#sub-department-two-bu4-table-modal">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-department-two-bu4-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
......@@ -190,13 +197,17 @@
</div>
<label class="ti-form-label mt-2rem">ส่วนย่อย2</label>
<div class="relative flex rounded-md w-1/2">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" style="padding-right: 3.5rem;"
[(ngModel)]="bu5.bu5id" (ngModelChange)="bu5idChange()">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu5()">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="bu5.bu5id" (ngModelChange)="bu5idChange()">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu5()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#sub-department-two-bu5-table-modal">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-department-two-bu5-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
......@@ -240,7 +251,7 @@
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
(click)="selectBu4();bu5.tdesc='';bu5.edesc=''">
(click)="selectBu4();bu5.tdesc='';bu5.edesc=''">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
......@@ -265,17 +276,20 @@
</div>
</div>
<div class="ti-modal-body">
<label for="hs-trailing-button-add-on-with-icon"
class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
<div class="flex">
<div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" style="padding-right: 3.5rem;"
[(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#sub-department-two-bu4-table-modal">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#sub-department-two-bu4-table-modal">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
......@@ -613,7 +627,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-two-alert-edit-modal" (click)="addBu5(); showSuccessEdit()">
data-hs-overlay="#sub-department-two-alert-edit-modal" (click)="addBu5()">
บันทึกข้อมูล
</a>
</div>
......@@ -649,7 +663,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-two-alert-delete-modal" (click)="addBu5(); showSuccessDelete()">
data-hs-overlay="#sub-department-two-alert-delete-modal" (click)="deleteBu5()">
ลบข้อมูล
</a>
</div>
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.ts
......@@ -48,6 +48,7 @@ export class SubDepartmentTwoComponent implements OnInit {
this.bu5Service.getList().subscribe(response => {
this.bu5List = response
this.onBu5TableSearchChange()
this.cdr.detectChanges()
})
}
onBu5TableSearchChange() {
......@@ -55,9 +56,9 @@ export class SubDepartmentTwoComponent implements OnInit {
this.bu5Table.page = Array.from({ length: Math.ceil(this.filterBu5Table().length / 10) }, (_, i) => i + 1);
}
filterBu5Table() {
return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Table.search) ||
x.tdesc.toLowerCase().includes(this.bu5Table.search) ||
x.edesc.toLowerCase().includes(this.bu5Table.search))
return this.bu5List.filter(x => x.bu5id.includes(this.bu5Table.search) ||
x.tdesc.includes(this.bu5Table.search) ||
x.edesc.includes(this.bu5Table.search))
}
selectBu5(bu5?: Bu5Model) {
this.bu5 = new MyBu5Model(bu5 || {})
......@@ -78,23 +79,25 @@ export class SubDepartmentTwoComponent implements OnInit {
this.bu5Modal.page = Array.from({ length: Math.ceil(this.filterBu5Modal().length / 10) }, (_, i) => i + 1);
}
filterBu5Modal() {
return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu5Modal.search) ||
x.edesc.toLowerCase().includes(this.bu5Modal.search))
return this.bu5List.filter(x => x.bu5id.includes(this.bu5Modal.search) ||
x.tdesc.includes(this.bu5Modal.search) ||
x.edesc.includes(this.bu5Modal.search))
}
addBu5() {
// this.bu5Service.post(this.bu5).subscribe((response:any) => {
// if (response.success) {
// this.getBu5List()
// }
// })
}
deleteBu5(bu5: Bu5Model) {
// this.bu5Service.delete(new MyBu5Model(bu5)).subscribe((response:any) => {
// if (response.success) {
// this.getBu5List()
// }
// })
this.bu5Service.post({ ...this.bu5, parent: this.bu4.bu4id }).subscribe((response: any) => {
if (response.success) {
this.getBu5List()
this.showSuccessAdd()
}
})
}
deleteBu5() {
this.bu5Service.delete(this.bu5).subscribe((response: any) => {
if (response.success) {
this.getBu5List()
this.showSuccessDelete()
}
})
}
getBu4List() {
......@@ -112,9 +115,9 @@ export class SubDepartmentTwoComponent implements OnInit {
this.selectBu4(bu4 || new MyBu4Model({ bu4id: this.bu4.bu4id }))
}
filterBu4Modal() {
return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu4Modal.search) ||
x.edesc.toLowerCase().includes(this.bu4Modal.search))
return this.bu4List.filter(x => x.bu4id.includes(this.bu4Modal.search) ||
x.tdesc.includes(this.bu4Modal.search) ||
x.edesc.includes(this.bu4Modal.search))
}
selectBu4(bu4?: Bu4Model) {
this.bu4 = new MyBu4Model(bu4 || {})
......
src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html
......@@ -66,18 +66,29 @@
</ng-container>
</tr>
</thead>
<tbody *ngIf="!dataListFilter().length">
<tbody *ngIf="dataLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="dataListFilter().length">
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.code}}" [(ngModel)]="item.check">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.code}}"
[(ngModel)]="item.check">
<label for="checkbox-{{item.data.code}}">&nbsp;{{item.data.code}}</label>
</td>
<td>{{item.data.tdesc}}</td>
......@@ -248,7 +259,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#company-registration-page-alert-modal">
data-hs-overlay="#company-registration-page-alert-modal" (click)="addCompany()">
บันทึกข้อมูล
</a>
</ng-container>
......
src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.ts
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyCompanyModel } from 'src/app/shared/model/company.model';
import { CompanyService } from 'src/app/shared/services/company.service';
export interface DataModel {
code: string
tdesc: string
......@@ -17,13 +19,32 @@ export class CompanyRegistrationPageComponent {
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
modalStatus = 'add'
dataList: { check: boolean, data: DataModel }[] = [
{ check: false, data: { code: "CC-01", tdesc: "บริษัท มายเอชอาร์ จำกัด", edesc: "MYHR COMPANY LIMITED", address: "1", contact: "2" } },
]
dataList: { check: boolean, data: DataModel }[] = []
dataLoading = false
dataSelect: DataModel = { code: "", tdesc: "", edesc: "", address: "", contact: "" }
constructor(private toastr: ToastrService) {
this.searchChange()
constructor(private toastr: ToastrService,
private companyService: CompanyService,
private cdr: ChangeDetectorRef
) {
}
ngOnInit(): void {
this.getCompanyList()
}
getCompanyList() {
this.dataLoading = true
this.companyService.getList().subscribe({
next: response => {
this.dataList = response.map(x => ({ check: false, data: { code: x.companyId, tdesc: x.tdesc, edesc: x.edesc, address: x.taddr, contact: x.descOther } }))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
searchChange() {
......@@ -40,4 +61,22 @@ export class CompanyRegistrationPageComponent {
setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", address: "", contact: "" }));
}
addCompany() {
const body = new MyCompanyModel({ companyId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, taddr: this.dataSelect.address, descOther: this.dataSelect.contact })
this.companyService.post(body).subscribe((response: any) => {
if (response.success) {
this.showSuccess()
this.getCompanyList()
}
})
}
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
}
src/app/components/company-components/job-description/employee-categories/employee-categories.component.html
......@@ -13,118 +13,124 @@
</a>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-modal-add">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-modal-add" (click)="selectEmp_type()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto table-bordered 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">
<thead>
<tr>
<ng-container
<div class="overflow-auto table-bordered 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">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสประเภทพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!emp_typeListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="emp_typeListFilter().length">
<tr
*ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.codeId}}" [(ngModel)]="item['selected']" (change)="onCheckboxChange(item)" >
<label for="checkbox-{{item.codeId}}">&nbsp;{{item.codeId}}</label>
</td>
<td >{{item.tdesc}}</td>
<td >{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
data-hs-overlay="#employee-categories-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="openDeleteModal(item)"
data-hs-overlay="#employee-categories-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!emp_typeListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="emp_typeListFilter().length">
<tr
*ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.codeId}}"
[(ngModel)]="item['selected']" (change)="onCheckboxChange(item)">
<label for="checkbox-{{item.codeId}}">&nbsp;{{item.codeId}}</label>
</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
data-hs-overlay="#employee-categories-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
data-hs-overlay="#employee-categories-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</li>
</ul>
</nav>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
......@@ -171,12 +177,12 @@
</div>
</div>
<div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" placeholder="">
<label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="emp_type.codeId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" placeholder="">
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_type.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="emp_type.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......@@ -184,7 +190,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-add-modal">
data-hs-overlay="#employee-categories-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
......@@ -237,7 +243,8 @@
</div>
<div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="emp_type.codeId" >
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[(ngModel)]="emp_type.codeId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_type.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
......@@ -249,7 +256,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-edit-modal">
data-hs-overlay="#employee-categories-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
......@@ -285,7 +292,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-add-modal" (click)="addEmp_type(); showSuccessAdd()">
data-hs-overlay="#employee-categories-alert-add-modal" (click)="addEmp_type()">
บันทึกข้อมูล
</a>
</div>
......@@ -321,7 +328,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-edit-modal" (click)="addEmp_type(); showSuccessEdit()">
data-hs-overlay="#employee-categories-alert-edit-modal" (click)="addEmp_type()">
บันทึกข้อมูล
</a>
</div>
......@@ -357,7 +364,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-categories-alert-delete-modal" (click)=" deleteSelectedItems(); deleteSelected(); showSuccessDelete()">
data-hs-overlay="#employee-categories-alert-delete-modal" (click)=" deleteEmp_type()">
ลบข้อมูล
</a>
</div>
......
src/app/components/company-components/job-description/employee-categories/employee-categories.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model';
import { EmpTypeService } from 'src/app/shared/services/employee-type.service';
......@@ -25,8 +25,9 @@ export class EmployeeCategories {
emp_type: EmpTypeModel = new MyEmpTypeModel({})
search = ""
itemToDelete: EmpTypeModel | null = null;
constructor(private EmpTypeService: EmpTypeService,
private toastr: ToastrService
constructor(private empTypeService: EmpTypeService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getEmpTypeList()
......@@ -49,7 +50,7 @@ export class EmployeeCategories {
modalSize: 'm',
backdropClose: true,
},
"upload":{
"upload": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
......@@ -76,9 +77,10 @@ export class EmployeeCategories {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
getEmpTypeList() {
this.EmpTypeService.getList().subscribe(response => {
this.emp_typeList = response
this.empTypeService.getList().subscribe(response => {
this.emp_typeList = response.map(x => new MyEmpTypeModel(x))
this.searchChange()
this.cdr.detectChanges()
})
}
searchChange() {
......@@ -86,28 +88,30 @@ export class EmployeeCategories {
this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
}
emp_typeListFilter() {
return this.emp_typeList.filter(x =>
x.codeId.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.emp_typeList.filter(x =>
x.codeId.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectEmp_type(emp_type: EmpTypeModel) {
selectEmp_type(emp_type?: EmpTypeModel) {
// this.showSuccess()
this.emp_type = new MyEmpTypeModel(emp_type)
this.emp_type = new MyEmpTypeModel(emp_type || {})
}
addEmp_type() {
// this.emp_typeService.post(this.emp_type).subscribe((response:any) => {
// if (response.success) {
// this.getemp_typeList()
// }
// })
}
deleteEmp_type(emp_type: EmpTypeModel) {
// this.emp_typeService.delete(new MyEmpTypeModel(emp_type)).subscribe((response:any) => {
// if (response.success) {
// this.getemp_typeList()
// }
// })
this.empTypeService.post(this.emp_type).subscribe((response: any) => {
if (response.success) {
this.getEmpTypeList()
this.showSuccessAdd()
}
})
}
deleteEmp_type() {
this.empTypeService.delete(this.emp_type).subscribe((response: any) => {
if (response.success) {
this.getEmpTypeList()
this.showSuccessDelete()
}
})
}
......
src/app/components/company-components/job-description/employee-group-unit/employee-group-unit.component.html
......@@ -13,115 +13,119 @@
</a>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-group-unit-component-modal-add">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-group-unit-component-modal-add" (click)="selectEmp_group()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสกลุ่มพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!emp_groupListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="emp_groupListFilter().length">
<tr
*ngFor="let item of emp_groupListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.groupId}}">
<label for="checkbox-{{item.groupId}}">&nbsp;{{item.groupId}}</label>
</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)"
data-hs-overlay="#employee-group-unit-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteEmp_group(item)"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<thead>
<tr>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
*ngFor="let item of ['รหัสกลุ่มพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</tr>
</thead>
<tbody *ngIf="!emp_groupListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="emp_groupListFilter().length">
<tr
*ngFor="let item of emp_groupListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.groupId}}">
<label for="checkbox-{{item.groupId}}">&nbsp;{{item.groupId}}</label>
</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)"
data-hs-overlay="#employee-group-unit-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</li>
</ul>
</nav>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
......@@ -169,12 +173,12 @@
</div>
</div>
<div class="ti-modal-body ">
<label for="input-label" class="ti-form-label mt-2rem">รหัสกลุ่มพนักงาน *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" placeholder="">
<label for="input-label" class="ti-form-label mt-2rem">รหัสกลุ่มพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="emp_group.groupId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" placeholder="">
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_group.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="emp_group.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-2">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......@@ -182,7 +186,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-modal">
data-hs-overlay="#employee-group-unit-component-alert-modal">
บันทึกข้อมูล
</a>
</div>
......@@ -235,7 +239,8 @@
</div>
<div class="ti-modal-body ">
<label for="input-label" class="ti-form-label mt-2rem">รหัสกลุ่มพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="emp_group.groupId" >
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[(ngModel)]="emp_group.groupId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_group.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
......@@ -247,7 +252,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-edit-modal">
data-hs-overlay="#employee-group-unit-component-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
......@@ -312,7 +317,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-modal" (click)="addEmp_group();showSuccess()">
data-hs-overlay="#employee-group-unit-component-alert-modal" (click)="addEmp_group()">
บันทึกข้อมูล
</a>
</div>
......@@ -348,7 +353,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-edit-modal" (click)="addEmp_group();showSuccesssEdit()">
data-hs-overlay="#employee-group-unit-component-alert-edit-modal" (click)="addEmp_group()">
บันทึกข้อมูล
</a>
</div>
......@@ -384,11 +389,11 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal" (click)="addEmp_group();showSuccessDelete()">
data-hs-overlay="#employee-group-unit-component-alert-delete-modal" (click)="deleteEmp_group()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-components/job-description/employee-group-unit/employee-group-unit.component.ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { EmpGroupModel, MyEmpGroupModel } from 'src/app/shared/model/emp_group.model';
import { EmpGroupService } from 'src/app/shared/services/emp_group.service';
......@@ -17,10 +17,11 @@ export class EmployeeGroupUnit implements OnInit {
page = Array.from({ length: 1 }, (_, i) => i + 1);
emp_groupList: EmpGroupModel[] = []
emp_group: EmpGroupModel = new MyEmpGroupModel({})
search = ""
constructor(private EmpGroupService: EmpGroupService,
private toastr: ToastrService
search = ""
constructor(private empGroupService: EmpGroupService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
// ฟังก์ชันในการเปลี่ยนแท็บ
......@@ -52,7 +53,7 @@ export class EmployeeGroupUnit implements OnInit {
modalSize: 'm',
backdropClose: true,
},
"upload":{
"upload": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
......@@ -79,9 +80,10 @@ export class EmployeeGroupUnit implements OnInit {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
}
getEmpGroupList() {
this.EmpGroupService.getList().subscribe(response => {
this.empGroupService.getList().subscribe(response => {
this.emp_groupList = response
this.searchChange()
this.cdr.detectChanges()
})
}
searchChange() {
......@@ -89,14 +91,13 @@ export class EmployeeGroupUnit implements OnInit {
this.page = Array.from({ length: Math.ceil(this.emp_groupListFilter().length / 10) }, (_, i) => i + 1);
}
emp_groupListFilter() {
return this.emp_groupList.filter(x => x.groupId.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.emp_groupList.filter(x => x.groupId.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectEmp_group(emp_group: EmpGroupModel) {
// this.showSuccess()
this.emp_group = new MyEmpGroupModel(emp_group)
selectEmp_group(emp_group?: EmpGroupModel) {
this.emp_group = new MyEmpGroupModel(emp_group || {})
}
showSuccess() {
......@@ -118,19 +119,20 @@ export class EmployeeGroupUnit implements OnInit {
});
}
addEmp_group() {
// this.emp_groupService.post(this.emp_group).subscribe((response:any) => {
// if (response.success) {
// this.getemp_groupList()
// }
// })
this.empGroupService.post(this.emp_group).subscribe((response: any) => {
if (response.success) {
this.getEmpGroupList()
this.showSuccess()
}
})
}
deleteEmp_group(emp_group: EmpGroupModel) {
// this.emp_groupService.delete(new MyEmpGroupModel(emp_group)).subscribe((response:any) => {
// if (response.success) {
// this.getemp_groupList()
// }
// })
deleteEmp_group() {
this.empGroupService.delete(this.emp_group).subscribe((response: any) => {
if (response.success) {
this.getEmpGroupList()
this.showSuccessDelete()
}
})
}
......
src/app/components/company-components/job-description/employee-level/employee-level.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex pr-2">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#company-registration-page-upload-modal">
<i class="ri-add-line"></i>
นำเข้าข้อมูล
</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"
href="javascript:void(0);">
ดาวน์โหลดตัวอย่างไฟล์
</a>
<div class="flex pr-2">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#company-registration-page-upload-modal">
<i class="ri-add-line"></i>
นำเข้าข้อมูล
</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"
href="javascript:void(0);">
ดาวน์โหลดตัวอย่างไฟล์
</a>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-level-modal-add" (click)="selectPL()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-level-modal-add">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#employee-level-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto table-bordered 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">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสระดับพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
<div class="overflow-auto table-bordered 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">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสระดับพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="plListFilter().length">
<tr
*ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.plId}}">
<label for="checkbox-{{item.plId}}">&nbsp;{{item.plId}}</label>
</td>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!plListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="plListFilter().length">
<tr
*ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.plId}}">
<label for="checkbox-{{item.plId}}">&nbsp;{{item.plId}}</label>
</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)"
data-hs-overlay="#employee-level-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deletePL(item)"
data-hs-overlay="#employee-level-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)"
data-hs-overlay="#employee-level-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)"
data-hs-overlay="#employee-level-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
......@@ -146,47 +150,45 @@
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label ">รหัสระดับพนักงาน(PL)*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2">
<label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="pl.plId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16">
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="pl.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16">
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="pl.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-add-modal">
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
......@@ -212,34 +214,35 @@
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly [(ngModel)]="pl.plId" >
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[(ngModel)]="pl.plId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="pl.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
......@@ -279,9 +282,9 @@
</button>
</div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4">
<a class="ti-btn ti-btn-primary" href="javascript:void(0);">
อัปโหลด
</a>
<a class="ti-btn ti-btn-primary" href="javascript:void(0);">
อัปโหลด
</a>
</div>
</div>
</div>
......@@ -290,108 +293,108 @@
<div id="employee-level-alert-add-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-add-modal" (click)="addPL(); showSuccessAdd()">
บันทึกข้อมูล
</a>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-add-modal"
(click)="addPL()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-level-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการแก้ไขข้อมูลหรือไม่
</p>
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการแก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-edit-modal" (click)="addPL(); showSuccessEdit()">
บันทึกข้อมูล
</a>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-edit-modal"
(click)="addPL()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-level-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่
</p>
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-level-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-delete-modal" (click)="addPL(); showSuccessDelete()">
ลบข้อมูล
</a>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-delete-modal" (click)="deletePL();">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-components/job-description/employee-level/employee-level.component.ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
import { PLService } from 'src/app/shared/services/pl.service';
......@@ -24,15 +24,17 @@ export class EmployeeLevel implements OnInit {
pl: PLModel = new MyPLModel({})
search = ""
constructor(private plService: PLService,
private toastr: ToastrService
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getPLList()
}
getPLList() {
this.plService.getList().subscribe(response => {
this.plList = response
this.plList = response.map(x => new MyPLModel(x))
this.searchChange()
this.cdr.detectChanges()
})
}
searchChange() {
......@@ -40,27 +42,29 @@ export class EmployeeLevel implements OnInit {
this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
}
plListFilter() {
return this.plList.filter(x => x.plId.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.plList.filter(x => x.plId.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectPL(pl: PLModel) {
selectPL(pl?: PLModel) {
// this.showSuccess()
this.pl = new MyPLModel(pl)
this.pl = new MyPLModel(pl || {})
}
addPL() {
// this.plService.post(this.pl).subscribe((response:any) => {
// if (response.success) {
// this.getPLList()
// }
// })
this.plService.post(this.pl).subscribe((response: any) => {
if (response.success) {
this.getPLList()
this.showSuccessAdd()
}
})
}
deletePL(pl: PLModel) {
// this.plService.delete(new MyPLModel(pl)).subscribe((response:any) => {
// if (response.success) {
// this.getPLList()
// }
// })
deletePL() {
this.plService.delete(this.pl).subscribe((response: any) => {
if (response.success) {
this.getPLList()
this.showSuccessDelete()
}
})
}
showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
......
src/app/components/company-components/job-description/position/position-unit.component.html
......@@ -13,116 +13,121 @@
</a>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#position-unit-component-modal-add">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#position-unit-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
style="height: 40px;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#position-unit-component-modal-add" (click)="selectPosition()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
data-hs-overlay="#position-unit-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสตำแหน่ง','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!positionListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="positionListFilter().length">
<tr
*ngFor="let item of positionListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.positionId}}">
<label for="checkbox-{{item.positionId}}">&nbsp;{{item.positionId}}</label>
</td>
<td >{{item.tdesc}}</td>
<td >{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPosition(item)"
data-hs-overlay="#position-unit-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deletePosition(item)"
data-hs-overlay="#position-unit-component-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<thead>
<tr>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
*ngFor="let item of ['รหัสตำแหน่ง','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</tr>
</thead>
<tbody *ngIf="!positionListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="positionListFilter().length">
<tr
*ngFor="let item of positionListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer"
id="checkbox-{{item.positionId}}">
<label for="checkbox-{{item.positionId}}">&nbsp;{{item.positionId}}</label>
</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPosition(item)"
data-hs-overlay="#position-unit-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectPosition(item)"
data-hs-overlay="#position-unit-component-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</li>
</ul>
</nav>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
......@@ -169,12 +174,12 @@
</div>
</div>
<div class="ti-modal-body ">
<label for="input-label" class="ti-form-label mt-2rem">รหัสตำเเหน่ง *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" placeholder="">
<label for="input-label" class="ti-form-label mt-2rem">รหัสตำเเหน่ง</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 " [(ngModel)]="position.positionId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" placeholder="">
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="position.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="position.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-2">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......@@ -311,7 +316,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-modal" (click)="addPosition();showSuccess()">
data-hs-overlay="#position-unit-component-alert-modal" (click)="addPosition()">
บันทึกข้อมูล
</a>
</div>
......@@ -347,8 +352,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-edit-modal"
(click)="addPosition();showSuccesssEdit()">
data-hs-overlay="#position-unit-component-alert-edit-modal" (click)="addPosition()">
บันทึกข้อมูล
</a>
</div>
......@@ -385,12 +389,11 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-delete-modal"
(click)="addPosition();showSuccessDelete()">
data-hs-overlay="#position-unit-component-alert-delete-modal" (click)="deletePosition()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/company-components/job-description/position/position-unit.component.ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyPositionModel, PositionModel } from 'src/app/shared/model/position.model';
import { PositionService } from 'src/app/shared/services/position.service';
......@@ -24,15 +24,17 @@ export class PositionUnitComponent implements OnInit {
position: PositionModel = new MyPositionModel({})
search = ""
constructor(private positionService: PositionService,
private toastr: ToastrService
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getPositionList()
}
getPositionList() {
this.positionService.getList().subscribe(response => {
this.positionList = response
this.positionList = response.map(x => new MyPositionModel(x))
this.searchChange()
this.cdr.detectChanges()
})
}
searchChange() {
......@@ -40,13 +42,13 @@ export class PositionUnitComponent implements OnInit {
this.page = Array.from({ length: Math.ceil(this.positionListFilter().length / 10) }, (_, i) => i + 1);
}
positionListFilter() {
return this.positionList.filter(x => x.positionId.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.positionList.filter(x => x.positionId.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectPosition(position: PositionModel) {
selectPosition(position?: PositionModel) {
// this.showSuccess()
this.position = new MyPositionModel(position)
this.position = new MyPositionModel(position || {})
}
showSuccess() {
......@@ -68,18 +70,20 @@ export class PositionUnitComponent implements OnInit {
});
}
addPosition() {
// this.positionService.post(this.position).subscribe((response:any) => {
// if (response.success) {
// this.getPositionList()
// }
// })
this.positionService.post(this.position).subscribe((response: any) => {
if (response.success) {
this.getPositionList()
this.showSuccess()
}
})
}
deletePosition(position: PositionModel) {
// this.positionService.delete(new MyPositionModel(position)).subscribe((response:any) => {
// if (response.success) {
// this.getPositionList()
// }
// })
deletePosition() {
this.positionService.delete(this.position).subscribe((response: any) => {
if (response.success) {
this.getPositionList()
this.showSuccessDelete()
}
})
}
}
......
src/app/components/competency-assessment/course-registration/development-course/development-course.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex pr-2">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()" [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70" (click)="toggleCheckbox()">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#development-course-modal-add">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#development-course-modal-add">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#development-course-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}}
Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()"
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
(click)="toggleCheckbox()">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()" style="height: 40px;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#development-course-modal-add">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#development-course-modal-add" (click)="selectCompetencycourse()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#development-course-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
......@@ -72,139 +82,96 @@
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mockData;let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td>{{item.name}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#development-course-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#development-course-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</ng-container>
</tr>
</thead>
<tbody *ngIf="dataLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}"
[(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td>{{item.name}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectCompetencycourse(item)"
data-hs-overlay="#development-course-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectCompetencycourse(item)"
data-hs-overlay="#development-course-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
</div>
<div id="development-course-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เพิ่มหลักสูตรการพัฒนา
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัสหลักสูตร*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" placeholder="">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหลักสูตร (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input h-10" placeholder="">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหลักสูตร (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" placeholder="">
<label for="detail_eng" class="ti-form-label mt-2rem">วัตถุประสงค์</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"> </textarea>
<label for="detail_eng" class="ti-form-label mt-2rem">หัวข้อเรื่อง</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"> </textarea>
<div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="development-course-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แก้ไขหัวข้อสมรรถนะ
เพิ่มหลักสูตรการพัฒนา
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-modal-edit">
data-hs-overlay="#development-course-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
......@@ -239,65 +206,66 @@
</div>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัสหลักสูตร*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="CC-01-01" >
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อหลักสูตร (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input h-10" value="จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อหลักสูตร (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" value="จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2">
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50">1) เพื่อให้ผู้เรียนนสามารถปฏิบัติตามมาตรฐานการทำงานได้
2) เพื่อให้ผู้เรียนสามารถรักษามาตรฐานการทำงานได้
3) เพื่อให้ผู้เรียนสามารถปฏิบัติตามกฏระเบียบของบริษัทได้
4) เพื่อให้ผู้เรียนสามารถเข้าใจหน้างานของตนเองได้
</textarea>
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50">1) การปฏิบัติงานโดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับแรก (Safety First) สวมใส่อุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจจะเป็นสาเหตุของอุบัติเหตุรอบๆตัว รวมถึงการให้ความสำคัญกับคุณภาพ
2) การปฏิบัติงานตามมาตรฐานด้านความปลอดภัยและคุณภาพของหน่วยงาน
</textarea>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหลักสูตร (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหลักสูตร (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-2rem">วัตถุประสงค์</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
[(ngModel)]="dataSelect.detail"> </textarea>
<label for="detail_eng" class="ti-form-label mt-2rem">หัวข้อเรื่อง</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
[(ngModel)]="dataSelect.topic"> </textarea>
<div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-edit">
data-hs-overlay="#development-course-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-edit-modal">
data-hs-overlay="#development-course-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="development-course-table-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div id="development-course-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
ประเภทสมรรถนะ
แก้ไขหัวข้อสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-modal-add">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
......@@ -306,323 +274,141 @@
</button>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'Care Competency','CC'],
['02', 'Management Competency','MC'],
['03', 'Position Competency','PC'],];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#development-course-modal-add">
<i class="ri-add-line"></i>
Select
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัสหลักสูตร*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหลักสูตร (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหลักสูตร (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-2rem">วัตถุประสงค์</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
[(ngModel)]="dataSelect.detail"> </textarea>
<label for="detail_eng" class="ti-form-label mt-2rem">หัวข้อเรื่อง</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
[(ngModel)]="dataSelect.topic"> </textarea>
<div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="development-course-table-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="max-h-full overflow-hidden ti-modal-content">
<div id="development-course-alert-add-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
ประเภทสมรรถนะ
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-modal-edit">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'Care Competency','CC'],
['02', 'Management Competency','MC'],
['03', 'Position Competency','PC'],];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#development-course-modal-edit">
<i class="ri-add-line"></i>
Select
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-add-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="development-course-alert-add-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-add-modal" (click)="addUser();showSuccess()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="development-course-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-edit-modal" (click)="addUser();showSuccessEdit()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="development-course-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#development-course-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-delete-modal" (click)="addUser();showSuccessDelete()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyCompetencycourseModel } from 'src/app/shared/model/competencycourse.model';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
export interface DataModel {
id: string
name: string
edesc: string
detail: string
topic: string
checked: boolean
}
@Component({
selector: 'app-development-course',
templateUrl: './development-course.component.html',
......@@ -11,6 +20,10 @@ export class DevelopmentCourseComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ตั้งค่าผู้ใช้งาน', tab.text]);
......@@ -25,17 +38,17 @@ export class DevelopmentCourseComponent {
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
"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;
......@@ -58,7 +71,7 @@ export class DevelopmentCourseComponent {
// ฟังก์ชัน toggle checkbox
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() {
this.isChecked = !this.isChecked;
this.mockData.forEach((item) => {
......@@ -69,25 +82,69 @@ export class DevelopmentCourseComponent {
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
const body = new MyCompetencycourseModel({ competencyCourseId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, courseTopic: this.dataSelect.topic, courseDetail: this.dataSelect.detail })
this.competencycourseService.post(body).subscribe((response: any) => {
if (response.success) {
this.showSuccess()
this.getCompetencycourseList()
}
})
}
deleteUser() {
const body = new MyCompetencycourseModel({ competencyCourseId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, courseTopic: this.dataSelect.topic, courseDetail: this.dataSelect.detail })
this.competencycourseService.delete(body).subscribe((response: any) => {
if (response.success) {
this.showSuccessDelete()
this.getCompetencycourseList()
}
})
}
currentModal = "";
mockData = [
{ 'id': 'CC-01-01', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2', 'code': '1', 'checked': false },
{ 'id': 'CC-01-02', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O3-O4', 'code': '2', 'checked': false },
{ 'id': 'CC-01-03', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S1-S2', 'code': '3', 'checked': false },
{ 'id': 'CC-01-04', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S3-S4', 'code': '4', 'checked': false },
{ 'id': 'CC-01-05', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M1-M2', 'code': '5', 'checked': false },
{ 'id': 'CC-01-06', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M3-M4', 'code': '6', 'checked': false },
{ 'id': 'CC-01-07', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ E1-E2', 'code': '7', 'checked': false }
]
mockDataSelect:any =[]
mockData: DataModel[] = []
dataLoading = false
dataSelect: DataModel = { id: "", name: "", edesc: "", topic: "", detail: "", checked: false }
mockDataSelect: any = []
constructor(private toastr: ToastrService) { }
checkSelect(){
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private competencycourseService: CompetencycourseService
) { }
ngOnInit(): void {
this.getCompetencycourseList()
}
getCompetencycourseList() {
this.dataLoading = true
this.competencycourseService.getList().subscribe({
next: response => {
this.mockData = response.map(x => ({ id: x.competencyCourseId, name: x.tdesc, edesc: x.edesc, topic: x.courseTopic, detail: x.courseDetail, checked: false }))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
}
dataListFilter() {
return this.mockData.filter(x => {
const data = x
const match = data.id.includes(this.search) || data.name.includes(this.search)
return match;
});
}
selectCompetencycourse(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", topic: "", detail: "", checked: false }));
}
checkSelect() {
this.mockDataSelect = this.mockData.filter(item => item.checked);
}
showSuccess() {
......
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex pr-2">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()" [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70" (click)="toggleCheckbox()">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}}
Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()"
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
(click)="toggleCheckbox()">Select All</label>
</div>
<div class="page px-rem">
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()" style="height: 40px;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add" (click)="selectCompetencytopic()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
......@@ -72,153 +82,190 @@
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mockData;let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#competency-topic-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#competency-topic-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</ng-container>
</tr>
</thead>
<tbody *ngIf="dataLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}"
[(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#competency-topic-modal-edit" (click)="selectCompetencytopic(item)"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#competency-topic-alert-delete-modal"
(click)="selectCompetencytopic(item)"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
</div>
<div id="competency-topic-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เพิ่มหัวข้อสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เพิ่มหัวข้อสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัส*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" placeholder="">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-10" placeholder="">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" placeholder="">
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"> </textarea>
<label class="ti-form-label mt-2rem">ประเภท Competency</label>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัส*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
[(ngModel)]="dataSelect.definition"> </textarea>
<label class="ti-form-label mt-2rem">ประเภท Competency</label>
<div class="flex">
<div class="relative flex rounded-md w-1/2">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#competency-topic-table-modal-select">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
style="padding-right: 2.5rem;" [(ngModel)]="dataSelect.type.code">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#competency-topic-table-modal-select">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
<label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label>
<label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label>
<div>
<div class="flex rounded-md">
<label for="file-input-medium" class="sr-only">อัปโหลดไฟล์</label>
<input type="file" id="file-input-medium" name="file-input-medium" class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
<span class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
<button class="text-sm text-gray-500 dark:text-white/70" onclick="document.getElementById('file-input-medium').click();">Browse</button>
<input type="file" id="file-input-medium" name="file-input-medium"
class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
<span
class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
<button class="text-sm text-gray-500 dark:text-white/70"
onclick="document.getElementById('file-input-medium').click();">Browse</button>
</span>
<div class="flex items-center ml-2">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md">
<button href="javascript:void(0);"
class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
</div>
<div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-add-modal">
บันทึกข้อมูล
</a>
<div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="competency-topic-modal-edit" class="hs-overlay hidden ti-modal">
......@@ -265,40 +312,51 @@
</div>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัส*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="CC-01" >
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-10" value="จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)">
<input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" value="จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)">
<input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50">การส่งเสริมให้ทุกคนในองค์กรมีจิตสำนึกด้านความปลอดภัยและคุณภาพโดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับแรก (Safety First) สวมใส่อุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจจะเป็นสาเหตุของอุบัติเหตุรอบๆตัว รวมถึงการให้ความสำคัญกับคุณภาพของสินค้าและบริการที่ตนเองรับผิดชอบให้ได้มาตรฐาน(Quality Awareness) มีส่วนร่วมในการควบคุมปริมาณของเสีย (Defect) การแก้ไขงาน (Rework) หรือการหยุดรองาน (Delay) ให้น้อยที่สุดประสิทธิผลในการปฏิบัติานหรื่อเครื่องจักรสูงขึ้น (Effectiveness) </textarea>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
[(ngModel)]="dataSelect.definition"> </textarea>
<label class="ti-form-label mt-2rem">ประเภท Competency</label>
<div class="flex">
<div class="relative flex rounded-md w-1/2">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;" value="CC">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#competency-topic-table-modal-edit">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
<div class="flex">
<div class="relative flex rounded-md w-1/2">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
style="padding-right: 2.5rem;" [(ngModel)]="dataSelect.type.code">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#competency-topic-table-modal-edit">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
<label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label>
<div>
<div class="flex rounded-md">
<label for="file-input-medium" class="sr-only">อัปโหลดไฟล์</label>
<input type="file" id="file-input-medium" name="file-input-medium" class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
<span class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
<button class="text-sm text-gray-500 dark:text-white/70" onclick="document.getElementById('file-input-medium').click();">Browse</button>
</span>
<div class="flex items-center ml-2">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div>
<div class="flex rounded-md">
<label for="file-input-medium" class="sr-only">อัปโหลดไฟล์</label>
<input type="file" id="file-input-medium" name="file-input-medium"
class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
<span
class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
<button class="text-sm text-gray-500 dark:text-white/70"
onclick="document.getElementById('file-input-medium').click();">Browse</button>
</span>
<div class="flex items-center ml-2">
<button href="javascript:void(0);"
class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
</div>
<div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......@@ -306,13 +364,13 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-edit-modal">
data-hs-overlay="#competency-topic-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="competency-topic-table-modal-select" class="hs-overlay hidden ti-modal">
......@@ -323,8 +381,7 @@
ประเภทสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
......@@ -337,7 +394,8 @@
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
placeholder="Search by No. or Name" [(ngModel)]="searchModal"
(ngModelChange)="searchCompetencytypeChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
......@@ -357,29 +415,47 @@
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<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>
</div>
</th>
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<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>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'Care Competency','CC'],
['02', 'Management Competency','MC'],
['03', 'Position Competency','PC'],];let i = index">
<td class="text-center">{{item[0]}}</td>
<td >{{item[1]}}</td>
<td class="text-center">{{item[2]}}</td>
<tbody *ngIf="competencytypeListLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!competencytypeListLoading&&!competencytypeListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!competencytypeListLoading&&competencytypeListFilter().length">
<tr
*ngFor="let item of competencytypeListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">{{item.id}}</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add"
(click)="selectCompetencytype(item)">
<i class="ri-add-line"></i>
Select
</button>
......@@ -390,38 +466,48 @@
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageModal.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageModal"
(click)="currentPageModal=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal > pageModal.length-1 ? currentPageModal: currentPageModal+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPageModal-1) * 10)+1}} to {{competencytypeListFilter().length<10
?competencytypeListFilter().length: (currentPageModal==pageModal.length ?
((currentPageModal * 10) - ((currentPageModal * 10) - competencytypeListFilter().length)
) :(currentPageModal * 10) ) }} of {{competencytypeListFilter().length}} items</span>
</ul>
</div>
</nav>
</div>
</div>
</div>
......@@ -435,8 +521,7 @@
ประเภทสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
......@@ -449,7 +534,8 @@
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
placeholder="Search by No. or Name" [(ngModel)]="searchModal"
(ngModelChange)="searchCompetencytypeChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
......@@ -465,46 +551,51 @@
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; 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"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<span class="font-size-12px font-weight-700">{{ item }}</span>
<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>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'Care Competency','CC'],
['02', 'Management Competency','MC'],
['03', 'Position Competency','PC'],];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<tbody *ngIf="competencytypeListLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!competencytypeListLoading&&!competencytypeListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!competencytypeListLoading&&competencytypeListFilter().length">
<tr
*ngFor="let item of competencytypeListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">{{item.id}}</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-edit">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-edit"
(click)="selectCompetencytype(item)">
<i class="ri-add-line"></i>
Select
</button>
......@@ -515,146 +606,156 @@
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageModal.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageModal"
(click)="currentPageModal=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal > pageModal.length-1 ? currentPageModal: currentPageModal+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPageModal-1) * 10)+1}} to {{competencytypeListFilter().length<10
?competencytypeListFilter().length: (currentPageModal==pageModal.length ?
((currentPageModal * 10) - ((currentPageModal * 10) - competencytypeListFilter().length)
) :(currentPageModal * 10) ) }} of {{competencytypeListFilter().length}} items</span>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div id="competency-topic-alert-add-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-add-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-add-modal" (click)="addUser();showSuccess()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-add-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="competency-topic-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-edit-modal" (click)="addUser();showSuccessEdit()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="competency-topic-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-delete-modal" (click)="addUser();showSuccessDelete()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.model';
import { MyCompetencytypeModel } from 'src/app/shared/model/competencytype.model';
import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service';
import { CompetencytypeService } from 'src/app/shared/services/competencytype.service';
export interface DataModel {
id: string
name: string
edesc: string
code: string
definition: string
type: DataModel2
checked: boolean
}
export interface DataModel2 {
id: string
name: string
edesc: string
code: string
level: string
}
@Component({
selector: 'app-competency-topic',
templateUrl: './competency-topic.component.html',
styleUrls: ['./competency-topic.component.scss']
})
export class CompetencyTopic {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
currentPageModal = 1
pageModal = Array.from({ length: 1 }, (_, i) => i + 1);
searchModal = ""
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', 'หัวข้อสมรรถนะ'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
......@@ -25,17 +53,17 @@ export class CompetencyTopic {
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
// [
// ['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','CC'],
// ['CC-02', 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)','CC'],
......@@ -44,15 +72,12 @@ export class CompetencyTopic {
// ['MC-02', 'การมีทัศนคติเชิงบวก (Mindset-Growth)','MC'],
// ['PC-01', 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา','PC']
mockData = [
{ 'id': 'CC-01', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)', 'code': 'CC', 'checked': false },
{ 'id': 'CC-02', 'name': 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)', 'code': 'CC', 'checked': false },
{ 'id': 'CC-03', 'name': 'ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)', 'code': 'CC', 'checked': false },
{ 'id': 'MC-01', 'name': 'การคิดเชิงกลยุทธิ์ (Strategic Thinking)', 'code': 'MC', 'checked': false },
{ 'id': 'MC-02', 'name': 'การมีทัศนคติเชิงบวก (Mindset-Growth)', 'code': 'MC', 'checked': false },
{ 'id': 'PC-01', 'name': 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา', 'code': 'PC', 'checked': false }
]
mockDataSelect:any =[]
mockData: DataModel[] = []
dataLoading = false
dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }
competencytypeListLoading = false
competencytypeList: DataModel2[] = []
mockDataSelect: any = []
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
......@@ -74,7 +99,7 @@ export class CompetencyTopic {
// ฟังก์ชัน toggle checkbox
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ'
this.mockData.forEach((item) => {
......@@ -83,19 +108,106 @@ export class CompetencyTopic {
this.checkSelect();
}
checkSelect(){
checkSelect() {
this.mockDataSelect = this.mockData.filter(item => item.checked);
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
const body = new MyCompetencytopicModel({
competencyTopicId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, competencyDetail: this.dataSelect.definition,
competencyType: new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.type.id, tdesc: this.dataSelect.type.name, edesc: this.dataSelect.type.edesc, shortName: this.dataSelect.type.code, expectationLevel: this.dataSelect.type.level }),
})
this.competencytopicService.post(body).subscribe((response: any) => {
if (response.success) {
this.showSuccess()
this.getCompetencytopicList()
}
})
}
deleteUser() {
const body = new MyCompetencytopicModel({
competencyTopicId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, competencyDetail: this.dataSelect.definition,
competencyType: new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.type.id, tdesc: this.dataSelect.type.name, edesc: this.dataSelect.type.edesc, shortName: this.dataSelect.type.code, expectationLevel: this.dataSelect.type.level }),
})
this.competencytopicService.delete(body).subscribe((response: any) => {
if (response.success) {
this.showSuccessDelete()
this.getCompetencytopicList()
}
})
}
currentModal = "";
constructor(private toastr: ToastrService) { }
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private competencytopicService: CompetencytopicService,
private competencytypeService: CompetencytypeService
) { }
ngOnInit(): void {
this.getCompetencytopicList()
this.getCompetencytypeList()
}
getCompetencytypeList() {
this.competencytypeListLoading = true
this.competencytypeService.getList().subscribe({
next: response => {
this.competencytypeList = response.map(x => ({ id: x.competencyTypeId, name: x.tdesc, edesc: x.edesc, code: x.shortName, level: x.expectationLevel, checked: false }))
this.competencytypeListLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.competencytypeListLoading = false
this.cdr.detectChanges()
}
})
}
searchCompetencytypeChange() {
this.currentPageModal = 1
this.pageModal = Array.from({ length: Math.ceil(this.competencytypeListFilter().length / 10) }, (_, i) => i + 1);
}
competencytypeListFilter() {
return this.competencytypeList.filter(x => {
const data = x
const match = data.id.includes(this.searchModal) || data.name.includes(this.searchModal) || data.code.includes(this.searchModal);
return match;
});
}
selectCompetencytype(data: DataModel2) {
this.dataSelect.type = JSON.parse(JSON.stringify(data));
}
getCompetencytopicList() {
this.dataLoading = true
this.competencytopicService.getList().subscribe({
next: response => {
this.mockData = response.map(x => ({
id: x.competencyTopicId, name: x.tdesc, edesc: x.edesc, code: x.competencyType.shortName, definition: x.competencyDetail,
type: { id: x.competencyType.competencyTypeId, name: x.competencyType.tdesc, edesc: x.competencyType.edesc, code: x.competencyType.shortName, level: x.expectationLevel },
checked: false
}))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
}
dataListFilter() {
return this.mockData.filter(x => {
const data = x
const match = data.id.includes(this.search) || data.name.includes(this.search) || data.code.includes(this.search);
return match;
});
}
selectCompetencytopic(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }));
}
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
......
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex pr-2">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} Selected</label>
</div>
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}}
Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()" [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70" (click)="toggleCheckbox()">Select All</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()"
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
(click)="toggleCheckbox()">Select All</label>
</div>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()" style="height: 40px;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
......@@ -28,7 +33,8 @@
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
<button type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#type-registration-component-modal-add">
<i class="ti ti-file-plus"></i>
import
......@@ -36,17 +42,21 @@
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#type-registration-component-modal-add">
data-hs-overlay="#type-registration-component-modal-add" (click)="selectCompetencytype()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#type-registration-component-alert-delete-modal">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#type-registration-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
......@@ -61,65 +71,95 @@
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mockData;let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#type-registration-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#type-registration-component-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="dataLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}"
[(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#type-registration-component-modal-edit"
(click)="selectCompetencytype(item)"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#type-registration-component-alert-delete-modal"
(click)="selectCompetencytype(item)"></i>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="nav-tabs">
<div class="pagination-style-3 overflow-auto my-5">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
<!-- <ul class="nav-tabs">
<p>Show 1 to 10 of 50 items</p>
</ul> -->
</nav>
</div>
......@@ -168,15 +208,16 @@
</div>
<div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2">
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อประเภท (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-2/3">
<input type="text" id="detail_th" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อประเภท (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-2/3">
<input type="text" id="detail_eng" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อย่อ *</label>
<input type="text" id="detail_eng" class="ti-form-input w-2/3">
<input type="text" id="detail_eng" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.code">
<label for="detail_eng" class="ti-form-label mt-1rem">ระดับความคาดหวัง *</label>
<input type="text" id="detail_eng" class="ti-form-input" style="width: 200px;" >
<input type="text" id="detail_eng" class="ti-form-input" style="width: 200px;"
[(ngModel)]="dataSelect.level">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......@@ -237,15 +278,16 @@
</div>
<div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" value="01" >
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อประเภท (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-2/3" value="Core Competency">
<input type="text" id="detail_th" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อประเภท (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-2/3" value="Core Competency">
<input type="text" id="detail_eng" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อย่อ *</label>
<input type="text" id="detail_eng" class="ti-form-input w-2/3" value="CC">
<input type="text" id="detail_eng" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.code">
<label for="detail_eng" class="ti-form-label mt-1rem">ระดับความคาดหวัง *</label>
<input type="text" id="detail_eng" class="ti-form-input" style="width: 200px;" value="8">
<input type="text" id="detail_eng" class="ti-form-input" style="width: 200px;"
[(ngModel)]="dataSelect.level">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
......@@ -265,7 +307,7 @@
<div id="type-registration-component-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
......@@ -290,7 +332,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#type-registration-component-alert-modal" (click)="addUser();showSuccess()">
data-hs-overlay="#type-registration-component-alert-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
......@@ -301,7 +343,7 @@
<div id="type-registration-component-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
......@@ -326,7 +368,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#type-registration-component-alert-edit-modal" (click)="addUser();showSuccessEdit()">
data-hs-overlay="#type-registration-component-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
......@@ -336,7 +378,7 @@
</div>
<div id="type-registration-component-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
......@@ -361,11 +403,11 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#type-registration-component-alert-delete-modal" (click)="addUser();showSuccessDelete()">
data-hs-overlay="#type-registration-component-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyCompetencytypeModel } from 'src/app/shared/model/competencytype.model';
import { CompetencytypeService } from 'src/app/shared/services/competencytype.service';
export interface DataModel {
id: string
name: string
edesc: string
code: string
level: string
checked: boolean
}
@Component({
selector: 'app-type-registration',
templateUrl: './type-registration.component.html',
styleUrls: ['./type-registration.component.scss']
selector: 'app-type-registration',
templateUrl: './type-registration.component.html',
styleUrls: ['./type-registration.component.scss']
})
export class TypeRegistration {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', 'ประเภทสมรรถนะ'];
......@@ -12,6 +21,12 @@ export class TypeRegistration {
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false;
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', tab.text]);
......@@ -28,17 +43,17 @@ export class TypeRegistration {
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
toggleCheckbox(): void {
......@@ -49,14 +64,12 @@ export class TypeRegistration {
this.checkSelect();
}
mockData = [
{ 'id': '01', 'name': 'Core Competency', 'code': 'CC','checked': false },
{ 'id': '02', 'name': 'Management Competency', 'code': 'MC','checked': false },
{ 'id': '03', 'name': 'Position Competency', 'code': 'PC','checked': false },
]
mockDataSelect:any =[]
mockData: DataModel[] = []
dataLoading = false
dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", level: "", checked: false }
mockDataSelect: any = []
checkSelect(){
checkSelect() {
this.mockDataSelect = this.mockData.filter(item => item.checked);
}
......@@ -81,10 +94,60 @@ export class TypeRegistration {
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
const body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, expectationLevel: this.dataSelect.level })
this.competencytypeService.post(body).subscribe((response: any) => {
if (response.success) {
this.showSuccess()
this.getCompetencytypeList()
}
})
}
deleteUser() {
const body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, expectationLevel: this.dataSelect.level })
this.competencytypeService.delete(body).subscribe((response: any) => {
if (response.success) {
this.showSuccessDelete()
this.getCompetencytypeList()
}
})
}
currentModal = ""
constructor(private toastr: ToastrService) { }
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private competencytypeService: CompetencytypeService
) { }
ngOnInit(): void {
this.getCompetencytypeList()
}
getCompetencytypeList() {
this.dataLoading = true
this.competencytypeService.getList().subscribe({
next: response => {
this.mockData = response.map(x => ({ id: x.competencyTypeId, name: x.tdesc, edesc: x.edesc, code: x.shortName, level: x.expectationLevel, checked: false }))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
}
dataListFilter() {
return this.mockData.filter(x => {
const data = x
const match = data.id.includes(this.search) || data.name.includes(this.search) || data.code.includes(this.search);
return match;
});
}
selectCompetencytype(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", level: "", checked: false }));
}
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
......
src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex pr-2">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()" [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70" (click)="toggleCheckbox()">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#assessment-tool-component-modal-add">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#assessment-tool-component-modal-add">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#assessment-tool-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}}
Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()"
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
(click)="toggleCheckbox()">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()" style="height: 40px;">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#assessment-tool-component-modal-add">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#assessment-tool-component-modal-add" (click)="selectAssessment()">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
<!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
data-hs-overlay="#assessment-tool-component-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i>
Delete
</button> -->
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mockData;let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="dataLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}"
[(ngModel)]="item.checked" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#assessment-tool-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#assessment-tool-component-alert-delete-modal"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
<div id="assessment-tool-component-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เพิ่มเครื่องมือประเมิน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-full">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-full">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อที่ใช้เเสดง *</label>
<input type="text" id="showname" class="ti-form-input w-full">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เเก้ไขเครื่องมือประเมิน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="01">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-full" value="แบบสังเกต">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-full" value="แบบสังเกต">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อที่ใช้เเสดง *</label>
<input type="text" id="showname" class="ti-form-input w-full" value="O">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-modal" (click)="addUser();showSuccess()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-edit-modal" (click)="addUser();showSuccessEdit()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-delete-modal" (click)="addUser();showSuccessDelete()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#assessment-tool-component-modal-edit"
(click)="selectAssessment(item)"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#assessment-tool-component-alert-delete-modal"
(click)="selectAssessment(item)"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
</div>
<div id="assessment-tool-component-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เพิ่มเครื่องมือประเมิน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-full" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-full" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อที่ใช้เเสดง *</label>
<input type="text" id="showname" class="ti-form-input w-full" [(ngModel)]="dataSelect.code">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เเก้ไขเครื่องมือประเมิน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-full" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-full" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อที่ใช้เเสดง *</label>
<input type="text" id="showname" class="ti-form-input w-full" [(ngModel)]="dataSelect.code">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="assessment-tool-component-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#assessment-tool-component-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#assessment-tool-component-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyAssessmentModel } from 'src/app/shared/model/assessment.model';
import { AssessmentService } from 'src/app/shared/services/assessment.service';
export interface DataModel {
id: string
name: string
edesc: string
code: string
checked: boolean
}
@Component({
selector: 'app-assessment-tool',
templateUrl: './assessment-tool.component.html',
styleUrls: ['./assessment-tool.component.scss']
selector: 'app-assessment-tool',
templateUrl: './assessment-tool.component.html',
styleUrls: ['./assessment-tool.component.scss']
})
export class AssessmentToolComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', 'เครื่องมือประเมิน'];
......@@ -12,6 +20,12 @@ export class AssessmentToolComponent {
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false;
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', tab.text]);
......@@ -28,17 +42,17 @@ export class AssessmentToolComponent {
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
"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;
......@@ -61,11 +75,61 @@ export class AssessmentToolComponent {
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
const body = new MyAssessmentModel({ assessmentId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code })
this.assessmentService.post(body).subscribe((response: any) => {
if (response.success) {
this.showSuccess()
this.getAssessmentList()
}
})
}
deleteUser() {
const body = new MyAssessmentModel({ assessmentId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code })
this.assessmentService.delete(body).subscribe((response: any) => {
if (response.success) {
this.showSuccessDelete()
this.getAssessmentList()
}
})
}
currentModal = ""
constructor(private toastr: ToastrService) { }
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private assessmentService: AssessmentService
) { }
ngOnInit(): void {
this.getAssessmentList()
}
getAssessmentList() {
this.dataLoading = true
this.assessmentService.getList().subscribe({
next: response => {
this.mockData = response.map(x => ({ id: x.assessmentId, name: x.tdesc, edesc: x.edesc, code: x.shortName, checked: false }))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
}
dataListFilter() {
return this.mockData.filter(x => {
const data = x
const match = data.id.includes(this.search) || data.name.includes(this.search) || data.code.includes(this.search);
return match;
});
}
selectAssessment(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", checked: false }));
}
toggleCheckbox(): void {
this.isChecked = !this.isChecked;
......@@ -74,16 +138,15 @@ export class AssessmentToolComponent {
});
this.checkSelect();
}
mockData = [
{ 'id': '01', 'name': 'เเบบสังเกต', 'code': 'O','checked': false },
{ 'id': '02', 'name': 'เเบบการปฏิบัติงาน', 'code': 'D','checked': false },
{ 'id': '03', 'name': 'การบันทึก/เอกสาร', 'code': 'P','checked': false },
{ 'id': '04', 'name': 'การสัมภาษณ์', 'code': 'I','checked': false },
{ 'id': '05', 'name': 'เเบบทดสอบ', 'code': 'T','checked': false },
]
mockDataSelect:any =[]
checkSelect(){
mockData: DataModel[] = []
dataLoading = false
dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", checked: false }
mockDataSelect: any = []
checkSelect() {
this.mockDataSelect = this.mockData.filter(item => item.checked);
}
......
src/app/components/dashboard/dashboard.module.ts
......@@ -114,6 +114,11 @@ import { CompanyRegistrationPageComponent } from '../company-components/company-
import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/idp-evalution.component';
import { PmsEvalutionComponent } from '../performance-evaluation/pms-evaluation/pms-evalution.component';
import { CEvaluationComponent } from '../performance-evaluation/c-evaluation/c-evaluation.component';
import { CompanyService } from 'src/app/shared/services/company.service';
import { CompetencytypeService } from 'src/app/shared/services/competencytype.service';
import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service';
import { AssessmentService } from 'src/app/shared/services/assessment.service';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
@NgModule({
declarations: [
SalesComponent,
......@@ -223,10 +228,27 @@ import { CEvaluationComponent } from '../performance-evaluation/c-evaluation/c-e
FormsModule,
NgxDaterangepickerMd.forRoot(),
],
providers: [Bu1Service, Bu2Service, Bu3Service, Bu4Service, Bu5Service, Bu6Service, Bu7Service, PositionService, PLService, EmpGroupService, EmpTypeService, {
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
multi: true,
},]
providers: [
Bu1Service,
Bu2Service,
Bu3Service,
Bu4Service,
Bu5Service,
Bu6Service,
Bu7Service,
PositionService,
PLService,
EmpGroupService,
EmpTypeService,
CompanyService,
CompetencytypeService,
CompetencytopicService,
AssessmentService,
CompetencycourseService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
multi: true,
},]
})
export class DashboardModule { }
src/app/components/job-detail-components/command-structure/sub-command-structure/sub-command-structure.component.ts
......@@ -25,9 +25,9 @@ export class SubCommandStructureComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
}
jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectJob(job: JobModel) {
// this.showSuccess()
......
src/app/components/job-detail-components/job-competency/sub-job-competency/sub-job-competency.component.ts
......@@ -25,9 +25,9 @@ export class SubJobCompetencyComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
}
jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectJob(job: JobModel) {
// this.showSuccess()
......
src/app/components/job-detail-components/job-detail-management/import-data/import-data.component.ts
......@@ -24,9 +24,9 @@ export class ImportDataComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
}
jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectJob(job: JobModel) {
// this.showSuccess()
......
src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.ts
......@@ -24,9 +24,9 @@ export class WorkDetailComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
}
jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectJob(job: JobModel) {
// this.showSuccess()
......
src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts
......@@ -25,9 +25,9 @@ export class SubJobPositionIndicatorsComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
}
jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectJob(job: JobModel) {
// this.showSuccess()
......
src/app/components/job-detail-components/job-qualifications/sub-job-qualifications/sub-job-qualifications.component.ts
......@@ -25,9 +25,9 @@ export class SubJobQualificationsComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
}
jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.includes(this.search) ||
x.edesc.includes(this.search))
}
selectJob(job: JobModel) {
// this.showSuccess()
......
src/app/shared/model/assessment.model.ts 0 → 100644
export interface AssessmentModel {
assessmentId: string
companyId: string
edesc: string
tdesc: string
shortName: string
}
export class MyAssessmentModel implements AssessmentModel {
assessmentId: string
companyId: string
edesc: string
tdesc: string
shortName: string
constructor(data: Partial<AssessmentModel>) {
this.assessmentId = data.assessmentId || ""
this.companyId = data.companyId || ""
this.edesc = data.edesc || ""
this.tdesc = data.tdesc || ""
this.shortName = data.shortName || ""
}
}
src/app/shared/model/company.model.ts 0 → 100644
export interface CompanyModel {
companyId: string
tdesc: string
edesc: string
companyGroup: string
amphur: string
tvillage: string
troomno: string
tfloor: string
taddr: string
tmoo: string
tsoi: string
troad: string
tdistrict: string
evillage: string
eroomno: string
efloor: string
eaddr: string
emoo: string
esoi: string
eroad: string
edistrict: string
zipcode: string
tel: string
fax: string
website: string
insType: string
companyType: string
noOfEmployee: number
empDaily: number
noOfDaily: number
empMonthly: number
noOfMonthly: number
empOther: number
noOfOther: number
officeWorkTime: string
probation: number
descOther: string
noOfBranch: number
payCash: number
payCheque: number
payBank: number
payOther: number
compensationTax: string
companyAbb: string
brandTdesc: string
brandEdesc: string
logo: string
}
export class MyCompanyModel implements CompanyModel {
companyId: string
tdesc: string
edesc: string
companyGroup: string
amphur: string
tvillage: string
troomno: string
tfloor: string
taddr: string
tmoo: string
tsoi: string
troad: string
tdistrict: string
evillage: string
eroomno: string
efloor: string
eaddr: string
emoo: string
esoi: string
eroad: string
edistrict: string
zipcode: string
tel: string
fax: string
website: string
insType: string
companyType: string
noOfEmployee: number
empDaily: number
noOfDaily: number
empMonthly: number
noOfMonthly: number
empOther: number
noOfOther: number
officeWorkTime: string
probation: number
descOther: string
noOfBranch: number
payCash: number
payCheque: number
payBank: number
payOther: number
compensationTax: string
companyAbb: string
brandTdesc: string
brandEdesc: string
logo: string
constructor(data: Partial<CompanyModel>) {
this.companyId = data.companyId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.companyGroup = data.companyGroup || ""
this.amphur = data.amphur || ""
this.tvillage = data.tvillage || ""
this.troomno = data.troomno || ""
this.tfloor = data.tfloor || ""
this.taddr = data.taddr || ""
this.tmoo = data.tmoo || ""
this.tsoi = data.tsoi || ""
this.troad = data.troad || ""
this.tdistrict = data.tdistrict || ""
this.evillage = data.evillage || ""
this.eroomno = data.eroomno || ""
this.efloor = data.efloor || ""
this.eaddr = data.eaddr || ""
this.emoo = data.emoo || ""
this.esoi = data.esoi || ""
this.eroad = data.eroad || ""
this.edistrict = data.edistrict || ""
this.zipcode = data.zipcode || ""
this.tel = data.tel || ""
this.fax = data.fax || ""
this.website = data.website || ""
this.insType = data.insType || ""
this.companyType = data.companyType || ""
this.noOfEmployee = data.noOfEmployee ?? 0
this.empDaily = data.empDaily ?? 0
this.noOfDaily = data.noOfDaily ?? 0
this.empMonthly = data.empMonthly ?? 0
this.noOfMonthly = data.noOfMonthly ?? 0
this.empOther = data.empOther ?? 0
this.noOfOther = data.noOfOther ?? 0
this.officeWorkTime = data.officeWorkTime || ""
this.probation = data.probation ?? 0
this.descOther = data.descOther || ""
this.noOfBranch = data.noOfBranch ?? 0
this.payCash = data.payCash ?? 0
this.payCheque = data.payCheque ?? 0
this.payBank = data.payBank ?? 0
this.payOther = data.payOther ?? 0
this.compensationTax = data.compensationTax || ""
this.companyAbb = data.companyAbb || ""
this.brandTdesc = data.brandTdesc || ""
this.brandEdesc = data.brandEdesc || ""
this.logo = data.logo || ""
}
}
src/app/shared/model/competencycourse.model.ts 0 → 100644
export interface CompetencycourseModel {
competencyCourseId: string
companyId: string
edesc: string
tdesc: string
courseDetail: string
courseTopic: string
}
export class MyCompetencycourseModel implements CompetencycourseModel {
competencyCourseId: string
companyId: string
edesc: string
tdesc: string
courseDetail: string
courseTopic: string
constructor(data: Partial<CompetencycourseModel>) {
this.competencyCourseId = data.competencyCourseId || ""
this.companyId = data.companyId || ""
this.edesc = data.edesc || ""
this.tdesc = data.tdesc || ""
this.courseDetail = data.courseDetail || ""
this.courseTopic = data.courseTopic || ""
}
}
src/app/shared/model/competencytopic.model.ts 0 → 100644
import { CompetencytypeModel, MyCompetencytypeModel } from "./competencytype.model"
export interface CompetencytopicModel {
competencyTopicId: string
competencyType: CompetencytypeModel
companyId: string
edesc: string
tdesc: string
competencyDetail: string
competencyFiles: string
lineNo: number
expectationLevel: string
}
export class MyCompetencytopicModel implements CompetencytopicModel {
competencyTopicId: string
competencyType: CompetencytypeModel
companyId: string
edesc: string
tdesc: string
competencyDetail: string
competencyFiles: string
lineNo: number
expectationLevel: string
constructor(data: Partial<CompetencytopicModel>) {
this.competencyTopicId = data.competencyTopicId || ""
this.competencyType = new MyCompetencytypeModel(data.competencyType || {})
this.companyId = data.companyId || ""
this.edesc = data.edesc || ""
this.tdesc = data.tdesc || ""
this.competencyDetail = data.competencyDetail || ""
this.competencyFiles = data.competencyFiles || ""
this.lineNo = data.lineNo ?? 0
this.expectationLevel = data.expectationLevel || ""
}
}
src/app/shared/model/competencytype.model.ts 0 → 100644
export interface CompetencytypeModel {
competencyTypeId: string
companyId: string
edesc: string
tdesc: string
shortName: string
expectationLevel: string
}
export class MyCompetencytypeModel implements CompetencytypeModel {
competencyTypeId: string
companyId: string
edesc: string
tdesc: string
shortName: string
expectationLevel: string
constructor(data: Partial<CompetencytypeModel>) {
this.competencyTypeId = data.competencyTypeId || ""
this.companyId = data.companyId || ""
this.edesc = data.edesc || ""
this.tdesc = data.tdesc || ""
this.shortName = data.shortName || ""
this.expectationLevel = data.expectationLevel || ""
}
}
src/app/shared/services/assessment.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 { AssessmentModel } from '../model/assessment.model';
@Injectable({
providedIn: 'root'
})
export class AssessmentService {
api = "/assessment"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(competencyTypeId: string): Observable<AssessmentModel> {
return this.http.get<AssessmentModel>(this.urlApi + "/" + competencyTypeId)
}
getList(): Observable<AssessmentModel[]> {
return this.http.get<AssessmentModel[]>(this.urlApi + "/lists")
}
post(body: AssessmentModel) {
return this.http.post(this.urlApi, body)
}
delete(body: AssessmentModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
\ No newline at end of file
src/app/shared/services/auth.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
@Injectable({
providedIn: 'root',
})
export class AuthService {
authState: any;
constructor(private afu: AngularFireAuth, private router: Router) {
api = "/authen"
urlApi = environment.baseUrl + this.api
constructor(private afu: AngularFireAuth, private router: Router, private http: HttpClient) {
this.afu.authState.subscribe((auth: any) => {
this.authState = auth;
});
......@@ -64,6 +68,15 @@ export class AuthService {
});
}
loginWithUserPass(username: string, password: string): Observable<{ accessToken: string }> {
const body = {
username: username,
password: password
}
return this.http.post<{ accessToken: string }>(this.urlApi + "/login", body)
}
singout(): void {
this.afu.signOut();
this.router.navigate(['/login']);
......
src/app/shared/services/bu1.service.ts
......@@ -14,19 +14,19 @@ export class Bu1Service {
getList(): Observable<Bu1Model[]> {
return this.http.get<Bu1Model[]>(this.urlApi + "/lists")
}
getById(bu1id:string): Observable<Bu1Model> {
return this.http.get<Bu1Model>(this.urlApi + "/"+bu1id)
getById(bu1id: string): Observable<Bu1Model> {
return this.http.get<Bu1Model>(this.urlApi + "/" + bu1id)
}
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)
}
// 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/bu2.service.ts
......@@ -17,16 +17,16 @@ export class Bu2Service {
getById(bu2id: string): Observable<Bu2Model> {
return this.http.get<Bu2Model>(this.urlApi + "/" + bu2id)
}
// 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)
// }
post(body: Bu2Model) {
return this.http.post(this.urlApi, body)
}
delete(body: Bu2Model) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
src/app/shared/services/bu3.service.ts
......@@ -17,16 +17,16 @@ import { Bu3Model } from '../model/bu3.model';
getList(): Observable<Bu3Model[]> {
return this.http.get<Bu3Model[]>(this.urlApi + "/lists")
}
// post(body: Bu3Model) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: Bu3Model) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
post(body: Bu3Model) {
return this.http.post(this.urlApi, body)
}
delete(body: Bu3Model) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
\ No newline at end of file
src/app/shared/services/bu4.service.ts
......@@ -17,16 +17,16 @@ export class Bu4Service {
getById(bu4id: string): Observable<Bu4Model> {
return this.http.get<Bu4Model>(this.urlApi + "/" + bu4id)
}
// 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)
// }
post(body: Bu4Model) {
return this.http.post(this.urlApi, body)
}
delete(body: Bu4Model) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
src/app/shared/services/bu5.service.ts
......@@ -17,16 +17,16 @@ export class Bu5Service {
getById(bu5id: string): Observable<Bu5Model> {
return this.http.get<Bu5Model>(this.urlApi + "/" + bu5id)
}
// 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)
// }
post(body: Bu5Model) {
return this.http.post(this.urlApi, body)
}
delete(body: Bu5Model) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
src/app/shared/services/bu6.service.ts
......@@ -17,16 +17,16 @@ export class Bu6Service {
getById(bu6id: string): Observable<Bu6Model> {
return this.http.get<Bu6Model>(this.urlApi + "/" + bu6id)
}
// 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)
// }
post(body: Bu6Model) {
return this.http.post(this.urlApi, body)
}
delete(body: Bu6Model) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
src/app/shared/services/bu7.service.ts
......@@ -17,16 +17,16 @@ export class Bu7Service {
getById(bu7id: string): Observable<Bu7Model> {
return this.http.get<Bu7Model>(this.urlApi + "/" + bu7id)
}
// 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)
// }
post(body: Bu7Model) {
return this.http.post(this.urlApi, body)
}
delete(body: Bu7Model) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
src/app/shared/services/company.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 { CompanyModel } from '../model/company.model';
@Injectable({
providedIn: 'root'
})
export class CompanyService {
api = "/company"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(companyId: string): Observable<CompanyModel> {
return this.http.get<CompanyModel>(this.urlApi + "/" + companyId)
}
getList(): Observable<CompanyModel[]> {
return this.http.get<CompanyModel[]>(this.urlApi + "/lists")
}
post(body: CompanyModel) {
return this.http.post(this.urlApi, body)
}
// delete(body: CompanyModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
}
\ No newline at end of file
src/app/shared/services/competencycourse.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 { CompetencycourseModel } from '../model/competencycourse.model';
@Injectable({
providedIn: 'root'
})
export class CompetencycourseService {
api = "/competencycourse"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(competencyTypeId: string): Observable<CompetencycourseModel> {
return this.http.get<CompetencycourseModel>(this.urlApi + "/" + competencyTypeId)
}
getList(): Observable<CompetencycourseModel[]> {
return this.http.get<CompetencycourseModel[]>(this.urlApi + "/lists")
}
post(body: CompetencycourseModel) {
return this.http.post(this.urlApi, body)
}
delete(body: CompetencycourseModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
\ No newline at end of file
src/app/shared/services/competencytopic.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 { CompetencytopicModel } from '../model/competencytopic.model';
@Injectable({
providedIn: 'root'
})
export class CompetencytopicService {
api = "/competencytopic"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(competencyTopicId: string): Observable<CompetencytopicModel> {
return this.http.get<CompetencytopicModel>(this.urlApi + "/" + competencyTopicId)
}
getList(): Observable<CompetencytopicModel[]> {
return this.http.get<CompetencytopicModel[]>(this.urlApi + "/lists")
}
post(body: CompetencytopicModel) {
return this.http.post(this.urlApi, body)
}
delete(body: CompetencytopicModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
\ No newline at end of file
src/app/shared/services/competencytype.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 { CompetencytypeModel } from '../model/competencytype.model';
@Injectable({
providedIn: 'root'
})
export class CompetencytypeService {
api = "/competencytype"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(competencyTypeId: string): Observable<CompetencytypeModel> {
return this.http.get<CompetencytypeModel>(this.urlApi + "/" + competencyTypeId)
}
getList(): Observable<CompetencytypeModel[]> {
return this.http.get<CompetencytypeModel[]>(this.urlApi + "/lists")
}
post(body: CompetencytypeModel) {
return this.http.post(this.urlApi, body)
}
delete(body: CompetencytypeModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
\ No newline at end of file
src/app/shared/services/emp_group.service.ts
......@@ -18,16 +18,16 @@ export class EmpGroupService {
getById(groupId: string): Observable<EmpGroupModel> {
return this.http.get<EmpGroupModel>(this.urlApi + "/" + groupId)
}
// 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)
// }
post(body: EmpGroupModel) {
return this.http.post(this.urlApi, body)
}
delete(body: EmpGroupModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
src/app/shared/services/employee-type.service.ts
......@@ -18,16 +18,16 @@ export class EmpTypeService {
getById(codeId: string): Observable<EmpTypeModel> {
return this.http.get<EmpTypeModel>(this.urlApi + "/" + codeId)
}
// 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)
// }
post(body: EmpTypeModel) {
return this.http.post(this.urlApi, body)
}
delete(body: EmpTypeModel) {
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
......@@ -15,10 +15,10 @@ export class HttpRequestInterceptor {
constructor() { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.startsWith("./")) {
if (req.url.startsWith("./") || !sessionStorage.getItem("accessToken")) {
return next.handle(req);
} else {
const authHeader = 'Bearer ' + "eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJNWUhSUExVUyIsInJvbGVzIjpbIlVTRVIiXSwid29ya2FyZWEiOiJUS1ciLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJ6bWxvZ2luIjoiZmFsc2UiLCJyb2xlX2xldmVsIjoiNiIsImVtcGxveWVlaWQiOiIxMDAwMDA4MiIsImJyYW5jaCI6Im15aHIzIiwiZW1wX3Bvc2l0aW9uIjoiMDk3IiwidXNlcl9yb2xlIjoiQWxsIiwidWlkIjoiMTAwMDAwODIiLCJjb21wYW55aWQiOiIxMDAiLCJhY3RvcmlkIjoiMTAwMDAwODIiLCJsYW5nIjoidGgiLCJhZCI6ImZhbHNlIiwiZmlyc3Rsb2dpbiI6ImZhbHNlIiwidXJsX215aHIiOiJodHRwOi8vaHJwbHVzLXN0ZC5teWhyLmNvLnRoL2hyIiwiYXBwX25hbWUiOiJteWhyIiwicmVnaW9uYWxsdHkiOiJFTkciLCJ0b2tlbl96ZWVtZSI6IiIsInVzZXJfbGV2ZWwiOiJNWUhSIiwiZnVsbG5hbWUiOiLguJnguLLguKLguK3guJ7guLTguKPguLHguJXguJnguYwgIOC4l-C4lOC4quC4reC4miIsImNvbWlkIjoiIiwiam9iIjoiMDk3LTI0NjkiLCJ1c2VyIjoibXlociIsInptX3VzZXIiOiIiLCJ1c2VybmFtZSI6Im15aHIiLCJtZW1iZXJpZCI6IiJ9.5VUk7ZilGchdTTm-5YC0xIL53cEYX6AkfEW4d8Xd-1g";
const authHeader = 'Bearer ' + sessionStorage.getItem("accessToken")
const overideReq = {
headers: req.headers.set('Authorization', authHeader),
url: req.url,
......
src/app/shared/services/pl.service.ts
......@@ -4,29 +4,29 @@ import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { PLModel } from '../model/pl.model';
@Injectable({
providedIn: 'root'
})
export class PLService {
api = "/pl"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(plId:string): Observable<PLModel> {
return this.http.get<PLModel>(this.urlApi + "/" + plId)
}
getList(): Observable<PLModel[]> {
return this.http.get<PLModel[]>(this.urlApi + "/lists")
}
// post(body: PLModel) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: PLModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
}
\ No newline at end of file
providedIn: 'root'
})
export class PLService {
api = "/pl"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(plId: string): Observable<PLModel> {
return this.http.get<PLModel>(this.urlApi + "/" + plId)
}
getList(): Observable<PLModel[]> {
return this.http.get<PLModel[]>(this.urlApi + "/lists")
}
post(body: PLModel) {
return this.http.post(this.urlApi, body)
}
delete(body: PLModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
\ No newline at end of file
src/app/shared/services/position.service.ts
......@@ -17,16 +17,16 @@ import { PositionModel } from '../model/position.model';
getList(): Observable<PositionModel[]> {
return this.http.get<PositionModel[]>(this.urlApi + "/lists")
}
// post(body: PositionModel) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: PositionModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
post(body: PositionModel) {
return this.http.post(this.urlApi, body)
}
delete(body: PositionModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete(this.urlApi, options)
}
}
\ No newline at end of file
src/environments/environment.ts
......@@ -12,8 +12,9 @@ export const environment = {
appId: '********************************',
measurementId: '********************************',
},
baseUrl: 'https://hrplus-std.myhr.co.th/plus',
// baseUrl: 'https://hrplus-std.myhr.co.th/plus',
// baseUrl: 'https://192.168.10.165/plus',
baseUrl: ' https://myskill-x.myhr.co.th/api',
};
/*
......
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