fix: modify pagination from properties pane when at end of table (#398)

deneb-viz · Dec 5, 2023 · 713329b · 713329b
1 parent 6c45b4f
commit 713329b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/src/features/debug-area/components/data-table-status-bar.tsx b/src/features/debug-area/components/data-table-status-bar.tsx
@@ -5,7 +5,7 @@ import {
     SelectProps,
     useId
 } from '@fluentui/react-components';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { PaginationComponentProps } from 'react-data-table-component';
 import { shallow } from 'zustand/shallow';
 
@@ -22,19 +22,27 @@ import { setVisualProperty } from '../../commands';
  * Displays at the footer of the data table, and used to control pagination
  * and other options.
  */
+// eslint-disable-next-line max-lines-per-function
 export const DataTableStatusBar: React.FC<PaginationComponentProps> = ({
     rowCount,
+    rowsPerPage,
     onChangePage,
     onChangeRowsPerPage,
     currentPage
 }) => {
-    const { rowsPerPage, mode } = store(
+    const { rowsPerPageSetting, mode } = store(
         (state) => ({
-            rowsPerPage: state.visualSettings.editor.debugTableRowsPerPage,
+            rowsPerPageSetting:
+                state.visualSettings.editor.debugTableRowsPerPage,
             mode: state.editorPreviewAreaSelectedPivot
         }),
         shallow
     );
+    useEffect(() => {
+        if (rowsPerPage !== rowsPerPageSetting) {
+            onChangeRowsPerPage(rowsPerPageSetting, currentPage);
+        }
+    }, [rowsPerPage, rowsPerPageSetting]);
     const handleFirstPageButtonClick = () => {
         onChangePage(1, rowCount);
     };
@@ -45,16 +53,16 @@ export const DataTableStatusBar: React.FC<PaginationComponentProps> = ({
         onChangePage(currentPage + 1, rowCount);
     };
     const handleLastPageButtonClick = () => {
-        onChangePage(Math.ceil(rowCount / rowsPerPage), rowCount);
+        onChangePage(Math.ceil(rowCount / rowsPerPageSetting), rowCount);
     };
     const handleChangeRowsPerPage: SelectProps['onChange'] = (event, data) => {
         const value = Number(data.value);
         onChangeRowsPerPage(value, currentPage);
         setVisualProperty([{ name: 'debugTableRowsPerPage', value }], 'editor');
     };
-    const numPages = getNumberOfPages(rowCount, rowsPerPage);
-    const lastIndex = currentPage * rowsPerPage;
-    const firstIndex = lastIndex - rowsPerPage + 1;
+    const numPages = getNumberOfPages(rowCount, rowsPerPageSetting);
+    const lastIndex = currentPage * rowsPerPageSetting;
+    const firstIndex = lastIndex - rowsPerPageSetting + 1;
     const range =
         currentPage === numPages
             ? `${firstIndex}-${rowCount} of ${rowCount}`
@@ -84,7 +92,7 @@ export const DataTableStatusBar: React.FC<PaginationComponentProps> = ({
                     <div>
                         <Select
                             id={rowsPerPageId}
-                            value={rowsPerPage}
+                            value={rowsPerPageSetting}
                             onChange={handleChangeRowsPerPage}
                             size='small'
                         >

diff --git a/src/properties/editor-settings.ts b/src/properties/editor-settings.ts
@@ -115,7 +115,6 @@ export default class EditorSettings extends SettingsBase {
             value: `${this.debugTableRowsPerPage}`,
             items: getPageRowCountEnum()
         };
-        console.log('DATA_ROW_COUNT_SLICE', TABLE_ROW_COUNT_SLICE);
         return {
             displayName: getI18nValue(OBJECT_DEF.displayNameKey),
             description: getI18nValue(OBJECT_DEF.descriptionKey),

diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson
@@ -84,7 +84,7 @@
     "Objects_Editor_ShowViewportMarker_Description": "When enabled, this will show the boundary (viewport) of your visual prior to opening the editor. You can use this to determine if your design will fit within the boundary\n\n𝗡𝗢𝗧𝗘: is not possible to programmatically resize the viewport, so if you wish to change the size, you'll need to return to report view, modify and then re-open the Advanced Editor.",
     "Objects_Editor_PreviewScrollbars": "Show scrollbars on overflow",
     "Objects_Editor_PreviewScrollbars_Description": "If this is set, scrollbars will be displayed in the Preview Area if the visual content overflows the container. This can be used to further erify how your visual will render on the canvas.",
-    "Objects_Editor_DebugTableRowsPerPage": "# of rows per table page",
+    "Objects_Editor_DebugTableRowsPerPage": "Rows per page (Data/Signals)",
     "Objects_Editor_DebugTableRowsPerPage_Description": "The number of rows to show in the Data and Signals tables in the debug pane.",
     "Objects_Theme": "Report theme integration",
     "Objects_Theme_Group_Ordinal": "Ordinal scales",