fix company demo

src/app/portal-manage/myskill-x/myportal/management/approved-list/approved-list.component.ts → src/app/portal-manage/my-portal/approved-list/approved-list.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
-import { DocumentService } from '../../../../services/document.service';
-import { CourseService } from '../../../../services/course.service';
-import { ExcelService } from '../../../../services/excel.service';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
-import { SharedModule } from '../../../../../shared/shared.module';
+import { SharedModule } from '../../../shared/shared.module';
+import { CourseService } from '../../services/course.service';
+import { DocumentService } from '../../services/document.service';
+import { ExcelService } from '../../services/excel.service';
 
 @Component({
   selector: 'app-approved-list',
@@ -22,15 +22,39 @@ import { SharedModule } from '../../../../../shared/shared.module';
   ],
 })
 export class ApprovedListComponent implements OnInit {
-
+  path: {
+    data: string,
+    list: [
+      "myhr-plus",
+      "myhr-lite",
+      "zeeme",
+      "myface",
+      "mylearn",
+      "myjob",
+      "myskill-x"
+    ]
+  } = {
+      data: '',
+      list: [
+        "myhr-plus",
+        "myhr-lite",
+        "zeeme",
+        "myface",
+        "mylearn",
+        "myjob",
+        "myskill-x"
+      ]
+    }
   constructor(
-    private routes: Router,
-    private excelService:ExcelService,private documentService:DocumentService,private courseService:CourseService
-  ) {}
+    private router: Router,
+    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService
+  ) {
+    this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
+  }
   page = 1;
   pageSize = 10;
   testdata: {
-    id:string;
+    id: string;
     img: String;
     name: String;
     details: String;
@@ -41,21 +65,21 @@ export class ApprovedListComponent implements OnInit {
 
     this.testdata = [
       {
-        id:'1',
+        id: '1',
         img: "assets/images/icons/excel.png",
         name: "Excel",
         details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
         document: "0"
       },
       {
-        id:'2',
+        id: '2',
         img: "assets/images/icons/document.png",
         name: "Document",
         details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
         document: "0"
       },
       {
-        id:'3',
+        id: '3',
         img: "assets/images/icons/course.png",
         name: "Course",
         details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
@@ -64,17 +88,17 @@ export class ApprovedListComponent implements OnInit {
     ];
     this.getListCount();
   }
-  async getListCount(){
+  async getListCount() {
     try {
       const countExcel = await this.excelService.getCountContent().toPromise();
       const countDoc = await this.documentService.getCountContent().toPromise();
       const countCourse = await this.courseService.getCountContent().toPromise();
-      this.testdata.forEach((x ,i) => {
-        if(i == 0){
+      this.testdata.forEach((x, i) => {
+        if (i == 0) {
           x.document = (countExcel ?? 0).toString()
-        }else if(i == 1){
+        } else if (i == 1) {
           x.document = (countDoc ?? 0).toString()
-        }else if(i == 2){
+        } else if (i == 2) {
           x.document = (countCourse ?? 0).toString()
         }
       })
@@ -82,13 +106,13 @@ export class ApprovedListComponent implements OnInit {
       console.error('Error loading data:', error);
     }
   }
-  openView(id:string){
-    if(id =='1'){
-      this.routes.navigate(['/myskill-x/view-list-excel/1']);
-    }else if(id =='2'){
-      this.routes.navigate(['/myskill-x/view-list-doc/1']);
-    }else if(id =='3'){
-      this.routes.navigate(['/myskill-x/view-list-course/1']);
+  openView(id: string) {
+    if (id == '1') {
+      this.router.navigate(['/' + this.path.data + '/view-list-excel/1']);
+    } else if (id == '2') {
+      this.router.navigate(['/' + this.path.data + '/view-list-doc/1']);
+    } else if (id == '3') {
+      this.router.navigate(['/' + this.path.data + '/view-list-course/1']);
     }
   }
 }

src/app/portal-manage/myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component.ts → src/app/portal-manage/my-portal/approved-list/view-list-course/view-list-course.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { ActivatedRoute } from '@angular/router';
-import { OpenImageComponent } from '../../../open-image/open-image.component';
-import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
 import { firstValueFrom } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../../../shared/shared.module';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
-import { CourseContentModel } from '../../../../../models/course-content.model';
-import { CourseService } from '../../../../../services/course.service';
 declare var require: any
 import FileSaver from 'file-saver';
 import swal from 'sweetalert';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CourseContentModel } from '../../../models/course-content.model';
+import { CourseService } from '../../../services/course.service';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 @Component({
   selector: 'app-view-list-course',
   templateUrl: './view-list-course.component.html',
@@ -40,7 +38,8 @@ export class ViewListCourseComponent implements OnInit {
   search: string = ''
   checkType: string = '0'
   pagedItems: CourseContentModel[];
-  constructor(private modalService: NgbModal, private courseService: CourseService, private activatedRoute: ActivatedRoute) {
+  dialogRef: any;
+  constructor(private dialog: MatDialog, private modalService: NgbModal, private courseService: CourseService, private activatedRoute: ActivatedRoute) {
     this.activatedRoute.paramMap.subscribe(result => {
       this.checkType = result.get("type")!;
     });
@@ -71,15 +70,28 @@ export class ViewListCourseComponent implements OnInit {
     this.pagedItems = data.slice(start, end);
   }
   openEmployeeModal(image: string) {
-    const modalRef = this.modalService.open(OpenImageComponent, {
-      centered: true,
-      windowClass: 'my-dialog-img-preview'
-    })
-    modalRef.componentInstance.linkImage = image
-    modalRef.result.then(result => {
-    }, reason => {
-      this.modalService.dismissAll()
-    })
+    // const modalRef = this.modalService.open(OpenImageComponent, {
+    //   centered: true,
+    //   windowClass: 'my-dialog-img-preview'
+    // })
+    // modalRef.componentInstance.linkImage = image
+    // modalRef.result.then(result => {
+    // }, reason => {
+    //   this.modalService.dismissAll()
+    // })
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
   }
   async downloadFile(logId: string) {
     try {

src/app/portal-manage/myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component.ts → src/app/portal-manage/my-portal/approved-list/view-list-doc/view-list-doc.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { ActivatedRoute } from '@angular/router';
-import { OpenImageComponent } from '../../../open-image/open-image.component';
-import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
 import { firstValueFrom } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../../../shared/shared.module';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
-import { DocumentContentModel } from '../../../../../models/document-content.model';
-import { DocumentService } from '../../../../../services/document.service';
 declare var require: any
 import FileSaver from 'file-saver';
 import swal from 'sweetalert';
+import { SharedModule } from '../../../../shared/shared.module';
+import { DocumentContentModel } from '../../../models/document-content.model';
+import { DocumentService } from '../../../services/document.service';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 @Component({
   selector: 'app-view-list-doc',
   templateUrl: './view-list-doc.component.html',
@@ -40,7 +38,8 @@ export class ViewListDocComponent implements OnInit {
   search: string = ''
   checkType: string = '0'
   pagedItems: DocumentContentModel[] = [];
-  constructor(private modalService: NgbModal, private documentService: DocumentService, private activatedRoute: ActivatedRoute) {
+  dialogRef: any;
+  constructor(private dialog: MatDialog, private modalService: NgbModal, private documentService: DocumentService, private activatedRoute: ActivatedRoute) {
     this.activatedRoute.paramMap.subscribe(result => {
       this.checkType = result.get("type")!;
     });
@@ -71,15 +70,28 @@ export class ViewListDocComponent implements OnInit {
     this.pagedItems = data.slice(start, end);
   }
   openEmployeeModal(image: string) {
-    const modalRef = this.modalService.open(OpenImageComponent, {
-      centered: true,
-      windowClass: 'my-dialog-img-preview'
-    })
-    modalRef.componentInstance.linkImage = image
-    modalRef.result.then(result => {
-    }, reason => {
-      this.modalService.dismissAll()
-    })
+    // const modalRef = this.modalService.open(OpenImageComponent, {
+    //   centered: true,
+    //   windowClass: 'my-dialog-img-preview'
+    // })
+    // modalRef.componentInstance.linkImage = image
+    // modalRef.result.then(result => {
+    // }, reason => {
+    //   this.modalService.dismissAll()
+    // })
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
   }
   deleteFile(item: DocumentContentModel) {
     swal({
@@ -92,13 +104,13 @@ export class ViewListDocComponent implements OnInit {
       if (willDelete) {
         this.documentService.deleteExcelContent(item).subscribe(result => {
           if (result) {
-            this.openAlertModal('ลบข้อมูลสำเร็จ','success')
+            this.openAlertModal('ลบข้อมูลสำเร็จ', 'success')
             this.getListDoc();
           } else {
-            this.openAlertModal('ไม่สามารถลบข้อมูลได้','error')
+            this.openAlertModal('ไม่สามารถลบข้อมูลได้', 'error')
           }
         }, error => {
-          this.openAlertModal(error.message,'error')
+          this.openAlertModal(error.message, 'error')
         })
       }
     })

src/app/portal-manage/myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component.ts → src/app/portal-manage/my-portal/approved-list/view-list-excel/view-list-excel.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { ActivatedRoute } from '@angular/router';
-import { ExcelContentModel } from '../../../../../models/excel-content.model';
-import { ExcelService } from '../../../../../services/excel.service';
-import { OpenImageComponent } from '../../../open-image/open-image.component';
-import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
 import { firstValueFrom } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../../../shared/shared.module';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 declare var require: any
 import FileSaver from 'file-saver';
 import swal from 'sweetalert';
+import { SharedModule } from '../../../../shared/shared.module';
+import { ExcelContentModel } from '../../../models/excel-content.model';
+import { ExcelService } from '../../../services/excel.service';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 @Component({
   selector: 'app-view-list-excel',
   templateUrl: './view-list-excel.component.html',
@@ -40,7 +38,8 @@ export class ViewListExcelComponent implements OnInit {
   search: string = ''
   checkType: string = '0'
   pagedItems: ExcelContentModel[] = [];
-  constructor(private modalService: NgbModal, private excelService: ExcelService, private activatedRoute: ActivatedRoute,) {
+  dialogRef: any;
+  constructor(private dialog: MatDialog, private modalService: NgbModal, private excelService: ExcelService, private activatedRoute: ActivatedRoute,) {
     this.activatedRoute.paramMap.subscribe(result => {
       this.checkType = result.get("type")!;
     });
@@ -71,15 +70,28 @@ export class ViewListExcelComponent implements OnInit {
     this.pagedItems = data.slice(start, end);
   }
   openEmployeeModal(image: string) {
-    const modalRef = this.modalService.open(OpenImageComponent, {
-      centered: true,
-      windowClass: 'my-dialog-img-preview'
-    })
-    modalRef.componentInstance.linkImage = image
-    modalRef.result.then(result => {
-    }, reason => {
-      this.modalService.dismissAll()
-    })
+    // const modalRef = this.modalService.open(OpenImageComponent, {
+    //   centered: true,
+    //   windowClass: 'my-dialog-img-preview'
+    // })
+    // modalRef.componentInstance.linkImage = image
+    // modalRef.result.then(result => {
+    // }, reason => {
+    //   this.modalService.dismissAll()
+    // })
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
   }
   deleteFile(item: ExcelContentModel) {
     swal({

src/app/portal-manage/myskill-x/myportal/management/portal-category-list-approve/approve-course/approve-course.component.ts → src/app/portal-manage/my-portal/category-list-approve/approve-course/approve-course.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import { CourseModel } from '../../../../../models/course.model';
-import { CourseService } from '../../../../../services/course.service';
-import { OpenImageComponent } from '../../../open-image/open-image.component';
-import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../../../shared/shared.module';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import { firstValueFrom } from 'rxjs';
 declare var require: any
 import FileSaver from 'file-saver';
 import swal from 'sweetalert';
+import { SharedModule } from '../../../../shared/shared.module';
+import { CourseModel } from '../../../models/course.model';
+import { CourseService } from '../../../services/course.service';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 @Component({
   selector: 'app-approve-course',
   templateUrl: './approve-course.component.html',
@@ -38,7 +36,8 @@ export class ApproveCourseComponent implements OnInit {
   listCourse: CourseModel[] = []
   search: string = ''
   pagedItems: CourseModel[] = [];
-  constructor(private modalService: NgbModal, private courseService: CourseService) {
+  dialogRef: any;
+  constructor(private modalService: NgbModal, private courseService: CourseService, private dialog: MatDialog) {
   }
   get totalItems(): number {
     return this.search == ''
@@ -66,15 +65,28 @@ export class ApproveCourseComponent implements OnInit {
     this.pagedItems = data.slice(start, end);
   }
   openEmployeeModal(image: string) {
-    const modalRef = this.modalService.open(OpenImageComponent, {
-      centered: true,
-      windowClass: 'my-dialog-img-preview'
-    })
-    modalRef.componentInstance.linkImage = image
-    modalRef.result.then(result => {
-    }, reason => {
-      this.modalService.dismissAll()
-    })
+    // const modalRef = this.modalService.open(OpenImageComponent, {
+    //   centered: true,
+    //   windowClass: 'my-dialog-img-preview'
+    // })
+    // modalRef.componentInstance.linkImage = image
+    // modalRef.result.then(result => {
+    // }, reason => {
+    //   this.modalService.dismissAll()
+    // })
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
   }
   async downloadFile(logId: string) {
     try {
@@ -110,13 +122,13 @@ export class ApproveCourseComponent implements OnInit {
         this.courseService.approve(item).subscribe(result => {
           if (result) {
             this.modalService.dismissAll()
-            this.openAlertModal('บันทึกข้อมูลสำเร็จ','error')
+            this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'error')
             this.getListCourse();
           } else {
-            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','success')
+            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'success')
           }
         }, error => {
-          this.openAlertModal(error.message,'error')
+          this.openAlertModal(error.message, 'error')
         })
       }
     })
@@ -133,13 +145,13 @@ export class ApproveCourseComponent implements OnInit {
         item.status = 2
         this.courseService.approve(item).subscribe(result => {
           if (result) {
-            this.openAlertModal('บันทึกข้อมูลสำเร็จ','success')
+            this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'success')
             this.getListCourse();
           } else {
-            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','error')
+            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'error')
           }
         }, error => {
-          this.openAlertModal(error.message,'error')
+          this.openAlertModal(error.message, 'error')
         })
       }
     })
@@ -159,13 +171,13 @@ export class ApproveCourseComponent implements OnInit {
       if (willDelete) {
         this.courseService.deleteCourse(item).subscribe(result => {
           if (result) {
-            this.openAlertModal('ลบข้อมูลสำเร็จ','success')
+            this.openAlertModal('ลบข้อมูลสำเร็จ', 'success')
             this.getListCourse();
           } else {
-            this.openAlertModal('ไม่สามารถลบข้อมูลได้','error')
+            this.openAlertModal('ไม่สามารถลบข้อมูลได้', 'error')
           }
         }, error => {
-          this.openAlertModal(error.message,'error')
+          this.openAlertModal(error.message, 'error')
         })
       }
     })

src/app/portal-manage/myskill-x/myportal/management/portal-category-list-approve/approve-doc/approve-doc.component.ts → src/app/portal-manage/my-portal/category-list-approve/approve-doc/approve-doc.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import { OpenImageComponent } from '../../../open-image/open-image.component';
-import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../../../shared/shared.module';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
-import { DocumentModel } from '../../../../../models/document.model';
-import { DocumentService } from '../../../../../services/document.service';
 import { firstValueFrom } from 'rxjs';
 declare var require: any
 import FileSaver from 'file-saver';
 import swal from 'sweetalert';
+import { SharedModule } from '../../../../shared/shared.module';
+import { DocumentModel } from '../../../models/document.model';
+import { DocumentService } from '../../../services/document.service';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 @Component({
   selector: 'app-approve-doc',
   templateUrl: './approve-doc.component.html',
@@ -38,7 +36,8 @@ export class ApproveDocComponent implements OnInit {
   listDoc: DocumentModel[] = []
   search: string = ''
   pagedItems: DocumentModel[] = [];
-  constructor(private modalService: NgbModal, private documentService: DocumentService) {
+  dialogRef: any;
+  constructor(private modalService: NgbModal, private documentService: DocumentService, private dialog: MatDialog) {
   }
   get totalItems(): number {
     return this.search == ''
@@ -66,15 +65,28 @@ export class ApproveDocComponent implements OnInit {
     this.pagedItems = data.slice(start, end);
   }
   openEmployeeModal(image: string) {
-    const modalRef = this.modalService.open(OpenImageComponent, {
-      centered: true,
-      windowClass: 'my-dialog-img-preview'
-    })
-    modalRef.componentInstance.linkImage = image
-    modalRef.result.then(result => {
-    }, reason => {
-      this.modalService.dismissAll()
-    })
+    // const modalRef = this.modalService.open(OpenImageComponent, {
+    //   centered: true,
+    //   windowClass: 'my-dialog-img-preview'
+    // })
+    // modalRef.componentInstance.linkImage = image
+    // modalRef.result.then(result => {
+    // }, reason => {
+    //   this.modalService.dismissAll()
+    // })
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
   }
   async downloadFile(logId: string, lang: string) {
     try {
@@ -113,13 +125,13 @@ export class ApproveDocComponent implements OnInit {
         this.documentService.approve(item).subscribe(result => {
           if (result) {
             this.modalService.dismissAll()
-            this.openAlertModal('บันทึกข้อมูลสำเร็จ','success')
+            this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'success')
             this.getListDoc();
           } else {
-            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','error')
+            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'error')
           }
         }, error => {
-          this.openAlertModal(error.message,'error')
+          this.openAlertModal(error.message, 'error')
         })
       }
     })
@@ -136,13 +148,13 @@ export class ApproveDocComponent implements OnInit {
         item.status = 2
         this.documentService.approve(item).subscribe(result => {
           if (result) {
-            this.openAlertModal('บันทึกข้อมูลสำเร็จ','success')
+            this.openAlertModal('บันทึกข้อมูลสำเร็จ', 'success')
             this.getListDoc();
           } else {
-            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้','error')
+            this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้', 'error')
           }
         }, error => {
-          this.openAlertModal(error.message,'error')
+          this.openAlertModal(error.message, 'error')
         })
       }
     })
@@ -161,13 +173,13 @@ export class ApproveDocComponent implements OnInit {
       if (willDelete) {
         this.documentService.deleteExcel(item).subscribe(result => {
           if (result) {
-            this.openAlertModal('ลบข้อมูลสำเร็จ','success')
+            this.openAlertModal('ลบข้อมูลสำเร็จ', 'success')
             this.getListDoc();
           } else {
-            this.openAlertModal('ไม่สามารถลบข้อมูลได้','error')
+            this.openAlertModal('ไม่สามารถลบข้อมูลได้', 'error')
           }
         }, error => {
-          this.openAlertModal(error.message,'error')
+          this.openAlertModal(error.message, 'error')
         })
       }
     })

src/app/portal-manage/myskill-x/myportal/management/portal-category-list-approve/approve-excel/approve-excel.component.ts → src/app/portal-manage/my-portal/category-list-approve/approve-excel/approve-excel.component.ts

 import { Component, OnInit } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import { OpenImageComponent } from '../../../open-image/open-image.component';
-import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../../../shared/shared.module';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
-import { ExcelModel } from '../../../../../models/excel.model';
-import { ExcelService } from '../../../../../services/excel.service';
 import { firstValueFrom } from 'rxjs';
 declare var require: any
 import FileSaver from 'file-saver';
 import swal from 'sweetalert';
-import { TemplateModel } from '../../../../../models/template.model';
+import { SharedModule } from '../../../../shared/shared.module';
+import { ExcelModel } from '../../../models/excel.model';
+import { ExcelService } from '../../../services/excel.service';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 @Component({
   selector: 'app-approve-excel',
   templateUrl: './approve-excel.component.html',
@@ -39,7 +36,8 @@ export class ApproveExcelComponent implements OnInit {
   listExcel: ExcelModel[] = []
   search: string = ''
   pagedItems: ExcelModel[] = [];
-  constructor(private modalService: NgbModal, private excelService: ExcelService) {
+  dialogRef: any;
+  constructor(private modalService: NgbModal, private excelService: ExcelService, private dialog: MatDialog) {
   }
   get totalItems(): number {
     return this.search == ''
@@ -67,15 +65,28 @@ export class ApproveExcelComponent implements OnInit {
     this.pagedItems = data.slice(start, end);
   }
   openEmployeeModal(image: string) {
-    const modalRef = this.modalService.open(OpenImageComponent, {
-      centered: true,
-      windowClass: 'my-dialog-img-preview'
-    })
-    modalRef.componentInstance.linkImage = image
-    modalRef.result.then(result => {
-    }, reason => {
-      this.modalService.dismissAll()
-    })
+    // const modalRef = this.modalService.open(OpenImageComponent, {
+    //   centered: true,
+    //   windowClass: 'my-dialog-img-preview'
+    // })
+    // modalRef.componentInstance.linkImage = image
+    // modalRef.result.then(result => {
+    // }, reason => {
+    //   this.modalService.dismissAll()
+    // })
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
   }
   async downloadFile(logId: string) {
     try {

src/app/portal-manage/myskill-x/myportal/management/portal-category-list-approve/portal-category-list-approve.component.ts → src/app/portal-manage/my-portal/category-list-approve/category-list-approve.component.ts

@@ -2,17 +2,17 @@ import { Component, OnInit } from "@angular/core";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { FormBuilder, FormGroup, FormsModule, Validators } from "@angular/forms";
 import { Router, RouterModule } from "@angular/router";
-import { ExcelService } from "../../../../services/excel.service";
-import { DocumentService } from "../../../../services/document.service";
-import { CourseService } from "../../../../services/course.service";
 import { CommonModule } from "@angular/common";
 import { TranslateModule } from "@ngx-translate/core";
-import { SharedModule } from "../../../../../shared/shared.module";
+import { SharedModule } from "../../../shared/shared.module";
+import { CourseService } from "../../services/course.service";
+import { DocumentService } from "../../services/document.service";
+import { ExcelService } from "../../services/excel.service";
 
 @Component({
-  selector: "app-portal-category-list-approve",
-  templateUrl: "./portal-category-list-approve.component.html",
-  styleUrls: ["./portal-category-list-approve.component.scss"],
+  selector: "app-category-list-approve",
+  templateUrl: "./category-list-approve.component.html",
+  styleUrls: ["./category-list-approve.component.scss"],
   standalone: true,
   imports: [
     CommonModule,
@@ -22,12 +22,37 @@ import { SharedModule } from "../../../../../shared/shared.module";
     SharedModule,
   ],
 })
-export class PortalCategoryListApproveComponent implements OnInit {
+export class CategoryListApproveComponent implements OnInit {
+  path: {
+    data: string,
+    list: [
+      "myhr-plus",
+      "myhr-lite",
+      "zeeme",
+      "myface",
+      "mylearn",
+      "myjob",
+      "myskill-x"
+    ]
+  } = {
+      data: '',
+      list: [
+        "myhr-plus",
+        "myhr-lite",
+        "zeeme",
+        "myface",
+        "mylearn",
+        "myjob",
+        "myskill-x"
+      ]
+    }
   constructor(
     private modalService: NgbModal,
     private router: Router,
     private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService
-  ) { }
+  ) {
+    this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
+  }
 
   page = 1;
   pageSize = 7;
@@ -70,11 +95,11 @@ export class PortalCategoryListApproveComponent implements OnInit {
   }
   openView(id: string) {
     if (id == '1') {
-      this.router.navigate(['/myskill-x/approve-excel']);
+      this.router.navigate(['/' + this.path.data + '/approve-excel']);
     } else if (id == '2') {
-      this.router.navigate(['/myskill-x/approve-doc']);
+      this.router.navigate(['/' + this.path.data + '/approve-doc']);
     } else if (id == '3') {
-      this.router.navigate(['/myskill-x/approve-course']);
+      this.router.navigate(['/' + this.path.data + '/approve-course']);
     }
   }
   async getListCount() {

src/app/portal-manage/my-portal/category-list/category-list.component.html

+<app-page-header [title]="'รายการเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสาร'"></app-page-header>
+<!-- <div class="row">
+  <div class="col-12">
+    <div class="card card-body">
+      <h4 class="card-title">รายการเอกสาร</h4>
+      <div class="row justify-content-center">
+        <div class="col-lg-4 col-md-6  col-sm-6 col-12" *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+          <div class="card border-border-2">
+            <div class="card-body text-center">
+              <img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
+              <h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
+            </div>
+            <div class="d-flex  justify-content-between bg-light border-top p-3">
+              <div>
+                <span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+              </div>
+              <div >
+                <button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->
+<ng-template #name>
+  <div class="grid grid-cols-12 gap-6">
+    <div class="xl:col-span-12 col-span-12">
+      <div class="box">
+        <div class="box-header justify-between">
+          <div class="box-title">
+            {{ 'All List' | translate}} <span
+              class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <div>
+              <input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
+                aria-label=".form-control-sm example" [(ngModel)]='searchText'>
+            </div>
+          </div>
+        </div>
+        <div class="box-body">
+          <div class="table-responsive">
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+              <thead>
+                <tr class="border-b border text-white" style="background-color: #49b6f5;">
+                  <th class="text-center" scope="col">บริษัท</th>
+                </tr>
+              </thead>
+              <tbody *ngIf="company.loading">
+                <tr>
+                  <td colspan="1" class="loading">
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <span>กำลังค้นหา...</span>
+                  </td>
+                </tr>
+              </tbody>
+              @if(!company.loading && !companyFilter().length){
+              <tbody>
+                <tr style="background-color:#ebf2f6">
+                  <td colspan="1" class="text-center">ไม่พบข้อมูล</td>
+                </tr>
+              </tbody>
+              }
+              @if(!company.loading && companyFilter().length){
+              <tbody id="tableBody">
+                @for (items of companyFilter() | slice: page * pageSize : (page + 1) * pageSize; track $index) {
+                <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
+                  (mouseleave)="tableHover.clear()"
+                  [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
+                  (click)="selectCompany(items)">
+                  <td colspan="6" class="font-16 font-medium">
+                    {{items.companyName}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+              }
+            </table>
+          </div>
+        </div>
+        <div class="box-footer">
+
+          @if(companyFilter().length > 0){
+          <div class="flex items-center flex-wrap overflow-auto">
+            <div class="d-flex justify-content-end p-2">
+              <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                [(ngModel)]="pageSize" (ngModelChange)="page">
+                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                  {{"รายการต่อหน้า"}}: {{item}}
+                </option>
+              </select>
+            </div>
+            <div class="mb-2 sm:mb-0">
+              <div>
+                {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
+                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+              </div>
+            </div>
+            <div class="ms-auto">
+              <nav aria-label="Page navigation">
+                <ul class="ti-pagination  mb-0">
+                  @if(page > 0){
+                  <li class="page-item {{page==0 ? 'disabled' : ''}}"><a
+                      class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page - 1">{{'Previous' |
+                      translate}}</a>
+                  </li>
+                  <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="page = page - 1">{{page}}</a>
+                  </li>
+                  }
+                  <li class="page-item"><a class="page-link active px-3 py-[0.375rem]" href="javascript:void(0);">{{page
+                      +
+                      1}}</a>
+                  </li>
+
+                  @if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
+                      class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 1">{{page +
+                      2}}</a></li>
+                    }
+                    @if((page + 2) * pageSize < companyFilter().length){ <li class="page-item"><a
+                        class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 2">{{page
+                        +
+                        3}}</a></li>
+                      }
+
+                      @if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
+                          class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page + 1">{{'Next' |
+                          translate}}</a>
+                        </li>
+                        }
+                </ul>
+              </nav>
+            </div>
+          </div>
+          }
+          <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
+            <div><i class="fa fa-times text-danger"></i> = used on menu</div>
+            <div><i class="fa fa-check text-success"></i> = unused on menu</div>
+            <div><i class="ri-file-download-line text-info"></i> = download files</div>
+            <div><i class="ri-printer-line text-warning"></i> = print report</div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+
+<!-- <ng-container *ngTemplateOutlet="name2"></ng-container> -->
+
+<!-- <ng-template #name2> -->
+  <div class="max-w-7xl mx-auto">
+    <div class="box p-4">
+      <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
+
+      <!-- Flex แทน Grid -->
+      <div class="flex flex-wrap justify-center gap-6">
+
+        <div
+          class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col"
+          style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+          <div class="p-8 text-center">
+            <div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
+              <img src="{{ c.img }}" class="" alt="" />
+            </div>
+            <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
+          </div>
+
+          <!-- Footer -->
+          <div class="mt-auto">
+            <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
+              <div>
+                <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+              </div>
+              <div>
+                <button class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 
+                text-white text-sm font-medium rounded-md shadow-md ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
+                active hover:bg-success hover:scale-110 transition duration-300" (click)="openView(c.id)">
+                  รายละเอียด
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+<!-- </ng-template> -->
\ No newline at end of file

src/app/portal-manage/my-portal/category-list/category-list.component.ts

+
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
+import { DashboardService } from '../../../shared/services/dashboard.service';
+import { Router, RouterModule } from '@angular/router';
+import { CourseService } from '../../services/course.service';
+import { DocumentService } from '../../services/document.service';
+import { ExcelService } from '../../services/excel.service';
+import { WidgetService } from '../../services/widgets.service';
+import { SharedModule } from '../../../shared/shared.module';
+import { DatasourseTableService } from '../../services/datasourse-table.service';
+import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
+import { TokenService } from '../../../shared/services/token.service';
+
+@Component({
+  selector: 'app-category-list',
+  standalone: true,
+  imports: [SharedModule],
+  templateUrl: './category-list.component.html',
+  styleUrls: ['./category-list.component.scss']
+})
+export class CategorylistComponent implements OnInit {
+  path: {
+    data: string,
+    list: [
+      "myhr-plus",
+      "myhr-lite",
+      "zeeme",
+      "myface",
+      "mylearn",
+      "myjob",
+      "myskill-x"
+    ]
+  } = {
+      data: '',
+      list: [
+        "myhr-plus",
+        "myhr-lite",
+        "zeeme",
+        "myface",
+        "mylearn",
+        "myjob",
+        "myskill-x"
+      ]
+    }
+  company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
+  searchText: string = '';
+
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
+  buttonHover: Map<string, boolean> = new Map<string, boolean>()
+  constructor(
+    private router: Router,
+    private excelService: ExcelService,
+    private documentService: DocumentService,
+    private courseService: CourseService,
+    private widgetService: WidgetService,
+    private datasourceTable: DatasourseTableService,
+    private tokenService: TokenService
+  ) {
+    this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
+  }
+  page = 1;
+  pageSize = 10;
+  testdata: {
+    id: string;
+    img: String;
+    name: String;
+    details: String;
+    document: String;
+  }[] = [];
+
+  ngOnInit() {
+
+    this.testdata = [
+      {
+        id: '1',
+        img: "assets/images/icons/excel.png",
+        name: "Excel",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '2',
+        img: "assets/images/icons/document.png",
+        name: "Document",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '3',
+        img: "assets/images/icons/course.png",
+        name: "Course",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      // {
+      //   id: '4',
+      //   img: "assets/images/icons/widget.png",
+      //   name: "Widgets",
+      //   details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+      //   document: "0"
+      // },
+      // {
+      //   id: '5',
+      //   img: "assets/images/faces/1.jpg",
+      //   name: "BI",
+      //   details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+      //   document: "0"
+      // },
+
+    ];
+    this.getListCount();
+    this.getCompany()
+  }
+
+  getCompany() {
+    this.company.loading = true
+    this.datasourceTable.getList().subscribe({
+      next: (response: DatasourceTableModel[]) => {
+        this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
+        this.company.loading = false
+      },
+      error: (error) => {
+        this.company.loading = false
+      }
+    });
+  }
+  companyFilter() {
+    return this.company.list.filter(e => e.companyName.includes(this.searchText))
+  }
+  selectCompany(body: DatasourceTableModel) {
+    this.tokenService.saveSelectCompany(body as any)
+    this.getListCount();
+
+  }
+
+  async getListCount() {
+    try {
+      const countExcel = await this.excelService.getCountContent().toPromise();
+      const countDoc = await this.documentService.getCountContent().toPromise();
+      const countCourse = await this.courseService.getCountContent().toPromise();
+      const countWidgets = await this.widgetService.getCount().toPromise();
+      this.testdata.forEach((x, i) => {
+        if (i == 0) {
+          x.document = countExcel!.toString()
+        } else if (i == 1) {
+          x.document = countDoc!.toString()
+        } else if (i == 2) {
+          x.document = countCourse!.toString()
+        } else if (i == 3) {
+          x.document = countWidgets!.toString()
+        }
+      })
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  openView(id: string) {
+    if (id == '1') {
+      this.router.navigate(['/' + this.path.data + '/view-list-excel']);
+    } else if (id == '2') {
+      this.router.navigate(['/' + this.path.data + '/view-list-doc']);
+    } else if (id == '3') {
+      this.router.navigate(['/' + this.path.data + '/view-list-course']);
+    }
+    //  else if (id == '4') {
+    //   this.router.navigate(['/' + this.path.data + '/view-list-widgets']);
+    // }
+  }
+
+}

src/app/portal-manage/myskill-x/myportal/view-list-course/view-list-course.component.ts → src/app/portal-manage/my-portal/category-list/view-list-course/view-list-course.component.ts

 import { Component, OnInit } from '@angular/core';
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { CourseContentModel } from '../../../models/course-content.model';
 import { CourseService } from '../../../services/course.service';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
-import { OpenImageComponent } from '../open-image/open-image.component';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -14,6 +11,7 @@ import { SharedModule } from '../../../../shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
 import saveAs from 'file-saver';
 import swal from 'sweetalert';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 
 @Component({
   selector: 'app-view-list-course',

src/app/portal-manage/myskill-x/myportal/view-list-doc/view-list-doc.component.ts → src/app/portal-manage/my-portal/category-list/view-list-doc/view-list-doc.component.ts

 import { Component, OnInit } from '@angular/core';
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { DocumentContentModel } from '../../../models/document-content.model';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
-import { OpenImageComponent } from '../open-image/open-image.component';
 import { DocumentService } from '../../../services/document.service';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
@@ -14,6 +11,7 @@ import { SharedModule } from '../../../../shared/shared.module';
 import swal from 'sweetalert';
 import { saveAs } from 'file-saver';
 import { TranslateModule } from '@ngx-translate/core';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 
 @Component({
   selector: 'app-view-list-doc',

src/app/portal-manage/myskill-x/myportal/view-list-excel/view-list-excel.component.ts → src/app/portal-manage/my-portal/category-list/view-list-excel/view-list-excel.component.ts

 import { Component, OnInit } from '@angular/core';
-import { ExcelService } from '../../../services/excel.service';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { ExcelContentModel } from '../../../models/excel-content.model';
-import { OpenImageComponent } from '../open-image/open-image.component';
-import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../shared/shared.module';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import swal from 'sweetalert';
 import { saveAs } from 'file-saver';
+import { SharedModule } from '../../../../shared/shared.module';
+import { ExcelContentModel } from '../../../models/excel-content.model';
+import { ExcelService } from '../../../services/excel.service';
+import { OpenImageComponent } from '../../open-image/open-image.component';
 
 @Component({
   selector: 'app-view-list-excel',

src/app/portal-manage/myskill-x/myportal/portal-category-list/portal-category-list.component.ts → src/app/portal-manage/my-portal/create-category/create-category.component.ts

 import { Component, OnInit } from '@angular/core';
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { Router, RouterModule } from '@angular/router';
-import { ExcelService } from '../../../services/excel.service';
-import { DocumentService } from '../../../services/document.service';
-import { CourseService } from '../../../services/course.service';
-import { WidgetService } from '../../../services/widgets.service';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { CourseService } from '../../services/course.service';
+import { DocumentService } from '../../services/document.service';
+import { ExcelService } from '../../services/excel.service';
+import { WidgetService } from '../../services/widgets.service';
+
 
 
 @Component({
-  selector: 'app-portal-category-list',
-  templateUrl: './portal-category-list.component.html',
-  styleUrls: ['./portal-category-list.component.scss'],
+  selector: 'app-create-category',
+  templateUrl: './create-category.component.html',
+  styleUrls: ['./create-category.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
@@ -24,14 +25,41 @@ import { SharedModule } from '../../../../shared/shared.module';
     SharedModule,
   ],
 })
-export class PortalCategoryListComponent implements OnInit {
-
-  constructor(
-    private routes: Router,
-    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService, private widgetService: WidgetService
-  ) { }
+export class CreateCategoryComponent implements OnInit {
+  path: {
+    data: string,
+    list: [
+      "myhr-plus",
+      "myhr-lite",
+      "zeeme",
+      "myface",
+      "mylearn",
+      "myjob",
+      "myskill-x"
+    ]
+  } = {
+      data: '',
+      list: [
+        "myhr-plus",
+        "myhr-lite",
+        "zeeme",
+        "myface",
+        "mylearn",
+        "myjob",
+        "myskill-x"
+      ]
+    }
+  constructor(private modalService: NgbModal, private router: Router,
+    private excelService: ExcelService,
+    private documentService: DocumentService,
+    private courseService: CourseService,
+    private widgetService: WidgetService
+  ) {
+    this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
+  }
   page = 1;
   pageSize = 10;
+
   testdata: {
     id: string;
     img: String;
@@ -41,7 +69,6 @@ export class PortalCategoryListComponent implements OnInit {
   }[] = [];
 
   ngOnInit() {
-
     this.testdata = [
       {
         id: '1',
@@ -64,29 +91,28 @@ export class PortalCategoryListComponent implements OnInit {
         details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
         document: "0"
       },
-      {
-        id: '4',
-        img: "assets/images/icons/widget.png",
-        name: "Widgets",
-        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
-        document: "0"
-      },
-      {
-        id: '5',
-        img: "assets/images/faces/1.jpg",
-        name: "BI",
-        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
-        document: "0"
-      },
-
+      // {
+      //   id: '4',
+      //   img: "assets/images/icons/widget.png",
+      //   name: "Widgets",
+      //   details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+      //   document: "0"
+      // },
+      // {
+      //   id: '5',
+      //   img: "assets/images/faces/1.jpg",
+      //   name: "BI",
+      //   details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+      //   document: "0"
+      // }
     ];
     this.getListCount();
   }
   async getListCount() {
     try {
-      const countExcel = await this.excelService.getCountContent().toPromise();
-      const countDoc = await this.documentService.getCountContent().toPromise();
-      const countCourse = await this.courseService.getCountContent().toPromise();
+      const countExcel = await this.excelService.getCount().toPromise();
+      const countDoc = await this.documentService.getCount().toPromise();
+      const countCourse = await this.courseService.getCount().toPromise();
       const countWidgets = await this.widgetService.getCount().toPromise();
       this.testdata.forEach((x, i) => {
         if (i == 0) {
@@ -105,14 +131,26 @@ export class PortalCategoryListComponent implements OnInit {
   }
   openView(id: string) {
     if (id == '1') {
-      this.routes.navigate(['/myskill-x/view-list-excel']);
+      this.router.navigate(['/' + this.path.data + '/list-excel']);
     } else if (id == '2') {
-      this.routes.navigate(['/myskill-x/view-list-doc']);
+      this.router.navigate(['/' + this.path.data + '/list-doc']);
     } else if (id == '3') {
-      this.routes.navigate(['/myskill-x/view-list-course']);
-    } else if (id == '4') {
-      this.routes.navigate(['/myskill-x/view-list-widgets']);
+      this.router.navigate(['/' + this.path.data + '/list-course']);
+    }
+    //  else if (id == '4') {
+    //   this.router.navigate(['/' + this.path.data + '/list-widgets']);
+    // }
+
   }
+  openModal(targetModal: NgbModal) {
+    this.modalService.open(targetModal, {
+      centered: true,
+      backdrop: "static",
+    });
+  }
+
+  closeBtnClick() {
+    this.modalService.dismissAll();
   }
 
 }

src/app/portal-manage/myskill-x/myportal/list-course/list-course.component.ts → src/app/portal-manage/my-portal/create-category/list-course/list-course.component.ts

 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
-import { OpenImageComponent } from '../open-image/open-image.component';
 import { UploadService } from '../../../services/upload.service';
 import { TagService } from '../../../services/tag.service';
 import { TagModel } from '../../../models/tag.mmodel';
@@ -21,6 +18,8 @@ import { CourseModel } from '../../../models/course.model'; // Corrected model i
 import saveAs from 'file-saver';
 import { TagInputModule } from 'ngx-chips';
 import swal from 'sweetalert';
+import { OpenImageComponent } from '../../open-image/open-image.component';
+import { AlertModalComponent } from '../../alert-modal/alert-modal.component';
 
 @Component({
   selector: 'app-list-course',

src/app/portal-manage/myskill-x/myportal/list-doc/list-doc.component.ts → src/app/portal-manage/my-portal/create-category/list-doc/list-doc.component.ts

 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component'; // ตรวจสอบว่ามี ConfirmModalComponent นี้อยู่จริง
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
-import { OpenImageComponent } from '../open-image/open-image.component'; // ตรวจสอบว่ามี OpenImageComponent นี้อยู่จริง
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
@@ -20,6 +17,8 @@ import { DocumentModel } from '../../../models/document.model';
 import { DocumentService } from '../../../services/document.service';
 import saveAs from 'file-saver';
 import swal from 'sweetalert';
+import { OpenImageComponent } from '../../open-image/open-image.component';
+import { AlertModalComponent } from '../../alert-modal/alert-modal.component';
 
 
 @Component({

src/app/portal-manage/myskill-x/myportal/list-excell/list-excell.component.html → src/app/portal-manage/my-portal/create-category/list-excel/list-excel.component.html

@@ -323,7 +323,7 @@
 
         <div class="xl:col-span-12 col-span-12">
           <label for="group" class="block text-primary mb-2 font-bold font-14">{{ 'กลุ่ม' | translate }}</label>
-          <select
+          <select *ngIf="modelExcel.group"
             class="custom-select w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
             id="group" [(ngModel)]="modelExcel.group.groupId" (change)="selectGroup()" name="group">
             <option *ngFor="let item of listGroup" [ngValue]="item.groupId">{{item.thName}}</option>

src/app/portal-manage/myskill-x/myportal/list-excell/list-excell.component.ts → src/app/portal-manage/my-portal/create-category/list-excel/list-excel.component.ts

@@ -2,12 +2,10 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { ExcelModel } from '../../../models/excel.model';
 import { ExcelService } from '../../../services/excel.service';
-import { AlertModalComponent } from '../alert-modal/alert-modal.component';
 import { UploadService } from '../../../services/upload.service';
 import { TagService } from '../../../services/tag.service';
 import { TagModel } from '../../../models/tag.mmodel';
 import { GroupModel } from '../../../models/group.mmodel';
-import { OpenImageComponent } from '../open-image/open-image.component';
 import { GroupService } from '../../../services/group.service';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -19,12 +17,14 @@ import { TranslateModule } from '@ngx-translate/core';
 import saveAs from 'file-saver';
 import { TagInputModule } from 'ngx-chips';
 import swal from 'sweetalert';
+import { OpenImageComponent } from '../../open-image/open-image.component';
+import { AlertModalComponent } from '../../alert-modal/alert-modal.component';
 
 
 @Component({
   selector: 'app-list-excel',
-  templateUrl: './list-excell.component.html', // Note: original was list-excell.component.html
-  styleUrls: ['./list-excell.component.scss'],
+  templateUrl: './list-excel.component.html',
+  styleUrls: ['./list-excel.component.scss'],
   standalone: true,
   imports: [
     CommonModule,
@@ -403,7 +403,7 @@ export class ListExcelComponent implements OnInit {
   }
 
   get pages(): number[] {
-    const pages = [];
+    const pages:number[] = [];
     const startPage = Math.max(0, this.pageIndex - Math.floor(this.maxPagesToShow / 2));
     const endPage = Math.min(this.totalPages - 1, startPage + this.maxPagesToShow - 1);
 

src/app/portal-manage/myskill-x/myportal/datasource-table/datasource-table.component.ts → src/app/portal-manage/my-portal/datasource-table/datasource-table.component.ts

 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Router, RouterModule } from '@angular/router';
-import { SharedModule } from '../../../../shared/shared.module';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import swal from 'sweetalert';
 import { MatPaginator } from '@angular/material/paginator';
@@ -10,13 +9,12 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { CommonModule } from '@angular/common';
 import { FileUploadModule } from 'ng2-file-upload';
 import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
-import { environment } from '../../../../../environments/environment';
-import { TokenService } from '../../../../shared/services/token.service'
 import { QuillModule } from 'ngx-quill';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { DatasourseTableService } from '../../../services/datasourse-table.service';
-import { NgbPagination } from '@ng-bootstrap/ng-bootstrap';
-import { DatasourceTableModel, MyDatasourceTableModel } from '../../../models/datasource-table.model';
+import { TokenService } from '../../../shared/services/token.service';
+import { SharedModule } from '../../../shared/shared.module';
+import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
+import { DatasourseTableService } from '../../services/datasourse-table.service';
 
 @Component({
     selector: 'app-datasource-table',

src/app/portal-manage/myskill-x/myportal/set-excel-reports/excel-list/excel-list.component.ts → src/app/portal-manage/my-portal/excel-list/excel-list.component.ts

@@ -4,26 +4,26 @@ import { forkJoin, Subscription } from 'rxjs';
 import { NgbDate, NgbDatepickerModule, NgbModal, NgbModalRef, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { ColumnModel } from '@syncfusion/ej2-angular-grids';
 import * as FileSaver from 'file-saver';
-import { MyTemplateFileModel, MyTemplateModel, TemplateFileModel, TemplateModel } from '../../../../models/template.model';
-import { ModuleModel, MyModuleModel } from '../../../../models/module.model';
-import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel, MyExcelPortalGroupModel, MyExcelPortalModel, MyExcelPortalTagsModel } from '../../../../models/excel-portal.model';
-import { ExcelReportService } from '../../../../services/excel-report.service';
-import { CustomCubeService } from '../../../../services/custom-cube.service';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../../shared/shared.module';
 import { MatPaginator } from '@angular/material/paginator';
 import { QuillModule } from 'ngx-quill';
 import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { FileUploadModule } from 'ng2-file-upload';
 import { FormsModule, NgModel } from '@angular/forms';
-import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
-import { PivotSyncfutionComponent } from "../../../../../pivot-syncfution/pivot-syncfution.component";
-import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe';
 import swal from 'sweetalert';
-import { DatasourceTableModel, MyDatasourceTableModel } from '../../../../models/datasource-table.model';
-import { DatasourseTableService } from '../../../../services/datasourse-table.service';
+import { SafeUrlPipe } from '../../../../pipe/safe-url.pipe';
+import { DatagridSyncfutionComponent } from '../../../datagrid-syncfution/datagrid-syncfution.component';
+import { PivotSyncfutionComponent } from '../../../pivot-syncfution/pivot-syncfution.component';
+import { SharedModule } from '../../../shared/shared.module';
+import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
+import { ExcelPortalModel, ExcelPortalGroupModel, ExcelPortalTagsModel, MyExcelPortalModel, MyExcelPortalGroupModel, MyExcelPortalTagsModel } from '../../models/excel-portal.model';
+import { ModuleModel, MyModuleModel } from '../../models/module.model';
+import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model';
+import { CustomCubeService } from '../../services/custom-cube.service';
+import { DatasourseTableService } from '../../services/datasourse-table.service';
+import { ExcelReportService } from '../../services/excel-report.service';
 export interface ModalDetail {
     text: { cardHead: string, search: string[], tableHead: string[] }
 }
@@ -301,7 +301,7 @@ export class ExcelListComponent implements OnInit {
                     edesc: this.bodyTemplate.data.edesc,
                     module: this.bodyTemplate.data.module
                 }
-                this.excelReportService.postTemplate(body).subscribe(response => {
+                this.excelReportService.postTemplate(this.bodyTemplate.data.companyId, body).subscribe(response => {
                     if (response.success) {
                         this.showAlert(response.message, 'success')
                         this.getExcelList()
@@ -477,7 +477,7 @@ export class ExcelListComponent implements OnInit {
         const file: File = event.target.files[0];
 
         if (!file) {
-            this.showAlert('กรุณาเลือกไฟล์','warning');
+            this.showAlert('กรุณาเลือกไฟล์', 'warning');
             return;
         }
 
@@ -485,7 +485,7 @@ export class ExcelListComponent implements OnInit {
         const fileExtension = file.name.split('.').pop()?.toLowerCase();
 
         if (!this.allowedExtensions.includes(fileExtension || '')) {
-            this.showAlert('รองรับเฉพาะไฟล์ Excel (.xls, .xlsx, .xlsm) เท่านั้น','error');
+            this.showAlert('รองรับเฉพาะไฟล์ Excel (.xls, .xlsx, .xlsm) เท่านั้น', 'error');
             return;
         }
 
@@ -964,7 +964,7 @@ export class ExcelListComponent implements OnInit {
     }
 
     closeModalexcel_portal(result?: ExcelPortalModel) {
-        if(result){
+        if (result) {
             this.templateFile.portalId = result.excelId
         }
         this.modalRefexcel_portal?.close()

src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.scss

+.ti-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom-width: 1px;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+::ng-deep [ngbDatepickerDayView].today {
+    background-color: #e0f2fe !important;
+}
+
+::ng-deep [ngbDatepickerDayView].bg-primary {
+    background-color: rgb(var(--primary)) !important;
+    color: #ffffff !important;
+}
+
+/* ให้ datepicker popup ทะลุ modal ได้ */
+::ng-deep ngb-datepicker,
+::ng-deep .ngb-datepicker-container {
+    z-index: 2000 !important;
+}
+
+/* เผื่อ modal มี overflow ซ่อนอยู่ */
+::ng-deep .ti-modal-content {
+    overflow: visible !important;
+}

src/app/portal-manage/myskill-x/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component.ts → src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.ts

@@ -2,25 +2,23 @@ import { ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild } from '@a
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { NgbDate, NgbDatepickerModule, NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as FileSaver from 'file-saver';
-import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
 import { forkJoin, Subscription } from 'rxjs';
 import { ColumnModel } from '@syncfusion/ej2-grids';
-import { MyTemplateFileModel, MyTemplateModel, TemplateFileModel, TemplateModel } from '../../../../models/template.model';
-import { ModuleModel } from '../../../../models/module.model';
-import { ExcelReportService } from '../../../../services/excel-report.service';
-import { CustomCubeService } from '../../../../services/custom-cube.service';
 import { CommonModule } from '@angular/common';
-import { SharedModule } from '../../../../../shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule, NgModel } from '@angular/forms';
 import { FileUploadModule } from 'ng2-file-upload';
 import { QuillModule } from 'ngx-quill';
 import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
-import { PivotSyncfutionComponent } from '../../../../../pivot-syncfution/pivot-syncfution.component';
-import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe';
 import swal from 'sweetalert';
+import { DatagridSyncfutionComponent } from '../../../datagrid-syncfution/datagrid-syncfution.component';
+import { PivotSyncfutionComponent } from '../../../pivot-syncfution/pivot-syncfution.component';
+import { SharedModule } from '../../../shared/shared.module';
+import { ModuleModel } from '../../models/module.model';
+import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model';
+import { CustomCubeService } from '../../services/custom-cube.service';
+import { ExcelReportService } from '../../services/excel-report.service';
 export interface ModalDetail {
     text: { cardHead: string, search: string[], tableHead: string[] }
 }
@@ -265,7 +263,7 @@ export class ExcelReportToggleComponent implements OnInit {
         return { date: `${day}-${month}-${year}`, time: `${hours}:${minutes}` };
     }
     showAlert(text: string, type: 'success' | 'error') {
-        swal("แจ้งเตือน", text,type);
+        swal("แจ้งเตือน", text, type);
     }
 
     openPrintModal(templateFile: TemplateFileModel) {
@@ -390,7 +388,7 @@ export class ExcelReportToggleComponent implements OnInit {
             this.cdr.detectChanges()
         }, (err) => {
             this.loadingExcel = false
-            this.showAlert(err.message,'error')
+            this.showAlert(err.message, 'error')
             this.cdr.detectChanges()
         })
     }
@@ -421,7 +419,7 @@ export class ExcelReportToggleComponent implements OnInit {
     }
 
     getExcelColumn() {
-        if(this.excelReport){
+        if (this.excelReport) {
 
             const body = {
                 templateId: this.excelReport.templateId,
@@ -520,7 +518,7 @@ export class ExcelReportToggleComponent implements OnInit {
                     pivotStr: "",
                 }
                 this.customCubeService.saveExcelPerspective(body).subscribe(response => {
-                    if(response.success) {
+                    if (response.success) {
                         this.loadingExcel = false
                         this.showAlert(response.message, 'success')
                     } else {
@@ -542,7 +540,7 @@ export class ExcelReportToggleComponent implements OnInit {
                     pivotStr: this.pivotLayout.data,
                 }
                 this.customCubeService.saveExcelPerspective(body).subscribe(response => {
-                    if(response.success) {
+                    if (response.success) {
                         this.loadingExcel = false
                         this.showAlert(response.message, 'success')
                     } else {

src/app/portal-manage/myskill-x/myportal/excel-report/excel-report.component.ts → src/app/portal-manage/my-portal/excel-report/excel-report.component.ts

@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { SharedModule } from '../../../../shared/shared.module';
-import { ExcelReportService } from '../../../services/excel-report.service';
 import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
 import FileSaver from 'file-saver';
-import { TemplateFileMiniModel } from '../../../models/template-file-mini.model';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { TemplateFileMiniModel } from '../../models/template-file-mini.model';
+import { ExcelReportService } from '../../services/excel-report.service';
 
 export interface ValueDetailItem {
   id: string;

src/app/portal-manage/myskill-x/myportal/open-image/open-image.component.ts → src/app/portal-manage/my-portal/open-image/open-image.component.ts

@@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; // น
 @Component({
   selector: 'app-open-image',
   templateUrl: './open-image.component.html',
-  styleUrls: ['./open-image.component.scss']
+  styleUrls: ['./open-image.component.scss'],
 })
 export class OpenImageComponent implements OnInit {
   linkImage: string = '';

src/app/portal-manage/my-portal/view-list-excel/view-list-excel.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import swal from 'sweetalert';
+import { saveAs } from 'file-saver';
+import { SharedModule } from '../../../../shared/shared.module';
+import { ExcelContentModel } from '../../../models/excel-content.model';
+import { ExcelService } from '../../../services/excel.service';
+import { OpenImageComponent } from '../../../open-image/open-image.component';
+
+@Component({
+  selector: 'app-view-list-excel',
+  templateUrl: './view-list-excel.component.html',
+  styleUrls: ['./view-list-excel.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ViewListExcelComponent implements OnInit {
+  page = 1;
+  pageSize = 10;
+  listExcel: ExcelContentModel[] = [];
+  search: string = '';
+  checkType: string = '0';
+  dialogRef: any;
+
+  constructor(
+    private modalService: NgbModal,
+    private excelService: ExcelService,
+    private activatedRoute: ActivatedRoute,
+    private dialog: MatDialog,
+  ) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.checkType = result.get("type")!;
+    });
+  }
+  openDialog(image: string) {
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
+  }
+
+  // openEmployeeModal(image: string) {
+  //   const modalRef = this.modalService.open(OpenImageComponent, {
+  //     centered: true,
+  //     windowClass: 'my-dialog-img-preview'
+  //   });
+  //   modalRef.componentInstance.linkImage = image;
+  //   modalRef.result.then(result => {
+  //   }, reason => {
+  //     this.modalService.dismissAll();
+  //   });
+  // }
+
+  deleteFile(item: ExcelContentModel) {
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: "คุณต้องการลบข้อมูลนี้หรือไม่",
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["ยกเลิก", "ยืนยัน"],
+    }).then((willDelete: boolean) => {
+      if (willDelete) {
+        this.excelService.deleteExcelContent(item).subscribe(result => {
+          if (result) {
+            this.openAlertModal('ลบข้อมูลสำเร็จ','success');
+            this.getListExcel();
+          } else {
+            this.openAlertModal('ไม่สามารถลบข้อมูลได้','error');
+          }
+        }, error => {
+          this.openAlertModal(error.message,'error');
+        });
+      }
+    });
+  }
+
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.excelService.downloadFileContent(logId).toPromise();
+      if (data) {
+        saveAs(new Blob([data]), "file_download.xlsx");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+
+  getStatus(status: string): string {
+    if (status == '0') {
+      return 'รออนุมัติ';
+    } else if (status == '1') {
+      return 'เปิดใช้งาน';
+    } else if (status == '2') {
+      return 'ไม่อนุมัติ';
+    }
+    return '';
+  }
+
+  filterListExcel() {
+    return this.listExcel.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()));
+  }
+
+  async getListExcel() {
+    try {
+      const data = await this.excelService.getListExcelContent().toPromise();
+      this.listExcel = data!.map(x => new ExcelContentModel(x));
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+
+  ngOnInit() {
+    this.getListExcel();
+  }
+
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+
+  openAlertModal(text: string, type: 'success' | 'error') {
+    swal("แจ้งเตือน", text, type);
+  }
+
+  coverDate(date: string) {
+    return date.split('-').reverse().join('/');
+  }
+}
\ No newline at end of file

src/app/portal-manage/myhr-plus/myhr-plus.module.ts

@@ -5,12 +5,112 @@ import { RouterModule, Routes } from '@angular/router';
 
 export const myhrplus: Routes = [
   {
-    path: "myhr-plus", children:[
+    path: "myhr-plus", children: [
       {
         path: 'dashboard',
         loadComponent: () =>
           import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
       },
+      {
+        path: 'category-list',
+        loadComponent: () =>
+          import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
+      },
+      {
+        path: 'view-list-excel',
+        loadComponent: () =>
+          import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+      },
+      {
+        path: 'view-list-doc',
+        loadComponent: () =>
+          import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+      },
+      {
+        path: 'view-list-course',
+        loadComponent: () =>
+          import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+      },
+      {
+        path: 'create-category',
+        loadComponent: () =>
+          import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
+      },
+      {
+        path: 'list-excel',
+        loadComponent: () =>
+          import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
+      },
+      {
+        path: 'list-doc',
+        loadComponent: () =>
+          import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
+      },
+      {
+        path: 'list-course',
+        loadComponent: () =>
+          import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
+      },
+      {
+        path: 'category-list-approve',
+        loadComponent: () =>
+          import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
+      },
+      {
+        path: 'approve-excel',
+        loadComponent: () =>
+          import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
+      },
+      {
+        path: 'approve-doc',
+        loadComponent: () =>
+          import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
+      },
+      {
+        path: 'approve-course',
+        loadComponent: () =>
+          import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
+      },
+      {
+        path: 'approved-list',
+        loadComponent: () =>
+          import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
+      },
+      {
+        path: 'view-list-excel/:type',
+        loadComponent: () =>
+          import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+      },
+      {
+        path: 'view-list-doc/:type',
+        loadComponent: () =>
+          import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+      },
+      {
+        path: 'view-list-course/:type',
+        loadComponent: () =>
+          import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+      },
+      {
+        path: 'excel-list',
+        loadComponent: () =>
+          import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
+      },
+      {
+        path: 'excel-report-toggle',
+        loadComponent: () =>
+          import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
+      },
+      {
+        path: 'datasource-table',
+        loadComponent: () =>
+          import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
+      },
+      {
+        path: 'excel-report',
+        loadComponent: () =>
+          import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
+      },
     ]
   }
 ]
@@ -24,4 +124,4 @@ export const myhrplus: Routes = [
 })
 export class MyhrPlusModule {
   static routes = myhrplus;
- }
+}

src/app/portal-manage/myskill-x/myportal/home-common/home-common.component.spec.ts

-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { HomeCommonComponent } from './home-common.component';
-
-describe('HomeCommonComponent', () => {
-  let component: HomeCommonComponent;
-  let fixture: ComponentFixture<HomeCommonComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ HomeCommonComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HomeCommonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/portal-manage/myskill-x/myportal/management/approved-list/approved-list.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ApprovedListComponent } from './approved-list.component';
-
-describe('ApprovedListComponent', () => {
-  let component: ApprovedListComponent;
-  let fixture: ComponentFixture<ApprovedListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ApprovedListComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ApprovedListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/portal-manage/myskill-x/myportal/management/management.component.html

-<p>
-  management works!
-</p>

src/app/portal-manage/myskill-x/myportal/management/management.component.spec.ts

-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { ManagementComponent } from './management.component';
-
-describe('ManagementComponent', () => {
-  let component: ManagementComponent;
-  let fixture: ComponentFixture<ManagementComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ManagementComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ManagementComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/portal-manage/myskill-x/myportal/management/management.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-management',
-  templateUrl: './management.component.html',
-  styleUrls: ['./management.component.css']
-})
-export class ManagementComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/portal-manage/myskill-x/myportal/myportal.component.html

-<p>
-  myportal works!
-</p>

src/app/portal-manage/myskill-x/myportal/myportal.component.spec.ts

-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { MyportalComponent } from './myportal.component';
-
-describe('MyportalComponent', () => {
-  let component: MyportalComponent;
-  let fixture: ComponentFixture<MyportalComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MyportalComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MyportalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/portal-manage/myskill-x/myportal/myportal.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-myportal',
-  templateUrl: './myportal.component.html',
-  styleUrls: ['./myportal.component.css']
-})
-export class MyportalComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/portal-manage/myskill-x/myportal/portal-category-list/portal-category-list.component.html

-<app-page-header [title]="'รายการเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสาร'"></app-page-header>
-<!-- <div class="row">
-  <div class="col-12">
-    <div class="card card-body">
-      <h4 class="card-title">รายการเอกสาร</h4>
-      <div class="row justify-content-center">
-        <div class="col-lg-4 col-md-6  col-sm-6 col-12" *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
-          <div class="card border-border-2">
-            <div class="card-body text-center">
-              <img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
-              <h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
-            </div>
-            <div class="d-flex  justify-content-between bg-light border-top p-3">
-              <div>
-                <span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
-              </div>
-              <div >
-                <button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div> -->
-<div class="max-w-7xl mx-auto">
-  <div class="box p-4">
-    <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
-
-    <!-- Flex แทน Grid -->
-    <div class="flex flex-wrap justify-center gap-6">
-
-      <div
-        class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" style="width: 30%;"
-        *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"
-      >
-        <div class="p-8 text-center">
-          <div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
-            <img src="{{ c.img }}" class="" alt="" />
-          </div>
-          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
-        </div>
-
-        <!-- Footer -->
-        <div class="mt-auto">
-          <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
-            <div>
-              <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
-            </div>
-            <div>
-              <button
-                class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 
-                text-white text-sm font-medium rounded-md shadow-md ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
-                active hover:bg-success hover:scale-110 transition duration-300"
-                (click)="openView(c.id)"
-              >
-                รายละเอียด
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
-  </div>
-</div>

src/app/portal-manage/myskill-x/myportal/portal-create-category/portal-create-category.component.ts

-import { Component, OnInit } from '@angular/core';
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
-import { Router, RouterModule } from '@angular/router';
-import { ExcelService } from '../../../services/excel.service';
-import { DocumentService } from '../../../services/document.service';
-import { CourseService } from '../../../services/course.service';
-import { WidgetService } from '../../../services/widgets.service';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { SharedModule } from '../../../../shared/shared.module';
-import { TranslateModule } from '@ngx-translate/core';
-
-
-
-@Component({
-  selector: 'app-portal-create-category',
-  templateUrl: './portal-create-category.component.html',
-  styleUrls: ['./portal-create-category.component.scss'],
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    RouterModule,
-    TranslateModule,
-    SharedModule,
-  ],
-})
-export class PortalCreateCategoryComponent implements OnInit {
-
-  constructor(private modalService: NgbModal,private routes: Router,
-    private excelService:ExcelService,
-    private documentService:DocumentService,
-    private courseService:CourseService,
-    private widgetService:WidgetService
-  ) {}
-  page = 1;
-  pageSize = 10;
-
-  testdata: {
-    id:string;
-    img: String;
-    name: String;
-    details: String;
-    document: String;
-  }[] = [];
-
-  ngOnInit() {
-    this.testdata = [
-      {
-        id:'1',
-        img: "assets/images/icons/excel.png",
-        name: "Excel",
-        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
-        document: "0"
-      },
-      {
-        id:'2',
-        img: "assets/images/icons/document.png",
-        name: "Document",
-        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
-        document: "0"
-      },
-      {
-        id:'3',
-        img: "assets/images/icons/course.png",
-        name: "Course",
-        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
-        document: "0"
-      },
-      {
-        id:'4',
-        img: "assets/images/icons/widget.png",
-        name: "Widgets",
-        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
-        document: "0"
-      },
-      {
-        id:'5',
-        img: "assets/images/faces/1.jpg",
-        name: "BI",
-        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
-        document: "0"
-      }
-    ];
-    this.getListCount();
-  }
-  async getListCount(){
-    try {
-      const countExcel = await this.excelService.getCount().toPromise();
-      const countDoc = await this.documentService.getCount().toPromise();
-      const countCourse = await this.courseService.getCount().toPromise();
-      const countWidgets= await this.widgetService.getCount().toPromise();
-      this.testdata.forEach((x ,i) => {
-        if(i == 0){
-          x.document = countExcel!.toString()
-        }else if(i == 1){
-          x.document = countDoc!.toString()
-        }else if(i == 2){
-          x.document = countCourse!.toString()
-        }else if(i == 3){
-          x.document = countWidgets!.toString()
-        }
-      })
-    } catch (error) {
-      console.error('Error loading data:', error);
-    }
-  }
-  openView(id:string){
-    if(id =='1'){
-      this.routes.navigate(['/myskill-x/list-excell']);
-    }else if(id =='2'){
-      this.routes.navigate(['/myskill-x/list-doc']);
-    }else if(id =='3'){
-      this.routes.navigate(['/myskill-x/list-course']);
-    }else if(id =='4'){
-      this.routes.navigate(['/myskill-x/list-widgets']);
-    }
-  }
-  openModal(targetModal: NgbModal) {
-    this.modalService.open(targetModal, {
-      centered: true,
-      backdrop: "static",
-    });
-  }
-
-  closeBtnClick() {
-    this.modalService.dismissAll();
-  }
-
-}

src/app/portal-manage/myskill-x/myportal/set-excel-reports/set-excel-reports.component.html

-<p>
-  set-excel-reports works!
-</p>

src/app/portal-manage/myskill-x/myportal/set-excel-reports/set-excel-reports.component.spec.ts

-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { SetExcelReportsComponent } from './set-excel-reports.component';
-
-describe('SetExcelReportsComponent', () => {
-  let component: SetExcelReportsComponent;
-  let fixture: ComponentFixture<SetExcelReportsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SetExcelReportsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SetExcelReportsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/portal-manage/myskill-x/myportal/set-excel-reports/set-excel-reports.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-set-excel-reports',
-  templateUrl: './set-excel-reports.component.html',
-  styleUrls: ['./set-excel-reports.component.css']
-})
-export class SetExcelReportsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/portal-manage/myskill-x/myskill-x.module.ts

@@ -10,124 +10,104 @@ export const myportal: Routes = [
     path: 'myskill-x', children: [
       //////////////MyPortal/////////////////
       {
-      path: 'portal-category-list',
+        path: 'category-list',
         loadComponent: () =>
-        import('../myskill-x/myportal/portal-category-list/portal-category-list.component').then((m) => m.PortalCategoryListComponent),
+          import('../my-portal/category-list/category-list.component').then((m) => m.CategorylistComponent),
       },
       {
         path: 'view-list-excel',
         loadComponent: () =>
-        import('../myskill-x/myportal/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+          import('../my-portal/category-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
       },
       {
         path: 'view-list-doc',
         loadComponent: () =>
-        import('../myskill-x/myportal/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+          import('../my-portal/category-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
       },
       {
         path: 'view-list-course',
         loadComponent: () =>
-        import('../myskill-x/myportal/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+          import('../my-portal/category-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
       },
       {
-      path: 'excel-report',
-      loadComponent: () =>
-        import('../myskill-x/myportal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
-    },
-    {
-      path: 'portal-create-category',
-      loadComponent: () =>
-        import('../myskill-x/myportal/portal-create-category/portal-create-category.component').then((m) => m.PortalCreateCategoryComponent),
-    },
-    {
-      path: 'list-excell',
+        path: 'create-category',
         loadComponent: () =>
-        import('../myskill-x/myportal/list-excell/list-excell.component').then((m) => m.ListExcelComponent),
+          import('../my-portal/create-category/create-category.component').then((m) => m.CreateCategoryComponent),
       },
       {
-      path: 'list-course',
+        path: 'list-excel',
         loadComponent: () =>
-        import('../myskill-x/myportal/list-course/list-course.component').then((m) => m.ListCourseComponent),
+          import('../my-portal/create-category/list-excel/list-excel.component').then((m) => m.ListExcelComponent),
       },
       {
         path: 'list-doc',
         loadComponent: () =>
-        import('../myskill-x/myportal/list-doc/list-doc.component').then((m) => m.ListDocComponent),
+          import('../my-portal/create-category/list-doc/list-doc.component').then((m) => m.ListDocComponent),
       },
       {
-      path: 'excel-list',
-      loadComponent: () =>
-        import('../myskill-x/myportal/set-excel-reports/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
-    },
-    {
-      path: 'datasource-table',
-      loadComponent: () =>
-        import('../myskill-x/myportal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
-    },
-    {
-      path: 'excel-report-toggle',
-      loadComponent: () =>
-        import('../myskill-x/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
-    },
-    {
-      path: 'management',
+        path: 'list-course',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/management.component').then((m) => m.ManagementComponent),
+          import('../my-portal/create-category/list-course/list-course.component').then((m) => m.ListCourseComponent),
       },
       {
-      path: 'portal-category-list-approve',
+        path: 'category-list-approve',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/portal-category-list-approve/portal-category-list-approve.component').then((m) => m.PortalCategoryListApproveComponent),
+          import('../my-portal/category-list-approve/category-list-approve.component').then((m) => m.CategoryListApproveComponent),
       },
       {
         path: 'approve-excel',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/portal-category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
+          import('../my-portal/category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
       },
       {
         path: 'approve-doc',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/portal-category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
+          import('../my-portal/category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
       },
       {
         path: 'approve-course',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/portal-category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
+          import('../my-portal/category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
       },
       {
         path: 'approved-list',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
+          import('../my-portal/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
       },
       {
-      path: 'view-list-excel',
+        path: 'view-list-excel/:type',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+          import('../my-portal/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
       },
       {
-      path: 'view-list-excel/:type',
+        path: 'view-list-doc/:type',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+          import('../my-portal/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
       },
       {
-      path: 'view-list-doc',
+        path: 'view-list-course/:type',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+          import('../my-portal/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
       },
       {
-      path: 'view-list-doc/:type',
+        path: 'excel-list',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+          import('../my-portal/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
       },
       {
-      path: 'view-list-course',
+        path: 'excel-report-toggle',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+          import('../my-portal/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
       },
       {
-      path: 'view-list-course/:type',
+        path: 'datasource-table',
+        loadComponent: () =>
+          import('../my-portal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
+      },
+      {
+        path: 'excel-report',
         loadComponent: () =>
-        import('../myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+          import('../my-portal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
       },
     ]
   }

src/app/portal-manage/services/excel-report.service copy.ts

-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
-import { environment } from '../../../environments/environment';
-import { TemplateFileModel, TemplateModel } from '../models/template.model';
-import { ModuleModel } from '../models/module.model';
-import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel } from '../models/excel-portal.model';
-import { AlertModel } from '../models/alert.model';
-import { TemplateFileMiniModel } from '../models/template-file-mini.model';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ExcelReportService {
-
-  constructor(private http: HttpClient,
-    private translateService: TranslateService
-  ) { }
-  getExcelList(): Observable<TemplateModel[]> {
-    return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
-  }
-  getModuleList(): Observable<ModuleModel[]> {
-    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: {
-    templateId: string,
-    tname: string,
-    ename: string,
-    tdesc: string,
-    edesc: string,
-    module: string
-  }) {
-    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",)
-  }
-
-  getTemplateFileLists(): Observable<TemplateFileMiniModel[]> {
-    return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
-  }
-}
\ No newline at end of file

src/app/portal-manage/services/excel-report.service.ts

@@ -18,10 +18,10 @@ export class ExcelReportService {
     private translateService: TranslateService
   ) { }
   getExcelList(): Observable<TemplateModel[]> {
-    return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
+    return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=DEMO")
   }
   getModuleList(): Observable<ModuleModel[]> {
-    return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
+    return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=DEMO")
   }
   getExcelPortalList(): Observable<ExcelPortalModel[]> {
     return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists")
@@ -33,7 +33,7 @@ export class ExcelReportService {
     return this.http.get<ExcelPortalTagsModel[]>(environment.url + "tag/lists")
   }
 
-  postTemplate(body: {
+  postTemplate(companyId: string, body: {
     templateId: string,
     tname: string,
     ename: string,
@@ -41,7 +41,7 @@ export class ExcelReportService {
     edesc: string,
     module: string
   }) {
-    return this.http.post<AlertModel>(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+    return this.http.post<AlertModel>(environment.url + "template?companyid=" + companyId, body)
   }
   deleteTemplate(body: TemplateModel): Observable<AlertModel> {
     let option = {
@@ -50,10 +50,10 @@ export class ExcelReportService {
       }),
       body: body
     }
-    return this.http.delete<AlertModel>(environment.url + "template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
+    return this.http.delete<AlertModel>(environment.url + "template?companyid=DEMO", option)
   }
   postTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
-    return this.http.post<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+    return this.http.post<AlertModel>(environment.url + "template-file?companyid=DEMO", body)
   }
   deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
     let option = {
@@ -62,22 +62,22 @@ export class ExcelReportService {
       }),
       body: body
     }
-    return this.http.delete<AlertModel>(environment.url + "template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
+    return this.http.delete<AlertModel>(environment.url + "template-file?companyid=DEMO", option)
   }
   downloadTemplateFile(fileName: string) {
-    return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", { responseType: 'blob' })
+    return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=DEMO", { 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' })
+    return this.http.post(environment.url + "template-file/export-to-excel?companyid=DEMO", 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",)
+    return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=DEMO",)
   }
 
   getTemplateFileLists(): Observable<TemplateFileMiniModel[]> {
-    return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
+    return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=DEMO",)
   }
 }
\ No newline at end of file

src/app/portal-manage/widget-stock/widget-stock.component.html

-
-<div class="container mx-auto p-4">
-    <h2 class="text-2xl font-bold mb-4">Widget Stock</h2>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        <div *ngFor="let widget of availableWidgets$ | async" class="bg-white shadow-md rounded-lg p-4">
-            <h3 class="text-lg font-semibold">{{ widget.name }}</h3>
-            <p class="text-gray-600">ID: {{ widget.id }}</p>
-            <pre class="text-sm bg-gray-100 p-2 mt-2 rounded">Config: {{ widget.config | json }}</pre>
-        </div>
-    </div>
-</div>

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

@@ -242,8 +242,6 @@ export class SidebarComponent {
       this.menuItems = this.navServices.getZeemeMenu();
     } else if (this.isMyhrPlusRoute){
       this.menuItems = this.navServices.getMyhrPlusMenu();
-    }else{
-      this.menuItems = this.navServices.getCommonMenu()
     }
 
     // เพิ่มรายการรายงาน Excel เข้าไปในเมนู หากมีข้อมูลและยังไม่ได้เพิ่ม

src/app/shared/services/nav.service.ts

@@ -54,7 +54,7 @@ export class NavService implements OnDestroy {
   public fullScreen = false;
   active: any;
 
-  constructor(private router: Router , private tokenService : TokenService) {
+  constructor(private router: Router, private tokenService: TokenService) {
     this.setScreenWidth(window.innerWidth);
     fromEvent(window, 'resize')
       .pipe(debounceTime(1000), takeUntil(this.unsubscriber))
@@ -111,99 +111,53 @@ export class NavService implements OnDestroy {
       ]
     };
   }
-
-  getCommonMenu() {
-    return [
-      // Dashboard
-      { headTitle: 'MyJob' },
-      this.createDashboardMenu('admin'), // Assuming 'admin' is the appName for common
-      {
-        icon: 'news bx-flip-horizontal',
-        path: '/admin/pdpa-manage',
-        title: 'จัดการ PDPA',
-        type: 'link',
-      },
-      {
+  private createPortalMenu(appName: string): Menu[] {
+    return [{
       icon: 'receipt',
-        path: '/admin/manage-articles',
-        title: 'จัดการบทความ',
-        type: 'link',
-      },
-      {
-        icon: 'user',
-        path: '/admin/company-departments',
-        title: 'จัดการผู้ใช้',
-        type: 'sub',
-        children: [
-          { path: '/admin/manage-companys', title: 'จัดการบริษัท', type: 'link' },
-          { path: '/admin/member-manage', title: 'จัดการผู้สมัครงาน', type: 'link' }
-        ],
-      },
-      {
-        icon: 'buildings',
-        path: '/admin/company-departments',
-        title: 'ทะเบียนบริษัท',
-        type: 'sub',
-        children: [
-          { path: '/admin/career-cluster', title: 'จัดการกลุ่มอาชีพ', type: 'link' },
-          { path: '/admin/position', title: 'จัดการตำแหน่ง', type: 'link' },
-          { path: '/admin/job-types', title: 'จัดการประเภทงาน', type: 'link' },
-          { path: '/admin/category-company', title: 'จัดการประเภทธุรกิจ', type: 'link' },
-          { path: '/admin/degree-manage', title: 'จัดการระดับการศึกษา', type: 'link' },
-          { path: '/admin/country-registration', title: 'จัดการประเทศ', type: 'link' },
-          { path: '/admin/provinces', title: 'จัดการจังหวัด', type: 'link' },
-        ],
-      },
-      { headTitle: 'MyPortal' },
-      {
-        icon: 'news bx-flip-horizontal',
-        path: '/admin/portal-category-list',
+      path: `/${appName}/category-list`,
       title: 'รายการเอกสาร',
       type: 'link',
-      },
-      {
+    }, {
       icon: 'receipt',
-        path: '/admin/portal-create-category',
+      path: `/${appName}/create-category`,
       title: 'รายการอัพโหลดเอกสาร',
       type: 'link',
     },
     {
       icon: 'cog',
-        path: '/admin/management',
+      path: '',
       title: 'การจัดการ',
       type: 'sub',
       children: [
-          { path: '/admin/portal-category-list-approve', title: 'รายการรอการอนุมัติ', type: 'link' },
-          { path: '/admin/approved-list', title: 'รายการผ่านการอนุมัติ', type: 'link' }
+        { path: `/${appName}/category-list-approve`, title: 'รายการรอการอนุมัติ', type: 'link' },
+        { path: `/${appName}/approved-list`, title: 'รายการผ่านการอนุมัติ', type: 'link' }
       ],
     },
     {
       icon: 'slider',
-        path: '/admin/set-excel-reports',
+      path: '',
       title: 'ตั้งรายงานเอ็กเซล',
       type: 'sub',
       children: [
-          { path: '/admin/excel-list', title: 'เพิ่มรายงาน Excel', type: 'link' },
-          { path: '/admin/excel-report-toggle', title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
+        { path: `/${appName}/excel-list`, title: 'เพิ่มรายงาน Excel', type: 'link' },
+        { path: `/${appName}/excel-report-toggle`, title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
       ],
     },
     {
       icon: 'data',
-        path: '/admin/datasource-table',
+      path: `/${appName}/datasource-table`,
       title: 'DataSource Table',
       type: 'link',
     },
     {
       icon: 'file',
-        path: '/admin/excel-report',
+      path: `/${appName}/excel-report`,
       title: 'รายงาน Excel',
       type: 'link',
-      },
+    },]
+  }
 
-      // { headTitle: 'User Management' },
 
-    ];
-  }
 
   getCompanyMenu() {
     return [
@@ -247,53 +201,8 @@ export class NavService implements OnDestroy {
       // Myportal
       { headTitle: 'MyPortal' },
       this.createDashboardMenu('myskill-x'),
-      {
-        icon: 'receipt',
-        path: '/myskill-x/portal-category-list',
-        title: 'รายการเอกสาร',
-        type: 'link',
-      },
-      {
-        icon: 'receipt',
-        path: '/myskill-x/portal-create-category',
-        title: 'รายการอัพโหลดเอกสาร',
-        type: 'link',
-      },
-      {
-        icon: 'cog',
-        path: '/myskill-x/management',
-        title: 'การจัดการ',
-        type: 'sub',
-        children: [
-          { path: '/myskill-x/portal-category-list-approve', title: 'รายการรอการอนุมัติ', type: 'link' },
-          { path: '/myskill-x/approved-list', title: 'รายการผ่านการอนุมัติ', type: 'link' }
-        ],
-      },
-      {
-        icon: 'user',
-        path: '/myskill-x/set-excel-reports',
-        title: 'ตั้งรายงานเอ็กเซล',
-        type: 'sub',
-        children: [
-          { path: '/myskill-x/excel-list', title: 'เพิ่มรายงาน Excel', type: 'link' },
-          { path: '/myskill-x/excel-report-toggle', title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
-        ],
-      },
-      {
-        icon: 'data',
-        path: '/myskill-x/datasource-table',
-        title: 'DataSource Table',
-        type: 'link',
-      },
-      {
-        icon: 'file',
-        path: '/myskill-x/excel-report',
-        title: 'รายงาน Excel',
-        type: 'link',
-      },
-
-      // { headTitle: 'User Management' },
-
+      ...this.createPortalMenu('myskill-x'),
+      {}
     ];
   }
 
@@ -420,6 +329,7 @@ export class NavService implements OnDestroy {
         title: 'dashboard',
         type: 'link',
       },
+      ...this.createPortalMenu('myhr-plus')
     ];
   }
 

src/app/shared/shared.module.ts

@@ -40,10 +40,10 @@ import { QuillModule } from 'ngx-quill';
   ],
 
   imports: [
+    FormsModule,
     CommonModule,
     RouterModule,
     SimplebarAngularModule,
-    FormsModule,
     ReactiveFormsModule,
     ColorPickerModule,
     TranslateModule,
@@ -51,6 +51,7 @@ import { QuillModule } from 'ngx-quill';
     // NgxColorsModule
   ],
   exports: [
+    FormsModule,
     HeaderComponent,
     SidebarComponent,
     ContentLayoutComponent,
@@ -63,9 +64,11 @@ import { QuillModule } from 'ngx-quill';
     AuthenticationLayoutComponent,
     LandingSwitcherComponent,
     LandingLayoutComponent,
-    RenderedHtmlComponent
+    RenderedHtmlComponent,
+    TranslateModule,
+    CommonModule
   ],
-  providers: [ColorPickerService, AuthService , TranslateModule],
+  providers: [ColorPickerService, AuthService, TranslateModule],
 })
 
 export class SharedModule { }