Fix for attribute values errors (#55)

* Correct a spelling mistake * Modify the pivot re-render process to avoid redundant calls to pageDataForPivotTable
genexuslabs · Feb 27, 2024 · 9a864b6 · 9a864b6
1 parent 3903f68
commit 9a864b6
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 53 deletions.
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
@@ -45,6 +45,11 @@ export class QueryViewerPivotTableRender {
    */
   @Prop() readonly allowSelection: boolean;
 
+  /**
+   * if true will shrink the table
+   */
+  @Prop() readonly autoResize: boolean;
+
   /**
    * Response Attribute Values
    */
@@ -398,9 +403,19 @@ export class QueryViewerPivotTableRender {
             attributeValuesForPivotTableXml={
               this.attributeValuesForPivotTableXml
             }
+            autoResize={this.autoResize}
             calculatePivottableDataXml={this.calculatePivottableDataXml}
             pivotTableDataSyncXml={this.pivotTableDataSyncXml}
             tableType={this.tableType}
+            totalForColumns={this.totalForColumns}
+            totalForRows={this.totalForRows}
+            pivotTitle={this.pivotTitle}
+            showDataLabelsIn={this.showDataLabelsIn}
+            paging={this.paging}
+            pageSize={this.pageSize}
+            rememberLayout={this.rememberLayout}
+            objectName={this.serviceResponse.objectName}
+            metadata={this.serviceResponse.metadataXML}
             ref={el => (this.pivotRef = el)}
           ></gx-query-viewer-pivot>
         </Host>

diff --git a/src/components/query-viewer-pivot-table/query-viewer-pivot.tsx b/src/components/query-viewer-pivot-table/query-viewer-pivot.tsx
@@ -21,7 +21,9 @@ import {
   QueryViewerOutputType,
   QueryViewerPivotCollection,
   QueryViewerPivotParameters,
-  QueryViewerPivotTable
+  QueryViewerPivotTable,
+  QueryViewerShowDataLabelsIn,
+  QueryViewerTotal
 } from "@genexus/reporting-api";
 
 const PIVOT_PAGE = (ucId: string) => `${ucId}_GeneralQuery1_pivot_page`;
@@ -33,23 +35,31 @@ const PIVOT_CONTENT = (ucId: string) => `${ucId}_GeneralQuery1_pivot_content`;
 })
 export class QueryViewerPivot {
   private queryViewerContainer: HTMLDivElement;
-  private qViewer: QueryViewerPivotTable = undefined;
+  private queryViewerConfiguration: QueryViewerPivotTable = undefined;
+  private shouldReRenderPivot = false;
+
   /**
    * Response Attribute Values
    */
   @Prop() readonly attributeValuesForPivotTableXml: string;
   @Watch("attributeValuesForPivotTableXml")
   handleAttributesValuesForPivotTableChange(newValue: string) {
-    setAttributeValuesForPivotTable(this.qViewer.oat_element, newValue);
+    setAttributeValuesForPivotTable(
+      this.queryViewerConfiguration.oat_element,
+      newValue
+    );
   }
 
   /**
    * Response Page Data
    */
   @Prop() readonly pageDataForPivotTable: string;
   @Watch("pageDataForPivotTable")
-  handlePageDataForPivotTableChange(newValue: string) {
-    setPageDataForPivotTable(this.qViewer.oat_element, newValue);
+  handlePageDataForPivotTableChange(newPageData: string) {
+    setPageDataForPivotTable(
+      this.queryViewerConfiguration.oat_element,
+      newPageData
+    );
   }
 
   /**
@@ -58,7 +68,10 @@ export class QueryViewerPivot {
   @Prop() readonly calculatePivottableDataXml: string;
   @Watch("calculatePivottableDataXml")
   handleCalculatePivottableDataChange(newValue: string) {
-    setPivottableDataCalculation(this.qViewer.oat_element, newValue);
+    setPivottableDataCalculation(
+      this.queryViewerConfiguration.oat_element,
+      newValue
+    );
   }
 
   /**
@@ -67,7 +80,10 @@ export class QueryViewerPivot {
   @Prop() readonly pivotTableDataSyncXml: string;
   @Watch("pivotTableDataSyncXml")
   handlePivottableDataSyncChange(newValue: string) {
-    setDataSynForPivotTable(this.qViewer.oat_element, newValue);
+    setDataSynForPivotTable(
+      this.queryViewerConfiguration.oat_element,
+      newValue
+    );
   }
 
   /**
@@ -79,7 +95,7 @@ export class QueryViewerPivot {
     if (!oldValue) {
       return;
     }
-    setPageDataForTable(this.qViewer.oat_element, newValue);
+    setPageDataForTable(this.queryViewerConfiguration.oat_element, newValue);
   }
 
   /**
@@ -88,7 +104,7 @@ export class QueryViewerPivot {
   @Prop() readonly attributeValuesForTableXml: string;
   @Watch("attributeValuesForTableXml")
   handleAttributesValuesForTableChange(newValue: string) {
-    setAttributeForTable(this.qViewer.oat_element, newValue);
+    setAttributeForTable(this.queryViewerConfiguration.oat_element, newValue);
   }
 
   /**
@@ -97,7 +113,16 @@ export class QueryViewerPivot {
   @Prop() readonly tableDataSyncXml: string;
   @Watch("tableDataSyncXml")
   handleTableDataSyncChange(newValue: string) {
-    setDataSynForTable(this.qViewer.oat_element, newValue);
+    setDataSynForTable(this.queryViewerConfiguration.oat_element, newValue);
+  }
+
+  /**
+   * if true will shrink the table
+   */
+  @Prop() readonly autoResize: boolean;
+  @Watch("autoResize")
+  autoResizeChange() {
+    this.shouldReRenderPivot = true;
   }
 
   /**
@@ -110,17 +135,97 @@ export class QueryViewerPivot {
    */
   @Prop() readonly pivotCollection: QueryViewerPivotCollection;
 
-  /**
-   * data
-   */
-  @Prop() readonly data: string;
-
   /**
    * Specifies whether the render output is PivotTable or Table
    */
   @Prop() readonly tableType:
     | QueryViewerOutputType.PivotTable
     | QueryViewerOutputType.Table;
+  @Watch("tableType")
+  tableTypeChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * Determines whether to show a total of all values in the pivot table columns.
+   */
+  @Prop() readonly totalForColumns: QueryViewerTotal;
+  @Watch("totalForColumns")
+  totalForColumnsChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * Determines whether to show a total of all values in the pivot table rows.
+   */
+  @Prop() readonly totalForRows: QueryViewerTotal;
+  @Watch("totalForRows")
+  totalForRowsChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * This attribute lets you define a title for the pivot table.
+   */
+  @Prop() readonly pivotTitle: string;
+  @Watch("pivotTitle")
+  queryTitleChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * It allows to indicate how you want to display the Data elements of the Query object.
+   */
+  @Prop() readonly showDataLabelsIn: QueryViewerShowDataLabelsIn;
+  @Watch("showDataLabelsIn")
+  showDataLabelsInChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * This attribute lets you determinate whether there will be paging buttons.
+   */
+  @Prop() readonly paging: boolean;
+  @Watch("paging")
+  pagingInChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * Enables you to define the number of rows that will be shown when the Paging property is activated
+   */
+  @Prop() readonly pageSize: number;
+  @Watch("pageSize")
+  pageSizeInChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * For timeline for remembering layout
+   */
+  @Prop() readonly rememberLayout: boolean;
+  @Watch("rememberLayout")
+  rememberLayoutChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * Name of the Query or Data provider assigned
+   */
+  @Prop() readonly objectName: string;
+  @Watch("objectName")
+  objectNameChange() {
+    this.shouldReRenderPivot = true;
+  }
+
+  /**
+   * metadata
+   */
+  @Prop() readonly metadata: string;
+  @Watch("metadata")
+  metadataChange() {
+    this.shouldReRenderPivot = true;
+  }
 
   /**
    * QueryViewerTranslations
@@ -166,15 +271,18 @@ export class QueryViewerPivot {
    */
   @Method()
   async getDataXML(serverData: string) {
-    return getDataXML(this.qViewer.oat_element, serverData);
+    return getDataXML(this.queryViewerConfiguration.oat_element, serverData);
   }
 
   /**
    * Returns an XML on a string variable containing the data which is being visualized at the moment (the difference with the GetData() method it's seen on the Pivot Table, data can be different because of filters application).
    */
   @Method()
   async getFilteredDataPivot(serverData: string) {
-    return getFilteredDataXML(this.qViewer.oat_element, serverData);
+    return getFilteredDataXML(
+      this.queryViewerConfiguration.oat_element,
+      serverData
+    );
   }
 
   /**
@@ -209,8 +317,8 @@ export class QueryViewerPivot {
     return moveToLastPage();
   }
 
-  componentDidRender() {
-    this.qViewer = {
+  private renderPivot() {
+    this.queryViewerConfiguration = {
       xml: {
         metadata: this.pivotParameters.metadata
       },
@@ -219,61 +327,53 @@ export class QueryViewerPivot {
         content: PIVOT_CONTENT(this.pivotParameters.UcId),
         container: this.queryViewerContainer,
         RealType: this.tableType,
-        ObjectName: this.pivotParameters.ObjectName,
+        ObjectName: this.objectName,
         ControlName: "Queryviewer1",
-        metadata: this.pivotParameters.metadata,
-        PageSize: this.pivotParameters.PageSize,
+        metadata: this.metadata,
+        PageSize: this.pageSize,
         UcId: this.pivotParameters.UcId,
-        AutoResize: false,
+        AutoResize: this.autoResize,
         DisableColumnSort: false,
-        RememberLayout: true,
-        ShowDataLabelsIn: this.pivotParameters.ShowDataLabelsIn,
+        RememberLayout: this.rememberLayout,
+        ShowDataLabelsIn: this.showDataLabelsIn,
         ServerPaging: true,
-        ServerPagingPivot: this.pivotParameters.ServerPagingPivot,
+        ServerPagingPivot: this.paging,
         ServerPagingCacheSize: 0,
         UseRecordsetCache: true,
         AllowSelection: false,
         SelectLine: true,
-        TotalForColumns: this.pivotParameters.TotalForColumns,
-        TotalForRows: this.pivotParameters.TotalForRows,
-        Title: this.pivotParameters.Title,
+        TotalForColumns: this.totalForColumns,
+        TotalForRows: this.totalForRows,
+        Title: this.pivotTitle,
         data:
           this.tableType === QueryViewerOutputType.Table
             ? this.pageDataForTable
             : undefined
       },
       oat_element: undefined
     };
-    // this.qViewer = {
-    //   xml: { metadata: this.pivotParameters.metadata },
-    //   pivotParams: {
-    //     page: PIVOT_PAGE,
-    //     content: PIVOT_CONTENT,
-    //     container: this.queryViewerContainer,
-    //     ...this.pivotParameters
-    //   },
-    //   oat_element: undefined
-    // };
-
-    // eslint-disable-next-line eqeqeq
-    if (OAT.Loader != undefined) {
+
+    if (OAT.Loader) {
       renderJSPivot(
-        this.qViewer.pivotParams,
+        this.queryViewerConfiguration.pivotParams,
         this.pivotCollection.collection,
         this.QueryViewerTranslations,
-        this.qViewer
+        this.queryViewerConfiguration
       );
-    } else {
-      OAT.Loader.addListener(function () {
-        renderJSPivot(
-          this.qViewer.pivotParams,
-          this.pivotCollection.collection,
-          this.QueryViewerTranslations,
-          this.qViewer
-        );
-      });
     }
   }
+
+  componentDidLoad() {
+    this.renderPivot();
+  }
+
+  componentDidRender() {
+    if (this.shouldReRenderPivot) {
+      this.shouldReRenderPivot = false;
+      this.renderPivot();
+    }
+  }
+
   render() {
     return (
       <div

diff --git a/src/components/query-viewer/query-viewer.tsx b/src/components/query-viewer/query-viewer.tsx
@@ -807,6 +807,7 @@ export class QueryViewer {
       <gx-query-viewer-pivot-render
         allowElementsOrderChange={this.allowElementsOrderChange}
         allowSelection={this.allowSelection}
+        autoResize={this.autoResize}
         cssClass={this.cssClass}
         pivotTitle={this.queryTitle}
         paging={this.paging}