Skip to content

M
myhr-portal
Commit 81a24eca by Nattana Chaiyamat
Options

syncfution

parent 4997ddae
Showing with 674 additions and 50 deletions
src/app/apps/apps.module.ts
...@@ -106,6 +106,8 @@ import { ExcelReportToggleComponent } from './excel-report-toggle/excel-report-t ...@@ -106,6 +106,8 @@ import { ExcelReportToggleComponent } from './excel-report-toggle/excel-report-t
import { ExcelReportEmpviewComponent } from './excel-report-empview/excel-report-empview.component'; import { ExcelReportEmpviewComponent } from './excel-report-empview/excel-report-empview.component';
import { SafeUrlPipe } from 'src/pipe/safe-url.pipe'; import { SafeUrlPipe } from 'src/pipe/safe-url.pipe';
import { DatasourceTableComponent } from './datasource-table/datasource-table.component'; import { DatasourceTableComponent } from './datasource-table/datasource-table.component';
import { DatagridSyncfutionComponent } from './datagrid-syncfution/datagrid-syncfution.component';
import { PivotSyncfutionComponent } from './pivot-syncfution/pivot-syncfution.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -188,7 +190,9 @@ import { DatasourceTableComponent } from './datasource-table/datasource-table.co ...@@ -188,7 +190,9 @@ import { DatasourceTableComponent } from './datasource-table/datasource-table.co
ExcelReportToggleComponent, ExcelReportToggleComponent,
ExcelReportEmpviewComponent, ExcelReportEmpviewComponent,
SafeUrlPipe, SafeUrlPipe,
DatasourceTableComponent DatasourceTableComponent,
DatagridSyncfutionComponent,
PivotSyncfutionComponent
], ],
providers: [ providers: [
ContactService, ContactService,
......
src/app/apps/datagrid-syncfution/datagrid-syncfution.component.html 0 → 100644
<ejs-grid #grid id='Grid' [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
[filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings"
[groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" allowPaging='true'
allowGrouping='true' allowSorting='true' [showColumnMenu]="true" (columnMenuClick)="onColumnMenuClick($event)"
allowFiltering='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'
[selectionSettings]="selectionOptions" (detailDataBound)='detailDataBound($event)' width="auto" allowReordering='true'
[loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage'
[allowMultiSorting]='true' [columnMenuItems]="columnMenuItems">
<e-columns>
<e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
[format]="col.format" [textAlign]="'center'" [isPrimaryKey]="col.isPrimaryKey" [editType]="false"
[validationRules]="col.validationRules" [allowEditing]="false" [allowSorting]="'true'" [allowFiltering]="true"
[visible]="col.visible" [type]="col.type">
<ng-template #headerTemplate let-data>
<span class="font-size-12px font-weight-700">{{ col.headerText }}</span>
</ng-template>
</e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'" [footerTemplate]="'Sum: ${Sum}'"
[groupFooterTemplate]="'Sum: ${Sum}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
[footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
[footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'" [footerTemplate]="'Min: ${Min}'"
[groupFooterTemplate]="'Min: ${Min}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'" [footerTemplate]="'Max: ${Max}'"
[groupFooterTemplate]="'Max: ${Max}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
\ No newline at end of file
src/app/apps/datagrid-syncfution/datagrid-syncfution.component.scss 0 → 100644
// th{
// position: relative; // เทียบเท่า class "relative"
// padding: 10px; // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
// background-color: rgb(96 165 250 / 0.1); // ตัวอย่างแทน "bg-soft-secondary"
// color: #2b2b2b; // ตัวอย่างแทน "text-primary"
// text-align: center !important; // เทียบเท่า "!text-center"
// // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
// font-weight: 600;
// border-bottom: 1px solid #eee;
// }
.e-headercell,
.e-detailheadercell {
background-color: rgb(96 165 250 / 0.1) !important;
}
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
background: rgb(96 165 250) !important;
color: #fff;
opacity: 1 !important;
}
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
background-color: rgb(96 165 250) !important;
border-color: transparent;
color: #fff;
}
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
border: 1px solid !important;
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: "e-icons";
height: 18px;
line-height: 10px;
padding: 2px 0;
text-align: center;
vertical-align: middle;
width: 1rem !important;
border-color: #64748b !important;
}
.e-grid td.e-selectionbackground {
background-color: #aec2ec !important;
}
src/app/apps/excel-list/excel-list.component.html
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
(click)="openAddGroupModal(addGroupModal,items)"> (click)="openAddGroupModal(addGroupModal,items)">
{{items.tname}} {{items.tname}}
</span> </span>
<span> <span *ngIf="items.tdesc">
-{{items.tdesc}} -{{items.tdesc}}
</span> </span>
</td> </td>
...@@ -394,13 +394,6 @@ ...@@ -394,13 +394,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" class="btn btn-info" (click)="openGridModal(gridModal)">Datagrid</button>
&nbsp;
<button type="button" class="btn btn-info" (click)="openPivotModal(pivotModal)">Pivot</button>
</div>
</div>
</div> </div>
<div class="modal-footer "> <div class="modal-footer ">
<button type="submit" class="btn btn-info" <button type="submit" class="btn btn-info"
...@@ -657,6 +650,18 @@ ...@@ -657,6 +650,18 @@
{{'No Data Found' }} {{'No Data Found' }}
</div> </div>
</div> </div>
<div class="row col-12"
*ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')">
<div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" *ngIf="excelReport.isDataGrid=='1'" class="btn btn-info"
(click)="getExcelData(gridModal,'grid')">Datagrid</button>
<ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'">
&nbsp;
</ng-container>
<button type="button" *ngIf="excelReport.isPivot=='1'" class="btn btn-info"
(click)="getExcelData(pivotModal,'pivot')">Pivot</button>
</div>
</div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
...@@ -736,7 +741,7 @@ ...@@ -736,7 +741,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="modal.close()"> <button type="button" class="btn btn-danger" (click)="modal.close()">
{{"Close"}} {{"ปิด"}}
</button> </button>
</div> </div>
</ng-template> </ng-template>
...@@ -751,17 +756,22 @@ ...@@ -751,17 +756,22 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ejs-grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="{ pageSize: 5 }"> <app-datagrid-syncfution [searchSettings]="searchSettings" [dataSource]="dataList" [columns]="columns"
<e-columns> [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate" (layout)="gridLayout.data=$event">
<e-column field="id" headerText="ID" width="100"></e-column> </app-datagrid-syncfution>
<e-column field="name" headerText="Name" width="150"></e-column>
<e-column field="age" headerText="Age" width="100"></e-column>
</e-columns>
</ejs-grid>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button *ngIf="!loadingExcel" type="button" class="btn btn-info"
(click)="gridLayout.stimulate=!gridLayout.stimulate;savePerspective('grid')">
{{"Save Perspective"}}
</button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<button type="button" class="btn btn-danger" (click)="modal.close()"> <button type="button" class="btn btn-danger" (click)="modal.close()">
{{"Close"}} {{"ปิด"}}
</button> </button>
</div> </div>
</ng-template> </ng-template>
...@@ -773,11 +783,23 @@ ...@@ -773,11 +783,23 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ejs-pivotview [dataSourceSettings]="pivotDataSource" height="300"></ejs-pivotview> <app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns" [templateId]="excelReport.templateId"
[fileName]="excelReport.fileName" [pivotLayout]="setPerspective" [sendLayout]="pivotLayout.stimulate"
(layout)="pivotLayout.data=$event">
</app-pivot-syncfution>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button *ngIf="!loadingExcel" type="button" class="btn btn-info"
(click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
{{"Save Perspective"}}
</button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<button type="button" class="btn btn-danger" (click)="modal.close()"> <button type="button" class="btn btn-danger" (click)="modal.close()">
{{"Close"}} {{"ปิด"}}
</button> </button>
</div> </div>
</ng-template> </ng-template>
\ No newline at end of file
src/app/apps/excel-list/excel-list.component.ts
...@@ -9,8 +9,9 @@ import { AlertModalComponent } from '../alert-modal/alert-modal.component'; ...@@ -9,8 +9,9 @@ import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { MyModuleModel, ModuleModel } from 'src/app/model/module.model'; import { MyModuleModel, ModuleModel } from 'src/app/model/module.model';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component'; import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
import { ExcelPortalModel, ExcelPortalGroupModel, MyExcelPortalModel, ExcelPortalTagsModel, MyExcelPortalGroupModel, MyExcelPortalTagsModel } from 'src/app/model/excel-portal.model'; import { ExcelPortalModel, ExcelPortalGroupModel, MyExcelPortalModel, ExcelPortalTagsModel, MyExcelPortalGroupModel, MyExcelPortalTagsModel } from 'src/app/model/excel-portal.model';
import { Subscription } from 'rxjs'; import { forkJoin, Subscription } from 'rxjs';
import { CustomCubeService } from 'src/app/service/custom-cube.service';
import { ColumnModel } from '@syncfusion/ej2-grids';
export interface ModalDetail { export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] } text: { cardHead: string, search: string[], tableHead: string[] }
} }
...@@ -93,8 +94,22 @@ export class ExcelListComponent implements OnInit { ...@@ -93,8 +94,22 @@ export class ExcelListComponent implements OnInit {
searchModal = "" searchModal = ""
getTemplateFileSubscription?: Subscription getTemplateFileSubscription?: Subscription
searchSettings = {
fields: [],
operator: 'contains',
ignoreCase: false
};
columns: ColumnModel[] = []
pivotColumns: any[] = []
dataList: any[] = []
gridLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
pivotLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
setPerspective = ""
constructor(private excelReportService: ExcelReportService, constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal, private modalService: NgbModal,
private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef) {
} }
...@@ -475,6 +490,7 @@ export class ExcelListComponent implements OnInit { ...@@ -475,6 +490,7 @@ export class ExcelListComponent implements OnInit {
this.valueDetail = [] this.valueDetail = []
this.getTemplateFileSubscription = this.excelReportService.getTemplateFile(templateFile.templateId, templateFile.fileName).subscribe(response => { this.getTemplateFileSubscription = this.excelReportService.getTemplateFile(templateFile.templateId, templateFile.fileName).subscribe(response => {
this.excelReport = response this.excelReport = response
this.getExcelColumn()
if (this.excelReport.param) { if (this.excelReport.param) {
Object.entries(this.excelReport.param.variableSheet).forEach(([key, value]) => { Object.entries(this.excelReport.param.variableSheet).forEach(([key, value]) => {
const data = value as any const data = value as any
...@@ -583,19 +599,25 @@ export class ExcelListComponent implements OnInit { ...@@ -583,19 +599,25 @@ export class ExcelListComponent implements OnInit {
}) })
} }
openGridModal(targetModal: NgbModal) { openGridModal(targetModal: NgbModal, setPerspective: string) {
this.modalService.open(targetModal, { this.modalService.open(targetModal, {
centered: true, centered: true,
backdrop: 'static', backdrop: 'static',
size: 'lg' windowClass: 'my-dialog-big-screen'
}) })
setTimeout(() => {
this.setPerspective = setPerspective
}, 10)
} }
openPivotModal(targetModal: NgbModal) { openPivotModal(targetModal: NgbModal, setPerspective: string) {
this.modalService.open(targetModal, { this.modalService.open(targetModal, {
centered: true, centered: true,
backdrop: 'static', backdrop: 'static',
size: 'lg' windowClass: 'my-dialog-big-screen'
}) })
setTimeout(() => {
this.setPerspective = setPerspective
}, 10)
} }
ngOnDestroy(): void { ngOnDestroy(): void {
...@@ -628,4 +650,113 @@ export class ExcelListComponent implements OnInit { ...@@ -628,4 +650,113 @@ export class ExcelListComponent implements OnInit {
this.templateFileName = '' this.templateFileName = ''
} }
} }
getExcelColumn() {
const body = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName
}
this.searchSettings = {
fields: [],
operator: 'contains',
ignoreCase: false
};
this.columns = []
this.pivotColumns = []
this.customCubeService.getExcelColumn(body).subscribe((response: any) => {
this.searchSettings = {
fields: response.map((e: any) => e.split(':')[0]),
operator: 'contains',
ignoreCase: false
};
response.forEach((e: any, i: number) => {
const [field, headerText] = e.split(':')
this.columns.push({
field: field,
headerText: headerText,
type: "string",
isPrimaryKey: i == 0,
})
this.pivotColumns.push({
name: field,
caption: headerText
})
});
}, error => {
})
}
getExcelData(targetModal: NgbModal, type: 'grid' | 'pivot') {
this.loadingExcel = true
this.dataList = []
this.setPerspective = ''
const body: any = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName
};
this.variableSheet.forEach((item: any, index: number) => {
const i = index + 1;
body[`key${i}`] = item.key;
if (item.type == 'help') {
body[`val${i}`] = item.value.id
} else if (item.type == 'calendar' || item.type == 'list' || item.type == 'radio' || item.type == 'text') {
body[`val${i}`] = item.value
}
});
forkJoin({
excelData: this.customCubeService.getExcelData(body),
excelPerspective: this.customCubeService.getExcelPerspective(body),
}).subscribe(response => {
this.dataList = response.excelData as any
this.loadingExcel = false
if (type == 'grid') {
this.openGridModal(targetModal, (response.excelPerspective as any).dataGridStr)
} else if (type == 'pivot') {
this.openPivotModal(targetModal, (response.excelPerspective as any).pivotStr)
}
this.cdr.detectChanges()
}, error => {
this.loadingExcel = false
})
}
savePerspective(type: 'grid' | 'pivot') {
if (type == 'grid') {
this.loadingExcel = true
setTimeout(() => {
const body = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName,
dataGridStr: this.gridLayout.data,
pivotStr: "",
}
this.customCubeService.saveExcelPerspective(body).subscribe(response => {
this.loadingExcel = false
this.openAlertModal(response.message)
}, error => {
this.loadingExcel = false
this.openAlertModal(error.message)
})
this.cdr.detectChanges();
}, 500);
} else if (type == 'pivot') {
this.loadingExcel = true
setTimeout(() => {
const body = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName,
dataGridStr: '',
pivotStr: this.pivotLayout.data,
}
this.customCubeService.saveExcelPerspective(body).subscribe(response => {
this.loadingExcel = false
this.openAlertModal(response.message)
}, error => {
this.loadingExcel = false
this.openAlertModal(error.message)
})
this.cdr.detectChanges();
}, 500);
}
}
} }
\ No newline at end of file
src/app/apps/excel-report-toggle/excel-report-toggle.component.html
...@@ -74,7 +74,9 @@ ...@@ -74,7 +74,9 @@
(mouseleave)="tableHover.clear()" (mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}"> [ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
<td colspan="6" class="font-16 font-medium"> <td colspan="6" class="font-16 font-medium">
{{items.tname}}-{{items.tdesc}} {{items.tname}}<span *ngIf="items.tdesc">
-{{items.tdesc}}
</span>
</td> </td>
<td class="text-center"> <td class="text-center">
<ng-container *ngIf="items.templateFile.length"> <ng-container *ngIf="items.templateFile.length">
...@@ -127,6 +129,8 @@ ...@@ -127,6 +129,8 @@
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{item.module}}</td> {{item.module}}</td>
<td class="text-center" class="text-center"> <td class="text-center" class="text-center">
<div class="row">
<div class="col-5 d-flex justify-content-end align-items-center">
<i *ngIf="item.menuActive=='0'" <i *ngIf="item.menuActive=='0'"
class="fa fa-times text-danger cursor-pointer" class="fa fa-times text-danger cursor-pointer"
style="text-decoration: underline;" style="text-decoration: underline;"
...@@ -135,7 +139,8 @@ ...@@ -135,7 +139,8 @@
class="fa fa-check text-success cursor-pointer" class="fa fa-check text-success cursor-pointer"
style="text-decoration: underline;" style="text-decoration: underline;"
(click)="menuActiveTemplateFile(item)"></i> (click)="menuActiveTemplateFile(item)"></i>
&nbsp; </div>
<div class="col-7 d-flex justify-content-start align-items-center">
<button type="button" title="Print" class="btn" <button type="button" title="Print" class="btn"
style="border:3px solid #2962ff;border-radius: 10%" style="border:3px solid #2962ff;border-radius: 10%"
(mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))" (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
...@@ -144,6 +149,8 @@ ...@@ -144,6 +149,8 @@
(click)="openPrintModal(printModal,item);"> (click)="openPrintModal(printModal,item);">
<i class="fa fa-print text-info"></i> <i class="fa fa-print text-info"></i>
</button> </button>
</div>
</div>
</td> </td>
</tr> </tr>
</ng-container> </ng-container>
...@@ -167,7 +174,7 @@ ...@@ -167,7 +174,7 @@
<div class="row justify-content-end align-items-center"> <div class="row justify-content-end align-items-center">
<i class="fa fa-times text-danger"></i>&nbsp;=&nbsp;used on menu&nbsp;&nbsp;&nbsp; <i class="fa fa-times text-danger"></i>&nbsp;=&nbsp;used on menu&nbsp;&nbsp;&nbsp;
<i class="fa fa-check text-success"></i>&nbsp;=&nbsp;unused on menu&nbsp;&nbsp;&nbsp; <i class="fa fa-check text-success"></i>&nbsp;=&nbsp;unused on menu&nbsp;&nbsp;&nbsp;
<i class="fa fa-files-o text-info"></i>&nbsp;=&nbsp;copy template&nbsp;&nbsp;&nbsp; <!-- <i class="fa fa-files-o text-info"></i>&nbsp;=&nbsp;copy template&nbsp;&nbsp;&nbsp; -->
<i class="fa fa-print text-info"></i>&nbsp;=&nbsp;print report <i class="fa fa-print text-info"></i>&nbsp;=&nbsp;print report
</div> </div>
</div> </div>
...@@ -288,10 +295,17 @@ ...@@ -288,10 +295,17 @@
{{'No Data Found' }} {{'No Data Found' }}
</div> </div>
</div> </div>
<div *ngIf="variableSheet.length" class="col-12 d-flex justify-content-center align-content-center"> <div *ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"
<button type="button" class="btn btn-info" (click)="openGridModal(gridModal)">Datagrid</button> class="col-12 d-flex justify-content-center align-content-center">
<div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" *ngIf="excelReport.isDataGrid=='1'" class="btn btn-info"
(click)="getExcelData(gridModal,'grid')">Datagrid</button>
<ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'">
&nbsp; &nbsp;
<button type="button" class="btn btn-info" (click)="openPivotModal(pivotModal)">Pivot</button> </ng-container>
<button type="button" *ngIf="excelReport.isPivot=='1'" class="btn btn-info"
(click)="getExcelData(pivotModal,'pivot')">Pivot</button>
</div>
</div> </div>
</ng-container> </ng-container>
</div> </div>
...@@ -372,7 +386,7 @@ ...@@ -372,7 +386,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="modal.close()"> <button type="button" class="btn btn-danger" (click)="modal.close()">
{{"Close"}} {{"ปิด"}}
</button> </button>
</div> </div>
</ng-template> </ng-template>
...@@ -387,17 +401,22 @@ ...@@ -387,17 +401,22 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ejs-grid [dataSource]="gridData" [allowPaging]="true" [pageSettings]="{ pageSize: 5 }"> <app-datagrid-syncfution [searchSettings]="searchSettings" [dataSource]="dataList" [columns]="columns"
<e-columns> [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate" (layout)="gridLayout.data=$event">
<e-column field="id" headerText="ID" width="100"></e-column> </app-datagrid-syncfution>
<e-column field="name" headerText="Name" width="150"></e-column>
<e-column field="age" headerText="Age" width="100"></e-column>
</e-columns>
</ejs-grid>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button *ngIf="!loadingExcel" type="button" class="btn btn-info"
(click)="gridLayout.stimulate=!gridLayout.stimulate;savePerspective('grid')">
{{"Save Perspective"}}
</button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<button type="button" class="btn btn-danger" (click)="modal.close()"> <button type="button" class="btn btn-danger" (click)="modal.close()">
{{"Close"}} {{"ปิด"}}
</button> </button>
</div> </div>
</ng-template> </ng-template>
...@@ -409,11 +428,23 @@ ...@@ -409,11 +428,23 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ejs-pivotview [dataSourceSettings]="pivotDataSource" height="300"></ejs-pivotview> <app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns" [templateId]="excelReport.templateId"
[fileName]="excelReport.fileName" [pivotLayout]="setPerspective" [sendLayout]="pivotLayout.stimulate"
(layout)="pivotLayout.data=$event">
</app-pivot-syncfution>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button *ngIf="!loadingExcel" type="button" class="btn btn-info"
(click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
{{"Save Perspective"}}
</button>
<div *ngIf="loadingExcel" class="row" style="width: 120px;">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<button type="button" class="btn btn-danger" (click)="modal.close()"> <button type="button" class="btn btn-danger" (click)="modal.close()">
{{"Close"}} {{"ปิด"}}
</button> </button>
</div> </div>
</ng-template> </ng-template>
\ No newline at end of file
src/app/apps/excel-report-toggle/excel-report-toggle.component.ts
import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { NgbDate, NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbDate, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ExcelReportService } from 'src/app/service/excel-report.service'; import { ExcelReportService } from 'src/app/service/excel-report.service';
...@@ -8,7 +8,9 @@ import { ModuleModel } from 'src/app/model/module.model'; ...@@ -8,7 +8,9 @@ import { ModuleModel } from 'src/app/model/module.model';
import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from 'src/app/model/template.model'; import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from 'src/app/model/template.model';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component'; import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
import { AlertModalComponent } from '../alert-modal/alert-modal.component'; import { AlertModalComponent } from '../alert-modal/alert-modal.component';
import { Subscription } from 'rxjs'; import { forkJoin, Subscription } from 'rxjs';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { CustomCubeService } from 'src/app/service/custom-cube.service';
export interface ModalDetail { export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] } text: { cardHead: string, search: string[], tableHead: string[] }
...@@ -81,8 +83,22 @@ export class ExcelReportToggleComponent implements OnInit { ...@@ -81,8 +83,22 @@ export class ExcelReportToggleComponent implements OnInit {
searchModal = "" searchModal = ""
getTemplateFileSubscription?: Subscription getTemplateFileSubscription?: Subscription
searchSettings = {
fields: [],
operator: 'contains',
ignoreCase: false
};
columns: ColumnModel[] = []
pivotColumns: any[] = []
dataList: any[] = []
gridLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
pivotLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
setPerspective = ''
constructor(private excelReportService: ExcelReportService, constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal, private modalService: NgbModal,
private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef) {
} }
...@@ -183,6 +199,7 @@ export class ExcelReportToggleComponent implements OnInit { ...@@ -183,6 +199,7 @@ export class ExcelReportToggleComponent implements OnInit {
this.valueDetail = [] this.valueDetail = []
this.getTemplateFileSubscription = this.excelReportService.getTemplateFile(templateFile.templateId, templateFile.fileName).subscribe(response => { this.getTemplateFileSubscription = this.excelReportService.getTemplateFile(templateFile.templateId, templateFile.fileName).subscribe(response => {
this.excelReport = response this.excelReport = response
this.getExcelColumn()
if (this.excelReport.param) { if (this.excelReport.param) {
Object.entries(this.excelReport.param.variableSheet).forEach(([key, value]) => { Object.entries(this.excelReport.param.variableSheet).forEach(([key, value]) => {
const data = value as any const data = value as any
...@@ -291,22 +308,136 @@ export class ExcelReportToggleComponent implements OnInit { ...@@ -291,22 +308,136 @@ export class ExcelReportToggleComponent implements OnInit {
}) })
} }
openGridModal(targetModal: NgbModal) { openGridModal(targetModal: NgbModal, setPerspective: string) {
this.modalService.open(targetModal, { this.modalService.open(targetModal, {
centered: true, centered: true,
backdrop: 'static', backdrop: 'static',
size: 'lg' windowClass: 'my-dialog-big-screen'
}) })
setTimeout(() => {
this.setPerspective = setPerspective
}, 10)
} }
openPivotModal(targetModal: NgbModal) { openPivotModal(targetModal: NgbModal, setPerspective: string) {
this.modalService.open(targetModal, { this.modalService.open(targetModal, {
centered: true, centered: true,
backdrop: 'static', backdrop: 'static',
size: 'lg' windowClass: 'my-dialog-big-screen'
}) })
setTimeout(() => {
this.setPerspective = setPerspective
}, 10)
} }
ngOnDestroy(): void { ngOnDestroy(): void {
this.getTemplateFileSubscription?.unsubscribe() this.getTemplateFileSubscription?.unsubscribe()
} }
getExcelColumn() {
const body = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName
}
this.searchSettings = {
fields: [],
operator: 'contains',
ignoreCase: false
};
this.columns = []
this.pivotColumns = []
this.customCubeService.getExcelColumn(body).subscribe((response: any) => {
this.searchSettings = {
fields: response.map((e: any) => e.split(':')[0]),
operator: 'contains',
ignoreCase: false
};
response.forEach((e: any, i: number) => {
const [field, headerText] = e.split(':')
this.columns.push({
field: field,
headerText: headerText,
type: "string",
isPrimaryKey: i == 0,
})
this.pivotColumns.push({
name: field,
caption: headerText
})
});
}, error => {
})
}
getExcelData(targetModal: NgbModal, type: 'grid' | 'pivot') {
this.loadingExcel = true
this.dataList = []
const body: any = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName
};
this.variableSheet.forEach((item: any, index: number) => {
const i = index + 1;
body[`key${i}`] = item.key;
if (item.type == 'help') {
body[`val${i}`] = item.value.id
} else if (item.type == 'calendar' || item.type == 'list' || item.type == 'radio' || item.type == 'text') {
body[`val${i}`] = item.value
}
});
forkJoin({
excelData: this.customCubeService.getExcelData(body),
excelPerspective: this.customCubeService.getExcelPerspective(body),
}).subscribe(response => {
this.dataList = response.excelData as any
this.loadingExcel = false
if (type == 'grid') {
this.openGridModal(targetModal, (response.excelPerspective as any).dataGridStr)
} else if (type == 'pivot') {
this.openPivotModal(targetModal, (response.excelPerspective as any).pivotStr)
}
this.cdr.detectChanges()
}, error => {
this.loadingExcel = false
})
}
savePerspective(type: 'grid' | 'pivot') {
if (type == 'grid') {
this.loadingExcel = true
setTimeout(() => {
const body = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName,
dataGridStr: this.gridLayout.data,
pivotStr: "",
}
this.customCubeService.saveExcelPerspective(body).subscribe(response => {
this.loadingExcel = false
this.openAlertModal(response.message)
}, error => {
this.loadingExcel = false
this.openAlertModal(error.message)
})
this.cdr.detectChanges();
}, 500);
} else if (type == 'pivot') {
this.loadingExcel = true
setTimeout(() => {
const body = {
templateId: this.excelReport.templateId,
fileName: this.excelReport.fileName,
dataGridStr: '',
pivotStr: this.pivotLayout.data,
}
this.customCubeService.saveExcelPerspective(body).subscribe(response => {
this.loadingExcel = false
this.openAlertModal(response.message)
}, error => {
this.loadingExcel = false
this.openAlertModal(error.message)
})
this.cdr.detectChanges();
}, 500);
}
}
} }
\ No newline at end of file
src/app/apps/excel-report/excel-report.component.html
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="modal.close()"> <button type="button" class="btn btn-danger" (click)="modal.close()">
{{"Close"}} {{"ปิด"}}
</button> </button>
</div> </div>
</div> </div>
......
src/app/apps/pivot-syncfution/pivot-syncfution.component.html 0 → 100644
<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]="dataSourceSettings" allowExcelExport='true'
allowNumberFormatting='true' allowConditionalFormatting='true' allowPdfExport='true' showToolbar='true'
allowCalculatedField='true' showFieldList='true' width='100%' [displayOption]='displayOption' height='550'
[toolbar]='toolbarOptions'></ejs-pivotview>
\ No newline at end of file
src/app/apps/pivot-syncfution/pivot-syncfution.component.scss 0 → 100644
// th{
// position: relative; // เทียบเท่า class "relative"
// padding: 10px; // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
// background-color: rgb(96 165 250 / 0.1); // ตัวอย่างแทน "bg-soft-secondary"
// color: #2b2b2b; // ตัวอย่างแทน "text-primary"
// text-align: center !important; // เทียบเท่า "!text-center"
// // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
// font-weight: 600;
// border-bottom: 1px solid #eee;
// }
.e-headercell,
.e-detailheadercell {
background-color: rgb(96 165 250 / 0.1) !important;
}
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
background: rgb(96 165 250) !important;
color: #fff;
opacity: 1 !important;
}
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
background-color: rgb(96 165 250) !important;
border-color: transparent;
color: #fff;
}
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
border: 1px solid !important;
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: "e-icons";
height: 18px;
line-height: 10px;
padding: 2px 0;
text-align: center;
vertical-align: middle;
width: 1rem !important;
border-color: #64748b !important;
}
.e-grid td.e-selectionbackground {
background-color: #aec2ec !important;
}
src/app/apps/pivot-syncfution/pivot-syncfution.component.ts 0 → 100644
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from "@angular/core";
import {
IDataOptions,
PivotView,
ToolbarItems,
GroupingBarService,
ToolbarService,
PDFExportService,
ExcelExportService,
DisplayOption,
IDataSet,
DataSourceSettings,
PivotViewComponent
} from '@syncfusion/ej2-angular-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
selector: 'app-pivot-syncfution',
templateUrl: './pivot-syncfution.component.html',
styleUrls: ['./pivot-syncfution.component.scss'],
providers: [
GroupingBarService,
ToolbarService,
PDFExportService,
ExcelExportService
]
})
export class PivotSyncfutionComponent implements OnInit {
dataSourceSettings: DataSourceSettingsModel = {
dataSource: [],
expandAll: false,
enableSorting: true,
drilledMembers: [],
columns: [],
values: [],
rows: [],
formatSettings: [],
filters: []
};
@Input() dataSource: any
@Input() columns: any
toolbarOptions: ToolbarItems[] = ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'Formatting', 'FieldList']
displayOption: DisplayOption = { view: 'Both' } as DisplayOption;
@ViewChild('pivotview') public pivotview?: PivotViewComponent;
@Input() sendLayout = false
@Input() pivotLayout = ''
@Output() layout = new EventEmitter<any>();
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit(): void {
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['dataSource']?.currentValue || changes['columns']?.currentValue) {
this.dataSourceSettings = {
dataSource: this.dataSource,
columns: [],
values: this.columns,
rows: this.columns,
expandAll: true,
enableSorting: true,
drilledMembers: [],
filters: [],
formatSettings: []
};
}
if (changes['pivotLayout']) {
if (changes['pivotLayout'].currentValue) {
const layout = JSON.parse(changes['pivotLayout'].currentValue)
this.pivotview?.setProperties(layout)
}
}
if (changes['sendLayout']) {
if (this.pivotview) {
const layout = this.pivotview?.getPersistData();
if (layout) {
this.layout.emit(layout)
}
}
}
}
}
\ No newline at end of file
src/app/service/custom-cube.service.ts 0 → 100644
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 { TemplateFileMiniModel } from '../model/template-file-mini.model';
import { AlertModel } from '../model/alert.model';
@Injectable({
providedIn: 'root'
})
export class CustomCubeService {
constructor(private http: HttpClient,
private translateService: TranslateService
) { }
getExcelColumn(body: {
templateId: string,
fileName: string,
}) {
return this.http.post(environment.url + "customcube/get-excel-column?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
getExcelData(body: any) {
return this.http.post(environment.url + "customcube/get-excel-data?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
saveExcelPerspective(body: {
templateId: string,
fileName: string,
dataGridStr: string,
pivotStr: string,
}): Observable<AlertModel> {
return this.http.post<AlertModel>(environment.url + "customcube/save-excel-perspective?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
getExcelPerspective(body: {
templateId: string,
fileName: string,
}) {
return this.http.post(environment.url + "customcube/get-excel-perspective?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
}
}
\ No newline at end of file
src/styles.scss
...@@ -13,6 +13,11 @@ ...@@ -13,6 +13,11 @@
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/material.css';
body { body {
font-family: "Kanit", sans-serif !important; font-family: "Kanit", sans-serif !important;
...@@ -167,3 +172,13 @@ body { ...@@ -167,3 +172,13 @@ body {
min-height: 70vh !important; min-height: 70vh !important;
} }
} }
.my-dialog-big-screen .modal-dialog {
display: flex !important;
justify-content: center !important;
.modal-content {
min-width: 70vw !important;
min-height: 70vh !important;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment