translate กับส่ง gap

src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.html

@@ -3,7 +3,7 @@
         <div class="px-1">
             <div class="relative shadow-md">
                 <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                    placeholder="Search by No. or Name" [(ngModel)]="search">
+                    [placeholder]="'SearchByNoOrName' | translate" [(ngModel)]="search">
                 <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>
@@ -16,21 +16,21 @@
                 data-hs-overlay="#company-registration-page-upload-modal"
                 (click)="fileInput.value = '';selectedFile=null;selectedFileName = 'กรุณาเลือกไฟล์'">
                 <i class="ti ti-file-plus"></i>
-                import
+                {{'Import' | translate}}
             </button>
         </div>
         <div class="px-1">
             <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
                 (click)="currentModal='add';setData()" (click)="openDialog()">
                 <i class="ri-add-line"></i>
-                Add
+                {{'Add' | translate}}
             </button>
         </div>
         <div class="px-1">
             <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
                 (click)="currentModal='delete';setData();deleteCompany()">
                 <i class="ri-delete-bin-6-line"></i>
-                Delete
+                {{'Delete' | translate}}
             </button>
         </div>
     </div>

src/app/components/company-components/company-registration/company-registration-page/company-registration-page.component.ts

@@ -36,18 +36,18 @@ export class CompanyRegistrationPageComponent {
   };
   columns: ColumnModel[] = [{
     field: "code",
-    headerText: "รหัสบริษัท",
+    headerText: "CompanyCode",
     type: "string",
     isPrimaryKey: true,
   },
   {
     field: "tdesc",
-    headerText: "รายละเอียดบริษัท (ไทย)",
+    headerText: "CompanyDescThai",
     type: "string"
   },
   {
     field: "edesc",
-    headerText: "รายละเอียดบริษัท (อังกฤษ)",
+    headerText: "CompanyDescEng",
     type: "string"
   }]
 

src/app/components/company-components/company-registration/company-registration.component.html

@@ -3,7 +3,7 @@
 </div>
 <div class="block-main-content">
     <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
-        ทะเบียนบริษัท
+        {{'menu.Company' | translate}}
     </div>
     <div class="page pt-0.75rem">
         <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
@@ -12,7 +12,7 @@
                     href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
                     aria-controls="underline-1"
                     (click)="pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท','ทะเบียนบริษัท'];currentPath=1">
-                    ทะเบียนบริษัท
+                    {{'menu.Company' | translate}}
                 </a>
                 <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"

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

@@ -208,6 +208,7 @@ import { JobDescriptionEssComponent } from '../job-description-ess/job-descripti
 import { MoneyInputDirective } from 'src/app/shared/directive/money-input/money-input.directive';
 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';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -357,7 +358,9 @@ export class CustomDateAdapter extends NativeDateAdapter {
     SettingIndividualKpiSupervisorComponent,
     JobDescriptionEssComponent,
     MoneyInputDirective
