implementation of datatable

2024-04-16 11:45:14 +03:30
parent 78548e89e7
commit a8e28a4f8c
29 changed files with 2983 additions and 2 deletions
--- a/src/core/components/DataTable/menus/ShowHideColumnsMenuItems.js
+++ b/src/core/components/DataTable/menus/ShowHideColumnsMenuItems.js
@@ -0,0 +1,160 @@
+import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
+import { Box, FormControlLabel, MenuItem, Switch, Tooltip, Typography } from "@mui/material";
+import { useRef, useState } from "react";
+import DataTable_GrabHandleButton from "../buttons/GrabHandleButton";
+
+const DataTable_ShowHideColumnsMenuItems = ({
+    allColumns,
+    column,
+    hoveredColumn,
+    isNestedColumns,
+    setHoveredColumn,
+    table,
+    ...rest
+}) => {
+    const {
+        getState,
+        options: {
+            enableColumnOrdering,
+            enableHiding,
+            localization,
+            mrtTheme: { draggingBorderColor },
+        },
+        setColumnOrder,
+    } = table;
+
+    const { columnOrder } = getState();
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+
+    const switchChecked = column.getIsVisible();
+
+    const handleToggleColumnHidden = (column) => {
+        if (columnDefType === 'group') {
+            column?.columns?.forEach?.((childColumn) => {
+                childColumn.toggleVisibility(!switchChecked);
+            });
+        } else {
+            column.toggleVisibility();
+        }
+    };
+
+    const menuItemRef = useRef(null);
+
+    const [isDragging, setIsDragging] = useState(false);
+
+    const handleDragStart = (e) => {
+        setIsDragging(true);
+        try {
+            e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
+        } catch (e) {
+            console.error(e);
+        }
+    };
+
+    const handleDragEnd = (_e) => {
+        setIsDragging(false);
+        setHoveredColumn(null);
+        if (hoveredColumn) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+        }
+    };
+
+    const handleDragEnter = (_e) => {
+        if (!isDragging && columnDef.enableColumnOrdering !== false) {
+            setHoveredColumn(column);
+        }
+    };
+
+    if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
+        return null;
+    }
+
+    return (
+        <>
+            <MenuItem
+                disableRipple
+                onDragEnter={handleDragEnter}
+                ref={menuItemRef}
+                {...rest}
+                sx={(theme) => ({
+                    alignItems: 'center',
+                    justifyContent: 'flex-start',
+                    my: 0,
+                    opacity: isDragging ? 0.5 : 1,
+                    outline: isDragging
+                        ? `2px dashed ${theme.palette.grey[500]}`
+                        : hoveredColumn?.id === column.id
+                            ? `2px dashed ${draggingBorderColor}`
+                            : 'none',
+                    outlineOffset: '-2px',
+                    pl: `${(column.depth + 0.5) * 2}rem`,
+                    py: '6px',
+                    ...(parseFromValuesOrFunc(rest?.sx, theme)),
+                })}
+            >
+                <Box
+                    sx={{
+                        display: 'flex',
+                        flexWrap: 'nowrap',
+                        gap: '8px',
+                    }}
+                >
+                    {columnDefType !== 'group' &&
+                        enableColumnOrdering &&
+                        !isNestedColumns &&
+                        (columnDef.enableColumnOrdering !== false ? (
+                            <DataTable_GrabHandleButton
+                                onDragEnd={handleDragEnd}
+                                onDragStart={handleDragStart}
+                                table={table}
+                            />
+                        ) : (
+                            <Box sx={{ width: '28px' }} />
+                        ))}
+                    {enableHiding ? (
+                        <FormControlLabel
+                            checked={switchChecked}
+                            componentsProps={{
+                                typography: {
+                                    sx: {
+                                        mb: 0,
+                                        opacity: columnDefType !== 'display' ? 1 : 0.5,
+                                    },
+                                },
+                            }}
+                            control={
+                                <Tooltip
+                                    {...getCommonTooltipProps()}
+                                    title={localization.toggleVisibility}
+                                >
+                                    <Switch />
+                                </Tooltip>
+                            }
+                            disabled={!column.getCanHide()}
+                            label={columnDef.header}
+                            onChange={() => handleToggleColumnHidden(column)}
+                        />
+                    ) : (
+                        <Typography sx={{ alignSelf: 'center' }}>
+                            {columnDef.header}
+                        </Typography>
+                    )}
+                </Box>
+            </MenuItem>
+            {column.columns?.map((c, i) => (
+                <DataTable_ShowHideColumnsMenuItems
+                    allColumns={allColumns}
+                    column={c}
+                    hoveredColumn={hoveredColumn}
+                    isNestedColumns={isNestedColumns}
+                    key={`${i}-${c.id}`}
+                    setHoveredColumn={setHoveredColumn}
+                    table={table}
+                />
+            ))}
+        </>
+    );
+
+}
+export default DataTable_ShowHideColumnsMenuItems;