Merge pull request #172 from brunomous/feature/crud-table-checkboxes

Adjustments on Crud Module
conceptadev · Aug 15, 2024 · b1617b0 · b1617b0
2 parents e0672f0 + 5273f79
commit b1617b0
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 25 deletions.
diff --git a/packages/react-material-ui/src/components/submodules/Table/index.tsx b/packages/react-material-ui/src/components/submodules/Table/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, ReactNode } from 'react';
 
 import type {
   CustomTableCell,
@@ -28,13 +28,13 @@ import AddIcon from '@mui/icons-material/Add';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import get from 'lodash/get';
 
-import Table from '../../../components/Table';
+import Table from '../../Table';
 import { generateTableTheme } from './constants';
-import { TableRootProps } from '../../../components/Table/TableRoot';
-import { TableProps } from '../../../components/Table/Table';
-import FilterSubmodule from '../../../components/submodules/Filter';
-import { Search } from '../../../components/Table/types';
-import { UpdateSearch } from '../../../components/Table/useTable';
+import { TableRootProps } from '../../Table/TableRoot';
+import { TableProps } from '../../Table/Table';
+import FilterSubmodule from '../../submodules/Filter';
+import { Search } from '../../Table/types';
+import { UpdateSearch } from '../../Table/useTable';
 import { useCrudRoot } from '../../../modules/crud/useCrudRoot';
 import { isMobile } from '../../../utils/isMobile';
 import MobileRowModal from './MobileRowModal';
@@ -110,6 +110,11 @@ export interface TableSubmoduleProps {
   filterCacheKey?: string;
   tableCacheKey?: string;
   cacheApiPath?: string;
+  hasCheckboxes?: boolean;
+  addButtonStartIcon?: ReactNode;
+  addButtonEndIcon?: ReactNode;
+  addButtonContent?: ReactNode;
+  additionalFilterRowContent?: ReactNode;
 }
 
 const TableSubmodule = (props: TableSubmoduleProps) => {
@@ -269,6 +274,7 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
               cacheApiPath={props.cacheApiPath}
             />
           )}
+
           <Box
             sx={{
               display: 'flex',
@@ -286,20 +292,24 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
                 cacheApiPath={props.cacheApiPath}
               />
             )}
-            {!props.hideAddButton && (
-              <Button
-                variant="contained"
-                onClick={props.onAddNew}
-                startIcon={<AddIcon />}
-                sx={{
-                  textTransform: 'capitalize',
-                  textWrap: 'nowrap',
-                  marginLeft: 2,
-                }}
-              >
-                Add new
-              </Button>
-            )}
+            <Box display="flex" alignItems="center" justifyContent="flex-end">
+              {props.additionalFilterRowContent}
+              {!props.hideAddButton && (
+                <Button
+                  variant="contained"
+                  onClick={props.onAddNew}
+                  startIcon={props.addButtonStartIcon || <AddIcon />}
+                  endIcon={props.addButtonEndIcon}
+                  sx={{
+                    textTransform: 'capitalize',
+                    textWrap: 'nowrap',
+                    marginLeft: 2,
+                  }}
+                >
+                  {props.addButtonContent || 'Add new'}
+                </Button>
+              )}
+            </Box>
           </Box>
         </Box>
 
@@ -312,6 +322,7 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
           >
             <TableHead>
               <TableRow sx={tableTheme.tableHeaderRow}>
+                {props.hasCheckboxes && <Table.HeaderCheckbox />}
                 <Table.HeaderCells
                   renderCell={(cell: HeaderProps) => (
                     <Table.HeaderCell
@@ -337,24 +348,28 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
                 </TableRow>
               )}
               <Table.BodyRows
