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

Merge pull request #62 from Kingsrook/feature/CE-938-order-release-automation

Browse Source 
Feature/ce 938 order release automation
This commit is contained in:
darin.kelkhoff
2024-06-04 19:57:59 -05:00
committed by GitHub
parent b8aa36455d a778b7497a
commit d0ed0ce949
20 changed files with 1571 additions and 1664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cypress.config.ts
View File

@ -1,12 +0,0 @@
import {defineConfig} from "cypress";
export default defineConfig({
e2e: {
viewportHeight: 1000,
viewportWidth: 1200,
setupNodeEvents(on, config)
{
// implement node event listeners here
},
},
});

2174
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
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.101", "@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",

78
src/qqq/components/forms/DynamicSelect.tsx
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,23 +289,24 @@ 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 = (
<> <>
@ -327,7 +328,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
{content} {content}
</li> </li>
); );
} };
const bulkEditSwitchChanged = () => const bulkEditSwitchChanged = () =>
{ {
@ -357,7 +358,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("");
@ -370,19 +371,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}
@ -446,7 +447,8 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
id={`bulkEditSwitch-${fieldName}`} id={`bulkEditSwitch-${fieldName}`}
checked={switchChecked} checked={switchChecked}
onClick={bulkEditSwitchChanged} onClick={bulkEditSwitchChanged}
sx={{top: "-4px", sx={{
top: "-4px",
"& .MuiSwitch-track": { "& .MuiSwitch-track": {
height: 20, height: 20,
borderRadius: 10, borderRadius: 10,
@ -465,7 +467,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
else else
{ {
return ( return (
<Box mb={1.5}> <Box>
{autocomplete} {autocomplete}
</Box> </Box>
); );

581
src/qqq/components/forms/EntityForm.tsx
View File

@ -44,9 +44,9 @@ import MDTypography from "qqq/components/legacy/MDTypography";
import HelpContent from "qqq/components/misc/HelpContent"; import HelpContent from "qqq/components/misc/HelpContent";
import QRecordSidebar from "qqq/components/misc/RecordSidebar"; import QRecordSidebar from "qqq/components/misc/RecordSidebar";
import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget"; import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
import FilterAndColumnsSetupWidget from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget"; import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget"; import RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
import ReportSetupWidget from "qqq/components/widgets/misc/ReportSetupWidget";
import {FieldRule, FieldRuleAction, FieldRuleTrigger} from "qqq/models/fields/FieldRules"; import {FieldRule, FieldRuleAction, FieldRuleTrigger} from "qqq/models/fields/FieldRules";
import HtmlUtils from "qqq/utils/HtmlUtils"; import HtmlUtils from "qqq/utils/HtmlUtils";
import Client from "qqq/utils/qqq/Client"; import Client from "qqq/utils/qqq/Client";
@ -88,7 +88,7 @@ EntityForm.defaultProps = {
//////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////
let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void => let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
{ {
} };
function EntityForm(props: Props): JSX.Element function EntityForm(props: Props): JSX.Element
{ {
@ -119,11 +119,12 @@ function EntityForm(props: Props): JSX.Element
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [showEditChildForm, setShowEditChildForm] = useState(null as any); const [showEditChildForm, setShowEditChildForm] = useState(null as any);
const [modalDataChangedCounter, setModalDataChangedCount] = useState(0);
const [notAllowedError, setNotAllowedError] = useState(null as string); const [notAllowedError, setNotAllowedError] = useState(null as string);
const [formValuesJSON, setFormValuesJSON] = useState(""); const [formValuesJSON, setFormValuesJSON] = useState("");
const [formValues, setFormValues] = useState({} as {[name: string]: any}); const [formValues, setFormValues] = useState({} as { [name: string]: any });
const {pageHeader, setPageHeader} = useContext(QContext); const {pageHeader, setPageHeader} = useContext(QContext);
@ -204,7 +205,7 @@ function EntityForm(props: Props): JSX.Element
/******************************************************************************* /*******************************************************************************
** **
*******************************************************************************/ *******************************************************************************/
const deleteChildRecord = (name: string, widgetData: any, rowIndex: number) => function deleteChildRecord(name: string, widgetData: any, rowIndex: number)
{ {
updateChildRecordList(name, "delete", rowIndex); updateChildRecordList(name, "delete", rowIndex);
}; };
@ -282,6 +283,8 @@ function EntityForm(props: Props): JSX.Element
setRenderedWidgetSections(newRenderedWidgetSections); setRenderedWidgetSections(newRenderedWidgetSections);
forceUpdate(); forceUpdate();
setModalDataChangedCount(modalDataChangedCounter + 1);
setShowEditChildForm(null); setShowEditChildForm(null);
} }
@ -291,7 +294,7 @@ function EntityForm(props: Props): JSX.Element
*******************************************************************************/ *******************************************************************************/
useEffect(() => useEffect(() =>
{ {
const newRenderedWidgetSections: {[name: string]: JSX.Element} = {}; const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
for (let widgetName in renderedWidgetSections) for (let widgetName in renderedWidgetSections)
{ {
const widgetMetaData = metaData.widgets.get(widgetName); const widgetMetaData = metaData.widgets.get(widgetName);
@ -351,12 +354,11 @@ function EntityForm(props: Props): JSX.Element
} }
/******************************************************************************* /*******************************************************************************
** if we have a widget that wants to set form-field values, they can take this ** if we have a widget that wants to set form-field values, they can take this
** function in as a callback, and then call it with their values. ** function in as a callback, and then call it with their values.
*******************************************************************************/ *******************************************************************************/
function setFormFieldValuesFromWidget(values: {[name: string]: any}) function setFormFieldValuesFromWidget(values: { [name: string]: any })
{ {
for (let key in values) for (let key in values)
{ {
@ -370,13 +372,13 @@ function EntityForm(props: Props): JSX.Element
*******************************************************************************/ *******************************************************************************/
function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
{ {
if(widgetMetaData.type == "childRecordList") if (widgetMetaData.type == "childRecordList")
{ {
widgetData.viewAllLink = null; widgetData.viewAllLink = null;
widgetMetaData.showExportButton = false; widgetMetaData.showExportButton = false;
return <RecordGridWidget return Object.keys(childListWidgetData).length > 0 && (<RecordGridWidget
key={new Date().getTime()} // added so that editing values actually re-renders... key={`${formValues["tableName"]}-${modalDataChangedCounter}`}
widgetMetaData={widgetMetaData} widgetMetaData={widgetMetaData}
data={widgetData} data={widgetData}
disableRowClick disableRowClick
@ -385,21 +387,31 @@ function EntityForm(props: Props): JSX.Element
addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)} addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)} editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)} deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
/>; />);
} }
if(widgetMetaData.type == "reportSetup") if (widgetMetaData.type == "filterAndColumnsSetup")
{ {
return <ReportSetupWidget /////////////////////////////////////////////////////////////////////////////////////////////////////////
// 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) //
/////////////////////////////////////////////////////////////////////////////////////////////////////////
if (widgetData?.tableName)
{
formValues["tableName"] = widgetData?.tableName;
}
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}
/> />;
} }
if(widgetMetaData.type == "pivotTableSetup") if (widgetMetaData.type == "pivotTableSetup")
{ {
return <PivotTableSetupWidget return <PivotTableSetupWidget
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...
@ -407,10 +419,10 @@ function EntityForm(props: Props): JSX.Element
widgetMetaData={widgetMetaData} widgetMetaData={widgetMetaData}
recordValues={formValues} recordValues={formValues}
onSaveCallback={setFormFieldValuesFromWidget} onSaveCallback={setFormFieldValuesFromWidget}
/> />;
} }
if(widgetMetaData.type == "dynamicForm") if (widgetMetaData.type == "dynamicForm")
{ {
return <DynamicFormWidget return <DynamicFormWidget
key={formValues["savedReportId"]} // todo - pull this from the metaData (could do so above too...) key={formValues["savedReportId"]} // todo - pull this from the metaData (could do so above too...)
@ -420,10 +432,10 @@ function EntityForm(props: Props): JSX.Element
recordValues={formValues} recordValues={formValues}
record={record} record={record}
onSaveCallback={setFormFieldValuesFromWidget} onSaveCallback={setFormFieldValuesFromWidget}
/> />;
} }
return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>) return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>);
} }
@ -449,12 +461,12 @@ function EntityForm(props: Props): JSX.Element
function setupFieldRules(tableMetaData: QTableMetaData) function setupFieldRules(tableMetaData: QTableMetaData)
{ {
const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard"); const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
if(!mdbMetaData) if (!mdbMetaData)
{ {
return; return;
} }
if(mdbMetaData.fieldRules) if (mdbMetaData.fieldRules)
{ {
const newFieldRules: FieldRule[] = []; const newFieldRules: FieldRule[] = [];
for (let i = 0; i < mdbMetaData.fieldRules.length; i++) for (let i = 0; i < mdbMetaData.fieldRules.length; i++)
@ -469,83 +481,164 @@ function EntityForm(props: Props): JSX.Element
////////////////// //////////////////
// initial load // // initial load //
////////////////// //////////////////
if (!asyncLoadInited) useEffect(() =>
{ {
setAsyncLoadInited(true); if (!asyncLoadInited)
(async () =>
{ {
const tableMetaData = await qController.loadTableMetaData(tableName); setAsyncLoadInited(true);
setTableMetaData(tableMetaData); (async () =>
recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label});
setupFieldRules(tableMetaData);
const metaData = await qController.loadMetaData();
setMetaData(metaData);
/////////////////////////////////////////////////
// define the sections, e.g., for the left-bar //
/////////////////////////////////////////////////
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
{ {
const widget = metaData.widgets.get(section.widgetName); const tableMetaData = await qController.loadTableMetaData(tableName);
if(widget) setTableMetaData(tableMetaData);
recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label});
setupFieldRules(tableMetaData);
const metaData = await qController.loadMetaData();
setMetaData(metaData);
/////////////////////////////////////////////////
// define the sections, e.g., for the left-bar //
/////////////////////////////////////////////////
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
{ {
if(widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName")) const widget = metaData?.widgets.get(section.widgetName);
if (widget)
{ {
return (true); if (widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
{
return (true);
}
if (widget.type == "filterAndColumnsSetup" || widget.type == "pivotTableSetup" || widget.type == "dynamicForm")
{
return (true);
}
} }
if(widget.type == "reportSetup" || widget.type == "pivotTableSetup" || widget.type == "dynamicForm") return (false);
{ });
return (true); setTableSections(tableSections);
}
}
return (false); const fieldArray = [] as QFieldMetaData[];
}); const sortedKeys = [...tableMetaData.fields.keys()].sort();
setTableSections(tableSections); sortedKeys.forEach((key) =>
const fieldArray = [] as QFieldMetaData[];
const sortedKeys = [...tableMetaData.fields.keys()].sort();
sortedKeys.forEach((key) =>
{
const fieldMetaData = tableMetaData.fields.get(key);
fieldArray.push(fieldMetaData);
});
/////////////////////////////////////////////////////////////////////////////////////////
// if doing an edit or copy, fetch the record and pre-populate the form values from it //
/////////////////////////////////////////////////////////////////////////////////////////
let record: QRecord = null;
let defaultDisplayValues = new Map<string, string>();
if (props.id !== null)
{
record = await qController.get(tableName, props.id);
setRecord(record);
recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel});
const titleVerb = props.isCopy ? "Copy" : "Edit";
setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
if (!props.isModal)
{ {
setPageHeader(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`); const fieldMetaData = tableMetaData.fields.get(key);
} fieldArray.push(fieldMetaData);
tableMetaData.fields.forEach((fieldMetaData, key) =>
{
if (props.isCopy && fieldMetaData.name == tableMetaData.primaryKeyField)
{
return;
}
initialValues[key] = record.values.get(key);
}); });
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////
// these checks are only for updating records, if copying, it is actually an insert, which is checked after this block // // if doing an edit or copy, fetch the record and pre-populate the form values from it //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////
if (!props.isCopy) let record: QRecord = null;
let defaultDisplayValues = new Map<string, string>();
if (props.id !== null)
{
record = await qController.get(tableName, props.id);
setRecord(record);
recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel});
const titleVerb = props.isCopy ? "Copy" : "Edit";
setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
if (!props.isModal)
{
setPageHeader(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`);
}
tableMetaData.fields.forEach((fieldMetaData, key) =>
{
if (props.isCopy && fieldMetaData.name == tableMetaData.primaryKeyField)
{
return;
}
initialValues[key] = record.values.get(key);
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// these checks are only for updating records, if copying, it is actually an insert, which is checked after this block //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (!props.isCopy)
{
if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
{
setNotAllowedError("Records may not be edited in this table");
}
else if (!tableMetaData.editPermission)
{
setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`);
}
}
}
else
{
///////////////////////////////////////////
// else handle preparing to do an insert //
///////////////////////////////////////////
setFormTitle(`Creating New ${tableMetaData?.label}`);
recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label});
if (!props.isModal)
{
setPageHeader(`Creating New ${tableMetaData?.label}`);
}
////////////////////////////////////////////////////////////////////////////////////////////////
// if default values were supplied for a new record, then populate initialValues, for formik. //
////////////////////////////////////////////////////////////////////////////////////////////////
for (let i = 0; i < fieldArray.length; i++)
{
const fieldMetaData = fieldArray[i];
const fieldName = fieldMetaData.name;
const defaultValue = (defaultValues && defaultValues[fieldName]) ? defaultValues[fieldName] : fieldMetaData.defaultValue;
if (defaultValue)
{
initialValues[fieldName] = defaultValue;
///////////////////////////////////////////////////////////////////////////////////////////
// we need to set the initialDisplayValue for possible value fields with a default value //
// so, look them up here now if needed //
///////////////////////////////////////////////////////////////////////////////////////////
if (fieldMetaData.possibleValueSourceName)
{
const results: QPossibleValue[] = await qController.possibleValues(tableName, null, fieldName, null, [initialValues[fieldName]]);
if (results && results.length > 0)
{
defaultDisplayValues.set(fieldName, results[0].label);
}
}
}
}
}
///////////////////////////////////////////////////
// if an override heading was passed in, use it. //
///////////////////////////////////////////////////
if (props.overrideHeading)
{
setFormTitle(props.overrideHeading);
if (!props.isModal)
{
setPageHeader(props.overrideHeading);
}
}
//////////////////////////////////////
// check capabilities & permissions //
//////////////////////////////////////
if (props.isCopy || !props.id)
{
if (!tableMetaData.capabilities.has(Capability.TABLE_INSERT))
{
setNotAllowedError("Records may not be created in this table");
}
else if (!tableMetaData.insertPermission)
{
setNotAllowedError(`You do not have permission to create ${tableMetaData.label} records`);
}
}
else
{ {
if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE)) if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
{ {
@ -556,201 +649,123 @@ function EntityForm(props: Props): JSX.Element
setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`); setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`);
} }
} }
}
else
{
///////////////////////////////////////////
// else handle preparing to do an insert //
///////////////////////////////////////////
setFormTitle(`Creating New ${tableMetaData?.label}`);
recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label});
if (!props.isModal) /////////////////////////////////////////////////////////////////////
{ // make sure all initialValues are properly formatted for the form //
setPageHeader(`Creating New ${tableMetaData?.label}`); /////////////////////////////////////////////////////////////////////
}
////////////////////////////////////////////////////////////////////////////////////////////////
// if default values were supplied for a new record, then populate initialValues, for formik. //
////////////////////////////////////////////////////////////////////////////////////////////////
for (let i = 0; i < fieldArray.length; i++) for (let i = 0; i < fieldArray.length; i++)
{ {
const fieldMetaData = fieldArray[i]; const fieldMetaData = fieldArray[i];
const fieldName = fieldMetaData.name; if (fieldMetaData.type == QFieldType.DATE_TIME && initialValues[fieldMetaData.name])
const defaultValue = (defaultValues && defaultValues[fieldName]) ? defaultValues[fieldName] : fieldMetaData.defaultValue;
if (defaultValue)
{ {
initialValues[fieldName] = defaultValue; initialValues[fieldMetaData.name] = ValueUtils.formatDateTimeValueForForm(initialValues[fieldMetaData.name]);
}
}
/////////////////////////////////////////////////////////////////////////////////////////// setInitialValues(initialValues);
// we need to set the initialDisplayValue for possible value fields with a default value //
// so, look them up here now if needed // /////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// // get formField and formValidation objects for Formik //
if (fieldMetaData.possibleValueSourceName) /////////////////////////////////////////////////////////
const {
dynamicFormFields,
formValidations,
} = DynamicFormUtils.getFormData(fieldArray, disabledFields);
DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
/////////////////////////////////////
// group the formFields by section //
/////////////////////////////////////
const dynamicFormFieldsBySection = new Map<string, any>();
let t1sectionName;
let t1section;
const nonT1Sections: QTableSection[] = [];
const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
const newChildListWidgetData: { [name: string]: ChildRecordListData } = {};
for (let i = 0; i < tableSections.length; i++)
{
const section = tableSections[i];
const sectionDynamicFormFields: any[] = [];
if (section.isHidden)
{
continue;
}
const hasFields = section.fieldNames && section.fieldNames.length > 0;
if (hasFields)
{
for (let j = 0; j < section.fieldNames.length; j++)
{ {
const results: QPossibleValue[] = await qController.possibleValues(tableName, null, fieldName, null, [initialValues[fieldName]]); const fieldName = section.fieldNames[j];
if (results && results.length > 0) const field = tableMetaData.fields.get(fieldName);
if (!field)
{ {
defaultDisplayValues.set(fieldName, results[0].label); console.log(`Omitting un-found field ${fieldName} from form`);
continue;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
// || (or) we're on the insert screen in which case, only show editable fields. //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if ((props.id !== null && !props.isCopy) || field.isEditable)
{
sectionDynamicFormFields.push(dynamicFormFields[fieldName]);
} }
} }
}
}
}
/////////////////////////////////////////////////// if (sectionDynamicFormFields.length === 0)
// if an override heading was passed in, use it. //
///////////////////////////////////////////////////
if (props.overrideHeading)
{
setFormTitle(props.overrideHeading);
if (!props.isModal)
{
setPageHeader(props.overrideHeading);
}
}
//////////////////////////////////////
// check capabilities & permissions //
//////////////////////////////////////
if (props.isCopy || !props.id)
{
if (!tableMetaData.capabilities.has(Capability.TABLE_INSERT))
{
setNotAllowedError("Records may not be created in this table");
}
else if (!tableMetaData.insertPermission)
{
setNotAllowedError(`You do not have permission to create ${tableMetaData.label} records`);
}
}
else
{
if (!tableMetaData.capabilities.has(Capability.TABLE_UPDATE))
{
setNotAllowedError("Records may not be edited in this table");
}
else if (!tableMetaData.editPermission)
{
setNotAllowedError(`You do not have permission to edit ${tableMetaData.label} records`);
}
}
/////////////////////////////////////////////////////////////////////
// make sure all initialValues are properly formatted for the form //
/////////////////////////////////////////////////////////////////////
for (let i = 0; i < fieldArray.length; i++)
{
const fieldMetaData = fieldArray[i];
if (fieldMetaData.type == QFieldType.DATE_TIME && initialValues[fieldMetaData.name])
{
initialValues[fieldMetaData.name] = ValueUtils.formatDateTimeValueForForm(initialValues[fieldMetaData.name]);
}
}
setInitialValues(initialValues);
/////////////////////////////////////////////////////////
// get formField and formValidation objects for Formik //
/////////////////////////////////////////////////////////
const {
dynamicFormFields,
formValidations,
} = DynamicFormUtils.getFormData(fieldArray, disabledFields);
DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
/////////////////////////////////////
// group the formFields by section //
/////////////////////////////////////
const dynamicFormFieldsBySection = new Map<string, any>();
let t1sectionName;
let t1section;
const nonT1Sections: QTableSection[] = [];
const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
const newChildListWidgetData: { [name: string]: ChildRecordListData } = {};
for (let i = 0; i < tableSections.length; i++)
{
const section = tableSections[i];
const sectionDynamicFormFields: any[] = [];
if (section.isHidden)
{
continue;
}
const hasFields = section.fieldNames && section.fieldNames.length > 0;
if(hasFields)
{
for (let j = 0; j < section.fieldNames.length; j++)
{
const fieldName = section.fieldNames[j];
const field = tableMetaData.fields.get(fieldName);
if (!field)
{ {
console.log(`Omitting un-found field ${fieldName} from form`); ////////////////////////////////////////////////////////////////////////////////////////////////
// in case there are no active fields in this section, remove it from the tableSections array //
////////////////////////////////////////////////////////////////////////////////////////////////
tableSections.splice(i, 1);
i--;
continue; continue;
} }
else
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if id !== null (and we're not copying) - means we're on the edit screen -- show all fields on the edit screen. //
// || (or) we're on the insert screen in which case, only show editable fields. //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if ((props.id !== null && !props.isCopy) || field.isEditable)
{ {
sectionDynamicFormFields.push(dynamicFormFields[fieldName]); dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
} }
} }
if (sectionDynamicFormFields.length === 0)
{
////////////////////////////////////////////////////////////////////////////////////////////////
// in case there are no active fields in this section, remove it from the tableSections array //
////////////////////////////////////////////////////////////////////////////////////////////////
tableSections.splice(i, 1);
i--;
continue;
}
else else
{ {
dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields); const widgetMetaData = metaData?.widgets.get(section.widgetName);
const widgetData = await qController.widget(widgetMetaData.name, makeQueryStringWithIdAndObject(tableMetaData, defaultValues));
newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
newChildListWidgetData[section.widgetName] = widgetData;
}
//////////////////////////////////////
// capture the tier1 section's name //
//////////////////////////////////////
if (section.tier === "T1")
{
t1sectionName = section.name;
t1section = section;
}
else
{
nonT1Sections.push(section);
} }
} }
else
{
const widgetMetaData = metaData.widgets.get(section.widgetName);
const widgetData = await qController.widget(widgetMetaData.name, makeQueryStringWithIdAndObject(tableMetaData, defaultValues));
newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData); setT1SectionName(t1sectionName);
newChildListWidgetData[section.widgetName] = widgetData; setT1Section(t1section);
} setNonT1Sections(nonT1Sections);
setFormFields(dynamicFormFieldsBySection);
setValidations(Yup.object().shape(formValidations));
setRenderedWidgetSections(newRenderedWidgetSections);
setChildListWidgetData(newChildListWidgetData);
////////////////////////////////////// forceUpdate();
// capture the tier1 section's name // })();
////////////////////////////////////// }
if (section.tier === "T1") }, []);
{
t1sectionName = section.name;
t1section = section;
}
else
{
nonT1Sections.push(section);
}
}
setT1SectionName(t1sectionName);
setT1Section(t1section);
setNonT1Sections(nonT1Sections);
setFormFields(dynamicFormFieldsBySection);
setValidations(Yup.object().shape(formValidations));
setRenderedWidgetSections(newRenderedWidgetSections);
setChildListWidgetData(newChildListWidgetData);
forceUpdate();
})();
}
////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////
@ -870,16 +885,28 @@ function EntityForm(props: Props): JSX.Element
let haveAssociationsToPost = false; let haveAssociationsToPost = false;
for (let name of Object.keys(childListWidgetData)) for (let name of Object.keys(childListWidgetData))
{ {
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if cannot find association name, continue loop, since cannot tell backend which association this is for //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName"); const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName");
if (!manageAssociationName) if (!manageAssociationName)
{ {
console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`); console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
continue;
} }
associationsToPost[manageAssociationName] = [];
haveAssociationsToPost = true; ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
for (let i = 0; i < childListWidgetData[name].queryOutput?.records?.length; i++) // if the records array exists, add to associations to post - note: even if empty list, the backend will expect this //
// association name to be present if it is to act on it (for the case when all associations have been deleted) //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (childListWidgetData[name].queryOutput.records)
{ {
associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values); associationsToPost[manageAssociationName] = [];
haveAssociationsToPost = true;
for (let i = 0; i < childListWidgetData[name].queryOutput?.records?.length; i++)
{
associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
}
} }
} }
if (haveAssociationsToPost) if (haveAssociationsToPost)
@ -1000,19 +1027,19 @@ function EntityForm(props: Props): JSX.Element
/******************************************************************************* /*******************************************************************************
** **
*******************************************************************************/ *******************************************************************************/
function makeQueryStringWithIdAndObject(tableMetaData: QTableMetaData, object: {[key: string]: any}) function makeQueryStringWithIdAndObject(tableMetaData: QTableMetaData, object: { [key: string]: any })
{ {
const queryParamsArray: string[] = []; const queryParamsArray: string[] = [];
if(props.id) if (props.id)
{ {
queryParamsArray.push(`${tableMetaData.primaryKeyField}=${encodeURIComponent(props.id)}`) queryParamsArray.push(`${tableMetaData.primaryKeyField}=${encodeURIComponent(props.id)}`);
} }
if(object) if (object)
{ {
for (let key in object) for (let key in object)
{ {
queryParamsArray.push(`${key}=${encodeURIComponent(object[key])}`) queryParamsArray.push(`${key}=${encodeURIComponent(object[key])}`);
} }
} }
@ -1023,7 +1050,7 @@ function EntityForm(props: Props): JSX.Element
/******************************************************************************* /*******************************************************************************
** **
*******************************************************************************/ *******************************************************************************/
async function reloadWidget(widgetName: string, additionalQueryParamsForWidget: {[key: string]: any }) async function reloadWidget(widgetName: string, additionalQueryParamsForWidget: { [key: string]: any })
{ {
const widgetData = await qController.widget(widgetName, makeQueryStringWithIdAndObject(tableMetaData, additionalQueryParamsForWidget)); const widgetData = await qController.widget(widgetName, makeQueryStringWithIdAndObject(tableMetaData, additionalQueryParamsForWidget));
const widgetMetaData = metaData.widgets.get(widgetName); const widgetMetaData = metaData.widgets.get(widgetName);
@ -1045,11 +1072,11 @@ function EntityForm(props: Props): JSX.Element
/******************************************************************************* /*******************************************************************************
** process a form-field having a changed value (e.g., apply field rules). ** process a form-field having a changed value (e.g., apply field rules).
*******************************************************************************/ *******************************************************************************/
function handleChangedFieldValue(fieldName: string, oldValue: any, newValue: any, valueChangesToMake: {[fieldName: string]: any}) function handleChangedFieldValue(fieldName: string, oldValue: any, newValue: any, valueChangesToMake: { [fieldName: string]: any })
{ {
for (let fieldRule of fieldRules) for (let fieldRule of fieldRules)
{ {
if(fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName) if (fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
{ {
switch (fieldRule.action) switch (fieldRule.action)
{ {
@ -1058,7 +1085,7 @@ function EntityForm(props: Props): JSX.Element
valueChangesToMake[fieldRule.targetField] = null; valueChangesToMake[fieldRule.targetField] = null;
break; break;
case FieldRuleAction.RELOAD_WIDGET: case FieldRuleAction.RELOAD_WIDGET:
const additionalQueryParamsForWidget: {[key: string]: any} = {}; const additionalQueryParamsForWidget: { [key: string]: any } = {};
additionalQueryParamsForWidget[fieldRule.sourceField] = newValue; additionalQueryParamsForWidget[fieldRule.sourceField] = newValue;
reloadWidget(fieldRule.targetWidget, additionalQueryParamsForWidget); reloadWidget(fieldRule.targetWidget, additionalQueryParamsForWidget);
} }
@ -1148,21 +1175,21 @@ function EntityForm(props: Props): JSX.Element
///////////////////////////////////////////////// /////////////////////////////////////////////////
// if we have values from formik, look at them // // if we have values from formik, look at them //
///////////////////////////////////////////////// /////////////////////////////////////////////////
if(values) if (values)
{ {
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
// use stringified values as cheap/easy way to see if any are changed // // use stringified values as cheap/easy way to see if any are changed //
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
const newFormValuesJSON = JSON.stringify(values); const newFormValuesJSON = JSON.stringify(values);
if(formValuesJSON != newFormValuesJSON) if (formValuesJSON != newFormValuesJSON)
{ {
const valueChangesToMake: {[fieldName: string]: any} = {}; const valueChangesToMake: { [fieldName: string]: any } = {};
//////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////
// if the form is dirty (e.g., we're not doing the initial load), // // if the form is dirty (e.g., we're not doing the initial load), //
// then process rules for any changed fields // // then process rules for any changed fields //
//////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////
if(dirty) if (dirty)
{ {
for (let fieldName in values) for (let fieldName in values)
{ {
@ -1194,7 +1221,7 @@ function EntityForm(props: Props): JSX.Element
setFieldValue(fieldName, valueChangesToMake[fieldName], false); setFieldValue(fieldName, valueChangesToMake[fieldName], false);
} }
setFormValues(formValues) setFormValues(formValues);
setFormValuesJSON(JSON.stringify(values)); setFormValuesJSON(JSON.stringify(values));
} }
} }

16
src/qqq/components/horseshoe/Breadcrumbs.tsx
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 (so where i==2) // // e.g., if at /app/table/savedView/1 //
//////////////////////////////////////////////////////// ////////////////////////////////////////////////////////
if(routes[i] === "savedView" && i == 2) if (routes[i] === "savedView" && i == routes.length - 1)
{ {
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;
} }

15
src/qqq/components/misc/SavedViews.tsx
View File

@ -25,7 +25,8 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete"; import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError"; import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord"; import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Alert, Box, Button} from "@mui/material"; import {Alert, Button} from "@mui/material";
import Box from "@mui/material/Box";
import Dialog from "@mui/material/Dialog"; import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions"; import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent"; import DialogContent from "@mui/material/DialogContent";
@ -94,12 +95,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext); const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext);
///////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////
// this component is used by <RecordQuery> - but that component has different usages - // // this component is used by <RecordQuery> - but that component has different usages - //
// e.g., the full-fledged query screen, but also, within other screens (e.g., a modal // // e.g., the full-fledged query screen, but also, within other screens (e.g., a modal //
// under the ReportSetupWidget). So, there are some behaviors we only want when we're // // under the FilterAndColumnsSetupWidget). So, there are some behaviors we only want when //
// on the full-fledged query screen, such as changing the URL with saved view ids. // // we're on the full-fledged query screen, such as changing the URL with saved view ids. //
///////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////
const isQueryScreen = queryScreenUsage == "queryScreen"; const isQueryScreen = queryScreenUsage == "queryScreen";
const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget); const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);

4
src/qqq/components/query/BasicAndAdvancedQueryControls.tsx
View File

@ -79,6 +79,8 @@ interface BasicAndAdvancedQueryControlsProps
queryScreenUsage: QueryScreenUsage; queryScreenUsage: QueryScreenUsage;
allowVariables?: boolean;
mode: string; mode: string;
setMode: (mode: string) => void; setMode: (mode: string) => void;
} }
@ -676,6 +678,7 @@ 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}
@ -701,6 +704,7 @@ 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} />);

1
src/qqq/components/query/CustomFilterPanel.tsx
View File

@ -179,6 +179,7 @@ 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)*/}

4
src/qqq/components/query/FilterCriteriaRow.tsx
View File

@ -199,6 +199,7 @@ interface FilterCriteriaRowProps
removeCriteria: () => void; removeCriteria: () => void;
updateBooleanOperator: (newValue: string) => void; updateBooleanOperator: (newValue: string) => void;
queryScreenUsage?: QueryScreenUsage; queryScreenUsage?: QueryScreenUsage;
allowVariables?: boolean;
} }
FilterCriteriaRow.defaultProps = FilterCriteriaRow.defaultProps =
@ -267,7 +268,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}: FilterCriteriaRowProps): JSX.Element export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator, queryScreenUsage, allowVariables}: 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);
@ -516,6 +517,7 @@ 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">

6
src/qqq/components/query/FilterCriteriaRowValues.tsx
View File

@ -39,7 +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, useState} from "react"; import React, {SyntheticEvent, useReducer} from "react";
interface Props interface Props
{ {
@ -50,6 +50,7 @@ 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 =
@ -187,10 +188,9 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
}; };
function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage}: Props): JSX.Element 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)
{ {

4
src/qqq/components/query/QuickFilter.tsx
View File

@ -52,6 +52,7 @@ interface QuickFilterProps
defaultOperator?: QCriteriaOperator; defaultOperator?: QCriteriaOperator;
handleRemoveQuickFilterField?: (fieldName: string) => void; handleRemoveQuickFilterField?: (fieldName: string) => void;
queryScreenUsage?: QueryScreenUsage; queryScreenUsage?: QueryScreenUsage;
allowVariables?: boolean;
} }
QuickFilter.defaultProps = QuickFilter.defaultProps =
@ -141,7 +142,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}: QuickFilterProps): JSX.Element export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField, queryScreenUsage, allowVariables}: 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);
@ -549,6 +550,7 @@ 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?
/> />

8
src/qqq/components/widgets/DashboardWidgets.tsx
View File

@ -40,10 +40,10 @@ import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
import DividerWidget from "qqq/components/widgets/misc/Divider"; import DividerWidget from "qqq/components/widgets/misc/Divider";
import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget"; import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget"; import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
import FilterAndColumnsSetupWidget from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget"; import PivotTableSetupWidget from "qqq/components/widgets/misc/PivotTableSetupWidget";
import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart"; import QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
import RecordGridWidget from "qqq/components/widgets/misc/RecordGridWidget"; 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 ScriptViewer from "qqq/components/widgets/misc/ScriptViewer";
import StepperCard from "qqq/components/widgets/misc/StepperCard"; import StepperCard from "qqq/components/widgets/misc/StepperCard";
import USMapWidget from "qqq/components/widgets/misc/USMapWidget"; import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
@ -598,9 +598,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
) )
} }
{ {
widgetMetaData.type === "reportSetup" && ( widgetMetaData.type === "filterAndColumnsSetup" && (
widgetData && widgetData[i] && widgetData[i].queryParams && widgetData && widgetData[i] &&
<ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() => <FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
{ {
}} /> }} />
) )

