Merge pull request #8416 from marmelab/configurable-column-order

Add ability to reorder fields in DatagridConfigurable and SimpleFormConfigurable
marmelab · Nov 28, 2022 · 8c1c27b · 8c1c27b
2 parents fd09c81 + e60fbed
commit 8c1c27b
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 29 deletions.
diff --git a/docs/Configurable.md b/docs/Configurable.md
@@ -11,7 +11,9 @@ This component makes another component configurable by the end user. When users
 
 Some react-admin components are already configurable - or rather they have a configurable counterpart:
 
+- [`<DatagridConfigurable>`](./Datagrid.md#configurable)
 - [`<SimpleListConfigurable>`](./SimpleList.md#configurable)
+- [`<SimpleFormConfigurable>`](./SimpleForm.md#configurable)
 - `<PageTitleConfigurable>` - used by the `<Title>` component
 
 ## Usage

diff --git a/docs/Datagrid.md b/docs/Datagrid.md
@@ -800,7 +800,7 @@ const PostList = () => (
 
 ## Showing / Hiding Columns
 
-The [`<SelectColumnsButton>`](./SelectColumnsButton.md) lets users hide or show datagrid columns. 
+The [`<SelectColumnsButton>`](./SelectColumnsButton.md) component lets users hide, show, and reorder datagrid columns. 
 
 ![SelectColumnsButton](./img/SelectColumnsButton.gif)
 

diff --git a/docs/SelectColumnsButton.md b/docs/SelectColumnsButton.md
@@ -9,6 +9,10 @@ This button lets users show or hide columns in a Datagrid. It must be used in co
 
 ![SelectColumnsButton](./img/SelectColumnsButton.gif)
 
+## Usage 
+
+Add the `<SelectColumnsButton>` component to the `<List actions>` prop:
+
 ```jsx
 import {
     DatagridConfigurable,
@@ -36,7 +40,7 @@ const PostList = () => (
 );
 ```
 
-**Note**: `<SelectColumnsButton>` doesn't work with `<Datagrid>` - you must use `<DatagridConfigurable>` instead.
+**Note**: `<SelectColumnsButton>` doesn't work with `<Datagrid>` - you must use [`<DatagridConfigurable>`](./Datagrid.md#configurable) instead.
 
 If you want to add the `<SelectColumnsButton>` to the usual List Actions, use the following snippet:
 

diff --git a/docs/img/DatagridConfigurable.gif b/docs/img/DatagridConfigurable.gif
diff --git a/docs/img/SelectColumnsButton.gif b/docs/img/SelectColumnsButton.gif
diff --git a/packages/ra-ui-materialui/src/form/SimpleFormConfigurable.tsx b/packages/ra-ui-materialui/src/form/SimpleFormConfigurable.tsx
@@ -49,7 +49,7 @@ export const SimpleFormConfigurable = ({
                   }
                 : null
         ).filter(column => column != null);
-        if (JSON.stringify(inputs) !== JSON.stringify(availableInputs)) {
+        if (inputs.length !== availableInputs.length) {
             setAvailableInputs(inputs);
             setOmit(omit);
         }

diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx
@@ -76,7 +76,7 @@ export const DatagridConfigurable = ({
                   }
                 : null
         ).filter(column => column != null);
-        if (JSON.stringify(columns) !== JSON.stringify(availableColumns)) {
+        if (columns.length !== availableColumns.length) {
             setAvailableColumns(columns);
             setOmit(omit);
         }

diff --git a/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx b/packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
@@ -43,10 +43,9 @@ export const SelectColumnsButton = props => {
     const preferenceKey =
         props.preferenceKey || `preferences.${resource}.datagrid`;
     const [anchorEl, setAnchorEl] = React.useState(null);
-    const [availableColumns] = useStore<ConfigurableDatagridColumn[]>(
-        `${preferenceKey}.availableColumns`,
-        []
-    );
+    const [availableColumns, setAvailableColumns] = useStore<
+        ConfigurableDatagridColumn[]
+    >(`${preferenceKey}.availableColumns`, []);
     const [omit] = useStore<string[]>(`${preferenceKey}.omit`, []);
     const [columns, setColumns] = useStore<string[]>(
         `${preferenceKey}.columns`,
@@ -86,6 +85,42 @@ export const SelectColumnsButton = props => {
         }
     };
 
+    const handleMove = (index1, index2) => {
+        const index1Pos = availableColumns.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index1
+        );
+        const index2Pos = availableColumns.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index2
+        );
+        if (index1Pos === -1 || index2Pos === -1) {
+            return;
+        }
+        let newAvailableColumns;
+        if (index1Pos > index2Pos) {
+            newAvailableColumns = [
+                ...availableColumns.slice(0, index2Pos),
+                availableColumns[index1Pos],
+                ...availableColumns.slice(index2Pos, index1Pos),
+                ...availableColumns.slice(index1Pos + 1),
+            ];
+        } else {
+            newAvailableColumns = [
+                ...availableColumns.slice(0, index1Pos),
+                ...availableColumns.slice(index1Pos + 1, index2Pos + 1),
+                availableColumns[index1Pos],
+                ...availableColumns.slice(index2Pos + 1),
+            ];
+        }
+        setAvailableColumns(newAvailableColumns);
+        setColumns(columns =>
+            newAvailableColumns
+                .filter(column => columns.includes(column.index))
+                .map(column => column.index)
+        );
+    };
+
     return (
         <>
             {isXSmall ? (
@@ -130,6 +165,7 @@ export const SelectColumnsButton = props => {
                             index={column.index}
                             selected={columns.includes(column.index)}
                             onToggle={handleToggle}
+                            onMove={handleMove}
                         />
                     ))}
                 </Box>

diff --git a/packages/ra-ui-materialui/src/preferences/FieldToggle.tsx b/packages/ra-ui-materialui/src/preferences/FieldToggle.tsx
@@ -1,26 +1,71 @@
 import * as React from 'react';
 import { FieldTitle, useResourceContext } from 'ra-core';
 import { Switch, Typography } from '@mui/material';
+import DragIcon from '@mui/icons-material/DragIndicator';
+import { styled } from '@mui/material/styles';
 
 /**
  * UI to enable/disable a field
  */
 export const FieldToggle = props => {
-    const { selected, label, onToggle, source, index } = props;
+    const { selected, label, onToggle, onMove, source, index } = props;
     const resource = useResourceContext();
+    const dropIndex = React.useRef<number>(null);
+
+    const handleDrag = event => {
+        // imperative DOM manipulations using the native Drag API
+        const selectedItem = event.target;
+        selectedItem.classList.add('drag-active');
+        const list = selectedItem.parentNode;
+        const x = event.clientX;
+        const y = event.clientY;
+        let dropItem =
+            document.elementFromPoint(x, y) === null
+                ? selectedItem
+                : document.elementFromPoint(x, y);
+        if (dropItem.classList.contains('dragIcon')) {
+            dropItem = dropItem.parentNode;
+        }
+        if (dropItem === selectedItem) {
+            return;
+        }
+        if (list === dropItem.parentNode) {
+            dropIndex.current = dropItem.dataset.index;
+            if (dropItem === selectedItem.nextSibling) {
+                dropItem = dropItem.nextSibling;
+            }
+            list.insertBefore(selectedItem, dropItem);
+        }
+    };
+
+    const handleDragEnd = event => {
+        const selectedItem = event.target;
+        onMove(selectedItem.dataset.index, dropIndex.current);
+        selectedItem.classList.remove('drag-active');
+    };
+
+    const handleDragOver = event => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+    };
+
     return (
-        <div key={source}>
+        <Root
+            key={source}
+            draggable={onMove ? 'true' : undefined}
+            onDrag={onMove ? handleDrag : undefined}
+            onDragEnd={onMove ? handleDragEnd : undefined}
+            onDragOver={onMove ? handleDragOver : undefined}
+            data-index={index}
+        >
             <label htmlFor={`switch_${index}`}>
                 <Switch
                     checked={selected}
                     onChange={onToggle}
                     name={index}
                     id={`switch_${index}`}
                     size="small"
-                    sx={{
-                        mr: 0.5,
-                        ml: -0.5,
-                    }}
+                    sx={{ mr: 0.5, ml: -0.5 }}
                 />
                 <Typography variant="body2" component="span">
                     <FieldTitle
@@ -30,6 +75,29 @@ export const FieldToggle = props => {
                     />
                 </Typography>
             </label>
-        </div>
+            {onMove && (
+                <DragIcon
+                    className="dragIcon"
+                    color="disabled"
+                    fontSize="small"
+                />
+            )}
+        </Root>
     );
 };
+
+const Root = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    '& svg': {
+        cursor: 'move',
+    },
+    '&.drag-active': {
+        background: 'transparent',
+        color: 'transparent',
+        outline: `1px solid ${theme.palette.action.selected}`,
+        '& .MuiSwitch-root, & svg': {
+            visibility: 'hidden',
+        },
+    },
+}));
diff --git a/packages/ra-ui-materialui/src/preferences/FieldsSelector.tsx b/packages/ra-ui-materialui/src/preferences/FieldsSelector.tsx
@@ -13,10 +13,9 @@ export const FieldsSelector = ({
 }) => {
     const translate = useTranslate();
 
-    const [availableFields] = usePreference<SelectableField[]>(
-        availableName,
-        []
-    );
+    const [availableFields, setAvailableFields] = usePreference<
+        SelectableField[]
+    >(availableName, []);
     const [omit] = usePreference('omit', []);
 
     const [fields, setFields] = usePreference(
@@ -43,14 +42,51 @@ export const FieldsSelector = ({
         }
     };
 
+    const handleMove = (index1, index2) => {
+        const index1Pos = availableFields.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index1
+        );
+        const index2Pos = availableFields.findIndex(
+            // eslint-disable-next-line eqeqeq
+            field => field.index == index2
+        );
+        if (index1Pos === -1 || index2Pos === -1) {
+            return;
+        }
+        let newAvailableFields;
+        if (index1Pos > index2Pos) {
+            newAvailableFields = [
+                ...availableFields.slice(0, index2Pos),
+                availableFields[index1Pos],
+                ...availableFields.slice(index2Pos, index1Pos),
+                ...availableFields.slice(index1Pos + 1),
+            ];
+        } else {
+            newAvailableFields = [
+                ...availableFields.slice(0, index1Pos),
+                ...availableFields.slice(index1Pos + 1, index2Pos + 1),
+                availableFields[index1Pos],
+                ...availableFields.slice(index2Pos + 1),
+            ];
+        }
+        setAvailableFields(newAvailableFields);
+        setFields(fields =>
+            newAvailableFields
+                .filter(field => fields.includes(field.index))
+                .map(field => field.index)
+        );
+    };
+
     const handleHideAll = () => {
         setFields([]);
     };
     const handleShowAll = () => {
         setFields(availableFields.map(field => field.index));
     };
+
     return (
-        <div>
+        <Box pt={0.5}>
             {availableFields.map(field => (
                 <FieldToggle
                     key={field.index}
@@ -59,6 +95,7 @@ export const FieldsSelector = ({
                     index={field.index}
                     selected={fields.includes(field.index)}
                     onToggle={handleToggle}
+                    onMove={handleMove}
                 />
             ))}
             <Box display="flex" justifyContent="space-between" mx={-0.5} mt={1}>
@@ -73,7 +110,7 @@ export const FieldsSelector = ({
                     })}
                 </Button>
             </Box>
-        </div>
+        </Box>
     );
 };
 

diff --git a/packages/ra-ui-materialui/src/preferences/Inspector.tsx b/packages/ra-ui-materialui/src/preferences/Inspector.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {
     useStore,
     usePreferencesEditor,
@@ -24,6 +24,7 @@ export const Inspector = () => {
         preferenceKey,
     } = usePreferencesEditor();
 
+    const isDragging = useRef(false);
     const removeItems = useRemoveItemsFromStore(preferenceKey);
     const theme = useTheme();
     const translate = useTranslate();
@@ -52,8 +53,9 @@ export const Inspector = () => {
         // exit if the user drags on anything but the title
         const draggedElement = document?.elementFromPoint(e.clientX, e.clientY);
         if (draggedElement.id !== 'inspector-dialog-title') {
-            return e.preventDefault();
+            return;
         }
+        isDragging.current = true;
         e.dataTransfer.effectAllowed = 'move';
         e.dataTransfer.setData('inspector', '');
         setTimeout(() => {
@@ -65,11 +67,14 @@ export const Inspector = () => {
         });
     };
     const handleDragEnd = e => {
-        setDialogPosition({
-            x: e.clientX - clickPosition.x,
-            y: e.clientY - clickPosition.y,
-        });
-        e.target.classList.remove('hide');
+        if (isDragging.current) {
+            setDialogPosition({
+                x: e.clientX - clickPosition.x,
+                y: e.clientY - clickPosition.y,
+            });
+            e.target.classList.remove('hide');
+            isDragging.current = false;
+        }
     };
 
     // prevent "back to base" animation when the inspector is dropped
@@ -177,7 +182,7 @@ const StyledPaper = styled(Paper, {
     overridesResolver: (props, styles) => styles.root,
 })(({ theme }) => ({
     position: 'fixed',
-    zIndex: theme.zIndex.modal,
+    zIndex: theme.zIndex.modal + 1,
     width: theme.breakpoints.values.sm / 2,
     transition: theme.transitions.create(['height', 'width']),
     '&.hide': {