From 7fb8860151125b1e18bdd76d81dd290ecfed2f13 Mon Sep 17 00:00:00 2001 From: Anish Roy <62830866+iamanishroy@users.noreply.github.com> Date: Wed, 23 Nov 2022 17:59:24 +0000 Subject: [PATCH 1/2] worked on issue #562 --- src/components/TableToolbar/ManageColumns.tsx | 200 ++++++++++++++++++ src/components/TableToolbar/TableToolbar.tsx | 4 +- 2 files changed, 203 insertions(+), 1 deletion(-) create mode 100644 src/components/TableToolbar/ManageColumns.tsx diff --git a/src/components/TableToolbar/ManageColumns.tsx b/src/components/TableToolbar/ManageColumns.tsx new file mode 100644 index 00000000..c67e689b --- /dev/null +++ b/src/components/TableToolbar/ManageColumns.tsx @@ -0,0 +1,200 @@ +import { useEffect, useRef, useMemo, useState } from "react"; +import { useAtom, useSetAtom } from "jotai"; +import { isEqual } from "lodash-es"; +import { colord } from "colord"; +import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; + +import { Box, AutocompleteProps, Theme } from "@mui/material"; +import VisibilityIcon from "@mui/icons-material/VisibilityOutlined"; +// import VisibilityOffIcon from "@mui/icons-material/VisibilityOffOutlined"; +import ViewColumnOutlinedIcon from "@mui/icons-material/ViewColumnOutlined"; +import IconSlash from "@src/components/IconSlash"; +import DragIndicatorOutlinedIcon from "@mui/icons-material/DragIndicatorOutlined"; + +import ColumnSelect, { ColumnItem } from "@src/components/Table/ColumnSelect"; +import ButtonWithStatus from "@src/components/ButtonWithStatus"; + +import { + globalScope, + userSettingsAtom, + updateUserSettingsAtom, +} from "@src/atoms/globalScope"; +import { + tableScope, + tableIdAtom, + updateColumnAtom, +} from "@src/atoms/tableScope"; +import { formatSubTableName } from "@src/utils/table"; + +export default function ManageColumns2() { + const buttonRef = useRef(null); + + const [userSettings] = useAtom(userSettingsAtom, globalScope); + const [tableId] = useAtom(tableIdAtom, tableScope); + + const [open, setOpen] = useState(false); + + // Store local selection here + // Initialize hiddenFields from user doc + const userDocHiddenFields = useMemo( + () => + userSettings.tables?.[formatSubTableName(tableId)]?.hiddenFields ?? [], + [userSettings.tables, tableId] + ); + + const [hiddenFields, setHiddenFields] = + useState(userDocHiddenFields); + useEffect(() => { + setHiddenFields(userDocHiddenFields); + }, [userDocHiddenFields]); + + // const tableColumns = tableColumnsOrdered.map(({ key, name }) => ({ + // value: key, + // label: name, + // })); + + // Save when MultiSelect closes + const [updateUserSettings] = useAtom(updateUserSettingsAtom, globalScope); + const handleSave = () => { + // Only update if there were any changes because it’s slow to update + if (!isEqual(hiddenFields, userDocHiddenFields) && updateUserSettings) { + updateUserSettings({ + tables: { [formatSubTableName(tableId)]: { hiddenFields } }, + }); + } + + setOpen(false); + }; + + const renderOption: AutocompleteProps< + any, + true, + false, + any + >["renderOption"] = (props, option, { selected }) => { + const slashColor = (theme: Theme) => + colord(theme.palette.background.paper) + .mix("#fff", theme.palette.mode === "dark" ? 0.16 : 0) + .alpha(1); + return ( + + {(provided) => ( +
  • + + + + + + + slashColor(theme).toHslString(), + }, + ".Mui-focused & .icon-slash-mask": { + stroke: (theme) => + slashColor(theme) + .mix( + theme.palette.primary.main, + theme.palette.action.selectedOpacity + + theme.palette.action.hoverOpacity + ) + .alpha(1) + .toHslString(), + }, + }, + selected ? { strokeDashoffset: 0 } : {}, + ]} + /> + + +
    • + )} +     + ); + }; + + const updateColumn = useSetAtom(updateColumnAtom, tableScope); + function handleOnDragEnd(result: any) { + if (!result.destination) return; + updateColumn({ + key: result.draggableId, + config: {}, + index: result.destination.index, + }); + } + + return ( + <> + } + onClick={() => setOpen((o) => !o)} + active={hiddenFields.length > 0} + ref={buttonRef} + > + {"Columns"} + + + + {(provided) => ( + <> + + {/*
    + {provided.placeholder} +
    */} + + )} +     +     + + ); +} diff --git a/src/components/TableToolbar/TableToolbar.tsx b/src/components/TableToolbar/TableToolbar.tsx index b7858176..715353f3 100644 --- a/src/components/TableToolbar/TableToolbar.tsx +++ b/src/components/TableToolbar/TableToolbar.tsx @@ -15,6 +15,7 @@ import AddRow from "./AddRow"; import LoadedRowsStatus from "./LoadedRowsStatus"; import TableSettings from "./TableSettings"; import HiddenFields from "./HiddenFields"; +import ManageColumns from "./ManageColumns"; import RowHeight from "./RowHeight"; import { @@ -85,7 +86,8 @@ export default function TableToolbar() { >
    {/* Spacer */} - + {/* */} + }> From 8c490a44c68d10c65a0019c88c7405bd02166dcf Mon Sep 17 00:00:00 2001 From: Anish Roy <62830866+iamanishroy@users.noreply.github.com> Date: Thu, 24 Nov 2022 16:11:45 +0000 Subject: [PATCH 2/2] worked on issue #562 --- src/components/TableToolbar/ManageColumns.tsx | 158 ++++++++++++------ src/components/TableToolbar/TableToolbar.tsx | 2 +- 2 files changed, 106 insertions(+), 54 deletions(-) diff --git a/src/components/TableToolbar/ManageColumns.tsx b/src/components/TableToolbar/ManageColumns.tsx index c67e689b..7be2d690 100644 --- a/src/components/TableToolbar/ManageColumns.tsx +++ b/src/components/TableToolbar/ManageColumns.tsx @@ -1,8 +1,20 @@ -import { useEffect, useRef, useMemo, useState } from "react"; +import { + useEffect, + useRef, + useMemo, + useState, + ChangeEvent, + forwardRef, +} from "react"; import { useAtom, useSetAtom } from "jotai"; import { isEqual } from "lodash-es"; import { colord } from "colord"; -import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; +import { + DragDropContext, + Droppable, + Draggable, + DropResult, +} from "react-beautiful-dnd"; import { Box, AutocompleteProps, Theme } from "@mui/material"; import VisibilityIcon from "@mui/icons-material/VisibilityOutlined"; @@ -26,7 +38,7 @@ import { } from "@src/atoms/tableScope"; import { formatSubTableName } from "@src/utils/table"; -export default function ManageColumns2() { +export default function ManageColumns() { const buttonRef = useRef(null); const [userSettings] = useAtom(userSettingsAtom, globalScope); @@ -66,6 +78,9 @@ export default function ManageColumns2() { setOpen(false); }; + // disable drag if search box is not empty + const [disableDrag, setDisableDrag] = useState(false); + const renderOption: AutocompleteProps< any, true, @@ -77,7 +92,11 @@ export default function ManageColumns2() { .mix("#fff", theme.palette.mode === "dark" ? 0.16 : 0) .alpha(1); return ( - + {(provided) => (
  • @@ -95,7 +114,12 @@ export default function ManageColumns2() { { position: "relative", height: "1.5rem" }, selected ? { color: "primary.main" } - : { color: "primary.gray", opacity: 0.6 }, + : { + opacity: 0, + ".MuiAutocomplete-option.Mui-focused &": { + opacity: 0.5, + }, + }, ]} > @@ -129,7 +153,7 @@ export default function ManageColumns2() { }; const updateColumn = useSetAtom(updateColumnAtom, tableScope); - function handleOnDragEnd(result: any) { + function handleOnDragEnd(result: DropResult) { if (!result.destination) return; updateColumn({ key: result.draggableId, @@ -138,6 +162,39 @@ export default function ManageColumns2() { }); } + function checkToDisableDrag(e: ChangeEvent) { + setDisableDrag(e.target.value !== ""); + } + + const ListboxComponent = forwardRef(function ListboxComponent( + props: React.HTMLAttributes, + ulRef: any /*React.ForwardedRef*/ + ) { + const { children, ...other } = props; + + return ( + + + {(provided) => ( +
      { + provided.innerRef(ref); + if (ulRef !== null) { + ulRef(ref); + } + }} + > + {props.children} + {provided.placeholder} +
    + )} +     +     + ); + }); + return ( <> {"Columns"} - - - {(provided) => ( - <> - - {/*
    - {provided.placeholder} -
    */} - - )} -     -     + }, + }, + }, + }} + {...{ + AutocompleteProps: { + renderOption, + ListboxComponent, + // ListboxProps: { + // ...provided.droppableProps, + // ref: provided.innerRef, + // }, + }, + }} + label="Hidden fields" + labelPlural="fields" + value={hiddenFields ?? []} + onChange={(updates: string[]) => { + setHiddenFields(updates); + setDisableDrag(false); + }} + onClose={handleSave} + clearText="Show all" + selectAllText="Hide all" + doneText="Apply" + /> ); } diff --git a/src/components/TableToolbar/TableToolbar.tsx b/src/components/TableToolbar/TableToolbar.tsx index 715353f3..2079a20d 100644 --- a/src/components/TableToolbar/TableToolbar.tsx +++ b/src/components/TableToolbar/TableToolbar.tsx @@ -14,7 +14,7 @@ import { ButtonSkeleton } from "./TableToolbarSkeleton"; import AddRow from "./AddRow"; import LoadedRowsStatus from "./LoadedRowsStatus"; import TableSettings from "./TableSettings"; -import HiddenFields from "./HiddenFields"; +// import HiddenFields from "./HiddenFields"; import ManageColumns from "./ManageColumns"; import RowHeight from "./RowHeight";