Skip to content

M
mySkill-x
Commit f61fc5dd by Nattana Chaiyamat
Options

หัวข้อสมรรถนะ

parent 20f8a69a
Showing with 97 additions and 44 deletions
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.html
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex pr-2">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{dataSelectList.length}}
Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()"
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
(click)="toggleCheckbox()">Select All</label>
</div>
<div class="flex">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
[(ngModel)]="isDataListChecked">
<label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
{{numDataListChecked}} Selected</label>
</div>
<div class="mx-1 flex items-center">
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200"
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button>
<label class="text-sm text-gray-500 ml-2">Select All</label>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
......@@ -35,7 +31,8 @@
<div class="px-1">
<button type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-upload-modal">
data-hs-overlay="#competency-topic-upload-modal"
(click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
<i class="ti ti-file-plus"></i>
import
</button>
......@@ -103,7 +100,7 @@
*ngFor="let item of dataListFilter()| slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" id="checkbox-{{item.data.id}}"
[(ngModel)]="item.check" (change)="checkSelect()">
[(ngModel)]="item.check" (change)="dataListCheck()">
<label for="checkbox-{{item.data.id}}">&nbsp;{{item.data.id}}</label>
</td>
<td>{{item.data.name}}</td>
......@@ -179,7 +176,7 @@
<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">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="clearData(modalStatus)">
<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)">
......@@ -208,22 +205,26 @@
<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">
<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>
<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">
style="padding-right: 2.5rem;" readonly [(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-red-500"
(click)="dataSelect.type.code=''">
<i class="ti ti-circle-x cursor-pointer"></i>
</button>
<button type="button" class="flex items-center text-gray-500 dark:text-white/70"
data-hs-overlay="#competency-topic-table-modal-select">
<i class="ri-search-line cursor-pointer text-gray"></i>
......@@ -257,10 +258,12 @@
data-hs-overlay="#competency-topic-page-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#competency-topic-page-alert-modal">
<button type="button" class="ti-btn ti-btn-success"
data-hs-overlay="#competency-topic-page-alert-modal"
[class.ti-btn-disabled]="!dataSelect.id||!dataSelect.name||!dataSelect.type.code"
[disabled]="!dataSelect.id||!dataSelect.name||!dataSelect.type.code">
บันทึกข้อมูล
</a>
</button>
</div>
</div>
</div>
......@@ -621,7 +624,7 @@
<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 #fileInput id="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()"
......@@ -630,8 +633,9 @@
</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 type="submit" class="ti-btn ti-btn-secondary"
data-hs-overlay="#competency-topic-upload-modal" [class.ti-btn-disabled]="!selectedFile"
(click)="uploadFile()" [disabled]="!selectedFile" [disabled]="!selectedFile">
อัปโหลด
</button>
</div>
......
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
......@@ -59,6 +59,10 @@ export class CompetencyTopic {
selectedFileName: string = 'กรุณาเลือกไฟล์';
selectedItems: string[] = [];
numDataListChecked = 0
isDataListChecked = false
isDataListCheckedAll = false
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private fileService: FileService,
......@@ -70,18 +74,6 @@ export class CompetencyTopic {
this.getCompetencytypeList()
}
checkSelect() {
this.dataSelectList = this.competoncyTopicList.filter(item => item.check).map(item => item.data);
}
toggleCheckbox() {
this.isChecked = !this.isChecked; // สลับสถานะ'
this.competoncyTopicList.forEach((item) => {
item.check = this.isChecked;
});
this.checkSelect();
}
onFileSelected(event: any) {
this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
......@@ -94,6 +86,7 @@ export class CompetencyTopic {
}
const formData = new FormData();
formData.append('file', this.selectedFile);
this.dataLoading = true
this.fileService.upload(formData, 'competency_topic').subscribe({
next: response => {
if (response.success) {
......@@ -102,9 +95,13 @@ export class CompetencyTopic {
this.getCompetencytopicList()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
......@@ -167,6 +164,8 @@ export class CompetencyTopic {
checked: false
}
}))
this.isDataListCheckedAll = false
this.dataListCheckAll()
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
......@@ -180,11 +179,12 @@ export class CompetencyTopic {
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil(this.dataListFilter().length / 10) }, (_, i) => i + 1);
this.dataListCheck()
}
dataListFilter() {
return this.competoncyTopicList.filter(x => {
const data = x.data
const match = data.id.toLowerCase().includes(this.search) || data.name.toLowerCase().includes(this.search) || data.code.toLowerCase().includes(this.search);
const match = data.id?.toLowerCase().includes(this.search.toLowerCase()) || data.name?.toLowerCase().includes(this.search.toLowerCase()) || data.code?.toLowerCase().includes(this.search.toLowerCase());
return match;
});
}
......@@ -198,6 +198,7 @@ export class CompetencyTopic {
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.dataLoading = true
this.competencytopicService.post(body).subscribe({
next: response => {
if (response.success) {
......@@ -206,9 +207,13 @@ export class CompetencyTopic {
this.getCompetencytopicList()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
......@@ -225,7 +230,7 @@ export class CompetencyTopic {
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.dataLoading = true
this.competencytopicService.delete(body).subscribe({
next: response => {
if (response.success) {
......@@ -234,9 +239,13 @@ export class CompetencyTopic {
this.getCompetencytopicList()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
......@@ -247,4 +256,29 @@ export class CompetencyTopic {
positionClass: 'toast-top-right',
})
}
clearData(modalStatus: string) {
if (modalStatus == 'add') {
this.setData()
} else if (modalStatus == 'edit') {
this.setData({ id: this.dataSelect.id, name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: this.dataSelect.checked })
}
}
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.competoncyTopicList.filter(x => {
const data = x.data
const match = data.id.toLowerCase().includes(this.search.toLowerCase()) || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.code.toLowerCase().includes(this.search.toLowerCase());
return match;
}).forEach(x => x.check = selectAll);
this.dataListCheck();
}
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = this.competoncyTopicList.filter(x => x.check).length;
this.isDataListChecked = Boolean(this.numDataListChecked)
}
}
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts
......@@ -59,6 +59,7 @@ export class TypeRegistration {
}
const formData = new FormData();
formData.append('file', this.selectedFile);
this.dataLoading = true
this.fileService.upload(formData, 'competency_type').subscribe({
next: response => {
if (response.success) {
......@@ -66,9 +67,13 @@ export class TypeRegistration {
this.getCompetencytypeList()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
......@@ -126,6 +131,7 @@ export class TypeRegistration {
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addType_registration() {
const body = new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, shortName: this.dataSelect.code, expectationLevel: this.dataSelect.level })
this.dataLoading = true
this.competencytypeService.post(body).subscribe({
next: response => {
if (response.success) {
......@@ -133,9 +139,13 @@ export class TypeRegistration {
this.getCompetencytypeList()
} else {
this.showAlert(response.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
......@@ -147,6 +157,7 @@ export class TypeRegistration {
} 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.dataLoading = true
this.competencytypeService.delete(body).subscribe({
next: response => {
if (response.success) {
......@@ -154,10 +165,14 @@ export class TypeRegistration {
this.getCompetencytypeList();
} else {
this.showAlert(response.message, 'error');
this.dataLoading = false
this.cdr.detectChanges()
}
},
error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
});
}
......
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