QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP on showing tables (joins) in columns panel

Browse Source
This commit is contained in:
darin.kelkhoff
2023-04-14 10:05:40 -05:00
parent 2bba79443d
commit 8ed5a71f19
1 changed files with 98 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/qqq/pages/records/query/RecordQuery.tsx
View File

@ -38,13 +38,19 @@ import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import LinearProgress from "@mui/material/LinearProgress";
import ListItemIcon from "@mui/material/ListItemIcon";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Modal from "@mui/material/Modal";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import {DataGridPro, GridCallbackDetails, GridColDef, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridExportMenuItemProps, GridFilterMenuItem, GridFilterModel, GridPinnedColumns, gridPreferencePanelStateSelector, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
import Typography from "@mui/material/Typography";
import {DataGridPro, GridCallbackDetails, GridColDef, gridColumnGroupingSelector, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridExportMenuItemProps, GridFilterMenuItem, GridFilterModel, GridPinnedColumns, gridPreferencePanelStateSelector, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
import {GridColumnsPanelProps} from "@mui/x-data-grid/components/panel/GridColumnsPanel";
import {gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector} from "@mui/x-data-grid/hooks/features/columns/gridColumnsSelector";
import FormData from "form-data";
import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
@ -104,7 +110,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const columnVisibilityLocalStorageKey = `${COLUMN_VISIBILITY_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
const filterLocalStorageKey = `${FILTER_LOCAL_STORAGE_KEY_ROOT}.${tableName}`;
let defaultSort = [] as GridSortItem[];
let defaultVisibility = {};
let defaultVisibility = {} as { [index: string]: boolean };
let defaultRowsPerPage = 10;
let defaultDensity = "standard" as GridDensity;
let defaultPinnedColumns = {left: ["__check__", "id"]} as GridPinnedColumns;
@ -185,6 +191,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
const [ queryErrors, setQueryErrors ] = useState({} as any);
const [ receivedQueryErrorTimestamp, setReceivedQueryErrorTimestamp ] = useState(new Date());
const {setPageHeader} = useContext(QContext);
const [ , forceUpdate ] = useReducer((x) => x + 1, 0);
@ -667,7 +674,6 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
columnsModel.forEach((gridColumn) =>
{
const fieldName = gridColumn.field;
// @ts-ignore
if (columnVisibilityModel[fieldName] !== false)
{
visibleFields.push(fieldName);
@ -1054,6 +1060,94 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
);
});
const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
function MyCustomColumnsPanel(props: GridColumnsPanelProps, ref)
{
const apiRef = useGridApiContext();
const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
const [openGroups, setOpenGroups] = useState({} as {[name: string]: boolean});
const groups = ["Order", "Line Item"];
const onColumnVisibilityChange = (fieldName: string) =>
{
/*
if(columnVisibilityModel[fieldName] === undefined)
{
columnVisibilityModel[fieldName] = true;
}
columnVisibilityModel[fieldName] = !columnVisibilityModel[fieldName];
setColumnVisibilityModel(JSON.parse(JSON.stringify(columnVisibilityModel)))
*/
console.log(`${fieldName} = ${columnVisibilityModel[fieldName]}`)
// columnVisibilityModel[fieldName] = Math.random() < 0.5;
apiRef.current.setColumnVisibility(fieldName, columnVisibilityModel[fieldName] === false);
// handleColumnVisibilityChange(JSON.parse(JSON.stringify(columnVisibilityModel)));
}
const toggleColumnGroup = (groupName: string) =>
{
if(openGroups[groupName] === undefined)
{
openGroups[groupName] = true;
}
openGroups[groupName] = !openGroups[groupName];
setOpenGroups(JSON.parse(JSON.stringify(openGroups)));
}
console.log("re-render");
return (
<div ref={ref} className="custom-columns-panel" style={{width: "350px", height: "450px"}}>
<Box height="55px" padding="5px">
<TextField label="Find column" placeholder="Column title" variant="standard" fullWidth={true}></TextField>
</Box>
<Box overflow="auto" height="calc( 100% - 105px )">
<Stack direction="column" spacing={1} pl="0.5rem">
{groups.map((groupName: string) =>
(
<>
<IconButton
key={groupName}
size="small"
onClick={() => toggleColumnGroup(groupName)}
sx={{width: "100%", justifyContent: "flex-start", fontSize: "0.875rem"}}
disableRipple={true}
>
<Icon>{openGroups[groupName] === false ? "expand_less" : "expand_more"}</Icon>
<Box sx={{pl: "0.25rem", fontWeight: "bold"}} textAlign="left">{groupName} fields</Box>
</IconButton>
{openGroups[groupName] !== false && columnsModel.map((gridColumn: any) => (
<IconButton
key={gridColumn.field}
size="small"
onClick={() => onColumnVisibilityChange(gridColumn.field)}
sx={{width: "100%", justifyContent: "flex-start", fontSize: "0.875rem", pl: "1.375rem"}}
disableRipple={true}
>
<Icon>{columnVisibilityModel[gridColumn.field] === false ? "visibility_off" : "visibility"}</Icon>
<Box sx={{pl: "0.25rem"}} textAlign="left">{gridColumn.headerName}</Box>
</IconButton>
))}
</>
))}
</Stack>
</Box>
<Box height="50px" padding="5px" display="flex" justifyContent="space-between">
<Button>hide all</Button>
<Button>show all</Button>
</Box>
</div>
);
}
)
function CustomToolbar()
{
const handleMouseDown: GridEventListener<"cellMouseDown"> = (
@ -1344,7 +1438,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
<Card>
<Box height="100%">
<DataGridPro
components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading, ColumnMenu: CustomColumnMenu}}
components={{Toolbar: CustomToolbar, Pagination: CustomPagination, LoadingOverlay: Loading, ColumnMenu: CustomColumnMenu, ColumnsPanel: CustomColumnsPanel}}
pinnedColumns={pinnedColumns}
onPinnedColumnsChange={handlePinnedColumnsChange}
pagination