135
src/qqq/components/widgets/misc/ReportSetupWidget.tsx → src/qqq/components/widgets/misc/FilterAndColumnsSetupWidget.tsx
View File

@ -22,6 +22,8 @@
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
import {Alert, Collapse} from "@mui/material"; import {Alert, Collapse} from "@mui/material";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
@ -42,15 +44,16 @@ import Client from "qqq/utils/qqq/Client";
import FilterUtils from "qqq/utils/qqq/FilterUtils"; import FilterUtils from "qqq/utils/qqq/FilterUtils";
import React, {useContext, useEffect, useRef, useState} from "react"; import React, {useContext, useEffect, useRef, useState} from "react";
interface ReportSetupWidgetProps 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;
} }
ReportSetupWidget.defaultProps = { FilterAndColumnsSetupWidget.defaultProps = {
onSaveCallback: null onSaveCallback: null
}; };
@ -80,9 +83,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 ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData, widgetData, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element
{ {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [hideColumns, setHideColumns] = useState(widgetData?.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);
@ -101,15 +105,42 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
///////////////////////////// /////////////////////////////
// load values from record // // load values from record //
///////////////////////////// /////////////////////////////
let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter; let columns: QQueryColumns = null;
let usingDefaultEmptyFilter = false; let usingDefaultEmptyFilter = false;
let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
const defaultFilterFields = widgetData?.filterDefaultFieldNames;
if (!queryFilter) if (!queryFilter)
{ {
queryFilter = new QQueryFilter(); queryFilter = new QQueryFilter();
usingDefaultEmptyFilter = true; if (defaultFilterFields?.length == 0)
{
usingDefaultEmptyFilter = true;
}
}
else
{
queryFilter = Object.assign(new QQueryFilter(), queryFilter);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////
// if there are default fields from which a query should be seeded, add/update the filter with them //
//////////////////////////////////////////////////////////////////////////////////////////////////////
if (defaultFilterFields?.length > 0)
{
defaultFilterFields.forEach((fieldName: string) =>
{
////////////////////////////////////////////////////////////////////////////////////////////
// if a value for the default field exists, remove the criteria for it in our query first //
////////////////////////////////////////////////////////////////////////////////////////////
queryFilter.criteria = queryFilter.criteria?.filter(c => c.fieldName != fieldName);
if (recordValues[fieldName])
{
queryFilter.addCriteria(new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [recordValues[fieldName]]));
}
});
} }
let columns: QQueryColumns = null;
if (recordValues["columnsJson"]) if (recordValues["columnsJson"])
{ {
columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]); columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
@ -120,11 +151,20 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////
useEffect(() => useEffect(() =>
{ {
if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"])) ////////////////////////////////////////////////////////////////////////////////////////
// if a default table name specified, use it, otherwise use it from the record values //
////////////////////////////////////////////////////////////////////////////////////////
let tableName = widgetData?.tableName;
if (!tableName && recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
{
tableName = recordValues["tableName"];
}
if (tableName)
{ {
(async () => (async () =>
{ {
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"]); const tableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData); setTableMetaData(tableMetaData);
const queryFilterForFrontend = Object.assign({}, queryFilter); const queryFilterForFrontend = Object.assign({}, queryFilter);
@ -132,7 +172,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
setFrontendQueryFilter(queryFilterForFrontend); setFrontendQueryFilter(queryFilterForFrontend);
})(); })();
} }
}, [recordValues]); }, [JSON.stringify(recordValues)]);
/******************************************************************************* /*******************************************************************************
@ -140,8 +180,27 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
*******************************************************************************/ *******************************************************************************/
function openEditor() function openEditor()
{ {
let missingRequiredFields = [] as string[];
widgetData?.filterDefaultFieldNames?.forEach((fieldName: string) =>
{
if (!recordValues[fieldName])
{
missingRequiredFields.push(tableMetaData.fields.get(fieldName).label);
}
});
////////////////////////////////////////////////////////////////////
// display an alert and return if any required fields are missing //
////////////////////////////////////////////////////////////////////
if (missingRequiredFields.length > 0)
{
setAlertContent("The following fields must first be selected to edit the filter: '" + missingRequiredFields.join(", ") + "'");
return;
}
if (recordValues["tableName"]) if (recordValues["tableName"])
{ {
setAlertContent(null);
setModalOpen(true); setModalOpen(true);
} }
} }
@ -272,7 +331,14 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
const labelAdditionalElementsRight: JSX.Element[] = []; const labelAdditionalElementsRight: JSX.Element[] = [];
if (isEditable) if (isEditable)
{ {
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />); if (!hideColumns)
{
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
}
else
{
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent key="filterAndColumnsHeader" label="Edit Filters" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />);
}
} }
@ -306,34 +372,36 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
</Tooltip> </Tooltip>
} }
{ {
!isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box> !isEditable && <Box color={colors.gray.main}>No filters are configured.</Box>
} }
</Box> </Box>
} }
</Box> </Box>
<Box pt="1rem"> {!hideColumns && (
<h5>Columns</h5> <Box pt="1rem">
<Box display="flex" flexWrap="wrap" fontSize="1rem"> <h5>Columns</h5>
{ <Box display="flex" flexWrap="wrap" fontSize="1rem">
mayShowColumnsPreview() && {
columns.columns.map((column, i) => <React.Fragment key={`column-${i}`}>{renderColumn(column)}</React.Fragment>) mayShowColumnsPreview() &&
} columns.columns.map((column, i) => <React.Fragment key={`column-${i}`}>{renderColumn(column)}</React.Fragment>)
{ }
!mayShowColumnsPreview() && {
<Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}> !mayShowColumnsPreview() &&
{ <Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
isEditable && {
<Tooltip title={selectTableFirstTooltipTitle}> isEditable &&
<span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span> <Tooltip title={selectTableFirstTooltipTitle}>
</Tooltip> <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> {
} !isEditable && <Box color={colors.gray.main}>No columns are selected.</Box>
</Box> }
} </Box>
}
</Box>
</Box> </Box>
</Box> )}
{ {
modalOpen && modalOpen &&
<Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}> <Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
@ -349,6 +417,7 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
} }
{ {
tableMetaData && <RecordQuery tableMetaData && <RecordQuery
allowVariables={widgetData?.allowVariables}
ref={recordQueryRef} ref={recordQueryRef}
table={tableMetaData} table={tableMetaData}
usage="reportSetup" usage="reportSetup"

2
src/qqq/components/widgets/misc/PivotTableSetupWidget.tsx
View File

@ -39,9 +39,9 @@ import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons"; import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete"; import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent"; import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
import {buttonSX, unborderedButtonSX} from "qqq/components/widgets/misc/FilterAndColumnsSetupWidget";
import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement"; import {PivotTableGroupByElement} from "qqq/components/widgets/misc/PivotTableGroupByElement";
import {PivotTableValueElement} from "qqq/components/widgets/misc/PivotTableValueElement"; 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 Widget, {HeaderToggleComponent} from "qqq/components/widgets/Widget";
import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels"; import {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
import QQueryColumns from "qqq/models/query/QQueryColumns"; import QQueryColumns from "qqq/models/query/QQueryColumns";

72
src/qqq/components/widgets/misc/RecordGridWidget.tsx
View File

@ -40,14 +40,14 @@ import {Link, useNavigate} from "react-router-dom";
export interface ChildRecordListData extends WidgetData export interface ChildRecordListData extends WidgetData
{ {
title: string; title: string;
queryOutput: {records: {values: any}[]} queryOutput: { records: { values: any }[] };
childTableMetaData: QTableMetaData; childTableMetaData: QTableMetaData;
tablePath: string; tablePath: string;
viewAllLink: string; viewAllLink: string;
totalRows: number; totalRows: number;
canAddChildRecord: boolean; canAddChildRecord: boolean;
defaultValuesForNewChildRecords: {[fieldName: string]: any}; defaultValuesForNewChildRecords: { [fieldName: string]: any };
disabledFieldsForNewChildRecords: {[fieldName: string]: any}; disabledFieldsForNewChildRecords: { [fieldName: string]: any };
} }
interface Props interface Props
@ -75,9 +75,9 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
{ {
const instance = useRef({timer: null}); const instance = useRef({timer: null});
const [rows, setRows] = useState([]); const [rows, setRows] = useState([]);
const [records, setRecords] = useState([] as QRecord[]) const [records, setRecords] = useState([] as QRecord[]);
const [columns, setColumns] = useState([]); const [columns, setColumns] = useState([]);
const [allColumns, setAllColumns] = useState([]) const [allColumns, setAllColumns] = useState([]);
const [csv, setCsv] = useState(null as string); const [csv, setCsv] = useState(null as string);
const [fileName, setFileName] = useState(null as string); const [fileName, setFileName] = useState(null as string);
const [gridMouseDownX, setGridMouseDownX] = useState(0); const [gridMouseDownX, setGridMouseDownX] = useState(0);
@ -110,20 +110,20 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
///////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////
// capture all-columns to use for the export (before we might splice some away from the on-screen display) // // capture all-columns to use for the export (before we might splice some away from the on-screen display) //
///////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////
const allColumns = [... columns]; const allColumns = [...columns];
setAllColumns(JSON.parse(JSON.stringify(columns))); setAllColumns(JSON.parse(JSON.stringify(columns)));
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
// do not not show the foreign-key column of the parent table // // do not not show the foreign-key column of the parent table //
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
if(data.defaultValuesForNewChildRecords) if (data.defaultValuesForNewChildRecords)
{ {
for (let i = 0; i < columns.length; i++) for (let i = 0; i < columns.length; i++)
{ {
if(data.defaultValuesForNewChildRecords[columns[i].field]) if (data.defaultValuesForNewChildRecords[columns[i].field])
{ {
columns.splice(i, 1); columns.splice(i, 1);
i-- i--;
} }
} }
} }
@ -131,7 +131,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
//////////////////////////////////// ////////////////////////////////////
// add actions cell, if available // // add actions cell, if available //
//////////////////////////////////// ////////////////////////////////////
if(allowRecordEdit || allowRecordDelete) if (allowRecordEdit || allowRecordDelete)
{ {
columns.unshift({ columns.unshift({
field: "_actions", field: "_actions",
@ -145,19 +145,19 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
return <Box> return <Box>
{allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>} {allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
{allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>} {allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
</Box> </Box>;
}) })
}) });
} }
setRows(rows); setRows(rows);
setRecords(records) setRecords(records);
setColumns(columns); setColumns(columns);
let csv = ""; let csv = "";
for (let i = 0; i < allColumns.length; i++) for (let i = 0; i < allColumns.length; i++)
{ {
csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"` csv += `${i > 0 ? "," : ""}"${ValueUtils.cleanForCsv(allColumns[i].headerName)}"`;
} }
csv += "\n"; csv += "\n";
@ -165,8 +165,8 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
{ {
for (let j = 0; j < allColumns.length; j++) for (let j = 0; j < allColumns.length; j++)
{ {
const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field) const value = records[i].displayValues.get(allColumns[j].field) ?? records[i].values.get(allColumns[j].field);
csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"` csv += `${j > 0 ? "," : ""}"${ValueUtils.cleanForCsv(value)}"`;
} }
csv += "\n"; csv += "\n";
} }
@ -182,13 +182,13 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
// view all link // // view all link //
/////////////////// ///////////////////
const labelAdditionalElementsLeft: JSX.Element[] = []; const labelAdditionalElementsLeft: JSX.Element[] = [];
if(data && data.viewAllLink) if (data && data.viewAllLink)
{ {
labelAdditionalElementsLeft.push( labelAdditionalElementsLeft.push(
<Typography key={"viewAllLink"} variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative"> <Typography key={"viewAllLink"} variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
<Link to={data.viewAllLink}>View All</Link> <Link to={data.viewAllLink}>View All</Link>
</Typography> </Typography>
) );
} }
/////////////////// ///////////////////
@ -200,10 +200,10 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
{ {
isExportDisabled = false; isExportDisabled = false;
if(data.totalRows && data.queryOutput.records.length < data.totalRows) if (data.totalRows && data.queryOutput.records.length < data.totalRows)
{ {
tooltipTitle = "Export these " + data.queryOutput.records.length + " records." tooltipTitle = "Export these " + data.queryOutput.records.length + " records.";
if(data.viewAllLink) if (data.viewAllLink)
{ {
tooltipTitle += "\nClick View All to export all records."; tooltipTitle += "\nClick View All to export all records.";
} }
@ -212,17 +212,17 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
const onExportClick = () => const onExportClick = () =>
{ {
if(csv) if (csv)
{ {
HtmlUtils.download(fileName, csv); HtmlUtils.download(fileName, csv);
} }
else else
{ {
alert("There is no data available to export.") alert("There is no data available to export.");
} }
} };
if(widgetMetaData?.showExportButton) if (widgetMetaData?.showExportButton)
{ {
labelAdditionalElementsLeft.push( labelAdditionalElementsLeft.push(
<Typography key={"exportButton"} variant="body2" px={0} display="inline" position="relative"> <Typography key={"exportButton"} variant="body2" px={0} display="inline" position="relative">
@ -234,15 +234,15 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
//////////////////// ////////////////////
// add new button // // add new button //
//////////////////// ////////////////////
const labelAdditionalComponentsRight: LabelComponent[] = [] const labelAdditionalComponentsRight: LabelComponent[] = [];
if(data && data.canAddChildRecord) if (data && data.canAddChildRecord)
{ {
let disabledFields = data.disabledFieldsForNewChildRecords; let disabledFields = data.disabledFieldsForNewChildRecords;
if(!disabledFields) if (!disabledFields)
{ {
disabledFields = data.defaultValuesForNewChildRecords; disabledFields = data.defaultValuesForNewChildRecords;
} }
labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback)) labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback));
} }
@ -251,16 +251,16 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
{ {
if(disableRowClick) if (disableRowClick)
{ {
return; return;
} }
(async () => (async () =>
{ {
const qInstance = await qController.loadMetaData() const qInstance = await qController.loadMetaData();
let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name) let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name);
if(tablePath) if (tablePath)
{ {
tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`; tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance); DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
@ -276,7 +276,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
*******************************************************************************/ *******************************************************************************/
function CustomToolbar() function CustomToolbar()
{ {
const handleMouseDown: GridEventListener<"cellMouseDown"> = ( params, event, details ) => const handleMouseDown: GridEventListener<"cellMouseDown"> = (params, event, details) =>
{ {
setGridMouseDownX(event.clientX); setGridMouseDownX(event.clientX);
setGridMouseDownY(event.clientY); setGridMouseDownY(event.clientY);
@ -304,8 +304,8 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
labelAdditionalComponentsRight={labelAdditionalComponentsRight} labelAdditionalComponentsRight={labelAdditionalComponentsRight}
labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}} labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
> >
<Box mx={-2} mb={-3}> <Box mx={-3} mb={-3}>
<Box className="recordGridWidget"> <Box>
<DataGridPro <DataGridPro
autoHeight autoHeight
sx={{ sx={{

93
src/qqq/pages/processes/ProcessRun.tsx
View File

@ -94,7 +94,7 @@ const BACKOFF_AMOUNT = 1.5;
//////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////
let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void => let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
{ {
} };
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
{ {
@ -134,7 +134,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
const [showErrorDetail, setShowErrorDetail] = useState(false); const [showErrorDetail, setShowErrorDetail] = useState(false);
const [showFullHelpText, setShowFullHelpText] = useState(false); const [showFullHelpText, setShowFullHelpText] = useState(false);
const [renderedWidgets, setRenderedWidgets] = useState({} as {[step: string]: {[widgetName: string]: any}}); const [renderedWidgets, setRenderedWidgets] = useState({} as { [step: string]: { [widgetName: string]: any } });
const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext); const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
@ -238,15 +238,15 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
setShowFullHelpText(!showFullHelpText); setShowFullHelpText(!showFullHelpText);
}; };
const download = (processValues: {[key: string]: string}) => const download = (processValues: { [key: string]: string }) =>
{ {
let url; let url;
let fileName = processValues.downloadFileName; let fileName = processValues.downloadFileName;
if(processValues.serverFilePath) if (processValues.serverFilePath)
{ {
url = `/download/${encodeURIComponent(processValues.downloadFileName)}?filePath=${encodeURIComponent(processValues.serverFilePath)}`; url = `/download/${encodeURIComponent(processValues.downloadFileName)}?filePath=${encodeURIComponent(processValues.serverFilePath)}`;
} }
else if(processValues.storageTableName && processValues.storageReference) else if (processValues.storageTableName && processValues.storageReference)
{ {
url = `/download/${encodeURIComponent(processValues.downloadFileName)}?storageTableName=${encodeURIComponent(processValues.storageTableName)}&storageReference=${encodeURIComponent(processValues.storageReference)}`; url = `/download/${encodeURIComponent(processValues.downloadFileName)}?storageTableName=${encodeURIComponent(processValues.storageTableName)}&storageReference=${encodeURIComponent(processValues.storageReference)}`;
} }
@ -291,19 +291,19 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
*******************************************************************************/ *******************************************************************************/
function renderWidget(widgetName: string) function renderWidget(widgetName: string)
{ {
if(!renderedWidgets[activeStep.name]) if (!renderedWidgets[activeStep.name])
{ {
renderedWidgets[activeStep.name] = {}; renderedWidgets[activeStep.name] = {};
setRenderedWidgets(renderedWidgets); setRenderedWidgets(renderedWidgets);
} }
if(renderedWidgets[activeStep.name][widgetName]) if (renderedWidgets[activeStep.name][widgetName])
{ {
return renderedWidgets[activeStep.name][widgetName]; return renderedWidgets[activeStep.name][widgetName];
} }
const widgetMetaData = qInstance.widgets.get(widgetName); const widgetMetaData = qInstance.widgets.get(widgetName);
if(!widgetMetaData) if (!widgetMetaData)
{ {
return (<Alert color="error">Unrecognized widget name: {widgetName}</Alert>); return (<Alert color="error">Unrecognized widget name: {widgetName}</Alert>);
} }
@ -311,12 +311,12 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
const queryStringParts: string[] = []; const queryStringParts: string[] = [];
for (let name in processValues) for (let name in processValues)
{ {
queryStringParts.push(`${name}=${encodeURIComponent(processValues[name])}`) queryStringParts.push(`${name}=${encodeURIComponent(processValues[name])}`);
} }
const renderedWidget = (<Box m={-2}> const renderedWidget = (<Box m={-2}>
<DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} /> <DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} />
</Box>) </Box>);
renderedWidgets[activeStep.name][widgetName] = renderedWidget; renderedWidgets[activeStep.name][widgetName] = renderedWidget;
return renderedWidget; return renderedWidget;
} }
@ -367,8 +367,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
</MDTypography> </MDTypography>
<Box component="div" py={3}> <Box component="div" py={3}>
<Grid container justifyContent="flex-end" spacing={3}> <Grid container justifyContent="flex-end" spacing={3}>
{isModal ? <QCancelButton onClickHandler={handleCancelClicked} disabled={false} label="Close" /> {isModal ? <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} label="Close" />
: !isWidget && <QCancelButton onClickHandler={handleCancelClicked} disabled={false} /> : !isWidget && <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} />
} }
</Grid> </Grid>
</Box> </Box>
@ -500,7 +500,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
// edit the formData object to just include those. // // edit the formData object to just include those. //
////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////
let formDataToUse = formData; let formDataToUse = formData;
if(component.values && component.values.includeFieldNames) if (component.values && component.values.includeFieldNames)
{ {
formDataToUse = Object.assign({}, formData); formDataToUse = Object.assign({}, formData);
@ -608,21 +608,21 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
} }
{ {
component.type === QComponentType.EDIT_FORM && component.type === QComponentType.EDIT_FORM &&
<> <>
{ {
component.values?.sectionLabel ? component.values?.sectionLabel ?
<Box py={1.5}> <Box py={1.5}>
<Card sx={{scrollMarginTop: "20px"}}> <Card sx={{scrollMarginTop: "20px"}}>
<MDTypography variant="h5" p={3} pl={2} pb={1}> <MDTypography variant="h5" p={3} pl={2} pb={1}>
{component.values?.sectionLabel} {component.values?.sectionLabel}
</MDTypography> </MDTypography>
<Box pt={0} p={2}> <Box pt={0} p={2}>
<QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} /> <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
</Box> </Box>
</Card> </Card>
</Box> : <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} /> </Box> : <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
} }
</> </>
} }
{ {
component.type === QComponentType.VIEW_FORM && step.viewFields && ( component.type === QComponentType.VIEW_FORM && step.viewFields && (
@ -1079,14 +1079,14 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
setProcessValues(qJobComplete.values); setProcessValues(qJobComplete.values);
setQJobRunning(null); setQJobRunning(null);
if(formikSetFieldValueFunction) if (formikSetFieldValueFunction)
{ {
////////////////////////////////// //////////////////////////////////
// reset field values in formik // // reset field values in formik //
////////////////////////////////// //////////////////////////////////
for (let key in qJobComplete.values) for (let key in qJobComplete.values)
{ {
if(Object.hasOwn(formFields, key)) if (Object.hasOwn(formFields, key))
{ {
console.log(`(re)setting form field [${key}] to [${qJobComplete.values[key]}]`); console.log(`(re)setting form field [${key}] to [${qJobComplete.values[key]}]`);
formikSetFieldValueFunction(key, qJobComplete.values[key]); formikSetFieldValueFunction(key, qJobComplete.values[key]);
@ -1098,7 +1098,7 @@ 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) // // 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; const updatedFrontendStepList = qJobComplete.updatedFrontendStepList;
if(updatedFrontendStepList) if (updatedFrontendStepList)
{ {
setSteps(updatedFrontendStepList); setSteps(updatedFrontendStepList);
} }
@ -1401,8 +1401,20 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
}); });
}; };
const handleCancelClicked = () =>
/*******************************************************************************
**
*******************************************************************************/
const handleCancelClicked = (isClose: boolean) =>
{ {
//////////////////////////////////////////////////////////////////
// unless this is a 'close', then tell backend we're cancelling //
//////////////////////////////////////////////////////////////////
if (!isClose)
{
Client.getInstance().processCancel(processName, processUUID);
}
if (isModal && closeModalHandler) if (isModal && closeModalHandler)
{ {
closeModalHandler(null, "cancelClicked"); closeModalHandler(null, "cancelClicked");
@ -1415,6 +1427,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
navigate(path, {replace: true}); navigate(path, {replace: true});
}; };
const mainCardStyles: any = {}; const mainCardStyles: any = {};
const formStyles: any = {}; const formStyles: any = {};
mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`; mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
@ -1490,8 +1503,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
<Box p={3}> <Box p={3}>
<Box pb={isWidget ? 6 : "initial"}> <Box pb={isWidget ? 6 : "initial"}>
{/*************************************************************************** {/***************************************************************************
** step content - e.g., the appropriate form or other screen for the step ** ** step content - e.g., the appropriate form or other screen for the step **
***************************************************************************/} ***************************************************************************/}
{getDynamicStepContent( {getDynamicStepContent(
activeStepIndex, activeStepIndex,
activeStep, activeStep,
@ -1507,8 +1520,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
setFieldValue, setFieldValue,
)} )}
{/******************************** {/********************************
** back &| next/submit buttons ** ** back &| next/submit buttons **
********************************/} ********************************/}
<Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}> <Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
{true || activeStepIndex === 0 ? ( {true || activeStepIndex === 0 ? (
<Box /> <Box />
@ -1526,7 +1539,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
)} )}
{ {
noMoreSteps && <QCancelButton noMoreSteps && <QCancelButton
onClickHandler={handleCancelClicked} onClickHandler={() => handleCancelClicked(true)}
label={isModal ? "Close" : "Return"} label={isModal ? "Close" : "Return"}
iconName={isModal ? "cancel" : "arrow_back"} iconName={isModal ? "cancel" : "arrow_back"}
disabled={isSubmitting} /> disabled={isSubmitting} />
@ -1537,7 +1550,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
<Grid container justifyContent="flex-end" spacing={3}> <Grid container justifyContent="flex-end" spacing={3}>
{ {
!isWidget && ( !isWidget && (
<QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} /> <QCancelButton onClickHandler={() => handleCancelClicked(false)} disabled={isSubmitting} />
) )
} }
<QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} /> <QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
@ -1552,13 +1565,13 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
</Box> </Box>
</Card> </Card>
</Form> </Form>
) );
}} }}
</Formik> </Formik>
); );
const body = ( const body = (
<Box py={3} mb={20}> <Box py={3} mb={20} className="processRun">
<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}

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

@ -94,6 +94,7 @@ interface Props
isModal?: boolean; isModal?: boolean;
initialQueryFilter?: QQueryFilter; initialQueryFilter?: QQueryFilter;
initialColumns?: QQueryColumns; initialColumns?: QQueryColumns;
allowVariables?: boolean;
} }
/////////////////////////////////////////////////////// ///////////////////////////////////////////////////////
@ -125,7 +126,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, initialQueryFilter, initialColumns}: Props, ref) => const RecordQuery = forwardRef(({table, usage, isModal, allowVariables, initialQueryFilter, initialColumns}: Props, ref) =>
{ {
const tableName = table.name; const tableName = table.name;
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
@ -2884,6 +2885,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
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()}
@ -2912,6 +2914,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
metaData: metaData, metaData: metaData,
queryFilter: queryFilter, queryFilter: queryFilter,
updateFilter: doSetQueryFilter, updateFilter: doSetQueryFilter,
allowVariables: allowVariables
} }
}} }}
localeText={{ localeText={{

21
src/qqq/styles/qqq-override-styles.css
View File

@ -421,6 +421,14 @@ input[type="search"]::-webkit-search-results-decoration
font-size: 2rem !important; font-size: 2rem !important;
} }
.dashboard-table-actions-icon
{
font-size: 1.5rem !important;
position: relative;
top: -5px;
margin-right: 8px;
}
.dashboard-schedule-icon .dashboard-schedule-icon
{ {
font-size: 1.1rem !important; font-size: 1.1rem !important;
@ -703,17 +711,13 @@ input[type="search"]::-webkit-search-results-decoration
padding: 24px; padding: 24px;
} }
.recordView .widget .recordGridWidget
{
margin: -8px;
}
.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover .MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
{ {
color: white; color: white;
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;
@ -776,3 +780,10 @@ 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;
}

2
src/test/resources/fixtures/metaData/index.json
View File

@ -822,7 +822,7 @@
"reportSetupWidget": { "reportSetupWidget": {
"name": "reportSetupWidget", "name": "reportSetupWidget",
"label": "Filters and Columns", "label": "Filters and Columns",
"type": "reportSetup", "type": "filterAndColumnsSetup",
"isCard": true, "isCard": true,
"storeDropdownSelections": false, "storeDropdownSelections": false,
"showReloadButton": true, "showReloadButton": true,