เพิ่มหน้า datasource table

src/app/apps/apps.module.ts

@@ -105,6 +105,7 @@ import { ExcelListComponent } from './excel-list/excel-list.component';
 import { ExcelReportToggleComponent } from './excel-report-toggle/excel-report-toggle.component';
 import { ExcelReportEmpviewComponent } from './excel-report-empview/excel-report-empview.component';
 import { SafeUrlPipe } from 'src/pipe/safe-url.pipe';
+import { DatasourceTableComponent } from './datasource-table/datasource-table.component';
 
 @NgModule({
   imports: [
@@ -186,7 +187,8 @@ import { SafeUrlPipe } from 'src/pipe/safe-url.pipe';
     ExcelListComponent,
     ExcelReportToggleComponent,
     ExcelReportEmpviewComponent,
-    SafeUrlPipe
+    SafeUrlPipe,
+    DatasourceTableComponent
   ],
   providers: [
     ContactService,

src/app/apps/apps.routing.ts

@@ -53,6 +53,7 @@ import { ExcelReportComponent } from "./excel-report/excel-report.component";
 import { ExcelListComponent } from "./excel-list/excel-list.component";
 import { ExcelReportEmpviewComponent } from "./excel-report-empview/excel-report-empview.component";
 import { ExcelReportToggleComponent } from "./excel-report-toggle/excel-report-toggle.component";
+import { DatasourceTableComponent } from "./datasource-table/datasource-table.component";
 export const AppsRoutes: Routes = [
   {
     path: "",
@@ -555,6 +556,14 @@ export const AppsRoutes: Routes = [
           urls: [],
         },
       },
+      {
+        path: "datasource-table",
+        component: DatasourceTableComponent,
+        data: {
+          title: "Datasource Table",
+          urls: [],
+        },
+      },
     ],
   },
 ];

src/app/apps/datasource-table/datasource-table.component.scss

+.secure-input {
+    -webkit-text-security: disc;
+    text-security: disc;
+}
\ No newline at end of file

src/app/apps/datasource-table/datasource-table.component.ts

+import { ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DatasourceTableModel, MyDatasourceTableModel } from 'src/app/model/datasource-table.model';
+import { DatasourseTableService } from 'src/app/service/datasourse-table.service';
+import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../alert-modal/alert-modal.component';
+
+export interface ModalDetail {
+    text: { cardHead: string, search: string[], tableHead: string[] }
+}
+@Component({
+    selector: 'app-datasource-table',
+    templateUrl: './datasource-table.component.html',
+    styleUrls: ['./datasource-table.component.scss']
+})
+export class DatasourceTableComponent implements OnInit {
+    datasourceTable: { data: DatasourceTableModel[], select: DatasourceTableModel, loading: boolean, search: string } = { data: [], select: new MyDatasourceTableModel(), loading: false, search: '' }
+    page = 1
+    pageSize = 10
+    tableHover: Map<string, boolean> = new Map<string, boolean>()
+    showPassword = false
+    tableShowPassword: Map<string, boolean> = new Map<string, boolean>()
+    constructor(private datasourseTableService: DatasourseTableService,
+        private modalService: NgbModal,
+        private cdr: ChangeDetectorRef) {
+
+    }
+    ngOnInit(): void {
+        this.getList()
+    }
+    getList() {
+        this.datasourceTable.loading = true
+        this.datasourceTable.data = []
+        this.datasourseTableService.getList().subscribe(response => {
+            this.datasourceTable.data = response.map(e => new MyDatasourceTableModel(e))
+            this.datasourceTable.loading = false
+        }, error => {
+            this.datasourceTable.loading = false
+        })
+    }
+    postData() {
+        const modalConfirmRef = this.modalService.open(ConfirmModalComponent, {
+            centered: true,
+            backdrop: 'static',
+        })
+        modalConfirmRef.componentInstance.message = 'คุณต้องการบันทึกข้อมูลหรือไม่'
+        modalConfirmRef.result.then(result => {
+            this.datasourceTable.loading = true
+            this.datasourseTableService.post(this.datasourceTable.select).subscribe(response => {
+                if (response.success) {
+                    this.getList()
+                } else {
+                    this.openAlertModal(response.message)
+                    this.datasourceTable.loading = false
+                }
+            }, error => {
+                this.openAlertModal(error.message)
+                this.datasourceTable.loading = false
+            })
+        }, reject => { })
+    }
+    deleteData() {
+        const modalConfirmRef = this.modalService.open(ConfirmModalComponent, {
+            centered: true,
+            backdrop: 'static',
+        })
+        modalConfirmRef.componentInstance.message = 'คุณต้องการบันทึกข้อมูลหรือไม่'
+        modalConfirmRef.result.then(result => {
+            this.datasourceTable.loading = true
+            this.datasourseTableService.post(this.datasourceTable.select).subscribe(response => {
+                if (response.success) {
+                    this.getList()
+                } else {
+                    this.openAlertModal(response.message)
+                    this.datasourceTable.loading = false
+                }
+            }, error => {
+                this.openAlertModal(error.message)
+                this.datasourceTable.loading = false
+            })
+        }, reject => { })
+    }
+    selectData(data: DatasourceTableModel) {
+        this.datasourceTable.select = new MyDatasourceTableModel(data)
+        this.scrollTop()
+    }
+    datasourceTableFilter() {
+        return this.datasourceTable.data.filter(e => e.companyId.includes(this.datasourceTable.search) ||
+            e.companyName.includes(this.datasourceTable.search) ||
+            e.serverName.includes(this.datasourceTable.search) ||
+            e.databaseName.includes(this.datasourceTable.search))
+    }
+    scrollTop() {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+    openAlertModal(message?: string) {
+        const modalRef = this.modalService.open(AlertModalComponent, {
+            centered: true,
+            backdrop: 'static'
+        })
+        modalRef.componentInstance.message = message ? message : ""
+        modalRef.result.then(result => {
+        }, reason => {
+        })
+    }
+}
\ No newline at end of file

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

@@ -56,7 +56,7 @@
                 <table class="table mb-0 no-wrap v-middle ">
                     <thead class="bg-info text-white">
                         <tr>
-                            <th class="text-center" scope="col">ชื่อกลุ่มรายงาน(Thai)</th>
+                            <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาไทย)</th>
                             <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
                             <th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th>
                             <th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th>
@@ -82,7 +82,7 @@
                                         {{items.tname}}
                                     </span>
                                     <span>
-                                        -{{items.ename}}
+                                        -{{items.tdesc}}
                                     </span>
                                 </td>
                                 <td class="text-center">

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

@@ -74,7 +74,7 @@
                                 (mouseleave)="tableHover.clear()"
                                 [ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
                                 <td colspan="6" class="font-16 font-medium">
-                                    {{items.tname}}-{{items.ename}}
+                                    {{items.tname}}-{{items.tdesc}}
                                 </td>
                                 <td class="text-center">
                                     <ng-container *ngIf="items.templateFile.length">

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

-<h2>🔹 Syncfusion Grid</h2>
-<ejs-grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="{ pageSize: 5 }">
-    <e-columns>
-        <e-column field="id" headerText="ID" width="100"></e-column>
-        <e-column field="name" headerText="Name" width="150"></e-column>
-        <e-column field="age" headerText="Age" width="100"></e-column>
-    </e-columns>
-</ejs-grid>
-
-<hr />
-
-<h2>🔹 Syncfusion PivotView</h2>
-<ejs-pivotview [dataSourceSettings]="pivotDataSource" height="300"></ejs-pivotview>
-
 <div class="card">
-    <div class="card-header bg-myhr">
-        <h4>{{"Excel Report"}}</h4>
-    </div>
     <div class="card-body">
+        <h4 class="card-title">Excel Report</h4>
         <div class="row">
             <div class="d-flex col-12 justify-content-center" *ngIf="loading">
                 <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">

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

@@ -14,30 +14,6 @@ export interface ModalDetail {
     styleUrls: ['./excel-report.component.scss']
 })
 export class ExcelReportComponent implements OnInit {
-    // สำหรับ Grid
-    public gridData = [
-        { id: 1, name: 'Alice', age: 28 },
-        { id: 2, name: 'Bob', age: 32 },
-        { id: 3, name: 'Charlie', age: 25 },
-        { id: 4, name: 'David', age: 45 },
-        { id: 5, name: 'Eva', age: 38 },
-        { id: 6, name: 'Frank', age: 40 }
-    ];
-
-    // สำหรับ Pivot
-    public pivotDataSource: IDataOptions = {
-        dataSource: [
-            { Product: 'Laptop', Region: 'North', Sales: 100 },
-            { Product: 'Tablet', Region: 'South', Sales: 200 },
-            { Product: 'Phone', Region: 'North', Sales: 150 },
-            { Product: 'Laptop', Region: 'South', Sales: 120 },
-        ],
-        values: [{ name: 'Sales', caption: 'Sales Amount' }],
-        rows: [{ name: 'Product' }],
-        columns: [{ name: 'Region' }],
-    };
-
-
     changeDate = new Date();
     select: any = {}
     excelReport?: any
@@ -56,6 +32,7 @@ export class ExcelReportComponent implements OnInit {
     searchModal = ""
     page = 1
     pageSize = 10
+
     constructor(private route: ActivatedRoute,
         private ngbModal: NgbModal,
         private excelReportService: ExcelReportService,
@@ -65,16 +42,23 @@ export class ExcelReportComponent implements OnInit {
     }
 
     ngOnInit(): void {
-        this.route.params.subscribe(params => {
-            this.getDataExcelReport(params['id'])
-        })
+        this.route.paramMap.subscribe(params => {
+            const rawId = params.get('id');
+            if (rawId) {
+                const [id, queryString] = rawId.split('?');
+                const params = new URLSearchParams(queryString);
+                const template = params.get('template');
+                const name = params.get('name');
+                this.getDataExcelReport(template || '', name || '')
+            }
+        });
     }
-    getDataExcelReport(itemId: string) {
+    getDataExcelReport(templateId: string, fileName: string) {
         this.loading = true
         this.excelReport = undefined
         this.variableSheet = []
         this.valueDetail = []
-        this.excelReportService.getExcelReport(itemId).subscribe((res: any) => {
+        this.excelReportService.getTemplateFile(templateId, fileName).subscribe((res: any) => {
             this.excelReport = res
             if (this.excelReport.param) {
                 Object.entries(this.excelReport.param.variableSheet).forEach(([key, value]) => {
@@ -168,7 +152,7 @@ export class ExcelReportComponent implements OnInit {
             }
             return ""
         }).join('|')
-        this.excelReportService.dowloadExcelReport(fileName, param, data).subscribe((res: any) => {
+        this.excelReportService.downloadTemplateFile(fileName).subscribe((res: any) => {
             const blob = new Blob([res], { type: 'application/octet-stream' });
             FileSaver.saveAs(blob, fileName);
             this.loadingExcel = false
@@ -178,4 +162,4 @@ export class ExcelReportComponent implements OnInit {
             this.cdr.detectChanges()
         })
     }
-}
\ No newline at end of file
+}

src/app/model/datasource-table.model.ts

+export interface DatasourceTableModel {
+    companyId: string
+    companyName: string
+    databaseName: string
+    dbType: string
+    password: string
+    portNumber: string
+    serverName: string
+    status: string
+    userName: string
+}
+export class MyDatasourceTableModel implements DatasourceTableModel {
+    companyId: string
+    companyName: string
+    databaseName: string
+    dbType: string
+    password: string
+    portNumber: string
+    serverName: string
+    status: string
+    userName: string
+    constructor(data?: Partial<DatasourceTableModel>) {
+        this.companyId = data?.companyId || ''
+        this.companyName = data?.companyName || ''
+        this.databaseName = data?.databaseName || ''
+        this.dbType = data?.dbType || ''
+        this.password = data?.password || ''
+        this.portNumber = data?.portNumber || ''
+        this.serverName = data?.serverName || ''
+        this.status = data?.status || ''
+        this.userName = data?.userName || ''
+    }
+}
\ No newline at end of file

src/app/model/template-file-mini.model.ts

+export interface TemplateFileMiniModel {
+  edesc: string
+  fileName: string
+  itemId: string
+  module: string
+  tdesc: string
+  templateId: string
+}
+export class MyTemplateFileMiniModel implements TemplateFileMiniModel {
+  edesc: string
+  fileName: string
+  itemId: string
+  module: string
+  tdesc: string
+  templateId: string
+  constructor(data?: Partial<TemplateFileMiniModel>) {
+    this.edesc = data?.edesc || ''
+    this.fileName = data?.fileName || ''
+    this.itemId = data?.itemId || ''
+    this.module = data?.module || ''
+    this.tdesc = data?.tdesc || ''
+    this.templateId = data?.templateId || ''
+  }
+}

src/app/service/datasourse-table.service.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 '../model/template.model';
+import { ModuleModel } from '../model/module.model';
+import { ExcelPortalModel, ExcelPortalGroupModel, ExcelPortalTagsModel } from '../model/excel-portal.model';
+import { AlertModel } from '../model/alert.model';
+import { TemplateFileMiniModel } from '../model/template-file-mini.model';
+import { DatasourceTableModel } from '../model/datasource-table.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DatasourseTableService {
+
+  constructor(private http: HttpClient,
+    private translateService: TranslateService
+  ) { }
+  getid(companyid: string): Observable<DatasourceTableModel> {
+    return this.http.get<DatasourceTableModel>(environment.url + "datasource/" + companyid)
+  }
+  getList(): Observable<DatasourceTableModel[]> {
+    return this.http.get<DatasourceTableModel[]>(environment.url + "datasource/lists")
+  }
+  post(body: DatasourceTableModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(environment.url + "datasource", body)
+  }
+  delete(body: DatasourceTableModel): Observable<AlertModel> {
+    let option = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    }
+    return this.http.delete<AlertModel>(environment.url + "datasource", option)
+  }
+}
\ No newline at end of file

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

@@ -7,6 +7,7 @@ import { TemplateFileModel, TemplateModel } from '../model/template.model';
 import { ModuleModel } from '../model/module.model';
 import { ExcelPortalModel, ExcelPortalGroupModel, ExcelPortalTagsModel } from '../model/excel-portal.model';
 import { AlertModel } from '../model/alert.model';
+import { TemplateFileMiniModel } from '../model/template-file-mini.model';
 
 @Injectable({
   providedIn: 'root'
@@ -16,13 +17,6 @@ export class ExcelReportService {
   constructor(private http: HttpClient,
     private translateService: TranslateService
   ) { }
-
-  getExcelReport(itemId: string): Observable<any> {
-    return this.http.get(environment.url + "irapi/menuitem/" + itemId + '?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47')
-  }
-  dowloadExcelReport(fileName: string, varname: string, data: string): Observable<any> {
-    return this.http.get(environment.url + "irapi/excel/export-to-excel?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47&fileName=" + fileName + "&param=__varname=" + varname + "|__screen=XLSOPTION|" + data, { responseType: 'blob' })
-  }
   getExcelList(): Observable<TemplateModel[]> {
     return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
   }
@@ -82,4 +76,8 @@ export class ExcelReportService {
   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/shared/vertical-sidebar/vertical-menu-items.ts

@@ -123,6 +123,16 @@ export const ROUTES: RouteInfo[] = [
       // },
     ]
   },
+  {
+    path: '/apps/datasource-table',
+    title: 'Datasource Table',
+    icon: 'mdi mdi-adjust',
+    class: '',
+    label: "",
+    labelClass: "",
+    extralink: false,
+    submenu: []
+  },
 
   // 
   // {

src/app/shared/vertical-sidebar/vertical-sidebar.component.html

@@ -70,7 +70,7 @@
                         [ngClass]="[sidebarnavSubItem.class]" *ngIf="!sidebarnavSubItem.extralink;"
                         (click)="addActiveClass(sidebarnavSubItem.title)">
                         <i [ngClass]="[sidebarnavSubItem.icon]"></i>
-                        <span class="hide-menu">{{sidebarnavSubItem.title| translate}}</span>
+                        <span class="hide-menu mr-0">{{sidebarnavSubItem.title| translate}}</span>
                     </a>
                     <!-- Third level menu -->
                     <ul aria-expanded="false" class="collapse Second-level" *ngIf="sidebarnavSubItem.submenu.length > 0"

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

@@ -2,6 +2,8 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { RouteInfo } from './vertical-sidebar.metadata';
 import { VerticalSidebarService } from './vertical-sidebar.service';
+import { ExcelReportService } from 'src/app/service/excel-report.service';
+import { MyTemplateFileMiniModel, TemplateFileMiniModel } from 'src/app/model/template-file-mini.model';
 
 
 @Component({
@@ -15,29 +17,39 @@ export class VerticalSidebarComponent {
   showSubMenu = '';
   public sidebarnavItems: RouteInfo[] = [];
   path = '';
+  submenuExcel: TemplateFileMiniModel[] = []
+  constructor(private menuServise: VerticalSidebarService, private router: Router, private excelReportService: ExcelReportService) {
+    this.excelReportService.getTemplateFileLists().subscribe(response => {
+      this.submenuExcel = response.map(e => new MyTemplateFileMiniModel(e))
 
-  constructor(private menuServise: VerticalSidebarService, private router: Router) {
-    if (this.menuServise.submenu.length > 0) {
-      const currentValue = this.menuServise.items.value;
-      const updated = [...currentValue, {
-        path: '',
-        title: 'รายงาน Excel',
-        icon: 'mdi mdi-adjust',
-        class: 'has-arrow',
-        label: "",
-        labelClass: "",
-        extralink: false,
-        submenu: []
-      }];
-      this.menuServise.items.next(updated);
-    }
+      if (this.submenuExcel.length) {
+        const currentValue = this.menuServise.items.value;
+        const updated = [...currentValue, {
+          path: '',
+          title: 'รายงาน Excel',
+          icon: 'mdi mdi-adjust',
+          class: 'has-arrow',
+          label: "",
+          labelClass: "",
+          extralink: false,
+          submenu: []
+        }];
+        this.menuServise.items.next(updated);
+      }
+      this.addMenu()
+    }, error => {
+      this.addMenu()
+    })
+
+  }
+  addMenu() {
     this.menuServise.items.subscribe(menuItems => {
       this.sidebarnavItems = menuItems.map(e => {
         if (e.title == 'รายงาน Excel') {
-          this.menuServise.submenu.map(e2 => {
+          this.submenuExcel.map(e2 => {
             e.submenu.push({
-              path: '/apps/excel-export/' + e2.itemId,
-              title: e2.tdesc,
+              path: '/apps/excel-export/' + e2.itemId + "?template=" + e2.templateId + "&name=" + e2.fileName,
+              title: e2.itemId + '.' + e2.tdesc,
               icon: "",
               class: "",
               label: "",
@@ -60,7 +72,6 @@ export class VerticalSidebarComponent {
       this.addExpandClass(this.path);
     });
   }
-
   addExpandClass(element: any) {
     if (element === this.showMenu) {
       this.showMenu = '0';

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

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