Skip to content

M
myAppraisal
Commit 50f9a958 by Nattana Chaiyamat
Options

Merge branch 'DEV' of https://mygit.myhr.co.th/angular/myAppraisal into DEV 

# Conflicts:
#	src/app/components/dashboard/dashboard.module.ts
parents 78c4a887 8c21dd62
Showing with 1727 additions and 2221 deletions
src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.html
...@@ -680,7 +680,7 @@ ...@@ -680,7 +680,7 @@
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white"> <h5 class="text-xxl font-bold text-white">
นำเข้าฝ่าย นำเข้าทะเบียนแผนก
</h5> </h5>
</div> </div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm"> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
......
src/app/components/company-components/company-registration/branch-business-unit/department-list/department-list.component.ts
...@@ -116,9 +116,9 @@ export class DepartmentListComponent implements OnInit { ...@@ -116,9 +116,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.includes(this.bu2Table.search) || return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
x.tdesc.includes(this.bu2Table.search) || x.tdesc.toLowerCase().includes(this.bu2Table.search.toLowerCase()) ||
x.edesc.includes(this.bu2Table.search)) x.edesc.toLowerCase().includes(this.bu2Table.search.toLowerCase()))
} }
selectBu2(bu2?: Bu2Model) { selectBu2(bu2?: Bu2Model) {
this.bu2 = new MyBu2Model(bu2 || {}) this.bu2 = new MyBu2Model(bu2 || {})
...@@ -139,9 +139,9 @@ export class DepartmentListComponent implements OnInit { ...@@ -139,9 +139,9 @@ 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.includes(this.bu2Modal.search) || return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu2Modal.search) || x.tdesc.toLowerCase().includes(this.bu2Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu2Modal.search)) x.edesc.toLowerCase().includes(this.bu2Modal.search.toLowerCase()))
} }
...@@ -160,9 +160,9 @@ export class DepartmentListComponent implements OnInit { ...@@ -160,9 +160,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.includes(this.bu1Modal.search) || return this.bu1List.filter(x => x.bu1id.toLowerCase().includes(this.bu1Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu1Modal.search) || x.tdesc.toLowerCase().includes(this.bu1Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu1Modal.search)) x.edesc.toLowerCase().includes(this.bu1Modal.search.toLowerCase()))
} }
selectBu1(bu1?: Bu1Model) { selectBu1(bu1?: Bu1Model) {
this.bu1 = new MyBu1Model(bu1 || {}) this.bu1 = new MyBu1Model(bu1 || {})
......
src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.html
...@@ -340,7 +340,7 @@ ...@@ -340,7 +340,7 @@
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white"> <h5 class="text-xxl font-bold text-white">
นำเข้าฝ่าย นำเข้าทะเบียนฝ่าย
</h5> </h5>
</div> </div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm"> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
......
src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.html
...@@ -681,7 +681,7 @@ ...@@ -681,7 +681,7 @@
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white"> <h5 class="text-xxl font-bold text-white">
นำเข้าฝ่าย นำเข้าทะเบียนส่วน
</h5> </h5>
</div> </div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm"> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
......
src/app/components/company-components/company-registration/branch-business-unit/section-registration/section-registration.component.ts
...@@ -117,9 +117,9 @@ export class SectionRegistrationComponent implements OnInit { ...@@ -117,9 +117,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.includes(this.bu3Table.search) || return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
x.tdesc.includes(this.bu3Table.search) || x.tdesc.toLowerCase().includes(this.bu3Table.search.toLowerCase()) ||
x.edesc.includes(this.bu3Table.search)) x.edesc.toLowerCase().includes(this.bu3Table.search.toLowerCase()))
} }
selectBu3(bu3?: Bu3Model) { selectBu3(bu3?: Bu3Model) {
this.bu3 = new MyBu3Model(bu3 || {}) this.bu3 = new MyBu3Model(bu3 || {})
...@@ -140,9 +140,9 @@ export class SectionRegistrationComponent implements OnInit { ...@@ -140,9 +140,9 @@ 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.includes(this.bu3Modal.search) || return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu3Modal.search) || x.tdesc.toLowerCase().includes(this.bu3Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu3Modal.search)) x.edesc.toLowerCase().includes(this.bu3Modal.search.toLowerCase()))
} }
addBu3() { addBu3() {
this.bu3Service.post({ ...this.bu3, parent: this.bu2.bu2id }).subscribe({ this.bu3Service.post({ ...this.bu3, parent: this.bu2.bu2id }).subscribe({
...@@ -188,9 +188,9 @@ export class SectionRegistrationComponent implements OnInit { ...@@ -188,9 +188,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.includes(this.bu2Modal.search) || return this.bu2List.filter(x => x.bu2id.toLowerCase().includes(this.bu2Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu2Modal.search) || x.tdesc.toLowerCase().includes(this.bu2Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu2Modal.search)) x.edesc.toLowerCase().includes(this.bu2Modal.search.toLowerCase()))
} }
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
...@@ -676,7 +676,7 @@ ...@@ -676,7 +676,7 @@
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white"> <h5 class="text-xxl font-bold text-white">
นำเข้าฝ่าย นำเข้าทะเบียนส่วน 4
</h5> </h5>
</div> </div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm"> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-four/sub-department-four.component.ts
...@@ -117,9 +117,9 @@ export class SubDepartmentFourComponent implements OnInit { ...@@ -117,9 +117,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.includes(this.bu7Table.search) || return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
x.tdesc.includes(this.bu7Table.search) || x.tdesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()) ||
x.edesc.includes(this.bu7Table.search)) x.edesc.toLowerCase().includes(this.bu7Table.search.toLowerCase()))
} }
selectBu7(bu7?: Bu7Model) { selectBu7(bu7?: Bu7Model) {
this.bu7 = new MyBu7Model(bu7 || {}) this.bu7 = new MyBu7Model(bu7 || {})
...@@ -140,9 +140,9 @@ export class SubDepartmentFourComponent implements OnInit { ...@@ -140,9 +140,9 @@ 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.includes(this.bu7Modal.search) || return this.bu7List.filter(x => x.bu7id.toLowerCase().includes(this.bu7Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu7Modal.search) || x.tdesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu7Modal.search)) x.edesc.toLowerCase().includes(this.bu7Modal.search.toLowerCase()))
} }
addBu7() { addBu7() {
this.bu7Service.post({ ...this.bu7, parent: this.bu6.bu6id }).subscribe({ this.bu7Service.post({ ...this.bu7, parent: this.bu6.bu6id }).subscribe({
...@@ -188,9 +188,9 @@ export class SubDepartmentFourComponent implements OnInit { ...@@ -188,9 +188,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.includes(this.bu6Modal.search) || return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu6Modal.search) || x.tdesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu6Modal.search)) x.edesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()))
} }
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
...@@ -696,7 +696,7 @@ ...@@ -696,7 +696,7 @@
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white"> <h5 class="text-xxl font-bold text-white">
นำเข้าฝ่าย นำเข้าทะเบียนส่วน 1
</h5> </h5>
</div> </div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm"> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts
...@@ -116,9 +116,9 @@ export class SubDepartmentOneComponent implements OnInit { ...@@ -116,9 +116,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.includes(this.bu4Table.search) || return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
x.tdesc.includes(this.bu4Table.search) || x.tdesc.toLowerCase().includes(this.bu4Table.search.toLowerCase()) ||
x.edesc.includes(this.bu4Table.search)) x.edesc.toLowerCase().includes(this.bu4Table.search.toLowerCase()))
} }
selectBu4(bu4?: Bu4Model) { selectBu4(bu4?: Bu4Model) {
this.bu4 = new MyBu4Model(bu4 || {}) this.bu4 = new MyBu4Model(bu4 || {})
...@@ -139,9 +139,9 @@ export class SubDepartmentOneComponent implements OnInit { ...@@ -139,9 +139,9 @@ 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.includes(this.bu4Modal.search) || return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu4Modal.search) || x.tdesc.toLowerCase().includes(this.bu4Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu4Modal.search)) x.edesc.toLowerCase().includes(this.bu4Modal.search.toLowerCase()))
} }
addBu4() { addBu4() {
this.bu4Service.post({ ...this.bu4, parent: this.bu3.bu3id }).subscribe({ this.bu4Service.post({ ...this.bu4, parent: this.bu3.bu3id }).subscribe({
...@@ -187,9 +187,9 @@ export class SubDepartmentOneComponent implements OnInit { ...@@ -187,9 +187,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.includes(this.bu3Modal.search) || return this.bu3List.filter(x => x.bu3id.toLowerCase().includes(this.bu3Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu3Modal.search) || x.tdesc.toLowerCase().includes(this.bu3Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu3Modal.search)) x.edesc.toLowerCase().includes(this.bu3Modal.search.toLowerCase()))
} }
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
...@@ -676,7 +676,7 @@ ...@@ -676,7 +676,7 @@
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white"> <h5 class="text-xxl font-bold text-white">
นำเข้าฝ่าย นำเข้าทะเบียนส่วน 3
</h5> </h5>
</div> </div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm"> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts
...@@ -117,9 +117,9 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -117,9 +117,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.includes(this.bu6Table.search) || return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
x.tdesc.includes(this.bu6Table.search) || x.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
x.edesc.includes(this.bu6Table.search)) x.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()))
} }
selectBu6(bu6?: Bu6Model) { selectBu6(bu6?: Bu6Model) {
this.bu6 = new MyBu6Model(bu6 || {}) this.bu6 = new MyBu6Model(bu6 || {})
...@@ -140,9 +140,9 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -140,9 +140,9 @@ 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.includes(this.bu6Modal.search) || return this.bu6List.filter(x => x.bu6id.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu6Modal.search) || x.tdesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu6Modal.search)) x.edesc.toLowerCase().includes(this.bu6Modal.search.toLowerCase()))
} }
addBu6() { addBu6() {
this.bu6Service.post({ ...this.bu6, parent: this.bu5.bu5id }).subscribe({ this.bu6Service.post({ ...this.bu6, parent: this.bu5.bu5id }).subscribe({
...@@ -188,9 +188,9 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -188,9 +188,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.includes(this.bu5Modal.search) || return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu5Modal.search) || x.tdesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu5Modal.search)) x.edesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()))
} }
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
...@@ -687,7 +687,7 @@ ...@@ -687,7 +687,7 @@
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white"> <h5 class="text-xxl font-bold text-white">
นำเข้าฝ่าย นำเข้าทะเบียนส่วน 2
</h5> </h5>
</div> </div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm"> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.ts
...@@ -116,9 +116,9 @@ export class SubDepartmentTwoComponent implements OnInit { ...@@ -116,9 +116,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.includes(this.bu5Table.search) || return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
x.tdesc.includes(this.bu5Table.search) || x.tdesc.toLowerCase().includes(this.bu5Table.search.toLowerCase()) ||
x.edesc.includes(this.bu5Table.search)) x.edesc.toLowerCase().includes(this.bu5Table.search.toLowerCase()))
} }
selectBu5(bu5?: Bu5Model) { selectBu5(bu5?: Bu5Model) {
this.bu5 = new MyBu5Model(bu5 || {}) this.bu5 = new MyBu5Model(bu5 || {})
...@@ -139,9 +139,9 @@ export class SubDepartmentTwoComponent implements OnInit { ...@@ -139,9 +139,9 @@ 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.includes(this.bu5Modal.search) || return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu5Modal.search) || x.tdesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu5Modal.search)) x.edesc.toLowerCase().includes(this.bu5Modal.search.toLowerCase()))
} }
addBu5() { addBu5() {
this.bu5Service.post({ ...this.bu5, parent: this.bu4.bu4id }).subscribe({ this.bu5Service.post({ ...this.bu5, parent: this.bu4.bu4id }).subscribe({
...@@ -187,9 +187,9 @@ export class SubDepartmentTwoComponent implements OnInit { ...@@ -187,9 +187,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.includes(this.bu4Modal.search) || return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.bu4Modal.search.toLowerCase()) ||
x.tdesc.includes(this.bu4Modal.search) || x.tdesc.toLowerCase().includes(this.bu4Modal.search.toLowerCase()) ||
x.edesc.includes(this.bu4Modal.search)) x.edesc.toLowerCase().includes(this.bu4Modal.search.toLowerCase()))
} }
selectBu4(bu4?: Bu4Model) { selectBu4(bu4?: Bu4Model) {
this.bu4 = new MyBu4Model(bu4 || {}) this.bu4 = new MyBu4Model(bu4 || {})
......
src/app/components/company-components/job-description/employee-categories/employee-categories.component.html
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<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="#employee-categories-page-upload-modal"> data-hs-overlay="#employee-categories-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);" (click)="downloadFile()">
ดาวน์โหลดตัวอย่างไฟล์ ดาวน์โหลดตัวอย่างไฟล์
</a> </a>
</div> </div>
...@@ -221,7 +221,7 @@ ...@@ -221,7 +221,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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-categories-page-modal"> data-hs-overlay="#employee-categories-page-alert-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>
...@@ -273,3 +273,33 @@ ...@@ -273,3 +273,33 @@
</div> </div>
</div> </div>
</div> </div>
<div id="employee-categories-upload-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)] rounded-md">
<div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<h5 class="text-xxl font-bold text-white">
นำเข้าประเภทพนักงาน
</h5>
</div>
<div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
<h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="mt-2 p-2">
<div class="flex rounded-md">
<input #fileInput type="file" (change)="onFileSelected($event)" hidden>
<input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
<button type="button" (click)="fileInput.click()"
class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
<i class="ti ti-upload"></i>
</button>
</div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4">
<button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
[disabled]="!selectedFile">
อัปโหลด
</button>
</div>
</div>
</div>
</div>
</div>
src/app/components/company-components/job-description/employee-categories/employee-categories.component.ts
...@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angu ...@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angu
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';
import { FileService } from 'src/app/shared/services/file.service';
export interface DataModel { export interface DataModel {
codeId: string codeId: string
tdesc: string tdesc: string
...@@ -35,23 +36,75 @@ export class EmployeeCategories { ...@@ -35,23 +36,75 @@ export class EmployeeCategories {
dataSelect: DataModel = { codeId: "", tdesc: "", edesc: "", companyId: "" } dataSelect: DataModel = { codeId: "", tdesc: "", edesc: "", companyId: "" }
itemToDelete: EmpTypeModel | null = null; itemToDelete: EmpTypeModel | null = null;
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
constructor(private empTypeService: EmpTypeService, constructor(private empTypeService: EmpTypeService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef,
private fileService: FileService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getEmpTypeList() this.getEmpTypeList()
} }
onFileSelected(event: any) {
this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
}
uploadFile() {
if (!this.selectedFile) {
alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
return
}
const formData = new FormData();
formData.append('file', this.selectedFile);
this.fileService.upload(formData, 'employment_type').subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEmpTypeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
downloadFile() {
const fileName = 'IMPORT_MEMPLOYMENTTYPE.xlsx'
this.fileService.download(fileName).subscribe({
next: response => {
const url = window.URL.createObjectURL(response);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
getEmpTypeList() { getEmpTypeList() {
this.dataLoading = true
this.empTypeService.getList().subscribe({ this.empTypeService.getList().subscribe({
next: response => { next: response => {
this.emp_typelist = response.map(x => ({ check: false, data: { codeId: x.codeId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } })) this.emp_typelist = response.map(x => ({ check: false, data: { codeId: x.codeId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
this.dataLoading = false
this.searchChange(); this.searchChange();
this.cdr.detectChanges(); this.cdr.detectChanges();
}, }, error: error => {
error: err => { this.dataLoading = false
console.error('Error fetching employee types:', err); console.error('Error fetching employee types:', error);
this.cdr.detectChanges()
} }
}); });
} }
...@@ -63,17 +116,14 @@ export class EmployeeCategories { ...@@ -63,17 +116,14 @@ export class EmployeeCategories {
emp_typeListFilter() { emp_typeListFilter() {
return this.emp_typelist.filter(x => { return this.emp_typelist.filter(x => {
const data = x.data const data = x.data
const match = data.codeId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search); const match = data.codeId.toLowerCase().includes(this.search) || data.tdesc.toLowerCase().includes(this.search) || data.edesc.toLowerCase().includes(this.search);
return match; return match;
}); });
} }
setData(data?: DataModel) { setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", companyId: "" })); this.dataSelect = JSON.parse(JSON.stringify(data || { code: "", tdesc: "", edesc: "", companyId: "" }));
} }
// selectEmp_type(emp_type?: EmpTypeModel) {
// // this.showSuccess()
// this.emp_type = new MyEmpTypeModel(emp_type || {})
// }
addEmp_type() { addEmp_type() {
const body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId }) const body = new MyEmpTypeModel({ codeId: this.dataSelect.codeId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
this.empTypeService.post(body).subscribe({ this.empTypeService.post(body).subscribe({
......
src/app/components/company-components/job-description/employee-group-unit/employee-group-unit.component.html
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<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="#employee-group-unit-component-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);" (click)="downloadFile()">
ดาวน์โหลดตัวอย่างไฟล์ ดาวน์โหลดตัวอย่างไฟล์
</a> </a>
</div> </div>
...@@ -27,14 +27,14 @@ ...@@ -27,14 +27,14 @@
</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" (click)="selectEmp_group()"> data-hs-overlay="#employee-group-unit-component-page-modal" (click)="modalStatus='add';setData()">
<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-checkbox-modal" (click)="selectEmp_group()"> data-hs-overlay="#employee-group-unit-component-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
<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"> <span class="font-size-12px font-weight-700">
<ng-container *ngIf="i === 0"> <ng-container *ngIf="i === 0">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" (change)="toggleSelectAll($event)" style="margin-right: 10px;"> <input type="checkbox" class="ti-form-checkbox cursor-pointer" (change)="toggleSelectAll($event)" style="margin-right: 10px;">
</ng-container> </ng-container>
</span> </span>
<span class="font-size-12px font-weight-700">{{ item }}</span> <span class="font-size-12px font-weight-700">{{ item }}</span>
...@@ -69,28 +69,38 @@ ...@@ -69,28 +69,38 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!emp_groupListFilter().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&&!emp_groupListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="emp_groupListFilter().length"> <tbody *ngIf="!dataLoading&&emp_groupListFilter().length">
<tr <tr
*ngFor="let item of emp_groupListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of emp_groupListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.groupId}}" [checked]="selectedItems.includes(item.groupId)" <input *ngIf="item.data.groupId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.groupId}}" [(ngModel)]="item.check">
(change)="toggleSelection(item.groupId, $event)"> <label for="checkbox-{{item.data.groupId}}">&nbsp;{{item.data.groupId}}</label>
<label for="checkbox-{{item.groupId}}">&nbsp;{{item.groupId}}</label>
</td> </td>
<td>{{item.tdesc}}</td> <td>{{item.data.tdesc}}</td>
<td>{{item.edesc}}</td> <td>{{item.data.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)="selectEmp_group(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#employee-group-unit-component-modal-edit"></i> data-hs-overlay="#employee-group-unit-component-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectEmp_group(item)" <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.groupId!='100'"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal" ></i> (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#employee-group-unit-component-page-alert-modal" ></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -127,21 +137,26 @@ ...@@ -127,21 +137,26 @@
</a> </a>
</li> </li>
</ul> </ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{emp_groupListFilter().length<10 ?emp_groupListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - emp_groupListFilter().length) )
:(currentPage * 10) ) }} of {{emp_groupListFilter().length}} items</span>
</ul>
</nav> </nav>
</div> </div>
<div id="employee-group-unit-component-modal-add" class="hs-overlay hidden ti-modal"> <div id="employee-group-unit-component-page-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)]"> <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">
เพิ่มข้อมูลกลุ่มพนักงาน {{modalStatus=='add'?'เพิ่มข้อมูลกลุ่มพนักงาน':'แก้ไขข้อมูลกลุ่มพนักงาน'}}
</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-group-unit-component-modal-add"> data-hs-overlay="#employee-group-unit-component-page-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>
...@@ -176,150 +191,19 @@ ...@@ -176,150 +191,19 @@
</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" [(ngModel)]="emp_group.groupId"> <input type="text" id="input-label" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(ngModel)]="dataSelect.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)]="dataSelect.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" [(ngModel)]="emp_group.edesc"> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.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"
data-hs-overlay="#employee-group-unit-component-modal-add"> data-hs-overlay="#employee-group-unit-component-page-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-group-unit-component-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แก้ไขข้อมูลกลุ่มพนักงาน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-group-unit-component-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body ">
<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">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="emp_group.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
<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">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-group-unit-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-group-unit-component-modal-upload" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content-upload">
<div class="modal-headerupload bg-primary">
<h5 class="text-xxl font-bold text-white">
นำเข้าข้อมูลบริษัท
</h5>
</div>
<h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="mt-2" style="margin-left: 10px;">
<div class="flex rounded-md">
<input type="text" id="hs-trailing-button-add-on-with-icon"
name="hs-trailing-button-add-on-with-icon"
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
<button aria-label="button" type="button"
class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm">
<i class="ti ti-upload"></i>
</button>
</div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4">
<a class="ti-btn ti-btn-primary" href="javascript:void(0);">
อัปโหลด
</a>
</div>
</div>
</div>
</div>
</div>
<div id="employee-group-unit-component-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-group-unit-component-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-group-unit-component-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-modal" (click)="addEmp_group()"> data-hs-overlay="#employee-group-unit-component-page-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -328,7 +212,7 @@ ...@@ -328,7 +212,7 @@
</div> </div>
</div> </div>
<div id="employee-group-unit-component-alert-edit-modal" class="hs-overlay hidden ti-modal"> <div id="employee-group-unit-component-page-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -336,100 +220,85 @@ ...@@ -336,100 +220,85 @@
แจ้งเตือน แจ้งเตือน
</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" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#employee-group-unit-component-alert-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#employee-group-unit-component-page-alert-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-group-unit-component-page-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
</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">
ยืนยันการเเก้ไขข้อมูลหรือไม่ <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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 type="button"
data-hs-overlay="#employee-group-unit-component-modal-edit"> class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
ย้อนกลับ data-hs-overlay="#employee-group-unit-component-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" </button>
data-hs-overlay="#employee-group-unit-component-alert-edit-modal" (click)="addEmp_group()"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
บันทึกข้อมูล data-hs-overlay="#employee-group-unit-component-page-alert-modal" (click)="addEmp_group()">
</a> บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-group-unit-component-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-page-alert-modal" (click)="deleteEmp_group()">
ลบข้อมูล
</a>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="employee-group-unit-component-alert-delete-modal" class="hs-overlay hidden ti-modal"> <div id="employee-group-unit-component-upload-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)] rounded-md">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<div class="ti-modal-header"> <h5 class="text-xxl font-bold text-white">
<h3 class="text-xxl font-bold text-primary"> นำเข้ากลุ่มพนักงาน
แจ้งเตือน </h5>
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-delete-modal" (click)="deleteEmp_group()">
ลบข้อมูล
</a>
</div>
</div>
</div> </div>
</div> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
</div> <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="mt-2 p-2">
<div id="employee-group-unit-component-alert-delete-checkbox-modal" class="hs-overlay hidden ti-modal"> <div class="flex rounded-md">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <input #fileInput type="file" (change)="onFileSelected($event)" hidden>
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
<div class="ti-modal-header"> class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
<h3 class="text-xxl font-bold text-primary"> <button type="button" (click)="fileInput.click()"
แจ้งเตือน class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
</h3> <i class="ti ti-upload"></i>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#employee-group-unit-component-alert-delete-checkbox-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> <div class="flex justify-center mt-2rem mb-1rem space-x-4">
<div class="ti-modal-body "> <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
<p class="mt-1 text-gray-800 dark:text-white/70"> [disabled]="!selectedFile">
ยืนยันการลบข้อมูลหรือไม่ อัปโหลด
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#employee-group-unit-component-alert-delete-checkbox-modal">
ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#employee-group-unit-component-alert-delete-checkbox-modal" (click)="deleteSelectedItems()">
ลบข้อมูล
</a>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/company-components/job-description/employee-group-unit/employee-group-unit.component.ts
...@@ -2,6 +2,14 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } fro ...@@ -2,6 +2,14 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } fro
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';
import { FileService } from 'src/app/shared/services/file.service';
export interface DataModel {
groupId: string
tdesc: string
edesc: string
companyId: string
checked: boolean
}
@Component({ @Component({
selector: 'app-employee-group-unit', selector: 'app-employee-group-unit',
...@@ -13,78 +21,92 @@ export class EmployeeGroupUnit implements OnInit { ...@@ -13,78 +21,92 @@ export class EmployeeGroupUnit implements OnInit {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
this.activeTab = tab.id;
}
currentPage = 1 currentPage = 1
selectedItems: string[] = []; selectedItems: string[] = [];
modalStatus = 'add'
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
emp_groupList: EmpGroupModel[] = [] dataLoading = false
dataSelect: DataModel = { groupId: "", tdesc: "", edesc: "", companyId: "", checked: false }
emp_groupList: { check: boolean; data: DataModel & { checked?: boolean } }[] = []
emp_group: EmpGroupModel = new MyEmpGroupModel({}) emp_group: EmpGroupModel = new MyEmpGroupModel({})
search = "" search = ""
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
constructor(private empGroupService: EmpGroupService, constructor(private empGroupService: EmpGroupService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef,
private fileService: FileService
) { } ) { }
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
this.activeTab = tab.id;
}
ngOnInit(): void { ngOnInit(): void {
this.getEmpGroupList() this.getEmpGroupList()
} }
modalOptions: { onFileSelected(event: any) {
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
isModalOpen: boolean; // เปิด/ปิด this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"upload": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
} }
closeModal(name: string) { uploadFile() {
this.modalOptions[name].isModalOpen = false; if (!this.selectedFile) {
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่ alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
if (!this.isAnyModalOpen()) { return
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
} }
const formData = new FormData();
formData.append('file', this.selectedFile);
this.fileService.upload(formData, 'mgroup').subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEmpGroupList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
} }
isAnyModalOpen(): boolean { downloadFile() {
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่ const fileName = 'IMPORT_MGROUP.xlsx'
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด this.fileService.download(fileName).subscribe({
next: response => {
const url = window.URL.createObjectURL(response);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, error: error => {
this.showAlert(error.message, 'error')
}
})
} }
getEmpGroupList() { getEmpGroupList() {
this.empGroupService.getList().subscribe(response => { this.dataLoading = true
this.emp_groupList = response this.empGroupService.getList().subscribe({
this.searchChange() next: response => {
this.cdr.detectChanges() this.emp_groupList = response.map(x => ({ check: false, data: { groupId: x.groupId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId, checked: false } }))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
console.error('Error fetching employee types:', error);
this.cdr.detectChanges()
}
}) })
} }
searchChange() { searchChange() {
...@@ -92,84 +114,73 @@ export class EmployeeGroupUnit implements OnInit { ...@@ -92,84 +114,73 @@ 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.includes(this.search) || return this.emp_groupList.filter(x => {
x.tdesc.includes(this.search) || const data = x.data
x.edesc.includes(this.search)) const match = data.groupId.toLowerCase().includes(this.search) || data.tdesc.toLowerCase().includes(this.search) || data.edesc.toLowerCase().includes(this.search);
} return match;
selectEmp_group(emp_group?: EmpGroupModel) {
this.emp_group = new MyEmpGroupModel(emp_group || {})
}
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
}); });
} }
showSuccesssEdit() { setData(data?: DataModel) {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { this.dataSelect = JSON.parse(JSON.stringify(data || { groupId: "", tdesc: "", edesc: "", companyId: "" }));
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
} }
addEmp_group() { addEmp_group() {
this.empGroupService.post(this.emp_group).subscribe((response: any) => { const body = new MyEmpGroupModel({ groupId: this.dataSelect.groupId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId })
if (response.success) { this.empGroupService.post(body).subscribe({
this.getEmpGroupList() next: response => {
this.showSuccess() if (response.success) {
this.showAlert(response.message, 'success')
this.getEmpGroupList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
deleteEmp_group() { deleteEmp_group() {
this.empGroupService.delete(this.emp_group).subscribe((response: any) => { let body: EmpGroupModel | EmpGroupModel[] = [];
if (response.success) {
this.getEmpGroupList() if (this.dataSelect.groupId) {
this.showSuccessDelete() body = new MyEmpGroupModel({groupId: this.dataSelect.groupId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, companyId: this.dataSelect.companyId });
}
})
}
toggleSelection(groupId: string, event: Event) {
const checked = (event.target as HTMLInputElement).checked;
if (checked) {
this.selectedItems.push(groupId);
} else { } else {
this.selectedItems = this.selectedItems.filter(id => id !== groupId); body = this.emp_groupList.filter(x => x.check).map(x => new MyEmpGroupModel({ groupId: x.data.groupId, tdesc: x.data.tdesc, edesc: x.data.edesc, companyId: x.data.companyId }));
} }
this.empGroupService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success');
this.getEmpGroupList();
} else {
this.showAlert(response.message, 'error');
}
},
error: error => {
this.showAlert(error.message, 'error')
}
});
} }
toggleSelectAll(event: Event) { toggleSelectAll(event: Event) {
const checked = (event.target as HTMLInputElement).checked; const checked = (event.target as HTMLInputElement).checked;
if (checked) {
this.selectedItems = this.emp_groupListFilter().map(item => item.groupId); this.emp_groupList.forEach(item => {
} else { item.check = checked; // อัปเดตค่า check ใน emp_groupList
this.selectedItems = [];
}
}
deleteSelectedItems() {
if (this.selectedItems.length === 0) {
alert("เลือกข้อมูลก่อนลบ");
return;
}
const selectedGroups = this.emp_groupListFilter().filter(item => this.selectedItems.includes(item.groupId));
this.empGroupService.delete(selectedGroups).subscribe({
next: (response) => {
console.log("ลบสำเร็จ", response);
this.selectedItems = [];
this.getEmpGroupList();
this.showSuccessDelete()
},
error: (error) => {
console.error("เกิดข้อผิดพลาดในการลบ", error);
}
}); });
// อัปเดตรายการ selectedItems ด้วย groupId ของรายการที่ถูกเลือก
this.selectedItems = checked ? this.emp_groupList.map(item => item.data.groupId) : [];
this.cdr.detectChanges(); // แจ้ง Angular ให้รีเฟรช UI
} }
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
})
}
} }
src/app/components/company-components/job-description/employee-level/employee-level.component.html
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<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="#employee-level-modal-upload"> data-hs-overlay="#employee-level-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);" (click)="downloadFile()">
ดาวน์โหลดตัวอย่างไฟล์ ดาวน์โหลดตัวอย่างไฟล์
</a> </a>
</div> </div>
...@@ -210,31 +210,33 @@ ...@@ -210,31 +210,33 @@
</div> </div>
</div> </div>
<div id="employee-level-modal-upload" class="hs-overlay hidden ti-modal"> <div id="employee-level-upload-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)]"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] rounded-md">
<div class="max-h-full overflow-hidden ti-modal-content h-96"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<div class="ti-modal-header bg-primary"> <h5 class="text-xxl font-bold text-white">
<h5 class="text-xxl font-bold text-white"> นำเข้าระดับพนักงาน (PL)
นำเข้าข้อมูลบริษัท </h5>
</h5>
</div> </div>
<h1 class="mt-2" style="text-align: center;">ไฟล์</h1> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
<div class="mt-2 px-2"> <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="flex rounded-md"> <div class="mt-2 p-2">
<input type="text" id="hs-trailing-button-add-on-with-icon" name="hs-trailing-button-add-on-with-icon" <div class="flex rounded-md">
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10"> <input #fileInput type="file" (change)="onFileSelected($event)" hidden>
<button aria-label="button" type="button" <input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm"> class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
<i class="ti ti-upload"></i> <button type="button" (click)="fileInput.click()"
</button> class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
</div> <i class="ti ti-upload"></i>
<div class="flex justify-center mt-2rem mb-1rem space-x-4"> </button>
<a class="ti-btn ti-btn-primary" href="javascript:void(0);"> </div>
อัปโหลด <div class="flex justify-center mt-2rem mb-1rem space-x-4">
</a> <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
</div> [disabled]="!selectedFile">
อัปโหลด
</button>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
...@@ -248,7 +250,7 @@ ...@@ -248,7 +250,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'"> <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
<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-page-modal"> data-hs-overlay="#employee-level-page-alert-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>
......
src/app/components/company-components/job-description/employee-level/employee-level.component.ts
import { ChangeDetectorRef, 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 { FileService } from 'src/app/shared/services/file.service';
import { PLService } from 'src/app/shared/services/pl.service'; import { PLService } from 'src/app/shared/services/pl.service';
export interface DataModel { export interface DataModel {
plId: string plId: string
...@@ -34,24 +35,76 @@ export class EmployeeLevel implements OnInit { ...@@ -34,24 +35,76 @@ export class EmployeeLevel implements OnInit {
dataSelect: DataModel = { plId: "", tdesc: "", edesc: "", companyId: "" } dataSelect: DataModel = { plId: "", tdesc: "", edesc: "", companyId: "" }
itemToDelete: PLModel | null = null; itemToDelete: PLModel | null = null;
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
constructor(private plService: PLService, constructor(private plService: PLService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef,
private fileService: FileService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getPLList() this.getPLList()
} }
onFileSelected(event: any) {
this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
}
uploadFile() {
if (!this.selectedFile) {
alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
return
}
const formData = new FormData();
formData.append('file', this.selectedFile);
this.fileService.upload(formData, 'pl').subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPLList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
downloadFile() {
const fileName = 'IMPORT_PL.xlsx'
this.fileService.download(fileName).subscribe({
next: response => {
const url = window.URL.createObjectURL(response);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
getPLList() { getPLList() {
this.dataLoading = true
this.plService.getList().subscribe({ this.plService.getList().subscribe({
next: response => { next: response => {
this.plList = response.map(x => ({ check: false, data: { plId: x.plId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } })) this.plList = response.map(x => ({ check: false, data: { plId: x.plId, tdesc: x.tdesc, edesc: x.edesc, companyId: x.companyId } }))
this.dataLoading = false
this.searchChange(); this.searchChange();
this.cdr.detectChanges(); this.cdr.detectChanges();
}, }, error: error => {
error: err => { this.dataLoading = false
console.error('Error fetching employee types:', err); console.error('Error fetching employee types:', error);
this.cdr.detectChanges()
} }
}); });
} }
...@@ -64,7 +117,7 @@ export class EmployeeLevel implements OnInit { ...@@ -64,7 +117,7 @@ export class EmployeeLevel implements OnInit {
plListFilter() { plListFilter() {
return this.plList.filter(x => { return this.plList.filter(x => {
const data = x.data const data = x.data
const match = data.plId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search); const match = data.plId.toLowerCase().includes(this.search) || data.tdesc.toLowerCase().includes(this.search) || data.edesc.toLowerCase().includes(this.search);
return match; return match;
}); });
} }
......
src/app/components/company-components/job-description/position/position-unit.component.html
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<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="#position-unit-component-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);" (click)="downloadFile()">
ดาวน์โหลดตัวอย่างไฟล์ ดาวน์โหลดตัวอย่างไฟล์
</a> </a>
</div> </div>
...@@ -27,14 +27,14 @@ ...@@ -27,14 +27,14 @@
</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" (click)="selectPosition()"> data-hs-overlay="#position-unit-component-page-modal" (click)="modalStatus='add';setData()">
<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-check-modal" (click)="selectPosition()"> data-hs-overlay="#position-unit-component-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ri-delete-bin-6-line"></i> <i class="ri-delete-bin-6-line"></i>
Delete Delete
</button> </button>
...@@ -65,29 +65,39 @@ ...@@ -65,29 +65,39 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!positionListFilter().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&&!positionListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="positionListFilter().length"> <tbody *ngIf="!dataLoading&&positionListFilter().length">
<tr <tr
*ngFor="let item of positionListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of positionListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" <input *ngIf="item.data.positionId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer"
id="checkbox-{{item.positionId}}" [checked]="selectedItems.includes(item.positionId)" id="checkbox-{{item.data.positionId}}" [(ngModel)]="item.check">
(change)="toggleSelection(item.positionId, $event)"> <label for="checkbox-{{item.data.positionId}}">&nbsp;{{item.data.positionId}}</label>
<label for="checkbox-{{item.positionId}}">&nbsp;{{item.positionId}}</label>
</td> </td>
<td>{{item.tdesc}}</td> <td>{{item.data.tdesc}}</td>
<td>{{item.edesc}}</td> <td>{{item.data.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)="selectPosition(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#position-unit-component-modal-edit"></i> data-hs-overlay="#position-unit-component-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="selectPosition(item)" <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.positionId!='100'"
data-hs-overlay="#position-unit-component-alert-delete-modal"></i> (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#position-unit-component-page-alert-modal"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -124,20 +134,25 @@ ...@@ -124,20 +134,25 @@
</a> </a>
</li> </li>
</ul> </ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{positionListFilter().length<10 ?positionListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - positionListFilter().length) )
:(currentPage * 10) ) }} of {{positionListFilter().length}} items</span>
</ul>
</nav> </nav>
</div> </div>
<div id="position-unit-component-modal-add" class="hs-overlay hidden ti-modal"> <div id="position-unit-component-page-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)]"> <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">
เพิ่มข้อมูลตำเเหน่ง {{modalStatus=='add'?'เพิ่มข้อมูลตำเเหน่ง':'แก้ไขข้อมูลตำเเหน่ง'}}
</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="#position-unit-component-modal-add"> data-hs-overlay="#position-unit-component-page-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>
...@@ -172,19 +187,19 @@ ...@@ -172,19 +187,19 @@
</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 " [(ngModel)]="position.positionId"> <input type="text" id="input-label" class="ti-form-input w-1/2 " [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(ngModel)]="dataSelect.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" [(ngModel)]="position.tdesc"> <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.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" [(ngModel)]="position.edesc"> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="dataSelect.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"
data-hs-overlay="#position-unit-component-modal-add"> data-hs-overlay="#position-unit-component-page-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="#position-unit-component-alert-modal"> data-hs-overlay="#position-unit-component-page-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -193,100 +208,7 @@ ...@@ -193,100 +208,7 @@
</div> </div>
</div> </div>
<div id="position-unit-component-modal-edit" class="hs-overlay hidden ti-modal"> <div id="position-unit-component-page-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)]">
<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="#position-unit-component-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body ">
<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)]="position.positionId">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="position.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="position.edesc">
<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="#position-unit-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="position-unit-component-modal-upload" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content-upload">
<div class="modal-headerupload bg-primary">
<h5 class="text-xxl font-bold text-white">
นำเข้าข้อมูลบริษัท
</h5>
</div>
<h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="mt-2" style="margin-left: 10px;">
<div class="flex rounded-md">
<input type="text" id="hs-trailing-button-add-on-with-icon"
name="hs-trailing-button-add-on-with-icon"
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
<button aria-label="button" type="button"
class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-primary text-white hover:bg-primary focus:z-10 focus:outline-none focus:ring-0 focus:ring-primary transition-all text-sm">
<i class="ti ti-upload"></i>
</button>
</div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4">
<a class="ti-btn ti-btn-primary" href="javascript:void(0);">
อัปโหลด
</a>
</div>
</div>
</div>
</div>
</div>
<div id="position-unit-component-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -294,137 +216,85 @@ ...@@ -294,137 +216,85 @@
แจ้งเตือน แจ้งเตือน
</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" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#position-unit-component-alert-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#position-unit-component-page-alert-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</div> </button>
</div> </ng-container>
<div class="ti-modal-body "> <ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<p class="mt-1 text-gray-800 dark:text-white/70"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
ยืนยันการบันทึกข้อมูลหรือไม่ data-hs-overlay="#position-unit-component-page-alert-modal">
</p> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
<div class="flex justify-end mt-2rem mb-1rem"> </button>
<button type="button" </ng-container>
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="#position-unit-component-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-modal" (click)="addPosition()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="position-unit-component-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#position-unit-component-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</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">
ยืนยันการเเก้ไขข้อมูลหรือไม่ <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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 type="button"
data-hs-overlay="#position-unit-component-alert-modal"> 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="#position-unit-component-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" </button>
data-hs-overlay="#position-unit-component-alert-edit-modal" (click)="addPosition()"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
บันทึกข้อมูล data-hs-overlay="#position-unit-component-page-alert-modal" (click)="addPosition()">
</a> บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<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="#position-unit-component-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-page-alert-modal" (click)="deletePosition()">
ลบข้อมูล
</a>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="position-unit-component-upload-modal" class="hs-overlay hidden ti-modal">
<div id="position-unit-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)] rounded-md">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <h5 class="text-xxl font-bold text-white">
<div class="ti-modal-header"> นำเข้าตำแหน่ง
<h3 class="text-xxl font-bold text-primary"> </h5>
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#position-unit-component-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#position-unit-component-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-delete-modal" (click)="deletePosition()">
ลบข้อมูล
</a>
</div>
</div>
</div> </div>
</div> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
</div> <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div class="mt-2 p-2">
<div id="position-unit-component-alert-delete-check-modal" class="hs-overlay hidden ti-modal"> <div class="flex rounded-md">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <input #fileInput type="file" (change)="onFileSelected($event)" hidden>
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
<div class="ti-modal-header"> class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
<h3 class="text-xxl font-bold text-primary"> <button type="button" (click)="fileInput.click()"
แจ้งเตือน class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
</h3> <i class="ti ti-upload"></i>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#position-unit-component-alert-delete-check-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> <div class="flex justify-center mt-2rem mb-1rem space-x-4">
<div class="ti-modal-body "> <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
<p class="mt-1 text-gray-800 dark:text-white/70"> [disabled]="!selectedFile">
ยืนยันการลบข้อมูลหรือไม่ อัปโหลด
</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="#position-unit-component-alert-delete-check-modal">
ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#position-unit-component-alert-delete-check-modal" (click)="deleteSelectedItems()">
ลบข้อมูล
</a>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/company-components/job-description/position/position-unit.component.ts
import { ChangeDetectorRef, 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 { FileService } from 'src/app/shared/services/file.service';
import { PositionService } from 'src/app/shared/services/position.service'; import { PositionService } from 'src/app/shared/services/position.service';
export interface DataModel {
positionId: string
tdesc: string
edesc: string
consolidate: string
shortName: string
companyId: string
}
@Component({ @Component({
selector: 'app-position-unit', selector: 'app-position-unit',
...@@ -20,22 +29,82 @@ export class PositionUnitComponent implements OnInit { ...@@ -20,22 +29,82 @@ export class PositionUnitComponent implements OnInit {
} }
currentPage = 1 currentPage = 1
selectedItems: string[] = []; selectedItems: string[] = [];
search = ""
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
modalStatus = 'add'
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
positionList: PositionModel[] = [] positionList: { check: boolean, data: DataModel }[] = []
position: PositionModel = new MyPositionModel({}) position: PositionModel = new MyPositionModel({})
search = "" dataLoading = false
dataSelect: DataModel = { positionId: "", tdesc: "", edesc: "", consolidate: "", shortName: "", companyId: "" }
constructor(private positionService: PositionService, constructor(private positionService: PositionService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef,
private fileService: FileService
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.getPositionList() this.getPositionList()
} }
onFileSelected(event: any) {
this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
}
uploadFile() {
if (!this.selectedFile) {
alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
return
}
const formData = new FormData();
formData.append('file', this.selectedFile);
this.fileService.upload(formData, 'mposition').subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPositionList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
downloadFile() {
const fileName = 'IMPORT_MPOSITION.xlsx'
this.fileService.download(fileName).subscribe({
next: response => {
const url = window.URL.createObjectURL(response);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
getPositionList() { getPositionList() {
this.positionService.getList().subscribe(response => { this.dataLoading = true
this.positionList = response.map(x => new MyPositionModel(x)) this.positionService.getList().subscribe({
this.searchChange() next: response => {
this.cdr.detectChanges() this.positionList = response.map(x => ({ check: false, data: { positionId: x.positionId, tdesc: x.tdesc, edesc: x.edesc, consolidate: x.consolidate, shortName: x.shortName, companyId: x.companyId } }))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges();
}, error: error => {
this.dataLoading = false
console.error('Error fetching employee types:', error);
this.cdr.detectChanges()
}
}) })
} }
searchChange() { searchChange() {
...@@ -43,83 +112,63 @@ export class PositionUnitComponent implements OnInit { ...@@ -43,83 +112,63 @@ 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.includes(this.search) || return this.positionList.filter(x => {
x.tdesc.includes(this.search) || const data = x.data;
x.edesc.includes(this.search)) const searchLower = this.search.toLowerCase();
}
selectPosition(position?: PositionModel) { return (
// this.showSuccess() (data.positionId?.toLowerCase() || '').includes(searchLower) ||
this.position = new MyPositionModel(position || {}) (data.tdesc?.toLowerCase() || '').includes(searchLower) ||
} (data.edesc?.toLowerCase() || '').includes(searchLower) ||
(data.consolidate?.toLowerCase() || '').includes(searchLower) ||
showSuccess() { (data.shortName?.toLowerCase() || '').includes(searchLower)
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { );
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccesssEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
}); });
} }
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { setData(data?: DataModel) {
timeOut: 3000, this.dataSelect = JSON.parse(JSON.stringify(data || { positionId: "", tdesc: "", edesc: "", consolidate: "", shortName: "", companyId: "" }));
positionClass: 'toast-top-right',
});
} }
addPosition() { addPosition() {
this.positionService.post(this.position).subscribe((response: any) => { const body = new MyPositionModel({ positionId: this.dataSelect.positionId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, consolidate: this.dataSelect.consolidate, shortName: this.dataSelect.shortName, companyId: this.dataSelect.companyId })
if (response.success) { this.positionService.post(body).subscribe({
this.getPositionList() next: response => {
this.showSuccess() if (response.success) {
this.showAlert(response.message, 'success')
this.getPositionList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
deletePosition() { deletePosition() {
this.positionService.delete(this.position).subscribe((response: any) => { let body: PositionModel | PositionModel[] = []
if (response.success) { if (this.dataSelect.positionId) {
this.getPositionList() body = new MyPositionModel({ positionId: this.dataSelect.positionId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, consolidate: this.dataSelect.consolidate, shortName: this.dataSelect.shortName, companyId: this.dataSelect.companyId })
this.showSuccessDelete()
}
})
}
toggleSelection(positionId: string, event: Event) {
const checked = (event.target as HTMLInputElement).checked;
if (checked) {
this.selectedItems.push(positionId);
} else { } else {
this.selectedItems = this.selectedItems.filter(id => id !== positionId); body = this.positionList.filter(x => x.check).map(x => new MyPositionModel({ positionId: x.data.positionId, tdesc: x.data.tdesc, edesc: x.data.edesc, consolidate: x.data.consolidate, shortName: x.data.shortName, companyId: x.data.companyId }))
} }
} this.positionService.delete(body).subscribe({
toggleSelectAll(event: Event) { next: response => {
const checked = (event.target as HTMLInputElement).checked; if (response.success) {
if (checked) { this.showAlert(response.message, 'success')
this.selectedItems = this.positionListFilter().map(item => item.positionId); this.getPositionList()
} else { } else {
this.selectedItems = []; this.showAlert(response.message, 'error')
} }
} }, error: error => {
deleteSelectedItems() { this.showAlert(error.message, 'error')
if (this.selectedItems.length === 0) {
alert("เลือกข้อมูลก่อนลบ");
return;
}
const selectedGroups = this.positionListFilter().filter(item => this.selectedItems.includes(item.positionId));
this.positionService.delete(selectedGroups).subscribe({
next: (response) => {
console.log("ลบสำเร็จ", response);
this.selectedItems = [];
this.getPositionList();
this.showSuccessDelete()
},
error: (error) => {
console.error("เกิดข้อผิดพลาดในการลบ", error);
} }
})
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
}); });
} }
} }
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<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)]="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>
...@@ -32,14 +32,14 @@ ...@@ -32,14 +32,14 @@
</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)="modalStatus='add';dataListSelect()" data-hs-overlay="#evaluation-cycle-modal"> data-hs-overlay="#evaluation-cycle-page-modal" (click)="modalStatus='add';setData()">
<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-45px m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-delete-modal"> data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<i class="ti ti-trash fs-l"></i> <i class="ti ti-trash fs-l"></i>
Delete Delete
</button> </button>
...@@ -70,51 +70,61 @@ ...@@ -70,51 +70,61 @@
</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&&!evaluation_cycleListFilter().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&&evaluation_cycleListFilter().length">
<tr <tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of evaluation_cycleListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-around"> <td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check" <input *ngIf="item.data.evaluationRoundId!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer"
(ngModelChange)="dataListCheck()"> id="checkbox-{{item.data.evaluationRoundId}}" [(ngModel)]="item.check" (ngModelChange)="dataListCheck()">
<label>{{item.code}}</label> <label for="checkbox-{{item.data.evaluationRoundId}}">&nbsp;{{item.data.evaluationRoundId}}</label>
</td> </td>
<td>{{item.period}}</td> <td>{{item.data.tdesc}}</td>
<td>{{item.year}}</td> <td>{{item.data.apsyear}}</td>
<td>{{item.startDate}}</td> <td>{{item.data.apsPeriodStart}}</td>
<td>{{item.endDate}}</td> <td>{{item.data.apsPeriodEnd}}</td>
<td> <td>
<span class="flex justify-center items-center rounded-full h-5 w-5 text-white" <span class="flex justify-center items-center rounded-full h-5 w-5 text-white"
[ngClass]="{'bg-success':item.status=='1','bg-warning':item.status=='2','bg-gray-400':item.status=='3'}"> [ngClass]="{'bg-success':item.data.statusCode.code=='0','bg-warning':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code=='2'}">
<ng-container [ngSwitch]="item.status"> <ng-container [ngSwitch]="item.data.statusCode.code">
<span class="hs-tooltip ti-main-tooltip flex items-center"> <span class="hs-tooltip ti-main-tooltip flex items-center">
<i *ngSwitchCase="'1'" class="ti ti-clock hs-tooltip-toggle"></i> <i *ngSwitchCase="'0'" class="ti ti-clock hs-tooltip-toggle"></i>
<span <span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
role="tooltip"> role="tooltip">
กำลังดำเนินการประเมิน {{item.data.statusCode.tdesc}}
</span> </span>
</span> </span>
<span class="hs-tooltip ti-main-tooltip flex items-center"> <span class="hs-tooltip ti-main-tooltip flex items-center">
<i *ngSwitchCase="'2'" class="ti ti-hourglass-empty hs-tooltip-toggle"></i> <i *ngSwitchCase="'1'" class="ti ti-hourglass-empty hs-tooltip-toggle"></i>
<span <span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
role="tooltip"> role="tooltip">
รอดำเนินการ {{item.data.statusCode.tdesc}}
</span> </span>
</span> </span>
<span class="hs-tooltip ti-main-tooltip flex items-center"> <span class="hs-tooltip ti-main-tooltip flex items-center">
<i *ngSwitchCase="'3'" class="ti ti-check hs-tooltip-toggle"></i> <i *ngSwitchCase="'2'" class="ti ti-check hs-tooltip-toggle"></i>
<span <span
class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700" class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700"
role="tooltip"> role="tooltip">
สิ้นสุดช่วงเวลาประเมิน {{item.data.statusCode.tdesc}}
</span> </span>
</span> </span>
<span *ngSwitchDefault></span> <span *ngSwitchDefault></span>
...@@ -122,13 +132,34 @@ ...@@ -122,13 +132,34 @@
</span> </span>
</td> </td>
<td class="flex justify-center items-center"> <td class="flex justify-center items-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';dataListSelect(item)" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#evaluation-cycle-modal"></i> data-hs-overlay="#evaluation-cycle-page-modal"></i>
<i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"></i> <i class="ti ti-user cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-person-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-delete-modal"></i> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#evaluation-cycle-delete-modal"></i>
<span class="badge text-white m-1" *ngIf="item.status!='2'" <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
[ngClass]="{'bg-primary':item.status=='1','bg-gray-400':item.status!='1'}">ปิดรอบประเมิน</span> [ngClass]="{'bg-primary':item.data.statusCode.code=='1','bg-gray-400':item.data.statusCode.code!='3'}">ปิดรอบประเมิน</span>
<span class="badge text-white m-1 bg-secondary" *ngIf="item.status=='2'">สร้างแบบฟอร์ม</span> <span class="badge text-white m-1 bg-secondary" *ngIf="item.data.statusCode.code=='0'">สร้างแบบฟอร์ม</span> -->
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '0'"
[ngClass]="{
'bg-primary': item.data.statusCode.code == '0',
'text-white': item.data.statusCode.code == '0'
}">
ปิดรอบประเมิน
</span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '1'"
[ngClass]="{
'bg-secondary': item.data.statusCode.code == '1',
'text-white': item.data.statusCode.code == '1'
}">
สร้างแบบฟอร์ม
</span>
<span class="badge text-white m-1" *ngIf="item.data.statusCode.code == '2'"
[ngClass]="{
'bg-gray-400': item.data.statusCode.code == '2',
'text-white': item.data.statusCode.code == '2'
}">
ปิดรอบประเมิน
</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -165,11 +196,16 @@ ...@@ -165,11 +196,16 @@
</a> </a>
</li> </li>
</ul> </ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{evaluation_cycleListFilter().length<10
?evaluation_cycleListFilter().length: (currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) -
evaluation_cycleListFilter().length) ) :(currentPage * 10) ) }} of {{evaluation_cycleListFilter().length}}
items</span>
</ul>
</nav> </nav>
</div> </div>
<div id="evaluation-cycle-page-modal" class="hs-overlay hidden ti-modal">
<div id="evaluation-cycle-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)]"> <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">
...@@ -178,7 +214,7 @@ ...@@ -178,7 +214,7 @@
</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="#evaluation-cycle-modal"> data-hs-overlay="#evaluation-cycle-page-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>
...@@ -215,57 +251,31 @@ ...@@ -215,57 +251,31 @@
<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" <input type="text" id="input-label" class="ti-form-input w-1/2"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(ngModel)]="dataSelect.code"> [(ngModel)]="dataSelect.evaluationRoundId">
<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)]="dataSelect.period"> <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.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)]="dataSelect.edesc">
<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" [(ngModel)]="dataSelect.year"> <input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsyear">
<label for="input-label" class="ti-form-label mt-2rem">ช่วงเวลารอบการประเมิน</label>
<input type="text" name="daterange" id="inlinetime" ngxDaterangepickerMd <label for="input-label" class="ti-form-label mt-2rem">เริ่มวันที่</label>
class="form-control ti-form-input focus:z-10 flatpickr-input" readonly /> <input type="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodStart">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <label for="input-label" class="ti-form-label mt-2rem">สิ้นสุดวันที่</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="date" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.apsPeriodEnd">
data-hs-overlay="#evaluation-cycle-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="evaluation-cycle-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="#evaluation-cycle-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"> <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="#evaluation-cycle-modal"> data-hs-overlay="#evaluation-cycle-page-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-alert-modal"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-page-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -274,8 +284,7 @@ ...@@ -274,8 +284,7 @@
</div> </div>
</div> </div>
<div id="evaluation-cycle-page-alert-modal" class="hs-overlay hidden ti-modal">
<div id="evaluation-cycle-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">
...@@ -283,26 +292,55 @@ ...@@ -283,26 +292,55 @@
แจ้งเตือน แจ้งเตือน
</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" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#evaluation-cycle-delete-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#evaluation-cycle-page-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#evaluation-cycle-page-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
</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">
ยืนยันการลบข้อมูลหรือไม่ <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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 type="button"
data-hs-overlay="#evaluation-cycle-delete-modal"> 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="#evaluation-cycle-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" data-hs-overlay="#evaluation-cycle-delete-modal"> </button>
ลบข้อมูล <a class="ti-btn ti-btn-success" href="javascript:void(0);"
</a> data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="addevaluation_cycle()">
บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<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="#evaluation-cycle-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-page-alert-modal" (click)="deleteevaluation_cycle()">
ลบข้อมูล
</a>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
...@@ -329,4 +367,4 @@ ...@@ -329,4 +367,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component} from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-code.model';
export interface DataModel { export interface DataModel {
check: boolean, evaluationRoundId: string;
code: string, tdesc: string;
period: string, edesc: string;
year: string, apsyear: string;
startDate: string, apsPeriodStart: string;
endDate: string, apsPeriodEnd: string;
status: string statusCode: StatusCodeModel;
} }
@Component({ @Component({
...@@ -17,94 +20,133 @@ export interface DataModel { ...@@ -17,94 +20,133 @@ export interface DataModel {
styleUrls: ['./evaluation-cycle.component.scss'] styleUrls: ['./evaluation-cycle.component.scss']
}) })
export class EvaluationCycleComponent { export class EvaluationCycleComponent {
currentPage = 1 apsPeriodStart: string = '';
page = Array.from({ length: 1 }, (_, i) => i + 1); apsPeriodEnd: string = '';
search = ""
numDataListChecked = 0
isDataListChecked = false
isDataListCheckedAll = false
dataList: DataModel[] = [
{
check: false,
code: "Y67P2",
period: "ช่วงเวลาที่ 2",
year: "2567",
startDate: "01-07-2567",
endDate: "31-12-2567",
status: "1"
},
{
check: false,
code: "Y68P1",
period: "ช่วงเวลาที่ 1",
year: "2568",
startDate: "01-01-2568",
endDate: "30-06-2568",
status: "2"
},
{
check: false,
code: "Y67P1",
period: "ช่วงเวลาที่ 1",
year: "2567",
startDate: "01-01-2567",
endDate: "30-06-2567",
status: "3"
},
]
dataSelect: DataModel = {
check: false,
code: "",
period: "",
year: "",
startDate: "",
endDate: "",
status: "",
}
modalStatus: "add" | "edit" = "add"
constructor(private cdr: ChangeDetectorRef) {
}
dataListSelect(data?: DataModel) { currentPage = 1
this.dataSelect = data || { page = Array.from({ length: 1 }, (_, i) => i + 1);
check: false, search = ""
code: "", modalStatus = 'add'
period: "", evaluation_cyclelist: { check: boolean, data: DataModel }[] = []
year: "", evaluation_cycle: EvaluationCycleModel = new MyEvaluationCycleModel({})
startDate: "", dataLoading = false
endDate: "", dataSelect: DataModel = { evaluationRoundId: "", tdesc: "", edesc: "", apsyear: "", apsPeriodStart: "", apsPeriodEnd: "", statusCode: new MyStatusCodeModel({})}
status: "", itemToDelete: EvaluationCycleModel | null = null;
} isDataListChecked = false
this.cdr.detectChanges() isDataListCheckedAll = false
} numDataListChecked = 0
dataListFilter() { constructor(private evaluationCycleService: EvaluationCycleService,
return this.dataList.filter(x => { private toastr: ToastrService,
const match = x.code.includes(this.search) || x.period.includes(this.search); private cdr: ChangeDetectorRef
if (!match) x.check = false; ) { }
return match;
}); ngOnInit(): void {
} this.getEvaluationCycleList()
}
dataListCheck() { getEvaluationCycleList() {
const dataCheck = this.dataListFilter(); this.evaluationCycleService.getList().subscribe({
this.isDataListChecked = dataCheck.some(x => x.check); next: response => {
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false; console.log('API response:', response);
this.numDataListChecked = dataCheck.filter(x => x.check).length; this.evaluation_cyclelist = response.map(x => ({
} check: false,
data: {
evaluationRoundId: x.evaluationRoundId,
tdesc: x.tdesc,
edesc: x.edesc,
apsyear: x.apsyear,
apsPeriodStart: x.apsPeriodStart,
apsPeriodEnd: x.apsPeriodEnd,
statusCode: new MyStatusCodeModel(x.statusCode || {})
}
}));
this.searchChange();
this.cdr.detectChanges();
},
error: err => {
console.error('Error fetching evaluation cycles:', err);
}
});
}
dataListCheck() {
const dataCheck = this.evaluation_cycleListFilter();
this.isDataListChecked = dataCheck.some(x => x.check);
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = dataCheck.filter(x => x.check).length;
}
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.evaluation_cyclelist.forEach(x => x.check = selectAll);
this.dataListCheck();
}
dataListCheckAll() { searchChange() {
const selectAll = this.isDataListCheckedAll; this.currentPage = 1
this.dataList.forEach(x => x.check = selectAll); this.page = Array.from({ length: Math.ceil(this.evaluation_cycleListFilter().length / 10) }, (_, i) => i + 1);
this.dataListCheck(); }
} evaluation_cycleListFilter() {
return this.evaluation_cyclelist.filter(x => {
const data = x.data
const match = data.evaluationRoundId.includes(this.search) || data.tdesc.includes(this.search) || data.edesc.includes(this.search);
return match;
});
}
setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || {
evaluationRoundId: "",
tdesc: "",
edesc: "",
apsyear: "",
apsPeriodStart: "",
apsPeriodEnd: "",
statusCode: new MyStatusCodeModel({})
}));
}
addevaluation_cycle() {
const body = new MyEvaluationCycleModel({ evaluationRoundId: this.dataSelect.evaluationRoundId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, apsyear: this.dataSelect.apsyear, apsPeriodStart: this.dataSelect.apsPeriodStart, apsPeriodEnd: this.dataSelect.apsPeriodEnd, statusCode: this.dataSelect.statusCode })
this.evaluationCycleService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEvaluationCycleList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
searchChange() { deleteevaluation_cycle() {
this.currentPage = 1; let body: EvaluationCycleModel | EvaluationCycleModel[] = []
const filteredData = this.dataListFilter(); if (this.dataSelect.evaluationRoundId) {
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); body = new MyEvaluationCycleModel({ evaluationRoundId: this.dataSelect.evaluationRoundId, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, apsyear: this.dataSelect.apsyear, apsPeriodStart: this.dataSelect.apsPeriodStart, apsPeriodEnd: this.dataSelect.apsPeriodEnd, statusCode: this.dataSelect.statusCode })
this.dataListCheck(); } else {
body = this.evaluation_cyclelist.filter(x => x.check).map(x => new MyEvaluationCycleModel({ evaluationRoundId: x.data.evaluationRoundId, tdesc: x.data.tdesc, edesc: x.data.edesc, apsyear: x.data.apsyear, apsPeriodStart: x.data.apsPeriodStart, apsPeriodEnd: x.data.apsPeriodEnd, statusCode: x.data.statusCode }))
} }
this.evaluationCycleService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getEvaluationCycleList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
} }
src/app/components/competency-assessment/idp-development-plan/idp-development-plan.component.html
...@@ -17,8 +17,7 @@ ...@@ -17,8 +17,7 @@
</div> </div>
<div class="mt-3 px-3rem"> <div class="mt-3 px-3rem">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"> <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-set-idp-development-plan [pathTitle]="pathTitle" <app-set-idp-development-plan></app-set-idp-development-plan>
(sendPathTitle)="pathTitle=$event"></app-set-idp-development-plan>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</div> --> </div> -->
<div class="px-1"> <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md" <button href="javascript:void(0);" class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md"
data-hs-overlay="#set-idp-development-plan-alert-delete-modal"> data-hs-overlay="#set-idp-development-plan-alert-add-modal">
<i class="ri-save-3-line"></i> <i class="ri-save-3-line"></i>
Save Save
</button> </button>
...@@ -66,11 +66,11 @@ ...@@ -66,11 +66,11 @@
<tbody> <tbody>
<tr> <tr>
<td class="text-base font-bold" style="height: 70px;">ผ่าน<br>(ไม่ติดGAP)</td> <td class="text-base font-bold" style="height: 70px;">ผ่าน<br>(ไม่ติดGAP)</td>
<td><input type="checkbox" name="score5" value="5"></td> <td><input type="radio" id="idp-radio5" name="score" [value]="5" [(ngModel)]="idpData.score" ></td>
<td><input type="checkbox" name="score4" value="4"></td> <td><input type="radio" id="idp-radio4" name="score" [value]="4" [(ngModel)]="idpData.score"></td>
<td><input type="checkbox" name="score3" value="3"></td> <td><input type="radio" id="idp-radio3" name="score" [value]="3" [(ngModel)]="idpData.score"></td>
<td><input type="checkbox" name="score2" value="2"></td> <td><input type="radio" id="idp-radio2" name="score" [value]="2" [(ngModel)]="idpData.score"></td>
<td><input type="checkbox" name="score1" value="1"></td> <td><input type="radio" id="idp-radio1" name="score" [value]="1" [(ngModel)]="idpData.score"></td>
</tr> </tr>
<!-- เพิ่มแถวเพิ่มเติมถ้าต้องการ --> <!-- เพิ่มแถวเพิ่มเติมถ้าต้องการ -->
</tbody> </tbody>
...@@ -103,35 +103,11 @@ ...@@ -103,35 +103,11 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr *ngFor="let item of idpData.developmentPlan; let i = index" >
<td>1</td> <td>{{item.planId}}</td>
<td><input type="checkbox"></td> <td><input type="checkbox" [id]="'idp-checkbox'+i+'ojtJobAssignment'" [name]="'developmentPlan'+i" [(ngModel)]="item.ojtJobAssignment"></td>
<td><input type="checkbox"></td> <td><input type="checkbox" [id]="'idp-checkbox'+i+'coachMentor'" [name]="'developmentPlan'+i" [(ngModel)]="item.coachMentor"></td>
<td><input type="checkbox"></td> <td><input type="checkbox" [id]="'idp-checkbox'+i+'training'" [name]="'developmentPlan'+i" [(ngModel)]="item.training"></td>
</tr>
<tr>
<td>2</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
...@@ -140,418 +116,6 @@ ...@@ -140,418 +116,6 @@
</div> </div>
</div> </div>
<div id="set-idp-development-plan-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="#set-idp-development-plan-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="#set-idp-development-plan-modal-add">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#set-idp-development-plan-alert-add-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="set-idp-development-plan-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แก้ไขหัวข้อสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#set-idp-development-plan-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัสหลักสูตร*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
value="CC-01-01">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อหลักสูตร (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input h-10"
value="จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อหลักสูตร (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10"
value="จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2">
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50">1) เพื่อให้ผู้เรียนนสามารถปฏิบัติตามมาตรฐานการทำงานได้
2) เพื่อให้ผู้เรียนสามารถรักษามาตรฐานการทำงานได้
3) เพื่อให้ผู้เรียนสามารถปฏิบัติตามกฏระเบียบของบริษัทได้
4) เพื่อให้ผู้เรียนสามารถเข้าใจหน้างานของตนเองได้
</textarea>
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50">1) การปฏิบัติงานโดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับแรก (Safety First) สวมใส่อุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจจะเป็นสาเหตุของอุบัติเหตุรอบๆตัว รวมถึงการให้ความสำคัญกับคุณภาพ
2) การปฏิบัติงานตามมาตรฐานด้านความปลอดภัยและคุณภาพของหน่วยงาน
</textarea>
<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="#set-idp-development-plan-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#set-idp-development-plan-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="set-idp-development-plan-table-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div 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="#set-idp-development-plan-modal-add">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'Care Competency','CC'],
['02', 'Management Competency','MC'],
['03', 'Position Competency','PC'],];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#set-idp-development-plan-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 id="set-idp-development-plan-table-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="max-h-full overflow-hidden ti-modal-content">
<div 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="#set-idp-development-plan-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'Care Competency','CC'],
['02', 'Management Competency','MC'],
['03', 'Position Competency','PC'],];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#set-idp-development-plan-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 id="set-idp-development-plan-alert-add-modal" class="hs-overlay hidden ti-modal"> <div id="set-idp-development-plan-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">
...@@ -579,7 +143,7 @@ ...@@ -579,7 +143,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="#set-idp-development-plan-alert-add-modal" (click)="showSuccess()"> data-hs-overlay="#set-idp-development-plan-alert-add-modal" (click)="saveIdp()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -588,74 +152,3 @@ ...@@ -588,74 +152,3 @@
</div> </div>
</div> </div>
<div id="set-idp-development-plan-alert-edit-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#set-idp-development-plan-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#set-idp-development-plan-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#set-idp-development-plan-alert-edit-modal" (click)="showSuccessEdit()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="set-idp-development-plan-alert-delete-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#set-idp-development-plan-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการลบข้อมูลหรือไม่!
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#set-idp-development-plan-alert-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#set-idp-development-plan-alert-delete-modal"
(click)="showSuccessDelete()">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.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 { IdpDevelopmentModel, MyIdpDevelopmentModel } from 'src/app/shared/model/idp-development.model';
import { IdpDevelopmentService } from 'src/app/shared/services/idp-development.service';
@Component({ @Component({
selector: 'app-set-idp-development-plan', selector: 'app-set-idp-development-plan',
...@@ -7,66 +9,47 @@ import { ToastrService } from 'ngx-toastr'; ...@@ -7,66 +9,47 @@ import { ToastrService } from 'ngx-toastr';
styleUrls: ['./set-idp-development-plan.component.scss'] styleUrls: ['./set-idp-development-plan.component.scss']
}) })
export class SetIdpDevelopmentPlanComponent { export class SetIdpDevelopmentPlanComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนหลักสูตร', 'หลักสูตรการพัฒนา']; idpLoading = false
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); idpData: IdpDevelopmentModel = new MyIdpDevelopmentModel({})
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น constructor(private idpDevelopmentService: IdpDevelopmentService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
// ฟังก์ชันในการเปลี่ยนแท็บ ngOnInit(): void {
changeTab(tab: { id: string, text: string }) { this.getIdpData()
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ตั้งค่าผู้ใช้งาน', tab.text]);
this.activeTab = tab.id;
} }
// การจัดการการเปิดปิด modal getIdpData() {
modalOptions: { this.idpLoading = true
[nameModal: string]: { this.idpDevelopmentService.getList().subscribe({
isModalOpen: boolean; next: response => {
modalSize: string; this.idpData = new MyIdpDevelopmentModel(response)
backdropClose: boolean; this.idpData.developmentPlan.sort((a, b) => +a.planId - +b.planId)
}; this.idpLoading = false
} = { this.cdr.detectChanges()
"add": { }, error: error => {
isModalOpen: false, this.idpLoading = false
modalSize: 'm', this.cdr.detectChanges()
backdropClose: true, }
}, })
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
document.body.style.overflow = 'hidden';
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
} }
isAnyModalOpen(): boolean { saveIdp() {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่ this.idpDevelopmentService.post(this.idpData).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getIdpData()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
} }
// ฟังก์ชัน toggle checkbox
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ
}
currentModal = "";
constructor(private toastr: ToastrService) { }
showSuccess() { showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
...@@ -74,17 +57,10 @@ export class SetIdpDevelopmentPlanComponent { ...@@ -74,17 +57,10 @@ export class SetIdpDevelopmentPlanComponent {
}); });
} }
showSuccessEdit() { showAlert(text: string, type: 'success' | 'error') {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); })
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
} }
} }
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<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" <label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{dataSelectList.length}}
Selected</label> Selected</label>
</div> </div>
...@@ -35,28 +35,24 @@ ...@@ -35,28 +35,24 @@
<div class="px-1"> <div class="px-1">
<button type="button" <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" 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"> data-hs-overlay="#competency-topic-upload-modal">
<i class="ti ti-file-plus"></i> <i class="ti ti-file-plus"></i>
import import
</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 type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add" (click)="selectCompetencytopic()"> data-hs-overlay="#competency-topic-page-modal" (click)="modalStatus='add';setData()">
<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="#competency-topic-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<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="#competency-topic-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">
...@@ -106,18 +102,18 @@ ...@@ -106,18 +102,18 @@
<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.id}}" <input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
[(ngModel)]="item.checked" (change)="checkSelect()"> [(ngModel)]="item.check" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label> <label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label>
</td> </td>
<td>{{item.name}}</td> <td>{{item.data.name}}</td>
<td class="text-center">{{item.code}}</td> <td class="text-center">{{item.data.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" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#competency-topic-modal-edit" (click)="selectCompetencytopic(item)"></i> data-hs-overlay="#competency-topic-page-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.id!='100'"
data-hs-overlay="#competency-topic-alert-delete-modal" (click)="modalStatus='delete';setData(item.data)"
(click)="selectCompetencytopic(item)"></i> data-hs-overlay="#competency-topic-page-alert-modal"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -164,16 +160,16 @@ ...@@ -164,16 +160,16 @@
<div id="competency-topic-modal-add" class="hs-overlay hidden ti-modal"> <div id="competency-topic-page-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)]"> <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">
เพิ่มหัวข้อสมรรถนะ {{modalStatus=='add'?'เพิ่มหัวข้อสมรรถนะ':'แก้ไขประเภทสมรรถนะ'}}
</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-page-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>
...@@ -208,7 +204,7 @@ ...@@ -208,7 +204,7 @@
</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" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(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" [(ngModel)]="dataSelect.name"> <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>
...@@ -255,116 +251,11 @@ ...@@ -255,116 +251,11 @@
<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-page-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-add-modal"> data-hs-overlay="#competency-topic-page-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="competency-topic-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แก้ไขหัวข้อสมรรถนะ
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body mt-1">
<label for="input-label" class="ti-form-label">รหัส*</label>
<input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly
[(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
[(ngModel)]="dataSelect.definition"> </textarea>
<label class="ti-form-label mt-2rem">ประเภท Competency</label>
<div class="flex">
<div class="relative flex rounded-md w-1/2">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button"
name="hs-leading-button-add-on-with-icon-and-button"
class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10"
style="padding-right: 2.5rem;" [(ngModel)]="dataSelect.type.code">
<div
class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#competency-topic-table-modal-edit">
<i class="ri-search-line cursor-pointer text-gray"></i>
</button>
</div>
</div>
</div>
<label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label>
<div>
<div class="flex rounded-md">
<label for="file-input-medium" class="sr-only">อัปโหลดไฟล์</label>
<input type="file" id="file-input-medium" name="file-input-medium"
class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
<span
class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
<button class="text-sm text-gray-500 dark:text-white/70"
onclick="document.getElementById('file-input-medium').click();">Browse</button>
</span>
<div class="flex items-center ml-2">
<button href="javascript:void(0);"
class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
</div>
<div class="flex justify-end mt-3rem mb-1rem space-x-4">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-edit-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -382,7 +273,7 @@ ...@@ -382,7 +273,7 @@
</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-page-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>
...@@ -454,7 +345,7 @@ ...@@ -454,7 +345,7 @@
<div class="px-1"> <div class="px-1">
<button type="button" <button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#competency-topic-modal-add" data-hs-overlay="#competency-topic-page-modal"
(click)="selectCompetencytype(item)"> (click)="selectCompetencytype(item)">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Select Select
...@@ -653,7 +544,7 @@ ...@@ -653,7 +544,7 @@
</div> </div>
</div> </div>
<div id="competency-topic-alert-add-modal" class="hs-overlay hidden ti-modal"> <div id="competency-topic-page-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -661,99 +552,85 @@ ...@@ -661,99 +552,85 @@
แจ้งเตือน แจ้งเตือน
</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" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#competency-topic-alert-add-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#competency-topic-page-alert-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-page-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
</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">
ยืนยันการบันทึกข้อมูลหรือไม่ <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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 type="button"
data-hs-overlay="#competency-topic-modal-add"> 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-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" </button>
data-hs-overlay="#competency-topic-alert-add-modal" (click)="addUser()"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
บันทึกข้อมูล data-hs-overlay="#competency-topic-page-alert-modal" (click)="addCompetency_topic()">
</a> บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#competency-topic-page-alert-modal" (click)="deleteCompetency_topic()">
ลบข้อมูล
</a>
</ng-container>
</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-upload-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)] rounded-md">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<div class="ti-modal-header"> <h5 class="text-xxl font-bold text-white">
<h3 class="text-xxl font-bold text-primary"> นำเข้าหัวข้อสมรรถนะ
แจ้งเตือน </h5>
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div> </div>
</div> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
</div> <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div id="competency-topic-alert-delete-modal" class="hs-overlay hidden ti-modal"> <div class="mt-2 p-2">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="flex rounded-md">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <input #fileInput type="file" (change)="onFileSelected($event)" hidden>
<div class="ti-modal-header"> <input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
<h3 class="text-xxl font-bold text-primary"> class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
แจ้งเตือน <button type="button" (click)="fileInput.click()"
</h3> class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
<div class="flex justify-end"> <i class="ti ti-upload"></i>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#competency-topic-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> <div class="flex justify-center mt-2rem mb-1rem space-x-4">
<div class="ti-modal-body "> <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
<p class="mt-1 text-gray-800 dark:text-white/70"> [disabled]="!selectedFile">
ยืนยันการลบข้อมูลหรือไม่! อัปโหลด
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#competency-topic-alert-delete-modal">
ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล
</a>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
...@@ -4,6 +4,7 @@ import { MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.mod ...@@ -4,6 +4,7 @@ import { MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.mod
import { MyCompetencytypeModel } from 'src/app/shared/model/competencytype.model'; import { MyCompetencytypeModel } from 'src/app/shared/model/competencytype.model';
import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service'; import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service';
import { CompetencytypeService } from 'src/app/shared/services/competencytype.service'; import { CompetencytypeService } from 'src/app/shared/services/competencytype.service';
import { FileService } from 'src/app/shared/services/file.service';
export interface DataModel { export interface DataModel {
id: string id: string
name: string name: string
...@@ -27,14 +28,6 @@ export interface DataModel2 { ...@@ -27,14 +28,6 @@ export interface DataModel2 {
}) })
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 เริ่มต้น
...@@ -45,109 +38,96 @@ export class CompetencyTopic { ...@@ -45,109 +38,96 @@ export class CompetencyTopic {
this.activeTab = tab.id; this.activeTab = tab.id;
} }
// การจัดการการเปิดปิด modal currentPage = 1
modalOptions: { page = Array.from({ length: 1 }, (_, i) => i + 1);
[nameModal: string]: { search = ""
isModalOpen: boolean;
modalSize: string; currentPageModal = 1
backdropClose: boolean; pageModal = Array.from({ length: 1 }, (_, i) => i + 1);
}; searchModal = ""
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
// [
// ['CC-01', 'จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)','CC'],
// ['CC-02', 'การทำงานเป็นทีมแบบ TAT (TAT Teamwork)','CC'],
// ['CC-03', 'ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)','CC'],
// ['MC-01', 'การคิดเชิงกลยุทธิ์ (Strategic Thinking)','MC'],
// ['MC-02', 'การมีทัศนคติเชิงบวก (Mindset-Growth)','MC'],
// ['PC-01', 'ความรู้ด้านกฏหมายแรงงาน, กฏหมายแพ่งภาณิชย์, กฏหมายอาญา','PC']
mockData: DataModel[] = [] isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
currentModal = "";
dataLoading = false dataLoading = false
dataSelectList: DataModel[] = [];
dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false } dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }
competencytypeListLoading = false competencytypeListLoading = false
competencytypeList: DataModel2[] = [] competencytypeList: DataModel2[] = []
mockDataSelect: any = [] competoncyTopicList: { check: boolean; data: DataModel & { checked?: boolean } }[] = []
openModal(name: string, size: string, closeOnBackdrop?: boolean) { modalStatus = 'add'
this.modalOptions[name].modalSize = size; selectedFile: File | null = null;
this.modalOptions[name].backdropClose = closeOnBackdrop || false; selectedFileName: string = 'กรุณาเลือกไฟล์';
this.modalOptions[name].isModalOpen = true; selectedItems: string[] = [];
this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
document.body.style.overflow = 'hidden';
}
closeModal(name: string) { constructor(private toastr: ToastrService,
this.modalOptions[name].isModalOpen = false; private cdr: ChangeDetectorRef,
if (!this.isAnyModalOpen()) { private fileService: FileService,
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว private competencytopicService: CompetencytopicService,
} private competencytypeService: CompetencytypeService
) { }
ngOnInit(): void {
this.getCompetencytopicList()
this.getCompetencytypeList()
} }
isAnyModalOpen(): boolean { checkSelect() {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่ this.dataSelectList = this.competoncyTopicList.filter(item => item.check).map(item => item.data);
} }
// ฟังก์ชัน toggle checkbox
isChecked: boolean = false; // ใช้สำหรับตรวจสอบสถานะของ checkbox
toggleCheckbox() { toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ' this.isChecked = !this.isChecked; // สลับสถานะ'
this.mockData.forEach((item) => { this.competoncyTopicList.forEach((item) => {
item.checked = this.isChecked; item.check = this.isChecked;
}); });
this.checkSelect(); this.checkSelect();
} }
checkSelect() { onFileSelected(event: any) {
this.mockDataSelect = this.mockData.filter(item => item.checked); this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
} }
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล uploadFile() {
addUser() { if (!this.selectedFile) {
const body = new MyCompetencytopicModel({ alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
competencyTopicId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, competencyDetail: this.dataSelect.definition, return
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 }), }
}) const formData = new FormData();
this.competencytopicService.post(body).subscribe((response: any) => { formData.append('file', this.selectedFile);
if (response.success) { this.fileService.upload(formData, 'competency_topic').subscribe({
this.showSuccess() next: response => {
this.getCompetencytopicList() if (response.success) {
this.showAlert(response.message, 'success')
this.getCompetencytypeList()
this.getCompetencytopicList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
deleteUser() {
const body = new MyCompetencytopicModel({ downloadFile() {
competencyTopicId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, competencyDetail: this.dataSelect.definition, const fileName = 'IMPORT_COMPETENCY_TOPIC.xlsx'
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.fileService.download(fileName).subscribe({
}) next: response => {
this.competencytopicService.delete(body).subscribe((response: any) => { const url = window.URL.createObjectURL(response);
if (response.success) { const a = document.createElement("a");
this.showSuccessDelete() a.href = url;
this.getCompetencytopicList() a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
}
currentModal = "";
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private competencytopicService: CompetencytopicService,
private competencytypeService: CompetencytypeService
) { }
ngOnInit(): void {
this.getCompetencytopicList()
this.getCompetencytypeList()
} }
getCompetencytypeList() { getCompetencytypeList() {
this.competencytypeListLoading = true this.competencytypeListLoading = true
this.competencytypeService.getList().subscribe({ this.competencytypeService.getList().subscribe({
...@@ -169,7 +149,7 @@ export class CompetencyTopic { ...@@ -169,7 +149,7 @@ export class CompetencyTopic {
competencytypeListFilter() { competencytypeListFilter() {
return this.competencytypeList.filter(x => { return this.competencytypeList.filter(x => {
const data = x const data = x
const match = data.id.includes(this.searchModal) || data.name.includes(this.searchModal) || data.code.includes(this.searchModal); const match = data.id.toLowerCase().includes(this.searchModal) || data.name.toLowerCase().includes(this.searchModal) || data.code.toLowerCase().includes(this.searchModal);
return match; return match;
}); });
} }
...@@ -180,16 +160,19 @@ export class CompetencyTopic { ...@@ -180,16 +160,19 @@ export class CompetencyTopic {
this.dataLoading = true this.dataLoading = true
this.competencytopicService.getList().subscribe({ this.competencytopicService.getList().subscribe({
next: response => { next: response => {
this.mockData = response.map(x => ({ this.competoncyTopicList = response.map(x => ({
id: x.competencyTopicId, name: x.tdesc, edesc: x.edesc, code: x.competencyType.shortName, definition: x.competencyDetail, check: false, data: {
type: { id: x.competencyType.competencyTypeId, name: x.competencyType.tdesc, edesc: x.competencyType.edesc, code: x.competencyType.shortName, level: x.expectationLevel }, id: x.competencyTopicId, name: x.tdesc, edesc: x.edesc, code: x.competencyType.shortName, definition: x.competencyDetail,
checked: false 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.dataLoading = false
this.searchChange() this.searchChange()
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.dataLoading = false this.dataLoading = false
console.error('Error fetching employee types:', error);
this.cdr.detectChanges() this.cdr.detectChanges()
} }
}) })
...@@ -199,34 +182,69 @@ export class CompetencyTopic { ...@@ -199,34 +182,69 @@ export class CompetencyTopic {
this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
} }
dataListFilter() { dataListFilter() {
return this.mockData.filter(x => { return this.competoncyTopicList.filter(x => {
const data = x const data = x.data
const match = data.id.includes(this.search) || data.name.includes(this.search) || data.code.includes(this.search); const match = data.id.toLowerCase().includes(this.search) || data.name.toLowerCase().includes(this.search) || data.code.toLowerCase().includes(this.search);
return match; return match;
}); });
} }
selectCompetencytopic(data?: DataModel) { setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false })); this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }));
} }
showSuccess() { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { addCompetency_topic() {
timeOut: 3000, const body = new MyCompetencytopicModel({
positionClass: 'toast-top-right', 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({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getCompetencytypeList()
this.getCompetencytopicList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
} }
deleteCompetency_topic() {
showSuccessEdit() { let body: any
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { if (this.modalStatus == "deleteGroup") {
timeOut: 3000, body = this.competoncyTopicList.filter(x => x.check).map(x => new MyCompetencytopicModel({
positionClass: 'toast-top-right', competencyTopicId: x.data.id, tdesc: x.data.name, edesc: x.data.edesc, competencyDetail: x.data.definition,
}); competencyType: new MyCompetencytypeModel({ competencyTypeId: x.data.type.id, tdesc: x.data.type.name, edesc: x.data.type.edesc, shortName: x.data.type.code, expectationLevel: x.data.type.level }),
}))
} else {
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 }),
})
}
console.log(body)
this.competencytopicService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getCompetencytypeList()
this.getCompetencytopicList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
} }
showSuccessDelete() { showAlert(text: string, type: 'success' | 'error') {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); })
} }
} }
src/app/components/competency-assessment/name-registration/name-registration.component.html
...@@ -10,22 +10,22 @@ ...@@ -10,22 +10,22 @@
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse"> <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active" <a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1" href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" (click)="pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','ประเภทสมรรถนะ']"> aria-controls="underline-1" (click)=" currentPage = 1;pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','ประเภทสมรรถนะ']">
ประเภทสมรรถนะ ประเภทสมรรถนะ
</a> </a>
<a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary" <a class="text-base font-medium hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 dark:text-white/70 hover:text-secondary"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2" href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2" (click)="pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','หัวข้อสมรรถนะ']"> aria-controls="underline-2" (click)="currentPage = 2;pathTitle = ['การประเมินสมรรถนะ','ทะเบียนกำหนดชื่อ','หัวข้อสมรรถนะ']">
หัวข้อสมรรถนะ หัวข้อสมรรถนะ
</a> </a>
</nav> </nav>
</div> </div>
<div class="mt-3 px-3rem !-mt-3 pt-50px"> <div class="mt-3 px-3rem !-mt-3 pt-50px">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"> <div *ngIf="currentPage == 1" id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-type-registration [pathTitle]="pathTitle" <app-type-registration [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-type-registration> (sendPathTitle)="pathTitle=$event"></app-type-registration>
</div> </div>
<div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2"> <div *ngIf="currentPage == 2" id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
<app-competency-topic [pathTitle]="pathTitle" <app-competency-topic [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-competency-topic> (sendPathTitle)="pathTitle=$event"></app-competency-topic>
</div> </div>
......
src/app/components/competency-assessment/name-registration/name-registration.component.ts
...@@ -7,4 +7,5 @@ import { Component } from '@angular/core'; ...@@ -7,4 +7,5 @@ import { Component } from '@angular/core';
}) })
export class NameRegistrationComponent { export class NameRegistrationComponent {
pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ','ประเภทสมรรถนะ'] pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนกำหนดชื่อ','ประเภทสมรรถนะ']
currentPage = 1
} }
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<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" <label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{mockDataSelect.length}} class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{dataSelectList.length}}
Selected</label> Selected</label>
</div> </div>
...@@ -35,28 +35,24 @@ ...@@ -35,28 +35,24 @@
<div class="px-1"> <div class="px-1">
<button type="button" <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" 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-upload-modal">
<i class="ti ti-file-plus"></i> <i class="ti ti-file-plus"></i>
import import
</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 type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#type-registration-component-modal-add" (click)="selectCompetencytype()"> data-hs-overlay="#type-registration-component-page-modal" (click)="modalStatus='add';setData()">
<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-page-alert-modal" (click)="modalStatus='deleteGroup';setData()">
<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">
...@@ -105,19 +101,18 @@ ...@@ -105,19 +101,18 @@
<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.id}}" <input *ngIf="item.data.id!='100'" type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
[(ngModel)]="item.checked" (change)="checkSelect()"> [(ngModel)]="item.check" (change)="checkSelect()">
<label for="checkbox-{{item.id}}">&nbsp;{{item.id}}</label> <label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label>
</td> </td>
<td>{{item.name}}</td> <td>{{item.data.name}}</td>
<td class="text-center">{{item.code}}</td> <td class="text-center">{{item.data.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" <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="modalStatus='edit';setData(item.data)"
data-hs-overlay="#type-registration-component-modal-edit" data-hs-overlay="#type-registration-component-page-modal"></i>
(click)="selectCompetencytype(item)"></i> <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" *ngIf="item.data.id!='100'"
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#type-registration-component-alert-delete-modal" data-hs-overlay="#type-registration-component-page-alert-modal"></i>
(click)="selectCompetencytype(item)"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
...@@ -164,16 +159,16 @@ ...@@ -164,16 +159,16 @@
<div id="type-registration-component-modal-add" class="hs-overlay hidden ti-modal"> <div id="type-registration-component-page-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)]"> <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">
เพิ่มประเภทสมรรถนะ {{modalStatus=='add'?'เพิ่มประเภทสมรรถนะ':'แก้ไขประเภทสมรรถนะ'}}
</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="#type-registration-component-modal-add"> data-hs-overlay="#type-registration-component-page-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>
...@@ -208,7 +203,7 @@ ...@@ -208,7 +203,7 @@
</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" [(ngModel)]="dataSelect.id"> <input type="text" id="input-label" class="ti-form-input w-1/2" [ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'" [(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" [(ngModel)]="dataSelect.name"> <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>
...@@ -221,11 +216,11 @@ ...@@ -221,11 +216,11 @@
<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="#type-registration-component-modal-add"> data-hs-overlay="#type-registration-component-page-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="#type-registration-component-alert-modal"> data-hs-overlay="#type-registration-component-page-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -234,78 +229,7 @@ ...@@ -234,78 +229,7 @@
</div> </div>
</div> </div>
<div id="type-registration-component-modal-edit" class="hs-overlay hidden ti-modal"> <div id="type-registration-component-page-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)]">
<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="#type-registration-component-modal-edit">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" style="padding-right: 1rem;">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body" style="padding-top: 0px;">
<label for="input-label" class="ti-form-label mt-1rem">รหัส *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.id">
<label for="detail_th" class="ti-form-label mt-1rem">ชื่อประเภท (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.name">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อประเภท (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.edesc">
<label for="detail_eng" class="ti-form-label mt-1rem">ชื่อย่อ *</label>
<input type="text" id="detail_eng" class="ti-form-input w-2/3" [(ngModel)]="dataSelect.code">
<label for="detail_eng" class="ti-form-label mt-1rem">ระดับความคาดหวัง *</label>
<input type="text" id="detail_eng" class="ti-form-input" style="width: 200px;"
[(ngModel)]="dataSelect.level">
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#type-registration-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#type-registration-component-alert-edit-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<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 w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header"> <div class="ti-modal-header">
...@@ -313,99 +237,85 @@ ...@@ -313,99 +237,85 @@
แจ้งเตือน แจ้งเตือน
</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" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
data-hs-overlay="#type-registration-component-alert-modal"> <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
<span class="sr-only">Close</span> data-hs-overlay="#type-registration-component-page-alert-modal">
<i class="ti ti-circle-x fs-xxl"></i> <span class="sr-only">Close</span>
</button> <i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#type-registration-component-page-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</ng-container>
</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">
ยืนยันการบันทึกข้อมูลหรือไม่ <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
ยืนยันการบันทึกข้อมูลหรือไม่
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
ยืนยันการลบข้อมูลหรือไม่
</ng-container>
</p> </p>
<div class="flex justify-end mt-2rem mb-1rem"> <div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <ng-container *ngIf="modalStatus=='add'||modalStatus=='edit'">
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 type="button"
data-hs-overlay="#type-registration-component-modal-add"> 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="#type-registration-component-page-modal">
</button> ย้อนกลับ
<a class="ti-btn ti-btn-success" href="javascript:void(0);" </button>
data-hs-overlay="#type-registration-component-alert-modal" (click)="addUser()"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
บันทึกข้อมูล data-hs-overlay="#type-registration-component-page-alert-modal" (click)="addType_registration()">
</a> บันทึกข้อมูล
</a>
</ng-container>
<ng-container *ngIf="modalStatus=='delete'||modalStatus=='deleteGroup'">
<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="#type-registration-component-page-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-danger" href="javascript:void(0);"
data-hs-overlay="#type-registration-component-page-alert-modal" (click)="deleteType_registration()">
ลบข้อมูล
</a>
</ng-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="type-registration-component-alert-edit-modal" class="hs-overlay hidden ti-modal"> <div id="type-registration-component-upload-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)] rounded-md">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="ti-modal-header bg-primary !rounded-none !rounded-t-sm">
<div class="ti-modal-header"> <h5 class="text-xxl font-bold text-white">
<h3 class="text-xxl font-bold text-primary"> นำเข้าประเภทสมรรถนะ
แจ้งเตือน </h5>
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#type-registration-component-alert-edit-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการเเก้ไขข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#type-registration-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#type-registration-component-alert-edit-modal" (click)="addUser()">
บันทึกข้อมูล
</a>
</div>
</div>
</div> </div>
</div> <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
</div> <h1 class="mt-2" style="text-align: center;">ไฟล์</h1>
<div id="type-registration-component-alert-delete-modal" class="hs-overlay hidden ti-modal"> <div class="mt-2 p-2">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"> <div class="flex rounded-md">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <input #fileInput type="file" (change)="onFileSelected($event)" hidden>
<div class="ti-modal-header"> <input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
<h3 class="text-xxl font-bold text-primary"> class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
แจ้งเตือน <button type="button" (click)="fileInput.click()"
</h3> class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
<div class="flex justify-end"> <i class="ti ti-upload"></i>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#type-registration-component-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> <div class="flex justify-center mt-2rem mb-1rem space-x-4">
<div class="ti-modal-body "> <button type="submit" class="ti-btn ti-btn-secondary" (click)="uploadFile()"
<p class="mt-1 text-gray-800 dark:text-white/70"> [disabled]="!selectedFile">
ยืนยันการลบข้อมูลหรือไม่! อัปโหลด
</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="#type-registration-component-alert-delete-modal">
ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#type-registration-component-alert-delete-modal" (click)="deleteUser()">
ลบข้อมูล
</a>
</div> </div>
</div> </div>
</div> </div>
......
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts
import { ChangeDetectorRef, 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 { CompetencytypeModel, MyCompetencytypeModel } from 'src/app/shared/model/competencytype.model';
import { CompetencytypeService } from 'src/app/shared/services/competencytype.service'; import { CompetencytypeService } from 'src/app/shared/services/competencytype.service';
import { FileService } from 'src/app/shared/services/file.service';
export interface DataModel { export interface DataModel {
id: string id: string
name: string companyId: string
edesc: string edesc: string
name: string
code: string code: string
level: string level: string
checked: boolean checked: boolean
...@@ -19,13 +21,6 @@ export class TypeRegistration { ...@@ -19,13 +21,6 @@ export class TypeRegistration {
@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 เริ่มต้น
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 }) {
...@@ -33,102 +28,98 @@ export class TypeRegistration { ...@@ -33,102 +28,98 @@ export class TypeRegistration {
this.activeTab = tab.id; this.activeTab = tab.id;
} }
isChecked: boolean = false;
currentPage = 1
selectedItems: string[] = [];
page = Array.from({ length: 1 }, (_, i) => i + 1);
dataSelectList: DataModel[] = [];
dataLoading = false
dataSelect: DataModel = { id: "", companyId: "", edesc: "", name: "", code: "", level: "", checked: false }
competoncy_typeList: { check: boolean; data: DataModel & { checked?: boolean } }[] = []
competoncy_type: CompetencytypeModel = new MyCompetencytypeModel({})
modalStatus = 'add'
search = ""
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
constructor(private competencytypeService: CompetencytypeService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private fileService: FileService
// การจัดการการเปิดปิด modal ) { }
modalOptions: { ngOnInit(): void {
[nameModal: string]: { this.getCompetencytypeList()
isModalOpen: boolean;
modalSize: string;
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
toggleCheckbox(): void {
this.isChecked = !this.isChecked;
this.mockData.forEach((item) => {
item.checked = this.isChecked;
});
this.checkSelect();
} }
mockData: DataModel[] = []
dataLoading = false
dataSelect: DataModel = { id: "", name: "", edesc: "", code: "", level: "", checked: false }
mockDataSelect: any = []
checkSelect() { checkSelect() {
this.mockDataSelect = this.mockData.filter(item => item.checked); this.dataSelectList = this.competoncy_typeList.filter(item => item.check).map(item => item.data);
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
document.body.style.overflow = 'hidden';
} }
closeModal(name: string) { toggleCheckbox() {
this.modalOptions[name].isModalOpen = false; this.isChecked = !this.isChecked; // สลับสถานะ'
if (!this.isAnyModalOpen()) { this.competoncy_typeList.forEach((item) => {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว item.check = this.isChecked;
} });
this.checkSelect();
} }
isAnyModalOpen(): boolean { onFileSelected(event: any) {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่ this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
} }
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล uploadFile() {
addUser() { if (!this.selectedFile) {
const body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, expectationLevel: this.dataSelect.level }) alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
this.competencytypeService.post(body).subscribe((response: any) => { return
if (response.success) { }
this.showSuccess() const formData = new FormData();
this.getCompetencytypeList() formData.append('file', this.selectedFile);
this.fileService.upload(formData, 'competency_type').subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getCompetencytypeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
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 }) downloadFile() {
this.competencytypeService.delete(body).subscribe((response: any) => { const fileName = 'IMPORT_COMPETENCY_TYPE.xlsx'
if (response.success) { this.fileService.download(fileName).subscribe({
this.showSuccessDelete() next: response => {
this.getCompetencytypeList() const url = window.URL.createObjectURL(response);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, error: error => {
this.showAlert(error.message, 'error')
} }
}) })
} }
currentModal = ""
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private competencytypeService: CompetencytypeService
) { }
ngOnInit(): void {
this.getCompetencytypeList()
}
getCompetencytypeList() { getCompetencytypeList() {
this.dataLoading = true this.dataLoading = true
this.competencytypeService.getList().subscribe({ this.competencytypeService.getList().subscribe({
next: response => { 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.competoncy_typeList = response.map(x => ({ check: false, data: { id: x.competencyTypeId, companyId: x.companyId, edesc: x.edesc, name: x.tdesc, code: x.shortName, level: x.expectationLevel, checked: false } }))
this.dataLoading = false this.dataLoading = false
this.searchChange() this.searchChange()
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.dataLoading = false this.dataLoading = false
console.error('Error fetching employee types:', error);
this.cdr.detectChanges() this.cdr.detectChanges()
} }
}) })
...@@ -138,33 +129,60 @@ export class TypeRegistration { ...@@ -138,33 +129,60 @@ export class TypeRegistration {
this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1); this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
} }
dataListFilter() { dataListFilter() {
return this.mockData.filter(x => { return this.competoncy_typeList.filter(x => {
const data = x const data = x.data
const match = data.id.includes(this.search) || data.name.includes(this.search) || data.code.includes(this.search); const match = data.id.toLowerCase().includes(this.search) || data.name.toLowerCase().includes(this.search) || data.code.toLowerCase().includes(this.search);
return match; return match;
}); });
} }
selectCompetencytype(data?: DataModel) { setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", level: "", checked: false })); this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", companyId: "", name: "", edesc: "", code: "", level: "" }));
} }
showSuccess() { // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { addType_registration() {
timeOut: 3000, const body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, expectationLevel: this.dataSelect.level })
positionClass: 'toast-top-right', this.competencytypeService.post(body).subscribe({
}); next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getCompetencytypeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
} }
showSuccessEdit() { deleteType_registration() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { let body: CompetencytypeModel | CompetencytypeModel[] = [];
timeOut: 3000,
positionClass: 'toast-top-right', if (this.dataSelect.id) {
body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, expectationLevel: this.dataSelect.level });
} else {
body = this.competoncy_typeList.filter(x => x.check).map(x => new MyCompetencytypeModel({ competencyTypeId: x.data.id, tdesc: x.data.name, edesc: x.data.edesc, shortName: x.data.code, expectationLevel: x.data.level }));
}
this.competencytypeService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success');
this.getCompetencytypeList();
} else {
this.showAlert(response.message, 'error');
}
},
error: error => {
this.showAlert(error.message, 'error')
}
}); });
} }
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
}); })
} }
} }
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
<div class="grid grid-cols-3 gap-6"> <div class="grid grid-cols-3 gap-6">
<div class="col-span-1"> <div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="2567"> <input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="{{ setting.apsyear }}">
</div> </div>
</div> </div>
<div class="grid grid-cols-3 gap-6 mt-10"> <div class="grid grid-cols-3 gap-6 mt-10">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</div> </div>
<div class="grid grid-cols-3 gap-6"> <div class="grid grid-cols-3 gap-6">
<div class="col-span-1"> <div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="8"> <input type="text" id="input-label" class="ti-form-input w-2/3 pr-10" value="{{ setting.expectationLevel }}">
</div> </div>
</div> </div>
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label> <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label mt-10">จัดการสมรรถนะกับกลุ่ม *</label>
...@@ -43,13 +43,13 @@ ...@@ -43,13 +43,13 @@
<div class="grid grid-cols-6 flex gap-x-6"> <div class="grid grid-cols-6 flex gap-x-6">
<div class="flex col-span-1 mt-5"> <div class="flex col-span-1 mt-5">
<input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-1" checked> <input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-1" checked>
<label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">ระดับพนักงาน (PL)</label> <label for="hs-radio-group-1" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">{{ setting.companyId }}</label>
</div> </div>
<div class="flex col-span-2 mt-5 ml-4rem"> <!-- <div class="flex col-span-2 mt-5 ml-4rem">
<input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-2"> <input type="radio" name="hs-radio-group" class="ti-form-radio" id="hs-radio-group-2">
<label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">ลักษณะงาน ( JD)</label> <label for="hs-radio-group-2" class="text-sm text-gray-500 ltr:ml-5 rtl:mr-2 dark:text-white/70">ลักษณะงาน ( JD)</label>
</div> </div> -->
</div> </div>
</div> </div>
...@@ -69,11 +69,11 @@ ...@@ -69,11 +69,11 @@
<tbody> <tbody>
<tr> <tr>
<td>น้ำหนัก</td> <td>น้ำหนัก</td>
<td><span>1</span></td> <td><span>{{ setting.settingScore5 }}</span></td>
<td><span>0.8</span></td> <td><span>{{ setting.settingScore4 }}</span></td>
<td><span>0.6</span></td> <td><span>{{ setting.settingScore3 }}</span></td>
<td><span>0.4</span></td> <td><span>{{ setting.settingScore2 }}</span></td>
<td><span>0.2</span></td> <td><span>{{ setting.settingScore1 }}</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
......
src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.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 { MySettingAssessmentModel, SettingAssessmentModel } from 'src/app/shared/model/setting-assessment.model';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
@Component({ @Component({
selector: 'app-competency-configuration', selector: 'app-competency-configuration',
...@@ -11,8 +13,63 @@ export class CompetencyConfigurationComponent { ...@@ -11,8 +13,63 @@ export class CompetencyConfigurationComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
isChecked: boolean = false; isChecked: boolean = false;
settingList: SettingAssessmentModel[] = []
settingListLoading = false
setting: SettingAssessmentModel = new MySettingAssessmentModel({})
search = ""
constructor(private settingAssessmentService: SettingAssessmentService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getSettingList()
}
getSettingList() {
this.settingListLoading = true
this.settingAssessmentService.getList().subscribe({
next: response => {
this.settingList = response
this.settingListLoading = false
this.cdr.detectChanges()
}, error: error => {
this.settingListLoading = false
this.cdr.detectChanges()
}
})
}
selectsetting(setting?: SettingAssessmentModel) {
this.setting = new MySettingAssessmentModel(setting || {})
}
// showSuccessAdd() {
// this.toastr.success('บันทึกข้อมูลสำเร็จ', 'แจ้งเตือน', {
// timeOut: 3000,
// positionClass: 'toast-top-right',
// });
// }
// showSuccessDelete() {
// this.toastr.success('ลบข้อมูลสำเร็จ', 'แจ้งเตือน', {
// timeOut: 3000,
// positionClass: 'toast-top-right',
// });
// }
// addsetting() {
// this.settingAssessmentService.post(this.setting).subscribe((response: any) => {
// if (response.success) {
// this.showSuccessAdd()
// this.getSettingList()
// }
// })
// }
// deletesetting() {
// this.settingAssessmentService.delete(this.setting).subscribe((response: any) => {
// if (response.success) {
// this.showSuccessDelete()
// this.getSettingList()
// }
// })
// }
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) { changeTab(tab: { id: string, text: string }) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'การตั้งค่า', tab.text]); this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'การตั้งค่า', tab.text]);
this.activeTab = tab.id; this.activeTab = tab.id;
...@@ -22,69 +79,5 @@ export class CompetencyConfigurationComponent { ...@@ -22,69 +79,5 @@ export class CompetencyConfigurationComponent {
this.isChecked = !this.isChecked; this.isChecked = !this.isChecked;
} }
// การจัดการการเปิดปิด modal
modalOptions: {
[nameModal: string]: {
isModalOpen: boolean;
modalSize: string;
backdropClose: boolean;
};
} = {
"add": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
};
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
this.currentModal = name; // ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
document.body.style.overflow = 'hidden';
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
if (!this.isAnyModalOpen()) {
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen(): boolean {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
}
currentModal = ""
constructor(private toastr: ToastrService) { }
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
} }
src/app/components/dashboard/dashboard.module.ts
...@@ -119,6 +119,8 @@ import { CompetencytopicService } from 'src/app/shared/services/competencytopic. ...@@ -119,6 +119,8 @@ import { CompetencytopicService } from 'src/app/shared/services/competencytopic.
import { AssessmentService } from 'src/app/shared/services/assessment.service'; import { AssessmentService } from 'src/app/shared/services/assessment.service';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service'; import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
import { EmployeeService } from 'src/app/shared/services/employee.service'; import { EmployeeService } from 'src/app/shared/services/employee.service';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core'; import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
...@@ -131,6 +133,7 @@ import { JobCodeService } from 'src/app/shared/services/่job-code.service'; ...@@ -131,6 +133,7 @@ import { JobCodeService } from 'src/app/shared/services/่job-code.service';
import { FileService } from 'src/app/shared/services/file.service'; import { FileService } from 'src/app/shared/services/file.service';
import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service'; import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service';
import { IndicatorsCoursesService } from 'src/app/shared/services/indicators-courses.service'; import { IndicatorsCoursesService } from 'src/app/shared/services/indicators-courses.service';
import { IdpDevelopmentService } from 'src/app/shared/services/idp-development.service';
export const MY_DATE_FORMATS = { export const MY_DATE_FORMATS = {
parse: { parse: {
...@@ -287,11 +290,14 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -287,11 +290,14 @@ export class CustomDateAdapter extends NativeDateAdapter {
AssessmentService, AssessmentService,
CompetencycourseService, CompetencycourseService,
EmployeeService, EmployeeService,
EvaluationCycleService,
SettingAssessmentService,
JobCodeService, JobCodeService,
BranchService, BranchService,
FileService, FileService,
CompetencyGroupGradeService, CompetencyGroupGradeService,
IndicatorsCoursesService, IndicatorsCoursesService,
IdpDevelopmentService,
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor, useClass: HttpRequestInterceptor,
......
src/app/shared/model/evaluation-cycle.model.ts 0 → 100644
import { MyStatusCodeModel, StatusCodeModel } from "./status-code.model";
export interface EvaluationCycleModel {
evaluationRoundId: string;
tdesc: string;
edesc: string;
apsyear: string;
apsPeriodStart: string;
apsPeriodEnd: string;
statusCode: StatusCodeModel;
}
export class MyEvaluationCycleModel implements EvaluationCycleModel {
evaluationRoundId: string;
tdesc: string;
edesc: string;
apsyear: string;
apsPeriodStart: string;
apsPeriodEnd: string;
statusCode: StatusCodeModel;
constructor(data: Partial<EvaluationCycleModel>) {
this.evaluationRoundId = data.evaluationRoundId || "";
this.tdesc = data.tdesc || "";
this.edesc = data.edesc || "";
this.apsyear = data.apsyear || "";
this.apsPeriodStart = data.apsPeriodStart || "";
this.apsPeriodEnd = data.apsPeriodEnd || "";
this.statusCode =new MyStatusCodeModel(data.statusCode || {})
}
}
src/app/shared/model/idp-development.model.ts 0 → 100644
export interface DevelopmentPlan {
planId: string;
companyId: string;
ojtJobAssignment: boolean;
coachMentor: boolean;
training: boolean;
}
export interface IdpDevelopmentModel {
evaluationId: string;
companyId: string;
score: number;
developmentPlan: DevelopmentPlan[];
}
export class MyIdpDevelopmentModel implements IdpDevelopmentModel {
evaluationId: string;
companyId: string;
score: number;
developmentPlan: DevelopmentPlan[];
constructor(data: Partial<IdpDevelopmentModel>) {
this.evaluationId = data.evaluationId || '';
this.companyId = data.companyId || '';
this.score = data.score ?? 0;
this.developmentPlan = data.developmentPlan || [];
}
}
\ No newline at end of file
src/app/shared/model/setting-assessment.model.ts 0 → 100644
export interface SettingAssessmentModel {
apsyear: string;
companyId: string;
expectationLevel: number;
settingGroupAssessment: string;
settingScore5: number;
settingScore4: number;
settingScore3: number;
settingScore2: number;
settingScore1: number;
}
export class MySettingAssessmentModel implements SettingAssessmentModel {
apsyear: string;
companyId: string;
expectationLevel: number;
settingGroupAssessment: string;
settingScore5: number;
settingScore4: number;
settingScore3: number;
settingScore2: number;
settingScore1: number;
constructor(data: Partial<SettingAssessmentModel>) {
this.apsyear = data.apsyear || "";
this.companyId = data.companyId || "";
this.expectationLevel = data.expectationLevel ?? 0;
this.settingGroupAssessment = data.settingGroupAssessment || "";
this.settingScore5 = data.settingScore5 ?? 0;
this.settingScore4 = data.settingScore4 ?? 0;
this.settingScore3 = data.settingScore3 ?? 0;
this.settingScore2 = data.settingScore2 ?? 0;
this.settingScore1 = data.settingScore1 ?? 0;
}
}
\ No newline at end of file
src/app/shared/model/status-code.model.ts 0 → 100644
export interface StatusCodeModel {
code: string;
tdesc: string;
edesc: string;
}
export class MyStatusCodeModel implements StatusCodeModel {
code: string;
tdesc: string;
edesc: string;
constructor(data: Partial<StatusCodeModel>) {
this.code = data.code || "";
this.tdesc = data.tdesc || "";
this.edesc = data.edesc || "";
}
}
\ No newline at end of file
src/app/shared/services/competencytopic.service.ts
...@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core'; ...@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { CompetencytopicModel } from '../model/competencytopic.model'; import { CompetencytopicModel } from '../model/competencytopic.model';
import { AlertModel } from '../model/alert.model';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
...@@ -17,16 +18,16 @@ export class CompetencytopicService { ...@@ -17,16 +18,16 @@ export class CompetencytopicService {
getList(): Observable<CompetencytopicModel[]> { getList(): Observable<CompetencytopicModel[]> {
return this.http.get<CompetencytopicModel[]>(this.urlApi + "/lists") return this.http.get<CompetencytopicModel[]>(this.urlApi + "/lists")
} }
post(body: CompetencytopicModel) { post(body: CompetencytopicModel): Observable<AlertModel> {
return this.http.post(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
delete(body: CompetencytopicModel) { delete(body: CompetencytopicModel | CompetencytopicModel[]): Observable<AlertModel> {
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<AlertModel>(this.urlApi, options)
} }
} }
\ No newline at end of file
src/app/shared/services/competencytype.service.ts
...@@ -3,6 +3,8 @@ import { Injectable } from '@angular/core'; ...@@ -3,6 +3,8 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { CompetencytypeModel } from '../model/competencytype.model'; import { CompetencytypeModel } from '../model/competencytype.model';
import { AlertModel } from '../model/alert.model';
import { EmpGroupModel } from '../model/emp-group.model';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
...@@ -17,16 +19,16 @@ export class CompetencytypeService { ...@@ -17,16 +19,16 @@ export class CompetencytypeService {
getList(): Observable<CompetencytypeModel[]> { getList(): Observable<CompetencytypeModel[]> {
return this.http.get<CompetencytypeModel[]>(this.urlApi + "/lists") return this.http.get<CompetencytypeModel[]>(this.urlApi + "/lists")
} }
post(body: CompetencytypeModel) { post(body: CompetencytypeModel ): Observable<AlertModel> {
return this.http.post(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
delete(body: CompetencytypeModel) { delete(body: CompetencytypeModel | CompetencytypeModel[]): Observable<AlertModel> {
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<AlertModel>(this.urlApi, options)
} }
} }
\ No newline at end of file
src/app/shared/services/emp-group.service.ts
...@@ -19,18 +19,6 @@ export class EmpGroupService { ...@@ -19,18 +19,6 @@ 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: EmpGroupModel) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: EmpGroupModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
post(body: EmpGroupModel): Observable<AlertModel> { post(body: EmpGroupModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
......
src/app/shared/services/evaluation-cycle.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 { AlertModel } from '../model/alert.model';
import { EvaluationCycleModel } from '../model/evaluation-cycle.model';
@Injectable({
providedIn: 'root'
})
export class EvaluationCycleService {
api = "/evaluation-round"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<EvaluationCycleModel[]> {
return this.http.get<EvaluationCycleModel[]>(this.urlApi + "/lists")
}
getById(evaluationRoundId: string): Observable<EvaluationCycleModel> {
return this.http.get<EvaluationCycleModel>(this.urlApi + "/" + evaluationRoundId)
}
post(body: EvaluationCycleModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: EvaluationCycleModel | EvaluationCycleModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi, options)
}
}
src/app/shared/services/idp-development.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 { AlertModel } from '../model/alert.model';
import { IdpDevelopmentModel } from '../model/idp-development.model';
@Injectable({
providedIn: 'root'
})
export class IdpDevelopmentService {
api = "/idp"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<IdpDevelopmentModel> {
return this.http.get<IdpDevelopmentModel>(this.urlApi + "/lists")
}
// getById(companyId: string): Observable<IdpDevelopmentModel> {
// return this.http.get<IdpDevelopmentModel>(this.urlApi + "/" + companyId)
// }
post(body: IdpDevelopmentModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: IdpDevelopmentModel | IdpDevelopmentModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi, options)
}
}
src/app/shared/services/position.service.ts
...@@ -19,18 +19,6 @@ import { AlertModel } from '../model/alert.model'; ...@@ -19,18 +19,6 @@ import { AlertModel } from '../model/alert.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) {
// return this.http.post(this.urlApi, body)
// }
// delete(body: PositionModel) {
// const options = {
// headers: new HttpHeaders({
// "Content-Type": "application/json",
// }),
// body: body
// };
// return this.http.delete(this.urlApi, options)
// }
post(body: PositionModel): Observable<AlertModel> { post(body: PositionModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body) return this.http.post<AlertModel>(this.urlApi, body)
} }
......
src/app/shared/services/setting-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 { AlertModel } from '../model/alert.model';
import { SettingAssessmentModel } from '../model/setting-assessment.model';
@Injectable({
providedIn: 'root'
})
export class SettingAssessmentService {
api = "/setting-assessment"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<SettingAssessmentModel[]> {
return this.http.get<SettingAssessmentModel[]>(this.urlApi + "/lists")
}
// getById(companyId: string): Observable<SettingAssessmentModel> {
// return this.http.get<SettingAssessmentModel>(this.urlApi + "/" + companyId)
// }
post(body: SettingAssessmentModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: SettingAssessmentModel | SettingAssessmentModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi, options)
}
}
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