diff --git a/package-lock.json b/package-lock.json index 1e05f28..7426ad5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,12 @@ "version": "0.10.8", "license": "MIT", "dependencies": { - "@genexus/reporting-api": "~2.3.6", + "@genexus/reporting-api": "~2.3.7", "@genexus/web-controls-library": "2.3.0", "date-fns": "^2.30.0", "highcharts": "^11.1.0", "jquery": "^3.7.1", - "jspivottable": "1.1.8", + "jspivottable": "1.1.9", "material-icons": "^1.13.1", "rollup-plugin-dotenv": "^0.5.0" }, @@ -2732,9 +2732,9 @@ "dev": true }, "node_modules/@genexus/reporting-api": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/@genexus/reporting-api/-/reporting-api-2.3.6.tgz", - "integrity": "sha512-Ne9t2FROAz7X191tqbH33VRbrhC2SPVHeJ1djItDpG9ZnkfgUDPxztMUs89fR37K9V1yOcuMG0s9JkqvwjYEeA==", + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/@genexus/reporting-api/-/reporting-api-2.3.7.tgz", + "integrity": "sha512-9ENUiaaMTdVeblrx/ant71RWd4M5dHzfDR8HBIslJil+KRC+UTKFSwoWrbIrVQ7n7AcnjyCdZ4/jFeRwd6eYCg==", "dependencies": { "date-fns": "^2.30.0", "ts-node": "^10.9.1", @@ -11752,9 +11752,9 @@ } }, "node_modules/jspivottable": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/jspivottable/-/jspivottable-1.1.8.tgz", - "integrity": "sha512-K/VVTzbyqYa6E3wgkKQrcJrG8BjGxTesd81f1KEcXiz8q8TVKIEw/nI0XYmdBgVMxJAiWgAWiGMQOarZ8mugig==" + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/jspivottable/-/jspivottable-1.1.9.tgz", + "integrity": "sha512-IXWw/N1Z3ZEa8m5H8QhLgZZ0kOj6NJznDZvSYDn+C8mmzPU3DH2uLv3NMo7jyoZZOQzGHiMUuNA1iaK+YMiXUQ==" }, "node_modules/jsx-ast-utils": { "version": "3.3.3", @@ -18261,9 +18261,9 @@ "dev": true }, "@genexus/reporting-api": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/@genexus/reporting-api/-/reporting-api-2.3.6.tgz", - "integrity": "sha512-Ne9t2FROAz7X191tqbH33VRbrhC2SPVHeJ1djItDpG9ZnkfgUDPxztMUs89fR37K9V1yOcuMG0s9JkqvwjYEeA==", + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/@genexus/reporting-api/-/reporting-api-2.3.7.tgz", + "integrity": "sha512-9ENUiaaMTdVeblrx/ant71RWd4M5dHzfDR8HBIslJil+KRC+UTKFSwoWrbIrVQ7n7AcnjyCdZ4/jFeRwd6eYCg==", "requires": { "date-fns": "^2.30.0", "ts-node": "^10.9.1", @@ -24973,9 +24973,9 @@ } }, "jspivottable": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/jspivottable/-/jspivottable-1.1.8.tgz", - "integrity": "sha512-K/VVTzbyqYa6E3wgkKQrcJrG8BjGxTesd81f1KEcXiz8q8TVKIEw/nI0XYmdBgVMxJAiWgAWiGMQOarZ8mugig==" + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/jspivottable/-/jspivottable-1.1.9.tgz", + "integrity": "sha512-IXWw/N1Z3ZEa8m5H8QhLgZZ0kOj6NJznDZvSYDn+C8mmzPU3DH2uLv3NMo7jyoZZOQzGHiMUuNA1iaK+YMiXUQ==" }, "jsx-ast-utils": { "version": "3.3.3", diff --git a/package.json b/package.json index 47d6331..3a43e1f 100644 --- a/package.json +++ b/package.json @@ -65,12 +65,12 @@ }, "license": "MIT", "dependencies": { - "@genexus/reporting-api": "~2.3.6", + "@genexus/reporting-api": "~2.3.7", "@genexus/web-controls-library": "2.3.0", "date-fns": "^2.30.0", "highcharts": "^11.1.0", "jquery": "^3.7.1", - "jspivottable": "1.1.8", + "jspivottable": "1.1.9", "material-icons": "^1.13.1", "rollup-plugin-dotenv": "^0.5.0" } diff --git a/src/components.d.ts b/src/components.d.ts index 3603ea6..2aede06 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -651,11 +651,11 @@ export namespace Components { /** * PivotTable's Method for PivotTable Page Data */ - "getPageDataForPivotTable": (properties: QueryViewerPageDataForPivot, paging: boolean, totalForColumns: QueryViewerTotal, totalForRows: QueryViewerTotal) => Promise; + "getPageDataForPivotTable": (pageData: QueryViewerPageDataForPivot) => Promise; /** * Table's Method for Table Page Data */ - "getPageDataForTable": (properties: QueryViewerPageDataForTable, paging: boolean, totalForColumns: QueryViewerTotal, totalForRows: QueryViewerTotal) => Promise; + "getPageDataForTable": (pageData: QueryViewerPageDataForTable) => Promise; /** * PivotTable's Method for PivotTable Data Sync Response */ diff --git a/src/components/query-viewer-pivot-table/controller/query-viewer-pivot-render.tsx b/src/components/query-viewer-pivot-table/controller/query-viewer-pivot-render.tsx index 01e53e1..efa60b9 100644 --- a/src/components/query-viewer-pivot-table/controller/query-viewer-pivot-render.tsx +++ b/src/components/query-viewer-pivot-table/controller/query-viewer-pivot-render.tsx @@ -220,7 +220,7 @@ export class QueryViewerPivotTableRender { RealType: QueryViewerOutputType.PivotTable, ObjectName: this.serviceResponse.objectName, ControlName: this.controlName, - PageSize: this.paging === true ? this.pageSize : undefined, + PageSize: this.pageSize, metadata: this.serviceResponse.metadataXML, UcId: this.controlName, // ToDo: check if this property make sense with the AutoGrow implementation in the SD programming model @@ -231,10 +231,11 @@ export class QueryViewerPivotTableRender { UseRecordsetCache: !this.serviceResponse.useGxQuery, AllowSelection: this.allowSelection, SelectLine: true, - // ToDo: update this value + // PivotTable and Table outputs always have ServerPaging enabled, because client-side paging is no + // longer supported. If in GeneXus Paging = false, we should send the PageSize property with undefined + // so that the PivotTable and the Table know that pagination is not configured. ServerPaging: true, - // ToDo: update this value - ServerPagingPivot: this.paging, + ServerPagingPivot: true, // ToDo: update this value ServerPagingCacheSize: 0, TotalForColumns: this.totalForColumns, @@ -247,7 +248,7 @@ export class QueryViewerPivotTableRender { RealType: QueryViewerOutputType.Table, ObjectName: this.serviceResponse.objectName, ControlName: this.controlName, - PageSize: this.paging === true ? this.pageSize : undefined, + PageSize: this.paging ? this.pageSize : undefined, metadata: this.serviceResponse.metadataXML, UcId: this.controlName, // ToDo: check if this property make sense with the AutoGrow implementation in the SD programming model @@ -258,10 +259,11 @@ export class QueryViewerPivotTableRender { UseRecordsetCache: !this.serviceResponse.useGxQuery, AllowSelection: this.allowSelection, SelectLine: true, - // ToDo: update this value + // PivotTable and Table outputs always have ServerPaging enabled, because client-side paging is no + // longer supported. If in GeneXus Paging = false, we should send the PageSize property with undefined + // so that the PivotTable and the Table know that pagination is not configured. ServerPaging: true, - // ToDo: update this value - ServerPagingPivot: this.paging, + ServerPagingPivot: true, // ToDo: update this value ServerPagingCacheSize: 0, TotalForColumns: this.totalForColumns, @@ -307,24 +309,6 @@ export class QueryViewerPivotTableRender { if (!previousStateSave || !this.rememberLayout) { this.requestInitialPageDataForTable(); } - } else if (!this.paging) { - this.mustWaitInitialPageDataForTable = false; - // Paginado en el cliente - // qv.services.GetDataIfNeeded(qViewer, function (resText, qViewer) { - // // Servicio GetData - // if (resText != qViewer.xml.data) { - // qViewer.xml.data = resText; - // } - // const d3 = new Date(); - // const t3 = d3.getTime(); - // if (!qv.util.anyError(resText)) { - // renderPivotTable(qViewer); - // } else { - // // Error en el servicio GetData - // errMsg = qv.util.getErrorFromText(resText); - // qv.util.renderError(qViewer, errMsg); - // } - // }); } else { this.mustWaitInitialPageDataForTable = false; } @@ -375,17 +359,15 @@ export class QueryViewerPivotTableRender { private requestInitialPageDataForTable() { const dataFieldAndOrder = this.getDataFieldAndOrder(); - const pageDataTableParameters = { PageNumber: 1, - PageSize: this.pageSize, + PageSize: this.paging ? this.pageSize : undefined, RecalculateCantPages: true, DataFieldOrder: dataFieldAndOrder.dataFieldOrder, OrderType: dataFieldAndOrder.orderType, Filters: [], LayoutChange: false, - // ToDo: get the proper QueryViewerId - QueryviewerId: "" + QueryviewerId: this.controlName }; const requestPageDataEvent = new CustomEvent("RequestPageDataForTable", { bubbles: true diff --git a/src/components/query-viewer-pivot-table/query-viewer-pivot.tsx b/src/components/query-viewer-pivot-table/query-viewer-pivot.tsx index cc08a23..e8ce03c 100644 --- a/src/components/query-viewer-pivot-table/query-viewer-pivot.tsx +++ b/src/components/query-viewer-pivot-table/query-viewer-pivot.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -import { Component, h, Method, Prop, Watch } from "@stencil/core"; +import { Component, h, Method, Prop, Watch, Listen } from "@stencil/core"; import { renderJSPivot, OAT, @@ -23,7 +23,9 @@ import { QueryViewerPivotParameters, QueryViewerPivotTable, QueryViewerShowDataLabelsIn, - QueryViewerTotal + QueryViewerTotal, + QueryViewerPageDataForTable, + QueryViewerPageDataForPivot } from "@genexus/reporting-api"; const PIVOT_PAGE = (ucId: string) => `${ucId}_GeneralQuery1_pivot_page`; @@ -37,6 +39,7 @@ export class QueryViewerPivot { private queryViewerContainer: HTMLDivElement; private queryViewerConfiguration: QueryViewerPivotTable = undefined; private shouldReRenderPivot = false; + private pageSizeChangeWasCommittedByTheUser = false; /** * Response Attribute Values @@ -197,6 +200,10 @@ export class QueryViewerPivot { @Prop() readonly pageSize: number; @Watch("pageSize") pageSizeInChange() { + if (this.pageSizeChangeWasCommittedByTheUser) { + this.pageSizeChangeWasCommittedByTheUser = false; + return; + } this.shouldReRenderPivot = true; } @@ -266,6 +273,18 @@ export class QueryViewerPivot { GXPL_QViewerJSMoveColumnToRight: "to right" }; + @Listen("RequestPageDataForPivotTable", { + target: "document", + capture: true + }) + @Listen("RequestPageDataForTable", { target: "document", capture: true }) + handleRequestPageDataForTable(event) { + const pageData: QueryViewerPageDataForTable | QueryViewerPageDataForPivot = + (event as any).parameter; + this.pageSizeChangeWasCommittedByTheUser = + this.pageSize !== pageData.PageSize; + } + /** * Returns an XML on a string variable containing all the data for the attributes loaded in the Pivot Table. */ @@ -330,14 +349,14 @@ export class QueryViewerPivot { ObjectName: this.objectName, ControlName: this.pivotParameters.ControlName, metadata: this.metadata, - PageSize: this.pageSize, + PageSize: this.paging ? this.pageSize : undefined, UcId: this.pivotParameters.UcId, AutoResize: this.autoResize, DisableColumnSort: false, RememberLayout: this.rememberLayout, ShowDataLabelsIn: this.showDataLabelsIn, - ServerPaging: true, - ServerPagingPivot: this.paging, + ServerPaging: true, // PivotTable and Table outputs always have ServerPaging enabled, because client-side paging is no longer supported. If in GeneXus Paging = false, we should send the PageSize property with undefined so that the PivotTable and the Table know that pagination is not configured. + ServerPagingPivot: true, ServerPagingCacheSize: 0, UseRecordsetCache: true, AllowSelection: false, @@ -377,7 +396,7 @@ export class QueryViewerPivot { return (
(this.queryViewerContainer = el)} >
{ + this.pageDataForPivotTable.emit(xml); + }; + /** * @todo Add description */ @@ -74,7 +75,7 @@ export class QueryViewerController { @Watch("objectName") handleObjectNameChange() { - this.shouldRequestData = true; + this.shouldRequestRecordSetCacheAndMetadata = true; } /** @@ -96,23 +97,11 @@ export class QueryViewerController { * If type == PivotTable or Table, if true there is paging, else everything in one table */ @Prop() readonly paging: boolean; - @Watch("paging") - handlePagingChange() { - if (this.type === QueryViewerOutputType.PivotTable) { - this.shouldRequestData = true; - } - } /** * If paging true, number of items for a single page */ @Prop({ mutable: true }) pageSize: number; - @Watch("pageSize") - handlePageSizeChange() { - if (this.type === QueryViewerOutputType.PivotTable) { - this.shouldRequestData = this.paging; - } - } /** * For timeline for remembering layout @@ -129,9 +118,7 @@ export class QueryViewerController { @Prop() readonly queryTitle: string; @Watch("queryTitle") handleQueryTitleChange() { - if (this.type === QueryViewerOutputType.PivotTable) { - this.shouldRequestData = true; - } + this.shouldRequestRecordSetCacheAndMetadata = true; } /** @@ -141,7 +128,7 @@ export class QueryViewerController { @Watch("totalForRows") handleTotalForRowsChange() { if (this.type === QueryViewerOutputType.PivotTable) { - this.shouldRequestData = true; + this.shouldRequestRecordSetCacheAndMetadata = true; } } @@ -152,7 +139,7 @@ export class QueryViewerController { @Watch("totalForColumns") handleTotalForColumnsChange() { if (this.type === QueryViewerOutputType.PivotTable) { - this.shouldRequestData = true; + this.shouldRequestRecordSetCacheAndMetadata = true; } } @@ -210,7 +197,7 @@ export class QueryViewerController { @Watch("showDataLabelsIn") handleShowDataLabelsInChange() { if (this.type === QueryViewerOutputType.PivotTable) { - this.shouldRequestData = true; + this.shouldRequestRecordSetCacheAndMetadata = true; } } /** @@ -258,30 +245,12 @@ export class QueryViewerController { * PivotTable's Method for PivotTable Page Data */ @Method() - async getPageDataForPivotTable( - properties: QueryViewerPageDataForPivot, - paging: boolean, - totalForColumns: QueryViewerTotal, - totalForRows: QueryViewerTotal - ) { - const qvInfo = this.getQueryViewerInformation(this.objectName); - const servicesInfo = this.getServiceContext(); - const callbackWhenSuccess = (xml: string) => { - this.pageDataForPivotTable.emit(xml); - }; - qvInfo.Paging = paging; - this.pageSize = qvInfo.PageSize; - qvInfo.TotalForRows = totalForRows; - qvInfo.TotalForColumns = totalForColumns; - qvInfo.ShowDataLabelsIn = this.showDataLabelsIn; + async getPageDataForPivotTable(pageData: QueryViewerPageDataForPivot) { + if (Number.isInteger(pageData.PageSize)) { + this.pageSize = pageData.PageSize; + } - makeRequestForPivotTable( - qvInfo, - { pageData: properties }, - servicesInfo, - "pivotTablePageData", - callbackWhenSuccess - ); + this.requestPageDataForPivotTable(pageData); } /** @@ -348,21 +317,42 @@ export class QueryViewerController { * Table's Method for Table Page Data */ @Method() - async getPageDataForTable( - properties: QueryViewerPageDataForTable, - paging: boolean, - totalForColumns: QueryViewerTotal, - totalForRows: QueryViewerTotal + async getPageDataForTable(pageData: QueryViewerPageDataForTable) { + if (Number.isInteger(pageData.PageSize)) { + this.pageSize = pageData.PageSize; + } + this.requestPageDataForTable(pageData); + } + + private requestPageDataForPivotTable( + properties: QueryViewerPageDataForPivot ) { const qvInfo = this.getQueryViewerInformation(this.objectName); + + qvInfo.PageSize = properties.PageSize; + qvInfo.TotalForRows = this.totalForRows; + qvInfo.TotalForColumns = this.totalForColumns; + qvInfo.ShowDataLabelsIn = this.showDataLabelsIn; + + const servicesInfo = this.getServiceContext(); + + makeRequestForPivotTable( + qvInfo, + { pageData: properties }, + servicesInfo, + "pivotTablePageData", + this.callbackWhenPageDataForPivotTableSuccess + ); + } + + private requestPageDataForTable(properties: QueryViewerPageDataForTable) { + const qvInfo = this.getQueryViewerInformation(this.objectName); + const servicesInfo = this.getServiceContext(); const callbackWhenSuccess = (xml: string) => { this.pageDataForTable.emit(xml); }; - qvInfo.Paging = paging; - qvInfo.PageSize = this.pageSize; - qvInfo.TotalForRows = totalForRows; - qvInfo.TotalForColumns = totalForColumns; + qvInfo.ShowDataLabelsIn = this.showDataLabelsIn; makeRequestForTable( @@ -405,7 +395,9 @@ export class QueryViewerController { ) { queryViewerObject.ShowDataLabelsIn = this.showDataLabelsIn; queryViewerObject.Paging = this.paging; - queryViewerObject.PageSize = this.pageSize; + queryViewerObject.PageSize = queryViewerObject.Paging + ? this.pageSize + : undefined; } return queryViewerObject; @@ -443,8 +435,10 @@ export class QueryViewerController { this.recordSetCacheOldKey = oldKey; this.queryViewerId = queryViewerBaseProperties?.id; - queryViewerObject.PageSize = this.pageSize; queryViewerObject.Paging = this.paging; + queryViewerObject.PageSize = queryViewerObject.Paging + ? this.pageSize + : undefined; // Emit service response this.queryViewerServiceResponsePivotTable.emit({ MetaData: metadata, @@ -499,9 +493,9 @@ export class QueryViewerController { } componentWillUpdate() { - if (this.shouldRequestData) { + if (this.shouldRequestRecordSetCacheAndMetadata) { this.getPropertiesMetadataAndData(); - this.shouldRequestData = false; + this.shouldRequestRecordSetCacheAndMetadata = false; } } } diff --git a/src/components/query-viewer/controller/readme.md b/src/components/query-viewer/controller/readme.md index 59f8fd6..14ca5ae 100644 --- a/src/components/query-viewer/controller/readme.md +++ b/src/components/query-viewer/controller/readme.md @@ -72,7 +72,7 @@ Type: `Promise` -### `getPageDataForPivotTable(properties: QueryViewerPageDataForPivot, paging: boolean, totalForColumns: QueryViewerTotal, totalForRows: QueryViewerTotal) => Promise` +### `getPageDataForPivotTable(pageData: QueryViewerPageDataForPivot) => Promise` PivotTable's Method for PivotTable Page Data @@ -82,7 +82,7 @@ Type: `Promise` -### `getPageDataForTable(properties: QueryViewerPageDataForTable, paging: boolean, totalForColumns: QueryViewerTotal, totalForRows: QueryViewerTotal) => Promise` +### `getPageDataForTable(pageData: QueryViewerPageDataForTable) => Promise` Table's Method for Table Page Data diff --git a/src/components/query-viewer/query-viewer.tsx b/src/components/query-viewer/query-viewer.tsx index 14923b9..945582c 100644 --- a/src/components/query-viewer/query-viewer.tsx +++ b/src/components/query-viewer/query-viewer.tsx @@ -451,14 +451,12 @@ export class QueryViewer { if (this.controller) { event.stopPropagation(); const pageData: QueryViewerPageDataForPivot = (event as any).parameter; - this.pageSize = pageData.PageSize; - - this.controller.getPageDataForPivotTable( - pageData, - this.paging, - this.totalForColumns, - this.totalForRows - ); + + if (Number.isInteger(pageData.PageSize)) { + this.pageSize = pageData.PageSize; + } + + this.controller.getPageDataForPivotTable(pageData); } } @@ -521,12 +519,13 @@ export class QueryViewer { this.setControllerRef(); if (this.controller) { event.stopPropagation(); - this.controller.getPageDataForTable( - (event as any).parameter, - this.paging, - this.totalForColumns, - this.totalForRows - ); + const pageData: QueryViewerPageDataForTable = (event as any).parameter; + + if (Number.isInteger(pageData.PageSize)) { + this.pageSize = pageData.PageSize; + } + + this.controller.getPageDataForTable(pageData); } } @@ -741,7 +740,6 @@ export class QueryViewer { if (!properties) { return; } - this.type ??= properties.outputType; this.queryTitle ??= properties.title; this.showValues ??= properties.showValues;