Skip to content

M
myhr-portal
Commit 81a24eca by Nattana Chaiyamat
Options

syncfution

parent 4997ddae
Showing with 1108 additions and 67 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/datagrid-syncfution/datagrid-syncfution.component.ts 0 → 100644
import {
Component,
Input,
Output,
EventEmitter,
ViewEncapsulation,
OnInit,
ViewChild,
SimpleChanges,
ChangeDetectorRef
} from '@angular/core';
import {
EditService,
SearchService,
ReorderService,
SortService,
GroupService,
ColumnMenuService,
PageService,
FilterService,
SelectionSettingsModel,
ToolbarItems,
ToolbarService,
GridComponent,
PdfExportService,
ExcelExportService,
DetailRowService,
DetailDataBoundEventArgs,
Grid,
AggregateService,
PdfExportProperties,
LoadingIndicatorModel,
ExcelExportProperties,
Column,
ColumnMenuClickEventArgs
} from '@syncfusion/ej2-angular-grids';
import { GroupSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-angular-grids';
import { Query } from '@syncfusion/ej2-data';
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { CustomCubeService } from 'src/app/service/custom-cube.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { AlertModalComponent } from '../alert-modal/alert-modal.component';
setCulture('th-TH');
L10n.load({
'en-US': {
'pager': {
'currentPageInfo': '',
'totalItemsInfo': '{1} to {2} of {0}',
}
},
'th-TH': {
'grid': {
'EmptyRecord': 'ไม่มีข้อมูลที่จะแสดง',
'Item': '1 รายการ',
'Items': '{0} รายการ'
},
'pager': {
'All': 'ทั้งหมด',
'pagerAllDropDown': 'รายการ',
'currentPageInfo': '',
'totalItemsInfo': '{0} รายการ',
'totalItemInfo': '{0} รายการ',
'totalRecordsInfo': '{0} รายการ',
'firstPageTooltip': 'หน้าแรก',
'lastPageTooltip': 'หน้าสุดท้าย',
'nextPageTooltip': 'ถัดไป',
'previousPageTooltip': 'ก่อนหน้า',
'nextPagerTooltip': 'ถัดไป',
'previousPagerTooltip': 'ก่อนหน้า',
'pageInput': '{0}',
'page': 'หน้า',
'pagerDropDown': 'รายการ',
'pagerAll': 'ทั้งหมด',
'pageSize': 'รายการต่อหน้า',
'pageSizeAll': 'ทั้งหมด',
'pageCount': 'จำนวนหน้า',
'pageCountAll': 'ทั้งหมด'
}
}
});
@Component({
selector: 'app-datagrid-syncfution',
templateUrl: './datagrid-syncfution.component.html',
styleUrls: ['./datagrid-syncfution.component.scss'],
providers: [AggregateService, SortService, GroupService, ColumnMenuService, PageService, FilterService, ToolbarService, PdfExportService, ExcelExportService, DetailRowService, ReorderService, EditService, SearchService],
encapsulation: ViewEncapsulation.None
})
export class DatagridSyncfutionComponent implements OnInit {
@ViewChild('grid') public grid?: GridComponent;
@Input() dataSource: any[] = [];
dataSourceSearch: any[] = [];
dataSourceFilter: any[] = [];
@Output() sendSelectData = new EventEmitter<any>();
@Input() columns: ColumnModel[] = [];
// @Input() toolbarOptions?: ToolbarItems[]
@Input() toolbarOptions?: ToolbarItems[] = ['Print', 'ExcelExport', 'CsvExport'];
@Input() searchSettings: any = {
fields: [],
operator: 'contains',
ignoreCase: true,
};
@Input() selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
selectedItemsAll = false
@Output() sendSelectedItems = new EventEmitter<any>();
@Input() modalName = ''
@Input() canChild = false
@Output() sendNextPage = new EventEmitter<any>();
@Input() childView = false
@Output() sendNextPageView = new EventEmitter<any>();
@Input() canDownload = false
@Output() sendFileDownload = new EventEmitter<any>();
@Input() childForm = false
@Output() sendNextPageForm = new EventEmitter<any>();
modalStatus = '';
@Output() createFormEvent = new EventEmitter<any>();
@Input() checkBoxSetting = true
@Input() actionSetting = true
@Input() detailSetting = false
@Input() childList = ''
@Input() searchText = ''
aggregatesSum: any[] = [];
aggregatesCount: any[] = [];
aggregatesAvg: any[] = [];
aggregatesMin: any[] = [];
aggregatesMax: any[] = [];
@Input() childColumns: ColumnModel[] = [];
@Input() allowSorting = true;
@Input() allowFiltering = true;
@Input() filterSettings?: FilterSettingsModel = { type: 'Excel' };;
@Input() groupSettings?: GroupSettingsModel = { allowReordering: true, showGroupedColumn: true, showDropArea: false };
public selectionOptions?: SelectionSettingsModel = { checkboxOnly: true };
@Input() editSettings? = { allowEditing: true, mode: 'Batch' };
@Input() initialPage? = { pageSizes: true, pageSize: 10 };
@Input() canDelete = true
@Input() canEdit = true
// ... เป็นต้น
public query: Query = new Query().addParams('dataCount', '1000');
loadingIndicator: LoadingIndicatorModel = { indicatorType: 'Shimmer' };
// ตัวอย่าง event เมื่อมีการลบ / แก้ไข
@Output() actionBegin = new EventEmitter<any>();
// อาจมี event อื่น ๆ เช่น pageChange, filterChange, ฯลฯ
// แล้วแต่ logic ที่ต้องการให้ parent รู้
// @Output() pageChanged = new EventEmitter<number>();
// @Output() filterChanged = new EventEmitter<FilterEventArgs>();
// ...
public columnMenuItems: any[] = [
'AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',
'Group', 'Ungroup', 'ColumnChooser', 'Filter',
{ text: 'Sum', id: 'aggregate_sum' },
{ text: 'Count', id: 'aggregate_count' },
{ text: 'Average', id: 'aggregate_average' },
{ text: 'Min', id: 'aggregate_min' },
{ text: 'Max', id: 'aggregate_max' }
];
@Input() sendLayout = false
@Input() gridLayout = ''
@Output() layout = new EventEmitter<any>();
constructor(private cdr: ChangeDetectorRef
) {
}
ngOnInit(): void {
// this.query = new Query().addParams('dataCount', '1000');
this.loadingIndicator = { indicatorType: 'Shimmer' };
// ถ้ามี logic ของ child เอง เช่นตั้งค่าเริ่มต้น
// ให้เขียนตรงนี้ได้
}
ngOnChanges(changes: SimpleChanges): void {
this.query = new Query().addParams('dataCount', '1000');
this.loadingIndicator = { indicatorType: 'Shimmer' };
if (changes) {
if (changes['searchText']) {
this.search(changes['searchText'].currentValue)
}
if (changes['dataSource']) {
this.dataSourceSearch = JSON.parse(JSON.stringify(this.dataSource || []))
this.dataSourceFilter = JSON.parse(JSON.stringify(this.dataSource || []))
}
if (changes['gridLayout']) {
if (changes['gridLayout'].currentValue) {
const layout = JSON.parse(changes['gridLayout'].currentValue)
this.grid?.setProperties(layout)
}
}
if (changes['sendLayout']) {
if (this.grid) {
const layout = this.grid?.getPersistData();
if (layout) {
this.layout.emit(layout)
}
}
}
}
}
onSelectData(args: any) {
this.sendSelectData.emit(args);
}
onNextPage(args: any) {
this.sendNextPage.emit(args);
}
toolbarClick(args: any): void {
if (args.item.id === 'Grid_excelexport') {
let exportProperties: ExcelExportProperties = {
columns: this.columns.map(col => ({
field: col.field,
headerText: col.headerText
})) as Column[]
};
this.grid?.excelExport(exportProperties);
} else if (args.item.id === 'Grid_csvexport') {
let exportColumns = this.columns.map(col => ({
field: col.field!,
headerText: col.headerText!
}));
this.grid?.csvExport({ columns: exportColumns as Column[] });
} else if (args.item.id === 'Grid_print') {
const checkBoxSetting = this.checkBoxSetting
this.checkBoxSetting = false
const actionSetting = this.actionSetting
this.actionSetting = false
this.cdr.detectChanges()
setTimeout(() => {
this.checkBoxSetting = checkBoxSetting
this.actionSetting = actionSetting
this.cdr.detectChanges()
}, 1000)
}
}
search(text: string) {
if (this.grid) {
if (this.searchSettings.fields.length) {
this.dataSourceSearch = JSON.parse(JSON.stringify(this.filterData(text, this.searchSettings.fields)));
this.dataSourceFilter = JSON.parse(JSON.stringify(this.filterData(text, this.searchSettings.fields)));
} else {
(this.grid as GridComponent).search(text);
}
}
}
filterData(text: string, fields: string[]): any[] {
return this.dataSource.filter(item => {
return fields.some(field => {
const value = field.split('.').reduce((obj, key) => obj?.[key], item);
return value?.toString().toLowerCase().includes(text.toLowerCase());
}
);
});
}
detailDataBound(e: DetailDataBoundEventArgs) {
let detail = new Grid({
// ─────────────────────────────────────────────────────────────
// เดิมเป็น data.filter(...) เทียบ EmployeeID
// เปลี่ยนมาใช้ e.data.massessesList โดยตรง
// ─────────────────────────────────────────────────────────────
dataSource: (e.data as any)[this.childList.toString()],
columns: this.childColumns
});
detail.appendTo((e.detailElement as HTMLElement).querySelector('.custom-grid') as HTMLElement);
// let detail = new Grid({
// dataSource: data.filter((item: Object) => (item as ColumnSpanDataType)[this.childList] === (e.data as any)[this.childList]),
// columns: [
// { field: 'OrderID', headerText: 'Order ID', width: 110 },
// { field: 'CustomerID', headerText: 'Customer Name', width: 140 },
// { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
// ]
// });
// detail.appendTo((e.detailElement as HTMLElement).querySelector('.custom-grid') as HTMLElement);
}
toggleSelection(key: string, value: boolean) {
this.selectedItems.data.set(key, value);
this.selectedItems.count = Array.from(this.selectedItems.data.values()).filter(v => v).length;
this.sendSelectedItems.emit(this.selectedItems);
}
toggleSelectionAll() {
this.selectedItemsAll = !this.selectedItemsAll;
this.selectedItems.data.forEach((_, key) => {
if (this.dataSourceFilter.find((x: any) => x[this.selectedItems.key] == key)) {
this.selectedItems.data.set(key, this.selectedItemsAll);
}
});
this.selectedItems.count = Array.from(this.selectedItems.data.values()).filter(v => v).length;
this.sendSelectedItems.emit(this.selectedItems);
}
actionComplete(args: any) {
if (args.requestType === 'filtering') {
if (this.grid) {
this.dataSourceFilter = ((this.grid as GridComponent).getFilteredRecords() as any).length ? ((this.grid as GridComponent).getFilteredRecords() as any) : JSON.parse(JSON.stringify(this.dataSourceSearch || []));
}
}
}
onColumnMenuClick(args: ColumnMenuClickEventArgs): void {
if (!args.item.id) { return; }
// เช็คว่าเป็น aggregate_... ไหม
if (args.item.id.startsWith('aggregate_')) {
const colField = (args.column as any)?.field;
if (!colField) { return; }
// ดีบักดูว่า user คลิกอะไร
// console.log('Column Menu Click =>', args.item.id, 'Field:', colField);
// ถอดเอาคำว่า aggregate_ ออก
const selectedAgg = args.item.id.split('_')[1]; // sum, count, average, min, max, custom
// เอาไปแก้ไขค่าใน this.aggregates ให้ตรงคอลัมน์
// สมมุติว่า field ใน aggregates ไม่ซ้ำกัน
// const aggIndex = this.aggregates.findIndex(a => a.field === colField);
if (selectedAgg === 'sum') {
if (this.aggregatesSum.find(a => a.field === colField)) {
this.aggregatesSum = this.aggregatesSum.filter(a => a.field !== colField);
} else {
this.aggregatesSum.push({
field: colField,
type: 'Sum',
footerTemplate: 'Sum: ${Sum}'
});
}
this.cdr.detectChanges()
}
else if (selectedAgg === 'count') {
this.aggregatesCount.push({
field: colField,
type: 'Count',
footerTemplate: 'Count: ${Count}'
});
} else if (selectedAgg === 'average') {
this.aggregatesAvg.push({
field: colField,
type: 'Average',
footerTemplate: 'Avg: ${Average}'
});
}
else if (selectedAgg === 'min') {
this.aggregatesMin.push({
field: colField,
type: 'Min',
footerTemplate: 'Min: ${Min}'
});
}
else if (selectedAgg === 'max') {
this.aggregatesMax.push({
field: colField,
type: 'Max',
footerTemplate: 'Max: ${Max}'
});
}
// if (aggIndex !== -1) {
// switch (selectedAgg) {
// case 'sum': this.aggregates[aggIndex].type = 'Sum'; break;
// case 'count': this.aggregates[aggIndex].type = 'Count'; break;
// case 'average': this.aggregates[aggIndex].type = 'Average'; break;
// case 'min': this.aggregates[aggIndex].type = 'Min'; break;
// case 'max': this.aggregates[aggIndex].type = 'Max'; break;
// case 'custom': this.aggregates[aggIndex].type = 'Custom';
// // ถ้ามีฟังก์ชัน customAggregate ที่ต้องการ ก็เซ็ตด้วย
// // this.aggregates[aggIndex].customAggregate = this.myCustomFunction;
// break;
// }
// } else {
// if (selectedAgg === 'sum') {
// this.aggregates.push({
// field: colField,
// type: 'Sum'
// });
// }
// else if (selectedAgg === 'count') {
// this.aggregates.push({
// field: colField,
// type: 'Count'
// });
// }
// }
// จากนั้น refresh grid เพื่อให้ aggregates คำนวณใหม่
setTimeout(() => {
this.grid?.refresh();
}, 500);
// this.grid?.refresh();
}
}
onNextPageView(data: any) {
this.sendNextPageView.emit(data);
}
onFileDownload(data: any) {
this.sendFileDownload.emit(data);
}
onNextPageForm(data: any) {
this.sendNextPageForm.emit(data);
}
}
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,23 +129,28 @@ ...@@ -127,23 +129,28 @@
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">
<i *ngIf="item.menuActive=='0'" <div class="row">
class="fa fa-times text-danger cursor-pointer" <div class="col-5 d-flex justify-content-end align-items-center">
style="text-decoration: underline;" <i *ngIf="item.menuActive=='0'"
(click)="menuActiveTemplateFile(item)"></i> class="fa fa-times text-danger cursor-pointer"
<i *ngIf="item.menuActive=='1'" style="text-decoration: underline;"
class="fa fa-check text-success cursor-pointer" (click)="menuActiveTemplateFile(item)"></i>
style="text-decoration: underline;" <i *ngIf="item.menuActive=='1'"
(click)="menuActiveTemplateFile(item)"></i> class="fa fa-check text-success cursor-pointer"
&nbsp; style="text-decoration: underline;"
<button type="button" title="Print" class="btn" (click)="menuActiveTemplateFile(item)"></i>
style="border:3px solid #2962ff;border-radius: 10%" </div>
(mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))" <div class="col-7 d-flex justify-content-start align-items-center">
(mouseleave)="buttonHover.clear()" <button type="button" title="Print" class="btn"
[ngStyle]="{'background-color':buttonHover.get(item.fileName+'print')?'#dfdfdf':'#ffffff'}" style="border:3px solid #2962ff;border-radius: 10%"
(click)="openPrintModal(printModal,item);"> (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
<i class="fa fa-print text-info"></i> (mouseleave)="buttonHover.clear()"
</button> [ngStyle]="{'background-color':buttonHover.get(item.fileName+'print')?'#dfdfdf':'#ffffff'}"
(click)="openPrintModal(printModal,item);">
<i class="fa fa-print text-info"></i>
</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">
&nbsp; <div class="col-12 d-flex justify-content-center align-content-center">
<button type="button" class="btn btn-info" (click)="openPivotModal(pivotModal)">Pivot</button> <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> </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;
...@@ -166,4 +171,14 @@ body { ...@@ -166,4 +171,14 @@ body {
min-width: 70vw !important; min-width: 70vw !important;
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