Compare commits

..

3 Commits

18 changed files with 142 additions and 412 deletions

View File

@ -6,7 +6,7 @@
"@auth0/auth0-react": "1.10.2", "@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1", "@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0", "@emotion/styled": "11.6.0",
"@kingsrook/qqq-frontend-core": "1.0.104", "@kingsrook/qqq-frontend-core": "1.0.102",
"@mui/icons-material": "5.4.1", "@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1", "@mui/material": "5.11.1",
"@mui/styles": "5.11.1", "@mui/styles": "5.11.1",
@ -59,7 +59,7 @@
"build": "react-scripts build", "build": "react-scripts build",
"clean": "rm -rf node_modules package-lock.json lib", "clean": "rm -rf node_modules package-lock.json lib",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps && npm dedupe --force", "clean-and-install": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf lib/ && npm install --legacy-peer-deps",
"npm-install": "npm install --legacy-peer-deps", "npm-install": "npm install --legacy-peer-deps",
"prepublishOnly": "tsc -p ./ --outDir lib/", "prepublishOnly": "tsc -p ./ --outDir lib/",
"start": "BROWSER=none react-scripts --max-http-header-size=65535 start", "start": "BROWSER=none react-scripts --max-http-header-size=65535 start",

View File

@ -72,7 +72,7 @@ const CommandMenu = ({metaData}: Props) =>
const navigate = useNavigate(); const navigate = useNavigate();
const pathParts = location.pathname.replace(/\/+$/, "").split("/"); const pathParts = location.pathname.replace(/\/+$/, "").split("/");
const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses, recordAnalytics} = useContext(QContext); const {accentColor, tableMetaData, dotMenuOpen, setDotMenuOpen, keyboardHelpOpen, setKeyboardHelpOpen, setTableMetaData, tableProcesses} = useContext(QContext);
const classes = useStyles(); const classes = useStyles();
@ -87,7 +87,6 @@ const CommandMenu = ({metaData}: Props) =>
if (e.key === "." && !keyboardHelpOpen) if (e.key === "." && !keyboardHelpOpen)
{ {
e.preventDefault(); e.preventDefault();
recordAnalytics({category: "globalEvents", action: "dotMenuKeyboardShortcut"});
setDotMenuOpen(true); setDotMenuOpen(true);
} }
else if (e.key === "?" && !dotMenuOpen) else if (e.key === "?" && !dotMenuOpen)
@ -424,20 +423,9 @@ const CommandMenu = ({metaData}: Props) =>
///////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////
// iterate over the search parts - if any don't match the corresponding value parts, then it's a non-match // // iterate over the search parts - if any don't match the corresponding value parts, then it's a non-match //
///////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////
let valueIndex = 0;
for (let i = 0; i < searchParts.length; i++) for (let i = 0; i < searchParts.length; i++)
{ {
let foundMatch = false; if (!valueParts[i].includes(searchParts[i]))
for (; valueIndex < valueParts.length; valueIndex++)
{
if (valueParts[valueIndex].includes(searchParts[i]))
{
foundMatch = true;
break;
}
}
if (!foundMatch)
{ {
return (0); return (0);
} }

View File

@ -19,17 +19,16 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import {Box, InputAdornment, InputLabel} from "@mui/material"; import {InputAdornment, InputLabel} from "@mui/material";
import Box from "@mui/material/Box";
import Switch from "@mui/material/Switch"; import Switch from "@mui/material/Switch";
import {ErrorMessage, Field, useFormikContext} from "formik"; import {ErrorMessage, Field, useFormikContext} from "formik";
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils"; import React, {useState} from "react";
import React, {useMemo, useState} from "react";
import AceEditor from "react-ace"; import AceEditor from "react-ace";
import colors from "qqq/assets/theme/base/colors"; import colors from "qqq/assets/theme/base/colors";
import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch"; import BooleanFieldSwitch from "qqq/components/forms/BooleanFieldSwitch";
import MDInput from "qqq/components/legacy/MDInput"; import MDInput from "qqq/components/legacy/MDInput";
import MDTypography from "qqq/components/legacy/MDTypography"; import MDTypography from "qqq/components/legacy/MDTypography";
import {flushSync} from "react-dom";
// Declaring props types for FormField // Declaring props types for FormField
interface Props interface Props
@ -86,51 +85,6 @@ function QDynamicFormField({
} }
}; };
///////////////////////////////////////////////////////////////////////////////////////
// check the field meta data for behavior that says to do toUpperCase or toLowerCase //
///////////////////////////////////////////////////////////////////////////////////////
let isToUpperCase = useMemo(() => DynamicFormUtils.isToUpperCase(formFieldObject?.fieldMetaData), [formFieldObject]);
let isToLowerCase = useMemo(() => DynamicFormUtils.isToLowerCase(formFieldObject?.fieldMetaData), [formFieldObject]);
////////////////////////////////////////////////////////////////////////
// if the field has a toUpperCase or toLowerCase behavior on it, then //
// apply that rule. But also, to avoid the cursor always jumping to //
// the end of the input, do some manipulation of the selection. //
// See: https://giacomocerquone.com/blog/keep-input-cursor-still //
// Note, we only want an onChange handle if we're doing one of these //
// behaviors, (because teh flushSync is potentially slow). hence, we //
// put the onChange in an object and assign it with a spread //
////////////////////////////////////////////////////////////////////////
let onChange: any = {};
if (isToUpperCase || isToLowerCase)
{
onChange.onChange = (e: any) =>
{
const beforeStart = e.target.selectionStart;
const beforeEnd = e.target.selectionEnd;
flushSync(() =>
{
let newValue = e.currentTarget.value;
if (isToUpperCase)
{
newValue = newValue.toUpperCase();
}
if (isToLowerCase)
{
newValue = newValue.toLowerCase();
}
setFieldValue(name, newValue);
});
const input = document.getElementById(name) as HTMLInputElement;
if (input)
{
input.setSelectionRange(beforeStart, beforeEnd);
}
};
}
let field; let field;
let getsBulkEditHtmlLabel = true; let getsBulkEditHtmlLabel = true;
if (type === "checkbox") if (type === "checkbox")
@ -148,7 +102,7 @@ function QDynamicFormField({
else if (type === "ace") else if (type === "ace")
{ {
let mode = "text"; let mode = "text";
if (formFieldObject && formFieldObject.languageMode) if(formFieldObject && formFieldObject.languageMode)
{ {
mode = formFieldObject.languageMode; mode = formFieldObject.languageMode;
} }
@ -179,7 +133,7 @@ function QDynamicFormField({
{ {
field = ( field = (
<> <>
<Field {...rest} {...onChange} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled} <Field {...rest} onWheel={handleOnWheel} name={name} type={type} as={MDInput} variant="outlined" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled}
onKeyPress={(e: any) => onKeyPress={(e: any) =>
{ {
if (e.key === "Enter") if (e.key === "Enter")
@ -219,8 +173,7 @@ function QDynamicFormField({
id={`bulkEditSwitch-${name}`} id={`bulkEditSwitch-${name}`}
checked={switchChecked} checked={switchChecked}
onClick={bulkEditSwitchChanged} onClick={bulkEditSwitchChanged}
sx={{ sx={{top: "-4px",
top: "-4px",
"& .MuiSwitch-track": { "& .MuiSwitch-track": {
height: 20, height: 20,
borderRadius: 10, borderRadius: 10,

View File

@ -176,7 +176,7 @@ class DynamicFormUtils
initialDisplayValue: initialDisplayValue, initialDisplayValue: initialDisplayValue,
}; };
} }
else if (processName) else if(processName)
{ {
dynamicFormFields[field.name].possibleValueProps = dynamicFormFields[field.name].possibleValueProps =
{ {
@ -214,7 +214,7 @@ class DynamicFormUtils
if (Array.isArray(disabledFields)) if (Array.isArray(disabledFields))
{ {
return (disabledFields.indexOf(fieldName) > -1); return (disabledFields.indexOf(fieldName) > -1)
} }
else else
{ {
@ -222,44 +222,6 @@ class DynamicFormUtils
} }
} }
/***************************************************************************
* check if a field has the TO_UPPER_CASE behavior on it.
***************************************************************************/
public static isToUpperCase(fieldMetaData: QFieldMetaData): boolean
{
return this.hasBehavior(fieldMetaData, "TO_UPPER_CASE");
}
/***************************************************************************
* check if a field has the TO_LOWER_CASE behavior on it.
***************************************************************************/
public static isToLowerCase(fieldMetaData: QFieldMetaData): boolean
{
return this.hasBehavior(fieldMetaData, "TO_LOWER_CASE");
}
/***************************************************************************
* check if a field has a specific behavior name on it.
***************************************************************************/
private static hasBehavior(fieldMetaData: QFieldMetaData, behaviorName: string): boolean
{
if (fieldMetaData && fieldMetaData.behaviors)
{
for (let i = 0; i < fieldMetaData.behaviors.length; i++)
{
if (fieldMetaData.behaviors[i] == behaviorName)
{
return (true);
}
}
}
return (false);
}
} }
export default DynamicFormUtils; export default DynamicFormUtils;

View File

@ -97,7 +97,7 @@ export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
borderColor: inputBorderColor borderColor: inputBorderColor
} }
}); });
}; }
const qController = Client.getInstance(); const qController = Client.getInstance();
@ -108,36 +108,36 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
const [options, setOptions] = useState<readonly QPossibleValue[]>([]); const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
const [searchTerm, setSearchTerm] = useState(null); const [searchTerm, setSearchTerm] = useState(null);
const [firstRender, setFirstRender] = useState(true); const [firstRender, setFirstRender] = useState(true);
const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues)))); const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
useEffect(() => useEffect(() =>
{ {
if (tableName && processName) if(tableName && processName)
{ {
console.log("DynamicSelect - you may not provide both a tableName and a processName"); console.log("DynamicSelect - you may not provide both a tableName and a processName")
} }
if (tableName && !fieldName) if(tableName && !fieldName)
{ {
console.log("DynamicSelect - if you provide a tableName, you must also provide a fieldName"); console.log("DynamicSelect - if you provide a tableName, you must also provide a fieldName");
} }
if (processName && !fieldName) if(processName && !fieldName)
{ {
console.log("DynamicSelect - if you provide a processName, you must also provide a fieldName"); console.log("DynamicSelect - if you provide a processName, you must also provide a fieldName");
} }
if (!fieldName && !possibleValueSourceName) if(!fieldName && !possibleValueSourceName)
{ {
console.log("DynamicSelect - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName"); console.log("DynamicSelect - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName");
} }
if (fieldName && !possibleValueSourceName) if(fieldName && !possibleValueSourceName)
{ {
if (!tableName || !processName) if(!tableName || !processName)
{ {
console.log("DynamicSelect - if you provide a fieldName and not a possibleValueSourceName, then you must also provide a tableName or processName"); console.log("DynamicSelect - if you provide a fieldName and not a possibleValueSourceName, then you must also provide a tableName or processName");
} }
} }
if (possibleValueSourceName) if(possibleValueSourceName)
{ {
if (tableName || processName) if(tableName || processName)
{ {
console.log("DynamicSelect - if you provide a possibleValueSourceName, you should not also provide a tableName or processName"); console.log("DynamicSelect - if you provide a possibleValueSourceName, you should not also provide a tableName or processName");
} }
@ -173,7 +173,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
useEffect(() => useEffect(() =>
{ {
if (firstRender) if(firstRender)
{ {
// console.log("First render, so not searching..."); // console.log("First render, so not searching...");
setFirstRender(false); setFirstRender(false);
@ -196,7 +196,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
// console.log(`doing a search with ${searchTerm}`); // console.log(`doing a search with ${searchTerm}`);
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues); const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
if (tableMetaData == null && tableName) if(tableMetaData == null && tableName)
{ {
let tableMetaData: QTableMetaData = await qController.loadTableMetaData(tableName); let tableMetaData: QTableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData); setTableMetaData(tableMetaData);
@ -207,7 +207,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
// console.log(`${results}`); // console.log(`${results}`);
if (active) if (active)
{ {
setOptions([...results]); setOptions([ ...results ]);
} }
})(); })();
@ -215,12 +215,12 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
{ {
active = false; active = false;
}; };
}, [searchTerm]); }, [ searchTerm ]);
// todo - finish... call it in onOpen? // todo - finish... call it in onOpen?
const reloadIfOtherValuesAreChanged = () => const reloadIfOtherValuesAreChanged = () =>
{ {
if (JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded) if(JSON.stringify(Object.fromEntries(otherValues)) != otherValuesWhenResultsWereLoaded)
{ {
(async () => (async () =>
{ {
@ -229,16 +229,16 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
console.log("Refreshing possible values..."); console.log("Refreshing possible values...");
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues); const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
setLoading(false); setLoading(false);
setOptions([...results]); setOptions([ ...results ]);
setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues))); setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
})(); })();
} }
}; }
const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) => const inputChanged = (event: React.SyntheticEvent, value: string, reason: string) =>
{ {
// console.log(`input changed. Reason: ${reason}, setting search term to ${value}`); // console.log(`input changed. Reason: ${reason}, setting search term to ${value}`);
if (reason !== "reset") if(reason !== "reset")
{ {
// console.log(` -> setting search term to ${value}`); // console.log(` -> setting search term to ${value}`);
setSearchTerm(value); setSearchTerm(value);
@ -248,7 +248,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
const handleBlur = (x: any) => const handleBlur = (x: any) =>
{ {
setSearchTerm(null); setSearchTerm(null);
}; }
const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) => const handleChanged = (event: React.SyntheticEvent, value: any | any[], reason: string, details?: string) =>
{ {
@ -256,9 +256,9 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
// console.log(value); // console.log(value);
setSearchTerm(null); setSearchTerm(null);
if (onChange) if(onChange)
{ {
if (isMultiple) if(isMultiple)
{ {
onChange(value); onChange(value);
} }
@ -267,7 +267,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
onChange(value ? new QPossibleValue(value) : null); onChange(value ? new QPossibleValue(value) : null);
} }
} }
else if (setFieldValueRef && fieldName) else if(setFieldValueRef && fieldName)
{ {
setFieldValueRef(fieldName, value ? value.id : null); setFieldValueRef(fieldName, value ? value.id : null);
} }
@ -280,7 +280,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
// get options whose text/label matches the input (e.g., not ids that match) // // get options whose text/label matches the input (e.g., not ids that match) //
///////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////
return (options); return (options);
}; }
// @ts-ignore // @ts-ignore
const renderOption = (props: Object, option: any, {selected}) => const renderOption = (props: Object, option: any, {selected}) =>
@ -289,24 +289,23 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
try try
{ {
const field = tableMetaData?.fields.get(fieldName); const field = tableMetaData?.fields.get(fieldName)
if (field) if(field)
{ {
const adornment = field.getAdornment(AdornmentType.CHIP); const adornment = field.getAdornment(AdornmentType.CHIP);
if (adornment) if(adornment)
{ {
const color = adornment.getValue("color." + option.id) ?? "default"; const color = adornment.getValue("color." + option.id) ?? "default"
const iconName = adornment.getValue("icon." + option.id) ?? null; const iconName = adornment.getValue("icon." + option.id) ?? null;
const iconElement = iconName ? <Icon>{iconName}</Icon> : null; const iconElement = iconName ? <Icon>{iconName}</Icon> : null;
content = (<Chip label={option.label} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />); content = (<Chip label={option.label} color={color} icon={iconElement} size="small" variant="outlined" sx={{fontWeight: 500}} />);
} }
} }
} }
catch (e) catch(e)
{ { }
}
if (isMultiple) if(isMultiple)
{ {
content = ( content = (
<> <>
@ -328,7 +327,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
{content} {content}
</li> </li>
); );
}; }
const bulkEditSwitchChanged = () => const bulkEditSwitchChanged = () =>
{ {
@ -358,7 +357,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
{ {
setOpen(true); setOpen(true);
// console.log("setting open..."); // console.log("setting open...");
if (options.length == 0) if(options.length == 0)
{ {
// console.log("no options yet, so setting search term to ''..."); // console.log("no options yet, so setting search term to ''...");
setSearchTerm(""); setSearchTerm("");
@ -371,19 +370,19 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
isOptionEqualToValue={(option, value) => value !== null && value !== undefined && option.id === value.id} isOptionEqualToValue={(option, value) => value !== null && value !== undefined && option.id === value.id}
getOptionLabel={(option) => getOptionLabel={(option) =>
{ {
if (option === null || option === undefined) if(option === null || option === undefined)
{ {
return (""); return ("");
} }
// @ts-ignore // @ts-ignore
if (option && option.length) if(option && option.length)
{ {
// @ts-ignore // @ts-ignore
option = option[0]; option = option[0];
} }
// @ts-ignore // @ts-ignore
return option.label; return option.label
}} }}
options={options} options={options}
loading={loading} loading={loading}
@ -447,8 +446,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
id={`bulkEditSwitch-${fieldName}`} id={`bulkEditSwitch-${fieldName}`}
checked={switchChecked} checked={switchChecked}
onClick={bulkEditSwitchChanged} onClick={bulkEditSwitchChanged}
sx={{ sx={{top: "-4px",
top: "-4px",
"& .MuiSwitch-track": { "& .MuiSwitch-track": {
height: 20, height: 20,
borderRadius: 10, borderRadius: 10,
@ -467,7 +465,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
else else
{ {
return ( return (
<Box> <Box mb={1.5}>
{autocomplete} {autocomplete}
</Box> </Box>
); );

View File

@ -396,16 +396,15 @@ function EntityForm(props: Props): JSX.Element
// if the widget metadata specifies a table name, set form values to that so widget knows which to use // // if the widget metadata specifies a table name, set form values to that so widget knows which to use //
// (for the case when it is not being specified by a separate field in the record) // // (for the case when it is not being specified by a separate field in the record) //
///////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////
if (widgetData?.tableName) if (widgetMetaData?.defaultValues?.has("tableName"))
{ {
formValues["tableName"] = widgetData?.tableName; formValues["tableName"] = widgetMetaData?.defaultValues.get("tableName");
} }
return <FilterAndColumnsSetupWidget return <FilterAndColumnsSetupWidget
key={formValues["tableName"]} // todo, is this good? it was added so that editing values actually re-renders... key={formValues["tableName"]} // todo, is this good? it was added so that editing values actually re-renders...
isEditable={true} isEditable={true}
widgetMetaData={widgetMetaData} widgetMetaData={widgetMetaData}
widgetData={widgetData}
recordValues={formValues} recordValues={formValues}
onSaveCallback={setFormFieldValuesFromWidget} onSaveCallback={setFormFieldValuesFromWidget}
/>; />;

View File

@ -63,7 +63,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
// strip away empty elements of the route (e.g., trailing slash(es)) // // strip away empty elements of the route (e.g., trailing slash(es)) //
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
if (route.length) if(route.length)
{ {
// @ts-ignore // @ts-ignore
route = route.filter(r => r != ""); route = route.filter(r => r != "");
@ -74,18 +74,18 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
const fullPathToLabel = (fullPath: string, route: string): string => const fullPathToLabel = (fullPath: string, route: string): string =>
{ {
if (fullPath.endsWith("/")) if(fullPath.endsWith("/"))
{ {
fullPath = fullPath.replace(/\/+$/, ""); fullPath = fullPath.replace(/\/+$/, "");
} }
if (pathToLabelMap && pathToLabelMap[fullPath]) if(pathToLabelMap && pathToLabelMap[fullPath])
{ {
return pathToLabelMap[fullPath]; return pathToLabelMap[fullPath];
} }
return (routeToLabel(route)); return (routeToLabel(route));
}; }
let pageTitle = branding?.appName ?? ""; let pageTitle = branding?.appName ?? "";
const fullRoutes: string[] = []; const fullRoutes: string[] = [];
@ -94,9 +94,9 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
{ {
//////////////////////////////////////////////////////// ////////////////////////////////////////////////////////
// avoid showing "saved view" as a breadcrumb element // // avoid showing "saved view" as a breadcrumb element //
// e.g., if at /app/table/savedView/1 // // e.g., if at /app/table/savedView/1 (so where i==2) //
//////////////////////////////////////////////////////// ////////////////////////////////////////////////////////
if (routes[i] === "savedView" && i == routes.length - 1) if(routes[i] === "savedView" && i == 2)
{ {
continue; continue;
} }
@ -106,12 +106,12 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
// e.g., when at /app/table/savedView/1 (so where i==1) // // e.g., when at /app/table/savedView/1 (so where i==1) //
// we want to just be showing "App" // // we want to just be showing "App" //
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
if (i < routes.length - 1 && routes[i + 1] == "savedView" && i == 1) if(i < routes.length - 1 && routes[i+1] == "savedView" && i == 1)
{ {
continue; continue;
} }
if (routes[i] === "") if(routes[i] === "")
{ {
continue; continue;
} }

View File

@ -19,15 +19,16 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import {Popper, InputAdornment, Box} from "@mui/material"; import {Popper, InputAdornment} from "@mui/material";
import AppBar from "@mui/material/AppBar"; import AppBar from "@mui/material/AppBar";
import Autocomplete from "@mui/material/Autocomplete"; import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon"; import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemIcon from "@mui/material/ListItemIcon";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import Toolbar from "@mui/material/Toolbar"; import Toolbar from "@mui/material/Toolbar";
import React, {useContext, useEffect, useRef, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {useLocation, useNavigate} from "react-router-dom"; import {useLocation, useNavigate} from "react-router-dom";
import QContext from "QContext"; import QContext from "QContext";
import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs"; import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
@ -44,8 +45,7 @@ interface Props
isMini?: boolean; isMini?: boolean;
} }
interface HistoryEntry interface HistoryEntry {
{
id: number; id: number;
path: string; path: string;
label: string; label: string;
@ -64,7 +64,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const route = useLocation().pathname.split("/").slice(1); const route = useLocation().pathname.split("/").slice(1);
const navigate = useNavigate(); const navigate = useNavigate();
const {pageHeader, setDotMenuOpen} = useContext(QContext); const {pageHeader} = useContext(QContext);
useEffect(() => useEffect(() =>
{ {
@ -99,7 +99,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const options = [] as any; const options = [] as any;
history.entries.reverse().forEach((entry, index) => history.entries.reverse().forEach((entry, index) =>
options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName}) options.push({label: `${entry.label} index`, id: index, key: index, path: entry.path, iconName: entry.iconName})
); )
setHistory(options); setHistory(options);
// Remove event listener on cleanup // Remove event listener on cleanup
@ -111,7 +111,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const goToHistory = (path: string) => const goToHistory = (path: string) =>
{ {
navigate(path); navigate(path);
}; }
function buildHistoryEntries() function buildHistoryEntries()
{ {
@ -119,7 +119,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const options = [] as any; const options = [] as any;
history.entries.reverse().forEach((entry, index) => history.entries.reverse().forEach((entry, index) =>
options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName}) options.push({label: entry.label, id: index, key: index, path: entry.path, iconName: entry.iconName})
); )
setHistory(options); setHistory(options);
} }
@ -133,12 +133,12 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const handleAutocompleteOnChange = (event: any, value: any, reason: any, details: any) => const handleAutocompleteOnChange = (event: any, value: any, reason: any, details: any) =>
{ {
if (value) if(value)
{ {
goToHistory(value.path); goToHistory(value.path);
} }
setAutocompleteValue(null); setAutocompleteValue(null);
}; }
const CustomPopper = function (props: any) const CustomPopper = function (props: any)
{ {
@ -146,8 +146,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
{...props} {...props}
style={{whiteSpace: "nowrap", width: "auto"}} style={{whiteSpace: "nowrap", width: "auto"}}
placement="bottom-end" placement="bottom-end"
/>); />)
}; }
const renderHistory = () => const renderHistory = () =>
{ {
@ -184,7 +184,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
)} )}
/> />
); );
}; }
// Styles for the navbar icons // Styles for the navbar icons
const iconsStyle = ({ const iconsStyle = ({
@ -210,18 +210,18 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const {pathToLabelMap} = useContext(QContext); const {pathToLabelMap} = useContext(QContext);
const fullPathToLabel = (fullPath: string, route: string): string => const fullPathToLabel = (fullPath: string, route: string): string =>
{ {
if (fullPath.endsWith("/")) if(fullPath.endsWith("/"))
{ {
fullPath = fullPath.replace(/\/+$/, ""); fullPath = fullPath.replace(/\/+$/, "");
} }
if (pathToLabelMap && pathToLabelMap[fullPath]) if(pathToLabelMap && pathToLabelMap[fullPath])
{ {
return pathToLabelMap[fullPath]; return pathToLabelMap[fullPath];
} }
return (routeToLabel(route)); return (routeToLabel(route));
}; }
const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]); const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
@ -242,14 +242,9 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
</Box> </Box>
{isMini ? null : ( {isMini ? null : (
<Box sx={(theme) => navbarRow(theme, {isMini})}> <Box sx={(theme) => navbarRow(theme, {isMini})}>
<Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}> <Box pr={0} mr={-2}>
{renderHistory()} {renderHistory()}
</Box> </Box>
<Box mt={"-1rem"}>
<IconButton size="small" disableRipple color="inherit" onClick={() => setDotMenuOpen(true)}>
<Icon sx={iconsStyle} fontSize="small">search</Icon>
</IconButton>
</Box>
</Box> </Box>
)} )}
</Toolbar> </Toolbar>

View File

@ -79,8 +79,6 @@ interface BasicAndAdvancedQueryControlsProps
queryScreenUsage: QueryScreenUsage; queryScreenUsage: QueryScreenUsage;
allowVariables?: boolean;
mode: string; mode: string;
setMode: (mode: string) => void; setMode: (mode: string) => void;
} }
@ -678,7 +676,6 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
return (<QuickFilter return (<QuickFilter
key={fieldName} key={fieldName}
allowVariables={props.allowVariables}
fullFieldName={fieldName} fullFieldName={fieldName}
tableMetaData={tableMetaData} tableMetaData={tableMetaData}
updateCriteria={updateQuickCriteria} updateCriteria={updateQuickCriteria}
@ -704,7 +701,6 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
updateCriteria={updateQuickCriteria} updateCriteria={updateQuickCriteria}
criteriaParam={getQuickCriteriaParam(fieldName)} criteriaParam={getQuickCriteriaParam(fieldName)}
fieldMetaData={field} fieldMetaData={field}
allowVariables={props.allowVariables}
defaultOperator={defaultOperator} defaultOperator={defaultOperator}
queryScreenUsage={queryScreenUsage} queryScreenUsage={queryScreenUsage}
handleRemoveQuickFilterField={handleRemoveQuickFilterField} />); handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);

View File

@ -179,7 +179,6 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
updateCriteria={(newCriteria, needDebounce) => updateCriteria(newCriteria, index, needDebounce)} updateCriteria={(newCriteria, needDebounce) => updateCriteria(newCriteria, index, needDebounce)}
removeCriteria={() => removeCriteria(index)} removeCriteria={() => removeCriteria(index)}
updateBooleanOperator={(newValue) => updateBooleanOperator(newValue)} updateBooleanOperator={(newValue) => updateBooleanOperator(newValue)}
allowVariables={props.allowVariables}
queryScreenUsage={props.queryScreenUsage} queryScreenUsage={props.queryScreenUsage}
/> />
{/*JSON.stringify(criteria)*/} {/*JSON.stringify(criteria)*/}

View File

@ -199,7 +199,6 @@ interface FilterCriteriaRowProps
removeCriteria: () => void; removeCriteria: () => void;
updateBooleanOperator: (newValue: string) => void; updateBooleanOperator: (newValue: string) => void;
queryScreenUsage?: QueryScreenUsage; queryScreenUsage?: QueryScreenUsage;
allowVariables?: boolean;
} }
FilterCriteriaRow.defaultProps = FilterCriteriaRow.defaultProps =
@ -268,7 +267,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
return {criteriaIsValid, criteriaStatusTooltip}; return {criteriaIsValid, criteriaStatusTooltip};
} }
export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator, queryScreenUsage, allowVariables}: FilterCriteriaRowProps): JSX.Element export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator, queryScreenUsage}: FilterCriteriaRowProps): JSX.Element
{ {
// console.log(`FilterCriteriaRow: criteria: ${JSON.stringify(criteria)}`); // console.log(`FilterCriteriaRow: criteria: ${JSON.stringify(criteria)}`);
const [operatorSelectedValue, setOperatorSelectedValue] = useState(null as OperatorOption); const [operatorSelectedValue, setOperatorSelectedValue] = useState(null as OperatorOption);
@ -517,7 +516,6 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
table={fieldTable} table={fieldTable}
valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)} valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
queryScreenUsage={queryScreenUsage} queryScreenUsage={queryScreenUsage}
allowVariables={allowVariables}
/> />
</Box> </Box>
<Box display="inline-block"> <Box display="inline-block">

View File

@ -30,7 +30,6 @@ import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment/InputAdornment"; import InputAdornment from "@mui/material/InputAdornment/InputAdornment";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
import DynamicSelect from "qqq/components/forms/DynamicSelect"; import DynamicSelect from "qqq/components/forms/DynamicSelect";
import AssignFilterVariable from "qqq/components/query/AssignFilterVariable"; import AssignFilterVariable from "qqq/components/query/AssignFilterVariable";
import CriteriaDateField, {NoWrapTooltip} from "qqq/components/query/CriteriaDateField"; import CriteriaDateField, {NoWrapTooltip} from "qqq/components/query/CriteriaDateField";
@ -40,8 +39,7 @@ import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow"; import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery"; import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
import ValueUtils from "qqq/utils/qqq/ValueUtils"; import ValueUtils from "qqq/utils/qqq/ValueUtils";
import React, {SyntheticEvent, useReducer} from "react"; import React, {SyntheticEvent, useReducer, useState} from "react";
import {flushSync} from "react-dom";
interface Props interface Props
{ {
@ -52,7 +50,6 @@ interface Props
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void; valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
initiallyOpenMultiValuePvs?: boolean; initiallyOpenMultiValuePvs?: boolean;
queryScreenUsage?: QueryScreenUsage; queryScreenUsage?: QueryScreenUsage;
allowVariables?: boolean;
} }
FilterCriteriaRowValues.defaultProps = FilterCriteriaRowValues.defaultProps =
@ -60,10 +57,6 @@ FilterCriteriaRowValues.defaultProps =
initiallyOpenMultiValuePvs: false initiallyOpenMultiValuePvs: false
}; };
/***************************************************************************
* get the type to use for an <input> from a QFieldMetaData
***************************************************************************/
export const getTypeForTextField = (field: QFieldMetaData): string => export const getTypeForTextField = (field: QFieldMetaData): string =>
{ {
let type = "search"; let type = "search";
@ -84,15 +77,10 @@ export const getTypeForTextField = (field: QFieldMetaData): string =>
return (type); return (type);
}; };
/***************************************************************************
* Make an <input type=text> (actually, might be a different type, but that's
* the gist of it), for a field.
***************************************************************************/
export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-", allowVariables = false) => export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-", allowVariables = false) =>
{ {
const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type; const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
const inputId = `${idPrefix}${criteria.id}`;
let type = getTypeForTextField(field); let type = getTypeForTextField(field);
const inputLabelProps: any = {}; const inputLabelProps: any = {};
@ -107,13 +95,10 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
value = ValueUtils.formatDateTimeValueForForm(value); value = ValueUtils.formatDateTimeValueForForm(value);
} }
/***************************************************************************
* Event handler for the clear 'x'.
***************************************************************************/
const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) => const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
{ {
valueChangeHandler(event, index, ""); valueChangeHandler(event, index, "");
document.getElementById(inputId).focus(); document.getElementById(`${idPrefix}${criteria.id}`).focus();
}; };
@ -134,10 +119,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
}; };
/***************************************************************************
* make a version of the text field for when the criteria's value is set to
* be a "variable"
***************************************************************************/
const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") => const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
{ {
const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) => const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
@ -167,10 +148,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
/></NoWrapTooltip>; /></NoWrapTooltip>;
}; };
///////////////////////////////////////////////////////////////////////////
// set up an 'x' icon as an end-adornment, to clear value from the field //
///////////////////////////////////////////////////////////////////////////
const inputProps: any = {}; const inputProps: any = {};
inputProps.endAdornment = ( inputProps.endAdornment = (
<InputAdornment position="end"> <InputAdornment position="end">
@ -180,64 +157,18 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
</InputAdornment> </InputAdornment>
); );
/***************************************************************************
* onChange event handler. deals with, if the field has a to upper/lower
* case rule on it, to apply that transform, and adjust the cursor.
* See: https://giacomocerquone.com/blog/keep-input-cursor-still
***************************************************************************/
function onChange(event: any)
{
const beforeStart = event.target.selectionStart;
const beforeEnd = event.target.selectionEnd;
let isToUpperCase = DynamicFormUtils.isToUpperCase(field);
let isToLowerCase = DynamicFormUtils.isToLowerCase(field);
if (isToUpperCase || isToLowerCase)
{
flushSync(() =>
{
let newValue = event.currentTarget.value;
if (isToUpperCase)
{
newValue = newValue.toUpperCase();
}
if (isToLowerCase)
{
newValue = newValue.toLowerCase();
}
event.currentTarget.value = newValue;
});
const input = document.getElementById(inputId);
if (input)
{
// @ts-ignore
input.setSelectionRange(beforeStart, beforeEnd);
}
}
valueChangeHandler(event, valueIndex);
}
////////////////////////
// return the element //
////////////////////////
return <Box sx={{margin: 0, padding: 0, display: "flex"}}> return <Box sx={{margin: 0, padding: 0, display: "flex"}}>
{ {
isExpression ? ( isExpression ? (
makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix) makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
) : ( ) : (
<TextField <TextField
id={inputId} id={`${idPrefix}${criteria.id}`}
label={label} label={label}
variant="standard" variant="standard"
autoComplete="off" autoComplete="off"
type={type} type={type}
onChange={onChange} onChange={(event) => valueChangeHandler(event, valueIndex)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
value={value} value={value}
InputLabelProps={inputLabelProps} InputLabelProps={inputLabelProps}
@ -256,23 +187,16 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
}; };
/*************************************************************************** function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage}: Props): JSX.Element
* Component that is the "values" portion of a FilterCriteria Row in the
* advanced query filter editor.
***************************************************************************/
function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage, allowVariables}: Props): JSX.Element
{ {
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [allowVariables, setAllowVariables] = useState(queryScreenUsage == "reportSetup");
if (!operatorOption) if (!operatorOption)
{ {
return null; return null;
} }
/***************************************************************************
* Callback for the Save button from the paste-values modal
***************************************************************************/
function saveNewPasterValues(newValues: any[]) function saveNewPasterValues(newValues: any[])
{ {
if (criteria.values) if (criteria.values)
@ -298,9 +222,6 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
const isExpression = criteria.values && criteria.values[0] && criteria.values[0].type; const isExpression = criteria.values && criteria.values[0] && criteria.values[0].type;
//////////////////////////////////////////////////////////////////////////////
// render different form element9s) based on operator option's "value mode" //
//////////////////////////////////////////////////////////////////////////////
switch (operatorOption.valueMode) switch (operatorOption.valueMode)
{ {
case ValueMode.NONE: case ValueMode.NONE:
@ -399,7 +320,7 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
initialValues = criteria.values; initialValues = criteria.values;
} }
} }
return <Box> return <Box mb={-1.5}>
<DynamicSelect <DynamicSelect
tableName={table.name} tableName={table.name}
fieldName={field.name} fieldName={field.name}

View File

@ -52,7 +52,6 @@ interface QuickFilterProps
defaultOperator?: QCriteriaOperator; defaultOperator?: QCriteriaOperator;
handleRemoveQuickFilterField?: (fieldName: string) => void; handleRemoveQuickFilterField?: (fieldName: string) => void;
queryScreenUsage?: QueryScreenUsage; queryScreenUsage?: QueryScreenUsage;
allowVariables?: boolean;
} }
QuickFilter.defaultProps = QuickFilter.defaultProps =
@ -142,7 +141,7 @@ const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: Q
** Component to render a QuickFilter - that is - a button, with a Menu under it, ** Component to render a QuickFilter - that is - a button, with a Menu under it,
** with Operator and Value controls. ** with Operator and Value controls.
*******************************************************************************/ *******************************************************************************/
export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField, queryScreenUsage, allowVariables}: QuickFilterProps): JSX.Element export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField, queryScreenUsage}: QuickFilterProps): JSX.Element
{ {
const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : []; const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName); const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName);
@ -550,7 +549,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
criteria={criteria} criteria={criteria}
field={fieldMetaData} field={fieldMetaData}
table={tableForField} table={tableForField}
allowVariables={allowVariables}
valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)} valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
initiallyOpenMultiValuePvs={true} // todo - maybe not? initiallyOpenMultiValuePvs={true} // todo - maybe not?
/> />

