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

42
src/qqq/components/misc/FieldAutoComplete.tsx
View File

@ -23,7 +23,9 @@
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
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";
import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
import Icon from "@mui/material/Icon";
import TextField from "@mui/material/TextField";
import React, {ReactNode, useState} from "react";
@ -33,14 +35,16 @@ interface FieldAutoCompleteProps
metaData: QInstance;
tableMetaData: QTableMetaData;
handleFieldChange: (event: any, newValue: any, reason: string) => void;
defaultValue?: {field: QFieldMetaData, table: QTableMetaData, fieldName: string};
defaultValue?: { field: QFieldMetaData, table: QTableMetaData, fieldName: string };
autoFocus?: boolean;
forceOpen?: boolean;
hiddenFieldNames?: string[];
availableFieldNames?: string[];
variant?: "standard" | "filled" | "outlined"
label?: string
textFieldSX?: any
variant?: "standard" | "filled" | "outlined";
label?: string;
textFieldSX?: any;
autocompleteSlotProps?: any;
hasError?: boolean;
}
FieldAutoComplete.defaultProps =
@ -53,6 +57,8 @@ FieldAutoComplete.defaultProps =
variant: "standard",
label: "Field",
textFieldSX: null,
autocompleteSlotProps: null,
hasError: false,
};
function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: any[], isJoinTable: boolean, hiddenFieldNames: string[], availableFieldNames: string[], selectedFieldName: string)
@ -62,12 +68,12 @@ function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: a
{
const fieldName = isJoinTable ? `${tableMetaData.name}.${sortedFields[i].name}` : sortedFields[i].name;
if(hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1 && fieldName != selectedFieldName)
if (hiddenFieldNames && hiddenFieldNames.indexOf(fieldName) > -1 && fieldName != selectedFieldName)
{
continue;
}
if(availableFieldNames && availableFieldNames.indexOf(fieldName) == -1)
if (availableFieldNames && availableFieldNames.indexOf(fieldName) == -1)
{
continue;
}
@ -80,9 +86,9 @@ function makeFieldOptionsForTable(tableMetaData: QTableMetaData, fieldOptions: a
/*******************************************************************************
** Component for rendering a list of field names from a table as an auto-complete.
*******************************************************************************/
export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames, availableFieldNames, variant, label, textFieldSX}: FieldAutoCompleteProps): JSX.Element
export default function FieldAutoComplete({id, metaData, tableMetaData, handleFieldChange, defaultValue, autoFocus, forceOpen, hiddenFieldNames, availableFieldNames, variant, label, textFieldSX, autocompleteSlotProps, hasError}: FieldAutoCompleteProps): JSX.Element
{
const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null)
const [selectedFieldName, setSelectedFieldName] = useState(defaultValue ? defaultValue.fieldName : null);
const fieldOptions: any[] = [];
makeFieldOptionsForTable(tableMetaData, fieldOptions, false, hiddenFieldNames, availableFieldNames, selectedFieldName);
@ -149,8 +155,8 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
// seems like, if we always add the open attribute, then if its false or null, then the autocomplete //
// doesn't open at all... so, only add the attribute at all, if forceOpen is true //
///////////////////////////////////////////////////////////////////////////////////////////////////////
const alsoOpen: {[key: string]: any} = {}
if(forceOpen)
const alsoOpen: { [key: string]: any } = {};
if (forceOpen)
{
alsoOpen["open"] = forceOpen;
}
@ -161,14 +167,24 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
*******************************************************************************/
function onChange(event: any, newValue: any, reason: string)
{
setSelectedFieldName(newValue ? newValue.fieldName : null)
setSelectedFieldName(newValue ? newValue.fieldName : null);
handleFieldChange(event, newValue, reason);
}
return (
<Autocomplete
id={id}
renderInput={(params) => (<TextField {...params} autoFocus={autoFocus} label={label} variant={variant} sx={textFieldSX} autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
renderInput={(params) =>
{
const inputProps = params.InputProps;
const originalEndAdornment = inputProps.endAdornment;
inputProps.endAdornment = <Box>
{hasError && <Icon color="error">error_outline</Icon>}
{originalEndAdornment}
</Box>;
return (<TextField {...params} autoFocus={autoFocus} label={label} variant={variant} sx={textFieldSX} autoComplete="off" type="search" InputProps={inputProps} />)
}}
// @ts-ignore
defaultValue={defaultValue}
options={fieldOptions}
@ -179,7 +195,7 @@ export default function FieldAutoComplete({id, metaData, tableMetaData, handleFi
renderOption={(props, option, state) => renderFieldOption(props, option, state)}
autoSelect={true}
autoHighlight={true}
slotProps={{popper: {className: "filterCriteriaRowColumnPopper", style: {padding: 0, width: "250px"}}}}
slotProps={autocompleteSlotProps ?? {}}
{...alsoOpen}
/>