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

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,24 +235,30 @@
                     </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">
+                    <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="document.getElementById('file-input-medium').click();">Browse</button>
+                            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">
+                            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"

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,14 +239,18 @@ 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() {
+  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({
@@ -217,6 +271,7 @@ export class CompetencyTopic {
         }
       })
     }
+  }
   deleteCompetency_topic() {
     let body: any
     if (this.modalStatus == "deleteGroup") {
@@ -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)
   }