-  ], imports: [CommonModule,
+  ], imports: [
+    TranslateModule,
+    CommonModule,
     DashboardRoutingModule,
     NgChartsModule,
     NgApexchartsModule,

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

-<ejs-grid #grid id='Grid' [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
+<ejs-grid #grid id='Grid' [locale]="locale" [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
   [filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings"
   [groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" allowPaging='true'
   allowGrouping='true' allowSorting='true' [showColumnMenu]="true" (columnMenuClick)="onColumnMenuClick($event)"
@@ -14,7 +14,7 @@
         <input type="checkbox" [id]="'checkbox-all'" class="ti-form-checkbox cursor-pointer"
           [checked]="selectedItemsAll" (click)="toggleSelectionAll()">
         <label [for]="'checkbox-all'" class="font-size-12px font-weight-700 text-primary">
-          &nbsp;{{selectedItems.count}} Selected</label>
+          &nbsp;{{selectedItems.count}} {{'Selected' | translate}}</label>
       </ng-template>
       <ng-template #template let-data *ngIf="checkBoxSetting">
         <input type="checkbox" class="ti-form-checkbox cursor-pointer"
@@ -34,7 +34,7 @@
         [validationRules]="col.validationRules" [allowEditing]="false" [allowSorting]="'true'" [allowFiltering]="true"
         [visible]="col.visible" [type]="col.type">
         <ng-template #headerTemplate let-data>
-          <span class="font-size-12px font-weight-700 text-primary">{{ col.headerText }}</span>
+          <span class="font-size-12px font-weight-700 text-primary">{{ col.headerText | translate}}</span>
         </ng-template>
         <ng-template #template let-data *ngIf="col.field == 'statusCode.tdesc'">
           <div class="flex justify-center items-center w-full h-full">
@@ -67,7 +67,7 @@
 
     <e-column headerText='action' width='205' textAlign='Center' *ngIf="actionSetting">
       <ng-template #headerTemplate let-data *ngIf="actionSetting">
-        <span class="font-size-12px font-weight-700 text-primary">การจัดการ</span>
+        <span class="font-size-12px font-weight-700 text-primary">{{'Action' | translate}}</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>

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

@@ -39,13 +39,17 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
 import { L10n, setCulture } from '@syncfusion/ej2-base';
 import { Status } from '../../shared/model/evaluation-form.modal';
 import { FileService } from 'src/app/shared/services/file.service';
-setCulture('th-TH');
+import { TranslateService } from '@ngx-translate/core';
 
 L10n.load({
   'en-US': {
     'pager': {
       'currentPageInfo': '',
       'totalItemsInfo': '{1} to {2} of {0}',
+    },
+    'grid': {
+      'pagerInfo': 'Total {0} items',
+      'pageCountMsg': 'Total {0} items'
     }
   },
   'th-TH': {
@@ -92,8 +96,7 @@ export class DatagridSyncfutionComponent implements OnInit {
   dataSourceFilter: any[] = [];
   @Output() sendSelectData = new EventEmitter<any>();
   @Input() columns: ColumnModel[] = [];
-  // @Input() toolbarOptions?: ToolbarItems[]
-  @Input() toolbarOptions?: ToolbarItems[] = ['Print', 'ExcelExport', 'CsvExport'];
+  @Input() toolbarOptions?: any[] = ['Print', 'ExcelExport', 'CsvExport'];
   @Input() searchSettings: any = {
     fields: [],
     operator: 'contains',
@@ -168,8 +171,11 @@ export class DatagridSyncfutionComponent implements OnInit {
   @Input() sendLayout = false
   @Input() gridLayout = ''
   @Output() layout = new EventEmitter<any>();
+
+  locale = 'th-TH'
   constructor(private cdr: ChangeDetectorRef,
-    private fileService: FileService
+    private fileService: FileService,
+    private translateService: TranslateService,
   ) {
   }
   ngOnInit(): void {
@@ -177,6 +183,28 @@ export class DatagridSyncfutionComponent implements OnInit {
     this.loadingIndicator = { indicatorType: 'Shimmer' };
     // ถ้ามี logic ของ child เอง เช่นตั้งค่าเริ่มต้น
     // ให้เขียนตรงนี้ได้
+    this.toolbarOptions = [
+      { text: this.translateService.instant('Print'), prefixIcon: 'e-print', id: 'Print' },
+      { text: this.translateService.instant('ExcelExport'), prefixIcon: 'e-excelexport', id: 'ExcelExport' },
+      { text: this.translateService.instant('CsvExport'), prefixIcon: 'e-csvexport', id: 'CsvExport' }
+    ];
+    // setCulture('en-US');
+    // setCulture('th-TH');
+    this.translateService.onLangChange.subscribe((event) => {
+      if (event.lang === 'th') {
+        setCulture('th-TH');
+        this.locale = 'th-TH'
+      } else if (event.lang === 'en') {
+        setCulture('en-US');
+        this.locale = 'en-US'
+      }
+      this.toolbarOptions = [
+        { text: this.translateService.instant('Print'), prefixIcon: 'e-print', id: 'Print' },
+        { text: this.translateService.instant('ExcelExport'), prefixIcon: 'e-excelexport', id: 'ExcelExport' },
+        { text: this.translateService.instant('CsvExport'), prefixIcon: 'e-csvexport', id: 'CsvExport' }
+      ];
+    });
+
   }
 
   ngOnChanges(changes: SimpleChanges): void {

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

@@ -220,19 +220,19 @@
             <div class="col-span-8">รวมจำนวนเครื่องหมายแต่ละช่อง (1)</div>
             <div class="col-span-3 grid grid-cols-5">
               <div class="col-span-1 text-center">
-                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].numberCheck5Boss}}
+                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].numberCheck5Boss}}
               </div>
               <div class="col-span-1 text-center">
-                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].numberCheck4Boss}}
+                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].numberCheck4Boss}}
               </div>
               <div class="col-span-1 text-center">
