Skip to content

M
mySkill-x
Commit 215cd931 by Natthaphat
Options

การประเมินสมรรถนะ > การจัดการสมรรถนะ > ตัวชี้วัดและหลักสูตร 

การประเมินสมรรถนะ > การจัดการสมรรถนะ > จัดกลุ่มสมรรถนะ
parent 4b70dbad
Showing with 96 additions and 213 deletions
src/app/components/competency-assessment/competency-management/group-competencies/group-competencies.component.html
......@@ -5,7 +5,7 @@
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()">
[(ngModel)]="search">
<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>
......@@ -21,103 +21,14 @@
import
</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="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อระดับพนักงาน (ไทย)','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="dataLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1"
role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
{{item.code}}
</td>
<td class="text-center">{{item.name}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectGroupCompetencies(item);editTab=true;pathTitleChange()"></i>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length)
) :(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search"
[dataSource]="groupCompetenciesList" [checkBoxSetting]="false" [columns]="columns"
(sendSelectData)="selectGroupCompetencies($event); editTab = true">
</app-datagrid-syncfution>
</div>
</ng-container>
......
src/app/components/competency-assessment/competency-management/group-competencies/group-competencies.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { ToastrService } from 'ngx-toastr';
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';
export interface DataModel {
code: string
name: string
edesc: string
companyId: string
}
@Component({
selector: 'app-group-competencies',
......@@ -19,17 +14,34 @@ export class GroupCompetenciesComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
editTab = false
currentPage = 1
search = ""
page = Array.from({ length: 1 }, (_, i) => i + 1);
dataList: DataModel[] = []
dataSelect: DataModel = { code: '', name: '', edesc: '', companyId: '' }
groupCompetenciesList: PLModel[] = []
groupCompetencies: PLModel = new MyPLModel({})
dataLoading = false
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
columns: ColumnModel[] = [{
field: "plId",
headerText: "รหัส",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "ชื่อหัวข้อ",
type: "string"
}]
searchSettings = {
fields: ['competencyTopicId', 'tdesc'],
operator: 'contains',
ignoreCase: false
};
search = ''
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private fileService: FileService,
......@@ -38,7 +50,7 @@ export class GroupCompetenciesComponent {
this.pathTitleChange()
}
ngOnInit(): void {
this.getList()
this.getGroupCompetenciesList()
}
onFileSelected(event: any) {
......@@ -91,14 +103,17 @@ export class GroupCompetenciesComponent {
})
}
getList() {
getGroupCompetenciesList() {
this.dataLoading = true
this.selectedItems.data.clear()
this.pLService.getList().subscribe({
next: response => {
this.dataList = response.map(x => ({ code: x.plId, name: x.tdesc, edesc: x.edesc, companyId: x.companyId }))
this.groupCompetenciesList = response.map(x => {
this.selectedItems.data.set(x.plId, false)
return new MyPLModel(x)
})
this.groupCompetenciesList = response
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
......@@ -106,31 +121,16 @@ export class GroupCompetenciesComponent {
}
})
}
selectData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { code: '', name: '', edesc: '', companyId: '' }))
}
selectGroupCompetencies(data: DataModel) {
const groupCompetencies = this.groupCompetenciesList.find(x => x.plId == data.code)
selectGroupCompetencies(data: PLModel) {
const groupCompetencies = this.groupCompetenciesList.find(x => x.plId == data.plId)
this.groupCompetencies = new MyPLModel(groupCompetencies)
}
pathTitleChange() {
this.sendPathTitle.emit(this.editTab ? ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'จัดกลุ่มสมรรถนะ', 'แก้ไขกลุ่มสมรรถนะ'] : ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'จัดกลุ่มสมรรถนะ'])
}
searchChange() {
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
dataListFilter() {
return this.dataList.filter(x => {
const match = x.code.toLowerCase().includes(this.search.toLowerCase()) || x.name.toLowerCase().includes(this.search.toLowerCase());
return match;
});
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
......@@ -139,4 +139,8 @@ export class GroupCompetenciesComponent {
})
}
checkPrimary() {
return this.groupCompetenciesList.find(x => x.plId == this.groupCompetencies.plId)
}
}
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html
......@@ -4,7 +4,7 @@
<div class="px-1">
<div class="relative shadow-md">
<input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()">
[(ngModel)]="search">
<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>
......@@ -20,72 +20,19 @@
import
</button>
</div>
<!-- <div class="px-1">
<button type="button" 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="page px-rem">
<div class="overflow-auto shadow-md rounded-t-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover table-bordered">
<thead>
<tr>
<ng-container *ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','การจัดการ']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="dataLoading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * pageSize) : (((currentPage-1) * pageSize) + pageSize);let i = index">
<td class="text-center">
{{item.code}}
</td>
<td>{{item.name}}</td>
<td class="text-center">{{item.type}}</td>
<td class="flex justify-center">
<i class="ti ti-eye cursor-pointer i-gray fs-l px-1"
(click)="selectIndicatorsCourses(item);seeTab=true;editTab=false;pathTitleChange()"></i>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectIndicatorsCourses(item);seeTab=false;editTab=true;pathTitleChange()"></i>
<i *ngIf="item.file" class="ti ti-file-download cursor-pointer i-gray fs-l px-1"
(click)="dowloadExam(item.file)"></i>
</td>
</tr>
</tbody>
</table>
</div>
<app-pagination [totalItems]="dataListFilter().length" [pageSize]="pageSize" (pageChange)="currentPage = $event"
(pageSizeChange)="pageSize = $event;currentPage = 1"></app-pagination>
<app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search"
[dataSource]="indicatorsCoursesList" [checkBoxSetting]="false" [columns]="columns"
(sendSelectData)="selectIndicatorsCourses($event); editTab = true">
</app-datagrid-syncfution>
</div>
</ng-container>
<ng-container *ngIf="editTab||seeTab">
<app-edit-group-indicators [competencytopic]="indicatorsCourses" [seeTab]="seeTab"
(sendEdit)="editTab=$event;pathTitleChange()" (sendEdit)="seeTab=$event"></app-edit-group-indicators>
......
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { ToastrService } from 'ngx-toastr';
import { CompetencytopicModel, MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.model';
import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service';
import { FileService } from 'src/app/shared/services/file.service';
export interface DataModel {
code: string,
name: string,
type: string
file: string
}
@Component({
selector: 'app-indicators-and-curriculum',
templateUrl: './indicators-and-curriculum.component.html',
......@@ -19,16 +15,42 @@ export class IndicatorsAndCurriculumComponent {
editTab = false
seeTab = false
currentPage = 1
search = ""
page = Array.from({ length: 1 }, (_, i) => i + 1);
pageSize = 10
dataList: DataModel[] = []
indicatorsCoursesList: CompetencytopicModel[] = []
indicatorsCourses: CompetencytopicModel = new MyCompetencytopicModel({})
dataLoading = false
currentModal: 'add' | 'edit' | 'delete' = 'add'
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
columns: ColumnModel[] = [{
field: "competencyTopicId",
headerText: "รหัส",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "ชื่อหัวข้อ",
type: "string"
},
{
field: "competencyType.tdesc",
headerText: "ประเภท",
type: "string"
}]
searchSettings = {
fields: ['competencyTopicId', 'tdesc', 'competencyType.tdesc'],
operator: 'contains',
ignoreCase: false
};
search = ''
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private competencytopicService: CompetencytopicService,
......@@ -37,6 +59,10 @@ export class IndicatorsAndCurriculumComponent {
this.pathTitleChange()
}
ngOnInit(): void {
this.getIndicatorsCoursesList()
}
dowloadExam(fileName: string) {
this.fileService.dowloadFiles(fileName).subscribe({
next: response => {
......@@ -73,7 +99,7 @@ export class IndicatorsAndCurriculumComponent {
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getList()
this.getIndicatorsCoursesList()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
......@@ -112,17 +138,18 @@ export class IndicatorsAndCurriculumComponent {
})
}
ngOnInit(): void {
this.getList()
}
getList() {
getIndicatorsCoursesList() {
this.dataLoading = true
this.selectedItems.data.clear()
this.competencytopicService.getList().subscribe({
next: response => {
this.dataList = response.map(x => ({ code: x.competencyTopicId || "", name: x.tdesc || "", type: x.competencyType.tdesc || "", file: x.competencyFiles || "" }))
this.indicatorsCoursesList = response.map(x => {
this.selectedItems.data.set(x.competencyTopicId, false)
return new MyCompetencytopicModel(x)
})
this.indicatorsCoursesList = response
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
......@@ -130,25 +157,19 @@ export class IndicatorsAndCurriculumComponent {
}
})
}
selectIndicatorsCourses(data: DataModel) {
const indicatorsCourses = this.indicatorsCoursesList.find(x => x.competencyTopicId == data.code)
selectIndicatorsCourses(data: CompetencytopicModel) {
const indicatorsCourses = this.indicatorsCoursesList.find(x => x.competencyTopicId == data.competencyTopicId)
this.indicatorsCourses = new MyCompetencytopicModel(indicatorsCourses || {})
}
pathTitleChange() {
this.sendPathTitle.emit(this.editTab ? ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร', 'การจัดการตัวชี้วัดเเละหลักสูตร'] : ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร'])
}
searchChange() {
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
checkPrimary() {
return this.indicatorsCoursesList.find(x => x.competencyTopicId == this.indicatorsCourses.competencyTopicId)
}
dataListFilter() {
return this.dataList.filter(x => {
return x.code.toLowerCase().includes(this.search.toLowerCase()) || x.name.toLowerCase().includes(this.search.toLowerCase()) || x.type.toLowerCase().includes(this.search.toLowerCase())
});
}
}
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