diff --git a/package-lock.json b/package-lock.json index 45faa2ed0..2a5d553e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62910,4 +62910,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/paginated-table/src/index.js b/packages/paginated-table/src/index.js index 964ca31e0..60f50592b 100644 --- a/packages/paginated-table/src/index.js +++ b/packages/paginated-table/src/index.js @@ -13,6 +13,7 @@ export { onRowSeclect, setTotalRowCount, customPaginationAction, + onInputSearchQueryChange, } from './table/state/Actions'; export { default as Wrapper, types } from './wrapper/Wrapper'; export { btnTypes } from './wrapper/components/AddFiles'; diff --git a/packages/paginated-table/src/table/ClientController.js b/packages/paginated-table/src/table/ClientController.js index 44d4dec96..83e58a535 100644 --- a/packages/paginated-table/src/table/ClientController.js +++ b/packages/paginated-table/src/table/ClientController.js @@ -26,6 +26,7 @@ const TableController = ((props) => { sortBy, sortOrder, groupBy, + searchQuery, } = table; /** @@ -115,18 +116,38 @@ const TableController = ((props) => { return alphaNumericSort(b, a); }; + // filter rows based on input serch query + const filterBySearchQuery = (rows) => { + if (!searchQuery) return rows; + const query = searchQuery.toLowerCase(); + const viewRows = rows.filter((row) => { + const rowValues = Object.keys(row) + .map((key) => `${row[key]}`.toLowerCase()).join(' '); + return rowValues.includes(query); + }); + return viewRows; + }; + // sort based on row grouping // groupBy column name const sortedRows = (groupBy) ? sortWithRowGrouping(updateRows) : [...updateRows].sort((a, b) => sortRows(a, b)); + + // filter by search Query + const filterRows = filterBySearchQuery(sortedRows); + const startIndex = page * rowsPerPage; const endIndex = startIndex + rowsPerPage; - const displayRows = [...sortedRows].slice(startIndex, endIndex); + const displayRows = [...filterRows].slice(startIndex, endIndex); return ( <> diff --git a/packages/paginated-table/src/table/PaginatedTable.js b/packages/paginated-table/src/table/PaginatedTable.js index 402bdf58b..2b88ae965 100644 --- a/packages/paginated-table/src/table/PaginatedTable.js +++ b/packages/paginated-table/src/table/PaginatedTable.js @@ -15,6 +15,7 @@ import { onColumnViewChange, onRowDelete, onClearCart, + onInputSearchQueryChange, } from './state/Actions'; import { TableContext } from './ContextProvider'; import reducer from './state/Reducer'; @@ -91,6 +92,7 @@ const PaginatedTable = ({ customizeColumnViewChange, customizeDeleteRow, customizeDeleteAllRows, + customizeSearchQueryChange, } = paginationOptions; /** @@ -181,6 +183,15 @@ const PaginatedTable = ({ })); }; + /** + * Filter table rows based on Search query + */ + const handleSeachQueryChange = (value) => { + dispatch(onInputSearchQueryChange({ + searchQuery: value, + })); + }; + /** * A. client table * table data provide by bento app (tblRows) @@ -200,6 +211,7 @@ const PaginatedTable = ({ onColumnViewChange={customizeColumnViewChange || handleColumnViewChange} onDeleteRow={customizeDeleteRow || onDeleteRow} onDeleteAllFiles={customizeDeleteAllRows || onDeleteAllRows} + onSearchQueryChange={customizeSearchQueryChange || handleSeachQueryChange} themeConfig={themeConfig} /> @@ -232,6 +244,7 @@ const PaginatedTable = ({ onColumnViewChange={customizeColumnViewChange || handleColumnViewChange} onDeleteRow={customizeDeleteRow || onDeleteRow} onDeleteAllFiles={customizeDeleteAllRows || onDeleteAllRows} + onSearchQueryChange={customizeSearchQueryChange || handleSeachQueryChange} themeConfig={themeConfig} /> diff --git a/packages/paginated-table/src/table/TableService.js b/packages/paginated-table/src/table/TableService.js index 0b973c94f..7c1195a14 100644 --- a/packages/paginated-table/src/table/TableService.js +++ b/packages/paginated-table/src/table/TableService.js @@ -31,12 +31,14 @@ const getPaginatedQueryVariables = (queryVariables, table) => { rowsPerPage, sortBy, sortOrder, + searchQuery, } = table; const offset = page * rowsPerPage; variables.offset = offset; variables.order_by = sortBy; variables.first = rowsPerPage; variables.sort_direction = sortOrder; + variables.search_query = searchQuery; return variables; }; @@ -54,6 +56,7 @@ export const getTableData = ({ queryVariables, table }) => { sortOrder, query, sortBy, + searchQuery = '', } = table; async function getData() { const paginatedqueryVariable = getPaginatedQueryVariables(queryVariables, table); @@ -78,6 +81,6 @@ export const getTableData = ({ queryVariables, table }) => { // cancel the request before component unmounts controller.abort(); }; - }, [queryVariables, page, rowsPerPage, sortOrder, sortBy]); + }, [queryVariables, page, rowsPerPage, sortOrder, sortBy, searchQuery]); return { tableData }; }; diff --git a/packages/paginated-table/src/table/state/Actions.js b/packages/paginated-table/src/table/state/Actions.js index bd5ddca04..a3055b4b2 100644 --- a/packages/paginated-table/src/table/state/Actions.js +++ b/packages/paginated-table/src/table/state/Actions.js @@ -10,6 +10,7 @@ export const actionTypes = { CUSTOMIZE_PAGINATION_ACTION: 'CUSTOMIZE_PAGINATION_ACTION', ON_ROWS_DELETE: 'ON_ROWS_DELETE', ON_ROW_DELETE: 'ON_ROW_DELETE', + ON_SEARCH_QUERY_CHANGE: 'ON_SEARCH_QUERY_CHANGE', }; export const onColumnViewChange = (columns) => ({ @@ -66,3 +67,8 @@ export const onRowDelete = (value) => ({ type: actionTypes.ON_ROW_DELETE, payload: value, }); + +export const onInputSearchQueryChange = (value) => ({ + type: actionTypes.ON_SEARCH_QUERY_CHANGE, + payload: value, +}); diff --git a/packages/paginated-table/src/table/state/Reducer.js b/packages/paginated-table/src/table/state/Reducer.js index 0e4d02b19..7d501178d 100644 --- a/packages/paginated-table/src/table/state/Reducer.js +++ b/packages/paginated-table/src/table/state/Reducer.js @@ -58,6 +58,11 @@ const reducer = (state, action) => { deletedRows: payload.deleteRows, selectedRows: payload.selectedRows, }; + case actionTypes.ON_SEARCH_QUERY_CHANGE: + return { + ...state, + searchQuery: payload.searchQuery, + }; default: return state; } diff --git a/packages/table/src/ExtendedView.js b/packages/table/src/ExtendedView.js index b007ff956..8c853a8d5 100644 --- a/packages/table/src/ExtendedView.js +++ b/packages/table/src/ExtendedView.js @@ -8,6 +8,7 @@ import CustomPagination from './pagination/CustomPagination'; import ManageColumnView from './toolbar/ManageColumnView'; import defaultTheme from './DefaultThemConfig'; import DownloadButton from './toolbar/DownloadButtonView'; +import SearchInputView from './toolbar/SearchInputView'; const ExtendedView = ({ table, @@ -15,6 +16,7 @@ const ExtendedView = ({ onColumnViewChange, onRowsPerPageChange, onPageChange, + onSearchQueryChange, customTheme, queryVariables, server, @@ -28,12 +30,19 @@ const ExtendedView = ({ download = false, manageViewColumns = false, pagination = false, + searchInput = false, } = extendedViewConfig; const themeConfig = createTheme({ overrides: { ...defaultTheme(), ...customTheme } }); return ( + { (searchInput) && ( + + )} {(download || manageViewColumns) && ( { + const [searchText, setSearchText] = useState(''); + const handleChange = (event) => { + setSearchText(event.target.value); + if (event.key === 'Enter') { + onSearchQueryChange(event.target.value); + } + }; + + const handleClick = () => { + onSearchQueryChange(''); + setSearchText(''); + }; + + // update input search query + useEffect(() => { + if (table?.searchQuery) { + setSearchText(table?.searchQuery); + } + }, [table?.searchQuery]); + + return ( + + + { + (table?.searchQuery) && ( + + + + ) + } + + + + + ), + }} + /> + + ); +}; + +export default SearchInputView;