mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-21 22:58:43 +00:00
Compare commits
25 Commits
snapshot-f
...
snapshot-f
Author | SHA1 | Date | |
---|---|---|---|
71a1bfaa6b | |||
d9e9a0be08 | |||
aefb282a0e | |||
fb57718c1c | |||
ba213b038b | |||
69daf47021 | |||
1d24b9b40c | |||
f44ba8d6d3 | |||
dc131d5189 | |||
2b5cc1610f | |||
a36bdb1474 | |||
c2926d26e8 | |||
eb42a86655 | |||
b7f715f832 | |||
16a08cfd42 | |||
f5919c66ab | |||
0831a87674 | |||
dd5cd459ce | |||
c200cc9fab | |||
17f378131d | |||
376a7a342e | |||
fcadea3192 | |||
086ab775fc | |||
5693661d20 | |||
8c9224aceb |
@ -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
2174
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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.99",
|
"@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",
|
||||||
|
@ -49,6 +49,7 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit";
|
|||||||
import RecordQuery from "qqq/pages/records/query/RecordQuery";
|
import RecordQuery from "qqq/pages/records/query/RecordQuery";
|
||||||
import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView";
|
import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView";
|
||||||
import RecordView from "qqq/pages/records/view/RecordView";
|
import RecordView from "qqq/pages/records/view/RecordView";
|
||||||
|
import RecordViewByUniqueKey from "qqq/pages/records/view/RecordViewByUniqueKey";
|
||||||
import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
|
import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
|
||||||
import Client from "qqq/utils/qqq/Client";
|
import Client from "qqq/utils/qqq/Client";
|
||||||
import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
|
import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
|
||||||
@ -392,6 +393,13 @@ export default function App()
|
|||||||
component: <RecordView table={table} />,
|
component: <RecordView table={table} />,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
routeList.push({
|
||||||
|
name: `${app.label} View`,
|
||||||
|
key: `${app.name}.view`,
|
||||||
|
route: `${path}/key`,
|
||||||
|
component: <RecordViewByUniqueKey table={table} />,
|
||||||
|
});
|
||||||
|
|
||||||
routeList.push({
|
routeList.push({
|
||||||
name: `${app.label}`,
|
name: `${app.label}`,
|
||||||
key: `${app.name}.edit`,
|
key: `${app.name}.edit`,
|
||||||
|
@ -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);
|
||||||
|
|
||||||
@ -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 <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
|
||||||
@ -388,18 +390,27 @@ function EntityForm(props: Props): JSX.Element
|
|||||||
/>;
|
/>;
|
||||||
}
|
}
|
||||||
|
|
||||||
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 (widgetMetaData?.defaultValues?.has("tableName"))
|
||||||
|
{
|
||||||
|
formValues["tableName"] = widgetMetaData?.defaultValues.get("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}
|
||||||
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 +418,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 +431,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 +460,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++)
|
||||||
@ -488,15 +499,15 @@ function EntityForm(props: Props): JSX.Element
|
|||||||
/////////////////////////////////////////////////
|
/////////////////////////////////////////////////
|
||||||
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
|
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
|
||||||
{
|
{
|
||||||
const widget = metaData.widgets.get(section.widgetName);
|
const widget = metaData?.widgets.get(section.widgetName);
|
||||||
if(widget)
|
if (widget)
|
||||||
{
|
{
|
||||||
if(widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
|
if (widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
|
||||||
{
|
{
|
||||||
return (true);
|
return (true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(widget.type == "reportSetup" || widget.type == "pivotTableSetup" || widget.type == "dynamicForm")
|
if (widget.type == "filterAndColumnsSetup" || widget.type == "pivotTableSetup" || widget.type == "dynamicForm")
|
||||||
{
|
{
|
||||||
return (true);
|
return (true);
|
||||||
}
|
}
|
||||||
@ -680,7 +691,7 @@ function EntityForm(props: Props): JSX.Element
|
|||||||
}
|
}
|
||||||
|
|
||||||
const hasFields = section.fieldNames && section.fieldNames.length > 0;
|
const hasFields = section.fieldNames && section.fieldNames.length > 0;
|
||||||
if(hasFields)
|
if (hasFields)
|
||||||
{
|
{
|
||||||
for (let j = 0; j < section.fieldNames.length; j++)
|
for (let j = 0; j < section.fieldNames.length; j++)
|
||||||
{
|
{
|
||||||
@ -719,7 +730,7 @@ function EntityForm(props: Props): JSX.Element
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
const widgetMetaData = metaData.widgets.get(section.widgetName);
|
const widgetMetaData = metaData?.widgets.get(section.widgetName);
|
||||||
const widgetData = await qController.widget(widgetMetaData.name, makeQueryStringWithIdAndObject(tableMetaData, defaultValues));
|
const widgetData = await qController.widget(widgetMetaData.name, makeQueryStringWithIdAndObject(tableMetaData, defaultValues));
|
||||||
|
|
||||||
newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
|
newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
|
||||||
@ -1000,19 +1011,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 +1034,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 +1056,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 +1069,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 +1159,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 +1205,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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -35,6 +35,7 @@ import DialogTitle from "@mui/material/DialogTitle";
|
|||||||
import Grid from "@mui/material/Grid";
|
import Grid from "@mui/material/Grid";
|
||||||
import Icon from "@mui/material/Icon";
|
import Icon from "@mui/material/Icon";
|
||||||
import TextField from "@mui/material/TextField";
|
import TextField from "@mui/material/TextField";
|
||||||
|
import {any} from "prop-types";
|
||||||
import React, {useState} from "react";
|
import React, {useState} from "react";
|
||||||
import {useNavigate} from "react-router-dom";
|
import {useNavigate} from "react-router-dom";
|
||||||
import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
|
import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
|
||||||
@ -71,7 +72,12 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
|
|||||||
|
|
||||||
function GotoRecordDialog(props: Props): JSX.Element
|
function GotoRecordDialog(props: Props): JSX.Element
|
||||||
{
|
{
|
||||||
const fields: QFieldMetaData[] = [];
|
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// this is an array of array of fields. //
|
||||||
|
// that is - each entry in the top-level array is a set of fields that can be used together to goto a record //
|
||||||
|
// such as (pkey), (ukey-field1,ukey-field2). //
|
||||||
|
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
const options: QFieldMetaData[][] = [];
|
||||||
|
|
||||||
let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
|
let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
|
||||||
let addedPkey = false;
|
let addedPkey = false;
|
||||||
@ -82,31 +88,38 @@ function GotoRecordDialog(props: Props): JSX.Element
|
|||||||
{
|
{
|
||||||
for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
|
for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
|
||||||
{
|
{
|
||||||
// todo - multi-field keys!!
|
const option: QFieldMetaData[] = [];
|
||||||
let fieldName = mdbMetaData.gotoFieldNames[i][0];
|
options.push(option);
|
||||||
let field = props.tableMetaData.fields.get(fieldName);
|
for (let j = 0; j < mdbMetaData.gotoFieldNames[i].length; j++)
|
||||||
if (field)
|
|
||||||
{
|
{
|
||||||
fields.push(field);
|
let fieldName = mdbMetaData.gotoFieldNames[i][j];
|
||||||
|
let field = props.tableMetaData.fields.get(fieldName);
|
||||||
if (field.name == pkey.name)
|
if (field)
|
||||||
{
|
{
|
||||||
addedPkey = true;
|
option.push(field);
|
||||||
|
|
||||||
|
if (pkey != null && field.name == pkey.name)
|
||||||
|
{
|
||||||
|
addedPkey = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// if pkey wasn't in the gotoField options meta-data, go ahead add it as an option here //
|
||||||
|
//////////////////////////////////////////////////////////////////////////////////////////
|
||||||
if (pkey && !addedPkey)
|
if (pkey && !addedPkey)
|
||||||
{
|
{
|
||||||
fields.unshift(pkey);
|
options.unshift([pkey]);
|
||||||
}
|
}
|
||||||
|
|
||||||
const makeInitialValues = () =>
|
const makeInitialValues = () =>
|
||||||
{
|
{
|
||||||
const rs = {} as { [field: string]: string };
|
const rs = {} as { [field: string]: string };
|
||||||
fields.forEach((field) => rs[field.name] = "");
|
options.forEach((option) => option.forEach((field) => rs[field.name] = ""));
|
||||||
return (rs);
|
return (rs);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -141,11 +154,16 @@ function GotoRecordDialog(props: Props): JSX.Element
|
|||||||
}
|
}
|
||||||
else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
|
else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
|
||||||
{
|
{
|
||||||
const index = targetId?.replaceAll("gotoInput-", "");
|
const parts = targetId?.split(/-/);
|
||||||
|
const index = parts[1];
|
||||||
document.getElementById("gotoButton-" + index).click();
|
document.getElementById("gotoButton-" + index).click();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/***************************************************************************
|
||||||
|
** event handler for close button
|
||||||
|
***************************************************************************/
|
||||||
const closeRequested = () =>
|
const closeRequested = () =>
|
||||||
{
|
{
|
||||||
if (props.mayClose)
|
if (props.mayClose)
|
||||||
@ -154,10 +172,47 @@ function GotoRecordDialog(props: Props): JSX.Element
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const goClicked = async (fieldName: string) =>
|
|
||||||
|
/*******************************************************************************
|
||||||
|
** function to say if an option's submit button should be disabled
|
||||||
|
*******************************************************************************/
|
||||||
|
const isOptionSubmitButtonDisabled = (optionIndex: number) =>
|
||||||
|
{
|
||||||
|
let anyFieldsInThisOptionHaveAValue = false;
|
||||||
|
|
||||||
|
options[optionIndex].forEach((field) =>
|
||||||
|
{
|
||||||
|
if(values[field.name])
|
||||||
|
{
|
||||||
|
anyFieldsInThisOptionHaveAValue = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if(!anyFieldsInThisOptionHaveAValue)
|
||||||
|
{
|
||||||
|
return (true);
|
||||||
|
}
|
||||||
|
return (false);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/***************************************************************************
|
||||||
|
** event handler for clicking an 'option's go/submit button
|
||||||
|
***************************************************************************/
|
||||||
|
const optionGoClicked = async (optionIndex: number) =>
|
||||||
{
|
{
|
||||||
setError("");
|
setError("");
|
||||||
const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
|
|
||||||
|
const criteria: QFilterCriteria[] = [];
|
||||||
|
const queryStringParts: string[] = [];
|
||||||
|
options[optionIndex].forEach((field) =>
|
||||||
|
{
|
||||||
|
criteria.push(new QFilterCriteria(field.name, QCriteriaOperator.EQUALS, [values[field.name]]))
|
||||||
|
queryStringParts.push(`${field.name}=${encodeURIComponent(values[field.name])}`)
|
||||||
|
})
|
||||||
|
|
||||||
|
const filter = new QQueryFilter(criteria, null, null, "AND", null, 10);
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
|
const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
|
||||||
@ -168,12 +223,26 @@ function GotoRecordDialog(props: Props): JSX.Element
|
|||||||
}
|
}
|
||||||
else if (queryResult.length == 1)
|
else if (queryResult.length == 1)
|
||||||
{
|
{
|
||||||
navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
|
if(options[optionIndex].length == 1 && options[optionIndex][0].name == pkey?.name)
|
||||||
|
{
|
||||||
|
/////////////////////////////////////////////////
|
||||||
|
// navigate by pkey, if that's how we searched //
|
||||||
|
/////////////////////////////////////////////////
|
||||||
|
navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
/////////////////////////////////
|
||||||
|
// else navigate by unique-key //
|
||||||
|
/////////////////////////////////
|
||||||
|
navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/key/?${queryStringParts.join("&")}`);
|
||||||
|
}
|
||||||
|
|
||||||
close();
|
close();
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
setError("More than 1 record found...");
|
setError("More than 1 record was found...");
|
||||||
setTimeout(() => setError(""), 3000);
|
setTimeout(() => setError(""), 3000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -187,7 +256,7 @@ function GotoRecordDialog(props: Props): JSX.Element
|
|||||||
|
|
||||||
if (props.tableMetaData)
|
if (props.tableMetaData)
|
||||||
{
|
{
|
||||||
if (fields.length == 0 && !error)
|
if (options.length == 0 && !error)
|
||||||
{
|
{
|
||||||
setError("This table is not configured for this feature.");
|
setError("This table is not configured for this feature.");
|
||||||
}
|
}
|
||||||
@ -200,31 +269,38 @@ function GotoRecordDialog(props: Props): JSX.Element
|
|||||||
<DialogContent>
|
<DialogContent>
|
||||||
{props.subHeader}
|
{props.subHeader}
|
||||||
{
|
{
|
||||||
fields.map((field, index) =>
|
options.map((option, optionIndex) =>
|
||||||
(
|
<Box key={optionIndex}>
|
||||||
<Grid key={field.name} container alignItems="center" py={1}>
|
{
|
||||||
<Grid item xs={3} textAlign="right" pr={2}>
|
option.map((field, index) =>
|
||||||
{field.label}
|
(
|
||||||
</Grid>
|
<Grid key={field.name} container alignItems="center" py={1}>
|
||||||
<Grid item xs={6}>
|
<Grid item xs={3} textAlign="right" pr={2}>
|
||||||
<TextField
|
{field.label}
|
||||||
id={`gotoInput-${index}`}
|
</Grid>
|
||||||
autoFocus={index == 0}
|
<Grid item xs={6}>
|
||||||
autoComplete="off"
|
<TextField
|
||||||
inputProps={{width: "100%"}}
|
id={`gotoInput-${optionIndex}-${index}`}
|
||||||
onChange={(e) => handleChange(field.name, e.target.value)}
|
autoFocus={optionIndex == 0 && index == 0}
|
||||||
value={values[field.name]}
|
autoComplete="off"
|
||||||
sx={{width: "100%"}}
|
inputProps={{width: "100%"}}
|
||||||
onFocus={event => event.target.select()}
|
onChange={(e) => handleChange(field.name, e.target.value)}
|
||||||
/>
|
value={values[field.name]}
|
||||||
</Grid>
|
sx={{width: "100%"}}
|
||||||
<Grid item xs={1} pl={2}>
|
onFocus={event => event.target.select()}
|
||||||
<MDButton id={`gotoButton-${index}`} type="submit" variant="gradient" color="info" size="small" onClick={() => goClicked(field.name)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={`${values[field.name]}`.length == 0}>
|
/>
|
||||||
Go
|
</Grid>
|
||||||
</MDButton>
|
<Grid item xs={1} pl={2}>
|
||||||
</Grid>
|
{
|
||||||
</Grid>
|
(index == option.length - 1) &&
|
||||||
))
|
<MDButton id={`gotoButton-${optionIndex}`} type="submit" variant="gradient" color="info" size="small" onClick={() => optionGoClicked(optionIndex)} fullWidth startIcon={<Icon>double_arrow</Icon>} disabled={isOptionSubmitButtonDisabled(optionIndex)}>Go</MDButton>
|
||||||
|
}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
error &&
|
error &&
|
||||||
@ -282,7 +358,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
|
|||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{
|
{
|
||||||
props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto}>Go To...</Button>
|
props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} sx={{whiteSpace: "nowrap"}}>Go To...</Button>
|
||||||
}
|
}
|
||||||
<GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
|
<GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||||
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
||||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||||
import Box from "@mui/material/Box";
|
import {Box} from "@mui/material";
|
||||||
import Card from "@mui/material/Card";
|
import Card from "@mui/material/Card";
|
||||||
import Icon from "@mui/material/Icon";
|
import Icon from "@mui/material/Icon";
|
||||||
import {Theme} from "@mui/material/styles";
|
import {Theme} from "@mui/material/styles";
|
||||||
@ -76,12 +76,12 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 2rem)"}}>
|
<Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "hidden", maxHeight: "calc(100vh - 2rem)"}}>
|
||||||
<Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
|
<Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none", overflow: "auto", height: "100%"}}>
|
||||||
{
|
{
|
||||||
sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
|
sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
|
||||||
|
|
||||||
<HashLink key={`section-link-${entry.name}`} to={`#${entry.name}`}>
|
<Box key={`section-link-${entry.name}`} onClick={() => document.getElementById(entry.name).scrollIntoView()} sx={{cursor: "pointer"}}>
|
||||||
<Box key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
|
<Box key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
|
||||||
<MDTypography
|
<MDTypography
|
||||||
variant="button"
|
variant="button"
|
||||||
@ -112,7 +112,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
|
|||||||
|
|
||||||
</MDTypography>
|
</MDTypography>
|
||||||
</Box>
|
</Box>
|
||||||
</HashLink>
|
</Box>
|
||||||
)) : null
|
)) : null
|
||||||
}
|
}
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -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);
|
||||||
|
@ -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] && widgetData[i].queryParams &&
|
||||||
<ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
|
<FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
|
||||||
{
|
{
|
||||||
}} />
|
}} />
|
||||||
)
|
)
|
||||||
|
@ -22,6 +22,9 @@
|
|||||||
|
|
||||||
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 {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
|
||||||
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,7 +45,7 @@ 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;
|
||||||
@ -50,7 +53,7 @@ interface ReportSetupWidgetProps
|
|||||||
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, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element
|
||||||
{
|
{
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
|
const [hideColumns, setHideColumns] = useState(widgetMetaData?.defaultValues?.has("hideColumns") && widgetMetaData?.defaultValues?.get("hideColumns"));
|
||||||
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
|
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
|
||||||
|
|
||||||
const [alertContent, setAlertContent] = useState(null as string);
|
const [alertContent, setAlertContent] = useState(null as string);
|
||||||
@ -101,15 +105,36 @@ 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;
|
||||||
if (!queryFilter)
|
if (!queryFilter)
|
||||||
{
|
{
|
||||||
queryFilter = new QQueryFilter();
|
queryFilter = new QQueryFilter();
|
||||||
usingDefaultEmptyFilter = true;
|
|
||||||
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// if there is no queryFilter provided, see if there are default fields from which a query should be seeded //
|
||||||
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
const defaultFilterFields = getDefaultFilterFieldNames(widgetMetaData);
|
||||||
|
if (defaultFilterFields?.length > 0)
|
||||||
|
{
|
||||||
|
defaultFilterFields.forEach((fieldName: string) =>
|
||||||
|
{
|
||||||
|
if (recordValues[fieldName])
|
||||||
|
{
|
||||||
|
queryFilter.addCriteria(new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [recordValues[fieldName]]));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
queryFilter.addOrderBy(new QFilterOrderBy("id", false));
|
||||||
|
queryFilter = Object.assign({}, queryFilter);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
usingDefaultEmptyFilter = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let columns: QQueryColumns = null;
|
|
||||||
if (recordValues["columnsJson"])
|
if (recordValues["columnsJson"])
|
||||||
{
|
{
|
||||||
columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
|
columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
|
||||||
@ -120,11 +145,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 = widgetMetaData?.defaultValues?.get("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 +166,21 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
|
|||||||
setFrontendQueryFilter(queryFilterForFrontend);
|
setFrontendQueryFilter(queryFilterForFrontend);
|
||||||
})();
|
})();
|
||||||
}
|
}
|
||||||
}, [recordValues]);
|
}, [JSON.stringify(recordValues)]);
|
||||||
|
|
||||||
|
|
||||||
|
/*******************************************************************************
|
||||||
|
**
|
||||||
|
*******************************************************************************/
|
||||||
|
function getDefaultFilterFieldNames(widgetMetaData: QWidgetMetaData)
|
||||||
|
{
|
||||||
|
if (widgetMetaData?.defaultValues?.has("filterDefaultFieldNames"))
|
||||||
|
{
|
||||||
|
return (widgetMetaData.defaultValues.get("filterDefaultFieldNames").split(","));
|
||||||
|
}
|
||||||
|
|
||||||
|
return ([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
@ -140,8 +188,27 @@ export default function ReportSetupWidget({isEditable, widgetMetaData, recordVal
|
|||||||
*******************************************************************************/
|
*******************************************************************************/
|
||||||
function openEditor()
|
function openEditor()
|
||||||
{
|
{
|
||||||
|
let missingRequiredFields = [] as string[];
|
||||||
|
getDefaultFilterFieldNames(widgetMetaData)?.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 add Additional Order Filters: '" + missingRequiredFields.join(", ") + "'");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (recordValues["tableName"])
|
if (recordValues["tableName"])
|
||||||
{
|
{
|
||||||
|
setAlertContent(null);
|
||||||
setModalOpen(true);
|
setModalOpen(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -272,7 +339,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 +380,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)}>
|
@ -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";
|
||||||
|
@ -35,8 +35,7 @@ import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
|
|||||||
import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
|
import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
|
||||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||||
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
||||||
import {Alert, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
|
import {Alert, Box, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
|
||||||
import Box from "@mui/material/Box";
|
|
||||||
import Card from "@mui/material/Card";
|
import Card from "@mui/material/Card";
|
||||||
import Grid from "@mui/material/Grid";
|
import Grid from "@mui/material/Grid";
|
||||||
import Step from "@mui/material/Step";
|
import Step from "@mui/material/Step";
|
||||||
@ -48,12 +47,14 @@ import FormData from "form-data";
|
|||||||
import {Form, Formik} from "formik";
|
import {Form, Formik} from "formik";
|
||||||
import parse from "html-react-parser";
|
import parse from "html-react-parser";
|
||||||
import QContext from "QContext";
|
import QContext from "QContext";
|
||||||
|
import colors from "qqq/assets/theme/base/colors";
|
||||||
import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
|
import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
|
||||||
import QDynamicForm from "qqq/components/forms/DynamicForm";
|
import QDynamicForm from "qqq/components/forms/DynamicForm";
|
||||||
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
||||||
import MDButton from "qqq/components/legacy/MDButton";
|
import MDButton from "qqq/components/legacy/MDButton";
|
||||||
import MDProgress from "qqq/components/legacy/MDProgress";
|
import MDProgress from "qqq/components/legacy/MDProgress";
|
||||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||||
|
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||||
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
||||||
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
|
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
|
||||||
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
|
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
|
||||||
@ -87,6 +88,14 @@ const INITIAL_RETRY_MILLIS = 1_500;
|
|||||||
const RETRY_MAX_MILLIS = 12_000;
|
const RETRY_MAX_MILLIS = 12_000;
|
||||||
const BACKOFF_AMOUNT = 1.5;
|
const BACKOFF_AMOUNT = 1.5;
|
||||||
|
|
||||||
|
////////////////////////////////////////////////////////////////////////////
|
||||||
|
// define a function that we can make referenes to, which we'll overwrite //
|
||||||
|
// with formik's setFieldValue function, once we're inside formik. //
|
||||||
|
////////////////////////////////////////////////////////////////////////////
|
||||||
|
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
|
||||||
{
|
{
|
||||||
const processNameParam = useParams().processName;
|
const processNameParam = useParams().processName;
|
||||||
@ -125,9 +134,9 @@ 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} = useContext(QContext);
|
const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
// for setting the processError state - call this function, which will also set the isUserFacingError state //
|
// for setting the processError state - call this function, which will also set the isUserFacingError state //
|
||||||
@ -229,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)}`;
|
||||||
}
|
}
|
||||||
@ -282,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>);
|
||||||
}
|
}
|
||||||
@ -302,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;
|
||||||
}
|
}
|
||||||
@ -358,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>
|
||||||
@ -446,6 +455,13 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// screen(step)-level help content //
|
||||||
|
/////////////////////////////////////
|
||||||
|
let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
|
||||||
|
const showHelp = helpHelpActive || hasHelpContent(step.helpContents, helpRoles);
|
||||||
|
const formattedHelpContent = <HelpContent helpContents={step.helpContents} roles={helpRoles} helpContentKey={`process:${processName};step:${step?.name}`} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{
|
{
|
||||||
@ -460,6 +476,13 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
</MDTypography>
|
</MDTypography>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
showHelp &&
|
||||||
|
<Box fontSize={"0.875rem"} color={colors.blueGray.main} pb={2}>
|
||||||
|
{formattedHelpContent}
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
//////////////////////////////////////////////////
|
//////////////////////////////////////////////////
|
||||||
// render all of the components for this screen //
|
// render all of the components for this screen //
|
||||||
@ -472,6 +495,23 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
|
helpRoles = ["EDIT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//////////////////////////////////////////////////////////////////////////
|
||||||
|
// if the component specifies a sub-set of field names to include, then //
|
||||||
|
// edit the formData object to just include those. //
|
||||||
|
//////////////////////////////////////////////////////////////////////////
|
||||||
|
let formDataToUse = formData;
|
||||||
|
if (component.values && component.values.includeFieldNames)
|
||||||
|
{
|
||||||
|
formDataToUse = Object.assign({}, formData);
|
||||||
|
|
||||||
|
formDataToUse.formFields = {};
|
||||||
|
for (let i = 0; i < component.values.includeFieldNames.length; i++)
|
||||||
|
{
|
||||||
|
const fieldName = component.values.includeFieldNames[i];
|
||||||
|
formDataToUse.formFields[fieldName] = formData.formFields[fieldName];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={index}>
|
<div key={index}>
|
||||||
{
|
{
|
||||||
@ -567,9 +607,22 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
component.type === QComponentType.EDIT_FORM && (
|
component.type === QComponentType.EDIT_FORM &&
|
||||||
<QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
|
<>
|
||||||
)
|
{
|
||||||
|
component.values?.sectionLabel ?
|
||||||
|
<Box py={1.5}>
|
||||||
|
<Card sx={{scrollMarginTop: "20px"}}>
|
||||||
|
<MDTypography variant="h5" p={3} pl={2} pb={1}>
|
||||||
|
{component.values?.sectionLabel}
|
||||||
|
</MDTypography>
|
||||||
|
<Box pt={0} p={2}>
|
||||||
|
<QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
</Box> : <QDynamicForm formData={formDataToUse} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
|
||||||
|
}
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
component.type === QComponentType.VIEW_FORM && step.viewFields && (
|
component.type === QComponentType.VIEW_FORM && step.viewFields && (
|
||||||
@ -960,7 +1013,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData.name, null, null);
|
DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData?.name, null, null);
|
||||||
|
|
||||||
setFormFields(newDynamicFormFields);
|
setFormFields(newDynamicFormFields);
|
||||||
setValidationScheme(Yup.object().shape(newFormValidations));
|
setValidationScheme(Yup.object().shape(newFormValidations));
|
||||||
@ -1026,6 +1079,30 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
setProcessValues(qJobComplete.values);
|
setProcessValues(qJobComplete.values);
|
||||||
setQJobRunning(null);
|
setQJobRunning(null);
|
||||||
|
|
||||||
|
if (formikSetFieldValueFunction)
|
||||||
|
{
|
||||||
|
//////////////////////////////////
|
||||||
|
// reset field values in formik //
|
||||||
|
//////////////////////////////////
|
||||||
|
for (let key in qJobComplete.values)
|
||||||
|
{
|
||||||
|
if (Object.hasOwn(formFields, key))
|
||||||
|
{
|
||||||
|
console.log(`(re)setting form field [${key}] to [${qJobComplete.values[key]}]`);
|
||||||
|
formikSetFieldValueFunction(key, qJobComplete.values[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
// if the process step sent a new frontend-step-list, then refresh what we have in state (constructing new full model objects) //
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
const updatedFrontendStepList = qJobComplete.updatedFrontendStepList;
|
||||||
|
if (updatedFrontendStepList)
|
||||||
|
{
|
||||||
|
setSteps(updatedFrontendStepList);
|
||||||
|
}
|
||||||
|
|
||||||
if (activeStep && activeStep.recordListFields)
|
if (activeStep && activeStep.recordListFields)
|
||||||
{
|
{
|
||||||
setNeedRecords(true);
|
setNeedRecords(true);
|
||||||
@ -1324,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");
|
||||||
@ -1338,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)`;
|
||||||
@ -1385,89 +1475,98 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
>
|
>
|
||||||
{({
|
{({
|
||||||
values, errors, touched, isSubmitting, setFieldValue,
|
values, errors, touched, isSubmitting, setFieldValue,
|
||||||
}) => (
|
}) =>
|
||||||
<Form style={formStyles} id={formId} autoComplete="off">
|
{
|
||||||
<Card sx={mainCardStyles}>
|
///////////////////////////////////////////////////////////////////
|
||||||
{
|
// once we're in the formik form, use its setFieldValue function //
|
||||||
!isWidget && (
|
// over top of the default one we created globally //
|
||||||
<Box mx={2} mt={-3}>
|
///////////////////////////////////////////////////////////////////
|
||||||
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
formikSetFieldValueFunction = setFieldValue;
|
||||||
{steps.map((step) => (
|
|
||||||
<Step key={step.name}>
|
|
||||||
<StepLabel>{step.label}</StepLabel>
|
|
||||||
</Step>
|
|
||||||
))}
|
|
||||||
</Stepper>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
<Box p={3}>
|
return (
|
||||||
<Box pb={isWidget ? 6 : "initial"}>
|
<Form style={formStyles} id={formId} autoComplete="off">
|
||||||
{/***************************************************************************
|
<Card sx={mainCardStyles}>
|
||||||
** step content - e.g., the appropriate form or other screen for the step **
|
{
|
||||||
***************************************************************************/}
|
!isWidget && (
|
||||||
{getDynamicStepContent(
|
<Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
|
||||||
activeStepIndex,
|
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
||||||
activeStep,
|
{steps.map((step) => (
|
||||||
{
|
<Step key={step.name}>
|
||||||
values,
|
<StepLabel>{step.label}</StepLabel>
|
||||||
touched,
|
</Step>
|
||||||
formFields,
|
))}
|
||||||
errors,
|
</Stepper>
|
||||||
},
|
</Box>
|
||||||
processError,
|
)
|
||||||
processValues,
|
}
|
||||||
recordConfig,
|
|
||||||
setFieldValue,
|
<Box p={3}>
|
||||||
)}
|
<Box pb={isWidget ? 6 : "initial"}>
|
||||||
{/********************************
|
{/***************************************************************************
|
||||||
** back &| next/submit buttons **
|
** step content - e.g., the appropriate form or other screen for the step **
|
||||||
********************************/}
|
***************************************************************************/}
|
||||||
<Box mt={6} width="100%" display="flex" justifyContent="space-between" position={isWidget ? "absolute" : "initial"} bottom={isWidget ? "3rem" : "initial"} right={isWidget ? "1.5rem" : "initial"}>
|
{getDynamicStepContent(
|
||||||
{true || activeStepIndex === 0 ? (
|
activeStepIndex,
|
||||||
<Box />
|
activeStep,
|
||||||
) : (
|
{
|
||||||
<MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
|
values,
|
||||||
)}
|
touched,
|
||||||
{processError || qJobRunning || !activeStep ? (
|
formFields,
|
||||||
<Box />
|
errors,
|
||||||
) : (
|
},
|
||||||
<>
|
processError,
|
||||||
{formError && (
|
processValues,
|
||||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
|
recordConfig,
|
||||||
{formError}
|
setFieldValue,
|
||||||
</MDTypography>
|
|
||||||
)}
|
|
||||||
{
|
|
||||||
noMoreSteps && <QCancelButton
|
|
||||||
onClickHandler={handleCancelClicked}
|
|
||||||
label={isModal ? "Close" : "Return"}
|
|
||||||
iconName={isModal ? "cancel" : "arrow_back"}
|
|
||||||
disabled={isSubmitting} />
|
|
||||||
}
|
|
||||||
{
|
|
||||||
!noMoreSteps && (
|
|
||||||
<Box component="div" py={3}>
|
|
||||||
<Grid container justifyContent="flex-end" spacing={3}>
|
|
||||||
{
|
|
||||||
!isWidget && (
|
|
||||||
<QCancelButton onClickHandler={handleCancelClicked} disabled={isSubmitting} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
<QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
{/********************************
|
||||||
|
** 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"}>
|
||||||
|
{true || activeStepIndex === 0 ? (
|
||||||
|
<Box />
|
||||||
|
) : (
|
||||||
|
<MDButton variant="gradient" color="light" onClick={handleBack}>back</MDButton>
|
||||||
|
)}
|
||||||
|
{processError || qJobRunning || !activeStep ? (
|
||||||
|
<Box />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{formError && (
|
||||||
|
<MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
|
||||||
|
{formError}
|
||||||
|
</MDTypography>
|
||||||
|
)}
|
||||||
|
{
|
||||||
|
noMoreSteps && <QCancelButton
|
||||||
|
onClickHandler={() => handleCancelClicked(true)}
|
||||||
|
label={isModal ? "Close" : "Return"}
|
||||||
|
iconName={isModal ? "cancel" : "arrow_back"}
|
||||||
|
disabled={isSubmitting} />
|
||||||
|
}
|
||||||
|
{
|
||||||
|
!noMoreSteps && (
|
||||||
|
<Box component="div" py={3}>
|
||||||
|
<Grid container justifyContent="flex-end" spacing={3}>
|
||||||
|
{
|
||||||
|
!isWidget && (
|
||||||
|
<QCancelButton onClickHandler={() => handleCancelClicked(false)} disabled={isSubmitting} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<QSubmitButton label={nextButtonLabel} iconName={nextButtonIcon} disabled={isSubmitting} />
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Card>
|
||||||
</Card>
|
</Form>
|
||||||
</Form>
|
);
|
||||||
)}
|
}}
|
||||||
</Formik>
|
</Formik>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -867,7 +867,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
|||||||
for (let i = 0; i < queryFilter?.orderBys?.length; i++)
|
for (let i = 0; i < queryFilter?.orderBys?.length; i++)
|
||||||
{
|
{
|
||||||
const fieldName = queryFilter.orderBys[i].fieldName;
|
const fieldName = queryFilter.orderBys[i].fieldName;
|
||||||
if (fieldName.indexOf(".") > -1)
|
if (fieldName != null && fieldName.indexOf(".") > -1)
|
||||||
{
|
{
|
||||||
const joinTableName = fieldName.replaceAll(/\..*/g, "");
|
const joinTableName = fieldName.replaceAll(/\..*/g, "");
|
||||||
if (!vjtToUse.has(joinTableName))
|
if (!vjtToUse.has(joinTableName))
|
||||||
|
@ -74,12 +74,14 @@ const qController = Client.getInstance();
|
|||||||
interface Props
|
interface Props
|
||||||
{
|
{
|
||||||
table?: QTableMetaData;
|
table?: QTableMetaData;
|
||||||
|
record?: QRecord;
|
||||||
launchProcess?: QProcessMetaData;
|
launchProcess?: QProcessMetaData;
|
||||||
}
|
}
|
||||||
|
|
||||||
RecordView.defaultProps =
|
RecordView.defaultProps =
|
||||||
{
|
{
|
||||||
table: null,
|
table: null,
|
||||||
|
record: null,
|
||||||
launchProcess: null,
|
launchProcess: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -127,10 +129,39 @@ export function renderSectionOfFields(key: string, fieldNames: string[], tableMe
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/***************************************************************************
|
||||||
|
**
|
||||||
|
***************************************************************************/
|
||||||
|
export function getVisibleJoinTables(tableMetaData: QTableMetaData): Set<string>
|
||||||
|
{
|
||||||
|
const visibleJoinTables = new Set<string>();
|
||||||
|
|
||||||
|
for (let i = 0; i < tableMetaData?.sections.length; i++)
|
||||||
|
{
|
||||||
|
const section = tableMetaData?.sections[i];
|
||||||
|
if (section.isHidden || !section.fieldNames || !section.fieldNames.length)
|
||||||
|
{
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.fieldNames.forEach((fieldName) =>
|
||||||
|
{
|
||||||
|
const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
|
||||||
|
if (tableForField && tableForField.name != tableMetaData.name)
|
||||||
|
{
|
||||||
|
visibleJoinTables.add(tableForField.name);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (visibleJoinTables);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
** Record View Screen component.
|
** Record View Screen component.
|
||||||
*******************************************************************************/
|
*******************************************************************************/
|
||||||
function RecordView({table, launchProcess}: Props): JSX.Element
|
function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.Element
|
||||||
{
|
{
|
||||||
const {id} = useParams();
|
const {id} = useParams();
|
||||||
|
|
||||||
@ -147,7 +178,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
|||||||
const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
|
const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
|
||||||
const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
|
const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
|
||||||
const [metaData, setMetaData] = useState(null as QInstance);
|
const [metaData, setMetaData] = useState(null as QInstance);
|
||||||
const [record, setRecord] = useState(null as QRecord);
|
const [record, setRecord] = useState(overrideRecord ?? null as QRecord);
|
||||||
const [tableSections, setTableSections] = useState([] as QTableSection[]);
|
const [tableSections, setTableSections] = useState([] as QTableSection[]);
|
||||||
const [t1Section, setT1Section] = useState(null as QTableSection);
|
const [t1Section, setT1Section] = useState(null as QTableSection);
|
||||||
const [t1SectionName, setT1SectionName] = useState(null as string);
|
const [t1SectionName, setT1SectionName] = useState(null as string);
|
||||||
@ -381,31 +412,6 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
|||||||
reload();
|
reload();
|
||||||
}, [location.pathname, location.hash]);
|
}, [location.pathname, location.hash]);
|
||||||
|
|
||||||
const getVisibleJoinTables = (tableMetaData: QTableMetaData): Set<string> =>
|
|
||||||
{
|
|
||||||
const visibleJoinTables = new Set<string>();
|
|
||||||
|
|
||||||
for (let i = 0; i < tableMetaData?.sections.length; i++)
|
|
||||||
{
|
|
||||||
const section = tableMetaData?.sections[i];
|
|
||||||
if (section.isHidden || !section.fieldNames || !section.fieldNames.length)
|
|
||||||
{
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.fieldNames.forEach((fieldName) =>
|
|
||||||
{
|
|
||||||
const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
|
|
||||||
if (tableForField && tableForField.name != tableMetaData.name)
|
|
||||||
{
|
|
||||||
visibleJoinTables.add(tableForField.name);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return (visibleJoinTables);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
** get an element (or empty) to use as help content for a section
|
** get an element (or empty) to use as help content for a section
|
||||||
@ -481,7 +487,18 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
|||||||
let record: QRecord;
|
let record: QRecord;
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
record = await qController.get(tableName, id, tableVariant, null, queryJoins);
|
////////////////////////////////////////////////////////////////////////////
|
||||||
|
// if the component took in a record object, then we don't need to GET it //
|
||||||
|
////////////////////////////////////////////////////////////////////////////
|
||||||
|
if(overrideRecord)
|
||||||
|
{
|
||||||
|
record = overrideRecord;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
record = await qController.get(tableName, id, tableVariant, null, queryJoins);
|
||||||
|
}
|
||||||
|
|
||||||
setRecord(record);
|
setRecord(record);
|
||||||
recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel});
|
recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel});
|
||||||
}
|
}
|
||||||
@ -518,7 +535,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
|||||||
|
|
||||||
setPageHeader(record.recordLabel);
|
setPageHeader(record.recordLabel);
|
||||||
|
|
||||||
if (!launchingProcess)
|
if (!launchingProcess && !activeModalProcess)
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
|
163
src/qqq/pages/records/view/RecordViewByUniqueKey.tsx
Normal file
163
src/qqq/pages/records/view/RecordViewByUniqueKey.tsx
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
/*
|
||||||
|
* QQQ - Low-code Application Framework for Engineers.
|
||||||
|
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||||
|
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||||
|
* contact@kingsrook.com
|
||||||
|
* https://github.com/Kingsrook/
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||||
|
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||||
|
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 {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin";
|
||||||
|
import {Alert, Box} from "@mui/material";
|
||||||
|
import Grid from "@mui/material/Grid";
|
||||||
|
import BaseLayout from "qqq/layouts/BaseLayout";
|
||||||
|
import RecordView, {getVisibleJoinTables} from "qqq/pages/records/view/RecordView";
|
||||||
|
import Client from "qqq/utils/qqq/Client";
|
||||||
|
import TableUtils from "qqq/utils/qqq/TableUtils";
|
||||||
|
import React, {useEffect, useState} from "react";
|
||||||
|
import {useSearchParams} from "react-router-dom";
|
||||||
|
|
||||||
|
interface RecordViewByUniqueKeyProps
|
||||||
|
{
|
||||||
|
table: QTableMetaData;
|
||||||
|
}
|
||||||
|
|
||||||
|
RecordViewByUniqueKey.defaultProps = {};
|
||||||
|
|
||||||
|
const qController = Client.getInstance();
|
||||||
|
|
||||||
|
/***************************************************************************
|
||||||
|
** Wrapper around RecordView, that reads a unique key from the query string,
|
||||||
|
** looks for a record matching that key, and shows that record.
|
||||||
|
***************************************************************************/
|
||||||
|
export default function RecordViewByUniqueKey({table}: RecordViewByUniqueKeyProps): JSX.Element
|
||||||
|
{
|
||||||
|
const tableName = table.name;
|
||||||
|
|
||||||
|
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
|
||||||
|
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
|
||||||
|
const [doneLoading, setDoneLoading] = useState(false);
|
||||||
|
const [record, setRecord] = useState(null as QRecord);
|
||||||
|
const [errorMessage, setErrorMessage] = useState(null as string);
|
||||||
|
|
||||||
|
const [queryParams] = useSearchParams();
|
||||||
|
|
||||||
|
if (!asyncLoadInited)
|
||||||
|
{
|
||||||
|
setAsyncLoadInited(true);
|
||||||
|
|
||||||
|
(async () =>
|
||||||
|
{
|
||||||
|
const tableMetaData = await qController.loadTableMetaData(tableName);
|
||||||
|
setTableMetaData(tableMetaData);
|
||||||
|
|
||||||
|
const criteria: QFilterCriteria[] = [];
|
||||||
|
for (let [name, value] of queryParams.entries())
|
||||||
|
{
|
||||||
|
criteria.push(new QFilterCriteria(name, QCriteriaOperator.EQUALS, [value]));
|
||||||
|
if(!tableMetaData.fields.has(name))
|
||||||
|
{
|
||||||
|
setErrorMessage(`Query-string parameter [${name}] is not a defined field on the ${tableMetaData.label} table.`);
|
||||||
|
setDoneLoading(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let queryJoins: QueryJoin[] = null;
|
||||||
|
const visibleJoinTables = getVisibleJoinTables(tableMetaData);
|
||||||
|
if (visibleJoinTables.size > 0)
|
||||||
|
{
|
||||||
|
queryJoins = TableUtils.getQueryJoins(tableMetaData, visibleJoinTables);
|
||||||
|
}
|
||||||
|
|
||||||
|
const filter = new QQueryFilter(criteria, null, null, "AND", 0, 2);
|
||||||
|
qController.query(tableName, filter, queryJoins)
|
||||||
|
.then((queryResult) =>
|
||||||
|
{
|
||||||
|
setDoneLoading(true);
|
||||||
|
if (queryResult.length == 1)
|
||||||
|
{
|
||||||
|
setRecord(queryResult[0]);
|
||||||
|
}
|
||||||
|
else if (queryResult.length == 0)
|
||||||
|
{
|
||||||
|
setErrorMessage(`No ${tableMetaData.label} record was found matching the given values.`);
|
||||||
|
}
|
||||||
|
else if (queryResult.length > 1)
|
||||||
|
{
|
||||||
|
setErrorMessage(`More than one ${tableMetaData.label} record was found matching the given values.`);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) =>
|
||||||
|
{
|
||||||
|
setDoneLoading(true);
|
||||||
|
console.log(error);
|
||||||
|
if (error && error.message)
|
||||||
|
{
|
||||||
|
setErrorMessage(error.message);
|
||||||
|
}
|
||||||
|
else if (error && error.response && error.response.data && error.response.data.error)
|
||||||
|
{
|
||||||
|
setErrorMessage(error.response.data.error);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
setErrorMessage("Unexpected error running query");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() =>
|
||||||
|
{
|
||||||
|
if (asyncLoadInited)
|
||||||
|
{
|
||||||
|
setAsyncLoadInited(false);
|
||||||
|
setDoneLoading(false);
|
||||||
|
setRecord(null);
|
||||||
|
}
|
||||||
|
}, [queryParams]);
|
||||||
|
|
||||||
|
if (!doneLoading)
|
||||||
|
{
|
||||||
|
return (<div>Loading...</div>);
|
||||||
|
}
|
||||||
|
else if (record)
|
||||||
|
{
|
||||||
|
return (<RecordView table={table} record={record} />);
|
||||||
|
}
|
||||||
|
else if (errorMessage)
|
||||||
|
{
|
||||||
|
return (<BaseLayout>
|
||||||
|
<Box className="recordView">
|
||||||
|
<Grid container>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Box mb={3}>
|
||||||
|
{
|
||||||
|
<Alert color="error" sx={{mb: 3}}>{errorMessage}</Alert>
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</BaseLayout>);
|
||||||
|
}
|
||||||
|
}
|
@ -421,6 +421,14 @@ input[type="search"]::-webkit-search-results-decoration
|
|||||||
font-size: 2rem !important;
|
font-size: 2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dashboard-order-release-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;
|
||||||
@ -653,6 +661,11 @@ input[type="search"]::-webkit-search-results-decoration
|
|||||||
min-height: unset !important;
|
min-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.MuiDataGrid-columnHeaders
|
||||||
|
{
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
}
|
||||||
|
|
||||||
/* new style for toggle buttons */
|
/* new style for toggle buttons */
|
||||||
.MuiToggleButtonGroup-root
|
.MuiToggleButtonGroup-root
|
||||||
{
|
{
|
||||||
@ -708,3 +721,66 @@ input[type="search"]::-webkit-search-results-decoration
|
|||||||
color: white;
|
color: white;
|
||||||
background-color: #0062FF !important;
|
background-color: #0062FF !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.helpContentAlert
|
||||||
|
{
|
||||||
|
padding: 6px 16px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.6;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert .MuiAlert-icon
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
margin-right: 12px;
|
||||||
|
padding: 7px 0;
|
||||||
|
font-size: 22px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert .MuiAlert-message
|
||||||
|
{
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.success
|
||||||
|
{
|
||||||
|
background-color: rgb(240, 248, 241);
|
||||||
|
color: rgb(44, 76, 46);
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.success .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.warning
|
||||||
|
{
|
||||||
|
background-color: rgb(254, 245, 234);
|
||||||
|
color: rgb(100, 65, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.warning .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
color: #fb8c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.error
|
||||||
|
{
|
||||||
|
background-color: rgb(254, 239, 238);
|
||||||
|
color: rgb(98, 41, 37);
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.error .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
color: #F44335;
|
||||||
|
}
|
||||||
|
@ -133,6 +133,11 @@ class TableUtils
|
|||||||
*******************************************************************************/
|
*******************************************************************************/
|
||||||
public static getFieldAndTable(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
|
public static getFieldAndTable(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
|
||||||
{
|
{
|
||||||
|
if(!fieldName)
|
||||||
|
{
|
||||||
|
return [null, null];
|
||||||
|
}
|
||||||
|
|
||||||
if (fieldName.indexOf(".") > -1)
|
if (fieldName.indexOf(".") > -1)
|
||||||
{
|
{
|
||||||
const nameParts = fieldName.split(".", 2);
|
const nameParts = fieldName.split(".", 2);
|
||||||
|
@ -335,7 +335,7 @@ public class QSeleniumLib
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(elements.stream().noneMatch(e -> e.getText().toLowerCase().contains(textContains)))
|
if(elements.stream().noneMatch(e -> e.getText().toLowerCase().contains(textContains.toLowerCase())))
|
||||||
{
|
{
|
||||||
LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "] containing text [" + textContains + "]");
|
LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "] containing text [" + textContains + "]");
|
||||||
return;
|
return;
|
||||||
@ -345,7 +345,7 @@ public class QSeleniumLib
|
|||||||
}
|
}
|
||||||
while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
|
while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
|
||||||
|
|
||||||
fail("Failed for non-existence of element matching selector [" + cssSelector + "] after [" + WAIT_SECONDS + "] seconds.");
|
fail("Failed for non-existence of element matching selector [" + cssSelector + "] containing text [" + textContains + "] after [" + WAIT_SECONDS + "] seconds.");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
Reference in New Issue
Block a user