From c55cad0f249f3ab1a2eb0b43cc6b48c97e0b35dd Mon Sep 17 00:00:00 2001 From: Navaneeth Pk Date: Tue, 7 Sep 2021 11:01:10 +0530 Subject: [PATCH] Show/hide table buttons (#682) * Show/hide table buttons * clientSide pagination * Remove unwanted comment Co-authored-by: arpitnath --- .../Editor/Components/Table/Pagination.jsx | 14 +- .../src/Editor/Components/Table/Table.jsx | 143 ++++++++++-------- frontend/src/Editor/Components/components.js | 8 +- .../src/Editor/Inspector/Components/Table.jsx | 5 + .../src/Editor/Inspector/Elements/Toggle.jsx | 4 +- 5 files changed, 102 insertions(+), 72 deletions(-) diff --git a/frontend/src/Editor/Components/Table/Pagination.jsx b/frontend/src/Editor/Components/Table/Pagination.jsx index 445f452620..60091289dc 100644 --- a/frontend/src/Editor/Components/Table/Pagination.jsx +++ b/frontend/src/Editor/Components/Table/Pagination.jsx @@ -6,15 +6,25 @@ export const Pagination = function Pagination({ autoGotoPage, autoCanNextPage, autoPageCount, - autoPageOptions + autoPageOptions, + lastActivePageIndex }) { - const [pageIndex, setPageIndex] = useState(1); + const [pageIndex, setPageIndex] = useState(lastActivePageIndex ?? 1); const [pageCount, setPageCount] = useState(autoPageCount); useEffect(() => { setPageCount(autoPageCount); }, [autoPageCount]); + useEffect(() => { + + if(serverSide && lastActivePageIndex > 0) { + setPageCount(lastActivePageIndex) + } else if(serverSide || lastActivePageIndex === 0) { + setPageIndex(1) + } + }, [serverSide, lastActivePageIndex ]) + function gotoPage(page) { setPageIndex(page); onPageIndexChanged(page); diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index 0724d41620..c25adeffde 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -47,6 +47,15 @@ export function Table({ const displaySearchBoxProperty = component.definition.properties.displaySearchBox; const displaySearchBox = displaySearchBoxProperty ? displaySearchBoxProperty.value : true; + const showDownloadButtonProperty = component.definition.properties.showDownloadButton?.value; + const showDownloadButton = resolveWidgetFieldValue(showDownloadButtonProperty, currentState) ?? true; // default is true for backward compatibility + + const showFilterButtonProperty = component.definition.properties.showFilterButton?.value; + const showFilterButton = resolveWidgetFieldValue(showFilterButtonProperty, currentState) ?? true; // default is true for backward compatibility + + const clientSidePaginationProperty = component.definition.properties.clientSidePagination?.value; + const clientSidePagination = resolveWidgetFieldValue(clientSidePaginationProperty, currentState) ?? !serverSidePagination; // default is true for backward compatibility + const tableTypeProperty = component.definition.styles.tableType; let tableType = tableTypeProperty ? tableTypeProperty.value : 'table-bordered'; tableType = tableType === '' ? 'table-bordered' : tableType; @@ -584,7 +593,7 @@ export function Table({ columns, data, defaultColumn, - initialState: { pageIndex: 0, pageSize: serverSidePagination ? -1 : 10}, // pageSize should be unset if server-side pagination is enabled + initialState: { pageIndex: 0, pageSize: -1}, pageCount: -1, manualPagination: false, getExportFileBlob @@ -598,6 +607,18 @@ export function Table({ useExportData ); + + + React.useEffect(() => { + if(serverSidePagination || !clientSidePagination) { + setPageSize(-1) + } + if(!serverSidePagination && clientSidePagination) { + setPageSize(10) + } + + },[clientSidePagination, serverSidePagination]) + useEffect(() => { const pageData = page.map(row => row.original); const currentData = rows.map(row => row.original);; @@ -669,36 +690,15 @@ export function Table({ onClick={event => {event.stopPropagation(); onComponentClick(id, component)}} > {/* Show top bar unless search box is disabled and server pagination is enabled */} - {(!(!displaySearchBox && serverSidePagination) && + {displaySearchBox &&
- {!serverSidePagination && -
- Show -
- -
- entries -
- } {displaySearchBox &&
}
- )} + }
@@ -768,53 +768,62 @@ export function Table({ )} -
-
-
- -
- - {Object.keys(componentState.changeSet || {}).length > 0 && ( + {(clientSidePagination || serverSidePagination || Object.keys(componentState.changeSet || {}).length > 0 || showFilterButton || showDownloadButton) && +
+
- - -
- )} - -
- showFilters()}> - - {filters.length > 0 && - + {(clientSidePagination || serverSidePagination) && + } - - exportData('csv', true)} - > - - +
+ + {Object.keys(componentState.changeSet || {}).length > 0 && ( +
+ + +
+ )} + +
+ {showFilterButton && + showFilters()}> + + {filters.length > 0 && + + } + + } + {showDownloadButton && + exportData('csv', true)} + > + + + } +
-
+ } {isFiltersVisible && (
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js index 74a7c78f11..707ea102f7 100644 --- a/frontend/src/Editor/Components/components.js +++ b/frontend/src/Editor/Components/components.js @@ -10,10 +10,13 @@ export const componentTypes = [ loadingState: { type: 'code', displayName: 'Loading state' }, columns: { type: 'array', displayName: 'Table Columns' }, serverSidePagination: { type: 'toggle', displayName: 'Server-side pagination' }, + clientSidePagination: { type: 'toggle', displayName: 'Client-side pagination' }, serverSideSearch: { type: 'toggle', displayName: 'Server-side search' }, actionButtonBackgroundColor: { type: 'color', displayName: 'Background color' }, actionButtonTextColor: { type: 'color', displayName: 'Text color' }, - displaySearchBox: { type: 'toggle', displayName: 'Display search box' }, + displaySearchBox: { type: 'toggle', displayName: 'Show search box' }, + showDownloadButton: { type: 'toggle', displayName: 'Show download button' }, + showFilterButton: { type: 'toggle', displayName: 'Show filter button' }, }, others: { showOnDesktop: { type: 'toggle', displayName: 'Show on desktop? ' }, @@ -62,7 +65,10 @@ export const componentTypes = [ "{{ [ \n\t\t{ id: 1, name: 'Sarah', email: 'sarah@example.com'}, \n\t\t{ id: 2, name: 'Lisa', email: 'lisa@example.com'}, \n\t\t{ id: 3, name: 'Sam', email: 'sam@example.com'}, \n\t\t{ id: 4, name: 'Jon', email: 'jon@example.com'} \n] }}", }, serverSidePagination: { value: false }, + clientSidePagination: { value: true }, displaySearchBox: { value: true }, + showDownloadButton: { value: true }, + showFilterButton: { value: true }, columns: { value: [ { name: 'id', id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737' }, diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx index 05e5fd904a..1298befd88 100644 --- a/frontend/src/Editor/Inspector/Components/Table.jsx +++ b/frontend/src/Editor/Inspector/Components/Table.jsx @@ -523,6 +523,7 @@ class Table extends React.Component { if (!component.component.definition.properties.displaySearchBox) paramUpdated({ name: 'displaySearchBox' }, 'value', true, 'properties'); const displaySearchBox = component.component.definition.properties.displaySearchBox.value; + const serverSidePagination = component.component.definition.properties.serverSidePagination?.value ?? false; return (
@@ -589,8 +590,12 @@ class Table extends React.Component {
{renderElement(component, componentMeta, paramUpdated, dataQueries, 'serverSidePagination', 'properties', currentState)} + {!serverSidePagination && renderElement(component, componentMeta, paramUpdated, dataQueries, 'clientSidePagination', 'properties', currentState)} {renderElement(component, componentMeta, paramUpdated, dataQueries, 'displaySearchBox', 'properties', currentState)} {displaySearchBox && renderElement(component, componentMeta, paramUpdated, dataQueries, 'serverSideSearch', 'properties', currentState)} + {renderElement(component, componentMeta, paramUpdated, dataQueries, 'showDownloadButton', 'properties', currentState)} + {renderElement(component, componentMeta, paramUpdated, dataQueries, 'showFilterButton', 'properties', currentState)} + {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))}
Events
diff --git a/frontend/src/Editor/Inspector/Elements/Toggle.jsx b/frontend/src/Editor/Inspector/Elements/Toggle.jsx index 03ca68d021..299d23f8ef 100644 --- a/frontend/src/Editor/Inspector/Elements/Toggle.jsx +++ b/frontend/src/Editor/Inspector/Elements/Toggle.jsx @@ -4,7 +4,7 @@ import { ToolTip } from './Components/ToolTip'; export const Toggle = ({ param, definition, onChange, paramType, componentMeta }) => { - const value = definition ? definition.value : false; + const value = definition?.value !== false ?? false; const paramMeta = componentMeta[paramType][param.name]; const displayName = paramMeta.displayName || param.name; @@ -21,4 +21,4 @@ export const Toggle = ({
); -}; +}; \ No newline at end of file