diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js index 48528fbc5d..ecd238ed76 100644 --- a/frontend/src/Editor/ActionTypes.js +++ b/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}}' }, + ], + }, ]; diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx index 1b6cb51333..4fed527617 100644 --- a/frontend/src/Editor/Box.jsx +++ b/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} > diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx index dcf343ba25..c545c61eb0 100644 --- a/frontend/src/Editor/Components/Table/Pagination.jsx +++ b/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(() => { diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index 5432c429df..ae8cd49855 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/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} /> )} diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js index 09112ac0ac..2038df7d51 100644 --- a/frontend/src/Editor/Components/components.js +++ b/frontend/src/Editor/Components/components.js @@ -63,7 +63,7 @@ export const componentTypes = [ selectedRow: {}, changeSet: {}, dataUpdates: [], - pageIndex: 0, + pageIndex: 1, searchText: '', selectedRows: [], }, diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx index a5ce263fd6..9acf254b06 100644 --- a/frontend/src/Editor/Inspector/EventManager.jsx +++ b/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 = ({
Modal
{ @@ -225,7 +224,7 @@ export const EventManager = ({
Modal
{ @@ -340,6 +339,37 @@ export const EventManager = ({
)} + {event.actionId === 'set-table-page' && ( + <> +
+
Table
+
+ { + handlerChanged(index, 'table', value); + }} + filterOptions={fuzzySearch} + placeholder="Select.." + /> +
+
+
+
Page index
+
+ handlerChanged(index, 'pageIndex', value)} + enablePreview={true} + usePortalEditor={false} + /> +
+
+ + )}
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index 8417a2253e..add4e740ac 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/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 (