excel-report

.vscode/settings.json

+{
+}
\ No newline at end of file

src/app/apps/apps.module.ts

@@ -104,6 +104,7 @@ import { ExcelReportComponent } from './excel-report/excel-report.component';
 import { ExcelListComponent } from './excel-list/excel-list.component';
 import { ExcelReportToggleComponent } from './excel-report-toggle/excel-report-toggle.component';
 import { ExcelReportEmpviewComponent } from './excel-report-empview/excel-report-empview.component';
+import { SafeUrlPipe } from 'src/pipe/safe-url.pipe';
 
 @NgModule({
   imports: [
@@ -184,7 +185,8 @@ import { ExcelReportEmpviewComponent } from './excel-report-empview/excel-report
     ExcelReportComponent,
     ExcelListComponent,
     ExcelReportToggleComponent,
-    ExcelReportEmpviewComponent
+    ExcelReportEmpviewComponent,
+    SafeUrlPipe
   ],
   providers: [
     ContactService,

src/app/apps/excel-report/excel-report.component.html

 <h2>🔹 Syncfusion Grid</h2>
 <ejs-grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="{ pageSize: 5 }">
-  <e-columns>
-    <e-column field="id" headerText="ID" width="100"></e-column>
-    <e-column field="name" headerText="Name" width="150"></e-column>
-    <e-column field="age" headerText="Age" width="100"></e-column>
-  </e-columns>
+    <e-columns>
+        <e-column field="id" headerText="ID" width="100"></e-column>
+        <e-column field="name" headerText="Name" width="150"></e-column>
+        <e-column field="age" headerText="Age" width="100"></e-column>
+    </e-columns>
 </ejs-grid>
 
 <hr />
@@ -69,10 +69,10 @@
                             <ng-container *ngIf="item.type=='calendar'">
                                 <div class="input-group">
                                     <input class="form-control bg-white cursor-pointer"
-                                        placeholder="{{ 'dd.mm.yyyy' | translate }}" name="dp1" ngbDatepicker
-                                        #d1="ngbDatepicker" [(ngModel)]="select[item.key]" readonly
-                                        (click)="d1.toggle()" (ngModelChange)="formatNgbDate(item.key,select[item.key])"
-                                        #c1="ngModel" (change)="validateDate(c1)">
+                                        placeholder="{{ 'dd.mm.yyyy'  }}" name="dp1" ngbDatepicker #d1="ngbDatepicker"
+                                        [(ngModel)]="select[item.key]" readonly (click)="d1.toggle()"
+                                        (ngModelChange)="formatNgbDate(item.key,select[item.key])" #c1="ngModel"
+                                        (change)="validateDate(c1)">
                                     <div class="input-group-append">
                                         <button class="btn btn-outline-info no-shadow" (click)="d1.toggle()"
                                             type="button">
@@ -104,7 +104,7 @@
                     class="col-12 justify-content-center align-content-center d-flex" style="margin-bottom: 1rem;">
                     <button type="submit" class="btn btn-info waves-effect waves-light btn-w-100"
                         (click)="dowloadExcelReport()">
-                        {{"Print" |translate }}
+                        {{"Print" }}
                     </button>
                 </div>
                 <div *ngIf="loadingExcel" class="col-12 justify-content-center align-content-center d-flex"
@@ -117,7 +117,7 @@
                     style="margin-bottom: 1rem;margin-top: 1rem;">
                     <div
                         class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14">
-                        {{'No Data Found' | translate}}
+                        {{'No Data Found' }}
                     </div>
                 </div>
             </ng-container>
@@ -131,12 +131,11 @@
             <div class="card" style="margin-bottom:-15px">
                 <div class="card-header bg-myhr">
                     <h5 class="card-title">
-                        {{modalDetail.text.cardHead | translate}}</h5>
+                        {{modalDetail.text.cardHead }}</h5>
                 </div>
                 <div class="card-body pb-0 pt-1">
                     <div class="d-flex mb-1">
-                        <input type="text"
-                            placeholder="{{'systemcode.search' | translate}} {{modalDetail.text.search[0]| translate}}"
+                        <input type="text" placeholder="{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
                             class=" form-control w-75 border-color-gray-full-focus" [(ngModel)]='searchModal'>
                     </div>
                     <div class="table-responsive">
@@ -145,14 +144,14 @@
                                 <tr class="text-white font-weight-normal">
                                     <th class="font-weight-normal text-center" scope="col"
                                         *ngFor="let item of modalDetail.text.tableHead">
-                                        {{item| translate}}
+                                        {{item}}
                                     </th>
                                 </tr>
                             </thead>
                             <tbody *ngIf="!valueDetailFilter().length">
                                 <tr>
                                     <td colspan="9" class="font-weight-normal text-center">
-                                        {{"No Data Found" |translate}}
+                                        {{"No Data Found" }}
                                     </td>
                                 </tr>
                             </tbody>
@@ -177,13 +176,13 @@
                         <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
                             [(ngModel)]="pageSize" (ngModelChange)="page=1">
                             <option *ngFor="let item of [10,50,100]" [ngValue]="item">
-                                {{"Items per page"| translate}}: {{item}}
+                                {{"Items per page"}}: {{item}}
                             </option>
                         </select>
                         <ngb-pagination [collectionSize]="valueDetailFilter().length" [(page)]="page"
                             [pageSize]="pageSize" [maxSize]="3" [rotate]="true">
-                            <ng-template ngbPaginationPrevious>{{"Prev"| translate}}</ng-template>
-                            <ng-template ngbPaginationNext>{{"Next"| translate}}</ng-template>
+                            <ng-template ngbPaginationPrevious>{{"Prev"}}</ng-template>
+                            <ng-template ngbPaginationNext>{{"Next"}}</ng-template>
                         </ngb-pagination>
                     </div>
                 </div>
@@ -191,7 +190,7 @@
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-danger" (click)="modal.close()">
-                {{"Close"| translate}}
+                {{"Close"}}
             </button>
         </div>
     </div>

src/app/model/alert.model.ts

+export interface AlertModel {
+    actionStatus: string
+    fail: boolean
+    memberId: any
+    message: string
+    none: boolean
+    resultObject: any
+    state: string
+    statusCode: number
+    success: boolean
+}
\ No newline at end of file

src/app/model/excel-portal.model.ts

+import { environment } from "src/environments/environment"
+
+export interface ExcelPortalModel {
+    approveBy: string
+    approveDate: string
+    approveTime: string
+    dbSupport: string
+    downloadDate: string
+    downloadTime: string
+    dwTime: number
+    engDesc: string
+    engName: string
+    excelId: string
+    fileData: string
+    fileType: string
+    group: ExcelPortalGroupModel
+    isDataGrid: number
+    isPivot: number
+    link1: string
+    referId: string
+    remark: string
+    tags: ExcelPortalTagsModel[]
+    thDesc: string
+    thName: string
+    thumbnail: string
+    uploadBy: string
+    uploadDate: string
+    uploadTime: string
+}
+export class MyExcelPortalModel implements ExcelPortalModel {
+    approveBy: string
+    approveDate: string
+    approveTime: string
+    dbSupport: string
+    downloadDate: string
+    downloadTime: string
+    dwTime: number
+    engDesc: string
+    engName: string
+    excelId: string
+    fileData: string
+    fileType: string
+    group: ExcelPortalGroupModel
+    isDataGrid: number
+    isPivot: number
+    link1: string
+    referId: string
+    remark: string
+    tags: ExcelPortalTagsModel[]
+    thDesc: string
+    thName: string
+    thumbnail: string
+    uploadBy: string
+    uploadDate: string
+    uploadTime: string
+    constructor(data?: Partial<ExcelPortalModel>) {
+        this.approveBy = data?.approveBy || ''
+        this.approveDate = data?.approveDate || ''
+        this.approveTime = data?.approveTime || ''
+        this.dbSupport = data?.dbSupport || ''
+        this.downloadDate = data?.downloadDate || ''
+        this.downloadTime = data?.downloadTime || ''
+        this.dwTime = data?.dwTime ?? 0
+        this.engDesc = data?.engDesc || ''
+        this.engName = data?.engName || ''
+        this.excelId = data?.excelId || ''
+        this.fileData = data?.fileData || ''
+        this.fileType = data?.fileType || ''
+        this.group = new MyExcelPortalGroupModel(data?.group || {})
+        this.isDataGrid = data?.isDataGrid ?? 0
+        this.isPivot = data?.isPivot ?? 0
+        this.link1 = data?.link1 || ''
+        this.referId = data?.referId || ''
+        this.remark = data?.remark || ''
+        this.tags = data?.tags?.map(e => new MyExcelPortalTagsModel(e)) || []
+        this.thDesc = data?.thDesc || ''
+        this.thName = data?.thName || ''
+        this.thumbnail = data?.thumbnail || ''
+        this.uploadBy = data?.uploadBy || ''
+        this.uploadDate = data?.uploadDate || ''
+        this.uploadTime = data?.uploadTime || ''
+    }
+    getImg() {
+        return this.thumbnail ? environment.url + "files/image/" + this.thumbnail : ''
+    }
+}
+
+export interface ExcelPortalGroupModel {
+    engName: string
+    groupId: string
+    groupType: number
+    thName: string
+}
+export class MyExcelPortalGroupModel implements ExcelPortalGroupModel {
+    engName: string
+    groupId: string
+    groupType: number
+    thName: string
+    constructor(data?: Partial<ExcelPortalGroupModel>) {
+        this.engName = data?.engName || ''
+        this.groupId = data?.groupId || ''
+        this.groupType = data?.groupType ?? 0
+        this.thName = data?.thName || ''
+    }
+}
+export interface ExcelPortalTagsModel {
+    display: string
+    value: string
+}
+export class MyExcelPortalTagsModel implements ExcelPortalTagsModel {
+    display: string
+    value: string
+    constructor(data?: Partial<ExcelPortalTagsModel>) {
+        this.display = data?.display || ''
+        this.value = data?.value || ''
+    }
+}
\ No newline at end of file

src/app/model/template.model.ts

@@ -55,63 +55,66 @@ export class MyCreateByModel implements CreateByModel {
 }
 
 export interface TemplateFileModel {
-    templateId: string
-    portalId: string
-    itemId: string
-    fileName: string
-    realFileName: string
-    realFileNameOld: string
-    tdesc: string
+    createDate: string
     edesc: string
+    fileName: string
+    isDataGrid: string
+    isPivot: string
+    isShare: string
+    itemId: string
     menuActive: string
-    uponMenu: string
     module: string
     page: string
-    isShare: string
-    isPivot: string
-    createDate: string
-    createTime: string
     param: any | null
-    createBy: CreateByModel
-}
-export class MyTemplateFileModel implements TemplateFileModel {
-    templateId: string
     portalId: string
-    itemId: string
-    fileName: string
     realFileName: string
     realFileNameOld: string
     tdesc: string
+    templateId: string
+    uponMenu: string
+    fileData: string
+    fileType: string
+}
+export class MyTemplateFileModel implements TemplateFileModel {
+    createDate: string
     edesc: string
+    fileName: string
+    isDataGrid: string
+    isPivot: string
+    isShare: string
+    itemId: string
     menuActive: string
-    uponMenu: string
     module: string
     page: string
-    isShare: string
-    isPivot: string
-    createDate: string
-    createTime: string
     param: any | null
-    createBy: CreateByModel
+    portalId: string
+    realFileName: string
+    realFileNameOld: string
+    tdesc: string
+    templateId: string
+    uponMenu: string
+    fileData: string
+    fileType: string
     constructor(data?: Partial<TemplateFileModel>) {
-        this.templateId = data?.templateId || ''
-        this.portalId = data?.portalId || ''
-        this.itemId = data?.itemId || ''
+        this.createDate = data?.createDate || ''
+        this.edesc = data?.edesc || ''
         this.fileName = data?.fileName || ''
+        this.isDataGrid = data?.isDataGrid || '0'
+        this.isPivot = data?.isPivot || '0'
+        this.isShare = data?.isShare || '0'
+        this.itemId = data?.itemId || ''
+        this.menuActive = data?.menuActive || ''
+        this.module = data?.module || ''
+        this.page = data?.page || ''
+        this.param = data?.param
+        this.portalId = data?.portalId || ''
         this.realFileName = data?.realFileName || ''
         this.realFileNameOld = data?.realFileNameOld || ''
         this.tdesc = data?.tdesc || ''
-        this.edesc = data?.edesc || ''
-        this.menuActive = data?.menuActive || ''
+        this.templateId = data?.templateId || ''
         this.uponMenu = data?.uponMenu || ''
-        this.module = data?.module || ''
-        this.page = data?.page || ''
-        this.isShare = data?.isShare || ''
-        this.isPivot = data?.isPivot || ''
-        this.createDate = data?.createDate || ''
-        this.createTime = data?.createTime || ''
-        this.param = data?.param || null
-        this.createBy = new MyCreateByModel(data?.createBy)
+        this.fileData = data?.fileData || ''
+        this.fileType = data?.fileType || ''
     }
 }
 

src/app/service/excel-report.service.ts

@@ -3,8 +3,10 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { environment } from '../../environments/environment';
-import { TemplateModel } from '../model/template.model';
+import { TemplateFileModel, TemplateModel } from '../model/template.model';
 import { ModuleModel } from '../model/module.model';
+import { ExcelPortalModel, ExcelPortalGroupModel, ExcelPortalTagsModel } from '../model/excel-portal.model';
+import { AlertModel } from '../model/alert.model';
 
 @Injectable({
   providedIn: 'root'
@@ -16,16 +18,25 @@ export class ExcelReportService {
   ) { }
 
   getExcelReport(itemId: string): Observable<any> {
-    return this.http.get(environment.url + "/irapi/menuitem/" + itemId + '?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47')
+    return this.http.get(environment.url + "irapi/menuitem/" + itemId + '?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47')
   }
   dowloadExcelReport(fileName: string, varname: string, data: string): Observable<any> {
-    return this.http.get(environment.url + "/irapi/excel/export-to-excel?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47&fileName=" + fileName + "&param=__varname=" + varname + "|__screen=XLSOPTION|" + data, { responseType: 'blob' })
+    return this.http.get(environment.url + "irapi/excel/export-to-excel?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47&fileName=" + fileName + "&param=__varname=" + varname + "|__screen=XLSOPTION|" + data, { responseType: 'blob' })
   }
   getExcelList(): Observable<TemplateModel[]> {
-    return this.http.get<TemplateModel[]>("https://hrplus-std.myhr.co.th/plus/template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
+    return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
   }
   getModuleList(): Observable<ModuleModel[]> {
-    return this.http.get<ModuleModel[]>("https://hrplus-std.myhr.co.th/plus/template/lists/module?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
+    return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
+  }
+  getExcelPortalList(): Observable<ExcelPortalModel[]> {
+    return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists")
+  }
+  getExcelPortalgGroupList(): Observable<ExcelPortalGroupModel[]> {
+    return this.http.get<ExcelPortalGroupModel[]>(environment.url + "portal-group/lists")
+  }
+  getExcelPortalTagsList(): Observable<ExcelPortalTagsModel[]> {
+    return this.http.get<ExcelPortalTagsModel[]>(environment.url + "tag/lists")
   }
 
   postTemplate(body: {
@@ -36,6 +47,39 @@ export class ExcelReportService {
     edesc: string,
     module: string
   }) {
-    return this.http.post("https://hrplus-std.myhr.co.th/plus/template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+    return this.http.post(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+  deleteTemplate(body: TemplateModel): Observable<AlertModel> {
+    let option = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    }
+    return this.http.delete<AlertModel>(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
+  }
+  postTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+  deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
+    let option = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    }
+    return this.http.delete<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
+  }
+  downloadTemplateFile(fileName: string) {
+    return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", { responseType: 'blob' })
+  }
+  printExcelReport(body: {
+    fileName: string,
+    paramObj: string
+  }) {
+    return this.http.post(environment.url + "template-file/export-to-excel?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body, { responseType: 'blob' })
+  }
+  getTemplateFile(templateid: string, filename: string): Observable<AlertModel> {
+    return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
   }
 }

src/app/service/http-request.interceptor.ts

 import { Injectable } from '@angular/core';
 import { HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { environment } from 'src/environments/environment';
 
 
 @Injectable()
 export class HttpRequestInterceptor {
-  // token= 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBdXRoIiwidWlkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0Iiwicm9sZSI6InVzZXIiLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJmdWxsTmFtZSI6InRlZXJhZGFjaCBrdWhhdGFuYXNhdGllbiIsIm1lbWJlcklkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0In0.FO7u8g7KfzkmZFTuuniBCEQxduPjcvzMbH7iug3DT90'
-  token= 'eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJNWUhSUExVUyIsInJvbGVzIjpbIlVTRVIiXSwid29ya2FyZWEiOiJUS1ciLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJ6bWxvZ2luIjoiZmFsc2UiLCJyb2xlX2xldmVsIjoiNiIsImVtcGxveWVlaWQiOiIxMDAwMDA4MiIsImJyYW5jaCI6Im15aHIiLCJlbXBfcG9zaXRpb24iOiIwOTciLCJ1c2VyX3JvbGUiOiJBbGwiLCJ1aWQiOiIxMDAwMDA4MiIsImNvbXBhbnlpZCI6IjEwMCIsImFjdG9yaWQiOiIxMDAwMDA4MiIsImFjY291bnRhY3RpdmUiOiJ0cnVlIiwibGFuZyI6InRoIiwiYWQiOiJmYWxzZSIsImZpcnN0bG9naW4iOiJmYWxzZSIsInVybF9teWhyIjoiaHR0cDovL2hycGx1cy1zdGQubXloci5jby50aC9ociIsImFwcF9uYW1lIjoibXlociIsInJlZ2lvbmFsbHR5IjoiRU5HIiwidG9rZW5femVlbWUiOiIiLCJ1c2VyX2xldmVsIjoiTVlIUiIsImZ1bGxuYW1lIjoi4LiZ4Liy4Lii4Lit4Lie4Li04Lij4Lix4LiV4LiZ4LmMICDguJfguJTguKrguK3guJoiLCJjb21pZCI6IiIsImpvYiI6IjA5Ny0yNDY5IiwidXNlciI6Im15aHIiLCJ6bV91c2VyIjoiIiwidXNlcm5hbWUiOiJteWhyIiwibWVtYmVyaWQiOiIifQ.z106M3tnpWYWmD7tzAf7hPv2CDSyw50FoUrfDqqHFjw'
+  token = ''
   constructor() { }
-
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    let authHeader = localStorage.getItem('accessToken') ? localStorage.getItem('accessToken')! : "Bearer "+this.token
+    if (req.url.includes('hrplus-std')) {
+      this.token = 'eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJNWUhSUExVUyIsInJvbGVzIjpbIlVTRVIiXSwid29ya2FyZWEiOiJUS1ciLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJ6bWxvZ2luIjoiZmFsc2UiLCJyb2xlX2xldmVsIjoiNiIsImVtcGxveWVlaWQiOiIxMDAwMDA4MiIsImJyYW5jaCI6Im15aHIiLCJlbXBfcG9zaXRpb24iOiIwOTciLCJ1c2VyX3JvbGUiOiJBbGwiLCJ1aWQiOiIxMDAwMDA4MiIsImNvbXBhbnlpZCI6IjEwMCIsImFjdG9yaWQiOiIxMDAwMDA4MiIsImFjY291bnRhY3RpdmUiOiJ0cnVlIiwibGFuZyI6InRoIiwiYWQiOiJmYWxzZSIsImZpcnN0bG9naW4iOiJmYWxzZSIsInVybF9teWhyIjoiaHR0cDovL2hycGx1cy1zdGQubXloci5jby50aC9ociIsImFwcF9uYW1lIjoibXlociIsInJlZ2lvbmFsbHR5IjoiRU5HIiwidG9rZW5femVlbWUiOiIiLCJ1c2VyX2xldmVsIjoiTVlIUiIsImZ1bGxuYW1lIjoi4LiZ4Liy4Lii4Lit4Lie4Li04Lij4Lix4LiV4LiZ4LmMICDguJfguJTguKrguK3guJoiLCJjb21pZCI6IiIsImpvYiI6IjA5Ny0yNDY5IiwidXNlciI6Im15aHIiLCJ6bV91c2VyIjoiIiwidXNlcm5hbWUiOiJteWhyIiwibWVtYmVyaWQiOiIifQ.z106M3tnpWYWmD7tzAf7hPv2CDSyw50FoUrfDqqHFjw'
+    }
+    if (req.url.includes('portal.myhr')) {
+      this.token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJBdXRoIiwidWlkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0Iiwicm9sZSI6InVzZXIiLCJpc3MiOiJDb21wdXRlciBTY2llbmNlIENvcnBvcmF0aW9uIExpbWl0ZWQiLCJmdWxsTmFtZSI6InRlZXJhZGFjaCBrdWhhdGFuYXNhdGllbiIsIm1lbWJlcklkIjoiOGFhNDUzMzAtMzE0Yy0xMWU3LWJhZjMtMmQ3ZDA5ODc3NzQ0In0.FO7u8g7KfzkmZFTuuniBCEQxduPjcvzMbH7iug3DT90'
+    }
+    let authHeader = localStorage.getItem('accessToken') ? localStorage.getItem('accessToken')! : "Bearer " + this.token
     const overideReq = {
       headers: req.headers.set('Authorization', authHeader),
       url: req.url

src/app/shared/vertical-sidebar/vertical-sidebar.service.ts

@@ -17,24 +17,31 @@ export class VerticalSidebarService {
 
     items = new BehaviorSubject<RouteInfo[]>(this.MENUITEMS);
 
-    submenu = [
-        {
-            "itemId": "3459",
-            "templateId": "3011",
-            "fileName": "BFET6T4QJ.xlsx",
-            "tdesc": "FOR TEST OPTION ESS",
-            "edesc": "FOR TEST OPTION ESS",
-            "module": "EMPVIEW"
-        },
-        {
-            "itemId": "3462",
-            "templateId": "3011",
-            "fileName": "F5QTI20MBJ.xls",
-            "tdesc": "REPORT WORKING HOURS_BU3",
-            "edesc": "REPORT WORKING HOURS_BU3",
-            "module": "EMPVIEW"
-        }
-    ]
+    submenu: {
+        "itemId": string,
+        "templateId": string,
+        "fileName": string,
+        "tdesc": string,
+        "edesc": string,
+        "module": string,
+    }[] = [
+            // {
+            //     "itemId": "3459",
+            //     "templateId": "3011",
+            //     "fileName": "BFET6T4QJ.xlsx",
+            //     "tdesc": "FOR TEST OPTION ESS",
+            //     "edesc": "FOR TEST OPTION ESS",
+            //     "module": "EMPVIEW"
+            // },
+            // {
+            //     "itemId": "3462",
+            //     "templateId": "3011",
+            //     "fileName": "F5QTI20MBJ.xls",
+            //     "tdesc": "REPORT WORKING HOURS_BU3",
+            //     "edesc": "REPORT WORKING HOURS_BU3",
+            //     "module": "EMPVIEW"
+            // }
+        ]
     constructor() {
     }
 }

src/pipe/safe-url.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Pipe({
+    name: 'safeUrl'
+})
+export class SafeUrlPipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) { }
+
+    transform(url: string): SafeResourceUrl {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}

src/styles.scss

@@ -15,120 +15,155 @@
 @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
 
 body {
-    font-family: "Kanit", sans-serif !important;
+  font-family: "Kanit", sans-serif !important;
 }
-.msg-detail{
-    width: 100%;
-    margin-top: 0.25rem;
-    font-size: 0.875em;
-    color: #f62d51;
+
+.msg-detail {
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #f62d51;
 }
 
 .myhrcolor-1 .tooltip-inner {
-    background-color: #fff;
-    color: #2962ff;
-    font-weight: 400;
-    border-style: solid;
-    border-color: #2962ff;
-    border-width: 1px;
-  }
-  .myhrcolor-1 .arrow::before {
-    border-top-color: #2962ff;
-  }
-  .myhrcolor-2 .tooltip-inner {
-    background-color: #fff;
-    color: #36bea6;
-    font-weight: 400;
-    border-style: solid;
-    border-color: #36bea6;
-    border-width: 1px;
-  }
-  .myhrcolor-2 .arrow::before {
-    border-top-color: #36bea6;
-  }
-  .myhrcolor-3 .tooltip-inner {
-    background-color: #fff;
-    color: #f62d51;
-    font-weight: 400;
-    border-style: solid;
-    border-color: #f62d51;
-    border-width: 1px;
-  }
-  .myhrcolor-3 .arrow::before {
-    border-top-color: #f62d51;
-  }
-  .myhrcolor-4 .tooltip-inner {
-    background-color: #fff;
-    color: #ffbc34;
-    font-weight: 400;
-    border-style: solid;
-    border-color: #ffbc34;
-    border-width: 1px;
-  }
-  .myhrcolor-4 .arrow::before {
-    border-top-color: #ffbc34;
-  }
-  .myhrcolor-date .tooltip-inner {
-    background-color: #fff;
-    color: #a1aab2;
-    font-weight: 400;
-    border-style: solid;
-    border-color: #a1aab2;
-    border-width: 1px;
-  }
-  .myhrcolor-date .arrow::before {
-    border-top-color: #a1aab2;
-  }
-  .pointer{
-    cursor: pointer;
-  }
-  .pointer:hover{
-    font-weight: 700;
-    color: #2962ff;
+  background-color: #fff;
+  color: #2962ff;
+  font-weight: 400;
+  border-style: solid;
+  border-color: #2962ff;
+  border-width: 1px;
+}
+
+.myhrcolor-1 .arrow::before {
+  border-top-color: #2962ff;
+}
+
+.myhrcolor-2 .tooltip-inner {
+  background-color: #fff;
+  color: #36bea6;
+  font-weight: 400;
+  border-style: solid;
+  border-color: #36bea6;
+  border-width: 1px;
+}
+
+.myhrcolor-2 .arrow::before {
+  border-top-color: #36bea6;
+}
+
+.myhrcolor-3 .tooltip-inner {
+  background-color: #fff;
+  color: #f62d51;
+  font-weight: 400;
+  border-style: solid;
+  border-color: #f62d51;
+  border-width: 1px;
+}
+
+.myhrcolor-3 .arrow::before {
+  border-top-color: #f62d51;
+}
+
+.myhrcolor-4 .tooltip-inner {
+  background-color: #fff;
+  color: #ffbc34;
+  font-weight: 400;
+  border-style: solid;
+  border-color: #ffbc34;
+  border-width: 1px;
+}
+
+.myhrcolor-4 .arrow::before {
+  border-top-color: #ffbc34;
+}
+
+.myhrcolor-date .tooltip-inner {
+  background-color: #fff;
+  color: #a1aab2;
+  font-weight: 400;
+  border-style: solid;
+  border-color: #a1aab2;
+  border-width: 1px;
+}
+
+.myhrcolor-date .arrow::before {
+  border-top-color: #a1aab2;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.pointer:hover {
+  font-weight: 700;
+  color: #2962ff;
+}
+
+.my-dialog-img-preview .modal-dialog {
+  display: flex !important;
+  justify-content: center !important;
+
+  .modal-content {
+    background-color: #fff0 !important;
+    border: none !important;
+    width: auto !important;
   }
-  .my-dialog-img-preview .modal-dialog {
-    display: flex !important;
-    justify-content: center !important;
-    .modal-content {
-        background-color: #fff0 !important;
-        border: none !important;
-        width: auto !important;
-    }
 }
+
 .cover {
   border-radius: 4%;
   border: 10px solid #ccc;
   object-fit: cover;
   height: 200px;
 }
+
 .border-excel {
-  border:1px solid #21a366 !important;
+  border: 1px solid #21a366 !important;
   border-color: #21a366 !important;
 }
+
 .border-doc {
-  border:1px solid #2091eb !important;
+  border: 1px solid #2091eb !important;
   border-color: #2091eb !important;
 }
+
 .border-course {
-  border:1px solid #7460ee !important;
+  border: 1px solid #7460ee !important;
   border-color: #7460ee !important;
 }
+
 .border-widget {
-  border:1px solid #ccc !important;
+  border: 1px solid #ccc !important;
   border-color: #ccc !important;
 }
-.border-5{
+
+.border-5 {
   border-radius: 10px
 }
-.no-bg{
+
+.no-bg {
   background-color: #fff0;
 }
-.view-detail{
+
+.view-detail {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.border-bottom-5{
+
+.border-bottom-5 {
   border-radius: 0 0 6px 6px !important;
+}
+
+.my-dialog-video-preview .modal-dialog {
+  display: flex !important;
+  justify-content: center !important;
+
+  .modal-content {
+    background-color: #fff0 !important;
+    border: none !important;
+    min-width: 70vw !important;
+    min-height: 70vh !important;
+  }
 }
\ No newline at end of file