Skip to content

M
mySkill-x
Commit 59123c4f by Nattana Chaiyamat
Options

ทะเบียนกำหนดชื่อ

parent c0bed3aa
Showing with 135 additions and 45 deletions
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.html
......@@ -39,7 +39,8 @@
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-10 m-0 shadow-md"
data-hs-overlay="#competency-topic-page-modal" (click)="modalStatus='add';setData()">
data-hs-overlay="#competency-topic-page-modal"
(click)="modalStatus='add';setData();fileInputMedium.value = '';examFile=null;examFileName = 'กรุณาเลือกไฟล์'">
<i class="ri-add-line"></i>
Add
</button>
......@@ -234,25 +235,31 @@
</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 class="flex rounded-md">
<label class="sr-only">อัปโหลดไฟล์</label>
<input #fileInputMedium id="fileInputMedium" type="file" (change)="onExamSelected($event)" hidden>
<input type="text" [value]="examFileName" readonly onclick="fileInputMedium.click();"
class=" cursor-pointer 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="fileInputMedium.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"
(click)="fileInputMedium.value = '';examFile=null;examFileName = 'กรุณาเลือกไฟล์'">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
<div class="flex" *ngIf="examFileName==dataSelect.file">
<h1 class="cursor-pointer 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"
(click)="dowloadExam(examFileName)">
ดาวน์โหลดไฟล์ข้อสอบ</h1>
</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"
......
src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
......@@ -12,6 +12,7 @@ export interface DataModel {
code: string
definition: string
type: DataModel2
file: string
checked: boolean
}
export interface DataModel2 {
......@@ -50,13 +51,15 @@ export class CompetencyTopic {
currentModal = "";
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: "", file: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }
competencytypeListLoading = false
competencytypeList: DataModel2[] = []
competoncyTopicList: { check: boolean; data: DataModel & { checked?: boolean } }[] = []
modalStatus = 'add'
selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์';
examFile: File | null = null;
examFileName: string = 'กรุณาเลือกไฟล์';
selectedItems: string[] = [];
......@@ -74,6 +77,53 @@ export class CompetencyTopic {
this.getCompetencytypeList()
}
onExamSelected(event: any) {
this.examFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.examFileName = this.examFile?.name || "กรุณาเลือกไฟล์"
console.log(" 🐒 this.examFileName:", this.examFileName)
}
uploadExam() {
if (!this.examFile) {
return
}
const formData = new FormData();
formData.append('file', this.examFile);
this.fileService.uploadFiles(formData).subscribe({
next: response => {
if (response.success) {
this.examFile = null
this.addCompetency_topic(response.resultObject)
} else {
this.showAlert(response.message, 'error')
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.cdr.detectChanges()
}
})
}
dowloadExam(fileName: string) {
this.fileService.dowloadFiles(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);
this.cdr.detectChanges()
}, error: error => {
this.showAlert(error.message, 'error')
this.cdr.detectChanges()
}
})
}
onFileSelected(event: any) {
this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
......@@ -159,7 +209,7 @@ export class CompetencyTopic {
next: response => {
this.competoncyTopicList = response.map(x => ({
check: false, data: {
id: x.competencyTopicId, name: x.tdesc, edesc: x.edesc, code: x.competencyType.shortName, definition: x.competencyDetail,
id: x.competencyTopicId, name: x.tdesc, edesc: x.edesc, code: x.competencyType.shortName, definition: x.competencyDetail, file: x.competencyFiles,
type: { id: x.competencyType.competencyTypeId, name: x.competencyType.tdesc, edesc: x.competencyType.edesc, code: x.competencyType.shortName, level: x.expectationLevel },
checked: false
}
......@@ -189,33 +239,38 @@ export class CompetencyTopic {
});
}
setData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", definition: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }));
this.examFileName = data?.file || 'กรุณาเลือกไฟล์'
this.dataSelect = JSON.parse(JSON.stringify(data || { id: "", name: "", edesc: "", code: "", definition: "", file: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: false }));
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addCompetency_topic() {
const body = new MyCompetencytopicModel({
competencyTopicId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, competencyDetail: this.dataSelect.definition,
competencyType: new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.type.id, tdesc: this.dataSelect.type.name, edesc: this.dataSelect.type.edesc, shortName: this.dataSelect.type.code, expectationLevel: this.dataSelect.type.level }),
})
this.dataLoading = true
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')
addCompetency_topic(competencyFiles?: string) {
if (this.examFile) {
this.uploadExam()
} else {
const body = new MyCompetencytopicModel({
competencyTopicId: this.dataSelect.id, tdesc: this.dataSelect.name, edesc: this.dataSelect.edesc, competencyDetail: this.dataSelect.definition,
competencyType: new MyCompetencytypeModel({ competencyTypeId: this.dataSelect.type.id, tdesc: this.dataSelect.type.name, edesc: this.dataSelect.type.edesc, shortName: this.dataSelect.type.code, expectationLevel: this.dataSelect.type.level }),
competencyFiles: competencyFiles || ""
})
this.dataLoading = true
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')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.dataLoading = false
this.cdr.detectChanges()
}
})
})
}
}
deleteCompetency_topic() {
let body: any
......@@ -261,7 +316,7 @@ export class CompetencyTopic {
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 })
this.setData({ id: this.dataSelect.id, name: "", edesc: "", code: "", definition: "", file: "", type: { id: "", name: "", edesc: "", code: "", level: "" }, checked: this.dataSelect.checked })
}
}
......
src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.html
......@@ -215,7 +215,7 @@
<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">
oninput="this.value = this.value.replace(/\D/g, '')" [(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"
......
src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.html
......@@ -179,6 +179,11 @@
<i class="ti ti-upload"></i>
</button>
</div>
<div class="flex justify-center mt-2rem ">
<h1 class="cursor-pointer 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" (click)="downloadFile()">
ดาวน์โหลดตัวอย่างไฟล์</h1>
</div>
<div class="flex justify-center mt-2rem mb-1rem space-x-4">
<button type="submit" class="ti-btn ti-btn-secondary"
data-hs-overlay="#assessment-tool-upload-modal" [class.ti-btn-disabled]="!selectedFile"
......
src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts
......@@ -65,6 +65,24 @@ export class AssessmentToolComponent {
}
})
}
downloadFile() {
const fileName = '.xlsx'
this.fileService.downloadTemplate(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')
}
})
}
getAssessmentList() {
this.assessment.loading = true
this.assessmentService.getList().subscribe({
......
src/app/shared/services/file.service.ts
......@@ -9,7 +9,12 @@ import { AlertModel } from '../model/alert.model';
export class FileService {
constructor(private http: HttpClient) {
}
uploadFiles(formData: any): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.baseUrl + '/files/upload', formData)
}
dowloadFiles(filename: string) {
return this.http.get(environment.baseUrl + '/files/download/' + filename, { responseType: "blob" })
}
uploadExcel(formData: any, table: string): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.baseUrl + '/import/excel/' + table, formData)
}
......
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