การประเมินสมรรถนะ > การจัดการสมรรถนะ > ตัวชี้วัดเเละหลักสูตร // เพิ่มปุ่มดู กับ ปุ่มดาวน์โหลดไฟล์

src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html

@@ -24,22 +24,14 @@
   </div>
   <div class="page px-rem">
     <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search"
-      [dataSource]="indicatorsCoursesList" [checkBoxSetting]="false" [columns]="columns"
-      (sendSelectData)="selectIndicatorsCourses($event); editTab = true">
+      [dataSource]="indicatorsCoursesList" [checkBoxSetting]="false" [columns]="columns" [childView]="true"
+      [canDownload]="true" (sendNextPageView)="onViewClicked($event)"
+      (sendSelectData)="selectIndicatorsCourses($event); onEditClicked($event)"
+      (sendFileDownload)="dowloadExam($event)">
     </app-datagrid-syncfution>
   </div>
 </ng-container>
 
-
-<!-- <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> -->
-
 <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

@@ -63,13 +63,13 @@ export class IndicatorsAndCurriculumComponent {
     this.getIndicatorsCoursesList()
   }
 
-  dowloadExam(fileName: string) {
-    this.fileService.dowloadFiles(fileName).subscribe({
+  dowloadExam(data: CompetencytopicModel) {
+    this.fileService.dowloadFiles(data.competencyFiles).subscribe({
       next: response => {
         const url = window.URL.createObjectURL(response);
         const a = document.createElement("a");
         a.href = url;
-        a.download = fileName;
+        a.download = data.competencyFiles;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
@@ -162,6 +162,29 @@ export class IndicatorsAndCurriculumComponent {
     this.indicatorsCourses = new MyCompetencytopicModel(indicatorsCourses || {})
   }
 
+  onSelectAction(event: { data: any, action: 'view' | 'edit' }) {
+    this.selectIndicatorsCourses(event.data);
+    if (event.action === 'view') {
+      this.editTab = false;
+      this.seeTab = true;
+    } else if (event.action === 'edit') {
+      this.editTab = true;
+      this.seeTab = false;
+    }
+  }
+
+  onViewClicked(item: any) {
+    this.selectIndicatorsCourses(item);
+    this.editTab = false;
+    this.seeTab = true;
+  }
+  
+  onEditClicked(item: any) {
+    this.selectIndicatorsCourses(item);
+    this.editTab = true;
+    this.seeTab = false;
+  }
+
   pathTitleChange() {
     this.sendPathTitle.emit(this.editTab ? ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร', 'การจัดการตัวชี้วัดเเละหลักสูตร'] : ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร'])
   }

src/app/components/datagrid-syncfution/datagrid-syncfution.component.html

@@ -35,10 +35,13 @@
         <span class="font-size-12px font-weight-700 text-primary">การจัดการ</span>
       </ng-template>
       <ng-template #template let-data *ngIf="actionSetting">
+        <i class="ti ti-eye cursor-pointer i-gray fs-l px-1" (click)="onNextPageView(data)" *ngIf="childView"></i>
         <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" [attr.data-hs-overlay]="modalName" *ngIf="canEdit"
           (click)="onSelectData(data)"></i>
+        <i class="ti ti-file-download cursor-pointer i-gray fs-l px-1" (click)="onFileDownload(data)" 
+          *ngIf="canDownload && data.competencyFiles"></i>
         <i class="ti ti-menu-2 cursor-pointer i-gray fs-l px-1" (click)="onNextPage(data)" *ngIf="canChild"></i>
-      </ng-template>
+      </ng-template>      
     </e-column>
   </e-columns>
 

src/app/components/datagrid-syncfution/datagrid-syncfution.component.ts

@@ -37,6 +37,7 @@ import {
 import { GroupSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-angular-grids';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { L10n, setCulture } from '@syncfusion/ej2-base';
+import { Status } from '../../shared/model/evaluation-form.modal';
 setCulture('th-TH');
 
 L10n.load({
@@ -103,6 +104,10 @@ export class DatagridSyncfutionComponent implements OnInit {
   @Input() modalName = ''
   @Input() canChild = false
   @Output() sendNextPage = new EventEmitter<any>();
+  @Input() childView = false
+  @Output() sendNextPageView = new EventEmitter<any>();
+  @Input() canDownload = false
+  @Output() sendFileDownload = new EventEmitter<any>();
 
   @Input() checkBoxSetting = true
   @Input() actionSetting = true
@@ -370,4 +375,13 @@ export class DatagridSyncfutionComponent implements OnInit {
       // this.grid?.refresh();
     }
   }
+
+  
+
+  onNextPageView(data: any) {
+    this.sendNextPageView.emit(data);
+  }
+  onFileDownload(data: any) {
+    this.sendFileDownload.emit(data);
+  }
 }