-                renderRow={(row) => (
+                renderRow={(row, labelId) => (
                   <Table.BodyRow
+                    key={row.id}
                     row={row}
-                    hasCheckboxes={false}
-                    hover={false}
+                    hasCheckboxes={props.hasCheckboxes}
                     sx={tableTheme.tableBodyRow}
                     {...(isMobile &&
                       props.allowModalPreview && {
                         onClick: () => setMobileCurrentRow(row),
                       })}
                   >
+                    {props.hasCheckboxes && (
+                      <Table.BodyCheckboxes row={row} labelId={labelId} />
+                    )}
                     <Table.BodyCell row={row} sx={tableTheme.tableBodyCell} />
                   </Table.BodyRow>
                 )}
               />
             </TableBody>
           </Table.Table>
         </TableContainer>
+
         {props.paginationStyle === 'numeric' ? (
           <Box mt={2}>
             <Table.PaginationNumbers />
@@ -387,6 +402,7 @@ const TableSubmodule = (props: TableSubmoduleProps) => {
             })}
           />
         )}
+
         {props.allowModalPreview && isMobile && (
           <MobileRowModal
             currentRow={mobileCurrentRow}

diff --git a/packages/react-material-ui/src/modules/crud/README.md b/packages/react-material-ui/src/modules/crud/README.md
@@ -380,3 +380,57 @@ The Filter and Table features inside the module can be saved in localStorage by
 The `filterCacheKey` and `tableCacheKey` are optional props that identify the specific page or context where the CrudModule is being rendered and will serve to fetch the right storage or cache entry when the page is reloaded. The default for those props is the current route path.
 
 `cacheApiPath` identifies the API route that will save the filter and table settings as cache. This is optional, and not passing it disables the API integration and the settings are saved only on localStorage.
+
+## Rendering a checkbox column
+
+The Table component has a feature for selecting one or all rows displayed in the page, but this is not enabled by default. The `enableTableRowSelection` is used for this purpose.
+
+```jsx
+<CrudModule
+  tableProps={{
+    tableSchema: [
+      { id: 'id', label: 'ID' },
+      { id: 'email', label: 'Email' },
+      { id: 'active', label: 'Status' },
+    ],
+    filters: [
+      {
+        id: 'email',
+        label: 'Email',
+        type: 'text',
+        operator: 'contL',
+        columns: 3,
+      },
+    ],
+  }}
+  enableRowSelection
+/>
+```
+
+With that, checkbox cells are rendered in the first column (left to right) of the Table and batch operations can be performed in the rows.
+
+## Rendering other nodes next to default Add button
+
+Other components can be rendered to the left of the Add button by passing them via the `additionalFilterRowContent` prop, as follows:
+
+```jsx
+<CrudModule
+  tableProps={{
+    tableSchema: [
+      { id: 'id', label: 'ID' },
+      { id: 'email', label: 'Email' },
+      { id: 'active', label: 'Status' },
+    ],
+    filters: [
+      {
+        id: 'email',
+        label: 'Email',
+        type: 'text',
+        operator: 'contL',
+        columns: 3,
+      },
+    ],
+  }}
+  additionalFilterRowContent={<button>Custom Button</button>}
+/>
+```
diff --git a/packages/react-material-ui/src/modules/crud/index.tsx b/packages/react-material-ui/src/modules/crud/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 
 import type { RJSFSchema, UiSchema, CustomValidator } from '@rjsf/utils';
 
@@ -71,6 +71,11 @@ export interface ModuleProps {
   filterCacheKey?: string;
   tableCacheKey?: string;
   cacheApiPath?: string;
+  enableTableRowSelection?: boolean;
+  addButtonStartIcon?: ReactNode;
+  addButtonEndIcon?: ReactNode;
+  addButtonContent?: ReactNode;
+  additionalFilterRowContent?: ReactNode;
 }
 
 const CrudModule = (props: ModuleProps) => {
@@ -166,6 +171,11 @@ const CrudModule = (props: ModuleProps) => {
           filterCacheKey={props.filterCacheKey}
           tableCacheKey={props.tableCacheKey}
           cacheApiPath={props.cacheApiPath}
+          hasCheckboxes={props.enableTableRowSelection}
+          addButtonStartIcon={props.addButtonStartIcon}
+          addButtonEndIcon={props.addButtonEndIcon}
+          addButtonContent={props.addButtonContent}
+          additionalFilterRowContent={props.additionalFilterRowContent}
           {...useTableReturn}
           {...tableSubmoduleProps}
         />