Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ability to reorder fields in DatagridConfigurable and SimpleFormConfigurable #8416

Merged
merged 5 commits into from
Nov 28, 2022
+181 −29
Merged

Add ability to reorder fields in DatagridConfigurable and SimpleFormConfigurable #8416

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe0d1de
Add ability to reorder fields in DatagridConfigurable and SimpleFormC…
fzaninotto Nov 21, 2022
9fa7727
Update screencasts
fzaninotto Nov 22, 2022
f4d7a74
Update Configurable doc
fzaninotto Nov 22, 2022
6e71caf
Misc doc adjustments
fzaninotto Nov 22, 2022
e60fbed
Review
fzaninotto Nov 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions packages/ra-ui-materialui/src/form/SimpleFormConfigurable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,26 @@ export const SimpleFormConfigurable = ({
);

React.useEffect(() => {
// first render, or the preference have been cleared
const inputs = React.Children.map(props.children, (child, index) =>
React.isValidElement(child)
? {
index: String(index),
source: child.props.source,
label:
child.props.source || child.props.label
? child.props.label
: translate(
'ra.configurable.SimpleForm.unlabeled',
{
input: index,
_: `Unlabeled input #%{input}`,
}
),
}
: null
).filter(column => column != null);
if (JSON.stringify(inputs) !== JSON.stringify(availableInputs)) {
if (availableInputs.length === 0) {
slax57 marked this conversation as resolved.
Show resolved Hide resolved
// first render, or the preference have been cleared
const inputs = React.Children.map(props.children, (child, index) =>
React.isValidElement(child)
? {
index: String(index),
source: child.props.source,
label:
child.props.source || child.props.label
? child.props.label
: translate(
'ra.configurable.SimpleForm.unlabeled',
{
input: index,
_: `Unlabeled input #%{input}`,
}
),
}
: null
).filter(column => column != null);
setAvailableInputs(inputs);
setOmit(omit);
}
Expand Down
40 changes: 20 additions & 20 deletions packages/ra-ui-materialui/src/list/datagrid/DatagridConfigurable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,26 +57,26 @@ export const DatagridConfigurable = ({
);

React.useEffect(() => {
// first render, or the preference have been cleared
const columns = React.Children.map(props.children, (child, index) =>
React.isValidElement(child)
? {
index: String(index),
source: child.props.source,
label:
child.props.source || child.props.label
? child.props.label
: translate(
'ra.configurable.Datagrid.unlabeled',
{
column: index,
_: `Unlabeled column #%{column}`,
}
),
}
: null
).filter(column => column != null);
if (JSON.stringify(columns) !== JSON.stringify(availableColumns)) {
if (availableColumns.length === 0) {
// first render, or the preference have been cleared
const columns = React.Children.map(props.children, (child, index) =>
React.isValidElement(child)
? {
index: String(index),
source: child.props.source,
label:
child.props.source || child.props.label
? child.props.label
: translate(
'ra.configurable.Datagrid.unlabeled',
{
column: index,
_: `Unlabeled column #%{column}`,
}
),
}
: null
).filter(column => column != null);
setAvailableColumns(columns);
setOmit(omit);
}
Expand Down
45 changes: 41 additions & 4 deletions packages/ra-ui-materialui/src/list/datagrid/SelectColumnsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down Expand Up @@ -86,6 +85,43 @@ 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 => !omit?.includes(column.source))
slax57 marked this conversation as resolved.
Show resolved Hide resolved
.filter(column => columns.includes(column.index))
.map(column => column.index)
);
};

return (
<>
{isXSmall ? (
Expand Down Expand Up @@ -130,6 +166,7 @@ export const SelectColumnsButton = props => {
index={column.index}
selected={columns.includes(column.index)}
onToggle={handleToggle}
onMove={handleMove}
/>
))}
</Box>
Expand Down
82 changes: 75 additions & 7 deletions packages/ra-ui-materialui/src/preferences/FieldToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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',
},
},
}));
50 changes: 44 additions & 6 deletions packages/ra-ui-materialui/src/preferences/FieldsSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -43,14 +42,52 @@ 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 => !omit?.includes(field.source))
slax57 marked this conversation as resolved.
Show resolved Hide resolved
.filter(field => fields.includes(field.index))
.map(field => field.index)
);
};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fun fact: this method was almost entirely written by gitHub Copilot!


const handleHideAll = () => {
setFields([]);
};
const handleShowAll = () => {
setFields(availableFields.map(field => field.index));
};

return (
<div>
<Box pt={0.5}>
{availableFields.map(field => (
<FieldToggle
key={field.index}
Expand All @@ -59,6 +96,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}>
Expand All @@ -73,7 +111,7 @@ export const FieldsSelector = ({
})}
</Button>
</Box>
</div>
</Box>
);
};

Expand Down
Loading