mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
Merged feature/CE-881-create-basic-saved-reports into integration/sprint-40
This commit is contained in:
@ -19,6 +19,7 @@
|
||||
*/
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Alert, Skeleton} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Grid from "@mui/material/Grid";
|
||||
@ -38,8 +39,10 @@ import CompositeWidget from "qqq/components/widgets/CompositeWidget";
|
||||
import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
|
||||
import DividerWidget from "qqq/components/widgets/misc/Divider";
|
||||
import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
|
||||
import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
|
||||
import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
|
||||
import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget";
|
||||
import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
|
||||
import ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
|
||||
import StepperCard from "qqq/components/widgets/misc/StepperCard";
|
||||
import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
|
||||
@ -61,6 +64,7 @@ interface Props
|
||||
widgetMetaDataList: QWidgetMetaData[];
|
||||
tableName?: string;
|
||||
entityPrimaryKey?: string;
|
||||
record?: QRecord;
|
||||
omitWrappingGridContainer: boolean;
|
||||
areChildren?: boolean;
|
||||
childUrlParams?: string;
|
||||
@ -79,7 +83,7 @@ DashboardWidgets.defaultProps = {
|
||||
wrapWidgetsInTabPanels: false,
|
||||
};
|
||||
|
||||
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
|
||||
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, record, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData, wrapWidgetsInTabPanels}: Props): JSX.Element
|
||||
{
|
||||
const [widgetData, setWidgetData] = useState([] as any[]);
|
||||
const [widgetCounter, setWidgetCounter] = useState(0);
|
||||
@ -248,6 +252,23 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
|
||||
const widgetCount = widgetMetaDataList ? widgetMetaDataList.length : 0;
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** helper function, to convert values from a QRecord values map to a regular old
|
||||
** js object
|
||||
*******************************************************************************/
|
||||
function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any}
|
||||
{
|
||||
const rs: {[name: string]: any} = {};
|
||||
|
||||
if(record.values)
|
||||
{
|
||||
record.values.forEach((value, key) => rs[key] = value);
|
||||
}
|
||||
|
||||
return (rs);
|
||||
}
|
||||
|
||||
const renderWidget = (widgetMetaData: QWidgetMetaData, i: number): JSX.Element =>
|
||||
{
|
||||
const labelAdditionalComponentsRight: LabelComponent[] = [];
|
||||
@ -561,6 +582,20 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "reportSetup" && (
|
||||
widgetData && widgetData[i] && widgetData[i].queryParams &&
|
||||
<ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
|
||||
{}} />
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "pivotTableSetup" && (
|
||||
widgetData && widgetData[i] && widgetData[i].queryParams &&
|
||||
<PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
|
||||
{}} />
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -21,10 +21,12 @@
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {InputLabel} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import parse from "html-react-parser";
|
||||
@ -60,6 +62,7 @@ interface Props
|
||||
labelAdditionalComponentsLeft: LabelComponent[];
|
||||
labelAdditionalElementsLeft: JSX.Element[];
|
||||
labelAdditionalComponentsRight: LabelComponent[];
|
||||
labelAdditionalElementsRight: JSX.Element[];
|
||||
labelBoxAdditionalSx?: any;
|
||||
widgetMetaData?: QWidgetMetaData;
|
||||
widgetData?: WidgetData;
|
||||
@ -80,6 +83,7 @@ Widget.defaultProps = {
|
||||
labelAdditionalComponentsLeft: [],
|
||||
labelAdditionalElementsLeft: [],
|
||||
labelAdditionalComponentsRight: [],
|
||||
labelAdditionalElementsRight: [],
|
||||
labelBoxAdditionalSx: {},
|
||||
omitPadding: false,
|
||||
};
|
||||
@ -160,6 +164,79 @@ export class HeaderIcon extends LabelComponent
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** a link (actually a button) for in a widget's header
|
||||
*******************************************************************************/
|
||||
interface HeaderLinkButtonComponentProps
|
||||
{
|
||||
label: string;
|
||||
onClickCallback: () => void;
|
||||
disabled?: boolean;
|
||||
disabledTooltip?: string;
|
||||
}
|
||||
|
||||
HeaderLinkButtonComponent.defaultProps = {
|
||||
disabled: false,
|
||||
disabledTooltip: null
|
||||
};
|
||||
|
||||
export function HeaderLinkButtonComponent({label, onClickCallback, disabled, disabledTooltip}: HeaderLinkButtonComponentProps): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Tooltip title={disabledTooltip}>
|
||||
<span>
|
||||
<Button disabled={disabled} onClick={() => onClickCallback()} sx={{p: 0}} disableRipple>
|
||||
<Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
|
||||
{label}
|
||||
</Typography>
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
interface HeaderToggleComponentProps
|
||||
{
|
||||
label: string;
|
||||
getValue: () => boolean;
|
||||
onClickCallback: () => void;
|
||||
disabled?: boolean;
|
||||
disabledTooltip?: string;
|
||||
}
|
||||
|
||||
HeaderToggleComponent.defaultProps = {
|
||||
disabled: false,
|
||||
disabledTooltip: null
|
||||
};
|
||||
|
||||
export function HeaderToggleComponent({label, getValue, onClickCallback, disabled, disabledTooltip}: HeaderToggleComponentProps): JSX.Element
|
||||
{
|
||||
const onClick = () =>
|
||||
{
|
||||
onClickCallback();
|
||||
}
|
||||
|
||||
return (
|
||||
<Box alignItems="baseline" mr="-0.75rem">
|
||||
<Tooltip title={disabledTooltip}>
|
||||
<span>
|
||||
<InputLabel sx={{fontSize: "1.125rem", px: "0 !important", cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.65 : 1}} unselectable="on">
|
||||
{label} <Switch disabled={disabled} checked={getValue()} onClick={onClick} />
|
||||
</InputLabel>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@ -573,6 +650,8 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
localLabelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
|
||||
}
|
||||
|
||||
let localLabelAdditionalElementsRight = [...props.labelAdditionalElementsRight];
|
||||
|
||||
const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
|
||||
|
||||
const isSet = (v: any): boolean =>
|
||||
@ -589,6 +668,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
|
||||
needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
|
||||
needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
|
||||
needLabelBox ||= (localLabelAdditionalElementsRight && localLabelAdditionalElementsRight.length > 0);
|
||||
needLabelBox ||= isSet(props.widgetData?.icon);
|
||||
needLabelBox ||= isSet(props.widgetData?.label);
|
||||
needLabelBox ||= isSet(props.widgetMetaData?.label);
|
||||
@ -720,6 +800,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
})
|
||||
)
|
||||
}
|
||||
{localLabelAdditionalElementsRight}
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
|
||||
208
src/qqq/components/widgets/misc/PivotTableGroupByElement.tsx
Normal file
208
src/qqq/components/widgets/misc/PivotTableGroupByElement.tsx
Normal file
@ -0,0 +1,208 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import type {Identifier, XYCoord} from "dnd-core";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
|
||||
import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
|
||||
import {PivotTableDefinition, PivotTableGroupBy} from "qqq/models/misc/PivotTableDefinitionModels";
|
||||
import React, {FC, useRef} from "react";
|
||||
import {useDrag, useDrop} from "react-dnd";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** component props
|
||||
*******************************************************************************/
|
||||
export interface PivotTableGroupByElementProps
|
||||
{
|
||||
id: string;
|
||||
index: number;
|
||||
dragCallback: (rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) => void;
|
||||
metaData: QInstance;
|
||||
tableMetaData: QTableMetaData;
|
||||
pivotTableDefinition: PivotTableDefinition;
|
||||
usedGroupByFieldNames: string[];
|
||||
availableFieldNames: string[];
|
||||
isEditable: boolean;
|
||||
groupBy: PivotTableGroupBy;
|
||||
rowsOrColumns: "rows" | "columns";
|
||||
callback: () => void;
|
||||
attemptedSubmit?: boolean;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** item to support react-dnd
|
||||
*******************************************************************************/
|
||||
interface DragItem
|
||||
{
|
||||
index: number;
|
||||
id: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback, attemptedSubmit}) =>
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
|
||||
{
|
||||
accept: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
|
||||
collect(monitor)
|
||||
{
|
||||
return {
|
||||
handlerId: monitor.getHandlerId(),
|
||||
};
|
||||
},
|
||||
hover(item: DragItem, monitor)
|
||||
{
|
||||
if (!ref.current)
|
||||
{
|
||||
return;
|
||||
}
|
||||
const dragIndex = item.index;
|
||||
const hoverIndex = index;
|
||||
|
||||
// Don't replace items with themselves
|
||||
if (dragIndex === hoverIndex)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine rectangle on screen
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect();
|
||||
|
||||
// Get vertical middle
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
||||
|
||||
// Determine mouse position
|
||||
const clientOffset = monitor.getClientOffset();
|
||||
|
||||
// Get pixels to the top
|
||||
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
|
||||
|
||||
// Only perform the move when the mouse has crossed half of the items height
|
||||
// When dragging downwards, only move when the cursor is below 50%
|
||||
// When dragging upwards, only move when the cursor is above 50%
|
||||
|
||||
// Dragging downwards
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Dragging upwards
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Time to actually perform the action
|
||||
dragCallback(rowsOrColumns, dragIndex, hoverIndex);
|
||||
|
||||
// Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
|
||||
// but it's good here for the sake of performance to avoid expensive index searches.
|
||||
item.index = hoverIndex;
|
||||
},
|
||||
});
|
||||
|
||||
const [{isDragging}, drag, preview] = useDrag({
|
||||
type: rowsOrColumns == "rows" ? DragItemTypes.ROW : DragItemTypes.COLUMN,
|
||||
item: () =>
|
||||
{
|
||||
return {id, index};
|
||||
},
|
||||
collect: (monitor: any) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
const handleFieldChange = (event: any, newValue: any, reason: string) =>
|
||||
{
|
||||
groupBy.fieldName = newValue ? newValue.fieldName : null;
|
||||
callback();
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function removeGroupBy(index: number, rowsOrColumns: "rows" | "columns")
|
||||
{
|
||||
pivotTableDefinition[rowsOrColumns].splice(index, 1);
|
||||
callback();
|
||||
}
|
||||
|
||||
if (!isEditable)
|
||||
{
|
||||
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName);
|
||||
if (selectedField)
|
||||
{
|
||||
const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
|
||||
return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
|
||||
}
|
||||
|
||||
return (<React.Fragment />);
|
||||
}
|
||||
|
||||
preview(drop(ref));
|
||||
|
||||
const showError = attemptedSubmit && !groupBy.fieldName;
|
||||
|
||||
return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
|
||||
<Box>
|
||||
<Icon ref={drag} sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
|
||||
</Box>
|
||||
<Box width="100%">
|
||||
<FieldAutoComplete
|
||||
id={`${rowsOrColumns}-${index}`}
|
||||
label={null}
|
||||
variant="outlined"
|
||||
textFieldSX={fieldAutoCompleteTextFieldSX}
|
||||
metaData={metaData}
|
||||
tableMetaData={tableMetaData}
|
||||
handleFieldChange={handleFieldChange}
|
||||
hiddenFieldNames={usedGroupByFieldNames}
|
||||
availableFieldNames={availableFieldNames}
|
||||
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
|
||||
hasError={showError}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Button sx={xIconButtonSX} onClick={() => removeGroupBy(index, rowsOrColumns)}><Icon>clear</Icon></Button>
|
||||
</Box>
|
||||
</Box>);
|
||||
};
|
||||
849
src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx
Normal file
849
src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx
Normal file
@ -0,0 +1,849 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import Alert from "@mui/material/Alert";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
|
||||
import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement";
|
||||
import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/ReportSetupWidget";
|
||||
import Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
|
||||
import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
|
||||
import QQueryColumns from "qqq/models/query/QQueryColumns";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import FilterUtils from "qqq/utils/qqq/FilterUtils";
|
||||
import React, {useCallback, useContext, useEffect, useReducer, useState} from "react";
|
||||
import {DndProvider} from "react-dnd";
|
||||
import {HTML5Backend} from "react-dnd-html5-backend";
|
||||
|
||||
export const DragItemTypes =
|
||||
{
|
||||
ROW: "row",
|
||||
COLUMN: "column",
|
||||
VALUE: "value"
|
||||
};
|
||||
|
||||
export const xIconButtonSX =
|
||||
{
|
||||
border: `1px solid ${colors.grayLines.main} !important`,
|
||||
borderRadius: "0.75rem",
|
||||
textTransform: "none",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "400",
|
||||
width: "40px",
|
||||
minWidth: "40px",
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
color: colors.error.main,
|
||||
"&:hover": {color: colors.error.main},
|
||||
"&:focus": {color: colors.error.main},
|
||||
"&:focus:not(:hover)": {color: colors.error.main},
|
||||
};
|
||||
|
||||
export const fieldAutoCompleteTextFieldSX =
|
||||
{
|
||||
"& .MuiInputBase-input": {fontSize: "1rem", padding: "0 !important"}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
export function getSelectedFieldForAutoComplete(tableMetaData: QTableMetaData, fieldName: string)
|
||||
{
|
||||
if (fieldName)
|
||||
{
|
||||
let [field, fieldTable] = FilterUtils.getField(tableMetaData, fieldName);
|
||||
if (field && fieldTable)
|
||||
{
|
||||
return ({field: field, table: fieldTable, fieldName: fieldName});
|
||||
}
|
||||
}
|
||||
|
||||
return (null);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** component props
|
||||
*******************************************************************************/
|
||||
interface PivotTableSetupWidgetProps
|
||||
{
|
||||
isEditable: boolean;
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
recordValues: { [name: string]: any };
|
||||
onSaveCallback?: (values: { [name: string]: any }) => void;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** default values for props
|
||||
*******************************************************************************/
|
||||
PivotTableSetupWidget.defaultProps = {
|
||||
onSaveCallback: null
|
||||
};
|
||||
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
/*******************************************************************************
|
||||
** Component to edit the setup of a Pivot Table - rows, columns, values!
|
||||
*******************************************************************************/
|
||||
export default function PivotTableSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: PivotTableSetupWidgetProps): JSX.Element
|
||||
{
|
||||
const [metaData, setMetaData] = useState(null as QInstance);
|
||||
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [enabled, setEnabled] = useState(!!recordValues["usePivotTable"]);
|
||||
const [attemptedSubmit, setAttemptedSubmit] = useState(false);
|
||||
const [errorAlert, setErrorAlert] = useState(null as string);
|
||||
|
||||
const [pivotTableDefinition, setPivotTableDefinition] = useState(null as PivotTableDefinition);
|
||||
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
// this is a copy of pivotTableDefinition, that we'll render in the modal. //
|
||||
// then on-save, we'll move it to pivotTableDefinition, e.g., the actual record. //
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
const [modalPivotTableDefinition, setModalPivotTableDefinition] = useState(null as PivotTableDefinition);
|
||||
|
||||
const [usedGroupByFieldNames, setUsedGroupByFieldNames] = useState([] as string[]);
|
||||
const [availableFieldNames, setAvailableFieldNames] = useState([] as string[]);
|
||||
|
||||
const {helpHelpActive} = useContext(QContext);
|
||||
|
||||
//////////////////
|
||||
// initial load //
|
||||
//////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if (!pivotTableDefinition)
|
||||
{
|
||||
let originalPivotTableDefinition = recordValues["pivotTableJson"] && JSON.parse(recordValues["pivotTableJson"]) as PivotTableDefinition;
|
||||
if (originalPivotTableDefinition)
|
||||
{
|
||||
setEnabled(true);
|
||||
}
|
||||
else if (!originalPivotTableDefinition)
|
||||
{
|
||||
originalPivotTableDefinition = new PivotTableDefinition();
|
||||
}
|
||||
|
||||
for (let i = 0; i < originalPivotTableDefinition?.rows?.length; i++)
|
||||
{
|
||||
if (!originalPivotTableDefinition?.rows[i].key)
|
||||
{
|
||||
originalPivotTableDefinition.rows[i].key = PivotObjectKey.next();
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < originalPivotTableDefinition?.columns?.length; i++)
|
||||
{
|
||||
if (!originalPivotTableDefinition?.columns[i].key)
|
||||
{
|
||||
originalPivotTableDefinition.columns[i].key = PivotObjectKey.next();
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < originalPivotTableDefinition?.values?.length; i++)
|
||||
{
|
||||
if (!originalPivotTableDefinition?.values[i].key)
|
||||
{
|
||||
originalPivotTableDefinition.values[i].key = PivotObjectKey.next();
|
||||
}
|
||||
}
|
||||
|
||||
setPivotTableDefinition(originalPivotTableDefinition);
|
||||
updateUsedGroupByFieldNames(originalPivotTableDefinition);
|
||||
}
|
||||
|
||||
if (recordValues["columnsJson"])
|
||||
{
|
||||
updateAvailableFieldNames(JSON.parse(recordValues["columnsJson"]) as QQueryColumns);
|
||||
}
|
||||
|
||||
(async () =>
|
||||
{
|
||||
setMetaData(await qController.loadMetaData());
|
||||
})();
|
||||
});
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// handle the table name changing - load current table's meta-data //
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"]);
|
||||
setTableMetaData(tableMetaData);
|
||||
})();
|
||||
}
|
||||
}, [recordValues]);
|
||||
|
||||
|
||||
const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function showHelp(slot: string)
|
||||
{
|
||||
return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getHelpContent(slot: string)
|
||||
{
|
||||
const key = `widget:${widgetMetaData.name};slot:${slot}`;
|
||||
return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function toggleEnabled()
|
||||
{
|
||||
const newEnabled = !!!getEnabled();
|
||||
setEnabled(newEnabled);
|
||||
onSaveCallback({usePivotTable: newEnabled});
|
||||
|
||||
if (!newEnabled)
|
||||
{
|
||||
onSaveCallback({pivotTableJson: null});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getEnabled()
|
||||
{
|
||||
return (enabled);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function addGroupBy(rowsOrColumns: "rows" | "columns")
|
||||
{
|
||||
if (!modalPivotTableDefinition[rowsOrColumns])
|
||||
{
|
||||
modalPivotTableDefinition[rowsOrColumns] = [];
|
||||
}
|
||||
|
||||
modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function groupByChangedCallback()
|
||||
{
|
||||
updateUsedGroupByFieldNames(modalPivotTableDefinition);
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function addValue()
|
||||
{
|
||||
if (!modalPivotTableDefinition.values)
|
||||
{
|
||||
modalPivotTableDefinition.values = [];
|
||||
}
|
||||
|
||||
modalPivotTableDefinition.values.push(new PivotTableValue());
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function removeValue(index: number)
|
||||
{
|
||||
modalPivotTableDefinition.values.splice(index, 1);
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function updateUsedGroupByFieldNames(ptd: PivotTableDefinition = pivotTableDefinition)
|
||||
{
|
||||
const usedFieldNames: string[] = [];
|
||||
|
||||
for (let i = 0; i < ptd?.rows?.length; i++)
|
||||
{
|
||||
usedFieldNames.push(ptd?.rows[i].fieldName);
|
||||
}
|
||||
|
||||
for (let i = 0; i < ptd?.columns?.length; i++)
|
||||
{
|
||||
usedFieldNames.push(ptd?.columns[i].fieldName);
|
||||
}
|
||||
|
||||
setUsedGroupByFieldNames(usedFieldNames);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function updateAvailableFieldNames(columns: QQueryColumns)
|
||||
{
|
||||
const fieldNames: string[] = [];
|
||||
for (let i = 0; i < columns?.columns?.length; i++)
|
||||
{
|
||||
if (columns.columns[i].isVisible)
|
||||
{
|
||||
fieldNames.push(columns.columns[i].name);
|
||||
}
|
||||
}
|
||||
setAvailableFieldNames(fieldNames);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderOneValue(value: PivotTableValue, index: number)
|
||||
{
|
||||
if (!isEditable)
|
||||
{
|
||||
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
|
||||
if (selectedField && value.function)
|
||||
{
|
||||
const label = selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label;
|
||||
return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{pivotTableFunctionLabels[value.function]} of {label}</Box>);
|
||||
}
|
||||
|
||||
return (<React.Fragment />);
|
||||
}
|
||||
|
||||
const handleFieldChange = (event: any, newValue: any, reason: string) =>
|
||||
{
|
||||
value.fieldName = newValue ? newValue.fieldName : null;
|
||||
};
|
||||
|
||||
const handleFunctionChange = (event: any, newValue: any, reason: string) =>
|
||||
{
|
||||
value.function = newValue ? newValue.id : null;
|
||||
};
|
||||
|
||||
const functionOptions: any[] = [];
|
||||
let defaultFunctionValue = null;
|
||||
for (let pivotTableFunctionKey in PivotTableFunction)
|
||||
{
|
||||
// @ts-ignore any?
|
||||
const label = "" + pivotTableFunctionLabels[pivotTableFunctionKey];
|
||||
const option = {id: pivotTableFunctionKey, label: label};
|
||||
functionOptions.push(option);
|
||||
|
||||
if (option.id == value.function)
|
||||
{
|
||||
defaultFunctionValue = option;
|
||||
}
|
||||
}
|
||||
|
||||
// maybe cursor:grab (and then change to "grabbing")
|
||||
return (<Box display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center">
|
||||
<Box>
|
||||
<Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
|
||||
</Box>
|
||||
<Box width="100%">
|
||||
<FieldAutoComplete
|
||||
id={`values-field-${index}`}
|
||||
label={null}
|
||||
variant="outlined"
|
||||
textFieldSX={fieldAutoCompleteTextFieldSX}
|
||||
metaData={metaData}
|
||||
tableMetaData={tableMetaData}
|
||||
handleFieldChange={handleFieldChange}
|
||||
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, value.fieldName)}
|
||||
/>
|
||||
</Box>
|
||||
<Box width="330px">
|
||||
<Autocomplete
|
||||
id={`values-field-${index}`}
|
||||
renderInput={(params) => (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
|
||||
// @ts-ignore
|
||||
defaultValue={defaultFunctionValue}
|
||||
options={functionOptions}
|
||||
onChange={handleFunctionChange}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
getOptionLabel={(option) => option.label}
|
||||
// todo? renderOption={(props, option, state) => renderFieldOption(props, option, state)}
|
||||
autoSelect={true}
|
||||
autoHighlight={true}
|
||||
disableClearable
|
||||
// slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
|
||||
// {...alsoOpen}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
|
||||
</Box>
|
||||
</Box>);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** drag & drop callback to move one of the pivot-table group-bys (rows/columns)
|
||||
*******************************************************************************/
|
||||
const moveGroupBy = useCallback((rowsOrColumns: "rows" | "columns", dragIndex: number, hoverIndex: number) =>
|
||||
{
|
||||
const array = modalPivotTableDefinition[rowsOrColumns];
|
||||
const dragItem = array[dragIndex];
|
||||
array.splice(dragIndex, 1);
|
||||
array.splice(hoverIndex, 0, dragItem);
|
||||
|
||||
forceUpdate();
|
||||
}, [modalPivotTableDefinition]);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** drag & drop callback to move one of the pivot-table values
|
||||
*******************************************************************************/
|
||||
const moveValue = useCallback((dragIndex: number, hoverIndex: number) =>
|
||||
{
|
||||
const array = modalPivotTableDefinition.values;
|
||||
const dragItem = array[dragIndex];
|
||||
array.splice(dragIndex, 1);
|
||||
array.splice(hoverIndex, 0, dragItem);
|
||||
|
||||
forceUpdate();
|
||||
}, [modalPivotTableDefinition]);
|
||||
|
||||
|
||||
const noTable = (tableMetaData == null);
|
||||
const noColumns = (!availableFieldNames || availableFieldNames.length == 0);
|
||||
|
||||
const selectTableFirstTooltipTitle = noTable ? "You must select a table before you can set up your pivot table" : null;
|
||||
const selectColumnsFirstTooltipTitle = noColumns ? "You must set up your report's Columns before you can set up your Pivot Table" : null;
|
||||
const editPopupDisabled = noTable || noColumns;
|
||||
|
||||
/////////////////////////////////////////////////////////////
|
||||
// add toggle component to widget header for editable mode //
|
||||
/////////////////////////////////////////////////////////////
|
||||
const labelAdditionalElementsRight: JSX.Element[] = [];
|
||||
if (isEditable)
|
||||
{
|
||||
labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** render a group-by (row or column)
|
||||
*******************************************************************************/
|
||||
const renderGroupBy = useCallback((groupBy: PivotTableGroupBy, rowsOrColumns: "rows" | "columns", index: number, forModal: boolean) =>
|
||||
{
|
||||
return (
|
||||
<PivotTableGroupByElement
|
||||
key={groupBy.fieldName}
|
||||
index={index}
|
||||
id={`${groupBy.key}`}
|
||||
dragCallback={moveGroupBy}
|
||||
metaData={metaData}
|
||||
tableMetaData={tableMetaData}
|
||||
pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
|
||||
usedGroupByFieldNames={usedGroupByFieldNames}
|
||||
availableFieldNames={availableFieldNames}
|
||||
isEditable={isEditable && forModal}
|
||||
groupBy={groupBy}
|
||||
rowsOrColumns={rowsOrColumns}
|
||||
callback={groupByChangedCallback}
|
||||
attemptedSubmit={attemptedSubmit}
|
||||
/>
|
||||
);
|
||||
},
|
||||
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
|
||||
);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** render a pivot-table value (row or column)
|
||||
*******************************************************************************/
|
||||
const renderValue = useCallback((value: PivotTableValue, index: number, forModal: boolean) =>
|
||||
{
|
||||
return (
|
||||
<PivotTableValueElement
|
||||
key={value.key}
|
||||
index={index}
|
||||
id={`${value.key}`}
|
||||
dragCallback={moveValue}
|
||||
metaData={metaData}
|
||||
tableMetaData={tableMetaData}
|
||||
pivotTableDefinition={forModal ? modalPivotTableDefinition : pivotTableDefinition}
|
||||
availableFieldNames={availableFieldNames}
|
||||
isEditable={isEditable && forModal}
|
||||
value={value}
|
||||
callback={groupByChangedCallback}
|
||||
attemptedSubmit={attemptedSubmit}
|
||||
/>
|
||||
);
|
||||
},
|
||||
[tableMetaData, usedGroupByFieldNames, availableFieldNames],
|
||||
);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function openEditor()
|
||||
{
|
||||
if (recordValues["tableName"])
|
||||
{
|
||||
setModalPivotTableDefinition(Object.assign({}, pivotTableDefinition));
|
||||
setModalOpen(true);
|
||||
setAttemptedSubmit(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
|
||||
{
|
||||
if (reason == "backdropClick" || reason == "escapeKeyDown")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
setModalOpen(false);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderGroupBys(forModal: boolean, rowsOrColumns: "rows" | "columns")
|
||||
{
|
||||
const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
|
||||
|
||||
return <>
|
||||
<h5>{rowsOrColumns == "rows" ? "Rows" : "Columns"}</h5>
|
||||
<Box fontSize="1rem">
|
||||
{
|
||||
tableMetaData && (<div>{ptd[rowsOrColumns]?.map((groupBy, i) => renderGroupBy(groupBy, rowsOrColumns, i, forModal))}</div>)
|
||||
}
|
||||
</Box>
|
||||
{
|
||||
(forModal || (isEditable && !ptd[rowsOrColumns]?.length)) &&
|
||||
<Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
|
||||
<Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
|
||||
<span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addGroupBy(rowsOrColumns) : openEditor()}>+ Add new {rowsOrColumns == "rows" ? "row" : "column"}</Button></span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
}
|
||||
{
|
||||
!isEditable && !forModal && !ptd[rowsOrColumns]?.length &&
|
||||
<Box color={colors.gray.main} fontSize="1rem">Your pivot table has no {rowsOrColumns}.</Box>
|
||||
}
|
||||
</>;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderValues(forModal: boolean)
|
||||
{
|
||||
const ptd = forModal ? modalPivotTableDefinition : pivotTableDefinition;
|
||||
|
||||
return <>
|
||||
<h5>Values</h5>
|
||||
<Box fontSize="1rem">
|
||||
{
|
||||
tableMetaData && (<div>{ptd?.values?.map((value, i) => renderValue(value, i, forModal))}</div>)
|
||||
}
|
||||
</Box>
|
||||
{
|
||||
(forModal || (isEditable && !ptd?.values?.length)) &&
|
||||
<Box mt={forModal ? "0.5rem" : "0"} mb="1rem">
|
||||
<Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
|
||||
<span><Button disabled={editPopupDisabled} sx={forModal ? buttonSX : unborderedButtonSX} onClick={() => forModal ? addValue() : openEditor()}>+ Add new value</Button></span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
}
|
||||
{
|
||||
!isEditable && !forModal && !ptd?.values?.length &&
|
||||
<Box color={colors.gray.main} fontSize="1rem">Your pivot table has no values.</Box>
|
||||
}
|
||||
</>;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function validateForm(submitting: boolean = false)
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
|
||||
// this is like a version of considering "touched"... //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(!submitting && !attemptedSubmit)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
let missingValues = 0;
|
||||
|
||||
for (let i = 0; i < modalPivotTableDefinition?.rows?.length; i++)
|
||||
{
|
||||
if (!modalPivotTableDefinition.rows[i].fieldName)
|
||||
{
|
||||
missingValues++;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < modalPivotTableDefinition?.columns?.length; i++)
|
||||
{
|
||||
if (!modalPivotTableDefinition.columns[i].fieldName)
|
||||
{
|
||||
missingValues++;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < modalPivotTableDefinition?.values?.length; i++)
|
||||
{
|
||||
if (!modalPivotTableDefinition.values[i].fieldName)
|
||||
{
|
||||
missingValues++;
|
||||
}
|
||||
if (!modalPivotTableDefinition.values[i].function)
|
||||
{
|
||||
missingValues++;
|
||||
}
|
||||
}
|
||||
|
||||
if (missingValues == 0)
|
||||
{
|
||||
setErrorAlert(null);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// this is to catch the case of - user attempted to submit, and there were errors //
|
||||
// now they've fixed 'em - so go back to a 'clean' state - so if they add more //
|
||||
// boxes, they won't immediately show errors, until a re-submit //
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
if(attemptedSubmit)
|
||||
{
|
||||
setAttemptedSubmit(false);
|
||||
}
|
||||
return (false);
|
||||
}
|
||||
|
||||
setErrorAlert(`Missing value in ${missingValues} field${missingValues == 1 ? "" : "s"}.`);
|
||||
return (true);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function saveClicked()
|
||||
{
|
||||
setAttemptedSubmit(true);
|
||||
|
||||
if (validateForm(true))
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (!onSaveCallback)
|
||||
{
|
||||
console.log("onSaveCallback was not defined");
|
||||
return;
|
||||
}
|
||||
|
||||
setPivotTableDefinition(Object.assign({}, modalPivotTableDefinition));
|
||||
updateUsedGroupByFieldNames(modalPivotTableDefinition);
|
||||
|
||||
onSaveCallback({pivotTableJson: JSON.stringify(modalPivotTableDefinition)});
|
||||
|
||||
closeEditor();
|
||||
}
|
||||
|
||||
|
||||
////////////
|
||||
// render //
|
||||
////////////
|
||||
return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
|
||||
{
|
||||
<React.Fragment>
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{
|
||||
enabled &&
|
||||
<Box display="flex" justifyContent="space-between">
|
||||
<Box>
|
||||
{
|
||||
showHelp("sectionSubhead") &&
|
||||
<Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
|
||||
{getHelpContent("sectionSubhead")}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
{
|
||||
isEditable &&
|
||||
<Tooltip title={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle}>
|
||||
<span>
|
||||
<Button disabled={editPopupDisabled} onClick={() => openEditor()} sx={{p: 0}} disableRipple>
|
||||
<Typography display="inline" textTransform="none" fontSize={"1.125rem"}>
|
||||
Edit Pivot Table
|
||||
</Typography>
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
{
|
||||
(!enabled || !pivotTableDefinition) && !isEditable &&
|
||||
<Box fontSize="1rem">Your report does not use a Pivot Table.</Box>
|
||||
}
|
||||
{
|
||||
enabled && pivotTableDefinition &&
|
||||
<>
|
||||
<Grid container spacing="16">
|
||||
|
||||
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "rows")}</Grid>
|
||||
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(false, "columns")}</Grid>
|
||||
<Grid item lg={4} md={6} xs={12}>{renderValues(false)}</Grid>
|
||||
|
||||
</Grid>
|
||||
{
|
||||
modalOpen &&
|
||||
<Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
|
||||
<div>
|
||||
<Box sx={{position: "absolute", width: "100%"}}>
|
||||
<Card sx={{m: "2rem", p: "2rem", overflowY: "auto", height: "calc(100vh - 4rem)"}}>
|
||||
<h3>Edit Pivot Table</h3>
|
||||
{
|
||||
showHelp("modalSubheader") &&
|
||||
<Box color={colors.gray.main}>
|
||||
{getHelpContent("modalSubheader")}
|
||||
</Box>
|
||||
}
|
||||
{
|
||||
errorAlert && <Alert icon={<Icon>error_outline</Icon>} color="error" onClose={() => setErrorAlert(null)}>{errorAlert}</Alert>
|
||||
}
|
||||
<Grid container spacing="16" overflow="auto" mt="0.5rem" mb="1rem" height="100%">
|
||||
|
||||
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "rows")}</Grid>
|
||||
<Grid item lg={4} md={6} xs={12}>{renderGroupBys(true, "columns")}</Grid>
|
||||
<Grid item lg={4} md={6} xs={12}>{renderValues(true)}</Grid>
|
||||
|
||||
</Grid>
|
||||
<Box>
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<QCancelButton disabled={false} onClickHandler={closeEditor} />
|
||||
<QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</DndProvider>
|
||||
</React.Fragment>
|
||||
}
|
||||
</Widget>);
|
||||
}
|
||||
|
||||
/* this was a rough-draft of what a preview of a pivot could look like...
|
||||
<Box mt={"1rem"}>
|
||||
<h5>Preview</h5>
|
||||
<table>
|
||||
<tr>
|
||||
<th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
|
||||
<th style={{textAlign: "left", fontSize: "0.875rem"}}>Column Labels</th>
|
||||
</tr>
|
||||
{
|
||||
pivotTableDefinition?.columns?.map((column, i) =>
|
||||
(
|
||||
<tr key={column.key}>
|
||||
<th style={{textAlign: "left", fontSize: "0.875rem"}}></th>
|
||||
<th style={{textAlign: "left", fontSize: "0.875rem"}}>{column.fieldName}</th>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
<tr>
|
||||
<th style={{textAlign: "left", fontSize: "0.875rem"}}>Row Labels</th>
|
||||
{
|
||||
pivotTableDefinition?.values?.map((value, i) =>
|
||||
(
|
||||
<th key={value.key} style={{textAlign: "left", fontSize: "0.875rem"}}>{value.function} of {value.fieldName}</th>
|
||||
))
|
||||
}
|
||||
</tr>
|
||||
{
|
||||
pivotTableDefinition?.rows?.map((row, i) =>
|
||||
(
|
||||
<tr key={row.key}>
|
||||
<th style={{textAlign: "left", fontSize: "0.875rem", paddingLeft: (i * 1) + "rem"}}>{row.fieldName}</th>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</table>
|
||||
</Box>
|
||||
*/
|
||||
316
src/qqq/components/widgets/misc/PivotTableValueElement.tsx
Normal file
316
src/qqq/components/widgets/misc/PivotTableValueElement.tsx
Normal file
@ -0,0 +1,316 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import type {Identifier, XYCoord} from "dnd-core";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
|
||||
import {DragItemTypes, fieldAutoCompleteTextFieldSX, getSelectedFieldForAutoComplete, xIconButtonSX} from "qqq/components/widgets/misc/PivotTableSetupWidget";
|
||||
import {functionsPerFieldType, PivotTableDefinition, pivotTableFunctionLabels, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
|
||||
import React, {FC, useReducer, useRef, useState} from "react";
|
||||
import {useDrag, useDrop} from "react-dnd";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** component props
|
||||
*******************************************************************************/
|
||||
export interface PivotTableValueElementProps
|
||||
{
|
||||
id: string;
|
||||
index: number;
|
||||
dragCallback: (dragIndex: number, hoverIndex: number) => void;
|
||||
metaData: QInstance;
|
||||
tableMetaData: QTableMetaData;
|
||||
pivotTableDefinition: PivotTableDefinition;
|
||||
availableFieldNames: string[];
|
||||
isEditable: boolean;
|
||||
value: PivotTableValue;
|
||||
callback: () => void;
|
||||
attemptedSubmit?: boolean;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** item to support react-dnd
|
||||
*******************************************************************************/
|
||||
interface DragItem
|
||||
{
|
||||
index: number;
|
||||
id: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Element to render 1 pivot-table value.
|
||||
*******************************************************************************/
|
||||
export const PivotTableValueElement: FC<PivotTableValueElementProps> = ({id, index, dragCallback, metaData, tableMetaData, pivotTableDefinition, availableFieldNames, value, isEditable, callback, attemptedSubmit}) =>
|
||||
{
|
||||
const [defaultFunctionValue, setDefaultFunctionValue] = useState(null);
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// credit: https://react-dnd.github.io/react-dnd/examples/sortable/simple //
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [{handlerId}, drop] = useDrop<DragItem, void, { handlerId: Identifier | null }>(
|
||||
{
|
||||
accept: DragItemTypes.VALUE,
|
||||
collect(monitor)
|
||||
{
|
||||
return {
|
||||
handlerId: monitor.getHandlerId(),
|
||||
};
|
||||
},
|
||||
hover(item: DragItem, monitor)
|
||||
{
|
||||
if (!ref.current)
|
||||
{
|
||||
return;
|
||||
}
|
||||
const dragIndex = item.index;
|
||||
const hoverIndex = index;
|
||||
|
||||
// Don't replace items with themselves
|
||||
if (dragIndex === hoverIndex)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine rectangle on screen
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect();
|
||||
|
||||
// Get vertical middle
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
||||
|
||||
// Determine mouse position
|
||||
const clientOffset = monitor.getClientOffset();
|
||||
|
||||
// Get pixels to the top
|
||||
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
|
||||
|
||||
// Only perform the move when the mouse has crossed half of the items height
|
||||
// When dragging downwards, only move when the cursor is below 50%
|
||||
// When dragging upwards, only move when the cursor is above 50%
|
||||
|
||||
// Dragging downwards
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Dragging upwards
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Time to actually perform the action
|
||||
dragCallback(dragIndex, hoverIndex);
|
||||
|
||||
// Note: we're mutating the monitor item here! Generally it's better to avoid mutations,
|
||||
// but it's good here for the sake of performance to avoid expensive index searches.
|
||||
item.index = hoverIndex;
|
||||
},
|
||||
});
|
||||
|
||||
const [{isDragging}, drag] = useDrag({
|
||||
type: DragItemTypes.VALUE,
|
||||
item: () =>
|
||||
{
|
||||
return {id, index};
|
||||
},
|
||||
collect: (monitor: any) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getFunctionsForField(field: QFieldMetaData)
|
||||
{
|
||||
if(field)
|
||||
{
|
||||
let type = field.type;
|
||||
if (field.possibleValueSourceName)
|
||||
{
|
||||
type = QFieldType.STRING;
|
||||
}
|
||||
|
||||
if(functionsPerFieldType[type])
|
||||
{
|
||||
return (functionsPerFieldType[type]);
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////////////
|
||||
// return broadest list if no field //
|
||||
//////////////////////////////////////
|
||||
return (functionsPerFieldType[QFieldType.INTEGER]);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** event handler for user selecting a field
|
||||
*******************************************************************************/
|
||||
function handleFieldChange(event: any, newValue: any, reason: string)
|
||||
{
|
||||
value.fieldName = newValue ? newValue.fieldName : null;
|
||||
|
||||
if(newValue)
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if newly selected field doesn't have the currently selected function, then clear it //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
const newSelectedField = getSelectedFieldForAutoComplete(tableMetaData, newValue.fieldName);
|
||||
if (newSelectedField)
|
||||
{
|
||||
if(getFunctionsForField(newSelectedField.field).indexOf(value.function) == -1)
|
||||
{
|
||||
setDefaultFunctionValue(null);
|
||||
handleFunctionChange(null, null, null);
|
||||
forceUpdate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
callback();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** event handler for user selecting a function
|
||||
*******************************************************************************/
|
||||
function handleFunctionChange(event: any, newValue: any, reason: string)
|
||||
{
|
||||
value.function = newValue ? newValue.id : null;
|
||||
callback();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** event handler for clicking remove button
|
||||
*******************************************************************************/
|
||||
function removeValue(index: number)
|
||||
{
|
||||
pivotTableDefinition.values.splice(index, 1);
|
||||
callback();
|
||||
}
|
||||
|
||||
const selectedField = getSelectedFieldForAutoComplete(tableMetaData, value.fieldName);
|
||||
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
// if we're not on an edit screen, return a simpler read-only view //
|
||||
/////////////////////////////////////////////////////////////////////
|
||||
if (!isEditable)
|
||||
{
|
||||
let label = "--";
|
||||
if (selectedField && value.function)
|
||||
{
|
||||
label = pivotTableFunctionLabels[value.function] + " of " + (selectedField.table.name == tableMetaData.name ? selectedField.field.label : selectedField.table.label + ": " + selectedField.field.label);
|
||||
}
|
||||
|
||||
return (<Box><Box display="inline-block" mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">{label}</Box></Box>);
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
// figure out functions to display in drop down, plus selected/default value //
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
const functionOptions: any[] = [];
|
||||
const availableFunctions = getFunctionsForField(selectedField?.field);
|
||||
for (let pivotTableFunction of availableFunctions)
|
||||
{
|
||||
const label = pivotTableFunctionLabels[pivotTableFunction];
|
||||
const option = {id: pivotTableFunction, label: label};
|
||||
functionOptions.push(option);
|
||||
|
||||
if (option.id == value.function && JSON.stringify(option) != JSON.stringify(defaultFunctionValue))
|
||||
{
|
||||
setDefaultFunctionValue(option);
|
||||
}
|
||||
}
|
||||
|
||||
drag(drop(ref));
|
||||
|
||||
const showValueError = attemptedSubmit && !value.fieldName;
|
||||
const showFunctionError = attemptedSubmit && !value.function;
|
||||
|
||||
return (<Box ref={ref} display="flex" p="0.5rem" pl="0" gap="0.5rem" alignItems="center" sx={{backgroundColor: "white", opacity: isDragging ? 0 : 1}} data-handler-id={handlerId}>
|
||||
<Box>
|
||||
<Icon sx={{cursor: "ns-resize"}}>drag_indicator</Icon>
|
||||
</Box>
|
||||
<Box width="100%">
|
||||
<FieldAutoComplete
|
||||
id={`values-field-${index}`}
|
||||
label={null}
|
||||
variant="outlined"
|
||||
textFieldSX={fieldAutoCompleteTextFieldSX}
|
||||
metaData={metaData}
|
||||
tableMetaData={tableMetaData}
|
||||
handleFieldChange={handleFieldChange}
|
||||
availableFieldNames={availableFieldNames}
|
||||
defaultValue={selectedField}
|
||||
hasError={showValueError}
|
||||
/>
|
||||
</Box>
|
||||
<Box width="370px">
|
||||
<Autocomplete
|
||||
id={`values-function-${index}`}
|
||||
renderInput={(params) =>
|
||||
{
|
||||
const inputProps = params.InputProps;
|
||||
const originalEndAdornment = inputProps.endAdornment;
|
||||
inputProps.endAdornment = <Box>
|
||||
{showFunctionError && <Icon color="error">error_outline</Icon>}
|
||||
{originalEndAdornment}
|
||||
</Box>;
|
||||
|
||||
return (<TextField {...params} label={null} variant="outlined" sx={fieldAutoCompleteTextFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
|
||||
}}
|
||||
// @ts-ignore
|
||||
value={defaultFunctionValue}
|
||||
inputValue={defaultFunctionValue?.label ?? ""}
|
||||
options={functionOptions}
|
||||
onChange={handleFunctionChange}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
getOptionLabel={(option) => option.label}
|
||||
autoSelect={true}
|
||||
autoHighlight={true}
|
||||
disableClearable
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Button sx={xIconButtonSX} onClick={() => removeValue(index)}><Icon>clear</Icon></Button>
|
||||
</Box>
|
||||
</Box>);
|
||||
|
||||
};
|
||||
348
src/qqq/components/widgets/misc/ReportSetupWidget.tsx
Normal file
348
src/qqq/components/widgets/misc/ReportSetupWidget.tsx
Normal file
@ -0,0 +1,348 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
||||
import {Alert, Collapse} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import AdvancedQueryPreview from "qqq/components/query/AdvancedQueryPreview";
|
||||
import Widget, {HeaderLinkButtonComponent} from "qqq/components/widgets/Widget";
|
||||
import QQueryColumns, {Column} from "qqq/models/query/QQueryColumns";
|
||||
import RecordQuery from "qqq/pages/records/query/RecordQuery";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import FilterUtils from "qqq/utils/qqq/FilterUtils";
|
||||
import React, {useContext, useEffect, useRef, useState} from "react";
|
||||
|
||||
interface ReportSetupWidgetProps
|
||||
{
|
||||
isEditable: boolean;
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
recordValues: {[name: string]: any};
|
||||
onSaveCallback?: (values: {[name: string]: any}) => void;
|
||||
}
|
||||
|
||||
ReportSetupWidget.defaultProps = {
|
||||
onSaveCallback: null
|
||||
};
|
||||
|
||||
export const buttonSX =
|
||||
{
|
||||
border: `1px solid ${colors.grayLines.main} !important`,
|
||||
borderRadius: "0.75rem",
|
||||
textTransform: "none",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "400",
|
||||
paddingLeft: "1rem",
|
||||
paddingRight: "1rem",
|
||||
opacity: "1",
|
||||
color: colors.dark.main,
|
||||
"&:hover": {color: colors.dark.main},
|
||||
"&:focus": {color: colors.dark.main},
|
||||
"&:focus:not(:hover)": {color: colors.dark.main},
|
||||
};
|
||||
|
||||
export const unborderedButtonSX = Object.assign({}, buttonSX);
|
||||
unborderedButtonSX.border = "none !important";
|
||||
unborderedButtonSX.opacity = "0.7";
|
||||
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
/*******************************************************************************
|
||||
** Component for editing the main setup of a report - that is: filter & columns
|
||||
*******************************************************************************/
|
||||
export default function ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element
|
||||
{
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
|
||||
|
||||
const [alertContent, setAlertContent] = useState(null as string);
|
||||
|
||||
const {helpHelpActive} = useContext(QContext);
|
||||
|
||||
const recordQueryRef = useRef();
|
||||
|
||||
|
||||
/////////////////////////////
|
||||
// load values from record //
|
||||
/////////////////////////////
|
||||
let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
|
||||
if(!queryFilter)
|
||||
{
|
||||
queryFilter = new QQueryFilter();
|
||||
}
|
||||
|
||||
let columns = recordValues["columnsJson"] && JSON.parse(recordValues["columnsJson"]) as QQueryColumns;
|
||||
if(!columns)
|
||||
{
|
||||
columns = new QQueryColumns();
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
// load tableMetaData initially, and if/when selected table changes //
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
|
||||
setTableMetaData(tableMetaData);
|
||||
})();
|
||||
}
|
||||
}, [recordValues]);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function openEditor()
|
||||
{
|
||||
if(recordValues["tableName"])
|
||||
{
|
||||
setModalOpen(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function saveClicked()
|
||||
{
|
||||
if(!onSaveCallback)
|
||||
{
|
||||
console.log("onSaveCallback was not defined");
|
||||
return;
|
||||
}
|
||||
|
||||
// @ts-ignore possibly 'undefined'.
|
||||
const view = recordQueryRef?.current?.getCurrentView();
|
||||
|
||||
view.queryColumns.sortColumnsFixingPinPositions();
|
||||
|
||||
onSaveCallback({queryFilterJson: JSON.stringify(view.queryFilter), columnsJson: JSON.stringify(view.queryColumns)});
|
||||
|
||||
closeEditor();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
|
||||
{
|
||||
if(reason == "backdropClick" || reason == "escapeKeyDown")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
setModalOpen(false);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderColumn(column: Column): JSX.Element
|
||||
{
|
||||
const [field, table] = FilterUtils.getField(tableMetaData, column.name)
|
||||
|
||||
if(!column || !column.isVisible || column.name == "__check__" || !field)
|
||||
{
|
||||
return (<React.Fragment />);
|
||||
}
|
||||
|
||||
const tableLabelPart = table.name != tableMetaData.name ? table.label + ": " : "";
|
||||
|
||||
return (<Box mr="0.375rem" mb="0.5rem" border={`1px solid ${colors.grayLines.main}`} borderRadius="0.75rem" p="0.25rem 0.75rem">
|
||||
{tableLabelPart}{field.label}
|
||||
</Box>);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function mayShowQueryPreview(): boolean
|
||||
{
|
||||
if(tableMetaData)
|
||||
{
|
||||
if(queryFilter?.criteria?.length > 0 || queryFilter?.subFilters?.length > 0)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
}
|
||||
|
||||
return (false);
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function mayShowColumnsPreview(): boolean
|
||||
{
|
||||
if(tableMetaData)
|
||||
{
|
||||
for(let i = 0; i<columns?.columns?.length; i++)
|
||||
{
|
||||
if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (false);
|
||||
}
|
||||
|
||||
const helpRoles = isEditable ? [recordValues["id"] ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"] : ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function showHelp(slot: string)
|
||||
{
|
||||
return (helpHelpActive || hasHelpContent(widgetMetaData?.helpContent?.get(slot), helpRoles));
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getHelpContent(slot: string)
|
||||
{
|
||||
const key = `widget:${widgetMetaData.name};slot:${slot}`;
|
||||
return <HelpContent helpContents={widgetMetaData?.helpContent?.get(slot)} roles={helpRoles} helpContentKey={key} />;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
// add link to widget header for opening modal //
|
||||
/////////////////////////////////////////////////
|
||||
const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
|
||||
const labelAdditionalElementsRight: JSX.Element[] = []
|
||||
if(isEditable)
|
||||
{
|
||||
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
|
||||
}
|
||||
|
||||
|
||||
return (<Widget widgetMetaData={widgetMetaData} labelAdditionalElementsRight={labelAdditionalElementsRight}>
|
||||
<React.Fragment>
|
||||
{
|
||||
showHelp("sectionSubhead") &&
|
||||
<Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"}>
|
||||
{getHelpContent("sectionSubhead")}
|
||||
</Box>
|
||||
}
|
||||
<Collapse in={Boolean(alertContent)}>
|
||||
<Alert severity="error" sx={{mt: 1.5, mb: 0.5}} onClose={() => setAlertContent(null)}>{alertContent}</Alert>
|
||||
</Collapse>
|
||||
<Box pt="0.5rem">
|
||||
<h5>Query Filter</h5>
|
||||
{
|
||||
mayShowQueryPreview() &&
|
||||
<AdvancedQueryPreview tableMetaData={tableMetaData} queryFilter={queryFilter} isEditable={false} isQueryTooComplex={queryFilter.subFilters?.length > 0} removeCriteriaByIndexCallback={null} />
|
||||
}
|
||||
{
|
||||
!mayShowQueryPreview() &&
|
||||
<Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.5rem"} p={"0.5rem"} pb={"0.125rem"} borderRadius="0.75rem" border={`1px solid ${colors.grayLines.main}`}>
|
||||
{
|
||||
isEditable &&
|
||||
<Tooltip title={selectTableFirstTooltipTitle}>
|
||||
<span><Button disabled={!recordValues["tableName"]} sx={{mb: "0.125rem", ...unborderedButtonSX}} onClick={openEditor}>+ Add Filters</Button></span>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
!isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
<Box pt="1rem">
|
||||
<h5>Columns</h5>
|
||||
<Box display="flex" flexWrap="wrap" fontSize="1rem">
|
||||
{
|
||||
mayShowColumnsPreview() &&
|
||||
columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
|
||||
}
|
||||
{
|
||||
!mayShowColumnsPreview() &&
|
||||
<Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
|
||||
{
|
||||
isEditable &&
|
||||
<Tooltip title={selectTableFirstTooltipTitle}>
|
||||
<span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
!isEditable && <Box color={colors.gray.main}>Your report has no columns.</Box>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
{
|
||||
modalOpen &&
|
||||
<Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
|
||||
<div>
|
||||
<Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
|
||||
<Card sx={{m: "2rem", p: "2rem"}}>
|
||||
<h3>Edit Filters and Columns</h3>
|
||||
{
|
||||
showHelp("modalSubheader") &&
|
||||
<Box color={colors.gray.main} pb={"0.5rem"}>
|
||||
{getHelpContent("modalSubheader")}
|
||||
</Box>
|
||||
}
|
||||
{
|
||||
tableMetaData && <RecordQuery
|
||||
ref={recordQueryRef}
|
||||
table={tableMetaData}
|
||||
usage="reportSetup"
|
||||
isModal={true} />
|
||||
}
|
||||
|
||||
<Box>
|
||||
<Box display="flex" justifyContent="flex-end">
|
||||
<QCancelButton disabled={false} onClickHandler={closeEditor} />
|
||||
<QSaveButton label="OK" iconName="check" disabled={false} onClickHandler={saveClicked} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
</React.Fragment>
|
||||
</Widget>);
|
||||
}
|
||||
Reference in New Issue
Block a user