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

CE-1115 pre-QA commit on saved report UI, including:

Browse Source 
- redo pivots so editing is in a modal
- add form validations
- field rules for clearing one field when another changes
This commit is contained in:
darin.kelkhoff
2024-04-14 20:10:29 -05:00
parent 2c0725852e
commit eafd8d98cd
19 changed files with 1168 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/qqq/components/widgets/misc/PivotTableGroupByElement.tsx
View File

@ -51,6 +51,7 @@ export interface PivotTableGroupByElementProps
groupBy: PivotTableGroupBy;
rowsOrColumns: "rows" | "columns";
callback: () => void;
attemptedSubmit?: boolean;
}
@ -67,7 +68,7 @@ interface DragItem
/*******************************************************************************
**
*******************************************************************************/
export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id, index, dragCallback, rowsOrColumns, metaData, tableMetaData, pivotTableDefinition, groupBy, usedGroupByFieldNames, availableFieldNames, isEditable, callback}) =>
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 //
@ -171,7 +172,7 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
if (selectedField)
{
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">{label}</Box>);
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 />);
@ -179,6 +180,8 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
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>
@ -195,6 +198,7 @@ export const PivotTableGroupByElement: FC<PivotTableGroupByElementProps> = ({id,
hiddenFieldNames={usedGroupByFieldNames}
availableFieldNames={availableFieldNames}
defaultValue={getSelectedFieldForAutoComplete(tableMetaData, groupBy.fieldName)}
hasError={showError}
/>
</Box>
<Box>