View File

@ -599,8 +599,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
} }
{ {
widgetMetaData.type === "filterAndColumnsSetup" && ( widgetMetaData.type === "filterAndColumnsSetup" && (
widgetData && widgetData[i] && widgetData && widgetData[i] && widgetData[i].queryParams &&
<FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() => <FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
{ {
}} /> }} />
) )

View File

@ -48,7 +48,6 @@ interface FilterAndColumnsSetupWidgetProps
{ {
isEditable: boolean; isEditable: boolean;
widgetMetaData: QWidgetMetaData; widgetMetaData: QWidgetMetaData;
widgetData: any;
recordValues: { [name: string]: any }; recordValues: { [name: string]: any };
onSaveCallback?: (values: { [name: string]: any }) => void; onSaveCallback?: (values: { [name: string]: any }) => void;
} }
@ -83,10 +82,10 @@ const qController = Client.getInstance();
/******************************************************************************* /*******************************************************************************
** Component for editing the main setup of a report - that is: filter & columns ** Component for editing the main setup of a report - that is: filter & columns
*******************************************************************************/ *******************************************************************************/
export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData, widgetData, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element
{ {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [hideColumns, setHideColumns] = useState(widgetData?.hideColumns); const [hideColumns, setHideColumns] = useState(widgetMetaData?.defaultValues?.has("hideColumns") && widgetMetaData?.defaultValues?.get("hideColumns"));
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData); const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
const [alertContent, setAlertContent] = useState(null as string); const [alertContent, setAlertContent] = useState(null as string);
@ -108,7 +107,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
let columns: QQueryColumns = null; let columns: QQueryColumns = null;
let usingDefaultEmptyFilter = false; let usingDefaultEmptyFilter = false;
let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter; let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
const defaultFilterFields = widgetData?.filterDefaultFieldNames; const defaultFilterFields = getDefaultFilterFieldNames(widgetMetaData);
if (!queryFilter) if (!queryFilter)
{ {
queryFilter = new QQueryFilter(); queryFilter = new QQueryFilter();
@ -154,7 +153,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
//////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////
// if a default table name specified, use it, otherwise use it from the record values // // if a default table name specified, use it, otherwise use it from the record values //
//////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////
let tableName = widgetData?.tableName; let tableName = widgetMetaData?.defaultValues?.get("tableName");
if (!tableName && recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"])) if (!tableName && recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
{ {
tableName = recordValues["tableName"]; tableName = recordValues["tableName"];
@ -175,13 +174,27 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
}, [JSON.stringify(recordValues)]); }, [JSON.stringify(recordValues)]);
/*******************************************************************************
**
*******************************************************************************/
function getDefaultFilterFieldNames(widgetMetaData: QWidgetMetaData)
{
if (widgetMetaData?.defaultValues?.has("filterDefaultFieldNames"))
{
return (widgetMetaData.defaultValues.get("filterDefaultFieldNames").split(","));
}
return ([]);
}
/******************************************************************************* /*******************************************************************************
** **
*******************************************************************************/ *******************************************************************************/
function openEditor() function openEditor()
{ {
let missingRequiredFields = [] as string[]; let missingRequiredFields = [] as string[];
widgetData?.filterDefaultFieldNames?.forEach((fieldName: string) => getDefaultFilterFieldNames(widgetMetaData)?.forEach((fieldName: string) =>
{ {
if (!recordValues[fieldName]) if (!recordValues[fieldName])
{ {
@ -417,7 +430,6 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
} }
{ {
tableMetaData && <RecordQuery tableMetaData && <RecordQuery
allowVariables={widgetData?.allowVariables}
ref={recordQueryRef} ref={recordQueryRef}
table={tableMetaData} table={tableMetaData}
usage="reportSetup" usage="reportSetup"

View File

@ -33,7 +33,6 @@ import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJo
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError"; import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning"; import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted"; import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
import {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import {Alert, Box, Button, CircularProgress, Icon, TablePagination} from "@mui/material"; import {Alert, Box, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
@ -97,8 +96,6 @@ let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: b
{ {
}; };
const cachedPossibleValueLabels: { [fieldName: string]: { [id: string | number]: string } } = {};
function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, isReport, recordIds, closeModalHandler, forceReInit, overrideLabel}: Props): JSX.Element function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, isReport, recordIds, closeModalHandler, forceReInit, overrideLabel}: Props): JSX.Element
{ {
const processNameParam = useParams().processName; const processNameParam = useParams().processName;
@ -446,21 +443,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
{ {
if (processValues[key]) if (processValues[key])
{ {
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if we have a cached possible-value label for this field name (key), then set it as the PV's initialDisplayValue //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (cachedPossibleValueLabels[key] && cachedPossibleValueLabels[key][processValues[key]])
{
formFields[key].possibleValueProps.initialDisplayValue = cachedPossibleValueLabels[key][processValues[key]];
}
else
{
////////////////////////////////////////////////////////////////////////////
// else (and i don't think this should happen?) at least set something... //
////////////////////////////////////////////////////////////////////////////
formFields[key].possibleValueProps.initialDisplayValue = processValues[key]; formFields[key].possibleValueProps.initialDisplayValue = processValues[key];
} }
}
formFields[key].possibleValueProps.otherValues = formFields[key].possibleValueProps.otherValues ?? new Map<string, any>(); formFields[key].possibleValueProps.otherValues = formFields[key].possibleValueProps.otherValues ?? new Map<string, any>();
Object.keys(formFields).forEach((otherKey) => Object.keys(formFields).forEach((otherKey) =>
@ -881,12 +865,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
{ {
dynamicFormFields[fieldName] = dynamicFormValue; dynamicFormFields[fieldName] = dynamicFormValue;
initialValues[fieldName] = initialValue; initialValues[fieldName] = initialValue;
if (formikSetFieldValueFunction)
{
formikSetFieldValueFunction(fieldName, initialValue);
}
formValidations[fieldName] = validation; formValidations[fieldName] = validation;
}; };
@ -936,11 +914,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
fullFieldList.forEach((field) => fullFieldList.forEach((field) =>
{ {
initialValues[field.name] = processValues[field.name]; initialValues[field.name] = processValues[field.name];
if (formikSetFieldValueFunction)
{
formikSetFieldValueFunction(field.name, processValues[field.name]);
}
}); });
//////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////
@ -1099,67 +1072,11 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
setRetryMillis(INITIAL_RETRY_MILLIS); setRetryMillis(INITIAL_RETRY_MILLIS);
if (lastProcessResponse instanceof QJobComplete) if (lastProcessResponse instanceof QJobComplete)
{
///////////////////////////////////////////////////////////////////////////////////////////////
// run an async function here, in case we need to await looking up any possible-value labels //
///////////////////////////////////////////////////////////////////////////////////////////////
(async () =>
{ {
const qJobComplete = lastProcessResponse as QJobComplete; const qJobComplete = lastProcessResponse as QJobComplete;
const newValues = qJobComplete.values;
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if the process step sent a new frontend-step-list, then refresh what we have in state (constructing new full model objects) //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
let frontendSteps = steps;
const updatedFrontendStepList = qJobComplete.updatedFrontendStepList;
if (updatedFrontendStepList)
{
setSteps(updatedFrontendStepList);
frontendSteps = updatedFrontendStepList;
}
///////////////////////////////////////////////////////////////////////////////////
// if the next screen has any PVS fields - look up their labels (display values) //
///////////////////////////////////////////////////////////////////////////////////
const nextStepName = qJobComplete.nextStep;
let nextStep: QFrontendStepMetaData | null = null;
if (frontendSteps && nextStepName)
{
for (let i = 0; i < frontendSteps.length; i++)
{
if (frontendSteps[i].name === nextStepName)
{
nextStep = frontendSteps[i];
break;
}
}
if (nextStep && nextStep.formFields)
{
for (let i = 0; i < nextStep.formFields.length; i++)
{
const field = nextStep.formFields[i];
const fieldName = field.name;
if (field.possibleValueSourceName && newValues && newValues[fieldName])
{
const results: QPossibleValue[] = await Client.getInstance().possibleValues(null, processName, fieldName, null, [newValues[fieldName]]);
if (results && results.length > 0)
{
if (!cachedPossibleValueLabels[fieldName])
{
cachedPossibleValueLabels[fieldName] = {};
}
cachedPossibleValueLabels[fieldName][newValues[fieldName]] = results[0].label;
}
}
}
}
}
setJobUUID(null); setJobUUID(null);
setNewStep(nextStepName); setNewStep(qJobComplete.nextStep);
setProcessValues(newValues); setProcessValues(qJobComplete.values);
setQJobRunning(null); setQJobRunning(null);
if (formikSetFieldValueFunction) if (formikSetFieldValueFunction)
@ -1177,11 +1094,19 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
} }
} }
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if the process step sent a new frontend-step-list, then refresh what we have in state (constructing new full model objects) //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const updatedFrontendStepList = qJobComplete.updatedFrontendStepList;
if (updatedFrontendStepList)
{
setSteps(updatedFrontendStepList);
}
if (activeStep && activeStep.recordListFields) if (activeStep && activeStep.recordListFields)
{ {
setNeedRecords(true); setNeedRecords(true);
} }
})();
} }
else if (lastProcessResponse instanceof QJobStarted) else if (lastProcessResponse instanceof QJobStarted)
{ {
@ -1422,11 +1347,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
const formData = new FormData(); const formData = new FormData();
Object.keys(values).forEach((key) => Object.keys(values).forEach((key) =>
{
if (values[key] !== undefined)
{ {
formData.append(key, values[key]); formData.append(key, values[key]);
}
}); });
if (tableVariantLocalStorageKey && localStorage.getItem(tableVariantLocalStorageKey)) if (tableVariantLocalStorageKey && localStorage.getItem(tableVariantLocalStorageKey))
@ -1649,7 +1571,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
); );
const body = ( const body = (
<Box py={3} mb={20} className="processRun"> <Box py={3} mb={20}>
<Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}> <Grid container justifyContent="center" alignItems="center" sx={{height: "100%", mt: 8}}>
<Grid item xs={12} lg={10} xl={8}> <Grid item xs={12} lg={10} xl={8}>
{form} {form}

View File

@ -94,7 +94,6 @@ interface Props
isModal?: boolean; isModal?: boolean;
initialQueryFilter?: QQueryFilter; initialQueryFilter?: QQueryFilter;
initialColumns?: QQueryColumns; initialColumns?: QQueryColumns;
allowVariables?: boolean;
} }
/////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
@ -126,7 +125,7 @@ const getLoadingScreen = (isModal: boolean) =>
** **
** Yuge component. The best. Lots of very smart people are saying so. ** Yuge component. The best. Lots of very smart people are saying so.
*******************************************************************************/ *******************************************************************************/
const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQueryFilter, initialColumns}: Props, ref) => const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, initialColumns}: Props, ref) =>
{ {
const tableName = table.name; const tableName = table.name;
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
@ -631,7 +630,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQ
const type = (e.target as any).type; const type = (e.target as any).type;
const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search"); const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
if (validType && !isModal && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess) if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
{ {
if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
{ {
@ -669,7 +668,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQ
{ {
document.removeEventListener("keydown", down); document.removeEventListener("keydown", down);
}; };
}, [isModal, dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]); }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
/******************************************************************************* /*******************************************************************************
@ -2885,7 +2884,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQ
gridApiRef={gridApiRef} gridApiRef={gridApiRef}
mode={mode} mode={mode}
queryScreenUsage={usage} queryScreenUsage={usage}
allowVariables={allowVariables}
setMode={doSetMode} setMode={doSetMode}
savedViewsComponent={savedViewsComponent} savedViewsComponent={savedViewsComponent}
columnMenuComponent={buildColumnMenu()} columnMenuComponent={buildColumnMenu()}
@ -2914,7 +2912,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQ
metaData: metaData, metaData: metaData,
queryFilter: queryFilter, queryFilter: queryFilter,
updateFilter: doSetQueryFilter, updateFilter: doSetQueryFilter,
allowVariables: allowVariables
} }
}} }}
localeText={{ localeText={{

View File

@ -717,7 +717,6 @@ input[type="search"]::-webkit-search-results-decoration
background-color: #0062FF !important; background-color: #0062FF !important;
} }
/* several styles below here for user-defined alert inside helpContent */
.helpContentAlert .helpContentAlert
{ {
padding: 6px 16px; padding: 6px 16px;
@ -780,10 +779,3 @@ input[type="search"]::-webkit-search-results-decoration
{ {
color: #F44335; color: #F44335;
} }
/* the alert widget, was built with minimal (no?) margins, for embedding in
a parent widget; but for using it on a process, give it some breathing room */
.processRun .widget .MuiAlert-root
{
margin: 2rem 1rem;
}