[HotFix] Add 'Set table page' action (#1880)

* Add action to set table page

* Add support for invoking functions inside component from appUtils.js

frontend/src/Editor/ActionTypes.js

@@ -54,4 +54,16 @@ export const ActionTypes = [
       { name: 'data', type: 'code', default: '{{[]}}' },
     ],
   },
+  {
+    name: 'Set table page',
+    id: 'set-table-page',
+    options: [
+      {
+        name: 'table',
+        type: 'text',
+        default: '',
+      },
+      { name: 'pageIndex', type: 'text', default: '{{1}}' },
+    ],
+  },
 ];

frontend/src/Editor/Box.jsx

@@ -151,6 +151,7 @@ export const Box = function Box({
               exposedVariables={exposedVariables}
               styles={resolvedStyles}
               setExposedVariable={(variable, value) => onComponentOptionChanged(component, variable, value)}
+              registerAction={(actionName, func) => onComponentOptionChanged(component, actionName, func)}
               fireEvent={fireEvent}
               validate={validate}
             ></ComponentToRender>

frontend/src/Editor/Components/Table/Pagination.jsx

@@ -8,8 +8,9 @@ export const Pagination = function Pagination({
   autoPageCount,
   autoPageOptions,
   lastActivePageIndex,
+  pageIndex,
+  setPageIndex,
 }) {
-  const [pageIndex, setPageIndex] = useState(lastActivePageIndex ?? 1);
   const [pageCount, setPageCount] = useState(autoPageCount);
 
   useEffect(() => {

frontend/src/Editor/Components/Table/Table.jsx

@@ -39,6 +39,7 @@ export function Table({
   onComponentOptionsChanged,
   darkMode,
   fireEvent,
+  registerAction,
 }) {
   const color = component.definition.styles.textColor.value;
   const actions = component.definition.properties.actions || { value: [] };
@@ -746,6 +747,14 @@ export function Table({
     }
   );
 
+  useEffect(() => {
+    registerAction('setPage', (targetPageIndex) => {
+      setPaginationInternalPageIndex(targetPageIndex);
+      onPageIndexChanged(targetPageIndex);
+      if (!serverSidePagination && clientSidePagination) gotoPage(targetPageIndex - 1);
+    });
+  }, [serverSidePagination, clientSidePagination]);
+
   useEffect(() => {
     const selectedRowsOriginalData = selectedFlatRows.map((row) => row.original);
     onComponentOptionChanged(component, 'selectedRows', selectedRowsOriginalData);
@@ -778,6 +787,8 @@ export function Table({
     }
   }, [state.columnResizing.isResizingColumn]);
 
+  const [paginationInternalPageIndex, setPaginationInternalPageIndex] = useState(pageIndex ?? 1);
+
   useEffect(() => {
     if (pageCount <= pageIndex) gotoPage(pageCount - 1);
   }, [pageCount]);
@@ -924,6 +935,8 @@ export function Table({
                   autoPageCount={pageCount}
                   autoPageOptions={pageOptions}
                   onPageIndexChanged={onPageIndexChanged}
+                  pageIndex={paginationInternalPageIndex}
+                  setPageIndex={setPaginationInternalPageIndex}
                 />
               )}
             </div>

frontend/src/Editor/Components/components.js

@@ -63,7 +63,7 @@ export const componentTypes = [
       selectedRow: {},
       changeSet: {},
       dataUpdates: [],
-      pageIndex: 0,
+      pageIndex: 1,
       searchText: '',
       selectedRows: [],
     },

frontend/src/Editor/Inspector/EventManager.jsx

@@ -59,18 +59,17 @@ export const EventManager = ({
       };
     });
 
-  function getModalOptions() {
-    let modalOptions = [];
+  function getComponentOptions(componentType) {
+    let componentOptions = [];
     Object.keys(components || {}).forEach((key) => {
-      if (components[key].component.component === 'Modal') {
-        modalOptions.push({
+      if (components[key].component.component === componentType) {
+        componentOptions.push({
           name: components[key].component.name,
-          value: key,
+          value: { name: components[key].component.name, id: key },
         });
       }
     });
-
-    return modalOptions;
+    return componentOptions;
   }
 
   function getAllApps() {
@@ -207,7 +206,7 @@ export const EventManager = ({
                 <div className="col-3 p-2">Modal</div>
                 <div className="col-9">
                   <SelectSearch
-                    options={getModalOptions()}
+                    options={getComponentOptions('Modal')}
                     value={event.model}
                     search={true}
                     onChange={(value) => {
@@ -225,7 +224,7 @@ export const EventManager = ({
                 <div className="col-3 p-2">Modal</div>
                 <div className="col-9">
                   <SelectSearch
-                    options={getModalOptions()}
+                    options={getComponentOptions('Modal')}
                     value={event.model}
                     search={true}
                     onChange={(value) => {
@@ -340,6 +339,37 @@ export const EventManager = ({
                 </div>
               </>
             )}
+            {event.actionId === 'set-table-page' && (
+              <>
+                <div className="row">
+                  <div className="col-3 p-2">Table</div>
+                  <div className="col-9">
+                    <SelectSearch
+                      options={getComponentOptions('Table')}
+                      value={event.table}
+                      search={true}
+                      onChange={(value) => {
+                        handlerChanged(index, 'table', value);
+                      }}
+                      filterOptions={fuzzySearch}
+                      placeholder="Select.."
+                    />
+                  </div>
+                </div>
+                <div className="row mt-3">
+                  <div className="col-3 p-2">Page index</div>
+                  <div className="col-9">
+                    <CodeHinter
+                      currentState={currentState}
+                      initialValue={event.pageIndex ?? '{{1}}'}
+                      onChange={(value) => handlerChanged(index, 'pageIndex', value)}
+                      enablePreview={true}
+                      usePortalEditor={false}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
           </div>
         </Popover.Content>
       </Popover>

frontend/src/_helpers/appUtils.js

@@ -104,7 +104,8 @@ async function copyToClipboard(text) {
   }
 }
 
-function showModal(_ref, modalId, show) {
+function showModal(_ref, modal, show) {
+  const modalId = modal.id;
   if (_.isEmpty(modalId)) {
     console.log('No modal is associated with this event.');
     return Promise.resolve();
@@ -227,6 +228,10 @@ function executeAction(_ref, event, mode) {
         generateFile(fileName, csv);
         return Promise.resolve();
       }
+
+      case 'set-table-page': {
+        setTablePageIndex(_ref, event.table, event.pageIndex);
+      }
     }
   }
 }
@@ -669,6 +674,18 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined, mode)
   });
 }
 
+function setTablePageIndex(_ref, table, index) {
+  if (_.isEmpty(table.id)) {
+    console.log('No table is associated with this event.');
+    return Promise.resolve();
+  }
+
+  const tableMeta = _ref.state.currentState.components[table.name];
+  const newPageIndex = resolveReferences(index, _ref.state.currentState);
+  tableMeta.setPage(newPageIndex);
+  return Promise.resolve();
+}
+
 export function renderTooltip({ props, text }) {
   return (
     <Tooltip id="button-tooltip" {...props}>