แก้ไข รายงาน Excel portal

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

@@ -7,7 +7,7 @@
     </div>
     <div class="page pt-0.75rem">
         <div class="mt-3 px-2rem !-mt-3 pt-50px">
-            <div class="page px-rem">
+            <div class="page px-rem mb-3">
                 <div class="flex justify-center" *ngIf="loading">
                     <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                         aria-label="loading">
@@ -59,7 +59,8 @@
                                         <div
                                             class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
                                             <button type="button" class="flex items-center text-red-500"
-                                                (click)="select[item.key]={id:'',tdesc:'',edesc:''}" style="font-size: 17px;">
+                                                (click)="select[item.key]={id:'',tdesc:'',edesc:''}"
+                                                style="font-size: 17px;">
                                                 <i class=" ti ti-circle-x cursor-pointer"></i>
                                             </button>
                                             <button type="button"
@@ -118,6 +119,9 @@
                         </div>
                     </div>
                 </ng-container>
+                <ng-container *ngIf="variableSheet.length&&!loadingExcel&&templateOutlet!=''">
+                    <ng-container *ngTemplateOutlet="templateOutlet=='grid'?gridTemplate:pivotTemplate"></ng-container>
+                </ng-container>
             </div>
         </div>
     </div>
@@ -245,4 +249,17 @@
             </div>
         </div>
     </mat-dialog-actions>
+</ng-template>
+
+
+<ng-template #gridTemplate>
+    <app-datagrid-syncfution [checkBoxSetting]='false' [actionSetting]="false" [searchSettings]="searchSettings"
+        [dataSource]="dataList" [columns]="columns" [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate"
+        (layout)="gridLayout.data=$event">
+    </app-datagrid-syncfution>
+</ng-template>
+<ng-template #pivotTemplate>
+    <app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns" [pivotLayout]="setPerspective"
+        [sendLayout]="pivotLayout.stimulate" (layout)="pivotLayout.data=$event">
+    </app-pivot-syncfution>
 </ng-template>
\ No newline at end of file

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

@@ -57,6 +57,7 @@ export class ExcelReportComponent implements OnInit {
         operator: 'contains',
         ignoreCase: false
     };
+    templateOutlet: 'grid' | 'pivot' | '' = ''
     constructor(private route: ActivatedRoute,
         private excelReportService: ExcelReportService,
         private cdr: ChangeDetectorRef,
@@ -253,9 +254,11 @@ export class ExcelReportComponent implements OnInit {
                 this.dataList = response.excelData as any
                 this.loadingExcel = false
                 if (type == 'grid') {
-                    this.openGridModal((response.excelPerspective as any).dataGridStr)
+                    this.templateOutlet = 'grid'
+                    // this.openGridModal((response.excelPerspective as any).dataGridStr)
                 } else if (type == 'pivot') {
-                    this.openPivotModal((response.excelPerspective as any).pivotStr)
+                    this.templateOutlet = 'pivot'
+                    // this.openPivotModal((response.excelPerspective as any).pivotStr)
                 }
                 this.cdr.detectChanges()
             }, error: error => {