-                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].numberCheck3Boss}}
+                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].numberCheck3Boss}}
               </div>
               <div class="col-span-1 text-center">
-                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].numberCheck2Boss}}
+                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].numberCheck2Boss}}
               </div>
               <div class="col-span-1 text-center">
-                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].numberCheck1Boss}}
+                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].numberCheck1Boss}}
               </div>
             </div>
           </div>
@@ -257,7 +257,7 @@
             </div>
             <div class="col-span-3 grid grid-cols-5">
               <div class="col-span-5 text-center text-indigo-600 font-semibold">
-                {{showNumber(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].weightedTotalBoss)}}
+                {{showNumber(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightedTotalBoss)}}
               </div>
             </div>
           </div>
@@ -266,7 +266,7 @@
             </div>
             <div class="col-span-3 grid grid-cols-5">
               <div class="col-span-5 text-center text-indigo-600 font-semibold">
-                {{showNumber(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].averageScoreBoss)}}
+                {{showNumber(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].averageScoreBoss)}}
               </div>
             </div>
           </div>
@@ -306,10 +306,10 @@
                     </div>
                   </td>
                   <td class="align-start text-center text-indigo-600 font-semibold">
-                    {{calAverage(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].averageScoreBoss)}}
+                    {{calAverage(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].averageScoreBoss)}}
                   </td>
                   <td class="align-start text-center text-indigo-600 font-semibold">
-                    {{calGap(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1lList[0].averageScoreBoss)}}
+                    {{calGap(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].averageScoreBoss)}}
                   </td>
                 </tr>
                 <tr (mouseenter)="hoveredCode2 = 'true'" (mouseleave)="hoveredCode2 = null"

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

