เพิ่มเมนูสรุปลำดับ เพิ่มโหลดไฟล์

src/app/app.component.ts

@@ -10,6 +10,13 @@ L10n.load({
     }
   },
   'th-TH': {
+    // 'pivotview': {
+    //   'grandTotal': 'รวมทั้งหมดของ',
+    //   "subTotal": "รวมย่อยของ",
+    //   'sum': 'ผลรวมของ',
+    //   'count': 'นับของ',
+    //   'average': 'ค่าเฉลี่ยของ',
+    // },
     'grid': {
       'EmptyRecord': 'ไม่มีข้อมูลที่จะแสดง',
       'Item': '1 รายการ',

src/app/components/dashboard/dashboard-routing.module.ts

@@ -58,6 +58,7 @@ import { SettingIndividualKpiComponent } from '../setting-individual-kpi/setting
 import { SettingIndividualKpiSupervisorComponent } from '../setting-individual-kpi-supervisor/setting-individual-kpi-supervisor.component';
 import { JobDescriptionEssComponent } from '../job-description-ess/job-description-ess.component';
 import { CompetencyEvaluationFactorsComponent } from '../competency-assessment/competency-evaluation-factors/competency-evaluation-factors.component';
+import { ReportCompetencySummaryComponent } from '../report-component/report-com/report-competency-summary/report-competency-summary.component';
 
 
 
@@ -118,6 +119,7 @@ const routes: Routes = [
       { path: "admin/role-permission-config", title: 'กำหนดสิทธิการเข้าใช้งาน', component: RolePermissionConfigComponent },
       { path: "ess/employee-self-service", title: 'employee-self-service', component: EmployeeSelfServiceComponent },
       { path: "ess/my-skill-x-module", title: 'my-skill-x-module', component: MySkillXModuleComponent },
+      { path: "admin/report-competency-summary", title: 'รายงานสรุปผลการประเมินสมรรถนะ', component: ReportCompetencySummaryComponent },
       { path: "admin/report-com-1", title: 'report-com-1', component: ReportCom1Component },
       { path: "admin/report-com-2", title: 'report-com-2', component: ReportCom2Component },
       { path: "admin/report-com-3", title: 'report-com-3', component: ReportCom3Component },

src/app/components/dashboard/dashboard.module.ts

@@ -209,6 +209,7 @@ import { MoneyInputDirective } from 'src/app/shared/directive/money-input/money-
 import { CompetencyEvaluationFactorsComponent } from '../competency-assessment/competency-evaluation-factors/competency-evaluation-factors.component';
 import { CompetencyDefineEvaluationFactorsComponent } from '../competency-assessment/competency-evaluation-factors/competency-define-evaluation-factors/competency-define-evaluation-factors.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { ReportCompetencySummaryComponent } from '../report-component/report-com/report-competency-summary/report-competency-summary.component';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -351,6 +352,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     ReportPms1Component,
     ReportPms2Component,
     ReportPms3Component,
+    ReportCompetencySummaryComponent,
     EssProfileComponent,
     ExcelReportComponent,
     PivotSyncfutionComponent,

src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.html

@@ -47,6 +47,9 @@
           <span>
             {{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}
           </span>
+          <i *ngIf="item2.competencyFiles" class="ti ti-download"
+            style="font-size: 27px;position: absolute;right: 28px;top: 12px;"
+            (click)="downloadFile($event,item2.competencyFiles)"></i>
         </button>
         <ng-container
           *ngIf="biOpen.get(item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId)">

src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.ts

 import { ViewportScroller } from '@angular/common';
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
 import { Competency, MasfromEvaluationAssessment2List } from 'src/app/shared/model/competency.model';
 import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
 import { SettingAssessmentModel, MySettingAssessmentModel } from 'src/app/shared/model/setting-assessment.model';
 import { AppraisalService } from 'src/app/shared/services/appraisal.service';
 import { EmployeeService } from 'src/app/shared/services/employee.service';
+import { FileService } from 'src/app/shared/services/file.service';
 import { SettingAssessmentService } from 'src/app/shared/services/setting-assessment.service';
 import Swal from 'sweetalert2';
 @Component({
@@ -80,7 +82,9 @@ export class PmsCompetencyComponent {
     private employeeService: EmployeeService,
     private cdr: ChangeDetectorRef,
     private viewScroller: ViewportScroller,
-    private settingAssessmentService: SettingAssessmentService
+    private settingAssessmentService: SettingAssessmentService,
+    private fileService: FileService,
+    private toastr: ToastrService
   ) {
   }
   ngOnInit(): void {
@@ -451,5 +455,30 @@ export class PmsCompetencyComponent {
   scrollToMenu(index: number) {
     this.scrollToMenuId.emit('menu-' + index);
   }
+  downloadFile(event: MouseEvent, competencyFiles: string) {
+    event.stopPropagation(); // กันไม่ให้ event bubble ไปถึงปุ่มหลัก
+    this.fileService.downloadFiles(competencyFiles).subscribe({
+      next: response => {
+        const url = window.URL.createObjectURL(response);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = competencyFiles;
+        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()
+      }
+    })
+  }
 
+  showAlert(text: string, type: 'success' | 'error') {
+    this.toastr[type](text, 'แจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    })
+  }
 }

src/app/components/report-component/report-com/report-competency-summary/report-competency-summary.component.html

+<app-page-header [title]="'รายงานสรุปผลการประเมินสมรรถนะ'" activeitem="รายงาน">
+</app-page-header>
+
+<div class="w-full min-height-50px mb-10px justify-between items-center">
+  <div class="flex justify-between">
+    <div class="flex">
+    </div>
+    <div class="flex justify-end">
+      <div class="px-1">
+        <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]="'SearchByNoOrName' | translate"
+            [(ngModel)]="search" style="height: 40px;">
+          <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- <div class="page px-rem">
+  <ejs-pivotview #pivotview [locale]="locale" id='PivotView' [dataSourceSettings]="dataSourceSettings"
+    [displayOption]='{ view: "Both" }'
+    [toolbar]='["Grid", "Chart", "Export", "SubTotal", "GrandTotal", "Formatting", "FieldList"]'
+    [allowExcelExport]='true' [allowNumberFormatting]='true' [allowConditionalFormatting]='true' [allowPdfExport]='true'
+    [showToolbar]='true' [allowCalculatedField]='true' [showFieldList]='true' width='100%' height='550'></ejs-pivotview>
+</div> -->
+
+<div class="page px-rem">
+  <app-datagrid-syncfution [searchSettings]="searchSettings" [searchText]="search" [dataSource]="syncfutionDataList"
+    [columns]="columns" [checkBoxSetting]="false" [actionSetting]="false">
+  </app-datagrid-syncfution>
+</div>
\ No newline at end of file

src/app/components/report-component/report-com/report-competency-summary/report-competency-summary.component.scss

+.sb-sample-content-area {
+    min-height: 255px !important;
+}
+
+.control-section {
+    min-height: 255px !important;
+}
\ No newline at end of file

src/app/components/report-component/report-com/report-competency-summary/report-competency-summary.component.ts

+import { ChangeDetectorRef, Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { PivotView } from '@syncfusion/ej2-angular-pivotview';
+import { ColumnModel } from '@syncfusion/ej2-grids';
+import { CompetencySummaryService } from 'src/app/shared/services/competency-summary.service';
+@Component({
+  selector: 'app-report-competency-summary',
+  templateUrl: './report-competency-summary.component.html',
+  styleUrls: ['./report-competency-summary.component.scss']
+})
+export class ReportCompetencySummaryComponent {
+  columns: ColumnModel[] = [{
+    field: "no",
+    headerText: "ลำดับ",
+    type: "string",
+    isPrimaryKey: true,
+  },
+  {
+    field: "evaluatee",
+    headerText: "ผู้ถูกประเมิน",
+    type: "string"
+  },
+  {
+    field: "jobLevel",
+    headerText: "ระดับพนักงาน",
+    type: "string"
+  },
+  {
+    field: "assessmentPeriod",
+    headerText: "รอบการประเมิน",
+    type: "string"
+  },
+  {
+    field: "competencyTypes",
+    headerText: "ประเภทสมรรถนะ",
+    type: "string"
+  },
+  {
+    field: "score",
+    headerText: "คะแนน",
+    type: "string"
+  }]
+  searchSettings = {
+    fields: ['no', 'evaluatee', 'jobLevel', 'assessmentPeriod', 'competencyTypes', 'score'],
+    operator: 'contains',
+    ignoreCase: false
+  };
+  search = ''
+  syncfutionDataList: any[] = []
+  dataList: { loading: boolean, list: any[] } = { loading: false, list: [] }
+  dataSourceSettings: any
+
+  locale = 'th-TH'
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService,
+    private competencySummaryService: CompetencySummaryService
+  ) {
+    this.translateService.onLangChange.subscribe((event) => {
+      this.locale = this.translateService.getCurrentLang() == 'th' ? 'th-TH' : 'en-US'
+      this.setSyncfutionDataList()
+      // this.setPivot()
+    });
+
+  }
+
+  setPivot() {
+    this.dataSourceSettings = {
+      enableSorting: true,
+      columns: [],
+      rows: [
+        { name: 'headpc', caption: 'PC' },
+        { name: 'subpc', caption: 'Sub PC' }
+      ],
+      values: [
+        { name: '7', caption: '7 คะแนน' },
+        { name: '6', caption: '6 คะแนน' },
+        { name: '5', caption: '5 คะแนน' },
+        { name: '4', caption: '4 คะแนน' },
+        { name: '3', caption: '3 คะแนน' },
+        { name: '2', caption: '2 คะแนน' },
+        { name: '1', caption: '1 คะแนน' }
+      ],
+
+      dataSource: getPivotData(),
+      formatSettings: [],
+      expandAll: false,
+      filters: [],
+      // showGrandTotals: false,
+      // showRowGrandTotals: false,
+      // showColumnGrandTotals: false
+
+    }
+    function getPivotData() {
+      let pivotData: any[] = [
+        { '1': 1, '2': 2, '3': 3, '4': 10, '5': 5, '6': 2, '7': 7, 'headpc': 'pc1', 'subpc': 'pc11', },
+        { '1': 5, '2': 4, '3': 5, '4': 20, '5': 10, '6': 3, '7': 8, 'headpc': 'pc1', 'subpc': 'pc12', },
+        { '1': 7, '2': 6, '3': 7, '4': 15, '5': 12, '6': 6, '7': 9, 'headpc': 'pc1', 'subpc': 'pc13', },
+        { '1': 2, '2': 25, '3': 25, '4': 8, '5': 9, '6': 4, '7': 6, 'headpc': 'pc1', 'subpc': 'pc14', },
+        { '1': 5, '2': 83, '3': 83, '4': 11, '5': 7, '6': 5, '7': 10, 'headpc': 'pc1', 'subpc': 'pc15', },
+        { '1': 12, '2': 57, '3': 57, '4': 14, '5': 8, '6': 7, '7': 13, 'headpc': 'pc1', 'subpc': 'pc16', },
+        { '1': 20, '2': 20, '3': 20, '4': 9, '5': 4, '6': 6, '7': 5, 'headpc': 'pc2', 'subpc': 'pc21', },
+        { '1': 0, '2': 93, '3': 93, '4': 12, '5': 6, '6': 3, '7': 7, 'headpc': 'pc2', 'subpc': 'pc22', },
+        { '1': 0, '2': 89, '3': 89, '4': 18, '5': 11, '6': 4, '7': 6, 'headpc': 'pc2', 'subpc': 'pc23', },
+        { '1': 0, '2': 91, '3': 91, '4': 13, '5': 7, '6': 8, '7': 9, 'headpc': 'pc2', 'subpc': 'pc24', },
+
+      ];
+
+      return pivotData;
+    }
+  }
+
+
+  ngOnInit(): void {
+    // this.setPivot()
+    this.getDataList()
+  }
+
+  getDataList() {
+    this.dataList.loading = true
+    this.competencySummaryService.getCompentencySummaryList().subscribe({
+      next: response => {
+        this.dataList.list = response
+        this.setSyncfutionDataList()
+        this.dataList.list = response
+        this.dataList.loading = false
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.dataList.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+
+  }
+  setSyncfutionDataList() {
+    if (this.dataList.list) {
+      this.syncfutionDataList = this.dataList.list.map(e => e.masform.map((e2: any) => ({
+        no: e2.no,
+        evaluatee: e2.apsassessy?.thFullName,
+        jobLevel: e2.apsassessy?.job?.tdesc,
+        assessmentPeriod: e.tdesc,
+        competencyTypes: e2.competencyTypeShortName,
+        score: e2.averageScoreBoss,
+      }))).flat()
+      console.log("🥷🏿 ~ this.syncfutionDataList:", this.syncfutionDataList)
+    }
+  }
+
+
+
+
+
+
+
+}
+
+
+
+
+
+
+

src/app/shared/model/competency.model.ts

@@ -748,6 +748,7 @@ export interface MasfromEvaluationAssessment2List {
   companyId: string
   scoreTopicExpectation: number
   groupAssessment1: GroupAssessment1
+  competencyFiles: any
 }
 
 export interface GroupAssessment1 {

src/app/shared/services/competency-summary.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { AlertModel } from '../model/alert.model';
+import { AppraisalCompentencyModel, AppraisalCompentencyModel2 } from '../model/appraisal-competency.model';
+import { AppraisalSubordinateModel } from '../model/appraisal-subordinate.model';
+import { AppraisalPmsFormModel } from '../model/appraisal-pms-form.model';
+import { AppraisalPmsModel } from '../model/appraisal-pms.model';
+import { CompetencyModel } from '../model/competency.model';
+@Injectable({
+  providedIn: 'root'
+})
+export class CompetencySummaryService {
+  api = "/competency-summary"
+  urlApi = environment.baseUrl + this.api
+  constructor(private http: HttpClient) {
+  }
+  getCompentencySummaryList(): Observable<any[]> {
+    return this.http.get<any[]>(this.urlApi + "/lists")
+  }
+}
\ No newline at end of file

src/app/shared/services/navservice.ts

@@ -257,6 +257,7 @@ export class NavService implements OnDestroy {
         show: true,
         icon: 'assets/img/icons-menu/Report.png',
         children: [
+          { id: 'm61', path: 'admin/report-competency-summary', title: 'รายงานสรุปผลการประเมินสมรรถนะ', type: 'link', show: true },
           { id: 'm61', path: 'admin/report-com-1', title: 'รายงาน Competency 1', type: 'link', show: true },
           { id: 'm62', path: 'admin/report-com-2', title: 'รายงาน Competency 2', type: 'link', show: true },
           { id: 'm63', path: 'admin/report-com-3', title: 'รายงาน Competency 3', type: 'link', show: true },