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'; ...@@ -6,6 +6,9 @@ import { LoginPageComponent } from './login-page/login-page.component';
import { RegisterPageComponent } from './register-page/register-page.component'; import { RegisterPageComponent } from './register-page/register-page.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularFireAuthModule } from '@angular/fire/compat/auth'; 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({ @NgModule({
declarations: [LoginPageComponent, RegisterPageComponent], declarations: [LoginPageComponent, RegisterPageComponent],
...@@ -15,6 +18,12 @@ import { AngularFireAuthModule } from '@angular/fire/compat/auth'; ...@@ -15,6 +18,12 @@ import { AngularFireAuthModule } from '@angular/fire/compat/auth';
AngularFireAuthModule, AngularFireAuthModule,
FormsModule, FormsModule,
ReactiveFormsModule, 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 { ...@@ -16,13 +16,13 @@ export class LoginPageComponent {
constructor(@Inject(DOCUMENT) constructor(@Inject(DOCUMENT)
private document: Document, private document: Document,
private elementRef: ElementRef, private elementRef: ElementRef,
private renderer: Renderer2, private renderer: Renderer2,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private router: Router, private router: Router,
private authservice: AuthService,) { private authservice: AuthService,) {
const bodyElement = this.renderer.selectRootElement('body', true); 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 { ngOnInit(): void {
this.loginForm = this.formBuilder.group({ this.loginForm = this.formBuilder.group({
...@@ -37,15 +37,15 @@ export class LoginPageComponent { ...@@ -37,15 +37,15 @@ export class LoginPageComponent {
this.renderer.addClass(this.document.body, 'bg-white'); this.renderer.addClass(this.document.body, 'bg-white');
this.renderer.addClass(this.document.body, 'dark:bg-bgdark'); 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-header-styles', 'light');
//html.removeAttribute('data-nav-layout','vertical'); //html.removeAttribute('data-nav-layout','vertical');
html.classList.add('h-full', 'light'); html.classList.add('h-full', 'light');
if (localStorage.getItem('synto-header-mode') == 'dark') { if (localStorage.getItem('synto-header-mode') == 'dark') {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement; const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;
html.classList.add('h-full', 'dark'); html.classList.add('h-full', 'dark');
} }
} }
// firebase // firebase
...@@ -105,11 +105,26 @@ export class LoginPageComponent { ...@@ -105,11 +105,26 @@ export class LoginPageComponent {
} }
Submit() { Submit() {
if ( // if (
this.loginForm.controls['username'].value === 'spruko@admin.com' && // this.loginForm.controls['username'].value === 'spruko@admin.com' &&
this.loginForm.controls['password'].value === 'sprukoadmin' // this.loginForm.controls['password'].value === 'sprukoadmin'
) { // ) {
this.router.navigate(['/self-evaluation']); // 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 { } else {
this.error = 'Please check email and passowrd'; this.error = 'Please check email and passowrd';
} }
...@@ -126,12 +141,12 @@ export class LoginPageComponent { ...@@ -126,12 +141,12 @@ export class LoginPageComponent {
this.renderer.removeClass(this.document.body, '!py-0'); this.renderer.removeClass(this.document.body, '!py-0');
this.renderer.removeClass(this.document.body, 'bg-white'); this.renderer.removeClass(this.document.body, 'bg-white');
this.renderer.removeClass(this.document.body, 'dark:bg-bgdark'); this.renderer.removeClass(this.document.body, 'dark:bg-bgdark');
if (localStorage.getItem('synto-header-mode') == 'dark') { if (localStorage.getItem('synto-header-mode') == 'dark') {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement; const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;
html.classList.remove('h-full', 'dark'); html.classList.remove('h-full', 'dark');
} }
const authe: any = document.querySelector('.h-full'); const authe: any = document.querySelector('.h-full');
authe.removeAttribute('class', 'h-full'); authe.removeAttribute('class', 'h-full');
} }
} }
src/app/authentication/login-page/login-page2.component.html
...@@ -74,14 +74,15 @@ ...@@ -74,14 +74,15 @@
</div> </div>
</div> </div>
<!-- End Checkbox --> <!-- 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 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"> <div class="text-center">
<p class="mt-3 text-sm text-gray-600 dark:text-white/70"> <p class="mt-3 text-sm text-gray-600 dark:text-white/70">
Don't have an account yet? 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 Sign up here
(กรุณาลงทะเบียนที่นี่ หากคุณยังไม่มีบัญชีเข้าใช้) (กรุณาลงทะเบียนที่นี่ หากคุณยังไม่มีบัญชีเข้าใช้)
</a> </a>
...@@ -100,4 +101,4 @@ ...@@ -100,4 +101,4 @@
</div> </div>
</div> </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 @@ ...@@ -85,7 +85,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu2(item);currentModal='edit'" (click)="selectBu2(item);currentModal='edit'"
data-hs-overlay="#department-list-modal-edit"></i> 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> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -575,7 +575,7 @@ ...@@ -575,7 +575,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -616,7 +616,7 @@ ...@@ -616,7 +616,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -656,7 +656,7 @@ ...@@ -656,7 +656,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </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 { ...@@ -48,6 +48,7 @@ export class DepartmentListComponent implements OnInit {
this.bu2Service.getList().subscribe(response => { this.bu2Service.getList().subscribe(response => {
this.bu2List = response this.bu2List = response
this.onBu2TableSearchChange() this.onBu2TableSearchChange()
this.cdr.detectChanges()
}) })
} }
onBu2TableSearchChange() { onBu2TableSearchChange() {
...@@ -55,9 +56,9 @@ export class DepartmentListComponent implements OnInit { ...@@ -55,9 +56,9 @@ export class DepartmentListComponent implements OnInit {
this.bu2Table.page = Array.from({ length: Math.ceil(this.filterBu2Table().length / 10) }, (_, i) => i + 1); this.bu2Table.page = Array.from({ length: Math.ceil(this.filterBu2Table().length / 10) }, (_, i) => i + 1);
} }
filterBu2Table() { filterBu2Table() {
return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Table.search) || return this.bu2List.filter(x => x.bu2id.includes(this.bu2Table.search) ||
x.tdesc.toLowerCase().includes(this.bu2Table.search) || x.tdesc.includes(this.bu2Table.search) ||
x.edesc.toLowerCase().includes(this.bu2Table.search)) x.edesc.includes(this.bu2Table.search))
} }
selectBu2(bu2?: Bu2Model) { selectBu2(bu2?: Bu2Model) {
this.bu2 = new MyBu2Model(bu2 || {}) this.bu2 = new MyBu2Model(bu2 || {})
...@@ -78,25 +79,12 @@ export class DepartmentListComponent implements OnInit { ...@@ -78,25 +79,12 @@ export class DepartmentListComponent implements OnInit {
this.bu2Modal.page = Array.from({ length: Math.ceil(this.filterBu2Modal().length / 10) }, (_, i) => i + 1); this.bu2Modal.page = Array.from({ length: Math.ceil(this.filterBu2Modal().length / 10) }, (_, i) => i + 1);
} }
filterBu2Modal() { filterBu2Modal() {
return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search) || return this.bu2List.filter(x => x.bu2id.includes(this.bu2Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu2Modal.search) || x.tdesc.includes(this.bu2Modal.search) ||
x.edesc.toLowerCase().includes(this.bu2Modal.search)) x.edesc.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()
// }
// })
} }
getBu1List() { getBu1List() {
this.bu1Service.getList().subscribe(response => { this.bu1Service.getList().subscribe(response => {
this.bu1List = response this.bu1List = response
...@@ -112,9 +100,9 @@ export class DepartmentListComponent implements OnInit { ...@@ -112,9 +100,9 @@ export class DepartmentListComponent implements OnInit {
this.selectBu1(bu1 || new MyBu1Model({ bu1id: this.bu1.bu1id })) this.selectBu1(bu1 || new MyBu1Model({ bu1id: this.bu1.bu1id }))
} }
filterBu1Modal() { filterBu1Modal() {
return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.bu1Modal.search) || return this.bu1List.filter(x => x.bu1id.includes(this.bu1Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu1Modal.search) || x.tdesc.includes(this.bu1Modal.search) ||
x.edesc.toLowerCase().includes(this.bu1Modal.search)) x.edesc.includes(this.bu1Modal.search))
} }
selectBu1(bu1?: Bu1Model) { selectBu1(bu1?: Bu1Model) {
this.bu1 = new MyBu1Model(bu1 || {}) this.bu1 = new MyBu1Model(bu1 || {})
...@@ -126,17 +114,33 @@ export class DepartmentListComponent implements OnInit { ...@@ -126,17 +114,33 @@ export class DepartmentListComponent implements OnInit {
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); });
} }
showSuccessEdit() { showSuccessDelete() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); });
} }
showSuccessDelete() { showSuccessEdit() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', 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 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <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> <i class="ri-add-line"></i>
Add Add
</button> </button>
...@@ -63,14 +63,24 @@ ...@@ -63,14 +63,24 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </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> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="bu1ListFilter().length"> <tbody *ngIf="!bu1ListLoading&&bu1ListFilter().length">
<tr <tr
*ngFor="let item of bu1ListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *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> <td class="text-center">{{((currentPage-1) * 10)+(i+1)}}</td>
...@@ -80,7 +90,8 @@ ...@@ -80,7 +90,8 @@
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectBu1(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectBu1(item)"
data-hs-overlay="#department-register-modal-edit"></i> 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> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -176,10 +187,10 @@ ...@@ -176,10 +187,10 @@
data-hs-overlay="#department-register-modal-add"> data-hs-overlay="#department-register-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </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"> data-hs-overlay="#department-register-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </button>
</div> </div>
</div> </div>
</div> </div>
...@@ -239,13 +250,13 @@ ...@@ -239,13 +250,13 @@
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#department-register-modal-edit" data-hs-overlay-close> data-hs-overlay="#department-register-modal-edit">
ย้อนกลับ ย้อนกลับ
</button> </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" data-hs-overlay-close> data-hs-overlay="#department-register-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </button>
</div> </div>
</div> </div>
</div> </div>
...@@ -278,10 +289,46 @@ ...@@ -278,10 +289,46 @@
data-hs-overlay="#department-register-alert-modal"> data-hs-overlay="#department-register-alert-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <button type="button" class="ti-btn ti-btn-success" (click)="addBu1()"
data-hs-overlay="#department-register-alert-modal" (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> </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 { ToastrService } from 'ngx-toastr';
import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model'; import { Bu1Model, MyBu1Model } from 'src/app/shared/model/bu1.model';
import { Bu1Service } from 'src/app/shared/services/bu1.service'; import { Bu1Service } from 'src/app/shared/services/bu1.service';
...@@ -12,18 +12,28 @@ export class DepartmentRegisterComponent implements OnInit { ...@@ -12,18 +12,28 @@ export class DepartmentRegisterComponent implements OnInit {
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
bu1List: Bu1Model[] = [] bu1List: Bu1Model[] = []
bu1ListLoading = false
bu1: Bu1Model = new MyBu1Model({}) bu1: Bu1Model = new MyBu1Model({})
search = "" search = ""
constructor(private bu1Service: Bu1Service, constructor(private bu1Service: Bu1Service,
private toastr: ToastrService private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getBu1List() this.getBu1List()
} }
getBu1List() { getBu1List() {
this.bu1Service.getList().subscribe(response => { this.bu1ListLoading = true
this.bu1List = response this.bu1Service.getList().subscribe({
this.searchChange() next: response => {
this.bu1List = response
this.bu1ListLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.bu1ListLoading = false
this.cdr.detectChanges()
}
}) })
} }
searchChange() { searchChange() {
...@@ -31,34 +41,41 @@ export class DepartmentRegisterComponent implements OnInit { ...@@ -31,34 +41,41 @@ export class DepartmentRegisterComponent implements OnInit {
this.page = Array.from({ length: Math.ceil(this.bu1ListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.bu1ListFilter().length / 10) }, (_, i) => i + 1);
} }
bu1ListFilter() { bu1ListFilter() {
return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.search) || return this.bu1List.filter(x => x.bu1id.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectBu1(bu1: Bu1Model) { selectBu1(bu1?: Bu1Model) {
// this.showSuccess() this.bu1 = new MyBu1Model(bu1 || {})
this.bu1 = new MyBu1Model(bu1)
} }
showSuccess() { showSuccessAdd() {
this.toastr.success('This is an example of tip', 'TIP', { this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); });
} }
addBu1() { addBu1() {
// this.bu1Service.post(this.bu1).subscribe((response:any) => { this.bu1Service.post(this.bu1).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getBu1List() this.showSuccessAdd()
// } this.getBu1List()
// }) }
})
} }
deleteBu1(bu1: Bu1Model) { deleteBu1() {
// this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => { this.bu1Service.delete(this.bu1).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getBu1List() this.showSuccessDelete()
// } this.getBu1List()
// }) }
})
} }
......
src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.html
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu3(item);currentModal='edit'" (click)="selectBu3(item);currentModal='edit'"
data-hs-overlay="#section-registration-modal-edit"></i> 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> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -575,7 +575,7 @@ ...@@ -575,7 +575,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -616,7 +616,7 @@ ...@@ -616,7 +616,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -657,7 +657,7 @@ ...@@ -657,7 +657,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </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 { ...@@ -48,6 +48,7 @@ export class SectionRegistrationComponent implements OnInit {
this.bu3Service.getList().subscribe(response => { this.bu3Service.getList().subscribe(response => {
this.bu3List = response this.bu3List = response
this.onBu3TableSearchChange() this.onBu3TableSearchChange()
this.cdr.detectChanges()
}) })
} }
onBu3TableSearchChange() { onBu3TableSearchChange() {
...@@ -55,9 +56,9 @@ export class SectionRegistrationComponent implements OnInit { ...@@ -55,9 +56,9 @@ export class SectionRegistrationComponent implements OnInit {
this.bu3Table.page = Array.from({ length: Math.ceil(this.filterBu3Table().length / 10) }, (_, i) => i + 1); this.bu3Table.page = Array.from({ length: Math.ceil(this.filterBu3Table().length / 10) }, (_, i) => i + 1);
} }
filterBu3Table() { filterBu3Table() {
return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Table.search) || return this.bu3List.filter(x => x.bu3id.includes(this.bu3Table.search) ||
x.tdesc.toLowerCase().includes(this.bu3Table.search) || x.tdesc.includes(this.bu3Table.search) ||
x.edesc.toLowerCase().includes(this.bu3Table.search)) x.edesc.includes(this.bu3Table.search))
} }
selectBu3(bu3?: Bu3Model) { selectBu3(bu3?: Bu3Model) {
this.bu3 = new MyBu3Model(bu3 || {}) this.bu3 = new MyBu3Model(bu3 || {})
...@@ -78,23 +79,25 @@ export class SectionRegistrationComponent implements OnInit { ...@@ -78,23 +79,25 @@ export class SectionRegistrationComponent implements OnInit {
this.bu3Modal.page = Array.from({ length: Math.ceil(this.filterBu3Modal().length / 10) }, (_, i) => i + 1); this.bu3Modal.page = Array.from({ length: Math.ceil(this.filterBu3Modal().length / 10) }, (_, i) => i + 1);
} }
filterBu3Modal() { filterBu3Modal() {
return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Modal.search) || return this.bu3List.filter(x => x.bu3id.includes(this.bu3Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu3Modal.search) || x.tdesc.includes(this.bu3Modal.search) ||
x.edesc.toLowerCase().includes(this.bu3Modal.search)) x.edesc.includes(this.bu3Modal.search))
} }
addBu3() { addBu3() {
// this.bu3Service.post(this.bu3).subscribe((response:any) => { this.bu3Service.post({ ...this.bu3, parent: this.bu2.bu2id }).subscribe((response:any) => {
// if (response.success) { if (response.success) {
// this.getBu3List() this.getBu3List()
// } this.showSuccess()
// }) }
} })
deleteBu3(bu3: Bu3Model) { }
// this.bu3Service.delete(new MyBu3Model(bu3)).subscribe((response:any) => { deleteBu3() {
// if (response.success) { this.bu3Service.delete(this.bu3).subscribe((response:any) => {
// this.getBu3List() if (response.success) {
// } this.getBu3List()
// }) this.showSuccessDelete()
}
})
} }
getBu2List() { getBu2List() {
...@@ -112,9 +115,9 @@ export class SectionRegistrationComponent implements OnInit { ...@@ -112,9 +115,9 @@ export class SectionRegistrationComponent implements OnInit {
this.selectBu2(bu2 || new MyBu2Model({ bu2id: this.bu2.bu2id })) this.selectBu2(bu2 || new MyBu2Model({ bu2id: this.bu2.bu2id }))
} }
filterBu2Modal() { filterBu2Modal() {
return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search) || return this.bu2List.filter(x => x.bu2id.includes(this.bu2Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu2Modal.search) || x.tdesc.includes(this.bu2Modal.search) ||
x.edesc.toLowerCase().includes(this.bu2Modal.search)) x.edesc.includes(this.bu2Modal.search))
} }
selectBu2(bu2?: Bu2Model) { selectBu2(bu2?: Bu2Model) {
this.bu2 = new MyBu2Model(bu2 || {}) 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 @@ ...@@ -84,7 +84,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu7(item);currentModal='edit'" (click)="selectBu7(item);currentModal='edit'"
data-hs-overlay="#sub-department-four-modal-edit"></i> 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> data-hs-overlay="#sub-department-four-alert-delete-modal"></i>
</td> </td>
</tr> </tr>
...@@ -575,7 +575,7 @@ ...@@ -575,7 +575,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -616,7 +616,7 @@ ...@@ -616,7 +616,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -652,7 +652,7 @@ ...@@ -652,7 +652,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </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 { ToastrService } from 'ngx-toastr';
import { Bu6Model, MyBu6Model } from 'src/app/shared/model/bu6.model'; import { Bu6Model, MyBu6Model } from 'src/app/shared/model/bu6.model';
import { Bu7Model, MyBu7Model } from 'src/app/shared/model/bu7.model'; import { Bu7Model, MyBu7Model } from 'src/app/shared/model/bu7.model';
...@@ -49,6 +49,7 @@ export class SubDepartmentFourComponent implements OnInit { ...@@ -49,6 +49,7 @@ export class SubDepartmentFourComponent implements OnInit {
this.bu7Service.getList().subscribe(response => { this.bu7Service.getList().subscribe(response => {
this.bu7List = response this.bu7List = response
this.onBu7TableSearchChange() this.onBu7TableSearchChange()
this.cdr.detectChanges()
}) })
} }
onBu7TableSearchChange() { onBu7TableSearchChange() {
...@@ -56,9 +57,9 @@ export class SubDepartmentFourComponent implements OnInit { ...@@ -56,9 +57,9 @@ export class SubDepartmentFourComponent implements OnInit {
this.bu7Table.page = Array.from({ length: Math.ceil(this.filterBu7Table().length / 10) }, (_, i) => i + 1); this.bu7Table.page = Array.from({ length: Math.ceil(this.filterBu7Table().length / 10) }, (_, i) => i + 1);
} }
filterBu7Table() { filterBu7Table() {
return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Table.search) || return this.bu7List.filter(x => x.bu7id.includes(this.bu7Table.search) ||
x.tdesc.toLowerCase().includes(this.bu7Table.search) || x.tdesc.includes(this.bu7Table.search) ||
x.edesc.toLowerCase().includes(this.bu7Table.search)) x.edesc.includes(this.bu7Table.search))
} }
selectBu7(bu7?: Bu7Model) { selectBu7(bu7?: Bu7Model) {
this.bu7 = new MyBu7Model(bu7 || {}) this.bu7 = new MyBu7Model(bu7 || {})
...@@ -79,23 +80,25 @@ export class SubDepartmentFourComponent implements OnInit { ...@@ -79,23 +80,25 @@ export class SubDepartmentFourComponent implements OnInit {
this.bu7Modal.page = Array.from({ length: Math.ceil(this.filterBu7Modal().length / 10) }, (_, i) => i + 1); this.bu7Modal.page = Array.from({ length: Math.ceil(this.filterBu7Modal().length / 10) }, (_, i) => i + 1);
} }
filterBu7Modal() { filterBu7Modal() {
return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Modal.search) || return this.bu7List.filter(x => x.bu7id.includes(this.bu7Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu7Modal.search) || x.tdesc.includes(this.bu7Modal.search) ||
x.edesc.toLowerCase().includes(this.bu7Modal.search)) x.edesc.includes(this.bu7Modal.search))
} }
addBu7() { addBu7() {
// this.bu7Service.post(this.bu7).subscribe((response:any) => { this.bu7Service.post({ ...this.bu7, parent: this.bu6.bu6id }).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getBu7List() this.getBu7List()
// } this.showSuccessAdd()
// }) }
} })
deleteBu7(bu7: Bu7Model) { }
// this.bu7Service.delete(new MyBu7Model(bu7)).subscribe((response:any) => { deleteBu7() {
// if (response.success) { this.bu7Service.delete(this.bu7).subscribe((response: any) => {
// this.getBu7List() if (response.success) {
// } this.getBu7List()
// }) this.showSuccessDelete()
}
})
} }
getBu6List() { getBu6List() {
...@@ -113,9 +116,9 @@ export class SubDepartmentFourComponent implements OnInit { ...@@ -113,9 +116,9 @@ export class SubDepartmentFourComponent implements OnInit {
this.selectBu6(bu6 || new MyBu6Model({ bu6id: this.bu6.bu6id })) this.selectBu6(bu6 || new MyBu6Model({ bu6id: this.bu6.bu6id }))
} }
filterBu6Modal() { filterBu6Modal() {
return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search) || return this.bu6List.filter(x => x.bu6id.includes(this.bu6Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu6Modal.search) || x.tdesc.includes(this.bu6Modal.search) ||
x.edesc.toLowerCase().includes(this.bu6Modal.search)) x.edesc.includes(this.bu6Modal.search))
} }
selectBu6(bu6?: Bu6Model) { selectBu6(bu6?: Bu6Model) {
this.bu6 = new MyBu6Model(bu6 || {}) 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 @@ ...@@ -12,22 +12,23 @@
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <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" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="bu4Table.search" (ngModelChange)="onBu4TableSearchChange()"> [(ngModel)]="bu4Table.search" (ngModelChange)="onBu4TableSearchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> 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> <i class="ri-search-line text-gray"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <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> <i class="ri-add-line"></i>
Add Add
</button> </button>
...@@ -44,84 +45,87 @@ ...@@ -44,84 +45,87 @@
Help Help
</button> </button>
</div> </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"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <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>
<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"> *ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่1','รายละเอียดส่วนย่อยที่1 (ไทย)','รายละเอียดส่วนย่อยที่1 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
</a> <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> </ng-container>
</li> </tr>
<li> </thead>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <tbody *ngIf="!filterBu4Table().length">
(click)="bu4Table.currentPage = (bu4Table.currentPage > bu4Table.page.length-1 ? bu4Table.currentPage: bu4Table.currentPage+1 )"> <tr>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> <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> </a>
</li> </ng-container>
</ul> </li>
</nav> <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> </div>
...@@ -173,13 +177,17 @@ ...@@ -173,13 +177,17 @@
<label class="ti-form-label">อยู่ภายใต้หน่วยงาน</label> <label class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
<div class="flex"> <div class="flex">
<div class="relative flex rounded-md"> <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;" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
[(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()"> name="hs-leading-button-add-on-with-icon-and-button"
<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"> class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
<button type="button" class="flex items-center text-red-500" (click)="selectBu3()"> 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> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </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> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -191,13 +199,17 @@ ...@@ -191,13 +199,17 @@
</div> </div>
<label class="ti-form-label mt-2rem">ส่วนย่อย1</label> <label class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="relative flex rounded-md w-1/2"> <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;" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
[(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()"> name="hs-leading-button-add-on-with-icon-and-button"
<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"> class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()"> 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> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </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> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -266,26 +278,29 @@ ...@@ -266,26 +278,29 @@
</div> </div>
</div> </div>
<div class="ti-modal-body"> <div class="ti-modal-body">
<label for="hs-trailing-button-add-on-with-icon" <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label ">อยู่ภายใต้หน่วยงาน</label>
class="ti-form-label ">อยู่ภายใต้หน่วยงาน</label> <div class="flex">
<div class="flex"> <div class="relative flex rounded-md">
<div class="relative flex rounded-md"> <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
<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;" name="hs-leading-button-add-on-with-icon-and-button"
[(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()"> class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
<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"> style="padding-right: 3.5rem;" [(ngModel)]="bu3.bu3id" (ngModelChange)="bu3idChange()">
<button type="button" class="flex items-center text-red-500" (click)="selectBu3()"> <div
<i class="ti ti-circle-x cursor-pointer"></i> 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> <button type="button" class="flex items-center text-red-500" (click)="selectBu3()">
<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="ti ti-circle-x cursor-pointer"></i>
<i class="ri-search-line cursor-pointer text-gray"></i> </button>
</button> <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
</div> data-hs-overlay="#sub-department-one-bu3-table-modal">
</div> <i class="ri-search-line cursor-pointer text-gray"></i>
<div class="flex rounded-md w-1/2 pl-1rem"> </button>
<input type="text" id="input-label" class="ti-form-input w-full pr-10 bg-input-readonly"
readonly [value]="bu3.tdesc">
</div> </div>
</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> <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="sm:grid grid-cols-2 gap-1"> <div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full"> <div class="relative w-full">
...@@ -575,7 +590,7 @@ ...@@ -575,7 +590,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -616,7 +631,7 @@ ...@@ -616,7 +631,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -657,7 +672,7 @@ ...@@ -657,7 +672,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </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 { ...@@ -48,6 +48,7 @@ export class SubDepartmentOneComponent implements OnInit {
this.bu4Service.getList().subscribe(response => { this.bu4Service.getList().subscribe(response => {
this.bu4List = response this.bu4List = response
this.onBu4TableSearchChange() this.onBu4TableSearchChange()
this.cdr.detectChanges()
}) })
} }
onBu4TableSearchChange() { onBu4TableSearchChange() {
...@@ -55,9 +56,9 @@ export class SubDepartmentOneComponent implements OnInit { ...@@ -55,9 +56,9 @@ export class SubDepartmentOneComponent implements OnInit {
this.bu4Table.page = Array.from({ length: Math.ceil(this.filterBu4Table().length / 10) }, (_, i) => i + 1); this.bu4Table.page = Array.from({ length: Math.ceil(this.filterBu4Table().length / 10) }, (_, i) => i + 1);
} }
filterBu4Table() { filterBu4Table() {
return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Table.search) || return this.bu4List.filter(x => x.bu4id.includes(this.bu4Table.search) ||
x.tdesc.toLowerCase().includes(this.bu4Table.search) || x.tdesc.includes(this.bu4Table.search) ||
x.edesc.toLowerCase().includes(this.bu4Table.search)) x.edesc.includes(this.bu4Table.search))
} }
selectBu4(bu4?: Bu4Model) { selectBu4(bu4?: Bu4Model) {
this.bu4 = new MyBu4Model(bu4 || {}) this.bu4 = new MyBu4Model(bu4 || {})
...@@ -78,23 +79,25 @@ export class SubDepartmentOneComponent implements OnInit { ...@@ -78,23 +79,25 @@ export class SubDepartmentOneComponent implements OnInit {
this.bu4Modal.page = Array.from({ length: Math.ceil(this.filterBu4Modal().length / 10) }, (_, i) => i + 1); this.bu4Modal.page = Array.from({ length: Math.ceil(this.filterBu4Modal().length / 10) }, (_, i) => i + 1);
} }
filterBu4Modal() { filterBu4Modal() {
return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Modal.search) || return this.bu4List.filter(x => x.bu4id.includes(this.bu4Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu4Modal.search) || x.tdesc.includes(this.bu4Modal.search) ||
x.edesc.toLowerCase().includes(this.bu4Modal.search)) x.edesc.includes(this.bu4Modal.search))
} }
addBu4() { addBu4() {
// this.bu4Service.post(this.bu4).subscribe((response:any) => { this.bu4Service.post({ ...this.bu4, parent: this.bu3.bu3id }).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getBu4List() this.getBu4List()
// } this.showSuccess()
// }) }
} })
deleteBu4(bu4: Bu4Model) { }
// this.bu4Service.delete(new MyBu4Model(bu4)).subscribe((response:any) => { deleteBu4() {
// if (response.success) { this.bu4Service.delete(this.bu4).subscribe((response: any) => {
// this.getBu4List() if (response.success) {
// } this.getBu4List()
// }) this.showSuccessDelete()
}
})
} }
getBu3List() { getBu3List() {
...@@ -112,9 +115,9 @@ export class SubDepartmentOneComponent implements OnInit { ...@@ -112,9 +115,9 @@ export class SubDepartmentOneComponent implements OnInit {
this.selectBu3(bu3 || new MyBu3Model({ bu3id: this.bu3.bu3id })) this.selectBu3(bu3 || new MyBu3Model({ bu3id: this.bu3.bu3id }))
} }
filterBu3Modal() { filterBu3Modal() {
return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Modal.search) || return this.bu3List.filter(x => x.bu3id.includes(this.bu3Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu3Modal.search) || x.tdesc.includes(this.bu3Modal.search) ||
x.edesc.toLowerCase().includes(this.bu3Modal.search)) x.edesc.includes(this.bu3Modal.search))
} }
selectBu3(bu3?: Bu3Model) { selectBu3(bu3?: Bu3Model) {
this.bu3 = new MyBu3Model(bu3 || {}) 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 @@ ...@@ -84,7 +84,7 @@
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectBu6(item);currentModal='edit'" (click)="selectBu6(item);currentModal='edit'"
data-hs-overlay="#sub-department-three-modal-edit"></i> 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> data-hs-overlay="#sub-department-three-alert-delete-modal"></i>
</td> </td>
</tr> </tr>
...@@ -575,7 +575,7 @@ ...@@ -575,7 +575,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -616,7 +616,7 @@ ...@@ -616,7 +616,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -652,7 +652,7 @@ ...@@ -652,7 +652,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </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 { ...@@ -49,6 +49,7 @@ export class SubDepartmentThreeComponent implements OnInit {
this.bu6Service.getList().subscribe(response => { this.bu6Service.getList().subscribe(response => {
this.bu6List = response this.bu6List = response
this.onBu6TableSearchChange() this.onBu6TableSearchChange()
this.cdr.detectChanges()
}) })
} }
onBu6TableSearchChange() { onBu6TableSearchChange() {
...@@ -56,9 +57,9 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -56,9 +57,9 @@ export class SubDepartmentThreeComponent implements OnInit {
this.bu6Table.page = Array.from({ length: Math.ceil(this.filterBu6Table().length / 10) }, (_, i) => i + 1); this.bu6Table.page = Array.from({ length: Math.ceil(this.filterBu6Table().length / 10) }, (_, i) => i + 1);
} }
filterBu6Table() { filterBu6Table() {
return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Table.search) || return this.bu6List.filter(x => x.bu6id.includes(this.bu6Table.search) ||
x.tdesc.toLowerCase().includes(this.bu6Table.search) || x.tdesc.includes(this.bu6Table.search) ||
x.edesc.toLowerCase().includes(this.bu6Table.search)) x.edesc.includes(this.bu6Table.search))
} }
selectBu6(bu6?: Bu6Model) { selectBu6(bu6?: Bu6Model) {
this.bu6 = new MyBu6Model(bu6 || {}) this.bu6 = new MyBu6Model(bu6 || {})
...@@ -79,23 +80,25 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -79,23 +80,25 @@ export class SubDepartmentThreeComponent implements OnInit {
this.bu6Modal.page = Array.from({ length: Math.ceil(this.filterBu6Modal().length / 10) }, (_, i) => i + 1); this.bu6Modal.page = Array.from({ length: Math.ceil(this.filterBu6Modal().length / 10) }, (_, i) => i + 1);
} }
filterBu6Modal() { filterBu6Modal() {
return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search) || return this.bu6List.filter(x => x.bu6id.includes(this.bu6Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu6Modal.search) || x.tdesc.includes(this.bu6Modal.search) ||
x.edesc.toLowerCase().includes(this.bu6Modal.search)) x.edesc.includes(this.bu6Modal.search))
} }
addBu6() { addBu6() {
// this.bu6Service.post(this.bu6).subscribe((response:any) => { this.bu6Service.post({ ...this.bu6, parent: this.bu5.bu5id }).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getBu6List() this.getBu6List()
// } this.showSuccessAdd()
// }) }
} })
deleteBu6(bu6: Bu6Model) { }
// this.bu6Service.delete(new MyBu6Model(bu6)).subscribe((response:any) => { deleteBu6() {
// if (response.success) { this.bu6Service.delete(this.bu6).subscribe((response: any) => {
// this.getBu6List() if (response.success) {
// } this.getBu6List()
// }) this.showSuccessDelete()
}
})
} }
getBu5List() { getBu5List() {
...@@ -113,9 +116,9 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -113,9 +116,9 @@ export class SubDepartmentThreeComponent implements OnInit {
this.selectBu5(bu5 || new MyBu5Model({ bu5id: this.bu5.bu5id })) this.selectBu5(bu5 || new MyBu5Model({ bu5id: this.bu5.bu5id }))
} }
filterBu5Modal() { filterBu5Modal() {
return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search) || return this.bu5List.filter(x => x.bu5id.includes(this.bu5Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu5Modal.search) || x.tdesc.includes(this.bu5Modal.search) ||
x.edesc.toLowerCase().includes(this.bu5Modal.search)) x.edesc.includes(this.bu5Modal.search))
} }
selectBu5(bu5?: Bu5Model) { selectBu5(bu5?: Bu5Model) {
this.bu5 = new MyBu5Model(bu5 || {}) 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 @@ ...@@ -12,22 +12,23 @@
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <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" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="bu5Table.search" (ngModelChange)="onBu5TableSearchChange()"> [(ngModel)]="bu5Table.search" (ngModelChange)="onBu5TableSearchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> 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> <i class="ri-search-line text-gray"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <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> <i class="ri-add-line"></i>
Add Add
</button> </button>
...@@ -44,84 +45,86 @@ ...@@ -44,84 +45,86 @@
Help Help
</button> </button>
</div> </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"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <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>
<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"> *ngFor="let item of ['ลำดับ','รหัสส่วนย่อยที่2','รายละเอียดส่วนย่อยที่2 (ไทย)','รายละเอียดส่วนย่อยที่2 (อังกฤษ)','การจัดการ']; let f = first; let l = last">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
</a> <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> </ng-container>
</li> </tr>
<li> </thead>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <tbody *ngIf="!filterBu5Table().length">
(click)="bu5Table.currentPage = (bu5Table.currentPage > bu5Table.page.length-1 ? bu5Table.currentPage: bu5Table.currentPage+1 )"> <tr>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> <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> </a>
</li> </ng-container>
</ul> </li>
</nav> <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> </div>
...@@ -172,13 +175,17 @@ ...@@ -172,13 +175,17 @@
<label class="ti-form-label">อยู่ภายใต้หน่วยงาน</label> <label class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
<div class="flex"> <div class="flex">
<div class="relative flex rounded-md"> <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;" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
[(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()"> name="hs-leading-button-add-on-with-icon-and-button"
<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"> class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()"> 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> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </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> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -190,13 +197,17 @@ ...@@ -190,13 +197,17 @@
</div> </div>
<label class="ti-form-label mt-2rem">ส่วนย่อย2</label> <label class="ti-form-label mt-2rem">ส่วนย่อย2</label>
<div class="relative flex rounded-md w-1/2"> <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;" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
[(ngModel)]="bu5.bu5id" (ngModelChange)="bu5idChange()"> name="hs-leading-button-add-on-with-icon-and-button"
<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"> class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
<button type="button" class="flex items-center text-red-500" (click)="selectBu5()"> 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> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </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> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -240,7 +251,7 @@ ...@@ -240,7 +251,7 @@
<div class="flex justify-end" style="padding-right: 1rem;"> <div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" <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" <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" 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)"> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
...@@ -265,17 +276,20 @@ ...@@ -265,17 +276,20 @@
</div> </div>
</div> </div>
<div class="ti-modal-body"> <div class="ti-modal-body">
<label for="hs-trailing-button-add-on-with-icon" <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
class="ti-form-label">อยู่ภายใต้หน่วยงาน</label>
<div class="flex"> <div class="flex">
<div class="relative flex rounded-md"> <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;" <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
[(ngModel)]="bu4.bu4id" (ngModelChange)="bu4idChange()"> name="hs-leading-button-add-on-with-icon-and-button"
<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"> class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10"
<button type="button" class="flex items-center text-red-500" (click)="selectBu4()"> 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> <i class="ti ti-circle-x cursor-pointer"></i>
</button> </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> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
...@@ -613,7 +627,7 @@ ...@@ -613,7 +627,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -649,7 +663,7 @@ ...@@ -649,7 +663,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </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 { ...@@ -48,6 +48,7 @@ export class SubDepartmentTwoComponent implements OnInit {
this.bu5Service.getList().subscribe(response => { this.bu5Service.getList().subscribe(response => {
this.bu5List = response this.bu5List = response
this.onBu5TableSearchChange() this.onBu5TableSearchChange()
this.cdr.detectChanges()
}) })
} }
onBu5TableSearchChange() { onBu5TableSearchChange() {
...@@ -55,9 +56,9 @@ export class SubDepartmentTwoComponent implements OnInit { ...@@ -55,9 +56,9 @@ export class SubDepartmentTwoComponent implements OnInit {
this.bu5Table.page = Array.from({ length: Math.ceil(this.filterBu5Table().length / 10) }, (_, i) => i + 1); this.bu5Table.page = Array.from({ length: Math.ceil(this.filterBu5Table().length / 10) }, (_, i) => i + 1);
} }
filterBu5Table() { filterBu5Table() {
return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Table.search) || return this.bu5List.filter(x => x.bu5id.includes(this.bu5Table.search) ||
x.tdesc.toLowerCase().includes(this.bu5Table.search) || x.tdesc.includes(this.bu5Table.search) ||
x.edesc.toLowerCase().includes(this.bu5Table.search)) x.edesc.includes(this.bu5Table.search))
} }
selectBu5(bu5?: Bu5Model) { selectBu5(bu5?: Bu5Model) {
this.bu5 = new MyBu5Model(bu5 || {}) this.bu5 = new MyBu5Model(bu5 || {})
...@@ -78,23 +79,25 @@ export class SubDepartmentTwoComponent implements OnInit { ...@@ -78,23 +79,25 @@ export class SubDepartmentTwoComponent implements OnInit {
this.bu5Modal.page = Array.from({ length: Math.ceil(this.filterBu5Modal().length / 10) }, (_, i) => i + 1); this.bu5Modal.page = Array.from({ length: Math.ceil(this.filterBu5Modal().length / 10) }, (_, i) => i + 1);
} }
filterBu5Modal() { filterBu5Modal() {
return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search) || return this.bu5List.filter(x => x.bu5id.includes(this.bu5Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu5Modal.search) || x.tdesc.includes(this.bu5Modal.search) ||
x.edesc.toLowerCase().includes(this.bu5Modal.search)) x.edesc.includes(this.bu5Modal.search))
} }
addBu5() { addBu5() {
// this.bu5Service.post(this.bu5).subscribe((response:any) => { this.bu5Service.post({ ...this.bu5, parent: this.bu4.bu4id }).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getBu5List() this.getBu5List()
// } this.showSuccessAdd()
// }) }
} })
deleteBu5(bu5: Bu5Model) { }
// this.bu5Service.delete(new MyBu5Model(bu5)).subscribe((response:any) => { deleteBu5() {
// if (response.success) { this.bu5Service.delete(this.bu5).subscribe((response: any) => {
// this.getBu5List() if (response.success) {
// } this.getBu5List()
// }) this.showSuccessDelete()
}
})
} }
getBu4List() { getBu4List() {
...@@ -112,9 +115,9 @@ export class SubDepartmentTwoComponent implements OnInit { ...@@ -112,9 +115,9 @@ export class SubDepartmentTwoComponent implements OnInit {
this.selectBu4(bu4 || new MyBu4Model({ bu4id: this.bu4.bu4id })) this.selectBu4(bu4 || new MyBu4Model({ bu4id: this.bu4.bu4id }))
} }
filterBu4Modal() { filterBu4Modal() {
return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Modal.search) || return this.bu4List.filter(x => x.bu4id.includes(this.bu4Modal.search) ||
x.tdesc.toLowerCase().includes(this.bu4Modal.search) || x.tdesc.includes(this.bu4Modal.search) ||
x.edesc.toLowerCase().includes(this.bu4Modal.search)) x.edesc.includes(this.bu4Modal.search))
} }
selectBu4(bu4?: Bu4Model) { selectBu4(bu4?: Bu4Model) {
this.bu4 = new MyBu4Model(bu4 || {}) this.bu4 = new MyBu4Model(bu4 || {})
......
src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html
...@@ -66,18 +66,29 @@ ...@@ -66,18 +66,29 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </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> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="dataListFilter().length"> <tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr <tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <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> <label for="checkbox-{{item.data.code}}">&nbsp;{{item.data.code}}</label>
</td> </td>
<td>{{item.data.tdesc}}</td> <td>{{item.data.tdesc}}</td>
...@@ -248,7 +259,7 @@ ...@@ -248,7 +259,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</ng-container> </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 { 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 { export interface DataModel {
code: string code: string
tdesc: string tdesc: string
...@@ -17,13 +19,32 @@ export class CompanyRegistrationPageComponent { ...@@ -17,13 +19,32 @@ export class CompanyRegistrationPageComponent {
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
search = "" search = ""
modalStatus = 'add' modalStatus = 'add'
dataList: { check: boolean, data: DataModel }[] = [ dataList: { check: boolean, data: DataModel }[] = []
{ check: false, data: { code: "CC-01", tdesc: "บริษัท มายเอชอาร์ จำกัด", edesc: "MYHR COMPANY LIMITED", address: "1", contact: "2" } }, dataLoading = false
]
dataSelect: DataModel = { code: "", tdesc: "", edesc: "", address: "", contact: "" } dataSelect: DataModel = { code: "", tdesc: "", edesc: "", address: "", contact: "" }
constructor(private toastr: ToastrService) { constructor(private toastr: ToastrService,
this.searchChange() 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() { searchChange() {
...@@ -40,4 +61,22 @@ export class CompanyRegistrationPageComponent { ...@@ -40,4 +61,22 @@ export class CompanyRegistrationPageComponent {
setData(data?: DataModel) { setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", address: "", contact: "" })); 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 @@ ...@@ -13,118 +13,124 @@
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <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;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> 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> <i class="ri-search-line text-gray"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-categories-modal-add"> data-hs-overlay="#employee-categories-modal-add" (click)="selectEmp_type()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md" <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>
<i class="ri-delete-bin-6-line"></i> Delete
Delete </button>
</button> <!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#employee-categories-alert-delete-modal">
<div class="px-1"> <i class="ri-delete-bin-6-line"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md"> Delete
<i class="ti ti-book fs-l"></i> </button> -->
Help </div>
</button> <div class="px-1">
</div> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
</div> <i class="ti ti-book fs-l"></i>
</div> Help
</div> </button>
</div>
</div>
</div>
</div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md"> <div class="overflow-auto table-bordered rounded-t-md">
<div class="overflow-auto shadow-md rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัสประเภทพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัสประเภทพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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> <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"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!emp_typeListFilter().length"> <tbody *ngIf="!emp_typeListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="emp_typeListFilter().length"> <tbody *ngIf="emp_typeListFilter().length">
<tr <tr
*ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of emp_typeListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.codeId}}" [(ngModel)]="item['selected']" (change)="onCheckboxChange(item)" > <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.codeId}}"
<label for="checkbox-{{item.codeId}}">&nbsp;{{item.codeId}}</label> [(ngModel)]="item['selected']" (change)="onCheckboxChange(item)">
</td> <label for="checkbox-{{item.codeId}}">&nbsp;{{item.codeId}}</label>
<td >{{item.tdesc}}</td> </td>
<td >{{item.edesc}}</td> <td>{{item.tdesc}}</td>
<td class="flex justify-center"> <td>{{item.edesc}}</td>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)" <td class="flex justify-center">
data-hs-overlay="#employee-categories-modal-edit"></i> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="openDeleteModal(item)" data-hs-overlay="#employee-categories-modal-edit"></i>
data-hs-overlay="#employee-categories-alert-delete-modal"></i> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectEmp_type(item)"
</td> data-hs-overlay="#employee-categories-alert-delete-modal"></i>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</div> </table>
</div> </div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length"> </div>
<ul class="ti-pagination"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<li> <ul class="ti-pagination">
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <li>
(click)="currentPage = (currentPage-1 || 1)"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> (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> </a>
</li> </ng-container>
<li *ngFor="let item of page;let f = first;let l = last"> <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3"> <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> (click)="currentPage=item">{{item}}
</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> </a>
</li> </ng-container>
</ul> <ng-container
</nav> *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> </div>
...@@ -171,12 +177,12 @@ ...@@ -171,12 +177,12 @@
</div> </div>
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน*</label> <label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" placeholder=""> <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> <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> <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"> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
...@@ -184,7 +190,7 @@ ...@@ -184,7 +190,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -237,7 +243,8 @@ ...@@ -237,7 +243,8 @@
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสประเภทพนักงาน</label> <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> <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"> <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> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
...@@ -249,7 +256,7 @@ ...@@ -249,7 +256,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -285,7 +292,7 @@ ...@@ -285,7 +292,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -321,7 +328,7 @@ ...@@ -321,7 +328,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -357,7 +364,7 @@ ...@@ -357,7 +364,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </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 { ToastrService } from 'ngx-toastr';
import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model'; import { EmpTypeModel, MyEmpTypeModel } from 'src/app/shared/model/employee-type.model';
import { EmpTypeService } from 'src/app/shared/services/employee-type.service'; import { EmpTypeService } from 'src/app/shared/services/employee-type.service';
...@@ -25,8 +25,9 @@ export class EmployeeCategories { ...@@ -25,8 +25,9 @@ export class EmployeeCategories {
emp_type: EmpTypeModel = new MyEmpTypeModel({}) emp_type: EmpTypeModel = new MyEmpTypeModel({})
search = "" search = ""
itemToDelete: EmpTypeModel | null = null; itemToDelete: EmpTypeModel | null = null;
constructor(private EmpTypeService: EmpTypeService, constructor(private empTypeService: EmpTypeService,
private toastr: ToastrService private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getEmpTypeList() this.getEmpTypeList()
...@@ -49,7 +50,7 @@ export class EmployeeCategories { ...@@ -49,7 +50,7 @@ export class EmployeeCategories {
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
}, },
"upload":{ "upload": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
...@@ -76,9 +77,10 @@ export class EmployeeCategories { ...@@ -76,9 +77,10 @@ export class EmployeeCategories {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
} }
getEmpTypeList() { getEmpTypeList() {
this.EmpTypeService.getList().subscribe(response => { this.empTypeService.getList().subscribe(response => {
this.emp_typeList = response this.emp_typeList = response.map(x => new MyEmpTypeModel(x))
this.searchChange() this.searchChange()
this.cdr.detectChanges()
}) })
} }
searchChange() { searchChange() {
...@@ -86,28 +88,30 @@ export class EmployeeCategories { ...@@ -86,28 +88,30 @@ export class EmployeeCategories {
this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.emp_typeListFilter().length / 10) }, (_, i) => i + 1);
} }
emp_typeListFilter() { emp_typeListFilter() {
return this.emp_typeList.filter(x => return this.emp_typeList.filter(x =>
x.codeId.toLowerCase().includes(this.search) || x.codeId.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectEmp_type(emp_type: EmpTypeModel) { selectEmp_type(emp_type?: EmpTypeModel) {
// this.showSuccess() // this.showSuccess()
this.emp_type = new MyEmpTypeModel(emp_type) this.emp_type = new MyEmpTypeModel(emp_type || {})
} }
addEmp_type() { addEmp_type() {
// this.emp_typeService.post(this.emp_type).subscribe((response:any) => { this.empTypeService.post(this.emp_type).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getemp_typeList() this.getEmpTypeList()
// } this.showSuccessAdd()
// }) }
} })
deleteEmp_type(emp_type: EmpTypeModel) { }
// this.emp_typeService.delete(new MyEmpTypeModel(emp_type)).subscribe((response:any) => { deleteEmp_type() {
// if (response.success) { this.empTypeService.delete(this.emp_type).subscribe((response: any) => {
// this.getemp_typeList() 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 @@ ...@@ -13,115 +13,119 @@
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <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;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> 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> <i class="ri-search-line text-gray"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#employee-group-unit-component-modal-add"> data-hs-overlay="#employee-group-unit-component-modal-add" (click)="selectEmp_group()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md" <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>
<i class="ri-delete-bin-6-line"></i> Delete
Delete </button>
</button> <!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#employee-group-unit-component-alert-delete-modal">
<div class="px-1"> <i class="ri-delete-bin-6-line"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md"> Delete
<i class="ti ti-book fs-l"></i> </button> -->
Help </div>
</button> <div class="px-1">
</div> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
</div> <i class="ti ti-book fs-l"></i>
</div> Help
</div> </button>
<div class="page px-rem"> </div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <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>
<ng-container <ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2"> *ngFor="let item of ['รหัสกลุ่มพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
</a> <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> </ng-container>
</li> </tr>
<li> </thead>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <tbody *ngIf="!emp_groupListFilter().length">
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )"> <tr>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> <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> </a>
</li> </ng-container>
</ul> <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
</nav> <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> </div>
...@@ -169,12 +173,12 @@ ...@@ -169,12 +173,12 @@
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<label for="input-label" class="ti-form-label mt-2rem">รหัสกลุ่มพนักงาน *</label> <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=""> <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> <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> <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"> <div class="flex justify-end mt-2rem mb-1rem space-x-2">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
...@@ -182,7 +186,7 @@ ...@@ -182,7 +186,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -235,7 +239,8 @@ ...@@ -235,7 +239,8 @@
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<label for="input-label" class="ti-form-label mt-2rem">รหัสกลุ่มพนักงาน</label> <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> <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"> <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> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
...@@ -247,7 +252,7 @@ ...@@ -247,7 +252,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -312,7 +317,7 @@ ...@@ -312,7 +317,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -348,7 +353,7 @@ ...@@ -348,7 +353,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -384,11 +389,11 @@ ...@@ -384,11 +389,11 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
</div> </div>
</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 { ToastrService } from 'ngx-toastr';
import { EmpGroupModel, MyEmpGroupModel } from 'src/app/shared/model/emp_group.model'; import { EmpGroupModel, MyEmpGroupModel } from 'src/app/shared/model/emp_group.model';
import { EmpGroupService } from 'src/app/shared/services/emp_group.service'; import { EmpGroupService } from 'src/app/shared/services/emp_group.service';
...@@ -17,10 +17,11 @@ export class EmployeeGroupUnit implements OnInit { ...@@ -17,10 +17,11 @@ export class EmployeeGroupUnit implements OnInit {
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
emp_groupList: EmpGroupModel[] = [] emp_groupList: EmpGroupModel[] = []
emp_group: EmpGroupModel = new MyEmpGroupModel({}) emp_group: EmpGroupModel = new MyEmpGroupModel({})
search = "" search = ""
constructor(private EmpGroupService: EmpGroupService, constructor(private empGroupService: EmpGroupService,
private toastr: ToastrService private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { } ) { }
// ฟังก์ชันในการเปลี่ยนแท็บ // ฟังก์ชันในการเปลี่ยนแท็บ
...@@ -52,7 +53,7 @@ export class EmployeeGroupUnit implements OnInit { ...@@ -52,7 +53,7 @@ export class EmployeeGroupUnit implements OnInit {
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
}, },
"upload":{ "upload": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
...@@ -79,9 +80,10 @@ export class EmployeeGroupUnit implements OnInit { ...@@ -79,9 +80,10 @@ export class EmployeeGroupUnit implements OnInit {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด
} }
getEmpGroupList() { getEmpGroupList() {
this.EmpGroupService.getList().subscribe(response => { this.empGroupService.getList().subscribe(response => {
this.emp_groupList = response this.emp_groupList = response
this.searchChange() this.searchChange()
this.cdr.detectChanges()
}) })
} }
searchChange() { searchChange() {
...@@ -89,14 +91,13 @@ export class EmployeeGroupUnit implements OnInit { ...@@ -89,14 +91,13 @@ export class EmployeeGroupUnit implements OnInit {
this.page = Array.from({ length: Math.ceil(this.emp_groupListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.emp_groupListFilter().length / 10) }, (_, i) => i + 1);
} }
emp_groupListFilter() { emp_groupListFilter() {
return this.emp_groupList.filter(x => x.groupId.toLowerCase().includes(this.search) || return this.emp_groupList.filter(x => x.groupId.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectEmp_group(emp_group: EmpGroupModel) { selectEmp_group(emp_group?: EmpGroupModel) {
// this.showSuccess() this.emp_group = new MyEmpGroupModel(emp_group || {})
this.emp_group = new MyEmpGroupModel(emp_group)
} }
showSuccess() { showSuccess() {
...@@ -118,19 +119,20 @@ export class EmployeeGroupUnit implements OnInit { ...@@ -118,19 +119,20 @@ export class EmployeeGroupUnit implements OnInit {
}); });
} }
addEmp_group() { addEmp_group() {
// this.emp_groupService.post(this.emp_group).subscribe((response:any) => { this.empGroupService.post(this.emp_group).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getemp_groupList() this.getEmpGroupList()
// } this.showSuccess()
// }) }
})
} }
deleteEmp_group(emp_group: EmpGroupModel) { deleteEmp_group() {
this.empGroupService.delete(this.emp_group).subscribe((response: any) => {
// this.emp_groupService.delete(new MyEmpGroupModel(emp_group)).subscribe((response:any) => { if (response.success) {
// if (response.success) { this.getEmpGroupList()
// this.getemp_groupList() 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="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#company-registration-page-upload-modal"> data-hs-overlay="#company-registration-page-upload-modal">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
นำเข้าข้อมูล นำเข้าข้อมูล
</button> </button>
<a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end" <a class="mx-2 justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
href="javascript:void(0);"> href="javascript:void(0);">
ดาวน์โหลดตัวอย่างไฟล์ ดาวน์โหลดตัวอย่างไฟล์
</a> </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>
<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>
<div class="flex justify-end"> <div class="px-1">
<div class="px-1"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md">
<div class="relative shadow-md"> <i class="ri-delete-bin-6-line"></i>
<input type="text" id="hs-leading-icon" name="hs-leading-icon" Delete
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name" style="height: 40px;" </button>
[(ngModel)]="search" (ngModelChange)="searchChange()"> <!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
<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"
data-hs-overlay="#employee-level-alert-delete-modal"> data-hs-overlay="#employee-level-alert-delete-modal">
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button> -->
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
<i class="ti ti-book fs-l"></i> <i class="ti ti-book fs-l"></i>
Help Help
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md"> <div class="overflow-auto table-bordered rounded-t-md">
<div class="overflow-auto shadow-md rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัสระดับพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัสระดับพนักงาน','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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> <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"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!plListFilter().length"> <tbody *ngIf="!plListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="plListFilter().length"> <tbody *ngIf="plListFilter().length">
<tr <tr
*ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of plListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.plId}}"> <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.plId}}">
<label for="checkbox-{{item.plId}}">&nbsp;{{item.plId}}</label> <label for="checkbox-{{item.plId}}">&nbsp;{{item.plId}}</label>
</td> </td>
<td>{{item.tdesc}}</td> <td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td> <td>{{item.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectPL(item)"
data-hs-overlay="#employee-level-modal-edit"></i> data-hs-overlay="#employee-level-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deletePL(item)" <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> data-hs-overlay="#employee-level-alert-delete-modal"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length"> </div>
<ul class="ti-pagination"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<li> <ul class="ti-pagination">
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <li>
(click)="currentPage = (currentPage-1 || 1)"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> (click)="currentPage = (currentPage-1 || 1)">
</a> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</li> </a>
<li *ngFor="let item of page;let f = first;let l = last"> </li>
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3"> <li *ngFor="let item of page;let f = first;let l = last">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
</a> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</ng-container> </a>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)"> </ng-container>
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage" <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
(click)="currentPage=item">{{item}} <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
</a> (click)="currentPage=item">{{item}}
</ng-container> </a>
<ng-container </ng-container>
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2"> <ng-container
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
</a> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</ng-container> </a>
</li> </ng-container>
<li> </li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <li>
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
</a> <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</li> </a>
</ul> </li>
</ul>
</nav> </nav>
</div> </div>
...@@ -146,47 +150,45 @@ ...@@ -146,47 +150,45 @@
</div> </div>
<div class="ti-modal-center"> <div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;"> <div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> <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" <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" 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)"> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path> <path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></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="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline> <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g> </g>
</svg> </svg>
Clear Clear
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i> <i class="ti ti-book fs-l"></i>
Help Help
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label ">รหัสระดับพนักงาน(PL)*</label> <label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</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)]="pl.plId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label> <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> <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"> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-add"> data-hs-overlay="#employee-level-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-add-modal">
data-hs-overlay="#employee-level-alert-add-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -212,34 +214,35 @@ ...@@ -212,34 +214,35 @@
</div> </div>
<div class="ti-modal-center"> <div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;"> <div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> <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" <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" 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)"> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path> <path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></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="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline> <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g> </g>
</svg> </svg>
Clear Clear
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i> <i class="ti ti-book fs-l"></i>
Help Help
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body" style="margin-top: 40px;">
<label for="input-label" class="ti-form-label">รหัสระดับพนักงาน(PL)</label> <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> <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"> <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> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
...@@ -279,9 +282,9 @@ ...@@ -279,9 +282,9 @@
</button> </button>
</div> </div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4"> <div class="flex justify-center mt-2rem mb-1rem space-x-4">
<a class="ti-btn ti-btn-primary" href="javascript:void(0);"> <a class="ti-btn ti-btn-primary" href="javascript:void(0);">
อัปโหลด อัปโหลด
</a> </a>
</div> </div>
</div> </div>
</div> </div>
...@@ -290,108 +293,108 @@ ...@@ -290,108 +293,108 @@
<div id="employee-level-alert-add-modal" class="hs-overlay hidden ti-modal"> <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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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="#employee-level-alert-add-modal"> data-hs-overlay="#employee-level-alert-add-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่ ยืนยันการบันทึกข้อมูลหรือไม่
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-add"> data-hs-overlay="#employee-level-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-add-modal"
data-hs-overlay="#employee-level-alert-add-modal" (click)="addPL(); showSuccessAdd()"> (click)="addPL()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div id="employee-level-alert-edit-modal" class="hs-overlay hidden ti-modal"> <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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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="#employee-level-alert-edit-modal"> data-hs-overlay="#employee-level-alert-edit-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการแก้ไขข้อมูลหรือไม่ ยืนยันการแก้ไขข้อมูลหรือไม่
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-modal-edit"> data-hs-overlay="#employee-level-modal-edit">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#employee-level-alert-edit-modal"
data-hs-overlay="#employee-level-alert-edit-modal" (click)="addPL(); showSuccessEdit()"> (click)="addPL()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div id="employee-level-alert-delete-modal" class="hs-overlay hidden ti-modal"> <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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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="#employee-level-alert-delete-modal"> data-hs-overlay="#employee-level-alert-delete-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่ ยืนยันการลบข้อมูลหรือไม่
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-level-alert-delete-modal"> data-hs-overlay="#employee-level-alert-delete-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-level-alert-delete-modal" (click)="addPL(); showSuccessDelete()"> data-hs-overlay="#employee-level-alert-delete-modal" (click)="deletePL();">
ลบข้อมูล ลบข้อมูล
</a> </a>
</div> </div>
</div>
</div> </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 { ToastrService } from 'ngx-toastr';
import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model'; import { MyPLModel, PLModel } from 'src/app/shared/model/pl.model';
import { PLService } from 'src/app/shared/services/pl.service'; import { PLService } from 'src/app/shared/services/pl.service';
...@@ -24,15 +24,17 @@ export class EmployeeLevel implements OnInit { ...@@ -24,15 +24,17 @@ export class EmployeeLevel implements OnInit {
pl: PLModel = new MyPLModel({}) pl: PLModel = new MyPLModel({})
search = "" search = ""
constructor(private plService: PLService, constructor(private plService: PLService,
private toastr: ToastrService private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getPLList() this.getPLList()
} }
getPLList() { getPLList() {
this.plService.getList().subscribe(response => { this.plService.getList().subscribe(response => {
this.plList = response this.plList = response.map(x => new MyPLModel(x))
this.searchChange() this.searchChange()
this.cdr.detectChanges()
}) })
} }
searchChange() { searchChange() {
...@@ -40,27 +42,29 @@ export class EmployeeLevel implements OnInit { ...@@ -40,27 +42,29 @@ export class EmployeeLevel implements OnInit {
this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.plListFilter().length / 10) }, (_, i) => i + 1);
} }
plListFilter() { plListFilter() {
return this.plList.filter(x => x.plId.toLowerCase().includes(this.search) || return this.plList.filter(x => x.plId.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectPL(pl: PLModel) { selectPL(pl?: PLModel) {
// this.showSuccess() // this.showSuccess()
this.pl = new MyPLModel(pl) this.pl = new MyPLModel(pl || {})
} }
addPL() { addPL() {
// this.plService.post(this.pl).subscribe((response:any) => { this.plService.post(this.pl).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getPLList() this.getPLList()
// } this.showSuccessAdd()
// }) }
})
} }
deletePL(pl: PLModel) { deletePL() {
// this.plService.delete(new MyPLModel(pl)).subscribe((response:any) => { this.plService.delete(this.pl).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getPLList() this.getPLList()
// } this.showSuccessDelete()
// }) }
})
} }
showSuccessAdd() { showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', { this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
......
src/app/components/company-components/job-description/position/position-unit.component.html
...@@ -13,116 +13,121 @@ ...@@ -13,116 +13,121 @@
</a> </a>
</div> </div>
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <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;" [(ngModel)]="search" (ngModelChange)="searchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> 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> <i class="ri-search-line text-gray"></i>
</div> </div>
</div> </div>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#position-unit-component-modal-add"> data-hs-overlay="#position-unit-component-modal-add" (click)="selectPosition()">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md" <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>
<i class="ri-delete-bin-6-line"></i> Delete
Delete </button>
</button> <!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-20px m-0 shadow-md"
</div> data-hs-overlay="#position-unit-component-alert-delete-modal">
<div class="px-1"> <i class="ri-delete-bin-6-line"></i>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md"> Delete
<i class="ti ti-book fs-l"></i> </button> -->
Help </div>
</button> <div class="px-1">
</div> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-20px m-0 shadow-md">
</div> <i class="ti ti-book fs-l"></i>
</div> Help
</div> </button>
</div>
</div>
</div>
</div>
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <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>
<ng-container <ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2"> *ngFor="let item of ['รหัสตำแหน่ง','รายละเอียด(ไทย) ','รายละเอียด(อังกฤษ)','การจัดการ']; let f = first; let l = last; let i = index">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i> <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
</a> <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> </ng-container>
</li> </tr>
<li> </thead>
<a aria-label="anchor" class="page-link" href="javascript:void(0);" <tbody *ngIf="!positionListFilter().length">
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )"> <tr>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> <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> </a>
</li> </ng-container>
</ul> <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
</nav> <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> </div>
...@@ -169,12 +174,12 @@ ...@@ -169,12 +174,12 @@
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<label for="input-label" class="ti-form-label mt-2rem">รหัสตำเเหน่ง *</label> <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=""> <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> <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> <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"> <div class="flex justify-end mt-2rem mb-1rem space-x-2">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
...@@ -311,7 +316,7 @@ ...@@ -311,7 +316,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -347,8 +352,7 @@ ...@@ -347,8 +352,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-edit-modal" data-hs-overlay="#position-unit-component-alert-edit-modal" (click)="addPosition()">
(click)="addPosition();showSuccesssEdit()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -385,12 +389,11 @@ ...@@ -385,12 +389,11 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-delete-modal" data-hs-overlay="#position-unit-component-alert-delete-modal" (click)="deletePosition()">
(click)="addPosition();showSuccessDelete()">
ลบข้อมูล ลบข้อมูล
</a> </a>
</div> </div>
</div> </div>
</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 { ToastrService } from 'ngx-toastr';
import { MyPositionModel, PositionModel } from 'src/app/shared/model/position.model'; import { MyPositionModel, PositionModel } from 'src/app/shared/model/position.model';
import { PositionService } from 'src/app/shared/services/position.service'; import { PositionService } from 'src/app/shared/services/position.service';
...@@ -24,15 +24,17 @@ export class PositionUnitComponent implements OnInit { ...@@ -24,15 +24,17 @@ export class PositionUnitComponent implements OnInit {
position: PositionModel = new MyPositionModel({}) position: PositionModel = new MyPositionModel({})
search = "" search = ""
constructor(private positionService: PositionService, constructor(private positionService: PositionService,
private toastr: ToastrService private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getPositionList() this.getPositionList()
} }
getPositionList() { getPositionList() {
this.positionService.getList().subscribe(response => { this.positionService.getList().subscribe(response => {
this.positionList = response this.positionList = response.map(x => new MyPositionModel(x))
this.searchChange() this.searchChange()
this.cdr.detectChanges()
}) })
} }
searchChange() { searchChange() {
...@@ -40,13 +42,13 @@ export class PositionUnitComponent implements OnInit { ...@@ -40,13 +42,13 @@ export class PositionUnitComponent implements OnInit {
this.page = Array.from({ length: Math.ceil(this.positionListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.positionListFilter().length / 10) }, (_, i) => i + 1);
} }
positionListFilter() { positionListFilter() {
return this.positionList.filter(x => x.positionId.toLowerCase().includes(this.search) || return this.positionList.filter(x => x.positionId.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectPosition(position: PositionModel) { selectPosition(position?: PositionModel) {
// this.showSuccess() // this.showSuccess()
this.position = new MyPositionModel(position) this.position = new MyPositionModel(position || {})
} }
showSuccess() { showSuccess() {
...@@ -68,18 +70,20 @@ export class PositionUnitComponent implements OnInit { ...@@ -68,18 +70,20 @@ export class PositionUnitComponent implements OnInit {
}); });
} }
addPosition() { addPosition() {
// this.positionService.post(this.position).subscribe((response:any) => { this.positionService.post(this.position).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getPositionList() this.getPositionList()
// } this.showSuccess()
// }) }
})
} }
deletePosition(position: PositionModel) { deletePosition() {
// this.positionService.delete(new MyPositionModel(position)).subscribe((response:any) => { this.positionService.delete(this.position).subscribe((response: any) => {
// if (response.success) { if (response.success) {
// this.getPositionList() 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="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<!-- Content ของ div แรก --> <!-- Content ของ div แรก -->
<div class="flex gap-x-6"> <div class="flex gap-x-6">
<div class="flex items-center"> <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> <label for="hs-checkbox-group-1"
</div> class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}}
Selected</label>
<div class="flex items-center"> </div>
<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> <div class="flex items-center">
<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> <i (click)="toggleCheckbox()"
</div> [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
</div> <label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
</div> (click)="toggleCheckbox()">Select All</label>
</div>
<div class="flex justify-end">
<div class="px-1"> </div>
<div class="relative shadow-md"> </div>
<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="flex justify-end">
<div <div class="px-1">
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> <div class="relative shadow-md">
<i class="ri-search-line text-gray"></i> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
</div> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
</div> [(ngModel)]="search" (ngModelChange)="searchChange()" style="height: 40px;">
</div> <div
<div class="px-1"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<button 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" <i class="ri-search-line text-gray"></i>
data-hs-overlay="#development-course-modal-add"> </div>
<i class="ti ti-file-plus"></i> </div>
import </div>
</button> <div class="px-1">
</div> <button type="button"
<div class="px-1"> 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-soft-secondary h-10 m-0 shadow-md" data-hs-overlay="#development-course-modal-add">
data-hs-overlay="#development-course-modal-add"> <i class="ti ti-file-plus"></i>
<i class="ri-add-line"></i> import
Add </button>
</button> </div>
</div> <div class="px-1">
<div class="px-1"> <button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md" data-hs-overlay="#development-course-modal-add" (click)="selectCompetencycourse()">
data-hs-overlay="#development-course-alert-delete-modal"> <i class="ri-add-line"></i>
<i class="ri-delete-bin-6-line"></i> Add
Delete </button>
</button> </div>
</div> <div class="px-1">
<div class="px-1"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"> <i class="ri-delete-bin-6-line"></i>
<i class="ti ti-book fs-l"></i> Delete
Help </button>
</button> <!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
</div> data-hs-overlay="#development-course-alert-delete-modal">
</div> <i class="ri-delete-bin-6-line"></i>
</div> Delete
</div> </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"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อหัวข้อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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> <span class="font-size-12px font-weight-700">{{ item }}</span>
...@@ -72,139 +82,96 @@ ...@@ -72,139 +82,96 @@
<i class="ti ti-dots-vertical fs-l"></i> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="dataLoading">
<tr *ngFor="let item of mockData;let i = index"> <tr>
<td class="text-center"> <td class="text-center" colspan="100%">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()"> <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label> aria-label="loading">
</td> <span class="sr-only">Loading...</span>
<td>{{item.name}}</td> </div>
<td class="flex justify-center"> </td>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#development-course-modal-edit"></i> </tr>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#development-course-alert-delete-modal"></i> </tbody>
</td> <tbody *ngIf="!dataLoading&&!dataListFilter().length">
</tr> <tr>
</tbody> <td class="text-center" colspan="100%">
</table> ไม่พบข้อมูล
</div> </td>
<div class="body-content" style="margin-top: 20px;"> </tr>
<ul class="nav-tabs"> </tbody>
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <tbody *ngIf="!dataLoading&&dataListFilter().length">
<div class="box-body"> <tr
<nav class="pagination-style-3 overflow-auto"> *ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<ul class="ti-pagination"> <td class="text-center">
<li> <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}"
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> [(ngModel)]="item.checked" (change)="checkSelect()">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> <label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</a> </td>
</li> <td>{{item.name}}</td>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li> <td class="flex justify-center">
<li><a class="page-link" href="javascript:void(0);">2</a></li> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectCompetencycourse(item)"
<li><a class="page-link" href="javascript:void(0);">3</a></li> data-hs-overlay="#development-course-modal-edit"></i>
<li><a class="page-link" href="javascript:void(0);">4</a></li> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectCompetencycourse(item)"
<li><a class="page-link" href="javascript:void(0);">5</a></li> data-hs-overlay="#development-course-alert-delete-modal"></i>
<li><a class="page-link" href="javascript:void(0);">...</a></li> </td>
<li><a class="page-link" href="javascript:void(0);">31</a></li> </tr>
<li> </tbody>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </table>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> </div>
</a> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
</li> <ul class="ti-pagination">
</ul> <li>
</nav> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
</div> (click)="currentPage = (currentPage-1 || 1)">
</div> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</ul> </a>
<ul class="nav-tabs mt-1"> </li>
<p>Show 1 to 10 of 50 items</p> <li *ngFor="let item of page;let f = first;let l = last">
</ul> <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
</div> <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>
<div id="development-course-modal-add" class="hs-overlay hidden ti-modal"> <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="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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แก้ไขหัวข้อสมรรถนะ เพิ่มหลักสูตรการพัฒนา
</h3> </h3>
<div class="flex justify-end"> <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="#development-course-modal-edit"> data-hs-overlay="#development-course-modal-add">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
...@@ -239,65 +206,66 @@ ...@@ -239,65 +206,66 @@
</div> </div>
<div class="ti-modal-body mt-1"> <div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัสหลักสูตร*</label> <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" > <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> <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"> <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> <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"> <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> <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) เพื่อให้ผู้เรียนนสามารถปฏิบัติตามมาตรฐานการทำงานได้ <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
2) เพื่อให้ผู้เรียนสามารถรักษามาตรฐานการทำงานได้ [(ngModel)]="dataSelect.detail"> </textarea>
3) เพื่อให้ผู้เรียนสามารถปฏิบัติตามกฏระเบียบของบริษัทได้ <label for="detail_eng" class="ti-form-label mt-2rem">หัวข้อเรื่อง</label>
4) เพื่อให้ผู้เรียนสามารถเข้าใจหน้างานของตนเองได้ <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
</textarea> [(ngModel)]="dataSelect.topic"> </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>
<div class="flex justify-end mt-3rem mb-1rem space-x-4"> <div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-edit"> data-hs-overlay="#development-course-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-edit-modal"> data-hs-overlay="#development-course-alert-add-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="development-course-table-modal-add" class="hs-overlay hidden ti-modal"> <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 lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto"> <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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
ประเภทสมรรถนะ แก้ไขหัวข้อสมรรถนะ
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
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> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body"> <div class="ti-modal-center">
<div class="flex justify-end pb-1rem"> <div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
placeholder="Search by No. or Name"> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<div <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
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"> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<i class="ri-search-line text-gray"></i> <g id="SVGRepo_iconCarrier">
</div> <path d="M15 49A24 24 0 0 1 32 8"></path>
</div> <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>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
...@@ -306,323 +274,141 @@ ...@@ -306,323 +274,141 @@
</button> </button>
</div> </div>
</div> </div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;"> </div>
<div class="overflow-auto border"> <div class="ti-modal-body mt-1">
<table class="ti-custom-table ti-custom-table-head"> <label for="input-label" class="ti-form-label">รหัสหลักสูตร*</label>
<thead> <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
<tr> [(ngModel)]="dataSelect.id">
<ng-container <label for="detail_th" class="ti-form-label mt-2rem">ชื่อหลักสูตร (ไทย)*</label>
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index"> <input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" <label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหลักสูตร (อังกฤษ)</label>
[class.!text-center]="f||l"> <input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="dataSelect.edesc">
<span class="text-sm">{{ item }}</span> <label for="detail_eng" class="ti-form-label mt-2rem">วัตถุประสงค์</label>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1"> <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30" [(ngModel)]="dataSelect.detail"> </textarea>
height="13" fill="currentColor" viewBox="0 0 16 16"> <label for="detail_eng" class="ti-form-label mt-2rem">หัวข้อเรื่อง</label>
<path <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
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"> [(ngModel)]="dataSelect.topic"> </textarea>
</path> <div class="flex justify-end mt-3rem mb-1rem space-x-4">
</svg> <button type="button"
</div> 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"
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2"> data-hs-overlay="#development-course-modal-edit">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30" ย้อนกลับ
height="13" fill="currentColor" viewBox="0 0 16 16"> </button>
<path <a class="ti-btn ti-btn-success" href="javascript:void(0);"
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"> data-hs-overlay="#development-course-alert-edit-modal">
</path> บันทึกข้อมูล
</svg> </a>
</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>
</div> </div>
</div> </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 id="development-course-alert-add-modal" class="hs-overlay hidden ti-modal">
<div class="max-h-full overflow-hidden ti-modal-content"> <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"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
ประเภทสมรรถนะ แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger" data-hs-overlay="#development-course-alert-add-modal">
data-hs-overlay="#development-course-modal-edit">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body"> <div class="ti-modal-body ">
<div class="flex justify-end pb-1rem"> <p class="mt-1 text-gray-800 dark:text-white/70">
<div class="px-1"> ยืนยันการบันทึกข้อมูลหรือไม่
<div class="relative shadow-md"> </p>
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " <div class="flex justify-end mt-2rem mb-1rem">
placeholder="Search by No. or Name"> <button type="button"
<div class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> data-hs-overlay="#development-course-modal-add">
<i class="ri-search-line text-gray"></i> ย้อนกลับ
</div> </button>
</div> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
</div> data-hs-overlay="#development-course-alert-add-modal" (click)="addUser()">
<div class="px-1"> บันทึกข้อมูล
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> </a>
<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> </div>
</div> </div>
</div> </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 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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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="#development-course-alert-edit-modal"> data-hs-overlay="#development-course-alert-edit-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่ ยืนยันการเเก้ไขข้อมูลหรือไม่
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-modal-edit"> data-hs-overlay="#development-course-modal-edit">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-edit-modal" (click)="addUser();showSuccessEdit()"> data-hs-overlay="#development-course-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="development-course-alert-delete-modal" class="hs-overlay hidden ti-modal"> <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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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="#development-course-alert-delete-modal"> data-hs-overlay="#development-course-alert-delete-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่! ยืนยันการลบข้อมูลหรือไม่!
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#development-course-alert-delete-modal"> data-hs-overlay="#development-course-alert-delete-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#development-course-alert-delete-modal" (click)="addUser();showSuccessDelete()"> data-hs-overlay="#development-course-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล ลบข้อมูล
</a> </a>
</div> </div>
</div> </div>
</div> </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 { 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({ @Component({
selector: 'app-development-course', selector: 'app-development-course',
templateUrl: './development-course.component.html', templateUrl: './development-course.component.html',
...@@ -11,6 +20,10 @@ export class DevelopmentCourseComponent { ...@@ -11,6 +20,10 @@ export class DevelopmentCourseComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
// ฟังก์ชันในการเปลี่ยนแท็บ // ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) { changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ตั้งค่าผู้ใช้งาน', tab.text]); this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ตั้งค่าผู้ใช้งาน', tab.text]);
...@@ -25,17 +38,17 @@ export class DevelopmentCourseComponent { ...@@ -25,17 +38,17 @@ export class DevelopmentCourseComponent {
backdropClose: boolean; backdropClose: boolean;
}; };
} = { } = {
"add": { "add": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
}, },
"edit": { "edit": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
} }
}; };
openModal(name: string, size: string, closeOnBackdrop?: boolean) { openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size; this.modalOptions[name].modalSize = size;
...@@ -58,7 +71,7 @@ export class DevelopmentCourseComponent { ...@@ -58,7 +71,7 @@ export class DevelopmentCourseComponent {
// ฟังก์ชัน toggle checkbox // ฟังก์ชัน toggle checkbox
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() { toggleCheckbox() {
this.isChecked = !this.isChecked; this.isChecked = !this.isChecked;
this.mockData.forEach((item) => { this.mockData.forEach((item) => {
...@@ -69,25 +82,69 @@ export class DevelopmentCourseComponent { ...@@ -69,25 +82,69 @@ export class DevelopmentCourseComponent {
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() { 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 = ""; currentModal = "";
mockData = [ mockData: DataModel[] = []
{ 'id': 'CC-01-01', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2', 'code': '1', 'checked': false }, dataLoading = false
{ 'id': 'CC-01-02', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O3-O4', 'code': '2', 'checked': false }, dataSelect: DataModel = { id: "", name: "", edesc: "", topic: "", detail: "", checked: false }
{ 'id': 'CC-01-03', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S1-S2', 'code': '3', 'checked': false }, mockDataSelect: any = []
{ '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 =[]
constructor(private toastr: ToastrService) { } constructor(private toastr: ToastrService,
checkSelect(){ 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); this.mockDataSelect = this.mockData.filter(item => item.checked);
} }
showSuccess() { 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="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<!-- Content ของ div แรก --> <!-- Content ของ div แรก -->
<div class="flex gap-x-6"> <div class="flex gap-x-6">
<div class="flex items-center"> <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> <label for="hs-checkbox-group-1"
</div> class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}}
Selected</label>
<div class="flex items-center"> </div>
<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> <div class="flex items-center">
<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> <i (click)="toggleCheckbox()"
</div> [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
</div> <label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
</div> (click)="toggleCheckbox()">Select All</label>
</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>
<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"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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> <span class="font-size-12px font-weight-700">{{ item }}</span>
...@@ -72,153 +82,190 @@ ...@@ -72,153 +82,190 @@
<i class="ti ti-dots-vertical fs-l"></i> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="dataLoading">
<tr *ngFor="let item of mockData;let i = index"> <tr>
<td class="text-center"> <td class="text-center" colspan="100%">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()"> <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label> aria-label="loading">
</td> <span class="sr-only">Loading...</span>
<td>{{item.name}}</td> </div>
<td class="text-center">{{item.code}}</td> </td>
<td class="flex justify-center"> </tr>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#competency-topic-modal-edit"></i> </tbody>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#competency-topic-alert-delete-modal"></i> <tbody *ngIf="!dataLoading&&!dataListFilter().length">
</td> <tr>
</tr> <td class="text-center" colspan="100%">
</tbody> ไม่พบข้อมูล
</table> </td>
</div> </tr>
<div class="body-content" style="margin-top: 20px;"> </tbody>
<ul class="nav-tabs"> <tbody *ngIf="!dataLoading&&dataListFilter().length">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <tr
<div class="box-body"> *ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<nav class="pagination-style-3 overflow-auto"> <td class="text-center">
<ul class="ti-pagination"> <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}"
<li> [(ngModel)]="item.checked" (change)="checkSelect()">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> <label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> </td>
</a> <td>{{item.name}}</td>
</li> <td class="text-center">{{item.code}}</td>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li> <td class="flex justify-center">
<li><a class="page-link" href="javascript:void(0);">2</a></li> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
<li><a class="page-link" href="javascript:void(0);">3</a></li> data-hs-overlay="#competency-topic-modal-edit" (click)="selectCompetencytopic(item)"></i>
<li><a class="page-link" href="javascript:void(0);">4</a></li> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
<li><a class="page-link" href="javascript:void(0);">5</a></li> data-hs-overlay="#competency-topic-alert-delete-modal"
<li><a class="page-link" href="javascript:void(0);">...</a></li> (click)="selectCompetencytopic(item)"></i>
<li><a class="page-link" href="javascript:void(0);">31</a></li> </td>
<li> </tr>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </tbody>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> </table>
</a> </div>
</li> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
</ul> <ul class="ti-pagination">
</nav> <li>
</div> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
</div> (click)="currentPage = (currentPage-1 || 1)">
</ul> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
<ul class="nav-tabs mt-1"> </a>
<p>Show 1 to 10 of 50 items</p> </li>
</ul> <li *ngFor="let item of page;let f = first;let l = last">
</div> <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>
<div id="competency-topic-modal-add" class="hs-overlay hidden ti-modal"> <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="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="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
เพิ่มหัวข้อสมรรถนะ เพิ่มหัวข้อสมรรถนะ
</h3> </h3>
<div class="flex justify-end"> <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"> data-hs-overlay="#competency-topic-modal-add">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <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> </button>
</div> </div>
<div class="px-1"> </div>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> <div class="ti-modal-center">
<i class="ti ti-book fs-l"></i> <div class="flex justify-end" style="padding-right: 1rem;">
Help <div class="px-1">
</button> <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>
</div> <div class="ti-modal-body mt-1">
<div class="ti-modal-body mt-1"> <label for="input-label" class="ti-form-label">รหัส*</label>
<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">
<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>
<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">
<input type="text" id="detail_th" class="ti-form-input h-10" placeholder=""> <label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<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">
<input type="text" id="detail_eng" class="ti-form-input h-10" placeholder=""> <label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<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 type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"> </textarea> [(ngModel)]="dataSelect.definition"> </textarea>
<label class="ti-form-label mt-2rem">ประเภท Competency</label> <label class="ti-form-label mt-2rem">ประเภท Competency</label>
<div class="flex"> <div class="flex">
<div class="relative flex rounded-md w-1/2"> <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;"> <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
<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"> name="hs-leading-button-add-on-with-icon-and-button"
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#competency-topic-table-modal-select"> 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> <i class="ri-search-line cursor-pointer text-gray"></i>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label> <label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label>
<div> <div>
<div class="flex rounded-md"> <div class="flex rounded-md">
<label for="file-input-medium" class="sr-only">อัปโหลดไฟล์</label> <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"> <input type="file" id="file-input-medium" name="file-input-medium"
<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"> 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">
<button class="text-sm text-gray-500 dark:text-white/70" onclick="document.getElementById('file-input-medium').click();">Browse</button> <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> </span>
<div class="flex items-center ml-2"> <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> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-end mt-3rem mb-1rem space-x-4"> <div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-add"> data-hs-overlay="#competency-topic-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-add-modal"> data-hs-overlay="#competency-topic-alert-add-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div id="competency-topic-modal-edit" class="hs-overlay hidden ti-modal"> <div id="competency-topic-modal-edit" class="hs-overlay hidden ti-modal">
...@@ -265,40 +312,51 @@ ...@@ -265,40 +312,51 @@
</div> </div>
<div class="ti-modal-body mt-1"> <div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัส*</label> <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> <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> <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> <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> <label class="ti-form-label mt-2rem">ประเภท Competency</label>
<div class="flex"> <div class="flex">
<div class="relative flex rounded-md w-1/2"> <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"> <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
<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"> name="hs-leading-button-add-on-with-icon-and-button"
<button type="button" class="flex items-center text-gray-500 dark:text-white/70" data-hs-overlay="#competency-topic-table-modal-edit"> class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
<i class="ri-search-line cursor-pointer text-gray"></i> style="padding-right: 2.5rem;" [(ngModel)]="dataSelect.type.code">
</button> <div
</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> </div>
</div>
<label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label> <label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label>
<div> <div>
<div class="flex rounded-md"> <div class="flex rounded-md">
<label for="file-input-medium" class="sr-only">อัปโหลดไฟล์</label> <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"> <input type="file" id="file-input-medium" name="file-input-medium"
<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"> 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">
<button class="text-sm text-gray-500 dark:text-white/70" onclick="document.getElementById('file-input-medium').click();">Browse</button> <span
</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">
<div class="flex items-center ml-2"> <button class="text-sm text-gray-500 dark:text-white/70"
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md"> onclick="document.getElementById('file-input-medium').click();">Browse</button>
<i class="ri-delete-bin-6-line"></i> </span>
Delete <div class="flex items-center ml-2">
</button> <button href="javascript:void(0);"
</div> 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>
</div>
<div class="flex justify-end mt-3rem mb-1rem space-x-4"> <div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
...@@ -306,13 +364,13 @@ ...@@ -306,13 +364,13 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="competency-topic-table-modal-select" class="hs-overlay hidden ti-modal"> <div id="competency-topic-table-modal-select" class="hs-overlay hidden ti-modal">
...@@ -323,8 +381,7 @@ ...@@ -323,8 +381,7 @@
ประเภทสมรรถนะ ประเภทสมรรถนะ
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-modal-add"> data-hs-overlay="#competency-topic-modal-add">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
...@@ -337,7 +394,8 @@ ...@@ -337,7 +394,8 @@
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " 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 <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"> 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> <i class="ri-search-line text-gray"></i>
...@@ -357,29 +415,47 @@ ...@@ -357,29 +415,47 @@
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l"> [class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span> <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"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0"
<i class="ti ti-dots-vertical fs-l"></i> *ngIf="!f && !l">
</div> <i class="ti ti-dots-vertical fs-l"></i>
</th> </div>
</th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="competencytypeListLoading">
<tr *ngFor="let item of[ <tr>
['01', 'Care Competency','CC'], <td class="text-center" colspan="100%">
['02', 'Management Competency','MC'], <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
['03', 'Position Competency','PC'],];let i = index"> role="status" aria-label="loading">
<td class="text-center">{{item[0]}}</td> <span class="sr-only">Loading...</span>
<td >{{item[1]}}</td> </div>
<td class="text-center">{{item[2]}}</td> </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"> <td class="flex justify-center">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button"
data-hs-overlay="#competency-topic-modal-add"> 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> <i class="ri-add-line"></i>
Select Select
</button> </button>
...@@ -390,38 +466,48 @@ ...@@ -390,38 +466,48 @@
</table> </table>
</div> </div>
</div> </div>
<div class="body-content" style="margin-top: 20px;"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageModal.length">
<ul class="nav-tabs"> <ul class="ti-pagination">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <li>
<div class="box-body"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<nav class="pagination-style-3 overflow-auto"> (click)="currentPageModal = (currentPageModal-1 || 1)">
<ul class="ti-pagination"> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
<li> </a>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </li>
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> <li *ngFor="let item of page;let f = first;let l = last">
</a> <ng-container
</li> *ngIf="item==3&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=3">
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
<li><a class="page-link" href="javascript:void(0);">2</a></li> class="ri-more-line"></i>
<li><a class="page-link" href="javascript:void(0);">3</a></li> </a>
<li><a class="page-link" href="javascript:void(0);">4</a></li> </ng-container>
<li><a class="page-link" href="javascript:void(0);">5</a></li> <ng-container
<li><a class="page-link" href="javascript:void(0);">...</a></li> *ngIf="(f||l)||(item==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<li><a class="page-link" href="javascript:void(0);">31</a></li> <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageModal"
<li> (click)="currentPageModal=item">{{item}}
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </a>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> </ng-container>
</a> <ng-container
</li> *ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.length-2">
</ul> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
</nav> class="ri-more-line"></i>
</div> </a>
</div> </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>
<ul class="nav-tabs mt-1"> <ul class="nav-tabs mt-3">
<p>Show 1 to 10 of 50 items</p> <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> </ul>
</div> </nav>
</div> </div>
</div> </div>
</div> </div>
...@@ -435,8 +521,7 @@ ...@@ -435,8 +521,7 @@
ประเภทสมรรถนะ ประเภทสมรรถนะ
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-modal-edit"> data-hs-overlay="#competency-topic-modal-edit">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
...@@ -449,7 +534,8 @@ ...@@ -449,7 +534,8 @@
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " 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 <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"> 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> <i class="ri-search-line text-gray"></i>
...@@ -465,46 +551,51 @@ ...@@ -465,46 +551,51 @@
</div> </div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;"> <div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border"> <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> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l"> [class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span> <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 && i==1"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0"
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30" *ngIf="!f && !l">
height="13" fill="currentColor" viewBox="0 0 16 16"> <i class="ti ti-dots-vertical fs-l"></i>
<path </div>
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> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="competencytypeListLoading">
<tr *ngFor="let item of[ <tr>
['01', 'Care Competency','CC'], <td class="text-center" colspan="100%">
['02', 'Management Competency','MC'], <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
['03', 'Position Competency','PC'],];let i = index"> role="status" aria-label="loading">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td> <span class="sr-only">Loading...</span>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td> </div>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td> </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"> <td class="flex justify-center">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" <button type="button"
data-hs-overlay="#competency-topic-modal-edit"> 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> <i class="ri-add-line"></i>
Select Select
</button> </button>
...@@ -515,146 +606,156 @@ ...@@ -515,146 +606,156 @@
</table> </table>
</div> </div>
</div> </div>
<div class="body-content" style="margin-top: 20px;"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageModal.length">
<ul class="nav-tabs"> <ul class="ti-pagination">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center"> <li>
<div class="box-body"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<nav class="pagination-style-3 overflow-auto"> (click)="currentPageModal = (currentPageModal-1 || 1)">
<ul class="ti-pagination"> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
<li> </a>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </li>
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> <li *ngFor="let item of page;let f = first;let l = last">
</a> <ng-container
</li> *ngIf="item==3&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=3">
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
<li><a class="page-link" href="javascript:void(0);">2</a></li> class="ri-more-line"></i>
<li><a class="page-link" href="javascript:void(0);">3</a></li> </a>
<li><a class="page-link" href="javascript:void(0);">4</a></li> </ng-container>
<li><a class="page-link" href="javascript:void(0);">5</a></li> <ng-container
<li><a class="page-link" href="javascript:void(0);">...</a></li> *ngIf="(f||l)||(item==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<li><a class="page-link" href="javascript:void(0);">31</a></li> <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageModal"
<li> (click)="currentPageModal=item">{{item}}
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </a>
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> </ng-container>
</a> <ng-container
</li> *ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.length-2">
</ul> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
</nav> class="ri-more-line"></i>
</div> </a>
</div> </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>
<ul class="nav-tabs mt-1"> <ul class="nav-tabs mt-3">
<p>Show 1 to 10 of 50 items</p> <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> </ul>
</div> </nav>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="competency-topic-alert-add-modal" class="hs-overlay hidden ti-modal"> <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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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-alert-add-modal"> data-hs-overlay="#competency-topic-alert-add-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่ ยืนยันการบันทึกข้อมูลหรือไม่
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-add"> data-hs-overlay="#competency-topic-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-add-modal" (click)="addUser();showSuccess()"> data-hs-overlay="#competency-topic-alert-add-modal" (click)="addUser()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="competency-topic-alert-edit-modal" class="hs-overlay hidden ti-modal"> <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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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-alert-edit-modal"> data-hs-overlay="#competency-topic-alert-edit-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่ ยืนยันการเเก้ไขข้อมูลหรือไม่
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-edit"> data-hs-overlay="#competency-topic-modal-edit">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-edit-modal" (click)="addUser();showSuccessEdit()"> data-hs-overlay="#competency-topic-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="competency-topic-alert-delete-modal" class="hs-overlay hidden ti-modal"> <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="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
</h3> </h3>
<div class="flex justify-end"> <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-alert-delete-modal"> data-hs-overlay="#competency-topic-alert-delete-modal">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body "> <div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70"> <p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่! ยืนยันการลบข้อมูลหรือไม่!
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-alert-delete-modal"> data-hs-overlay="#competency-topic-alert-delete-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-delete-modal" (click)="addUser();showSuccessDelete()"> data-hs-overlay="#competency-topic-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล ลบข้อมูล
</a> </a>
</div> </div>
</div> </div>
</div> </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 { 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({ @Component({
selector: 'app-competency-topic', selector: 'app-competency-topic',
templateUrl: './competency-topic.component.html', templateUrl: './competency-topic.component.html',
styleUrls: ['./competency-topic.component.scss'] styleUrls: ['./competency-topic.component.scss']
}) })
export class CompetencyTopic { 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 = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', 'หัวข้อสมรรถนะ']; @Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', 'หัวข้อสมรรถนะ'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
...@@ -25,17 +53,17 @@ export class CompetencyTopic { ...@@ -25,17 +53,17 @@ export class CompetencyTopic {
backdropClose: boolean; backdropClose: boolean;
}; };
} = { } = {
"add": { "add": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
}, },
"edit": { "edit": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
} }
}; };
// [ // [
// ['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','CC'], // ['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','CC'],
// ['CC-02', 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)','CC'], // ['CC-02', 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)','CC'],
...@@ -44,15 +72,12 @@ export class CompetencyTopic { ...@@ -44,15 +72,12 @@ export class CompetencyTopic {
// ['MC-02', 'การมีทัศนคติเชิงบวก (Mindset-Growth)','MC'], // ['MC-02', 'การมีทัศนคติเชิงบวก (Mindset-Growth)','MC'],
// ['PC-01', 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา','PC'] // ['PC-01', 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา','PC']
mockData = [ mockData: DataModel[] = []
{ 'id': 'CC-01', 'name': 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)', 'code': 'CC', 'checked': false }, dataLoading = false
{ 'id': 'CC-02', 'name': 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)', 'code': 'CC', 'checked': false }, dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }
{ 'id': 'CC-03', 'name': 'ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)', 'code': 'CC', 'checked': false }, competencytypeListLoading = false
{ 'id': 'MC-01', 'name': 'การคิดเชิงกลยุทธิ์ (Strategic Thinking)', 'code': 'MC', 'checked': false }, competencytypeList: DataModel2[] = []
{ 'id': 'MC-02', 'name': 'การมีทัศนคติเชิงบวก (Mindset-Growth)', 'code': 'MC', 'checked': false }, mockDataSelect: any = []
{ 'id': 'PC-01', 'name': 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา', 'code': 'PC', 'checked': false }
]
mockDataSelect:any =[]
openModal(name: string, size: string, closeOnBackdrop?: boolean) { openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size; this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false; this.modalOptions[name].backdropClose = closeOnBackdrop || false;
...@@ -74,7 +99,7 @@ export class CompetencyTopic { ...@@ -74,7 +99,7 @@ export class CompetencyTopic {
// ฟังก์ชัน toggle checkbox // ฟังก์ชัน toggle checkbox
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() { toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ' this.isChecked = !this.isChecked; // สลับสถานะ'
this.mockData.forEach((item) => { this.mockData.forEach((item) => {
...@@ -83,19 +108,106 @@ export class CompetencyTopic { ...@@ -83,19 +108,106 @@ export class CompetencyTopic {
this.checkSelect(); this.checkSelect();
} }
checkSelect(){ checkSelect() {
this.mockDataSelect = this.mockData.filter(item => item.checked); this.mockDataSelect = this.mockData.filter(item => item.checked);
} }
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() { 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 = ""; 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() { showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { 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="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<!-- Content ของ div แรก --> <!-- Content ของ div แรก -->
<div class="flex gap-x-6"> <div class="flex gap-x-6">
<div class="flex items-center"> <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> <label for="hs-checkbox-group-1"
</div> 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"> <div class="flex items-center">
<i (click)="toggleCheckbox()" [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}" <i (click)="toggleCheckbox()"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i> [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
<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> class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
</div> <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>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <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 <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"> 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> <i class="ri-search-line text-gray"></i>
...@@ -28,7 +33,8 @@ ...@@ -28,7 +33,8 @@
</div> </div>
</div> </div>
<div class="px-1"> <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"> data-hs-overlay="#type-registration-component-modal-add">
<i class="ti ti-file-plus"></i> <i class="ti ti-file-plus"></i>
import import
...@@ -36,17 +42,21 @@ ...@@ -36,17 +42,21 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md" <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> <i class="ri-add-line"></i>
Add Add
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md" <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> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </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>
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
...@@ -61,65 +71,95 @@ ...@@ -61,65 +71,95 @@
<div class="page px-rem"> <div class="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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> <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"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="dataLoading">
<tr *ngFor="let item of mockData;let i = index"> <tr>
<td class="text-center"> <td class="text-center" colspan="100%">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()"> <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label> aria-label="loading">
</td> <span class="sr-only">Loading...</span>
<td>{{item.name}}</td> </div>
<td class="text-center">{{item.code}}</td> </td>
<td class="flex justify-center"> </tr>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#type-registration-component-modal-edit"></i> </tbody>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#type-registration-component-alert-delete-modal"></i> <tbody *ngIf="!dataLoading&&!dataListFilter().length">
</td> <tr>
</tr> <td class="text-center" colspan="100%">
</tbody> ไม่พบข้อมูล
</table> </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> </div>
<ul class="nav-tabs"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<div class="pagination-style-3 overflow-auto my-5"> <ul class="ti-pagination">
<div class="box-body"> <li>
<nav class="pagination-style-3 overflow-auto"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<ul class="ti-pagination"> (click)="currentPage = (currentPage-1 || 1)">
<li> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> </a>
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> </li>
</a> <li *ngFor="let item of page;let f = first;let l = last">
</li> <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
<li><a class="page-link" href="javascript:void(0);">2</a></li> </a>
<li><a class="page-link" href="javascript:void(0);">3</a></li> </ng-container>
<li><a class="page-link" href="javascript:void(0);">4</a></li> <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<li><a class="page-link" href="javascript:void(0);">5</a></li> <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
<li><a class="page-link" href="javascript:void(0);">...</a></li> (click)="currentPage=item">{{item}}
<li><a class="page-link" href="javascript:void(0);">31</a></li> </a>
<li> </ng-container>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> <ng-container
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
</a> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</li> </a>
</ul> </ng-container>
</nav> </li>
</div> <li>
</div> <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>
<!-- <ul class="nav-tabs"> </nav>
<p>Show 1 to 10 of 50 items</p>
</ul> -->
</div> </div>
...@@ -168,15 +208,16 @@ ...@@ -168,15 +208,16 @@
</div> </div>
<div class="ti-modal-body" style="padding-top: 0px;"> <div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label> <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> <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> <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> <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> <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"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
...@@ -237,15 +278,16 @@ ...@@ -237,15 +278,16 @@
</div> </div>
<div class="ti-modal-body" style="padding-top: 0px;"> <div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label> <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> <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> <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> <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> <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"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
...@@ -265,7 +307,7 @@ ...@@ -265,7 +307,7 @@
<div id="type-registration-component-alert-modal" class="hs-overlay hidden ti-modal"> <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="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"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
...@@ -290,7 +332,7 @@ ...@@ -290,7 +332,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -301,7 +343,7 @@ ...@@ -301,7 +343,7 @@
<div id="type-registration-component-alert-edit-modal" class="hs-overlay hidden ti-modal"> <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="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"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
...@@ -326,7 +368,7 @@ ...@@ -326,7 +368,7 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
...@@ -336,7 +378,7 @@ ...@@ -336,7 +378,7 @@
</div> </div>
<div id="type-registration-component-alert-delete-modal" class="hs-overlay hidden ti-modal"> <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="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"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แจ้งเตือน แจ้งเตือน
...@@ -361,11 +403,11 @@ ...@@ -361,11 +403,11 @@
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <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> </a>
</div> </div>
</div> </div>
</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 { 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({ @Component({
selector: 'app-type-registration', selector: 'app-type-registration',
templateUrl: './type-registration.component.html', templateUrl: './type-registration.component.html',
styleUrls: ['./type-registration.component.scss'] styleUrls: ['./type-registration.component.scss']
}) })
export class TypeRegistration { export class TypeRegistration {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', 'ประเภทสมรรถนะ']; @Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', 'ประเภทสมรรถนะ'];
...@@ -12,6 +21,12 @@ export class TypeRegistration { ...@@ -12,6 +21,12 @@ export class TypeRegistration {
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false; isChecked: boolean = false;
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
// ฟังก์ชันในการเปลี่ยนแท็บ // ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) { changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', tab.text]); this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ', tab.text]);
...@@ -28,17 +43,17 @@ export class TypeRegistration { ...@@ -28,17 +43,17 @@ export class TypeRegistration {
backdropClose: boolean; backdropClose: boolean;
}; };
} = { } = {
"add": { "add": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
}, },
"edit": { "edit": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
} }
}; };
toggleCheckbox(): void { toggleCheckbox(): void {
...@@ -49,14 +64,12 @@ export class TypeRegistration { ...@@ -49,14 +64,12 @@ export class TypeRegistration {
this.checkSelect(); this.checkSelect();
} }
mockData = [ mockData: DataModel[] = []
{ 'id': '01', 'name': 'Core Competency', 'code': 'CC','checked': false }, dataLoading = false
{ 'id': '02', 'name': 'Management Competency', 'code': 'MC','checked': false }, dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", level: "", checked: false }
{ 'id': '03', 'name': 'Position Competency', 'code': 'PC','checked': false }, mockDataSelect: any = []
]
mockDataSelect:any =[]
checkSelect(){ checkSelect() {
this.mockDataSelect = this.mockData.filter(item => item.checked); this.mockDataSelect = this.mockData.filter(item => item.checked);
} }
...@@ -81,10 +94,60 @@ export class TypeRegistration { ...@@ -81,10 +94,60 @@ export class TypeRegistration {
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() { 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 = "" 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() { showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000, 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="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex pr-2"> <div class="flex pr-2">
<!-- Content ของ div แรก --> <!-- Content ของ div แรก -->
<div class="flex gap-x-6"> <div class="flex gap-x-6">
<div class="flex items-center"> <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> <label for="hs-checkbox-group-1"
</div> class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}}
Selected</label>
<div class="flex items-center"> </div>
<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> <div class="flex items-center">
<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> <i (click)="toggleCheckbox()"
</div> [ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
</div> <label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
</div> (click)="toggleCheckbox()">Select All</label>
</div>
<div class="flex justify-end">
<div class="px-1"> </div>
<div class="relative shadow-md"> </div>
<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="flex justify-end">
<div <div class="px-1">
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> <div class="relative shadow-md">
<i class="ri-search-line text-gray"></i> <input type="text" id="hs-leading-icon" name="hs-leading-icon"
</div> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
</div> [(ngModel)]="search" (ngModelChange)="searchChange()" style="height: 40px;">
</div> <div
<div class="px-1"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<button 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" <i class="ri-search-line text-gray"></i>
data-hs-overlay="#assessment-tool-component-modal-add"> </div>
<i class="ti ti-file-plus"></i> </div>
import </div>
</button> <div class="px-1">
</div> <button type="button"
<div class="px-1"> 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-soft-secondary h-10 m-0 shadow-md" data-hs-overlay="#assessment-tool-component-modal-add">
data-hs-overlay="#assessment-tool-component-modal-add"> <i class="ti ti-file-plus"></i>
<i class="ri-add-line"></i> import
Add </button>
</button> </div>
</div> <div class="px-1">
<div class="px-1"> <button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md" data-hs-overlay="#assessment-tool-component-modal-add" (click)="selectAssessment()">
data-hs-overlay="#assessment-tool-component-alert-delete-modal"> <i class="ri-add-line"></i>
<i class="ri-delete-bin-6-line"></i> Add
Delete </button>
</button> </div>
</div> <div class="px-1">
<div class="px-1"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"> <i class="ri-delete-bin-6-line"></i>
<i class="ti ti-book fs-l"></i> Delete
Help </button>
</button> <!-- <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10 m-0 shadow-md"
</div> data-hs-overlay="#assessment-tool-component-alert-delete-modal">
</div> <i class="ri-delete-bin-6-line"></i>
</div> Delete
</div> </button> -->
</div>
<div class="page px-rem"> <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"> <div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered"> <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead> <thead>
<tr> <tr>
<ng-container <ng-container
*ngFor="let item of ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','การจัดการ']; let f = first; let l = last; let i = index"> *ngFor="let item of ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !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> <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"> <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i> <i class="ti ti-dots-vertical fs-l"></i>
</div> </div>
</th> </th>
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="dataLoading">
<tr *ngFor="let item of mockData;let i = index"> <tr>
<td class="text-center"> <td class="text-center" colspan="100%">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.id}}" [(ngModel)]="item.checked" (change)="checkSelect()"> <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> <label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label>
</td> </td>
<td>{{item.name}}</td> <td>{{item.name}}</td>
<td class="text-center">{{item.code}}</td> <td class="text-center">{{item.code}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#assessment-tool-component-modal-edit"></i> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#assessment-tool-component-alert-delete-modal"></i> data-hs-overlay="#assessment-tool-component-modal-edit"
</td> (click)="selectAssessment(item)"></i>
</tr> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
</tbody> data-hs-overlay="#assessment-tool-component-alert-delete-modal"
</table> (click)="selectAssessment(item)"></i>
</div> </td>
<div class="body-content" style="margin-top: 20px;"> </tr>
<ul class="nav-tabs"> </tbody>
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center"> </table>
<div class="box-body"> </div>
<nav class="pagination-style-3 overflow-auto"> <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination"> <ul class="ti-pagination">
<li> <li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i> (click)="currentPage = (currentPage-1 || 1)">
</a> <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</li> </a>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li> </li>
<li><a class="page-link" href="javascript:void(0);">2</a></li> <li *ngFor="let item of page;let f = first;let l = last">
<li><a class="page-link" href="javascript:void(0);">3</a></li> <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<li><a class="page-link" href="javascript:void(0);">4</a></li> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
<li><a class="page-link" href="javascript:void(0);">5</a></li> </a>
<li><a class="page-link" href="javascript:void(0);">...</a></li> </ng-container>
<li><a class="page-link" href="javascript:void(0);">31</a></li> <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<li> <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
<a aria-label="anchor" class="page-link" href="javascript:void(0);"> (click)="currentPage=item">{{item}}
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i> </a>
</a> </ng-container>
</li> <ng-container
</ul> *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
</nav> <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</div> </a>
</div> </ng-container>
</ul> </li>
<ul class="nav-tabs"> <li>
<p>Show 1 to 10 of 50 items</p> <a aria-label="anchor" class="page-link" href="javascript:void(0);"
</ul> (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
</div> <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</div> </a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<div id="assessment-tool-component-modal-add" class="hs-overlay hidden ti-modal"> <span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> (currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
<div class="max-h-full overflow-hidden ti-modal-content"> :(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
<div class="ti-modal-header"> </ul>
<h3 class="text-xxl font-bold text-primary"> </nav>
เพิ่มเครื่องมือประเมิน </div>
</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"> <div id="assessment-tool-component-modal-add" class="hs-overlay hidden ti-modal">
<span class="sr-only">Close</span> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<i class="ti ti-circle-x fs-xxl"></i> <div class="max-h-full overflow-hidden ti-modal-content">
</button> <div class="ti-modal-header">
</div> <h3 class="text-xxl font-bold text-primary">
</div> เพิ่มเครื่องมือประเมิน
<div class="ti-modal-center"> </h3>
<div class="flex justify-end" style="padding-right: 1rem;"> <div class="flex justify-end">
<div class="px-1"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> data-hs-overlay="#assessment-tool-component-modal-add">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" <span class="sr-only">Close</span>
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84" <i class="ti ti-circle-x fs-xxl"></i>
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)"> </button>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> </div>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> </div>
<g id="SVGRepo_iconCarrier"> <div class="ti-modal-center">
<path d="M15 49A24 24 0 0 1 32 8"></path> <div class="flex justify-end" style="padding-right: 1rem;">
<path d="M49 15a24 24 0 0 1-17 41"></path> <div class="px-1">
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline> <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
</g> xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
</svg> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
Clear <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
</button> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
</div> <g id="SVGRepo_iconCarrier">
<div class="px-1"> <path d="M15 49A24 24 0 0 1 32 8"></path>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> <path d="M49 15a24 24 0 0 1-17 41"></path>
<i class="ti ti-book fs-l"></i> <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
Help <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</button> </g>
</div> </svg>
</div> Clear
</div> </button>
<div class="ti-modal-body" style="padding-top: 0px;"> </div>
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label> <div class="px-1">
<input type="text" id="input-label" class="ti-form-input w-1/2"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (ไทย)*</label> <i class="ti ti-book fs-l"></i>
<input type="text" id="detail_th" class="ti-form-input w-full"> Help
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label> </button>
<input type="text" id="detail_eng" class="ti-form-input w-full"> </div>
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อที่ใช้เเสดง *</label> </div>
<input type="text" id="showname" class="ti-form-input w-full"> </div>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="ti-modal-body" style="padding-top: 0px;">
<button type="button" <label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
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" <input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.id">
data-hs-overlay="#assessment-tool-component-modal-add"> <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">
</button> <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <input type="text" id="detail_eng" class="ti-form-input w-full" [(ngModel)]="dataSelect.edesc">
data-hs-overlay="#assessment-tool-component-alert-modal"> <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">
</a> <div class="flex justify-end mt-2rem mb-1rem">
</div> <button type="button"
</div> 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"
</div> data-hs-overlay="#assessment-tool-component-modal-add">
</div> ย้อนกลับ
</div> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
<div id="assessment-tool-component-modal-edit" class="hs-overlay hidden ti-modal"> data-hs-overlay="#assessment-tool-component-alert-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"> </a>
<div class="ti-modal-header"> </div>
<h3 class="text-xxl font-bold text-primary"> </div>
เเก้ไขเครื่องมือประเมิน </div>
</h3> </div>
<div class="flex justify-end"> </div>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-modal-edit"> <div id="assessment-tool-component-modal-edit" class="hs-overlay hidden ti-modal">
<span class="sr-only">Close</span> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<i class="ti ti-circle-x fs-xxl"></i> <div class="max-h-full overflow-hidden ti-modal-content">
</button> <div class="ti-modal-header">
</div> <h3 class="text-xxl font-bold text-primary">
</div> เเก้ไขเครื่องมือประเมิน
<div class="ti-modal-center"> </h3>
<div class="flex justify-end" style="padding-right: 1rem;"> <div class="flex justify-end">
<div class="px-1"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> data-hs-overlay="#assessment-tool-component-modal-edit">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" <span class="sr-only">Close</span>
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84" <i class="ti ti-circle-x fs-xxl"></i>
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)"> </button>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> </div>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> </div>
<g id="SVGRepo_iconCarrier"> <div class="ti-modal-center">
<path d="M15 49A24 24 0 0 1 32 8"></path> <div class="flex justify-end" style="padding-right: 1rem;">
<path d="M49 15a24 24 0 0 1-17 41"></path> <div class="px-1">
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline> <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
</g> xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
</svg> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
Clear <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
</button> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
</div> <g id="SVGRepo_iconCarrier">
<div class="px-1"> <path d="M15 49A24 24 0 0 1 32 8"></path>
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"> <path d="M49 15a24 24 0 0 1-17 41"></path>
<i class="ti ti-book fs-l"></i> <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
Help <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</button> </g>
</div> </svg>
</div> Clear
</div> </button>
<div class="ti-modal-body" style="padding-top: 0px;"> </div>
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label> <div class="px-1">
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="01"> <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (ไทย)*</label> <i class="ti ti-book fs-l"></i>
<input type="text" id="detail_th" class="ti-form-input w-full" value="แบบสังเกต"> Help
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label> </button>
<input type="text" id="detail_eng" class="ti-form-input w-full" value="แบบสังเกต"> </div>
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อที่ใช้เเสดง *</label> </div>
<input type="text" id="showname" class="ti-form-input w-full" value="O"> </div>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="ti-modal-body" style="padding-top: 0px;">
<button type="button" <label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
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" <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
data-hs-overlay="#assessment-tool-component-modal-edit"> [(ngModel)]="dataSelect.id">
ย้อนกลับ <label for="detail_th" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (ไทย)*</label>
</button> <input type="text" id="detail_th" class="ti-form-input w-full" [(ngModel)]="dataSelect.name">
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <label for="detail_eng" class="ti-form-label mt-1rem">ชื่อเครื่องมือประเมิน (อังกฤษ)</label>
data-hs-overlay="#assessment-tool-component-alert-edit-modal"> <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>
</a> <input type="text" id="showname" class="ti-form-input w-full" [(ngModel)]="dataSelect.code">
</div> <div class="flex justify-end mt-2rem mb-1rem">
</div> <button type="button"
</div> 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">
</div> ย้อนกลับ
</div> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
<div id="assessment-tool-component-alert-modal" class="hs-overlay hidden ti-modal"> data-hs-overlay="#assessment-tool-component-alert-edit-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"> </a>
<div class="ti-modal-header"> </div>
<h3 class="text-xxl font-bold text-primary"> </div>
แจ้งเตือน </div>
</h3>
<div class="flex justify-end"> </div>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" </div>
data-hs-overlay="#assessment-tool-component-alert-modal">
<span class="sr-only">Close</span> <div id="assessment-tool-component-alert-modal" class="hs-overlay hidden ti-modal">
<i class="ti ti-circle-x fs-xxl"></i> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
</button> <div class="max-h-full overflow-hidden ti-modal-content w-full">
</div> <div class="ti-modal-header">
</div> <h3 class="text-xxl font-bold text-primary">
<div class="ti-modal-body "> แจ้งเตือน
<p class="mt-1 text-gray-800 dark:text-white/70"> </h3>
ยืนยันการบันทึกข้อมูลหรือไม่ <div class="flex justify-end">
</p> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-modal">
<div class="flex justify-end mt-2rem mb-1rem"> <span class="sr-only">Close</span>
<button type="button" <i class="ti ti-circle-x fs-xxl"></i>
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" </button>
data-hs-overlay="#assessment-tool-component-modal-add"> </div>
ย้อนกลับ </div>
</button> <div class="ti-modal-body ">
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <p class="mt-1 text-gray-800 dark:text-white/70">
data-hs-overlay="#assessment-tool-component-alert-modal" (click)="addUser();showSuccess()"> ยืนยันการบันทึกข้อมูลหรือไม่
บันทึกข้อมูล </p>
</a>
</div> <div class="flex justify-end mt-2rem mb-1rem">
</div> <button type="button"
</div> 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"
</div> data-hs-overlay="#assessment-tool-component-modal-add">
</div> ย้อนกลับ
</button>
<div id="assessment-tool-component-alert-edit-modal" class="hs-overlay hidden ti-modal"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> data-hs-overlay="#assessment-tool-component-alert-modal" (click)="addUser()">
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full"> บันทึกข้อมูล
<div class="ti-modal-header"> </a>
<h3 class="text-xxl font-bold text-primary"> </div>
แจ้งเตือน </div>
</h3> </div>
<div class="flex justify-end"> </div>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" </div>
data-hs-overlay="#assessment-tool-component-alert-edit-modal">
<span class="sr-only">Close</span> <div id="assessment-tool-component-alert-edit-modal" class="hs-overlay hidden ti-modal">
<i class="ti ti-circle-x fs-xxl"></i> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
</button> <div class="max-h-full overflow-hidden ti-modal-content w-full">
</div> <div class="ti-modal-header">
</div> <h3 class="text-xxl font-bold text-primary">
<div class="ti-modal-body "> แจ้งเตือน
<p class="mt-1 text-gray-800 dark:text-white/70"> </h3>
ยืนยันการเเก้ไขข้อมูลหรือไม่ <div class="flex justify-end">
</p> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-edit-modal">
<div class="flex justify-end mt-2rem mb-1rem"> <span class="sr-only">Close</span>
<button type="button" <i class="ti ti-circle-x fs-xxl"></i>
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" </button>
data-hs-overlay="#assessment-tool-component-modal-edit"> </div>
ย้อนกลับ </div>
</button> <div class="ti-modal-body ">
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <p class="mt-1 text-gray-800 dark:text-white/70">
data-hs-overlay="#assessment-tool-component-alert-edit-modal" (click)="addUser();showSuccessEdit()"> ยืนยันการเเก้ไขข้อมูลหรือไม่
บันทึกข้อมูล </p>
</a>
</div> <div class="flex justify-end mt-2rem mb-1rem">
</div> <button type="button"
</div> 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"
</div> data-hs-overlay="#assessment-tool-component-modal-edit">
</div> ย้อนกลับ
<div id="assessment-tool-component-alert-delete-modal" class="hs-overlay hidden ti-modal"> </button>
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
<div class="max-h-full overflow-hidden ti-modal-content-alert w-full"> data-hs-overlay="#assessment-tool-component-alert-edit-modal" (click)="addUser()">
<div class="ti-modal-header"> บันทึกข้อมูล
<h3 class="text-xxl font-bold text-primary"> </a>
แจ้งเตือน </div>
</h3> </div>
<div class="flex justify-end"> </div>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" </div>
data-hs-overlay="#assessment-tool-component-alert-delete-modal"> </div>
<span class="sr-only">Close</span> <div id="assessment-tool-component-alert-delete-modal" class="hs-overlay hidden ti-modal">
<i class="ti ti-circle-x fs-xxl"></i> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
</button> <div class="max-h-full overflow-hidden ti-modal-content w-full">
</div> <div class="ti-modal-header">
</div> <h3 class="text-xxl font-bold text-primary">
<div class="ti-modal-body "> แจ้งเตือน
<p class="mt-1 text-gray-800 dark:text-white/70"> </h3>
ยืนยันการลบข้อมูลหรือไม่! <div class="flex justify-end">
</p> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tool-component-alert-delete-modal">
<div class="flex justify-end mt-2rem mb-1rem"> <span class="sr-only">Close</span>
<button type="button" <i class="ti ti-circle-x fs-xxl"></i>
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" </button>
data-hs-overlay="#assessment-tool-component-alert-delete-modal"> </div>
ย้อนกลับ </div>
</button> <div class="ti-modal-body ">
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <p class="mt-1 text-gray-800 dark:text-white/70">
data-hs-overlay="#assessment-tool-component-alert-delete-modal" (click)="addUser();showSuccessDelete()"> ยืนยันการลบข้อมูลหรือไม่!
ลบข้อมูล </p>
</a>
</div> <div class="flex justify-end mt-2rem mb-1rem">
</div> <button type="button"
</div> 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"
</div> data-hs-overlay="#assessment-tool-component-alert-delete-modal">
</div> ย้อนกลับ
\ No newline at end of file </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 { 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({ @Component({
selector: 'app-assessment-tool', selector: 'app-assessment-tool',
templateUrl: './assessment-tool.component.html', templateUrl: './assessment-tool.component.html',
styleUrls: ['./assessment-tool.component.scss'] styleUrls: ['./assessment-tool.component.scss']
}) })
export class AssessmentToolComponent { export class AssessmentToolComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', 'เครื่องมือประเมิน']; @Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', 'เครื่องมือประเมิน'];
...@@ -12,6 +20,12 @@ export class AssessmentToolComponent { ...@@ -12,6 +20,12 @@ export class AssessmentToolComponent {
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false; isChecked: boolean = false;
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
// ฟังก์ชันในการเปลี่ยนแท็บ // ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) { changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', tab.text]); this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเครื่องมือ', tab.text]);
...@@ -28,17 +42,17 @@ export class AssessmentToolComponent { ...@@ -28,17 +42,17 @@ export class AssessmentToolComponent {
backdropClose: boolean; backdropClose: boolean;
}; };
} = { } = {
"add": { "add": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
}, },
"edit": { "edit": {
isModalOpen: false, isModalOpen: false,
modalSize: 'm', modalSize: 'm',
backdropClose: true, backdropClose: true,
} }
}; };
openModal(name: string, size: string, closeOnBackdrop?: boolean) { openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size; this.modalOptions[name].modalSize = size;
...@@ -61,11 +75,61 @@ export class AssessmentToolComponent { ...@@ -61,11 +75,61 @@ export class AssessmentToolComponent {
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() { 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 = "" 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 { toggleCheckbox(): void {
this.isChecked = !this.isChecked; this.isChecked = !this.isChecked;
...@@ -74,16 +138,15 @@ export class AssessmentToolComponent { ...@@ -74,16 +138,15 @@ export class AssessmentToolComponent {
}); });
this.checkSelect(); 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); 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- ...@@ -114,6 +114,11 @@ import { CompanyRegistrationPageComponent } from '../company-components/company-
import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/idp-evalution.component'; import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/idp-evalution.component';
import { PmsEvalutionComponent } from '../performance-evaluation/pms-evaluation/pms-evalution.component'; import { PmsEvalutionComponent } from '../performance-evaluation/pms-evaluation/pms-evalution.component';
import { CEvaluationComponent } from '../performance-evaluation/c-evaluation/c-evaluation.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({ @NgModule({
declarations: [ declarations: [
SalesComponent, SalesComponent,
...@@ -223,10 +228,27 @@ import { CEvaluationComponent } from '../performance-evaluation/c-evaluation/c-e ...@@ -223,10 +228,27 @@ import { CEvaluationComponent } from '../performance-evaluation/c-evaluation/c-e
FormsModule, FormsModule,
NgxDaterangepickerMd.forRoot(), NgxDaterangepickerMd.forRoot(),
], ],
providers: [Bu1Service, Bu2Service, Bu3Service, Bu4Service, Bu5Service, Bu6Service, Bu7Service, PositionService, PLService, EmpGroupService, EmpTypeService, { providers: [
provide: HTTP_INTERCEPTORS, Bu1Service,
useClass: HttpRequestInterceptor, Bu2Service,
multi: true, Bu3Service,
},] Bu4Service,
Bu5Service,
Bu6Service,
Bu7Service,
PositionService,
PLService,
EmpGroupService,
EmpTypeService,
CompanyService,
CompetencytypeService,
CompetencytopicService,
AssessmentService,
CompetencycourseService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
multi: true,
},]
}) })
export class DashboardModule { } 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 { ...@@ -25,9 +25,9 @@ export class SubCommandStructureComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
} }
jobListFilter() { jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) || return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectJob(job: JobModel) { selectJob(job: JobModel) {
// this.showSuccess() // 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 { ...@@ -25,9 +25,9 @@ export class SubJobCompetencyComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
} }
jobListFilter() { jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) || return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectJob(job: JobModel) { selectJob(job: JobModel) {
// this.showSuccess() // this.showSuccess()
......
src/app/components/job-detail-components/job-detail-management/import-data/import-data.component.ts
...@@ -24,9 +24,9 @@ export class ImportDataComponent { ...@@ -24,9 +24,9 @@ export class ImportDataComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
} }
jobListFilter() { jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) || return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectJob(job: JobModel) { selectJob(job: JobModel) {
// this.showSuccess() // this.showSuccess()
......
src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.ts
...@@ -24,9 +24,9 @@ export class WorkDetailComponent { ...@@ -24,9 +24,9 @@ export class WorkDetailComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
} }
jobListFilter() { jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) || return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectJob(job: JobModel) { selectJob(job: JobModel) {
// this.showSuccess() // 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 { ...@@ -25,9 +25,9 @@ export class SubJobPositionIndicatorsComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
} }
jobListFilter() { jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) || return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectJob(job: JobModel) { selectJob(job: JobModel) {
// this.showSuccess() // 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 { ...@@ -25,9 +25,9 @@ export class SubJobQualificationsComponent {
this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
} }
jobListFilter() { jobListFilter() {
return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) || return this.jobList.filter(x => x.jobid.includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) || x.tdesc.includes(this.search) ||
x.edesc.toLowerCase().includes(this.search)) x.edesc.includes(this.search))
} }
selectJob(job: JobModel) { selectJob(job: JobModel) {
// this.showSuccess() // 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 { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth'; import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
@Injectable({ @Injectable({
providedIn: 'root', providedIn: 'root',
}) })
export class AuthService { export class AuthService {
authState: any; authState: any;
api = "/authen"
constructor(private afu: AngularFireAuth, private router: Router) { urlApi = environment.baseUrl + this.api
constructor(private afu: AngularFireAuth, private router: Router, private http: HttpClient) {
this.afu.authState.subscribe((auth: any) => { this.afu.authState.subscribe((auth: any) => {
this.authState = auth; this.authState = auth;
}); });
...@@ -64,6 +68,15 @@ export class AuthService { ...@@ -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 { singout(): void {
this.afu.signOut(); this.afu.signOut();
this.router.navigate(['/login']); this.router.navigate(['/login']);
......
src/app/shared/services/bu1.service.ts
...@@ -14,19 +14,19 @@ export class Bu1Service { ...@@ -14,19 +14,19 @@ export class Bu1Service {
getList(): Observable<Bu1Model[]> { getList(): Observable<Bu1Model[]> {
return this.http.get<Bu1Model[]>(this.urlApi + "/lists") return this.http.get<Bu1Model[]>(this.urlApi + "/lists")
} }
getById(bu1id:string): Observable<Bu1Model> { getById(bu1id: string): Observable<Bu1Model> {
return this.http.get<Bu1Model>(this.urlApi + "/"+bu1id) 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 { ...@@ -17,16 +17,16 @@ export class Bu2Service {
getById(bu2id: string): Observable<Bu2Model> { getById(bu2id: string): Observable<Bu2Model> {
return this.http.get<Bu2Model>(this.urlApi + "/" + bu2id) return this.http.get<Bu2Model>(this.urlApi + "/" + bu2id)
} }
// post(body: Bu1Model) { post(body: Bu2Model) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu1Model) { delete(body: Bu2Model) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
src/app/shared/services/bu3.service.ts
...@@ -17,16 +17,16 @@ import { Bu3Model } from '../model/bu3.model'; ...@@ -17,16 +17,16 @@ import { Bu3Model } from '../model/bu3.model';
getList(): Observable<Bu3Model[]> { getList(): Observable<Bu3Model[]> {
return this.http.get<Bu3Model[]>(this.urlApi + "/lists") return this.http.get<Bu3Model[]>(this.urlApi + "/lists")
} }
// post(body: Bu3Model) { post(body: Bu3Model) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu3Model) { delete(body: Bu3Model) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) 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 { ...@@ -17,16 +17,16 @@ export class Bu4Service {
getById(bu4id: string): Observable<Bu4Model> { getById(bu4id: string): Observable<Bu4Model> {
return this.http.get<Bu4Model>(this.urlApi + "/" + bu4id) return this.http.get<Bu4Model>(this.urlApi + "/" + bu4id)
} }
// post(body: Bu1Model) { post(body: Bu4Model) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu1Model) { delete(body: Bu4Model) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
src/app/shared/services/bu5.service.ts
...@@ -17,16 +17,16 @@ export class Bu5Service { ...@@ -17,16 +17,16 @@ export class Bu5Service {
getById(bu5id: string): Observable<Bu5Model> { getById(bu5id: string): Observable<Bu5Model> {
return this.http.get<Bu5Model>(this.urlApi + "/" + bu5id) return this.http.get<Bu5Model>(this.urlApi + "/" + bu5id)
} }
// post(body: Bu1Model) { post(body: Bu5Model) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu1Model) { delete(body: Bu5Model) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
src/app/shared/services/bu6.service.ts
...@@ -17,16 +17,16 @@ export class Bu6Service { ...@@ -17,16 +17,16 @@ export class Bu6Service {
getById(bu6id: string): Observable<Bu6Model> { getById(bu6id: string): Observable<Bu6Model> {
return this.http.get<Bu6Model>(this.urlApi + "/" + bu6id) return this.http.get<Bu6Model>(this.urlApi + "/" + bu6id)
} }
// post(body: Bu1Model) { post(body: Bu6Model) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu1Model) { delete(body: Bu6Model) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
src/app/shared/services/bu7.service.ts
...@@ -17,16 +17,16 @@ export class Bu7Service { ...@@ -17,16 +17,16 @@ export class Bu7Service {
getById(bu7id: string): Observable<Bu7Model> { getById(bu7id: string): Observable<Bu7Model> {
return this.http.get<Bu7Model>(this.urlApi + "/" + bu7id) return this.http.get<Bu7Model>(this.urlApi + "/" + bu7id)
} }
// post(body: Bu1Model) { post(body: Bu7Model) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu1Model) { delete(body: Bu7Model) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) 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 { ...@@ -18,16 +18,16 @@ export class EmpGroupService {
getById(groupId: string): Observable<EmpGroupModel> { getById(groupId: string): Observable<EmpGroupModel> {
return this.http.get<EmpGroupModel>(this.urlApi + "/" + groupId) return this.http.get<EmpGroupModel>(this.urlApi + "/" + groupId)
} }
// post(body: Bu1Model) { post(body: EmpGroupModel) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu1Model) { delete(body: EmpGroupModel) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
src/app/shared/services/employee-type.service.ts
...@@ -18,16 +18,16 @@ export class EmpTypeService { ...@@ -18,16 +18,16 @@ export class EmpTypeService {
getById(codeId: string): Observable<EmpTypeModel> { getById(codeId: string): Observable<EmpTypeModel> {
return this.http.get<EmpTypeModel>(this.urlApi + "/" + codeId) return this.http.get<EmpTypeModel>(this.urlApi + "/" + codeId)
} }
// post(body: Bu1Model) { post(body: EmpTypeModel) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: Bu1Model) { delete(body: EmpTypeModel) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
src/app/shared/services/http-request.interceptor.ts
...@@ -15,10 +15,10 @@ export class HttpRequestInterceptor { ...@@ -15,10 +15,10 @@ export class HttpRequestInterceptor {
constructor() { } constructor() { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.startsWith("./")) { if (req.url.startsWith("./") || !sessionStorage.getItem("accessToken")) {
return next.handle(req); return next.handle(req);
} else { } else {
const authHeader = 'Bearer ' + "eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJNWUhSUExVUyIsInJvbGVzIjpbIlVTRVIiXSwid29ya2FyZWEiOiJUS1ciLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJ6bWxvZ2luIjoiZmFsc2UiLCJyb2xlX2xldmVsIjoiNiIsImVtcGxveWVlaWQiOiIxMDAwMDA4MiIsImJyYW5jaCI6Im15aHIzIiwiZW1wX3Bvc2l0aW9uIjoiMDk3IiwidXNlcl9yb2xlIjoiQWxsIiwidWlkIjoiMTAwMDAwODIiLCJjb21wYW55aWQiOiIxMDAiLCJhY3RvcmlkIjoiMTAwMDAwODIiLCJsYW5nIjoidGgiLCJhZCI6ImZhbHNlIiwiZmlyc3Rsb2dpbiI6ImZhbHNlIiwidXJsX215aHIiOiJodHRwOi8vaHJwbHVzLXN0ZC5teWhyLmNvLnRoL2hyIiwiYXBwX25hbWUiOiJteWhyIiwicmVnaW9uYWxsdHkiOiJFTkciLCJ0b2tlbl96ZWVtZSI6IiIsInVzZXJfbGV2ZWwiOiJNWUhSIiwiZnVsbG5hbWUiOiLguJnguLLguKLguK3guJ7guLTguKPguLHguJXguJnguYwgIOC4l-C4lOC4quC4reC4miIsImNvbWlkIjoiIiwiam9iIjoiMDk3LTI0NjkiLCJ1c2VyIjoibXlociIsInptX3VzZXIiOiIiLCJ1c2VybmFtZSI6Im15aHIiLCJtZW1iZXJpZCI6IiJ9.5VUk7ZilGchdTTm-5YC0xIL53cEYX6AkfEW4d8Xd-1g"; const authHeader = 'Bearer ' + sessionStorage.getItem("accessToken")
const overideReq = { const overideReq = {
headers: req.headers.set('Authorization', authHeader), headers: req.headers.set('Authorization', authHeader),
url: req.url, url: req.url,
......
src/app/shared/services/pl.service.ts
...@@ -4,29 +4,29 @@ import { Observable } from 'rxjs'; ...@@ -4,29 +4,29 @@ import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { PLModel } from '../model/pl.model'; import { PLModel } from '../model/pl.model';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class PLService { export class PLService {
api = "/pl" api = "/pl"
urlApi = environment.baseUrl + this.api urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) { constructor(private http: HttpClient) {
} }
getById(plId:string): Observable<PLModel> { getById(plId: string): Observable<PLModel> {
return this.http.get<PLModel>(this.urlApi + "/" + plId) return this.http.get<PLModel>(this.urlApi + "/" + plId)
} }
getList(): Observable<PLModel[]> { getList(): Observable<PLModel[]> {
return this.http.get<PLModel[]>(this.urlApi + "/lists") return this.http.get<PLModel[]>(this.urlApi + "/lists")
} }
// post(body: PLModel) { post(body: PLModel) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: PLModel) { delete(body: PLModel) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
\ No newline at end of file \ No newline at end of file
src/app/shared/services/position.service.ts
...@@ -17,16 +17,16 @@ import { PositionModel } from '../model/position.model'; ...@@ -17,16 +17,16 @@ import { PositionModel } from '../model/position.model';
getList(): Observable<PositionModel[]> { getList(): Observable<PositionModel[]> {
return this.http.get<PositionModel[]>(this.urlApi + "/lists") return this.http.get<PositionModel[]>(this.urlApi + "/lists")
} }
// post(body: PositionModel) { post(body: PositionModel) {
// return this.http.post(this.urlApi, body) return this.http.post(this.urlApi, body)
// } }
// delete(body: PositionModel) { delete(body: PositionModel) {
// const options = { const options = {
// headers: new HttpHeaders({ headers: new HttpHeaders({
// "Content-Type": "application/json", "Content-Type": "application/json",
// }), }),
// body: body body: body
// }; };
// return this.http.delete(this.urlApi, options) return this.http.delete(this.urlApi, options)
// } }
} }
\ No newline at end of file
src/environments/environment.ts
...@@ -12,8 +12,9 @@ export const environment = { ...@@ -12,8 +12,9 @@ export const environment = {
appId: '********************************', appId: '********************************',
measurementId: '********************************', 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://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