@@ -595,19 +595,19 @@ export class PmsFormEmployeeComponent {
       '!competency[].apsapprove3',
       '!competency[].apsapprove4',
       '!competency[].apsapprove5',
-      '!competency[].masfromEvaluationAssessment1lList[].apsassessyDate',
-      '!competency[].masfromEvaluationAssessment1lList[].apsapprove1Date',
-      '!competency[].masfromEvaluationAssessment1lList[].apsapprove2Date',
-      '!competency[].masfromEvaluationAssessment1lList[].apsapprove3Date',
-      '!competency[].masfromEvaluationAssessment1lList[].apsapprove4Date',
-      '!competency[].masfromEvaluationAssessment1lList[].apsapprove5Date',
-      '!competency[].masfromEvaluationAssessment1lList[].numberCheck1',
-      '!competency[].masfromEvaluationAssessment1lList[].numberCheck2',
-      '!competency[].masfromEvaluationAssessment1lList[].numberCheck3',
-      '!competency[].masfromEvaluationAssessment1lList[].numberCheck4',
-      '!competency[].masfromEvaluationAssessment1lList[].numberCheck5',
-      '!competency[].masfromEvaluationAssessment1lList[].weightedTotal',
-      '!competency[].masfromEvaluationAssessment1lList[].averageScore',
+      '!competency[].masfromEvaluationAssessment1List[].apsassessyDate',
+      '!competency[].masfromEvaluationAssessment1List[].apsapprove1Date',
+      '!competency[].masfromEvaluationAssessment1List[].apsapprove2Date',
+      '!competency[].masfromEvaluationAssessment1List[].apsapprove3Date',
+      '!competency[].masfromEvaluationAssessment1List[].apsapprove4Date',
+      '!competency[].masfromEvaluationAssessment1List[].apsapprove5Date',
+      '!competency[].masfromEvaluationAssessment1List[].numberCheck1',
+      '!competency[].masfromEvaluationAssessment1List[].numberCheck2',
+      '!competency[].masfromEvaluationAssessment1List[].numberCheck3',
+      '!competency[].masfromEvaluationAssessment1List[].numberCheck4',
+      '!competency[].masfromEvaluationAssessment1List[].numberCheck5',
+      '!competency[].masfromEvaluationAssessment1List[].weightedTotal',
+      '!competency[].masfromEvaluationAssessment1List[].averageScore',
       'pms',
       '!pms.gradeScore',
       '!pms.apsassessyDate',

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

@@ -30,11 +30,11 @@
             <tbody>
                 <ng-container *ngFor="let item of appraisalCompentencyList; let i=index">
                     <tr class="border-b border-gray-200"
-                        (mouseenter)="tableHover.set(item.masfromEvaluationAssessment1lList[0].competencyType.tdesc,true)"
+                        (mouseenter)="tableHover.set(item.masfromEvaluationAssessment1List[0].competencyType.tdesc,true)"
                         (mouseleave)="tableHover.clear()"
-                        [ngStyle]="{'background':tableHover.get(item.masfromEvaluationAssessment1lList[0].competencyType.tdesc)?'#f1f5f9':'#ffffff'}">
+                        [ngStyle]="{'background':tableHover.get(item.masfromEvaluationAssessment1List[0].competencyType.tdesc)?'#f1f5f9':'#ffffff'}">
                         <td class="py-2" style="vertical-align: top">
-                            {{item.masfromEvaluationAssessment1lList[0].competencyType.tdesc}}
+                            {{item.masfromEvaluationAssessment1List[0].competencyType.tdesc}}
                         </td>
                         <td class="py-2 text-center" style="vertical-align: top">
                             {{formatThaiDate(item.masfromEvaluationRound.apsPeriodStart)}}

src/app/components/performance-management-evaluation/evaluation-cycle-performance/document-form/edit-evaluation-form/edit-evaluation-form.component.ts

@@ -4,7 +4,7 @@ import { AppraisalRoundModel, MyAppraisalRoundModel } from 'src/app/shared/model
 import { AppraisalModel, MyAppraisalModel } from 'src/app/shared/model/appraisal.model';
 import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
 import { EvaluationModal } from 'src/app/shared/model/evaluation-form.modal';
-import { MasfromEvaluationAssessment1lList, PmsMasfromEvaluationFullModel } from 'src/app/shared/model/pms-masfrom-evaluation-list.model';
+import { masfromEvaluationAssessment1List, PmsMasfromEvaluationFullModel } from 'src/app/shared/model/pms-masfrom-evaluation-list.model';
 import { MyPmsMasfromEvaluationModel, PmsMasfromEvaluationModel } from 'src/app/shared/model/pms-masfrom-evaluation.model';
 import { PmsEvaluationAssessmentService } from 'src/app/shared/services/pms-evaluation-assessment.service';
 import { PmsMasfromEvaluationCycleService } from 'src/app/shared/services/pms-masfrom-evaluation.service';
@@ -38,8 +38,8 @@ export class EditEvaluationFormComponent {
   empassessmentList?: EvaluationModal
   searchEmp = ""
 
-  empassessmentRoundList: MasfromEvaluationAssessment1lList[] = []
-  empassessmentRoundListCheckbox: { checkbox: boolean, item: MasfromEvaluationAssessment1lList }[] = []
+  empassessmentRoundList: masfromEvaluationAssessment1List[] = []
+  empassessmentRoundListCheckbox: { checkbox: boolean, item: masfromEvaluationAssessment1List }[] = []
   currentPageRound = 1
   pageRound = Array.from({ length: 1 }, (_, i) => i + 1);
   pageSizeRound = 10
@@ -50,12 +50,12 @@ export class EditEvaluationFormComponent {
   msg = ""
   typeForm = ""
 
-  selectData?: MasfromEvaluationAssessment1lList
+  selectData?: masfromEvaluationAssessment1List
 
   loading = false
 
-  indicatorsList: MasfromEvaluationAssessment1lList[] = []
-  indicatorsListShow: MasfromEvaluationAssessment1lList[] = []
+  indicatorsList: masfromEvaluationAssessment1List[] = []
+  indicatorsListShow: masfromEvaluationAssessment1List[] = []
   searchIndicator = ""
   currentPageIndicator = 1
   pageIndicator = Array.from({ length: 1 }, (_, i) => i + 1);
@@ -162,7 +162,7 @@ export class EditEvaluationFormComponent {
   saveIndicators() {
     if (this.empassessmentRoundListCheckbox.map(x => x.item).length > 0) {
       if (this.empassessmentList) {
-        this.empassessmentList.masfromEvaluationAssessment1lList = this.empassessmentRoundListCheckbox.map(x => {
+        this.empassessmentList.masfromEvaluationAssessment1List = this.empassessmentRoundListCheckbox.map(x => {
           x.item.weight = Number(x.item.weight);
           return x.item as any;
         });
@@ -241,7 +241,7 @@ export class EditEvaluationFormComponent {
     this.numDataListChecked = this.empassessmentRoundListCheckbox.filter(x => x.checkbox).length
     this.isChecked = this.numDataListChecked ? true : false
   }
-  deleteFormOne(item: MasfromEvaluationAssessment1lList) {
+  deleteFormOne(item: masfromEvaluationAssessment1List) {
     this.selectData = item;
     this.empassessmentRoundListCheckbox = this.empassessmentRoundListCheckbox.filter(i => i.item !== item);
     this.checkTopic();
@@ -298,7 +298,7 @@ export class EditEvaluationFormComponent {
     const filteredData = this.filterIndicators();
     this.pageIndicator = Array.from({ length: Math.ceil(filteredData.length / this.pageSizeIndicator) }, (_, i) => i + 1);
   }
-  addIndicators(item: MasfromEvaluationAssessment1lList) {
+  addIndicators(item: masfromEvaluationAssessment1List) {
     this.empassessmentRoundListCheckbox.push({ checkbox: false, item })
     this.competencyTopicIds.push(item.groupAssessment1?.pmsTopic?.pmsTopicId)
     this.indicatorChange();

src/app/shared/components/sidebar/sidebar.component.html

@@ -34,31 +34,34 @@
                   'open': menuItem.active,
                   'active': menuItem.selected,}">
               <!-- head title  -->
-              <span *ngIf="menuItem.headTitle" class="category-name">{{menuItem.headTitle}}</span>
+              <span *ngIf="menuItem.headTitle" class="category-name">{{menuItem.headTitle| translate}}</span>
               <!-- has-Link -->
               <a class="side-menu__item" [routerLink]="!menuItem.type ? null : [menuItem.path]"
                 routerLinkActive="active" *ngIf="menuItem.type === 'link'" (click)="setNavActive(menuItem)">
-                <img *ngIf="menuItem.icon" [src]="menuItem.icon" class="side-menu__icon" width="20" height="20" alt="icon" />
+                <img *ngIf="menuItem.icon" [src]="menuItem.icon" class="side-menu__icon" width="20" height="20"
+                  alt="icon" />
 
-                <span class="side-menu__label">{{menuItem.title}}</span>
+                <span class="side-menu__label">{{menuItem.title | translate}}</span>
               </a>
               <!-- has-empty -->
               <a class="side-menu__item" href="javascript:;" *ngIf="menuItem.type === 'empty'"
                 (click)="setNavActive(menuItem)">
-                <img *ngIf="menuItem.icon" [src]="menuItem.icon" class="side-menu__icon" width="20" height="20" alt="icon" />
+                <img *ngIf="menuItem.icon" [src]="menuItem.icon" class="side-menu__icon" width="20" height="20"
+                  alt="icon" />
 
-                <span class="side-menu__label">{{menuItem.title}}</span>
+                <span class="side-menu__label">{{menuItem.title | translate}}</span>
               </a>
               <!-- has-Sub -->
               <a class="side-menu__item with-sub cursor-pointer" [routerLink]="menuItem.type ? null: [menuItem.path]"
                 [ngClass]="{active: menuItem.selected}" *ngIf="menuItem.type === 'sub'"
                 (click)="toggleNavActive(menuItem)">
-                <img *ngIf="menuItem.icon" [src]="menuItem.icon" class="side-menu__icon" width="20" height="20" alt="icon" />
+                <img *ngIf="menuItem.icon" [src]="menuItem.icon" class="side-menu__icon" width="20" height="20"
+                  alt="icon" />
 
-                <span class="side-menu__label">{{menuItem.title}}</span>
+                <span class="side-menu__label">{{menuItem.title | translate}}</span>
                 <span class="badge {{menuItem.badgeClass}} side-badge"
                   *ngIf="menuItem.badgeClass && menuItem.badgeValue">
-                  {{menuItem.badgeValue}}
+                  {{menuItem.badgeValue| translate}}
                 </span>
                 <i class="ri ri-arrow-right-s-line side-menu__angle"></i>
               </a>
@@ -66,7 +69,7 @@
               <!-- 2nd Level menu -->
               <ul class="slide-menu child1" *ngIf="menuItem.children"
                 [ngStyle]="{ display: menuItem.active ? 'block' : 'none' }">
-                <li class="slide side-menu__label1"><a href="javascript:void(0)">{{menuItem.title}}</a></li>
+                <li class="slide side-menu__label1"><a href="javascript:void(0)">{{menuItem.title | translate}}</a></li>
                 <ng-container *ngFor="let childrenItem of menuItem.children">
                   <li *ngIf="childrenItem.show" class="slide" activeMenuItems
                     [ngClass]="{'is-expanded': childrenItem.active, active: childrenItem.active, 'sub-slide': childrenItem.type === 'sub'}">
@@ -75,18 +78,18 @@
                       [routerLink]="!childrenItem.type ? null : [childrenItem.path] " routerLinkActive="active"
                       [routerLinkActiveOptions]="{exact: true}" *ngIf="childrenItem.type === 'link'"
                       (click)="setNavActive(childrenItem)">
-                      {{childrenItem.title}}
+                      {{childrenItem.title | translate}}
                     </a>
                     <!-- empty -->
                     <a class="side-menu__item !white-space-normal" href="javascript:;"
                       *ngIf="childrenItem.type === 'empty' " (click)="setNavActive(childrenItem)">
-                      {{childrenItem.title }}
+                      {{childrenItem.title | translate}}
                     </a>
                     <!-- sub -->
                     <a class="side-menu__item !white-space-normal" [ngClass]="{active: childrenItem.selected}"
                       [routerLink]="childrenItem.type ? null : [childrenItem.path]" *ngIf="childrenItem.type === 'sub'"
                       (click)="toggleNavActive(childrenItem)">
-                      <span class="">{{childrenItem.title}}</span>
+                      <span class="">{{childrenItem.title | translate}}</span>
                       <i class="ri ri-arrow-right-s-line side-menu__angle"></i>
                     </a>
                     <!-- 3rd Level menu -->
@@ -101,11 +104,11 @@
                           <a class="side-menu__item" routerLinkActive="active"
                             [routerLink]="!childrenSubItem.type ?  null : [childrenSubItem.path]"
                             *ngIf="childrenSubItem.type === 'link'" [routerLinkActiveOptions]="{exact : true}">
-                            {{childrenSubItem.title}} {{localdata['synto-dir']}}
+                            {{childrenSubItem.title| translate}} {{localdata['synto-dir']}}
                           </a>
                           <!-- empty -->
                           <a class="side-menu__item" href="javascript:;" *ngIf="childrenSubItem.type === 'empty'">
-                            {{childrenSubItem.title}}
+                            {{childrenSubItem.title| translate}}
                           </a>
                         </li>
                       </ng-container>

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

@@ -738,7 +738,7 @@ export interface AppraisalCompentencyModel2 {
     apsapprove3: Apsapprove3
     apsapprove4: Apsapprove4
     apsapprove5: Apsapprove5
-    masfromEvaluationAssessment1lList: MasfromEvaluationAssessment1lList[]
+    masfromEvaluationAssessment1List: masfromEvaluationAssessment1List[]
     currentStep: string
     lastStep: string
     checkStep: string
@@ -1411,7 +1411,7 @@ export interface Time06 {
     hourD: number
 }
 
-export interface MasfromEvaluationAssessment1lList {
+export interface masfromEvaluationAssessment1List {
     plId: string
     companyId: string
     lineNo: number

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

@@ -46,7 +46,7 @@ export interface Competency {
   comType: string
   currentStep: string
   lastStep: string
-  masfromEvaluationAssessment1lList: MasfromEvaluationAssessment1lList[]
+  masfromEvaluationAssessment1List: masfromEvaluationAssessment1List[]
   masfromEvaluationRound: MasfromEvaluationRound
   masfromStatusType: MasfromStatusType
   personalLevel: PersonalLevel2
@@ -694,7 +694,7 @@ export interface Time06 {
   time0id: string
 }
 
-export interface MasfromEvaluationAssessment1lList {
+export interface masfromEvaluationAssessment1List {
   apsapprove1Comment: string
   apsapprove1Date: string
   apsapprove1Status: string
@@ -734,6 +734,8 @@ export interface MasfromEvaluationAssessment1lList {
   weightedTotalBoss: number
   weightedTotal: number
   masfromEvaluationAssessment2List: MasfromEvaluationAssessment2List[]
+  scoreGab: string
+  scoreGabBoss: string
 }
 
 export interface MasfromEvaluationAssessment2List {

src/app/shared/model/evaluation-form.modal.ts

-import { MasfromEvaluationAssessment1lList } from "./pms-masfrom-evaluation-list.model"
+import { masfromEvaluationAssessment1List } from "./pms-masfrom-evaluation-list.model"
 
   export interface EvaluationModal {
     personalLevel: PersonalLevel
@@ -13,7 +13,7 @@ import { MasfromEvaluationAssessment1lList } from "./pms-masfrom-evaluation-list
     apsapprove5: Apsapprove5
     masfromTypeList: MasfromTypeList[]
     masfromTopic: MasfromTopic[]
-     masfromEvaluationAssessment1lList: MasfromEvaluationAssessment1lList[]
+     masfromEvaluationAssessment1List: masfromEvaluationAssessment1List[]
   }
   
   export interface PersonalLevel {

src/app/shared/model/pms-masfrom-evaluation-list.model.ts

@@ -26,7 +26,7 @@ export interface PmsMasfromEvaluationFullModel {
     apsapprove3Score: any
     apsapprove4Score: any
     apsapprove5Score: any
-    masfromEvaluationAssessment1lList: MasfromEvaluationAssessment1lList[]
+    masfromEvaluationAssessment1List: masfromEvaluationAssessment1List[]
   }
   
   export interface PersonalLevel {
@@ -671,7 +671,7 @@ export interface PmsMasfromEvaluationFullModel {
     hourD: number
   }
   
-  export interface MasfromEvaluationAssessment1lList {
+  export interface masfromEvaluationAssessment1List {
     companyId?: string
     weight?: number
     scoreTopicExpectation: any

src/app/shared/services/navservice.ts

@@ -148,7 +148,7 @@ export class NavService implements OnDestroy {
   getAdminMenu() {
     return [
       {
-        title: 'Dashboard',
+        title: 'menu.Dashboard',
         type: 'link',
         selected: true,
         active: true,
@@ -171,7 +171,7 @@ export class NavService implements OnDestroy {
       //   ],
       // },
       {
-        title: 'จัดการข้อมูลองค์กร',
+        title: 'menu.Organization',
         type: 'sub',
         selected: false,
         active: false,
@@ -180,12 +180,12 @@ export class NavService implements OnDestroy {
         show: true,
         icon: 'assets/img/icons-menu/enterprise-data-management.png',
         children: [
-          { id: 'm21', path: 'admin/company-registration', title: 'ทะเบียนบริษัท', type: 'link', show: true },
-          { id: 'm22', path: 'admin/job-description', title: 'ข้อมูลลักษณะงาน', type: 'link', show: true },
-          { id: 'm23', path: 'admin/employee-registration', title: 'ทะเบียนพนักงาน', type: 'link', show: true },
-          { id: 'm24', path: 'admin/day-type-registry', title: 'ทะเบียนประเภทวัน', type: 'link', show: true },
-          { id: 'm25', path: 'admin/account-settings', title: 'ตั้งค่าชื่อผู้ใช้', type: 'link', show: true },
-          { id: 'm26', path: 'admin/role-permission-config', title: 'กำหนดสิทธิการเข้าใช้งาน', type: 'link', show: true },
+          { id: 'm21', path: 'admin/company-registration', title: 'menu.Company', type: 'link', show: true },
+          { id: 'm22', path: 'admin/job-description', title: 'menu.JobDescription', type: 'link', show: true },
+          { id: 'm23', path: 'admin/employee-registration', title: 'menu.Employee', type: 'link', show: true },
+          { id: 'm24', path: 'admin/day-type-registry', title: 'menu.LeaveType', type: 'link', show: true },
+          { id: 'm25', path: 'admin/account-settings', title: 'menu.UserSetting', type: 'link', show: true },
+          { id: 'm26', path: 'admin/role-permission-config', title: 'menu.AccessPermissions', type: 'link', show: true },
         ],
       },
       {

src/app/shared/services/pms-evaluation-assessment.service.ts

@@ -8,7 +8,7 @@ import { AppraisalModel } from '../model/appraisal.model';
 import { AppraisalRoundModel } from '../model/appraisal-aps.model';
 import { EvaluationModal } from '../model/evaluation-form.modal';
 import { PmsMasfromEvaluationModel } from '../model/pms-masfrom-evaluation.model';
-import { MasfromEvaluationAssessment1lList, PmsMasfromEvaluationFullModel } from '../model/pms-masfrom-evaluation-list.model';
+import { masfromEvaluationAssessment1List, PmsMasfromEvaluationFullModel } from '../model/pms-masfrom-evaluation-list.model';
 
 @Injectable({
   providedIn: 'root'
@@ -27,11 +27,11 @@ export class PmsEvaluationAssessmentService {
   getApsassessy(evaluationRoundId: string, apsassessy: string, apsyear: string): Observable<EvaluationModal> {
     return this.http.get<EvaluationModal>(this.urlApi + "/" + evaluationRoundId + "/" + apsassessy + "/" + apsyear)
   }
-  getApsassessyMini(evaluationRoundId: string, apsassessy: string, apsyear: string): Observable<MasfromEvaluationAssessment1lList[]> {
-    return this.http.get<MasfromEvaluationAssessment1lList[]>(this.urlApi + "/mini/" + evaluationRoundId + "/" + apsassessy + "/" + apsyear)
+  getApsassessyMini(evaluationRoundId: string, apsassessy: string, apsyear: string): Observable<masfromEvaluationAssessment1List[]> {
+    return this.http.get<masfromEvaluationAssessment1List[]>(this.urlApi + "/mini/" + evaluationRoundId + "/" + apsassessy + "/" + apsyear)
   }
-  getIndicators(jobCodeId: string): Observable<MasfromEvaluationAssessment1lList[]> {
-    return this.http.get<MasfromEvaluationAssessment1lList[]>(this.urlApi + "/pms-topic/list/" + jobCodeId)
+  getIndicators(jobCodeId: string): Observable<masfromEvaluationAssessment1List[]> {
+    return this.http.get<masfromEvaluationAssessment1List[]>(this.urlApi + "/pms-topic/list/" + jobCodeId)
   }
   post(body: PmsMasfromEvaluationFullModel): Observable<AlertModel> {
     return this.http.post<AlertModel>(this.urlApi, body)

src/app/shared/sharedmodule.ts

@@ -20,8 +20,7 @@ import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 import { ConfigPermissionService } from './services/config-permission.service';
 import { HttpRequestInterceptor } from './services/http-request.interceptor';
 import { FileService } from './services/file.service';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateJsonLoader } from '../translate-json.loader';
+import { TranslateModule } from '@ngx-translate/core';
 
 
 @NgModule({
@@ -44,13 +43,7 @@ import { TranslateJsonLoader } from '../translate-json.loader';
     SimplebarAngularModule,
     ColorPickerModule,
     FormsModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useClass: TranslateJsonLoader,
-        deps: [HttpClient]
-      }
-    })
+    TranslateModule
   ],
 
   exports: [

src/assets/i18n/en.json

 {
   "Thai (TH)": "ไทย (TH)",
-  "English (US)": "อังกฤษ (US)"
+  "English (US)": "อังกฤษ (US)",
+  "menu": {
+    "Dashboard": "Dashboard",
+    "Organization": "Organization",
+    "Company": "Company",
+    "JobDescription": "JobDescription",
+    "Employee": "Employee",
+    "LeaveType": "LeaveType",
+    "UserSetting": "UserSetting",
+    "AccessPermissions": "AccessPermissions"
+  },
+  "SearchByNoOrName": "Search by No. or Name",
+  "Import": "Import",
+  "Add": "Add",
+  "Delete": "Delete",
+  "Print": "Print",
+  "ExcelExport": "Excel Export",
+  "CsvExport": "CSV Export",
+  "Selected": "Selected",
+  "CompanyCode": "Company Code",
+  "CompanyDescThai": "Company Desc. (Thai)",
+  "CompanyDescEng": "Company Desc. (Eng)",
+  "Action": "Action",
+  "Item": "Item"
 }
\ No newline at end of file

src/assets/i18n/th.json

 {
   "Thai (TH)": "ไทย (TH)",
-  "English (US)": "อังกฤษ (US)"
+  "English (US)": "อังกฤษ (US)",
+  "menu": {
+    "Dashboard": "แดชบอร์ด",
+    "Organization": "จัดการข้อมูลองค์กร",
+    "Company": "ทะเบียนบริษัท",
+    "JobDescription": "ข้อมูลลักษณะงาน",
+    "Employee": "ทะเบียนพนักงาน",
+    "LeaveType": "ทะเบียนประเภทวัน",
+    "UserSetting": "ตั้งค่าผู้ใช้งาน",
+    "AccessPermissions": "กำหนดสิทธิการเข้าใช้งาน"
+  },
+  "SearchByNoOrName": "ค้นหาตามรหัสหรือชื่อ",
+  "Import": "นำเข้า",
+  "Add": "เพิ่ม",
+  "Delete": "ลบ",
+  "Print": "พิมพ์",
+  "ExcelExport": "ส่งออก Excel",
+  "CsvExport": "ส่งออก CSV",
+  "Selected": "เลือก",
+  "CompanyCode": "รหัสบริษัท",
+  "CompanyDescThai": "รายละเอียดบริษัท (ไทย)",
+  "CompanyDescEng": "รายละเอียดบริษัท (อังกฤษ)",
+  "Action": "การจัดการ",
+  "Item": "รายการ"
 }
\ No newline at end of file