mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-22 07:08:44 +00:00
Compare commits
13 Commits
snapshot-f
...
snapshot-i
| Author | SHA1 | Date | |
|---|---|---|---|
| f6286ba6b7 | |||
| 3edb9cca6a | |||
| 895791d9c9 | |||
| d7f2ff9fc4 | |||
| e05b5b247f | |||
| 74c85201ec | |||
| 6accca5fec | |||
| 13235c8aac | |||
| 3b3834c032 | |||
| 82ffcfd659 | |||
| 2587e9ee68 | |||
| 0b77c8172c | |||
| 743137dc60 |
12
cypress.config.ts
Normal file
12
cypress.config.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import {defineConfig} from "cypress";
|
||||
|
||||
export default defineConfig({
|
||||
e2e: {
|
||||
viewportHeight: 1000,
|
||||
viewportWidth: 1200,
|
||||
setupNodeEvents(on, config)
|
||||
{
|
||||
// implement node event listeners here
|
||||
},
|
||||
},
|
||||
});
|
||||
3003
package-lock.json
generated
3003
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@
|
||||
"@auth0/auth0-react": "1.10.2",
|
||||
"@emotion/react": "11.7.1",
|
||||
"@emotion/styled": "11.6.0",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.102",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.96",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.11.1",
|
||||
"@mui/styles": "5.11.1",
|
||||
|
||||
@ -25,6 +25,15 @@ Coded by www.creative-tim.com
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet" />
|
||||
</head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1NV0P06WS"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-X1NV0P06WS');
|
||||
</script>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
17
src/App.tsx
17
src/App.tsx
@ -49,7 +49,6 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit";
|
||||
import RecordQuery from "qqq/pages/records/query/RecordQuery";
|
||||
import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView";
|
||||
import RecordView from "qqq/pages/records/view/RecordView";
|
||||
import RecordViewByUniqueKey from "qqq/pages/records/view/RecordViewByUniqueKey";
|
||||
import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
|
||||
@ -393,13 +392,6 @@ export default function App()
|
||||
component: <RecordView table={table} />,
|
||||
});
|
||||
|
||||
routeList.push({
|
||||
name: `${app.label} View`,
|
||||
key: `${app.name}.view`,
|
||||
route: `${path}/key`,
|
||||
component: <RecordViewByUniqueKey table={table} />,
|
||||
});
|
||||
|
||||
routeList.push({
|
||||
name: `${app.label}`,
|
||||
key: `${app.name}.edit`,
|
||||
@ -672,16 +664,10 @@ export default function App()
|
||||
const [dotMenuOpen, setDotMenuOpen] = useState(false);
|
||||
const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false);
|
||||
const [helpHelpActive] = useState(queryParams.has("helpHelp"));
|
||||
const [userId, setUserId] = useState(user?.email);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setUserId(user?.email)
|
||||
}, [user]);
|
||||
|
||||
|
||||
const [googleAnalyticsUtils] = useState(new GoogleAnalyticsUtils());
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@ -703,7 +689,6 @@ export default function App()
|
||||
dotMenuOpen: dotMenuOpen,
|
||||
keyboardHelpOpen: keyboardHelpOpen,
|
||||
helpHelpActive: helpHelpActive,
|
||||
userId: userId,
|
||||
setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
|
||||
setAccentColor: (accentColor: string) => setAccentColor(accentColor),
|
||||
setAccentColorLight: (accentColorLight: string) => setAccentColorLight(accentColorLight),
|
||||
|
||||
@ -59,7 +59,6 @@ interface QContext
|
||||
pathToLabelMap?: {[path: string]: string};
|
||||
branding?: QBrandingMetaData;
|
||||
helpHelpActive?: boolean;
|
||||
userId?: string;
|
||||
}
|
||||
|
||||
const defaultState = {
|
||||
|
||||
@ -134,36 +134,17 @@ public class MaterialDashboardTableMetaData extends QSupplementalTableMetaData
|
||||
|
||||
for(FieldRule fieldRule : CollectionUtils.nonNullList(fieldRules))
|
||||
{
|
||||
validateFieldRule(qInstance, tableMetaData, qInstanceValidator, fieldRule, prefix);
|
||||
}
|
||||
}
|
||||
qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
|
||||
qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
static void validateFieldRule(QInstance qInstance, QTableMetaData tableMetaData, QInstanceValidator qInstanceValidator, FieldRule fieldRule, String prefix)
|
||||
{
|
||||
qInstanceValidator.assertCondition(fieldRule.getTrigger() != null, prefix + "has a fieldRule without a trigger");
|
||||
qInstanceValidator.assertCondition(fieldRule.getAction() != null, prefix + "has a fieldRule without an action");
|
||||
|
||||
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
|
||||
{
|
||||
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
|
||||
}
|
||||
|
||||
if(StringUtils.hasContent(fieldRule.getTargetField()))
|
||||
{
|
||||
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
|
||||
}
|
||||
|
||||
if(StringUtils.hasContent(fieldRule.getTargetWidget()))
|
||||
{
|
||||
if(qInstanceValidator.assertCondition(qInstance.getWidget(fieldRule.getTargetWidget()) != null, prefix + "has a widgetRule with an unrecognized targetWidget: " + fieldRule.getTargetWidget()))
|
||||
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getSourceField()), prefix + "has a fieldRule without a sourceField"))
|
||||
{
|
||||
qInstanceValidator.assertCondition(CollectionUtils.nonNullList(tableMetaData.getSections()).stream().anyMatch(s -> fieldRule.getTargetWidget().equals(s.getWidgetName())),
|
||||
prefix + "has a widgetRule with a targetWidget which is not used in any sections on the table");
|
||||
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getSourceField()), prefix + "has a fieldRule with an unrecognized sourceField: " + fieldRule.getSourceField());
|
||||
}
|
||||
|
||||
if(qInstanceValidator.assertCondition(StringUtils.hasContent(fieldRule.getTargetField()), prefix + "has a fieldRule without a targetField"))
|
||||
{
|
||||
qInstanceValidator.assertNoException(() -> tableMetaData.getField(fieldRule.getTargetField()), prefix + "has a fieldRule with an unrecognized targetField: " + fieldRule.getTargetField());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,8 +38,6 @@ public class FieldRule implements Serializable
|
||||
private FieldRuleAction action;
|
||||
private String targetField;
|
||||
|
||||
private String targetWidget;
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -164,35 +162,4 @@ public class FieldRule implements Serializable
|
||||
return (this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Getter for targetWidget
|
||||
*******************************************************************************/
|
||||
public String getTargetWidget()
|
||||
{
|
||||
return (this.targetWidget);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Setter for targetWidget
|
||||
*******************************************************************************/
|
||||
public void setTargetWidget(String targetWidget)
|
||||
{
|
||||
this.targetWidget = targetWidget;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Fluent setter for targetWidget
|
||||
*******************************************************************************/
|
||||
public FieldRule withTargetWidget(String targetWidget)
|
||||
{
|
||||
this.targetWidget = targetWidget;
|
||||
return (this);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -27,6 +27,5 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules;
|
||||
*******************************************************************************/
|
||||
public enum FieldRuleAction
|
||||
{
|
||||
CLEAR_TARGET_FIELD,
|
||||
RELOAD_WIDGET
|
||||
CLEAR_TARGET_FIELD
|
||||
}
|
||||
|
||||
@ -174,8 +174,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
|
||||
<DynamicSelect
|
||||
tableName={field.possibleValueProps.tableName}
|
||||
processName={field.possibleValueProps.processName}
|
||||
possibleValueSourceName={field.possibleValueProps.possibleValueSourceName}
|
||||
fieldName={field.possibleValueProps.fieldName}
|
||||
fieldName={fieldName}
|
||||
isEditable={field.isEditable}
|
||||
fieldLabel=""
|
||||
initialValue={values[fieldName]}
|
||||
|
||||
@ -172,17 +172,6 @@ class DynamicFormUtils
|
||||
{
|
||||
isPossibleValue: true,
|
||||
tableName: tableName,
|
||||
fieldName: field.name,
|
||||
initialDisplayValue: initialDisplayValue,
|
||||
};
|
||||
}
|
||||
else if(processName)
|
||||
{
|
||||
dynamicFormFields[field.name].possibleValueProps =
|
||||
{
|
||||
isPossibleValue: true,
|
||||
processName: processName,
|
||||
fieldName: field.name,
|
||||
initialDisplayValue: initialDisplayValue,
|
||||
};
|
||||
}
|
||||
@ -191,9 +180,8 @@ class DynamicFormUtils
|
||||
dynamicFormFields[field.name].possibleValueProps =
|
||||
{
|
||||
isPossibleValue: true,
|
||||
processName: processName,
|
||||
initialDisplayValue: initialDisplayValue,
|
||||
fieldName: field.name,
|
||||
possibleValueSourceName: field.possibleValueSourceName
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,17 +28,16 @@ import Box from "@mui/material/Box";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import {ErrorMessage, useFormikContext} from "formik";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
interface Props
|
||||
{
|
||||
tableName?: string;
|
||||
processName?: string;
|
||||
fieldName?: string;
|
||||
possibleValueSourceName?: string;
|
||||
fieldName: string;
|
||||
overrideId?: string;
|
||||
fieldLabel: string;
|
||||
inForm: boolean;
|
||||
@ -58,8 +57,6 @@ interface Props
|
||||
DynamicSelect.defaultProps = {
|
||||
tableName: null,
|
||||
processName: null,
|
||||
fieldName: null,
|
||||
possibleValueSourceName: null,
|
||||
inForm: true,
|
||||
initialValue: null,
|
||||
initialDisplayValue: null,
|
||||
@ -76,74 +73,16 @@ DynamicSelect.defaultProps = {
|
||||
},
|
||||
};
|
||||
|
||||
const {inputBorderColor} = colors;
|
||||
|
||||
|
||||
export const getAutocompleteOutlinedStyle = (isDisabled: boolean) =>
|
||||
{
|
||||
return ({
|
||||
"& .MuiOutlinedInput-root": {
|
||||
borderRadius: "0.75rem",
|
||||
},
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "0.5rem",
|
||||
background: isDisabled ? "#f0f2f5!important" : "initial",
|
||||
},
|
||||
"& .MuiOutlinedInput-root .MuiAutocomplete-input": {
|
||||
padding: "0",
|
||||
fontSize: "1rem"
|
||||
},
|
||||
"& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: inputBorderColor
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
function DynamicSelect({tableName, processName, fieldName, possibleValueSourceName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
|
||||
function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabel, inForm, initialValue, initialDisplayValue, initialValues, onChange, isEditable, isMultiple, bulkEditMode, bulkEditSwitchChangeHandler, otherValues, variant, initiallyOpen}: Props)
|
||||
{
|
||||
const [open, setOpen] = useState(initiallyOpen);
|
||||
const [options, setOptions] = useState<readonly QPossibleValue[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState(null);
|
||||
const [firstRender, setFirstRender] = useState(true);
|
||||
const [otherValuesWhenResultsWereLoaded, setOtherValuesWhenResultsWereLoaded] = useState(JSON.stringify(Object.fromEntries((otherValues))))
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(tableName && processName)
|
||||
{
|
||||
console.log("DynamicSelect - you may not provide both a tableName and a processName")
|
||||
}
|
||||
if(tableName && !fieldName)
|
||||
{
|
||||
console.log("DynamicSelect - if you provide a tableName, you must also provide a fieldName");
|
||||
}
|
||||
if(processName && !fieldName)
|
||||
{
|
||||
console.log("DynamicSelect - if you provide a processName, you must also provide a fieldName");
|
||||
}
|
||||
if(!fieldName && !possibleValueSourceName)
|
||||
{
|
||||
console.log("DynamicSelect - you must provide either a fieldName (and a tableName or processName) or a possibleValueSourceName");
|
||||
}
|
||||
if(fieldName && !possibleValueSourceName)
|
||||
{
|
||||
if(!tableName || !processName)
|
||||
{
|
||||
console.log("DynamicSelect - if you provide a fieldName and not a possibleValueSourceName, then you must also provide a tableName or processName");
|
||||
}
|
||||
}
|
||||
if(possibleValueSourceName)
|
||||
{
|
||||
if(tableName || processName)
|
||||
{
|
||||
console.log("DynamicSelect - if you provide a possibleValueSourceName, you should not also provide a tableName or processName");
|
||||
}
|
||||
}
|
||||
|
||||
}, [tableName, processName, fieldName, possibleValueSourceName]);
|
||||
const {inputBorderColor} = colors;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// default value - needs to be an array (from initialValues (array) prop) for multiple mode - //
|
||||
@ -194,7 +133,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
(async () =>
|
||||
{
|
||||
// console.log(`doing a search with ${searchTerm}`);
|
||||
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
|
||||
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
|
||||
|
||||
if(tableMetaData == null && tableName)
|
||||
{
|
||||
@ -227,7 +166,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
setLoading(true);
|
||||
setOptions([]);
|
||||
console.log("Refreshing possible values...");
|
||||
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, possibleValueSourceName ?? fieldName, searchTerm ?? "", null, otherValues);
|
||||
const results: QPossibleValue[] = await qController.possibleValues(tableName, processName, fieldName, searchTerm ?? "", null, otherValues);
|
||||
setLoading(false);
|
||||
setOptions([ ...results ]);
|
||||
setOtherValuesWhenResultsWereLoaded(JSON.stringify(Object.fromEntries(otherValues)));
|
||||
@ -267,7 +206,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
onChange(value ? new QPossibleValue(value) : null);
|
||||
}
|
||||
}
|
||||
else if(setFieldValueRef && fieldName)
|
||||
else if(setFieldValueRef)
|
||||
{
|
||||
setFieldValueRef(fieldName, value ? value.id : null);
|
||||
}
|
||||
@ -343,13 +282,28 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
let autocompleteSX = {};
|
||||
if (variant == "outlined")
|
||||
{
|
||||
autocompleteSX = getAutocompleteOutlinedStyle(isDisabled);
|
||||
autocompleteSX = {
|
||||
"& .MuiOutlinedInput-root": {
|
||||
borderRadius: "0.75rem",
|
||||
},
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "0.5rem",
|
||||
background: isDisabled ? "#f0f2f5!important" : "initial",
|
||||
},
|
||||
"& .MuiOutlinedInput-root .MuiAutocomplete-input": {
|
||||
padding: "0",
|
||||
fontSize: "1rem"
|
||||
},
|
||||
"& .Mui-disabled .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: inputBorderColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const autocomplete = (
|
||||
<Box>
|
||||
<Autocomplete
|
||||
id={overrideId ?? fieldName ?? possibleValueSourceName}
|
||||
id={overrideId ?? fieldName}
|
||||
sx={autocompleteSX}
|
||||
open={open}
|
||||
fullWidth
|
||||
@ -429,7 +383,7 @@ function DynamicSelect({tableName, processName, fieldName, possibleValueSourceNa
|
||||
inForm &&
|
||||
<Box mt={0.75}>
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
|
||||
{!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName ?? possibleValueSourceName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
|
||||
{!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={fieldName} render={msg => <span data-field-error="true">{msg}</span>} /></div>}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
}
|
||||
|
||||
@ -43,10 +43,9 @@ import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import HelpContent from "qqq/components/misc/HelpContent";
|
||||
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
||||
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 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 HtmlUtils from "qqq/utils/HtmlUtils";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
@ -88,7 +87,7 @@ EntityForm.defaultProps = {
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
let formikSetFieldValueFunction = (field: string, value: any, shouldValidate?: boolean): void =>
|
||||
{
|
||||
};
|
||||
}
|
||||
|
||||
function EntityForm(props: Props): JSX.Element
|
||||
{
|
||||
@ -119,12 +118,11 @@ function EntityForm(props: Props): JSX.Element
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
const [showEditChildForm, setShowEditChildForm] = useState(null as any);
|
||||
const [modalDataChangedCounter, setModalDataChangedCount] = useState(0);
|
||||
|
||||
const [notAllowedError, setNotAllowedError] = useState(null as string);
|
||||
|
||||
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);
|
||||
|
||||
@ -283,8 +281,6 @@ function EntityForm(props: Props): JSX.Element
|
||||
setRenderedWidgetSections(newRenderedWidgetSections);
|
||||
forceUpdate();
|
||||
|
||||
setModalDataChangedCount(modalDataChangedCounter + 1);
|
||||
|
||||
setShowEditChildForm(null);
|
||||
}
|
||||
|
||||
@ -294,7 +290,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
*******************************************************************************/
|
||||
useEffect(() =>
|
||||
{
|
||||
const newRenderedWidgetSections: { [name: string]: JSX.Element } = {};
|
||||
const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
|
||||
for (let widgetName in renderedWidgetSections)
|
||||
{
|
||||
const widgetMetaData = metaData.widgets.get(widgetName);
|
||||
@ -354,11 +350,12 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** 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 setFormFieldValuesFromWidget(values: { [name: string]: any })
|
||||
function setFormFieldValuesFromWidget(values: {[name: string]: any})
|
||||
{
|
||||
for (let key in values)
|
||||
{
|
||||
@ -372,13 +369,13 @@ function EntityForm(props: Props): JSX.Element
|
||||
*******************************************************************************/
|
||||
function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
|
||||
{
|
||||
if (widgetMetaData.type == "childRecordList")
|
||||
if(widgetMetaData.type == "childRecordList")
|
||||
{
|
||||
widgetData.viewAllLink = null;
|
||||
widgetMetaData.showExportButton = false;
|
||||
|
||||
return <RecordGridWidget
|
||||
key={`${formValues["tableName"]}-${modalDataChangedCounter}`}
|
||||
key={new Date().getTime()} // added so that editing values actually re-renders...
|
||||
widgetMetaData={widgetMetaData}
|
||||
data={widgetData}
|
||||
disableRowClick
|
||||
@ -390,27 +387,18 @@ function EntityForm(props: Props): JSX.Element
|
||||
/>;
|
||||
}
|
||||
|
||||
if (widgetMetaData.type == "filterAndColumnsSetup")
|
||||
if(widgetMetaData.type == "reportSetup")
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 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
|
||||
return <ReportSetupWidget
|
||||
key={formValues["tableName"]} // todo, is this good? it was added so that editing values actually re-renders...
|
||||
isEditable={true}
|
||||
widgetMetaData={widgetMetaData}
|
||||
recordValues={formValues}
|
||||
onSaveCallback={setFormFieldValuesFromWidget}
|
||||
/>;
|
||||
/>
|
||||
}
|
||||
|
||||
if (widgetMetaData.type == "pivotTableSetup")
|
||||
if(widgetMetaData.type == "pivotTableSetup")
|
||||
{
|
||||
return <PivotTableSetupWidget
|
||||
key={formValues["tableName"]} // todo, is this good? it was added so that editing values actually re-renders...
|
||||
@ -418,23 +406,10 @@ function EntityForm(props: Props): JSX.Element
|
||||
widgetMetaData={widgetMetaData}
|
||||
recordValues={formValues}
|
||||
onSaveCallback={setFormFieldValuesFromWidget}
|
||||
/>;
|
||||
/>
|
||||
}
|
||||
|
||||
if (widgetMetaData.type == "dynamicForm")
|
||||
{
|
||||
return <DynamicFormWidget
|
||||
key={formValues["savedReportId"]} // todo - pull this from the metaData (could do so above too...)
|
||||
isEditable={true}
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData}
|
||||
recordValues={formValues}
|
||||
record={record}
|
||||
onSaveCallback={setFormFieldValuesFromWidget}
|
||||
/>;
|
||||
}
|
||||
|
||||
return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>);
|
||||
return (<Box>Unsupported widget type: {widgetMetaData.type}</Box>)
|
||||
}
|
||||
|
||||
|
||||
@ -460,12 +435,12 @@ function EntityForm(props: Props): JSX.Element
|
||||
function setupFieldRules(tableMetaData: QTableMetaData)
|
||||
{
|
||||
const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
|
||||
if (!mdbMetaData)
|
||||
if(!mdbMetaData)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
if (mdbMetaData.fieldRules)
|
||||
if(mdbMetaData.fieldRules)
|
||||
{
|
||||
const newFieldRules: FieldRule[] = [];
|
||||
for (let i = 0; i < mdbMetaData.fieldRules.length; i++)
|
||||
@ -499,15 +474,15 @@ function EntityForm(props: Props): JSX.Element
|
||||
/////////////////////////////////////////////////
|
||||
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
|
||||
{
|
||||
const widget = metaData?.widgets.get(section.widgetName);
|
||||
if (widget)
|
||||
const widget = metaData.widgets.get(section.widgetName);
|
||||
if(widget)
|
||||
{
|
||||
if (widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
|
||||
if(widget.type == "childRecordList" && widget.defaultValues?.has("manageAssociationName"))
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
|
||||
if (widget.type == "filterAndColumnsSetup" || widget.type == "pivotTableSetup" || widget.type == "dynamicForm")
|
||||
if(widget.type == "reportSetup" || widget.type == "pivotTableSetup")
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
@ -691,7 +666,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
|
||||
const hasFields = section.fieldNames && section.fieldNames.length > 0;
|
||||
if (hasFields)
|
||||
if(hasFields)
|
||||
{
|
||||
for (let j = 0; j < section.fieldNames.length; j++)
|
||||
{
|
||||
@ -730,9 +705,8 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
else
|
||||
{
|
||||
const widgetMetaData = metaData?.widgets.get(section.widgetName);
|
||||
const widgetData = await qController.widget(widgetMetaData.name, makeQueryStringWithIdAndObject(tableMetaData, defaultValues));
|
||||
|
||||
const widgetMetaData = metaData.widgets.get(section.widgetName);
|
||||
const widgetData = await qController.widget(widgetMetaData.name, props.id ? `${tableMetaData.primaryKeyField}=${props.id}` : "");
|
||||
newRenderedWidgetSections[section.widgetName] = getWidgetSection(widgetMetaData, widgetData);
|
||||
newChildListWidgetData[section.widgetName] = widgetData;
|
||||
}
|
||||
@ -938,7 +912,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
else
|
||||
{
|
||||
setAlertContent(error.message);
|
||||
scrollToTopToShowAlert();
|
||||
HtmlUtils.autoScroll(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -984,7 +958,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
else
|
||||
{
|
||||
setAlertContent(error.message);
|
||||
scrollToTopToShowAlert();
|
||||
HtmlUtils.autoScroll(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -992,75 +966,14 @@ function EntityForm(props: Props): JSX.Element
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function scrollToTopToShowAlert()
|
||||
{
|
||||
if (props.isModal)
|
||||
{
|
||||
document.getElementById("modalTopReference")?.scrollIntoView();
|
||||
}
|
||||
else
|
||||
{
|
||||
HtmlUtils.autoScroll(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function makeQueryStringWithIdAndObject(tableMetaData: QTableMetaData, object: { [key: string]: any })
|
||||
{
|
||||
const queryParamsArray: string[] = [];
|
||||
if (props.id)
|
||||
{
|
||||
queryParamsArray.push(`${tableMetaData.primaryKeyField}=${encodeURIComponent(props.id)}`);
|
||||
}
|
||||
|
||||
if (object)
|
||||
{
|
||||
for (let key in object)
|
||||
{
|
||||
queryParamsArray.push(`${key}=${encodeURIComponent(object[key])}`);
|
||||
}
|
||||
}
|
||||
|
||||
return (queryParamsArray.join("&"));
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function reloadWidget(widgetName: string, additionalQueryParamsForWidget: { [key: string]: any })
|
||||
{
|
||||
const widgetData = await qController.widget(widgetName, makeQueryStringWithIdAndObject(tableMetaData, additionalQueryParamsForWidget));
|
||||
const widgetMetaData = metaData.widgets.get(widgetName);
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// todo - rename this - it holds all widget dta, not just child-lists. also, the type is wrong... //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const newChildListWidgetData: { [name: string]: ChildRecordListData } = Object.assign({}, childListWidgetData);
|
||||
newChildListWidgetData[widgetName] = widgetData;
|
||||
setChildListWidgetData(newChildListWidgetData);
|
||||
|
||||
const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections);
|
||||
newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, widgetData);
|
||||
setRenderedWidgetSections(newRenderedWidgetSections);
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** 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)
|
||||
{
|
||||
if (fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
|
||||
if(fieldRule.trigger == FieldRuleTrigger.ON_CHANGE && fieldRule.sourceField == fieldName)
|
||||
{
|
||||
switch (fieldRule.action)
|
||||
{
|
||||
@ -1068,10 +981,6 @@ function EntityForm(props: Props): JSX.Element
|
||||
console.log(`Clearing value from [${fieldRule.targetField}] due to change in [${fieldName}]`);
|
||||
valueChangesToMake[fieldRule.targetField] = null;
|
||||
break;
|
||||
case FieldRuleAction.RELOAD_WIDGET:
|
||||
const additionalQueryParamsForWidget: { [key: string]: any } = {};
|
||||
additionalQueryParamsForWidget[fieldRule.sourceField] = newValue;
|
||||
reloadWidget(fieldRule.targetWidget, additionalQueryParamsForWidget);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1159,21 +1068,21 @@ function EntityForm(props: Props): JSX.Element
|
||||
/////////////////////////////////////////////////
|
||||
// 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 //
|
||||
////////////////////////////////////////////////////////////////////////
|
||||
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), //
|
||||
// then process rules for any changed fields //
|
||||
////////////////////////////////////////////////////////////////////
|
||||
if (dirty)
|
||||
if(dirty)
|
||||
{
|
||||
for (let fieldName in values)
|
||||
{
|
||||
@ -1205,7 +1114,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
setFieldValue(fieldName, valueChangesToMake[fieldName], false);
|
||||
}
|
||||
|
||||
setFormValues(formValues);
|
||||
setFormValues(formValues)
|
||||
setFormValuesJSON(JSON.stringify(values));
|
||||
}
|
||||
}
|
||||
@ -1292,7 +1201,6 @@ function EntityForm(props: Props): JSX.Element
|
||||
return (
|
||||
<Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%"}}>
|
||||
<Card sx={{my: 5, mx: "auto", p: 6, pb: 0, maxWidth: "1024px"}}>
|
||||
<span id="modalTopReference"></span>
|
||||
{body}
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
@ -94,19 +94,16 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
|
||||
{
|
||||
////////////////////////////////////////////////////////
|
||||
// avoid showing "saved view" as a breadcrumb element //
|
||||
// e.g., if at /app/table/savedView/1 (so where i==2) //
|
||||
////////////////////////////////////////////////////////
|
||||
if(routes[i] === "savedView" && i == 2)
|
||||
if(routes[i] === "savedView")
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
// avoid showing the table name if it's the element before savedView //
|
||||
// e.g., when at /app/table/savedView/1 (so where i==1) //
|
||||
// we want to just be showing "App" //
|
||||
///////////////////////////////////////////////////////////////////////
|
||||
if(i < routes.length - 1 && routes[i+1] == "savedView" && i == 1)
|
||||
if(i < routes.length - 1 && routes[i+1] == "savedView")
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
@ -35,7 +35,6 @@ import DialogTitle from "@mui/material/DialogTitle";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import {any} from "prop-types";
|
||||
import React, {useState} from "react";
|
||||
import {useNavigate} from "react-router-dom";
|
||||
import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
|
||||
@ -72,12 +71,7 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
|
||||
|
||||
function GotoRecordDialog(props: Props): JSX.Element
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 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[][] = [];
|
||||
const fields: QFieldMetaData[] = [];
|
||||
|
||||
let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
|
||||
let addedPkey = false;
|
||||
@ -88,38 +82,31 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
{
|
||||
for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
|
||||
{
|
||||
const option: QFieldMetaData[] = [];
|
||||
options.push(option);
|
||||
for (let j = 0; j < mdbMetaData.gotoFieldNames[i].length; j++)
|
||||
// todo - multi-field keys!!
|
||||
let fieldName = mdbMetaData.gotoFieldNames[i][0];
|
||||
let field = props.tableMetaData.fields.get(fieldName);
|
||||
if (field)
|
||||
{
|
||||
let fieldName = mdbMetaData.gotoFieldNames[i][j];
|
||||
let field = props.tableMetaData.fields.get(fieldName);
|
||||
if (field)
|
||||
{
|
||||
option.push(field);
|
||||
fields.push(field);
|
||||
|
||||
if (pkey != null && field.name == pkey.name)
|
||||
{
|
||||
addedPkey = true;
|
||||
}
|
||||
if (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)
|
||||
{
|
||||
options.unshift([pkey]);
|
||||
fields.unshift(pkey);
|
||||
}
|
||||
|
||||
const makeInitialValues = () =>
|
||||
{
|
||||
const rs = {} as { [field: string]: string };
|
||||
options.forEach((option) => option.forEach((field) => rs[field.name] = ""));
|
||||
fields.forEach((field) => rs[field.name] = "");
|
||||
return (rs);
|
||||
};
|
||||
|
||||
@ -154,16 +141,11 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
}
|
||||
else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
|
||||
{
|
||||
const parts = targetId?.split(/-/);
|
||||
const index = parts[1];
|
||||
const index = targetId?.replaceAll("gotoInput-", "");
|
||||
document.getElementById("gotoButton-" + index).click();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
** event handler for close button
|
||||
***************************************************************************/
|
||||
const closeRequested = () =>
|
||||
{
|
||||
if (props.mayClose)
|
||||
@ -172,47 +154,10 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** 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) =>
|
||||
const goClicked = async (fieldName: string) =>
|
||||
{
|
||||
setError("");
|
||||
|
||||
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);
|
||||
|
||||
const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
|
||||
try
|
||||
{
|
||||
const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
|
||||
@ -223,26 +168,12 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
}
|
||||
else if (queryResult.length == 1)
|
||||
{
|
||||
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("&")}`);
|
||||
}
|
||||
|
||||
navigate(`${props.metaData.getTablePathByName(props.tableMetaData.name)}/${encodeURIComponent(queryResult[0].values.get(props.tableMetaData.primaryKeyField))}`);
|
||||
close();
|
||||
}
|
||||
else
|
||||
{
|
||||
setError("More than 1 record was found...");
|
||||
setError("More than 1 record found...");
|
||||
setTimeout(() => setError(""), 3000);
|
||||
}
|
||||
}
|
||||
@ -256,7 +187,7 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
|
||||
if (props.tableMetaData)
|
||||
{
|
||||
if (options.length == 0 && !error)
|
||||
if (fields.length == 0 && !error)
|
||||
{
|
||||
setError("This table is not configured for this feature.");
|
||||
}
|
||||
@ -269,38 +200,31 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
<DialogContent>
|
||||
{props.subHeader}
|
||||
{
|
||||
options.map((option, optionIndex) =>
|
||||
<Box key={optionIndex}>
|
||||
{
|
||||
option.map((field, index) =>
|
||||
(
|
||||
<Grid key={field.name} container alignItems="center" py={1}>
|
||||
<Grid item xs={3} textAlign="right" pr={2}>
|
||||
{field.label}
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
id={`gotoInput-${optionIndex}-${index}`}
|
||||
autoFocus={optionIndex == 0 && index == 0}
|
||||
autoComplete="off"
|
||||
inputProps={{width: "100%"}}
|
||||
onChange={(e) => handleChange(field.name, e.target.value)}
|
||||
value={values[field.name]}
|
||||
sx={{width: "100%"}}
|
||||
onFocus={event => event.target.select()}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={1} pl={2}>
|
||||
{
|
||||
(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>
|
||||
)
|
||||
fields.map((field, index) =>
|
||||
(
|
||||
<Grid key={field.name} container alignItems="center" py={1}>
|
||||
<Grid item xs={3} textAlign="right" pr={2}>
|
||||
{field.label}
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
id={`gotoInput-${index}`}
|
||||
autoFocus={index == 0}
|
||||
autoComplete="off"
|
||||
inputProps={{width: "100%"}}
|
||||
onChange={(e) => handleChange(field.name, e.target.value)}
|
||||
value={values[field.name]}
|
||||
sx={{width: "100%"}}
|
||||
onFocus={event => event.target.select()}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={1} pl={2}>
|
||||
<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
|
||||
</MDButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
))
|
||||
}
|
||||
{
|
||||
error &&
|
||||
@ -358,7 +282,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
|
||||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} sx={{whiteSpace: "nowrap"}}>Go To...</Button>
|
||||
props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto}>Go To...</Button>
|
||||
}
|
||||
<GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
|
||||
</React.Fragment>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Box} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {Theme} from "@mui/material/styles";
|
||||
@ -76,12 +76,12 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
|
||||
|
||||
|
||||
return (
|
||||
<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", overflow: "auto", height: "100%"}}>
|
||||
<Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 2rem)"}}>
|
||||
<Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
|
||||
{
|
||||
sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
|
||||
|
||||
<Box key={`section-link-${entry.name}`} onClick={() => document.getElementById(entry.name).scrollIntoView()} sx={{cursor: "pointer"}}>
|
||||
<HashLink key={`section-link-${entry.name}`} to={`#${entry.name}`}>
|
||||
<Box key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
@ -112,7 +112,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
|
||||
|
||||
</MDTypography>
|
||||
</Box>
|
||||
</Box>
|
||||
</HashLink>
|
||||
)) : null
|
||||
}
|
||||
</Box>
|
||||
|
||||
@ -60,7 +60,7 @@ interface Props
|
||||
view?: RecordQueryView;
|
||||
viewAsJson?: string;
|
||||
viewOnChangeCallback?: (selectedSavedViewId: number) => void;
|
||||
loadingSavedView: boolean;
|
||||
loadingSavedView: boolean
|
||||
queryScreenUsage: QueryScreenUsage;
|
||||
}
|
||||
|
||||
@ -69,8 +69,6 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [savedViews, setSavedViews] = useState([] as QRecord[]);
|
||||
const [yourSavedViews, setYourSavedViews] = useState([] as QRecord[]);
|
||||
const [viewsSharedWithYou, setViewsSharedWithYou] = useState([] as QRecord[]);
|
||||
const [savedViewsMenu, setSavedViewsMenu] = useState(null);
|
||||
const [savedViewsHaveLoaded, setSavedViewsHaveLoaded] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
@ -93,14 +91,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
const CLEAR_OPTION = "New View";
|
||||
const NEW_REPORT_OPTION = "Create Report from Current View";
|
||||
|
||||
const {accentColor, accentColorLight, userId: currentUserId} = useContext(QContext);
|
||||
const {accentColor, accentColorLight} = useContext(QContext);
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 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 //
|
||||
// under the FilterAndColumnsSetupWidget). So, there are some behaviors we only want when //
|
||||
// we're on the full-fledged query screen, such as changing the URL with saved view ids. //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 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 //
|
||||
// under the ReportSetupWidget). So, there are some behaviors we only want when we're //
|
||||
// on the full-fledged query screen, such as changing the URL with saved view ids. //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
const isQueryScreen = queryScreenUsage == "queryScreen";
|
||||
|
||||
const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
|
||||
@ -116,13 +114,13 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
{
|
||||
setSavedViewsHaveLoaded(true);
|
||||
});
|
||||
}, [location, tableMetaData]);
|
||||
}, [location, tableMetaData])
|
||||
|
||||
|
||||
const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
|
||||
const viewDiffs = SavedViewUtils.diffViews(tableMetaData, baseView, view);
|
||||
let viewIsModified = false;
|
||||
if (viewDiffs.length > 0)
|
||||
if(viewDiffs.length > 0)
|
||||
{
|
||||
viewIsModified = true;
|
||||
}
|
||||
@ -132,7 +130,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
*******************************************************************************/
|
||||
async function loadSavedViews()
|
||||
{
|
||||
if (!tableMetaData)
|
||||
if (! tableMetaData)
|
||||
{
|
||||
return;
|
||||
}
|
||||
@ -142,26 +140,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
|
||||
let savedViews = await makeSavedViewRequest("querySavedView", formData);
|
||||
setSavedViews(savedViews);
|
||||
|
||||
const yourSavedViews: QRecord[] = [];
|
||||
const viewsSharedWithYou: QRecord[] = [];
|
||||
for (let i = 0; i < savedViews.length; i++)
|
||||
{
|
||||
const record = savedViews[i];
|
||||
if (record.values.get("userId") == currentUserId)
|
||||
{
|
||||
yourSavedViews.push(record);
|
||||
}
|
||||
else
|
||||
{
|
||||
viewsSharedWithYou.push(record);
|
||||
}
|
||||
}
|
||||
setYourSavedViews(yourSavedViews);
|
||||
setViewsSharedWithYou(viewsSharedWithYou);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** fired when a saved record is clicked from the dropdown
|
||||
*******************************************************************************/
|
||||
@ -170,13 +152,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
setSaveFilterPopupOpen(false);
|
||||
closeSavedViewsMenu();
|
||||
viewOnChangeCallback(record.values.get("id"));
|
||||
if (isQueryScreen)
|
||||
if(isQueryScreen)
|
||||
{
|
||||
navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** fired when a save option is selected from the save... button/dropdown combo
|
||||
*******************************************************************************/
|
||||
@ -188,12 +171,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
setSaveFilterPopupOpen(true);
|
||||
setIsSaveFilterAs(false);
|
||||
setIsRenameFilter(false);
|
||||
setIsDeleteFilter(false);
|
||||
setIsDeleteFilter(false)
|
||||
|
||||
switch (optionName)
|
||||
switch(optionName)
|
||||
{
|
||||
case SAVE_OPTION:
|
||||
if (currentSavedView == null)
|
||||
if(currentSavedView == null)
|
||||
{
|
||||
setSavedViewNameInputValue("");
|
||||
}
|
||||
@ -203,28 +186,28 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
setIsSaveFilterAs(true);
|
||||
break;
|
||||
case CLEAR_OPTION:
|
||||
setSaveFilterPopupOpen(false);
|
||||
setSaveFilterPopupOpen(false)
|
||||
viewOnChangeCallback(null);
|
||||
if (isQueryScreen)
|
||||
if(isQueryScreen)
|
||||
{
|
||||
navigate(metaData.getTablePathByName(tableMetaData.name));
|
||||
}
|
||||
break;
|
||||
case RENAME_OPTION:
|
||||
if (currentSavedView != null)
|
||||
if(currentSavedView != null)
|
||||
{
|
||||
setSavedViewNameInputValue(currentSavedView.values.get("label"));
|
||||
}
|
||||
setIsRenameFilter(true);
|
||||
break;
|
||||
case DELETE_OPTION:
|
||||
setIsDeleteFilter(true);
|
||||
setIsDeleteFilter(true)
|
||||
break;
|
||||
case NEW_REPORT_OPTION:
|
||||
createNewReport();
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -232,11 +215,11 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
*******************************************************************************/
|
||||
function createNewReport()
|
||||
{
|
||||
const defaultValues: { [key: string]: any } = {};
|
||||
const defaultValues: {[key: string]: any} = {};
|
||||
defaultValues.tableName = tableMetaData.name;
|
||||
|
||||
let filterForBackend = JSON.parse(JSON.stringify(view.queryFilter));
|
||||
filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
|
||||
filterForBackend = FilterUtils.prepQueryFilterForBackend(tableMetaData, filterForBackend);
|
||||
|
||||
defaultValues.queryFilterJson = JSON.stringify(filterForBackend);
|
||||
defaultValues.columnsJson = JSON.stringify(view.queryColumns);
|
||||
@ -244,6 +227,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** fired when save or delete button saved on confirmation dialogs
|
||||
*******************************************************************************/
|
||||
@ -263,7 +247,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
setSaveFilterPopupOpen(false);
|
||||
setSaveOptionsOpen(false);
|
||||
|
||||
await (async () =>
|
||||
await(async() =>
|
||||
{
|
||||
handleDropdownOptionClick(CLEAR_OPTION);
|
||||
})();
|
||||
@ -283,14 +267,14 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// strip away incomplete filters too, just for cleaner saved view filters //
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
FilterUtils.stripAwayIncompleteCriteria(viewObject.queryFilter);
|
||||
FilterUtils.stripAwayIncompleteCriteria(viewObject.queryFilter)
|
||||
|
||||
formData.append("viewJson", JSON.stringify(viewObject));
|
||||
|
||||
if (isSaveFilterAs || isRenameFilter || currentSavedView == null)
|
||||
{
|
||||
formData.append("label", savedViewNameInputValue);
|
||||
if (currentSavedView != null && isRenameFilter)
|
||||
if(currentSavedView != null && isRenameFilter)
|
||||
{
|
||||
formData.append("id", currentSavedView.values.get("id"));
|
||||
}
|
||||
@ -301,7 +285,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
formData.append("label", currentSavedView?.values.get("label"));
|
||||
}
|
||||
const recordList = await makeSavedViewRequest("storeSavedView", formData);
|
||||
await (async () =>
|
||||
await(async() =>
|
||||
{
|
||||
if (recordList && recordList.length > 0)
|
||||
{
|
||||
@ -318,11 +302,11 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
catch (e: any)
|
||||
{
|
||||
let message = JSON.stringify(e);
|
||||
if (typeof e == "string")
|
||||
if(typeof e == "string")
|
||||
{
|
||||
message = e;
|
||||
}
|
||||
else if (typeof e == "object" && e.message)
|
||||
else if(typeof e == "object" && e.message)
|
||||
{
|
||||
message = e.message;
|
||||
}
|
||||
@ -337,6 +321,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** hides/shows the save options
|
||||
*******************************************************************************/
|
||||
@ -346,6 +331,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** closes save options menu (on clickaway)
|
||||
*******************************************************************************/
|
||||
@ -360,6 +346,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** stores the current dialog input text to state
|
||||
*******************************************************************************/
|
||||
@ -369,6 +356,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** closes current dialog
|
||||
*******************************************************************************/
|
||||
@ -378,6 +366,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** make a request to the backend for various savedView processes
|
||||
*******************************************************************************/
|
||||
@ -386,7 +375,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
/////////////////////////
|
||||
// fetch saved filters //
|
||||
/////////////////////////
|
||||
let savedViews = [] as QRecord[];
|
||||
let savedViews = [] as QRecord[]
|
||||
try
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////
|
||||
@ -397,12 +386,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
throw (jobError.error);
|
||||
throw(jobError.error);
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
if (result.values.savedViewList)
|
||||
if(result.values.savedViewList)
|
||||
{
|
||||
for (let i = 0; i < result.values.savedViewList.length; i++)
|
||||
{
|
||||
@ -414,7 +403,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
throw (e);
|
||||
throw(e);
|
||||
}
|
||||
|
||||
return (savedViews);
|
||||
@ -427,27 +416,17 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
|
||||
const tooltipMaxWidth = (maxWidth: string) =>
|
||||
{
|
||||
return ({
|
||||
slotProps: {
|
||||
tooltip: {
|
||||
sx: {
|
||||
maxWidth: maxWidth
|
||||
}
|
||||
return ({slotProps: {
|
||||
tooltip: {
|
||||
sx: {
|
||||
maxWidth: maxWidth
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}})
|
||||
}
|
||||
|
||||
const menuTooltipAttribs = {...tooltipMaxWidth("250px"), placement: "left", enterDelay: 1000} as TooltipProps;
|
||||
|
||||
let disabledBecauseNotOwner = false;
|
||||
let notOwnerTooltipText = null;
|
||||
if (currentSavedView && currentSavedView.values.get("userId") != currentUserId)
|
||||
{
|
||||
disabledBecauseNotOwner = true;
|
||||
notOwnerTooltipText = "You may not save changes to this view, because you are not its owner.";
|
||||
}
|
||||
|
||||
const renderSavedViewsMenu = tableMetaData && (
|
||||
<Menu
|
||||
anchorEl={savedViewsMenu}
|
||||
@ -464,101 +443,75 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
}
|
||||
{
|
||||
isQueryScreen && hasStorePermission &&
|
||||
<Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? <>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
|
||||
<span>
|
||||
<MenuItem disabled={disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
|
||||
<ListItemIcon><Icon>save</Icon></ListItemIcon>
|
||||
{currentSavedView ? "Save..." : "Save As..."}
|
||||
</MenuItem>
|
||||
</span>
|
||||
<Tooltip {...menuTooltipAttribs} title={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
|
||||
<MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
|
||||
<ListItemIcon><Icon>save</Icon></ListItemIcon>
|
||||
{currentSavedView ? "Save..." : "Save As..."}
|
||||
</MenuItem>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
isQueryScreen && hasStorePermission && currentSavedView != null &&
|
||||
<Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Change the name for this saved view."}>
|
||||
<span>
|
||||
<MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
|
||||
<ListItemIcon><Icon>edit</Icon></ListItemIcon>
|
||||
Rename...
|
||||
</MenuItem>
|
||||
</span>
|
||||
<Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
|
||||
<MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
|
||||
<ListItemIcon><Icon>edit</Icon></ListItemIcon>
|
||||
Rename...
|
||||
</MenuItem>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
isQueryScreen && hasStorePermission && currentSavedView != null &&
|
||||
<Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
|
||||
<span>
|
||||
<MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
|
||||
<ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
|
||||
Save As...
|
||||
</MenuItem>
|
||||
</span>
|
||||
<MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
|
||||
<ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
|
||||
Save As...
|
||||
</MenuItem>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
isQueryScreen && hasDeletePermission && currentSavedView != null &&
|
||||
<Tooltip {...menuTooltipAttribs} title={notOwnerTooltipText ?? "Delete this saved view."}>
|
||||
<span>
|
||||
<MenuItem disabled={currentSavedView === null || disabledBecauseNotOwner} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
|
||||
<ListItemIcon><Icon>delete</Icon></ListItemIcon>
|
||||
Delete...
|
||||
</MenuItem>
|
||||
</span>
|
||||
<Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
|
||||
<MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
|
||||
<ListItemIcon><Icon>delete</Icon></ListItemIcon>
|
||||
Delete...
|
||||
</MenuItem>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
isQueryScreen &&
|
||||
<Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
|
||||
<span>
|
||||
<MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
|
||||
<ListItemIcon><Icon>monitor</Icon></ListItemIcon>
|
||||
New View
|
||||
</MenuItem>
|
||||
</span>
|
||||
<MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
|
||||
<ListItemIcon><Icon>monitor</Icon></ListItemIcon>
|
||||
New View
|
||||
</MenuItem>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
isQueryScreen && hasSavedReportsPermission &&
|
||||
<Tooltip {...menuTooltipAttribs} title="Create a new Saved Report using your current view of this table as a starting point.">
|
||||
<span>
|
||||
<MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
|
||||
<ListItemIcon><Icon>article</Icon></ListItemIcon>
|
||||
Create Report from Current View
|
||||
</MenuItem>
|
||||
</span>
|
||||
<MenuItem onClick={() => handleDropdownOptionClick(NEW_REPORT_OPTION)}>
|
||||
<ListItemIcon><Icon>article</Icon></ListItemIcon>
|
||||
Create Report from Current View
|
||||
</MenuItem>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
isQueryScreen && <Divider />
|
||||
isQueryScreen && <Divider/>
|
||||
}
|
||||
<MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
|
||||
{
|
||||
yourSavedViews && yourSavedViews.length > 0 ? (
|
||||
yourSavedViews.map((record: QRecord, index: number) =>
|
||||
savedViews && savedViews.length > 0 ? (
|
||||
savedViews.map((record: QRecord, index: number) =>
|
||||
<MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
|
||||
{record.values.get("label")}
|
||||
</MenuItem>
|
||||
)
|
||||
) : (
|
||||
): (
|
||||
<MenuItem disabled sx={{opacity: "1 !important"}}>
|
||||
<i>You do not have any saved views for this table.</i>
|
||||
</MenuItem>
|
||||
)
|
||||
}
|
||||
<MenuItem disabled style={{"opacity": "initial"}}><b>Views Shared with you</b></MenuItem>
|
||||
{
|
||||
viewsSharedWithYou && viewsSharedWithYou.length > 0 ? (
|
||||
viewsSharedWithYou.map((record: QRecord, index: number) =>
|
||||
<MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
|
||||
{record.values.get("label")}
|
||||
</MenuItem>
|
||||
)
|
||||
) : (
|
||||
<MenuItem disabled sx={{opacity: "1 !important"}}>
|
||||
<i>You do not have any views shared with you for this table.</i>
|
||||
</MenuItem>
|
||||
)
|
||||
}
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@ -567,7 +520,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
let buttonBorder = colors.grayLines.main;
|
||||
let buttonColor = colors.gray.main;
|
||||
|
||||
if (currentSavedView)
|
||||
if(currentSavedView)
|
||||
{
|
||||
if (viewIsModified)
|
||||
{
|
||||
@ -595,23 +548,23 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
color: buttonColor,
|
||||
backgroundColor: buttonBackground,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function isSaveButtonDisabled(): boolean
|
||||
{
|
||||
if (isSubmitting)
|
||||
if(isSubmitting)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
|
||||
const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "");
|
||||
const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "")
|
||||
|
||||
if (isSaveFilterAs || isRenameFilter || currentSavedView == null)
|
||||
if(isSaveFilterAs || isRenameFilter || currentSavedView == null)
|
||||
{
|
||||
if (!haveInputText)
|
||||
if(!haveInputText)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
@ -640,7 +593,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
fontWeight: 500,
|
||||
fontSize: "0.875rem",
|
||||
p: "0.5rem",
|
||||
...buttonStyles
|
||||
... buttonStyles
|
||||
}}
|
||||
>
|
||||
<Icon sx={{mr: "0.5rem"}}>save</Icon>
|
||||
@ -671,7 +624,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
</>
|
||||
}
|
||||
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
|
||||
</>
|
||||
}
|
||||
{
|
||||
@ -682,20 +635,16 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
{
|
||||
viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
|
||||
}
|
||||
</ul>
|
||||
{
|
||||
notOwnerTooltipText && <i>{notOwnerTooltipText}</i>
|
||||
}
|
||||
</>}>
|
||||
</ul></>}>
|
||||
<Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
|
||||
</Tooltip>
|
||||
|
||||
{disabledBecauseNotOwner ? <> </> : <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save…</Button>}
|
||||
<Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save…</Button>
|
||||
|
||||
{/* vertical rule */}
|
||||
<Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
|
||||
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
|
||||
</>
|
||||
}
|
||||
{
|
||||
@ -714,17 +663,16 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
{
|
||||
viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
|
||||
}
|
||||
</ul>
|
||||
</>}>
|
||||
</ul></>}>
|
||||
<Box display="inline" ml="0.25rem" mr="0.25rem" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>with {viewDiffs.length} Change{viewDiffs.length == 1 ? "" : "s"}</Box>
|
||||
</Tooltip>
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset Changes</Button>
|
||||
</>
|
||||
}
|
||||
|
||||
{/* vertical rule */}
|
||||
<Box display="inline-block" ml="0.25rem" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ...linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
|
||||
<Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset to New View</Button>
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
@ -754,15 +702,15 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
) : (
|
||||
isSaveFilterAs ? (
|
||||
<DialogTitle id="alert-dialog-title">Save View As</DialogTitle>
|
||||
) : (
|
||||
):(
|
||||
isRenameFilter ? (
|
||||
<DialogTitle id="alert-dialog-title">Rename View</DialogTitle>
|
||||
) : (
|
||||
):(
|
||||
<DialogTitle id="alert-dialog-title">Update Existing View</DialogTitle>
|
||||
)
|
||||
)
|
||||
)
|
||||
) : (
|
||||
):(
|
||||
<DialogTitle id="alert-dialog-title">Save New View</DialogTitle>
|
||||
)
|
||||
}
|
||||
@ -773,12 +721,12 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
</Box>
|
||||
) : ("")}
|
||||
{
|
||||
(!currentSavedView || isSaveFilterAs || isRenameFilter) && !isDeleteFilter ? (
|
||||
(! currentSavedView || isSaveFilterAs || isRenameFilter) && ! isDeleteFilter ? (
|
||||
<Box>
|
||||
{
|
||||
isSaveFilterAs ? (
|
||||
<Box mb={3}>Enter a name for this new saved view.</Box>
|
||||
) : (
|
||||
):(
|
||||
<Box mb={3}>Enter a new name for this saved view.</Box>
|
||||
)
|
||||
}
|
||||
@ -796,10 +744,10 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
):(
|
||||
isDeleteFilter ? (
|
||||
<Box>Are you sure you want to delete the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
|
||||
) : (
|
||||
):(
|
||||
<Box>Are you sure you want to update the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
|
||||
)
|
||||
)
|
||||
@ -811,7 +759,7 @@ function SavedViews({qController, metaData, tableMetaData, currentSavedView, tab
|
||||
isDeleteFilter ?
|
||||
<QDeleteButton onClickHandler={handleFilterDialogButtonOnClick} disabled={isSubmitting} />
|
||||
:
|
||||
<QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()} />
|
||||
<QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()}/>
|
||||
}
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2023. 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
|
||||
import Box from "@mui/material/Box";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import CriteriaDateField from "qqq/components/query/CriteriaDateField";
|
||||
import React, {SyntheticEvent, useState} from "react";
|
||||
|
||||
|
||||
export type Expression = FilterVariableExpression;
|
||||
|
||||
|
||||
interface AssignFilterButtonProps
|
||||
{
|
||||
valueIndex: number;
|
||||
field: QFieldMetaData;
|
||||
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
|
||||
}
|
||||
|
||||
CriteriaDateField.defaultProps = {
|
||||
valueIndex: 0,
|
||||
label: "Value",
|
||||
idPrefix: "value-"
|
||||
};
|
||||
|
||||
export default function AssignFilterVariable({valueIndex, field, valueChangeHandler}: AssignFilterButtonProps): JSX.Element
|
||||
{
|
||||
const [isValueAVariable, setIsValueAVariable] = useState(false);
|
||||
|
||||
const handleVariableButtonOnClick = () =>
|
||||
{
|
||||
setIsValueAVariable(!isValueAVariable);
|
||||
const expression = new FilterVariableExpression({fieldName: field.name, valueIndex: valueIndex});
|
||||
valueChangeHandler(null, valueIndex, expression);
|
||||
};
|
||||
|
||||
return <Box display="flex" alignItems="flex-end">
|
||||
<Box>
|
||||
<Tooltip title={`Use a variable as the value for the ${field.label} field`} placement="bottom">
|
||||
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={handleVariableButtonOnClick}>functions</Icon>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>;
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@ export function getCurrentSortIndicator(queryFilter: QQueryFilter, tableMetaData
|
||||
*******************************************************************************/
|
||||
const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
|
||||
{
|
||||
const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode, queryScreenUsage} = props;
|
||||
const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props;
|
||||
|
||||
/////////////////////
|
||||
// state variables //
|
||||
@ -682,7 +682,6 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
criteriaParam={getQuickCriteriaParam(fieldName)}
|
||||
fieldMetaData={field}
|
||||
defaultOperator={defaultOperator}
|
||||
queryScreenUsage={queryScreenUsage}
|
||||
handleRemoveQuickFilterField={null} />);
|
||||
})
|
||||
}
|
||||
@ -702,7 +701,6 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
criteriaParam={getQuickCriteriaParam(fieldName)}
|
||||
fieldMetaData={field}
|
||||
defaultOperator={defaultOperator}
|
||||
queryScreenUsage={queryScreenUsage}
|
||||
handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);
|
||||
})
|
||||
}
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
|
||||
import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
|
||||
import {NowWithOffsetExpression, NowWithOffsetOperator, NowWithOffsetUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
|
||||
import {ThisOrLastPeriodExpression, ThisOrLastPeriodOperator, ThisOrLastPeriodUnit} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
|
||||
@ -35,14 +34,14 @@ import MenuItem from "@mui/material/MenuItem";
|
||||
import {styled} from "@mui/material/styles";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Tooltip, {tooltipClasses, TooltipProps} from "@mui/material/Tooltip";
|
||||
import React, {SyntheticEvent, useEffect, useReducer, useState} from "react";
|
||||
import AdvancedDateTimeFilterValues from "qqq/components/query/AdvancedDateTimeFilterValues";
|
||||
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
|
||||
import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
|
||||
import {makeTextField} from "qqq/components/query/FilterCriteriaRowValues";
|
||||
import React, {SyntheticEvent, useReducer, useState} from "react";
|
||||
|
||||
|
||||
export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression | FilterVariableExpression;
|
||||
export type Expression = NowWithOffsetExpression | ThisOrLastPeriodExpression | NowExpression;
|
||||
|
||||
|
||||
interface CriteriaDateFieldProps
|
||||
@ -53,7 +52,6 @@ interface CriteriaDateFieldProps
|
||||
field: QFieldMetaData;
|
||||
criteria: QFilterCriteriaWithId;
|
||||
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
|
||||
allowVariables?: boolean;
|
||||
}
|
||||
|
||||
CriteriaDateField.defaultProps = {
|
||||
@ -62,30 +60,19 @@ CriteriaDateField.defaultProps = {
|
||||
idPrefix: "value-"
|
||||
};
|
||||
|
||||
export const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
|
||||
<Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
|
||||
))({
|
||||
[`& .${tooltipClasses.tooltip}`]: {
|
||||
whiteSpace: "nowrap"
|
||||
},
|
||||
});
|
||||
|
||||
export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler, allowVariables}: CriteriaDateFieldProps): JSX.Element
|
||||
export default function CriteriaDateField({valueIndex, label, idPrefix, field, criteria, valueChangeHandler}: CriteriaDateFieldProps): JSX.Element
|
||||
{
|
||||
const [relativeDateTimeOpen, setRelativeDateTimeOpen] = useState(false);
|
||||
const [relativeDateTimeMenuAnchorElement, setRelativeDateTimeMenuAnchorElement] = useState(null);
|
||||
const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false);
|
||||
const [forceAdvancedDateTimeDialogOpen, setForceAdvancedDateTimeDialogOpen] = useState(false)
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
const openRelativeDateTimeMenu = (event: React.MouseEvent<HTMLElement>) =>
|
||||
{
|
||||
setRelativeDateTimeOpen(true);
|
||||
setRelativeDateTimeMenuAnchorElement(event.currentTarget);
|
||||
};
|
||||
|
||||
const closeRelativeDateTimeMenu = () =>
|
||||
{
|
||||
setRelativeDateTimeOpen(false);
|
||||
setRelativeDateTimeMenuAnchorElement(null);
|
||||
};
|
||||
|
||||
@ -150,12 +137,20 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
|
||||
const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
|
||||
const currentExpression = isExpression ? criteria.values[valueIndex] : null;
|
||||
|
||||
const NoWrapTooltip = styled(({className, children, ...props}: TooltipProps) => (
|
||||
<Tooltip {...props} classes={{popper: className}}>{children}</Tooltip>
|
||||
))({
|
||||
[`& .${tooltipClasses.tooltip}`]: {
|
||||
whiteSpace: "nowrap"
|
||||
},
|
||||
});
|
||||
|
||||
const tooltipMenuItemFromExpression = (valueIndex: number, tooltipPlacement: "left" | "right", expression: Expression) =>
|
||||
{
|
||||
let startOfPrefix = "";
|
||||
if (expression.type == "ThisOrLastPeriod")
|
||||
if(expression.type == "ThisOrLastPeriod")
|
||||
{
|
||||
if (field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
|
||||
if(field.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
|
||||
{
|
||||
startOfPrefix = "start of ";
|
||||
}
|
||||
@ -196,120 +191,84 @@ export default function CriteriaDateField({valueIndex, label, idPrefix, field, c
|
||||
setTimeout(() => setForceAdvancedDateTimeDialogOpen(false), 100);
|
||||
}
|
||||
|
||||
const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
|
||||
{
|
||||
const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
|
||||
{
|
||||
valueChangeHandler(event, index, "");
|
||||
document.getElementById(`${idPrefix}${criteria.id}`).focus();
|
||||
};
|
||||
|
||||
const inputProps2: any = {};
|
||||
inputProps2.endAdornment = (
|
||||
<InputAdornment position="end">
|
||||
<IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
|
||||
<Icon>closer</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
);
|
||||
|
||||
return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
|
||||
id={`${idPrefix}${criteria.id}`}
|
||||
label={label}
|
||||
variant="standard"
|
||||
autoComplete="off"
|
||||
InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
|
||||
InputLabelProps={{shrink: true}}
|
||||
value="${VARIABLE}"
|
||||
fullWidth
|
||||
/></NoWrapTooltip>;
|
||||
};
|
||||
|
||||
|
||||
return <Box display="flex" alignItems="flex-end">
|
||||
{
|
||||
isExpression ?
|
||||
currentExpression?.type == "FilterVariableExpression" ? (
|
||||
makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
|
||||
) : (
|
||||
makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
|
||||
)
|
||||
: makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix, allowVariables)
|
||||
isExpression ? makeDateTimeExpressionTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
|
||||
: makeTextField(field, criteria, valueChangeHandler, valueIndex, label, idPrefix)
|
||||
}
|
||||
{
|
||||
(!isExpression || currentExpression?.type != "FilterVariableExpression") && (
|
||||
<><Box>
|
||||
<Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
|
||||
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
open={relativeDateTimeOpen}
|
||||
anchorEl={relativeDateTimeMenuAnchorElement}
|
||||
transformOrigin={{horizontal: "left", vertical: "top"}}
|
||||
onClose={closeRelativeDateTimeMenu}
|
||||
>
|
||||
{field.type == QFieldType.DATE ?
|
||||
<Box display="flex">
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
|
||||
<Divider />
|
||||
<Tooltip title="Define a custom expression" placement="left">
|
||||
<MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
|
||||
</Box>
|
||||
<Box>
|
||||
<Tooltip title={`Choose a common relative ${field.type == QFieldType.DATE ? "date" : "date-time"} expression`} placement="bottom">
|
||||
<Icon fontSize="small" color="info" sx={{mx: 0.25, cursor: "pointer", position: "relative", top: "2px"}} onClick={openRelativeDateTimeMenu}>date_range</Icon>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
open={relativeDateTimeMenuAnchorElement}
|
||||
anchorEl={relativeDateTimeMenuAnchorElement}
|
||||
transformOrigin={{horizontal: "left", vertical: "top"}}
|
||||
onClose={closeRelativeDateTimeMenu}
|
||||
>
|
||||
{
|
||||
field.type == QFieldType.DATE ?
|
||||
<Box display="flex">
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
|
||||
<Divider />
|
||||
<Tooltip title="Define a custom expression" placement="left">
|
||||
<MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
:
|
||||
<Box display="flex">
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
|
||||
<Divider />
|
||||
<Tooltip title="Define a custom expression" placement="left">
|
||||
<MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
|
||||
</Box>
|
||||
</Box>}
|
||||
</Menu>
|
||||
</Box><Box>
|
||||
<AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
|
||||
</Box></>
|
||||
)
|
||||
}
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
|
||||
</Box>
|
||||
</Box>
|
||||
:
|
||||
<Box display="flex">
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 12, "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 24, "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 7, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 14, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 30, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 90, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 180, "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "left", newNowWithOffsetExpression("MINUS", 1, "YEARS"))}
|
||||
<Divider />
|
||||
<Tooltip title="Define a custom expression" placement="left">
|
||||
<MenuItem onClick={doForceAdvancedDateTimeDialogOpen}>Custom</MenuItem>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Box>
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newNowExpression())}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "HOURS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "DAYS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "WEEKS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "MONTHS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("THIS", "YEARS"))}
|
||||
{tooltipMenuItemFromExpression(valueIndex, "right", newThisOrLastPeriodExpression("LAST", "YEARS"))}
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
</Menu>
|
||||
</Box>
|
||||
<Box>
|
||||
<AdvancedDateTimeFilterValues type={field.type} expression={currentExpression} onSave={(expression: any) => saveNewDateTimeExpression(valueIndex, expression)} forcedOpen={forceAdvancedDateTimeDialogOpen} />
|
||||
</Box>
|
||||
</Box>;
|
||||
}
|
||||
|
||||
|
||||
@ -21,9 +21,7 @@
|
||||
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
|
||||
import {FormControlLabel, FormGroup} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import {Box, FormControlLabel, FormGroup} from "@mui/material";
|
||||
import Button from "@mui/material/Button";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@ -58,7 +56,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
|
||||
const someRef = createRef();
|
||||
|
||||
const textRef = useRef(null);
|
||||
const [didInitialFocus, setDidInitialFocus] = useState(false);
|
||||
const [didInitialFocus, setDidInitialFocus] = useState(false)
|
||||
|
||||
const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
|
||||
const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
|
||||
@ -73,9 +71,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
|
||||
|
||||
console.log(`Open groups: ${JSON.stringify(openGroups)}`);
|
||||
|
||||
if (!didInitialFocus)
|
||||
if(!didInitialFocus)
|
||||
{
|
||||
if (textRef.current)
|
||||
if(textRef.current)
|
||||
{
|
||||
textRef.current.select();
|
||||
setDidInitialFocus(true);
|
||||
@ -191,11 +189,11 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// always sort columns by label. note, in future may offer different sorts - here's where to do it. //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const sortedColumns = [...columns];
|
||||
const sortedColumns = [... columns];
|
||||
sortedColumns.sort((a, b): number =>
|
||||
{
|
||||
return a.headerName.localeCompare(b.headerName);
|
||||
});
|
||||
})
|
||||
|
||||
for (let i = 0; i < sortedColumns.length; i++)
|
||||
{
|
||||
@ -363,7 +361,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
|
||||
const changeFilterText = (newValue: string) =>
|
||||
{
|
||||
setFilterText(newValue);
|
||||
props.filterTextChanger(newValue);
|
||||
props.filterTextChanger(newValue)
|
||||
};
|
||||
|
||||
const filterTextChanged = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
|
||||
|
||||
@ -28,8 +28,8 @@ import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button/Button";
|
||||
import Icon from "@mui/material/Icon/Icon";
|
||||
import {GridFilterPanelProps, GridSlotsComponentsProps} from "@mui/x-data-grid-pro";
|
||||
import {FilterCriteriaRow, getDefaultCriteriaValue} from "qqq/components/query/FilterCriteriaRow";
|
||||
import React, {forwardRef, useReducer} from "react";
|
||||
import {FilterCriteriaRow, getDefaultCriteriaValue} from "qqq/components/query/FilterCriteriaRow";
|
||||
|
||||
|
||||
declare module "@mui/x-data-grid"
|
||||
@ -49,7 +49,7 @@ declare module "@mui/x-data-grid"
|
||||
|
||||
export class QFilterCriteriaWithId extends QFilterCriteria
|
||||
{
|
||||
id: number;
|
||||
id: number
|
||||
}
|
||||
|
||||
|
||||
@ -62,7 +62,6 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
const queryFilter = props.queryFilter;
|
||||
|
||||
// console.log(`CustomFilterPanel: filter: ${JSON.stringify(queryFilter)}`);
|
||||
|
||||
function focusLastField()
|
||||
@ -125,7 +124,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
|
||||
}
|
||||
}
|
||||
|
||||
if (queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
|
||||
if(queryFilter.criteria.length == 1 && !queryFilter.criteria[0].fieldName)
|
||||
{
|
||||
focusLastField();
|
||||
}
|
||||
@ -143,7 +142,7 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
|
||||
{
|
||||
queryFilter.criteria[index] = newCriteria;
|
||||
|
||||
clearTimeout(debounceTimeout);
|
||||
clearTimeout(debounceTimeout)
|
||||
debounceTimeout = setTimeout(() => props.updateFilter(queryFilter), needDebounce ? 500 : 1);
|
||||
|
||||
forceUpdate();
|
||||
@ -179,7 +178,6 @@ export const CustomFilterPanel = forwardRef<any, GridFilterPanelProps>(
|
||||
updateCriteria={(newCriteria, needDebounce) => updateCriteria(newCriteria, index, needDebounce)}
|
||||
removeCriteria={() => removeCriteria(index)}
|
||||
updateBooleanOperator={(newValue) => updateBooleanOperator(newValue)}
|
||||
queryScreenUsage={props.queryScreenUsage}
|
||||
/>
|
||||
{/*JSON.stringify(criteria)*/}
|
||||
</Box>
|
||||
|
||||
@ -21,9 +21,9 @@
|
||||
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Expression} from "qqq/components/query/CriteriaDateField";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
/*******************************************************************************
|
||||
** Helper component to show value inside tooltips that ticks up every second.
|
||||
@ -57,11 +57,6 @@ const HOUR_MS = 60 * 60 * 1000;
|
||||
const DAY_MS = 24 * 60 * 60 * 1000;
|
||||
const evaluateExpression = (time: Date, field: QFieldMetaData, expression: Expression): string =>
|
||||
{
|
||||
if (expression.type == "FilterVariableExpression")
|
||||
{
|
||||
return (expression.toString());
|
||||
}
|
||||
|
||||
let rs: Date = null;
|
||||
if (expression.type == "NowWithOffset")
|
||||
{
|
||||
|
||||
@ -46,13 +46,13 @@ export default function ExportMenuItem(props: QExportMenuItemProps)
|
||||
|
||||
const {recordAnalytics} = useContext(QContext);
|
||||
|
||||
recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label});
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
disabled={totalRecords === 0}
|
||||
onClick={() =>
|
||||
{
|
||||
recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label});
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
// build the list of visible fields. note, not doing them in-order (in case //
|
||||
// the user did drag & drop), because column order model isn't right yet //
|
||||
|
||||
@ -35,7 +35,6 @@ import TextField from "@mui/material/TextField";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
|
||||
import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
|
||||
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
|
||||
import FilterUtils from "qqq/utils/qqq/FilterUtils";
|
||||
import React, {ReactNode, SyntheticEvent, useState} from "react";
|
||||
|
||||
@ -73,7 +72,7 @@ export const getValueModeRequiredCount = (valueMode: ValueMode): number =>
|
||||
case ValueMode.PVS_MULTI:
|
||||
return (null);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export interface OperatorOption
|
||||
{
|
||||
@ -184,7 +183,7 @@ export const getOperatorOptions = (tableMetaData: QTableMetaData, fieldName: str
|
||||
}
|
||||
|
||||
return (operatorOptions);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
interface FilterCriteriaRowProps
|
||||
@ -198,13 +197,13 @@ interface FilterCriteriaRowProps
|
||||
updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean) => void;
|
||||
removeCriteria: () => void;
|
||||
updateBooleanOperator: (newValue: string) => void;
|
||||
queryScreenUsage?: QueryScreenUsage;
|
||||
}
|
||||
|
||||
FilterCriteriaRow.defaultProps =
|
||||
{};
|
||||
{
|
||||
};
|
||||
|
||||
export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): { criteriaIsValid: boolean, criteriaStatusTooltip: string }
|
||||
export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): {criteriaIsValid: boolean, criteriaStatusTooltip: string}
|
||||
{
|
||||
let criteriaIsValid = true;
|
||||
let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
|
||||
@ -214,7 +213,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
|
||||
return (value === null || value == undefined || String(value).trim() === "");
|
||||
}
|
||||
|
||||
if (!criteria)
|
||||
if(!criteria)
|
||||
{
|
||||
criteriaIsValid = false;
|
||||
criteriaStatusTooltip = "This condition is not defined.";
|
||||
@ -267,7 +266,7 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
|
||||
return {criteriaIsValid, criteriaStatusTooltip};
|
||||
}
|
||||
|
||||
export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator, queryScreenUsage}: FilterCriteriaRowProps): JSX.Element
|
||||
export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria, booleanOperator, updateCriteria, removeCriteria, updateBooleanOperator}: FilterCriteriaRowProps): JSX.Element
|
||||
{
|
||||
// console.log(`FilterCriteriaRow: criteria: ${JSON.stringify(criteria)}`);
|
||||
const [operatorSelectedValue, setOperatorSelectedValue] = useState(null as OperatorOption);
|
||||
@ -285,7 +284,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
|
||||
let defaultFieldValue;
|
||||
let field = null;
|
||||
let fieldTable = null;
|
||||
if (criteria && criteria.fieldName)
|
||||
if(criteria && criteria.fieldName)
|
||||
{
|
||||
[field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
|
||||
if (field && fieldTable)
|
||||
@ -304,9 +303,9 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
|
||||
|
||||
let newOperatorSelectedValue = operatorOptions.filter(option =>
|
||||
{
|
||||
if (option.value == criteria.operator)
|
||||
if(option.value == criteria.operator)
|
||||
{
|
||||
if (option.implicitValues)
|
||||
if(option.implicitValues)
|
||||
{
|
||||
return (JSON.stringify(option.implicitValues) == JSON.stringify(criteria.values));
|
||||
}
|
||||
@ -317,7 +316,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
|
||||
}
|
||||
return (false);
|
||||
})[0];
|
||||
if (newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
|
||||
if(newOperatorSelectedValue?.label !== operatorSelectedValue?.label)
|
||||
{
|
||||
setOperatorSelectedValue(newOperatorSelectedValue);
|
||||
setOperatorInputValue(newOperatorSelectedValue?.label);
|
||||
@ -380,12 +379,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
|
||||
{
|
||||
criteria.operator = newValue ? newValue.value : null;
|
||||
|
||||
if (newValue)
|
||||
if(newValue)
|
||||
{
|
||||
setOperatorSelectedValue(newValue);
|
||||
setOperatorInputValue(newValue.label);
|
||||
|
||||
if (newValue.implicitValues)
|
||||
if(newValue.implicitValues)
|
||||
{
|
||||
criteria.values = newValue.implicitValues;
|
||||
}
|
||||
@ -394,15 +393,15 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
|
||||
// we've seen cases where switching operators can sometimes put a null in as the first value... //
|
||||
// that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that. //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
|
||||
if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
|
||||
{
|
||||
criteria.values = [];
|
||||
}
|
||||
|
||||
if (newValue.valueMode && !newValue.implicitValues)
|
||||
if(newValue.valueMode && !newValue.implicitValues)
|
||||
{
|
||||
const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
|
||||
if (requiredValueCount != null && criteria.values.length > requiredValueCount)
|
||||
if(requiredValueCount != null && criteria.values.length > requiredValueCount)
|
||||
{
|
||||
criteria.values.splice(requiredValueCount);
|
||||
}
|
||||
@ -425,12 +424,12 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
|
||||
// @ts-ignore
|
||||
const value = newValue !== undefined ? newValue : event ? event.target.value : null;
|
||||
|
||||
if (!criteria.values)
|
||||
if(!criteria.values)
|
||||
{
|
||||
criteria.values = [];
|
||||
}
|
||||
|
||||
if (valueIndex == "all")
|
||||
if(valueIndex == "all")
|
||||
{
|
||||
criteria.values = value;
|
||||
}
|
||||
@ -515,7 +514,6 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
|
||||
field={field}
|
||||
table={fieldTable}
|
||||
valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
|
||||
queryScreenUsage={queryScreenUsage}
|
||||
/>
|
||||
</Box>
|
||||
<Box display="inline-block">
|
||||
|
||||
@ -23,23 +23,19 @@
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Box from "@mui/material/Box";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import InputAdornment from "@mui/material/InputAdornment/InputAdornment";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import React, {SyntheticEvent, useReducer} from "react";
|
||||
import DynamicSelect from "qqq/components/forms/DynamicSelect";
|
||||
import AssignFilterVariable from "qqq/components/query/AssignFilterVariable";
|
||||
import CriteriaDateField, {NoWrapTooltip} from "qqq/components/query/CriteriaDateField";
|
||||
import CriteriaDateField from "qqq/components/query/CriteriaDateField";
|
||||
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
|
||||
import {EvaluatedExpression} from "qqq/components/query/EvaluatedExpression";
|
||||
import FilterCriteriaPaster from "qqq/components/query/FilterCriteriaPaster";
|
||||
import {OperatorOption, ValueMode} from "qqq/components/query/FilterCriteriaRow";
|
||||
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React, {SyntheticEvent, useReducer, useState} from "react";
|
||||
|
||||
interface Props
|
||||
{
|
||||
@ -48,8 +44,7 @@ interface Props
|
||||
field: QFieldMetaData;
|
||||
table: QTableMetaData;
|
||||
valueChangeHandler: (event: React.ChangeEvent | SyntheticEvent, valueIndex?: number | "all", newValue?: any) => void;
|
||||
initiallyOpenMultiValuePvs?: boolean;
|
||||
queryScreenUsage?: QueryScreenUsage;
|
||||
initiallyOpenMultiValuePvs?: boolean
|
||||
}
|
||||
|
||||
FilterCriteriaRowValues.defaultProps =
|
||||
@ -77,10 +72,8 @@ export const getTypeForTextField = (field: QFieldMetaData): string =>
|
||||
return (type);
|
||||
};
|
||||
|
||||
export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-", allowVariables = false) =>
|
||||
export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWithId, valueChangeHandler?: (event: (React.ChangeEvent | React.SyntheticEvent), valueIndex?: (number | "all"), newValue?: any) => void, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
|
||||
{
|
||||
const isExpression = criteria.values && criteria.values[valueIndex] && criteria.values[valueIndex].type;
|
||||
|
||||
let type = getTypeForTextField(field);
|
||||
const inputLabelProps: any = {};
|
||||
|
||||
@ -102,6 +95,7 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Event handler for key-down events - specifically added here, to stop pressing
|
||||
** 'tab' in a date or date-time from closing the quick-filter...
|
||||
@ -110,7 +104,7 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
|
||||
{
|
||||
if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
|
||||
{
|
||||
if (e.code == "Tab")
|
||||
if(e.code == "Tab")
|
||||
{
|
||||
console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
|
||||
e.stopPropagation();
|
||||
@ -118,36 +112,6 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const makeFilterVariableTextField = (expression: FilterVariableExpression, valueIndex: number = 0, label = "Value", idPrefix = "value-") =>
|
||||
{
|
||||
const clearValue = (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>, index: number) =>
|
||||
{
|
||||
valueChangeHandler(event, index, "");
|
||||
document.getElementById(`${idPrefix}${criteria.id}`).focus();
|
||||
};
|
||||
|
||||
const inputProps2: any = {};
|
||||
inputProps2.endAdornment = (
|
||||
<InputAdornment position="end">
|
||||
<IconButton sx={{visibility: expression ? "visible" : "hidden"}} onClick={(event) => clearValue(event, valueIndex)}>
|
||||
<Icon>closer</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
);
|
||||
|
||||
return <NoWrapTooltip title={<EvaluatedExpression field={field} expression={expression} />} placement="bottom" enterDelay={1000} sx={{marginLeft: "-75px !important", marginTop: "-8px !important"}}><TextField
|
||||
id={`${idPrefix}${criteria.id}`}
|
||||
label={label}
|
||||
variant="standard"
|
||||
autoComplete="off"
|
||||
InputProps={{disabled: true, readOnly: true, unselectable: "off", ...inputProps2}}
|
||||
InputLabelProps={{shrink: true}}
|
||||
value="${VARIABLE}"
|
||||
fullWidth
|
||||
/></NoWrapTooltip>;
|
||||
};
|
||||
|
||||
const inputProps: any = {};
|
||||
inputProps.endAdornment = (
|
||||
<InputAdornment position="end">
|
||||
@ -157,40 +121,25 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
|
||||
</InputAdornment>
|
||||
);
|
||||
|
||||
return <Box sx={{margin: 0, padding: 0, display: "flex"}}>
|
||||
{
|
||||
isExpression ? (
|
||||
makeFilterVariableTextField(criteria.values[valueIndex], valueIndex, label, idPrefix)
|
||||
) : (
|
||||
<TextField
|
||||
id={`${idPrefix}${criteria.id}`}
|
||||
label={label}
|
||||
variant="standard"
|
||||
autoComplete="off"
|
||||
type={type}
|
||||
onChange={(event) => valueChangeHandler(event, valueIndex)}
|
||||
onKeyDown={handleKeyDown}
|
||||
value={value}
|
||||
InputLabelProps={inputLabelProps}
|
||||
InputProps={inputProps}
|
||||
fullWidth
|
||||
autoFocus={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
allowVariables && (
|
||||
<AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={valueIndex} />
|
||||
)
|
||||
}
|
||||
</Box>;
|
||||
return <TextField
|
||||
id={`${idPrefix}${criteria.id}`}
|
||||
label={label}
|
||||
variant="standard"
|
||||
autoComplete="off"
|
||||
type={type}
|
||||
onChange={(event) => valueChangeHandler(event, valueIndex)}
|
||||
onKeyDown={handleKeyDown}
|
||||
value={value}
|
||||
InputLabelProps={inputLabelProps}
|
||||
InputProps={inputProps}
|
||||
fullWidth
|
||||
autoFocus={true}
|
||||
/>;
|
||||
};
|
||||
|
||||
|
||||
function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs, queryScreenUsage}: Props): JSX.Element
|
||||
function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueChangeHandler, initiallyOpenMultiValuePvs}: Props): JSX.Element
|
||||
{
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
const [allowVariables, setAllowVariables] = useState(queryScreenUsage == "reportSetup");
|
||||
|
||||
if (!operatorOption)
|
||||
{
|
||||
@ -220,35 +169,33 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
const isExpression = criteria.values && criteria.values[0] && criteria.values[0].type;
|
||||
|
||||
switch (operatorOption.valueMode)
|
||||
{
|
||||
case ValueMode.NONE:
|
||||
return null;
|
||||
case ValueMode.SINGLE:
|
||||
return makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables);
|
||||
return makeTextField(field, criteria, valueChangeHandler);
|
||||
case ValueMode.SINGLE_DATE:
|
||||
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
|
||||
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
|
||||
case ValueMode.DOUBLE_DATE:
|
||||
return <Box>
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
|
||||
</Box>;
|
||||
case ValueMode.SINGLE_DATE_TIME:
|
||||
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} allowVariables={allowVariables} />;
|
||||
return <CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} />;
|
||||
case ValueMode.DOUBLE_DATE_TIME:
|
||||
return <Box>
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" allowVariables={allowVariables} />
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" allowVariables={allowVariables} />
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={0} label="From" idPrefix="from-" />
|
||||
<CriteriaDateField field={field} valueChangeHandler={valueChangeHandler} criteria={criteria} valueIndex={1} label="To" idPrefix="to-" />
|
||||
</Box>;
|
||||
case ValueMode.DOUBLE:
|
||||
return <Box>
|
||||
<Box width="50%" display="inline-block">
|
||||
{makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-", allowVariables)}
|
||||
{makeTextField(field, criteria, valueChangeHandler, 0, "From", "from-")}
|
||||
</Box>
|
||||
<Box width="50%" display="inline-block">
|
||||
{makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-", allowVariables)}
|
||||
{makeTextField(field, criteria, valueChangeHandler, 1, "To", "to-")}
|
||||
</Box>
|
||||
</Box>;
|
||||
case ValueMode.MULTI:
|
||||
@ -281,30 +228,19 @@ function FilterCriteriaRowValues({operatorOption, criteria, field, table, valueC
|
||||
{
|
||||
selectedPossibleValue = criteria.values[0];
|
||||
}
|
||||
return <Box display="flex">
|
||||
{
|
||||
isExpression ? (
|
||||
makeTextField(field, criteria, valueChangeHandler, 0, undefined, undefined, allowVariables)
|
||||
) : (
|
||||
<Box width={"100%"}>
|
||||
<DynamicSelect
|
||||
tableName={table.name}
|
||||
fieldName={field.name}
|
||||
overrideId={field.name + "-single-" + criteria.id}
|
||||
key={field.name + "-single-" + criteria.id}
|
||||
fieldLabel="Value"
|
||||
initialValue={selectedPossibleValue?.id}
|
||||
initialDisplayValue={selectedPossibleValue?.label}
|
||||
inForm={false}
|
||||
onChange={(value: any) => valueChangeHandler(null, 0, value)}
|
||||
variant="standard"
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
{
|
||||
allowVariables && !isExpression && <Box mt={2.0}><AssignFilterVariable field={field} valueChangeHandler={valueChangeHandler} valueIndex={0} /></Box>
|
||||
}
|
||||
return <Box mb={-1.5}>
|
||||
<DynamicSelect
|
||||
tableName={table.name}
|
||||
fieldName={field.name}
|
||||
overrideId={field.name + "-single-" + criteria.id}
|
||||
key={field.name + "-single-" + criteria.id}
|
||||
fieldLabel="Value"
|
||||
initialValue={selectedPossibleValue?.id}
|
||||
initialDisplayValue={selectedPossibleValue?.label}
|
||||
inForm={false}
|
||||
onChange={(value: any) => valueChangeHandler(null, 0, value)}
|
||||
variant="standard"
|
||||
/>
|
||||
</Box>;
|
||||
case ValueMode.PVS_MULTI:
|
||||
console.log("Doing pvs multi: " + criteria.values);
|
||||
|
||||
@ -30,15 +30,14 @@ import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
|
||||
import QContext from "QContext";
|
||||
import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
|
||||
import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
|
||||
import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
|
||||
import XIcon from "qqq/components/query/XIcon";
|
||||
import {QueryScreenUsage} from "qqq/pages/records/query/RecordQuery";
|
||||
import FilterUtils from "qqq/utils/qqq/FilterUtils";
|
||||
import TableUtils from "qqq/utils/qqq/TableUtils";
|
||||
import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
|
||||
|
||||
export type CriteriaParamType = QFilterCriteriaWithId | null | "tooComplex";
|
||||
|
||||
@ -51,7 +50,6 @@ interface QuickFilterProps
|
||||
updateCriteria: (newCriteria: QFilterCriteria, needDebounce: boolean, doRemoveCriteria: boolean) => void;
|
||||
defaultOperator?: QCriteriaOperator;
|
||||
handleRemoveQuickFilterField?: (fieldName: string) => void;
|
||||
queryScreenUsage?: QueryScreenUsage;
|
||||
}
|
||||
|
||||
QuickFilter.defaultProps =
|
||||
@ -73,7 +71,7 @@ export const quickFilterButtonStyles = {
|
||||
minHeight: "auto",
|
||||
padding: "0.375rem 0.625rem", whiteSpace: "nowrap",
|
||||
marginBottom: "0.5rem"
|
||||
};
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
** Test if a CriteriaParamType represents an actual query criteria - or, if it's
|
||||
@ -91,11 +89,11 @@ const criteriaParamIsCriteria = (param: CriteriaParamType): boolean =>
|
||||
*******************************************************************************/
|
||||
const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteria: QFilterCriteriaWithId): boolean =>
|
||||
{
|
||||
if (operatorOption.value == criteria.operator)
|
||||
if(operatorOption.value == criteria.operator)
|
||||
{
|
||||
if (operatorOption.implicitValues)
|
||||
if(operatorOption.implicitValues)
|
||||
{
|
||||
if (JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
|
||||
if(JSON.stringify(operatorOption.implicitValues) == JSON.stringify(criteria.values))
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
@ -109,7 +107,7 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
|
||||
}
|
||||
|
||||
return (false);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -119,29 +117,29 @@ const doesOperatorOptionEqualCriteria = (operatorOption: OperatorOption, criteri
|
||||
*******************************************************************************/
|
||||
const getOperatorSelectedValue = (operatorOptions: OperatorOption[], criteria: QFilterCriteriaWithId, defaultOperator: QCriteriaOperator): OperatorOption =>
|
||||
{
|
||||
if (criteria)
|
||||
if(criteria)
|
||||
{
|
||||
const filteredOptions = operatorOptions.filter(o => doesOperatorOptionEqualCriteria(o, criteria));
|
||||
if (filteredOptions.length > 0)
|
||||
if(filteredOptions.length > 0)
|
||||
{
|
||||
return (filteredOptions[0]);
|
||||
}
|
||||
}
|
||||
|
||||
const filteredOptions = operatorOptions.filter(o => o.value == defaultOperator);
|
||||
if (filteredOptions.length > 0)
|
||||
if(filteredOptions.length > 0)
|
||||
{
|
||||
return (filteredOptions[0]);
|
||||
}
|
||||
|
||||
return (null);
|
||||
};
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
** Component to render a QuickFilter - that is - a button, with a Menu under it,
|
||||
** with Operator and Value controls.
|
||||
*******************************************************************************/
|
||||
export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField, queryScreenUsage}: QuickFilterProps): JSX.Element
|
||||
export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData, criteriaParam, updateCriteria, defaultOperator, handleRemoveQuickFilterField}: QuickFilterProps): JSX.Element
|
||||
{
|
||||
const operatorOptions = fieldMetaData ? getOperatorOptions(tableMetaData, fullFieldName) : [];
|
||||
const [_, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fullFieldName);
|
||||
@ -192,7 +190,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
|
||||
{
|
||||
if (isOpen)
|
||||
if(isOpen)
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
// this was firing too-often for case where: there was a criteria originally //
|
||||
@ -219,12 +217,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
*******************************************************************************/
|
||||
const criteriaNeedsReset = (): boolean =>
|
||||
{
|
||||
if (criteria != null && criteriaParam == null)
|
||||
if(criteria != null && criteriaParam == null)
|
||||
{
|
||||
const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
|
||||
if (criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
|
||||
if(criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
|
||||
{
|
||||
if (isOpen)
|
||||
if(isOpen)
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
// this was firing too-often for case where: there was no criteria originally, //
|
||||
@ -239,7 +237,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
}
|
||||
|
||||
return (false);
|
||||
};
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
** Construct a new criteria object - resetting the values tied to the operator
|
||||
@ -253,8 +251,8 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
setOperatorSelectedValue(operatorOption);
|
||||
setOperatorInputValue(operatorOption?.label);
|
||||
setCriteria(criteria);
|
||||
return (criteria);
|
||||
};
|
||||
return(criteria);
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
** event handler to open the menu in response to the button being clicked.
|
||||
@ -268,7 +266,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
{
|
||||
const element = document.getElementById("value-" + criteria.id);
|
||||
element?.focus();
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
@ -306,15 +304,15 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
// we've seen cases where switching operators can sometimes put a null in as the first value... //
|
||||
// that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that. //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
|
||||
if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
|
||||
{
|
||||
criteria.values = [];
|
||||
}
|
||||
|
||||
if (newValue.valueMode && !newValue.implicitValues)
|
||||
if(newValue.valueMode && !newValue.implicitValues)
|
||||
{
|
||||
const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
|
||||
if (requiredValueCount != null && criteria.values.length > requiredValueCount)
|
||||
if(requiredValueCount != null && criteria.values.length > requiredValueCount)
|
||||
{
|
||||
criteria.values.splice(requiredValueCount);
|
||||
}
|
||||
@ -347,7 +345,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
// @ts-ignore
|
||||
const value = newValue !== undefined ? newValue : event ? event.target.value : null;
|
||||
|
||||
console.log("IN HERE");
|
||||
if (!criteria.values)
|
||||
{
|
||||
criteria.values = [];
|
||||
@ -379,13 +376,13 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
*******************************************************************************/
|
||||
const resetCriteria = (e: React.MouseEvent<HTMLSpanElement>) =>
|
||||
{
|
||||
if (criteriaIsValid)
|
||||
if(criteriaIsValid)
|
||||
{
|
||||
e.stopPropagation();
|
||||
const newCriteria = makeNewCriteria();
|
||||
updateCriteria(newCriteria, false, true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
** event handler for clicking the (x) icon that turns off this quick filter field.
|
||||
@ -393,17 +390,17 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
*******************************************************************************/
|
||||
const handleTurningOffQuickFilterField = () =>
|
||||
{
|
||||
closeMenu();
|
||||
if (handleRemoveQuickFilterField)
|
||||
closeMenu()
|
||||
if(handleRemoveQuickFilterField)
|
||||
{
|
||||
handleRemoveQuickFilterField(criteria?.fieldName);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// if no field was input (e.g., record-query is still loading), return null early //
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
if (!fieldMetaData)
|
||||
if(!fieldMetaData)
|
||||
{
|
||||
return (null);
|
||||
}
|
||||
@ -413,10 +410,10 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
// from the last selected one, then set the state vars that control that autocomplete //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator);
|
||||
if (JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
|
||||
if(JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
|
||||
{
|
||||
setOperatorSelectedValue(maybeNewOperatorSelectedValue);
|
||||
setOperatorInputValue(maybeNewOperatorSelectedValue?.label);
|
||||
setOperatorSelectedValue(maybeNewOperatorSelectedValue)
|
||||
setOperatorInputValue(maybeNewOperatorSelectedValue?.label)
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -434,7 +431,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
const tooltipEnterDelay = 500;
|
||||
|
||||
let buttonAdditionalStyles: any = {};
|
||||
let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>;
|
||||
let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>
|
||||
let buttonClassName = "filterNotActive";
|
||||
if (criteriaIsValid)
|
||||
{
|
||||
@ -449,9 +446,9 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
// don't show the Equals or In operators //
|
||||
///////////////////////////////////////////
|
||||
let operatorString = (<>{operatorSelectedValue.label} </>);
|
||||
if (operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
|
||||
if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
|
||||
{
|
||||
operatorString = (<></>);
|
||||
operatorString = (<></>)
|
||||
}
|
||||
|
||||
buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span> <span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
|
||||
@ -494,7 +491,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if (criteriaIsValid)
|
||||
if(criteriaIsValid)
|
||||
{
|
||||
resetCriteria(e);
|
||||
}
|
||||
@ -502,12 +499,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
{
|
||||
handleTurningOffQuickFilterField();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// return the button & menu //
|
||||
//////////////////////////////
|
||||
const widthAndMaxWidth = (fieldMetaData?.type == QFieldType.DATE_TIME) ? 315 : 250;
|
||||
const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
|
||||
return (
|
||||
<>
|
||||
{button}
|
||||
@ -544,7 +541,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
|
||||
</Box>
|
||||
<Box width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="quickFilter filterValuesColumn">
|
||||
<FilterCriteriaRowValues
|
||||
queryScreenUsage={queryScreenUsage}
|
||||
operatorOption={operatorSelectedValue}
|
||||
criteria={criteria}
|
||||
field={fieldMetaData}
|
||||
|
||||
@ -1,487 +0,0 @@
|
||||
/*
|
||||
* 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 {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
|
||||
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Alert, Box} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import FormData from "form-data";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import DynamicSelect, {getAutocompleteOutlinedStyle} from "qqq/components/forms/DynamicSelect";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import React, {useEffect, useReducer, useState} from "react";
|
||||
|
||||
interface ShareModalProps
|
||||
{
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
tableMetaData: QTableMetaData;
|
||||
record: QRecord;
|
||||
}
|
||||
|
||||
ShareModal.defaultProps = {};
|
||||
|
||||
|
||||
interface CurrentShare
|
||||
{
|
||||
shareId: any;
|
||||
scopeId: string;
|
||||
audienceType: string;
|
||||
audienceId: any;
|
||||
audienceLabel: string;
|
||||
}
|
||||
|
||||
interface Scope
|
||||
{
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const scopeOptions: Scope[] = [
|
||||
{id: "READ_ONLY", label: "Read-Only"},
|
||||
{id: "READ_WRITE", label: "Read and Edit"}
|
||||
];
|
||||
|
||||
const defaultScope = scopeOptions[0];
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
interface ShareableTableMetaData
|
||||
{
|
||||
sharedRecordTableName: string;
|
||||
assetIdFieldName: string;
|
||||
scopeFieldName: string;
|
||||
audienceTypesPossibleValueSourceName: string;
|
||||
audiencePossibleValueSourceName: string;
|
||||
thisTableOwnerIdFieldName: string;
|
||||
audienceTypes: {[name: string]: any}; // values here are: ShareableAudienceType
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
** component containing a Modal dialog for sharing records
|
||||
*******************************************************************************/
|
||||
export default function ShareModal({open, onClose, tableMetaData, record}: ShareModalProps): JSX.Element
|
||||
{
|
||||
const [statusString, setStatusString] = useState("Loading...");
|
||||
const [alert, setAlert] = useState(null as string);
|
||||
|
||||
const [selectedAudienceOption, setSelectedAudienceOption] = useState(null as {id: string, label: string});
|
||||
const [selectedAudienceType, setSelectedAudienceType] = useState(null);
|
||||
const [selectedAudienceId, setSelectedAudienceId] = useState(null);
|
||||
const [selectedScopeId, setSelectedScopeId] = useState(defaultScope.id);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [currentShares, setCurrentShares] = useState([] as CurrentShare[])
|
||||
const [needToLoadCurrentShares, setNeedToLoadCurrentShares] = useState(true);
|
||||
const [everLoadedCurrentShares, setEverLoadedCurrentShares] = useState(false);
|
||||
|
||||
const shareableTableMetaData = tableMetaData.shareableTableMetaData as ShareableTableMetaData;
|
||||
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
if(!shareableTableMetaData)
|
||||
{
|
||||
console.error(`Did not find a shareableTableMetaData on table ${tableMetaData.name}`);
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////
|
||||
// trigger initial load, and post any changes, re-load //
|
||||
/////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if(needToLoadCurrentShares)
|
||||
{
|
||||
loadShares();
|
||||
}
|
||||
}, [needToLoadCurrentShares]);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function close(event: object, reason: string)
|
||||
{
|
||||
if (reason === "backdropClick" || reason === "escapeKeyDown")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
onClose();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function handleAudienceChange(value: any | any[], reason: string)
|
||||
{
|
||||
if(value)
|
||||
{
|
||||
const [audienceType, audienceId] = value.id.split(":");
|
||||
setSelectedAudienceType(audienceType);
|
||||
setSelectedAudienceId(audienceId);
|
||||
}
|
||||
else
|
||||
{
|
||||
setSelectedAudienceType(null);
|
||||
setSelectedAudienceId(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function handleScopeChange(event: React.SyntheticEvent, value: any | any[], reason: string)
|
||||
{
|
||||
if(value)
|
||||
{
|
||||
setSelectedScopeId(value.id);
|
||||
}
|
||||
else
|
||||
{
|
||||
setSelectedScopeId(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function editingExistingShareScope(shareId: number, value: any | any[])
|
||||
{
|
||||
setStatusString("Saving...");
|
||||
setAlert(null);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
formData.append("shareId", shareId);
|
||||
formData.append("scopeId", value.id);
|
||||
|
||||
const processResult = await qController.processRun("editSharedRecord", formData, null, true);
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error editing shared record: " + jobError.error);
|
||||
setSubmitting(false)
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
setNeedToLoadCurrentShares(true);
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function loadShares()
|
||||
{
|
||||
setNeedToLoadCurrentShares(false);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
const processResult = await qController.processRun("getSharedRecords", formData, null, true);
|
||||
|
||||
setStatusString("Loading...");
|
||||
setAlert(null)
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error loading: " + jobError.error);
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
|
||||
const newCurrentShares: CurrentShare[] = [];
|
||||
for (let i in result.values["resultList"])
|
||||
{
|
||||
newCurrentShares.push(result.values["resultList"][i].values);
|
||||
}
|
||||
setCurrentShares(newCurrentShares);
|
||||
setEverLoadedCurrentShares(true);
|
||||
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function saveNewShare()
|
||||
{
|
||||
setSubmitting(true)
|
||||
setStatusString("Saving...");
|
||||
setAlert(null);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
formData.append("audienceType", selectedAudienceType);
|
||||
formData.append("audienceId", selectedAudienceId);
|
||||
formData.append("scopeId", selectedScopeId);
|
||||
|
||||
const processResult = await qController.processRun("insertSharedRecord", formData, null, true);
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error sharing record: " + jobError.error);
|
||||
setSubmitting(false)
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
setSelectedAudienceOption(null);
|
||||
setNeedToLoadCurrentShares(true);
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function removeShare(shareId: number)
|
||||
{
|
||||
setStatusString("Deleting...");
|
||||
setAlert(null);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
formData.append("shareId", shareId);
|
||||
|
||||
const processResult = await qController.processRun("deleteSharedRecord", formData, null, true);
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error deleting share: " + jobError.error);
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
setNeedToLoadCurrentShares(true);
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getScopeOption(scopeId: string): Scope
|
||||
{
|
||||
for (let scopeOption of scopeOptions)
|
||||
{
|
||||
if(scopeOption.id == scopeId)
|
||||
{
|
||||
return (scopeOption);
|
||||
}
|
||||
}
|
||||
|
||||
return (null);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderScopeDropdown(id: string, defaultValue: Scope, onChange: (event: React.SyntheticEvent, value: any | any[], reason: string) => void)
|
||||
{
|
||||
const isDisabled = (id == "new-share-scope" && submitting);
|
||||
return (
|
||||
<Autocomplete
|
||||
id={id}
|
||||
disabled={isDisabled}
|
||||
renderInput={(params) => (<TextField {...params} label="Scope" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
|
||||
options={scopeOptions}
|
||||
// @ts-ignore
|
||||
defaultValue={defaultValue}
|
||||
onChange={onChange}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
// @ts-ignore Property label does not exist on string | {thing with label}
|
||||
getOptionLabel={(option) => option.label}
|
||||
autoSelect={true}
|
||||
autoHighlight={true}
|
||||
disableClearable
|
||||
fullWidth
|
||||
sx={getAutocompleteOutlinedStyle(isDisabled)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
//////////////////////
|
||||
// render the modal //
|
||||
//////////////////////
|
||||
return (<Modal open={open} onClose={close}>
|
||||
<div className="share">
|
||||
<Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%", display: "flex", height: "100%", flexDirection: "column", justifyContent: "center"}}>
|
||||
<Card sx={{my: 5, mx: "auto", p: 3}}>
|
||||
|
||||
{/* header */}
|
||||
<Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="flex-start" maxWidth="590px">
|
||||
<Typography variant="h4" pb={1} fontWeight="600">
|
||||
Share {tableMetaData.label}: {record?.recordLabel ?? record?.values?.get(tableMetaData.primaryKeyField) ?? "Unknown"}
|
||||
<Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"} fontWeight="400">
|
||||
{/* todo move to helpContent (what do we attach the meta-data too??) */}
|
||||
Select a user or a group to share this record with.
|
||||
{/*You can choose if they should only be able to Read the record, or also make Edits to it.*/}
|
||||
</Box>
|
||||
<Box fontSize={14} pb={1} fontWeight="300">
|
||||
{alert && <Alert color="error" onClose={() => setAlert(null)}>{alert}</Alert>}
|
||||
{statusString}
|
||||
{!alert && !statusString && (<> </>)}
|
||||
</Box>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* body */}
|
||||
<Box pb={3} display="flex" flexDirection="column">
|
||||
{/* row for adding a new share */}
|
||||
<Box display="flex" flexDirection="row" alignItems="center">
|
||||
<Box width="550px" pr={2} mb={-1.5}>
|
||||
<DynamicSelect
|
||||
possibleValueSourceName={shareableTableMetaData.audiencePossibleValueSourceName}
|
||||
fieldLabel="User or Group" // todo should come from shareableTableMetaData
|
||||
initialValue={selectedAudienceOption?.id}
|
||||
initialDisplayValue={selectedAudienceOption?.label}
|
||||
inForm={false}
|
||||
onChange={handleAudienceChange}
|
||||
/>
|
||||
</Box>
|
||||
{/*
|
||||
when turning scope back on, change width of audience box to 350px
|
||||
<Box width="180px" pr={2}>
|
||||
{renderScopeDropdown("new-share-scope", defaultScope, handleScopeChange)}
|
||||
</Box>
|
||||
*/}
|
||||
<Box>
|
||||
<Tooltip title={selectedAudienceId == null ? "Select a user or group to share with." : null}>
|
||||
<span>
|
||||
<Button disabled={submitting || selectedAudienceId == null} sx={iconButtonSX} onClick={() => saveNewShare()}>
|
||||
<Icon color={selectedAudienceId == null ? "secondary" : "info"}>save</Icon>
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* row showing existing shares */}
|
||||
<Box pt={3}>
|
||||
<Box pb="0.25rem">
|
||||
<h5 style={{fontWeight: "600"}}>Current Shares
|
||||
{
|
||||
everLoadedCurrentShares ? <> ({currentShares.length})</> : <></>
|
||||
}
|
||||
</h5>
|
||||
</Box>
|
||||
<Box sx={{border: `1px solid ${colors.grayLines.main}`, borderRadius: "1rem", overflow: "hidden"}}>
|
||||
<Box sx={{overflow: "auto"}} height="210px" pt="0.75rem">
|
||||
{
|
||||
currentShares.map((share) => (
|
||||
<Box key={share.shareId} display="flex" justifyContent="space-between" alignItems="center" p="0.25rem" pb="0.75rem" fontSize="1rem">
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box width="490px" pl="1rem">{share.audienceLabel}</Box>
|
||||
{/*
|
||||
when turning scope back on, change width of audience box to 310px
|
||||
<Box width="160px">{renderScopeDropdown(`scope-${share.shareId}`, getScopeOption(share.scopeId), (event: React.SyntheticEvent, value: any | any[], reason: string) => editingExistingShareScope(share.shareId, value))}</Box>
|
||||
*/}
|
||||
</Box>
|
||||
<Box pr="1rem">
|
||||
<Button sx={{...iconButtonSX, ...redIconButton}} onClick={() => removeShare(share.shareId)}><Icon>clear</Icon></Button>
|
||||
</Box>
|
||||
</Box>
|
||||
))
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
{/* footer */}
|
||||
<Box display="flex" flexDirection="row" justifyContent="flex-end">
|
||||
<QCancelButton label="Done" iconName="check" onClickHandler={() => close(null, null)} disabled={false} />
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</div>
|
||||
</Modal>);
|
||||
|
||||
}
|
||||
|
||||
const iconButtonSX =
|
||||
{
|
||||
border: `1px solid ${colors.grayLines.main} !important`,
|
||||
borderRadius: "0.75rem",
|
||||
textTransform: "none",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "400",
|
||||
width: "40px",
|
||||
minWidth: "40px",
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
color: colors.secondary.main,
|
||||
"&:hover": {color: colors.secondary.main},
|
||||
"&:focus": {color: colors.secondary.main},
|
||||
"&:focus:not(:hover)": {color: colors.secondary.main},
|
||||
};
|
||||
|
||||
const redIconButton =
|
||||
{
|
||||
color: colors.error.main,
|
||||
"&:hover": {color: colors.error.main},
|
||||
"&:focus": {color: colors.error.main},
|
||||
"&:focus:not(:hover)": {color: colors.error.main},
|
||||
};
|
||||
|
||||
@ -22,16 +22,16 @@
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Box, Skeleton} from "@mui/material";
|
||||
import React from "react";
|
||||
import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
|
||||
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
|
||||
import React from "react";
|
||||
|
||||
|
||||
interface CompositeData
|
||||
{
|
||||
blocks: BlockData[];
|
||||
styleOverrides?: any;
|
||||
layout?: string;
|
||||
layout?: string
|
||||
}
|
||||
|
||||
|
||||
@ -57,14 +57,7 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
let layout = data?.layout;
|
||||
let boxStyle: any = {};
|
||||
if (layout == "FLEX_COLUMN")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "column";
|
||||
boxStyle.flexWrap = "wrap";
|
||||
boxStyle.gap = "0.5rem";
|
||||
}
|
||||
else if (layout == "FLEX_ROW_WRAPPED")
|
||||
if (layout == "FLEX_ROW_WRAPPED")
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "row";
|
||||
@ -75,7 +68,7 @@ export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetP
|
||||
{
|
||||
boxStyle.display = "flex";
|
||||
boxStyle.flexDirection = "row";
|
||||
boxStyle.justifyContent = "space-between";
|
||||
boxStyle.justifyContent = "space-between"
|
||||
boxStyle.gap = "0.25rem";
|
||||
}
|
||||
else if (layout == "TABLE_SUB_ROW_DETAILS")
|
||||
|
||||
@ -38,19 +38,18 @@ import StackedBarChart from "qqq/components/widgets/charts/StackedBarChart";
|
||||
import CompositeWidget from "qqq/components/widgets/CompositeWidget";
|
||||
import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
|
||||
import DividerWidget from "qqq/components/widgets/misc/Divider";
|
||||
import DynamicFormWidget from "qqq/components/widgets/misc/DynamicFormWidget";
|
||||
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 QuickSightChart from "qqq/components/widgets/misc/QuickSightChart";
|
||||
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 StepperCard from "qqq/components/widgets/misc/StepperCard";
|
||||
import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
|
||||
import ParentWidget from "qqq/components/widgets/ParentWidget";
|
||||
import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
|
||||
import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
|
||||
import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, WidgetData} from "qqq/components/widgets/Widget";
|
||||
import Widget, {HeaderIcon, LabelComponent, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
|
||||
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
|
||||
import ProcessRun from "qqq/pages/processes/ProcessRun";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
@ -258,11 +257,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
|
||||
** helper function, to convert values from a QRecord values map to a regular old
|
||||
** js object
|
||||
*******************************************************************************/
|
||||
function convertQRecordValuesFromMapToObject(record: QRecord): { [name: string]: any }
|
||||
function convertQRecordValuesFromMapToObject(record: QRecord): {[name: string]: any}
|
||||
{
|
||||
const rs: { [name: string]: any } = {};
|
||||
const rs: {[name: string]: any} = {};
|
||||
|
||||
if (record && record.values)
|
||||
if(record.values)
|
||||
{
|
||||
record.values.forEach((value, key) => rs[key] = value);
|
||||
}
|
||||
@ -293,7 +292,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
|
||||
}
|
||||
|
||||
return (
|
||||
<Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%", flexDirection: widgetMetaData.type == "multiTable" ? "column" : "row"}}>
|
||||
<Box key={`${widgetMetaData.name}-${i}`} sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px", width: "100%", height: "100%"}}>
|
||||
{
|
||||
haveLoadedParams && widgetMetaData.type === "parentWidget" && (
|
||||
<ParentWidget
|
||||
@ -343,20 +342,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "multiTable" && (
|
||||
widgetData[i]?.tableDataList?.map((tableData: WidgetData, index: number) =>
|
||||
<Box pb={3} key={`${widgetMetaData.type}-${index}`}>
|
||||
<TableWidget
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={tableData}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
isChild={areChildren}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "stackedBarChart" && (
|
||||
<Widget
|
||||
@ -598,25 +583,17 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, reco
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "filterAndColumnsSetup" && (
|
||||
widgetMetaData.type === "reportSetup" && (
|
||||
widgetData && widgetData[i] && widgetData[i].queryParams &&
|
||||
<FilterAndColumnsSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
|
||||
{
|
||||
}} />
|
||||
<ReportSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
|
||||
{}} />
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "pivotTableSetup" && (
|
||||
widgetData && widgetData[i] && widgetData[i].queryParams &&
|
||||
<PivotTableSetupWidget isEditable={false} widgetMetaData={widgetMetaData} recordValues={convertQRecordValuesFromMapToObject(record)} onSaveCallback={() =>
|
||||
{
|
||||
}} />
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "dynamicForm" && (
|
||||
widgetData && widgetData[i] &&
|
||||
<DynamicFormWidget isEditable={false} widgetMetaData={widgetMetaData} widgetData={widgetData[i]} record={record} recordValues={convertQRecordValuesFromMapToObject(record)} />
|
||||
{}} />
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
|
||||
@ -21,7 +21,8 @@
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Box, InputLabel} from "@mui/material";
|
||||
import {InputLabel} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
@ -195,6 +196,8 @@ export function HeaderLinkButtonComponent({label, onClickCallback, disabled, dis
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@ -217,7 +220,7 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
|
||||
const onClick = () =>
|
||||
{
|
||||
onClickCallback();
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Box alignItems="baseline" mr="-0.75rem">
|
||||
@ -233,6 +236,7 @@ export function HeaderToggleComponent({label, getValue, onClickCallback, disable
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@ -694,7 +698,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
);
|
||||
|
||||
let sublabelElement = (
|
||||
<Box key="sublabel" height="20px">
|
||||
<Box height="20px">
|
||||
<Typography sx={{position: "relative", top: "-18px"}} variant="caption">
|
||||
{props.widgetData?.sublabel}
|
||||
</Typography>
|
||||
@ -781,7 +785,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
}
|
||||
{localLabelAdditionalElementsLeft}
|
||||
</Box>
|
||||
<Box key="sublabelContainer" display="flex">
|
||||
<Box display="flex">
|
||||
{
|
||||
hasPermission && props.widgetData?.sublabel && (sublabelElement)
|
||||
}
|
||||
|
||||
@ -21,16 +21,14 @@
|
||||
|
||||
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import React from "react";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {WidgetData} from "qqq/components/widgets/Widget";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
/*******************************************************************************
|
||||
** Utility class used by Widgets
|
||||
@ -53,17 +51,6 @@ export class WidgetUtils
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static generateLabelLink = (linkText: string, linkURL: string): JSX.Element =>
|
||||
{
|
||||
return (<Box key={1} fontSize="1rem" pl={1} display="inline" position="relative">
|
||||
(<Link to={linkURL}>{linkText}</Link>)
|
||||
</Box>);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
|
||||
@ -41,7 +41,7 @@ export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlo
|
||||
{
|
||||
data.values.iconName &&
|
||||
<BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
|
||||
<Icon style={{color: data.styles.color, fontSize: "1rem", marginLeft: "2px", position: "relative", top: "4px"}}>{data.values.iconName}</Icon>
|
||||
<Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
|
||||
</BlockElementWrapper>
|
||||
}
|
||||
</div>);
|
||||
|
||||
@ -1,265 +0,0 @@
|
||||
/*
|
||||
* 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 {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import Box from "@mui/material/Box";
|
||||
import {FormikContextType, useFormikContext} from "formik";
|
||||
import QDynamicForm from "qqq/components/forms/DynamicForm";
|
||||
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
||||
import Widget from "qqq/components/widgets/Widget";
|
||||
import {renderSectionOfFields} from "qqq/pages/records/view/RecordView";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** component props
|
||||
*******************************************************************************/
|
||||
interface DynamicFormWidgetProps
|
||||
{
|
||||
isEditable: boolean;
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
widgetData: any;
|
||||
record: QRecord;
|
||||
recordValues: { [name: string]: any };
|
||||
onSaveCallback?: (values: { [name: string]: any }) => void;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** default values for props
|
||||
*******************************************************************************/
|
||||
DynamicFormWidget.defaultProps = {
|
||||
onSaveCallback: null
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Component to display a dynamic form - e.g., on a record edit or view screen,
|
||||
** or even within a process.
|
||||
*******************************************************************************/
|
||||
export default function DynamicFormWidget({isEditable, widgetMetaData, widgetData, record, recordValues, onSaveCallback}: DynamicFormWidgetProps): JSX.Element
|
||||
{
|
||||
const [fields, setFields] = useState([] as QFieldMetaData[]);
|
||||
|
||||
const [effectiveIsEditable, setEffectiveIsEditable] = useState(isEditable);
|
||||
if(widgetMetaData.defaultValues.has("isEditable"))
|
||||
{
|
||||
const defaultIsEditableValue = widgetMetaData.defaultValues.get("isEditable")
|
||||
if(defaultIsEditableValue != effectiveIsEditable)
|
||||
{
|
||||
setEffectiveIsEditable(defaultIsEditableValue);
|
||||
}
|
||||
}
|
||||
|
||||
const [dynamicFormFields, setDynamicFormFields] = useState(null as any);
|
||||
const [formValidations, setFormValidations] = useState(null as any);
|
||||
|
||||
const [lastKnowFormValues, setLastKnowFormValues] = useState({} as {[name: string]: any});
|
||||
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// on initial load, and any time widgetData changes (e.g., if widget gets re-rendered), //
|
||||
// figure out what our form fields are //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
setDynamicFormFields({})
|
||||
setFormValidations({})
|
||||
|
||||
if(widgetData && widgetData.fieldList)
|
||||
{
|
||||
const newFields: QFieldMetaData[] = [];
|
||||
for (let i = 0; i < widgetData.fieldList.length; i++)
|
||||
{
|
||||
newFields.push(new QFieldMetaData(widgetData.fieldList[i]));
|
||||
}
|
||||
setFields(newFields);
|
||||
|
||||
if(newFields.length > 0)
|
||||
{
|
||||
const recordOfFieldValues = widgetData.recordOfFieldValues ? new QRecord(widgetData.recordOfFieldValues) : null;
|
||||
const {dynamicFormFields: newDynamicFormFields, formValidations: newFormValidations} = DynamicFormUtils.getFormData(newFields);
|
||||
const defaultDisplayValues = new Map<string,string>(); // todo - seems not right?
|
||||
DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, newFields, recordValues.tableName, null, recordOfFieldValues ? recordOfFieldValues.displayValues : defaultDisplayValues);
|
||||
setDynamicFormFields(newDynamicFormFields)
|
||||
setFormValidations(newFormValidations)
|
||||
}
|
||||
|
||||
setLastKnowFormValues({});
|
||||
}
|
||||
else
|
||||
{
|
||||
setFields([])
|
||||
}
|
||||
}, [widgetData]);
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function checkForFormValueChanges(formikProps: FormikContextType<any>)
|
||||
{
|
||||
if(!fields || !fields.length)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
let anyChanged = false;
|
||||
for (let i = 0; i < fields.length; i++)
|
||||
{
|
||||
const name = fields[i].name;
|
||||
if(formikProps.values[name] != lastKnowFormValues[name])
|
||||
{
|
||||
anyChanged = true;
|
||||
lastKnowFormValues[name] = formikProps.values[name];
|
||||
}
|
||||
}
|
||||
|
||||
if(anyChanged)
|
||||
{
|
||||
const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
|
||||
if(mergedDynamicFormValuesIntoFieldName && onSaveCallback)
|
||||
{
|
||||
const onSaveCallbackParam: {[name: string]: any} = {};
|
||||
onSaveCallbackParam[mergedDynamicFormValuesIntoFieldName] = JSON.stringify(lastKnowFormValues);
|
||||
onSaveCallback(onSaveCallbackParam);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getInitialValue(fieldName: string)
|
||||
{
|
||||
for (let i = 0; i < fields?.length; i++)
|
||||
{
|
||||
if(fields[i].name == fieldName && fields[i].defaultValue)
|
||||
{
|
||||
return (fields[i].defaultValue)
|
||||
}
|
||||
}
|
||||
|
||||
return (null);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderEditForm()
|
||||
{
|
||||
const formikProps = useFormikContext();
|
||||
if(!fields || !fields.length)
|
||||
{
|
||||
return (
|
||||
<Box>
|
||||
<Box fontSize="1rem">{widgetData && widgetData.noFieldsMessage}</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const formData: any = {};
|
||||
formData.values = formikProps.values;
|
||||
formData.touched = formikProps.touched;
|
||||
formData.errors = formikProps.errors;
|
||||
formData.formFields = {};
|
||||
|
||||
// todo - merge the formValidations object with formik's - maybe in the useEffect where we build it
|
||||
// setValidations(Yup.object().shape(formValidations));
|
||||
// formikProps.validationSchema.
|
||||
|
||||
for (let key of Object.keys(dynamicFormFields))
|
||||
{
|
||||
const dynamicFormField = dynamicFormFields[key];
|
||||
formData.formFields[dynamicFormField.name] = dynamicFormField;
|
||||
|
||||
const initialValue = getInitialValue(dynamicFormField.name);
|
||||
if(initialValue != null)
|
||||
{
|
||||
console.log(`@dk trying to set an initial value [${dynamicFormField.name}] to [${initialValue}]`);
|
||||
// @ts-ignore some any
|
||||
formikProps.initialValues[dynamicFormField.name] = initialValue;
|
||||
}
|
||||
}
|
||||
|
||||
if(formData.values)
|
||||
{
|
||||
checkForFormValueChanges(formikProps);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<QDynamicForm formData={formData} record={record} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderViewForm()
|
||||
{
|
||||
const fieldNames: string[] = [];
|
||||
const fieldMap: {[name: string]: QFieldMetaData} = {};
|
||||
const fakeRecord = new QRecord(widgetData.recordOfFieldValues ?? {});
|
||||
|
||||
const mergedDynamicFormValuesIntoFieldName = widgetData.mergedDynamicFormValuesIntoFieldName;
|
||||
|
||||
for (let i = 0; i < fields?.length; i++)
|
||||
{
|
||||
const fieldName = fields[i].name;
|
||||
fieldNames.push(fieldName);
|
||||
fieldMap[fieldName] = fields[i];
|
||||
|
||||
if(mergedDynamicFormValuesIntoFieldName && recordValues[mergedDynamicFormValuesIntoFieldName])
|
||||
{
|
||||
fakeRecord.values.set(fieldName, recordValues[mergedDynamicFormValuesIntoFieldName][fieldName]);
|
||||
}
|
||||
}
|
||||
|
||||
const section = renderSectionOfFields(`dynamicFormWidget:${widgetMetaData.name}`, fieldNames, null, false, fakeRecord, fieldMap);
|
||||
|
||||
return (<Box>
|
||||
{section}
|
||||
</Box>);
|
||||
}
|
||||
|
||||
|
||||
////////////
|
||||
// render //
|
||||
////////////
|
||||
return (<Widget widgetMetaData={widgetMetaData}>
|
||||
{
|
||||
<React.Fragment>
|
||||
{effectiveIsEditable ? renderEditForm() : renderViewForm()}
|
||||
</React.Fragment>
|
||||
}
|
||||
</Widget>);
|
||||
}
|
||||
|
||||
@ -39,9 +39,9 @@ import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
|
||||
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 {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 {PivotObjectKey, PivotTableDefinition, PivotTableFunction, pivotTableFunctionLabels, PivotTableGroupBy, PivotTableValue} from "qqq/models/misc/PivotTableDefinitionModels";
|
||||
import QQueryColumns from "qqq/models/query/QQueryColumns";
|
||||
@ -280,7 +280,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
|
||||
}
|
||||
|
||||
modalPivotTableDefinition[rowsOrColumns].push(new PivotTableGroupBy());
|
||||
validateForm();
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
@ -292,7 +292,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
|
||||
{
|
||||
updateUsedGroupByFieldNames(modalPivotTableDefinition);
|
||||
updateUsedValueFieldNames(modalPivotTableDefinition);
|
||||
validateForm();
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
@ -308,7 +308,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
|
||||
}
|
||||
|
||||
modalPivotTableDefinition.values.push(new PivotTableValue());
|
||||
validateForm();
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
@ -319,7 +319,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
|
||||
function removeValue(index: number)
|
||||
{
|
||||
modalPivotTableDefinition.values.splice(index, 1);
|
||||
validateForm();
|
||||
validateForm()
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
@ -503,7 +503,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
|
||||
const labelAdditionalElementsRight: JSX.Element[] = [];
|
||||
if (isEditable)
|
||||
{
|
||||
labelAdditionalElementsRight.push(<HeaderToggleComponent key="pivotTableHeader" disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
|
||||
labelAdditionalElementsRight.push(<HeaderToggleComponent disabled={editPopupDisabled} disabledTooltip={selectTableFirstTooltipTitle ?? selectColumnsFirstTooltipTitle} label="Use Pivot Table?" getValue={() => enabled} onClickCallback={toggleEnabled} />);
|
||||
}
|
||||
|
||||
|
||||
@ -659,7 +659,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
|
||||
// if this isn't a call from the on-submit handler, and we haven't previously attempted a submit, then return w/o setting any alerts //
|
||||
// this is like a version of considering "touched"... //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (!submitting && !attemptedSubmit)
|
||||
if(!submitting && !attemptedSubmit)
|
||||
{
|
||||
return;
|
||||
}
|
||||
@ -703,7 +703,7 @@ export default function PivotTableSetupWidget({isEditable, widgetMetaData, recor
|
||||
// now they've fixed 'em - so go back to a 'clean' state - so if they add more //
|
||||
// boxes, they won't immediately show errors, until a re-submit //
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
if (attemptedSubmit)
|
||||
if(attemptedSubmit)
|
||||
{
|
||||
setAttemptedSubmit(false);
|
||||
}
|
||||
|
||||
@ -185,7 +185,7 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
|
||||
if(data && data.viewAllLink)
|
||||
{
|
||||
labelAdditionalElementsLeft.push(
|
||||
<Typography key={"viewAllLink"} variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
|
||||
<Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative">
|
||||
<Link to={data.viewAllLink}>View All</Link>
|
||||
</Typography>
|
||||
)
|
||||
@ -225,8 +225,8 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
|
||||
if(widgetMetaData?.showExportButton)
|
||||
{
|
||||
labelAdditionalElementsLeft.push(
|
||||
<Typography key={"exportButton"} variant="body2" px={0} display="inline" position="relative">
|
||||
<Tooltip title={tooltipTitle}><span><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></span></Tooltip>
|
||||
<Typography key={1} variant="body2" px={0} display="inline" position="relative">
|
||||
<Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
@ -305,50 +305,48 @@ function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRo
|
||||
labelBoxAdditionalSx={{position: "relative", top: "-0.375rem"}}
|
||||
>
|
||||
<Box mx={-2} mb={-3}>
|
||||
<Box className="recordGridWidget">
|
||||
<DataGridPro
|
||||
autoHeight
|
||||
sx={{
|
||||
borderBottom: "none",
|
||||
borderLeft: "none",
|
||||
borderRight: "none"
|
||||
}}
|
||||
rows={rows}
|
||||
disableSelectionOnClick
|
||||
columns={columns}
|
||||
rowBuffer={10}
|
||||
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
|
||||
onRowClick={handleRowClick}
|
||||
getRowId={(row) => row.__rowIndex}
|
||||
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
|
||||
components={{
|
||||
Toolbar: CustomToolbar
|
||||
}}
|
||||
// pinnedColumns={pinnedColumns}
|
||||
// onPinnedColumnsChange={handlePinnedColumnsChange}
|
||||
// pagination
|
||||
// paginationMode="server"
|
||||
// rowsPerPageOptions={[20]}
|
||||
// sortingMode="server"
|
||||
// filterMode="server"
|
||||
// page={pageNumber}
|
||||
// checkboxSelection
|
||||
rowCount={data && data.totalRows}
|
||||
// onPageSizeChange={handleRowsPerPageChange}
|
||||
// onStateChange={handleStateChange}
|
||||
// density={density}
|
||||
// loading={loading}
|
||||
// filterModel={filterModel}
|
||||
// onFilterModelChange={handleFilterChange}
|
||||
// columnVisibilityModel={columnVisibilityModel}
|
||||
// onColumnVisibilityModelChange={handleColumnVisibilityChange}
|
||||
// onColumnOrderChange={handleColumnOrderChange}
|
||||
// onSelectionModelChange={selectionChanged}
|
||||
// onSortModelChange={handleSortChange}
|
||||
// sortingOrder={[ "asc", "desc" ]}
|
||||
// sortModel={columnSortModel}
|
||||
/>
|
||||
</Box>
|
||||
<DataGridPro
|
||||
autoHeight
|
||||
sx={{
|
||||
borderBottom: "none",
|
||||
borderLeft: "none",
|
||||
borderRight: "none"
|
||||
}}
|
||||
rows={rows}
|
||||
disableSelectionOnClick
|
||||
columns={columns}
|
||||
rowBuffer={10}
|
||||
getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd")}
|
||||
onRowClick={handleRowClick}
|
||||
getRowId={(row) => row.__rowIndex}
|
||||
// getRowHeight={() => "auto"} // maybe nice? wraps values in cells...
|
||||
components={{
|
||||
Toolbar: CustomToolbar
|
||||
}}
|
||||
// pinnedColumns={pinnedColumns}
|
||||
// onPinnedColumnsChange={handlePinnedColumnsChange}
|
||||
// pagination
|
||||
// paginationMode="server"
|
||||
// rowsPerPageOptions={[20]}
|
||||
// sortingMode="server"
|
||||
// filterMode="server"
|
||||
// page={pageNumber}
|
||||
// checkboxSelection
|
||||
rowCount={data && data.totalRows}
|
||||
// onPageSizeChange={handleRowsPerPageChange}
|
||||
// onStateChange={handleStateChange}
|
||||
// density={density}
|
||||
// loading={loading}
|
||||
// filterModel={filterModel}
|
||||
// onFilterModelChange={handleFilterChange}
|
||||
// columnVisibilityModel={columnVisibilityModel}
|
||||
// onColumnVisibilityModelChange={handleColumnVisibilityChange}
|
||||
// onColumnOrderChange={handleColumnOrderChange}
|
||||
// onSelectionModelChange={selectionChanged}
|
||||
// onSortModelChange={handleSortChange}
|
||||
// sortingOrder={[ "asc", "desc" ]}
|
||||
// sortModel={columnSortModel}
|
||||
/>
|
||||
</Box>
|
||||
</Widget>
|
||||
);
|
||||
|
||||
@ -22,9 +22,6 @@
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
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 {Alert, Collapse} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
@ -45,15 +42,15 @@ import Client from "qqq/utils/qqq/Client";
|
||||
import FilterUtils from "qqq/utils/qqq/FilterUtils";
|
||||
import React, {useContext, useEffect, useRef, useState} from "react";
|
||||
|
||||
interface FilterAndColumnsSetupWidgetProps
|
||||
interface ReportSetupWidgetProps
|
||||
{
|
||||
isEditable: boolean;
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
recordValues: { [name: string]: any };
|
||||
onSaveCallback?: (values: { [name: string]: any }) => void;
|
||||
recordValues: {[name: string]: any};
|
||||
onSaveCallback?: (values: {[name: string]: any}) => void;
|
||||
}
|
||||
|
||||
FilterAndColumnsSetupWidget.defaultProps = {
|
||||
ReportSetupWidget.defaultProps = {
|
||||
onSaveCallback: null
|
||||
};
|
||||
|
||||
@ -83,10 +80,9 @@ const qController = Client.getInstance();
|
||||
/*******************************************************************************
|
||||
** Component for editing the main setup of a report - that is: filter & columns
|
||||
*******************************************************************************/
|
||||
export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: FilterAndColumnsSetupWidgetProps): JSX.Element
|
||||
export default function ReportSetupWidget({isEditable, widgetMetaData, recordValues, onSaveCallback}: ReportSetupWidgetProps): JSX.Element
|
||||
{
|
||||
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 [alertContent, setAlertContent] = useState(null as string);
|
||||
@ -105,37 +101,16 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
/////////////////////////////
|
||||
// load values from record //
|
||||
/////////////////////////////
|
||||
let columns: QQueryColumns = null;
|
||||
let usingDefaultEmptyFilter = false;
|
||||
let queryFilter = recordValues["queryFilterJson"] && JSON.parse(recordValues["queryFilterJson"]) as QQueryFilter;
|
||||
if (!queryFilter)
|
||||
let usingDefaultEmptyFilter = false;
|
||||
if(!queryFilter)
|
||||
{
|
||||
queryFilter = new QQueryFilter();
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 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;
|
||||
}
|
||||
usingDefaultEmptyFilter = true;
|
||||
}
|
||||
|
||||
if (recordValues["columnsJson"])
|
||||
let columns: QQueryColumns = null;
|
||||
if(recordValues["columnsJson"])
|
||||
{
|
||||
columns = QQueryColumns.buildFromJSON(recordValues["columnsJson"]);
|
||||
}
|
||||
@ -145,42 +120,19 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 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)
|
||||
if (recordValues["tableName"] && (tableMetaData == null || tableMetaData.name != recordValues["tableName"]))
|
||||
{
|
||||
(async () =>
|
||||
{
|
||||
const tableMetaData = await qController.loadTableMetaData(tableName);
|
||||
const tableMetaData = await qController.loadTableMetaData(recordValues["tableName"])
|
||||
setTableMetaData(tableMetaData);
|
||||
|
||||
const queryFilterForFrontend = Object.assign({}, queryFilter);
|
||||
await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend);
|
||||
setFrontendQueryFilter(queryFilterForFrontend);
|
||||
await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilterForFrontend)
|
||||
setFrontendQueryFilter(queryFilterForFrontend)
|
||||
})();
|
||||
}
|
||||
}, [JSON.stringify(recordValues)]);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getDefaultFilterFieldNames(widgetMetaData: QWidgetMetaData)
|
||||
{
|
||||
if (widgetMetaData?.defaultValues?.has("filterDefaultFieldNames"))
|
||||
{
|
||||
return (widgetMetaData.defaultValues.get("filterDefaultFieldNames").split(","));
|
||||
}
|
||||
|
||||
return ([]);
|
||||
}
|
||||
}, [recordValues]);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -188,27 +140,8 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
*******************************************************************************/
|
||||
function openEditor()
|
||||
{
|
||||
let missingRequiredFields = [] as string[];
|
||||
getDefaultFilterFieldNames(widgetMetaData)?.forEach((fieldName: string) =>
|
||||
if(recordValues["tableName"])
|
||||
{
|
||||
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"])
|
||||
{
|
||||
setAlertContent(null);
|
||||
setModalOpen(true);
|
||||
}
|
||||
}
|
||||
@ -219,7 +152,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
*******************************************************************************/
|
||||
function saveClicked()
|
||||
{
|
||||
if (!onSaveCallback)
|
||||
if(!onSaveCallback)
|
||||
{
|
||||
console.log("onSaveCallback was not defined");
|
||||
return;
|
||||
@ -248,7 +181,7 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
*******************************************************************************/
|
||||
function closeEditor(event?: {}, reason?: "backdropClick" | "escapeKeyDown")
|
||||
{
|
||||
if (reason == "backdropClick" || reason == "escapeKeyDown")
|
||||
if(reason == "backdropClick" || reason == "escapeKeyDown")
|
||||
{
|
||||
return;
|
||||
}
|
||||
@ -262,9 +195,9 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
*******************************************************************************/
|
||||
function renderColumn(column: Column): JSX.Element
|
||||
{
|
||||
const [field, table] = FilterUtils.getField(tableMetaData, column.name);
|
||||
const [field, table] = FilterUtils.getField(tableMetaData, column.name)
|
||||
|
||||
if (!column || !column.isVisible || column.name == "__check__" || !field)
|
||||
if(!column || !column.isVisible || column.name == "__check__" || !field)
|
||||
{
|
||||
return (<React.Fragment />);
|
||||
}
|
||||
@ -282,9 +215,9 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
*******************************************************************************/
|
||||
function mayShowQueryPreview(): boolean
|
||||
{
|
||||
if (tableMetaData)
|
||||
if(tableMetaData)
|
||||
{
|
||||
if (frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
|
||||
if(frontendQueryFilter?.criteria?.length > 0 || frontendQueryFilter?.subFilters?.length > 0)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
@ -298,11 +231,11 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
*******************************************************************************/
|
||||
function mayShowColumnsPreview(): boolean
|
||||
{
|
||||
if (tableMetaData)
|
||||
if(tableMetaData)
|
||||
{
|
||||
for (let i = 0; i < columns?.columns?.length; i++)
|
||||
for(let i = 0; i<columns?.columns?.length; i++)
|
||||
{
|
||||
if (columns.columns[i].isVisible && columns.columns[i].name != "__check__")
|
||||
if(columns.columns[i].isVisible && columns.columns[i].name != "__check__")
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
@ -336,17 +269,10 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
// add link to widget header for opening modal //
|
||||
/////////////////////////////////////////////////
|
||||
const selectTableFirstTooltipTitle = tableMetaData ? null : "You must select a table before you can set up your report filters and columns";
|
||||
const labelAdditionalElementsRight: JSX.Element[] = [];
|
||||
if (isEditable)
|
||||
const labelAdditionalElementsRight: JSX.Element[] = []
|
||||
if(isEditable)
|
||||
{
|
||||
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} />);
|
||||
}
|
||||
labelAdditionalElementsRight.push(<HeaderLinkButtonComponent label="Edit Filters and Columns" onClickCallback={openEditor} disabled={tableMetaData == null} disabledTooltip={selectTableFirstTooltipTitle} />)
|
||||
}
|
||||
|
||||
|
||||
@ -380,36 +306,34 @@ export default function FilterAndColumnsSetupWidget({isEditable, widgetMetaData,
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
!isEditable && <Box color={colors.gray.main}>No filters are configured.</Box>
|
||||
!isEditable && <Box color={colors.gray.main}>Your report has no filters.</Box>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
{!hideColumns && (
|
||||
<Box pt="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() &&
|
||||
<Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
|
||||
{
|
||||
isEditable &&
|
||||
<Tooltip title={selectTableFirstTooltipTitle}>
|
||||
<span><Button disabled={!recordValues["tableName"]} sx={unborderedButtonSX} onClick={openEditor}>+ Add Columns</Button></span>
|
||||
</Tooltip>
|
||||
}
|
||||
{
|
||||
!isEditable && <Box color={colors.gray.main}>No columns are selected.</Box>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
<Box pt="1rem">
|
||||
<h5>Columns</h5>
|
||||
<Box display="flex" flexWrap="wrap" fontSize="1rem">
|
||||
{
|
||||
mayShowColumnsPreview() &&
|
||||
columns.columns.map((column, i) => <React.Fragment key={i}>{renderColumn(column)}</React.Fragment>)
|
||||
}
|
||||
{
|
||||
!mayShowColumnsPreview() &&
|
||||
<Box width="100%" sx={{fontSize: "1rem", background: "#FFFFFF"}} minHeight={"2.375rem"} p={"0.5rem"} pb={"0.125rem"}>
|
||||
{
|
||||
isEditable &&
|
||||
<Tooltip title={selectTableFirstTooltipTitle}>
|
||||
<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>
|
||||
}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
{
|
||||
modalOpen &&
|
||||
<Modal open={modalOpen} onClose={(event, reason) => closeEditor(event, reason)}>
|
||||
@ -30,6 +30,8 @@ import TableContainer from "@mui/material/TableContainer";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import parse from "html-react-parser";
|
||||
import React, {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import MDInput from "qqq/components/legacy/MDInput";
|
||||
import MDPagination from "qqq/components/legacy/MDPagination";
|
||||
@ -41,8 +43,6 @@ import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
|
||||
import ImageCell from "qqq/components/widgets/tables/cells/ImageCell";
|
||||
import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
|
||||
import WidgetBlock from "qqq/components/widgets/WidgetBlock";
|
||||
import React, {useEffect, useMemo, useState} from "react";
|
||||
import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
|
||||
|
||||
interface Props
|
||||
{
|
||||
@ -106,17 +106,17 @@ function DataTable({
|
||||
entries = entriesPerPageOptions ? entriesPerPageOptions : ["10", "25", "50", "100"];
|
||||
|
||||
let widths = [];
|
||||
for (let i = 0; i < table.columns.length; i++)
|
||||
for(let i = 0; i<table.columns.length; i++)
|
||||
{
|
||||
const column = table.columns[i];
|
||||
if (column.type !== "hidden")
|
||||
if(column.type !== "hidden")
|
||||
{
|
||||
widths.push(table.columns[i].width ?? "1fr");
|
||||
}
|
||||
}
|
||||
|
||||
let showExpandColumn = false;
|
||||
if (table.rows)
|
||||
if(table.rows)
|
||||
{
|
||||
for (let i = 0; i < table.rows.length; i++)
|
||||
{
|
||||
@ -129,7 +129,7 @@ function DataTable({
|
||||
}
|
||||
|
||||
const columnsToMemo = [...table.columns];
|
||||
if (showExpandColumn)
|
||||
if(showExpandColumn)
|
||||
{
|
||||
widths.push("60px");
|
||||
columnsToMemo.push(
|
||||
@ -173,11 +173,11 @@ function DataTable({
|
||||
);
|
||||
}
|
||||
|
||||
if (table.columnHeaderTooltips)
|
||||
if(table.columnHeaderTooltips)
|
||||
{
|
||||
for (let column of columnsToMemo)
|
||||
{
|
||||
if (table.columnHeaderTooltips[column.accessor])
|
||||
if(table.columnHeaderTooltips[column.accessor])
|
||||
{
|
||||
column.tooltip = table.columnHeaderTooltips[column.accessor];
|
||||
}
|
||||
@ -297,7 +297,7 @@ function DataTable({
|
||||
}
|
||||
|
||||
let visibleFooterRows = 1;
|
||||
if (expanded && expanded[`${table.rows.length - 1}`])
|
||||
if(expanded && expanded[`${table.rows.length-1}`])
|
||||
{
|
||||
//////////////////////////////////////////////////
|
||||
// todo - should count how many are expanded... //
|
||||
@ -308,7 +308,7 @@ function DataTable({
|
||||
function getTable(includeHead: boolean, rows: any, isFooter: boolean)
|
||||
{
|
||||
let boxStyle = {};
|
||||
if (fixedStickyLastRow)
|
||||
if(fixedStickyLastRow)
|
||||
{
|
||||
boxStyle = isFooter
|
||||
? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
|
||||
@ -316,7 +316,7 @@ function DataTable({
|
||||
}
|
||||
|
||||
let innerBoxStyle = {};
|
||||
if (fixedStickyLastRow && isFooter)
|
||||
if(fixedStickyLastRow && isFooter)
|
||||
{
|
||||
innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
|
||||
}
|
||||
@ -327,7 +327,7 @@ function DataTable({
|
||||
includeHead && (
|
||||
<Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
|
||||
{headerGroups.map((headerGroup: any, i: number) => (
|
||||
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", alignItems: "flex-end", gridTemplateColumns: gridTemplateColumns}}>
|
||||
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
|
||||
{headerGroup.headers.map((column: any) => (
|
||||
column.type !== "hidden" && (
|
||||
<DataTableHeadCell
|
||||
@ -356,10 +356,10 @@ function DataTable({
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
// don't do an end-border on nested rows - unless they're the last one in a set //
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
if (row.depth > 0)
|
||||
if(row.depth > 0)
|
||||
{
|
||||
overrideNoEndBorder = true;
|
||||
if (key + 1 < rows.length && rows[key + 1].depth == 0)
|
||||
if(key + 1 < rows.length && rows[key + 1].depth == 0)
|
||||
{
|
||||
overrideNoEndBorder = false;
|
||||
}
|
||||
@ -368,17 +368,17 @@ function DataTable({
|
||||
///////////////////////////////////////
|
||||
// don't do end-border on the footer //
|
||||
///////////////////////////////////////
|
||||
if (isFooter)
|
||||
if(isFooter)
|
||||
{
|
||||
overrideNoEndBorder = true;
|
||||
}
|
||||
|
||||
let background = "initial";
|
||||
if (isFooter)
|
||||
if(isFooter)
|
||||
{
|
||||
background = "#EEEEEE";
|
||||
}
|
||||
else if (row.depth > 0 || row.isExpanded)
|
||||
else if(row.depth > 0 || row.isExpanded)
|
||||
{
|
||||
background = "#FAFAFA";
|
||||
}
|
||||
@ -453,7 +453,7 @@ function DataTable({
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box></Box>;
|
||||
</Box></Box>
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -28,13 +28,13 @@ import TableBody from "@mui/material/TableBody";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import parse from "html-react-parser";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
|
||||
import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
|
||||
import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
|
||||
import DataTable from "qqq/components/widgets/tables/DataTable";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
|
||||
//////////////////////////////////////
|
||||
@ -43,7 +43,7 @@ import React, {useEffect, useState} from "react";
|
||||
export interface TableDataInput
|
||||
{
|
||||
columns: { [key: string]: any }[];
|
||||
columnHeaderTooltips?: { [columnName: string]: string | JSX.Element };
|
||||
columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
|
||||
rows: { [key: string]: any }[];
|
||||
}
|
||||
|
||||
@ -63,7 +63,6 @@ interface Props
|
||||
}
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
|
||||
{
|
||||
const [qInstance, setQInstance] = useState(null as QInstance);
|
||||
@ -109,7 +108,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
|
||||
<TableContainer sx={{boxShadow: "none"}}>
|
||||
<Table>
|
||||
<Box component="thead">
|
||||
<TableRow sx={{alignItems: "flex-end"}} key="header">
|
||||
<TableRow key="header">
|
||||
{Array(8).fill(0).map((_, i) =>
|
||||
<DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
|
||||
<Skeleton width="100%" />
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
// @ts-ignore
|
||||
import {htmlToText} from "html-to-text";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import QContext from "QContext";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import TableCard from "qqq/components/widgets/tables/TableCard";
|
||||
@ -30,7 +31,6 @@ import Widget, {WidgetData} from "qqq/components/widgets/Widget";
|
||||
import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
|
||||
import HtmlUtils from "qqq/utils/HtmlUtils";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
|
||||
interface Props
|
||||
{
|
||||
@ -40,7 +40,8 @@ interface Props
|
||||
isChild?: boolean;
|
||||
}
|
||||
|
||||
TableWidget.defaultProps = {};
|
||||
TableWidget.defaultProps = {
|
||||
};
|
||||
|
||||
function TableWidget(props: Props): JSX.Element
|
||||
{
|
||||
@ -85,7 +86,7 @@ function TableWidget(props: Props): JSX.Element
|
||||
|
||||
const cell = rows[i][columns[j].accessor];
|
||||
let text = cell;
|
||||
if (columns[j].type != "default")
|
||||
if(columns[j].type != "default")
|
||||
{
|
||||
text = htmlToText(cell,
|
||||
{
|
||||
@ -104,7 +105,7 @@ function TableWidget(props: Props): JSX.Element
|
||||
setCsv(csv);
|
||||
|
||||
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
|
||||
setFileName(fileName);
|
||||
setFileName(fileName)
|
||||
|
||||
console.log(`useEffect, setting fileName ${fileName}`);
|
||||
}
|
||||
@ -113,28 +114,24 @@ function TableWidget(props: Props): JSX.Element
|
||||
|
||||
const onExportClick = () =>
|
||||
{
|
||||
if (props.widgetData?.csvData)
|
||||
if(props.widgetData?.csvData)
|
||||
{
|
||||
const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
|
||||
const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
|
||||
HtmlUtils.download(fileName, csv);
|
||||
}
|
||||
else if (csv)
|
||||
else if(csv)
|
||||
{
|
||||
HtmlUtils.download(fileName, csv);
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("There is no data available to export.");
|
||||
alert("There is no data available to export.")
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const labelAdditionalElementsLeft: JSX.Element[] = [];
|
||||
if (props.widgetData?.linkText && props.widgetData?.linkURL)
|
||||
{
|
||||
labelAdditionalElementsLeft.push(WidgetUtils.generateLabelLink(props.widgetData?.linkText, props.widgetData?.linkURL));
|
||||
}
|
||||
if (props.widgetMetaData?.showExportButton)
|
||||
if(props.widgetMetaData?.showExportButton)
|
||||
{
|
||||
labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
|
||||
}
|
||||
@ -142,14 +139,14 @@ function TableWidget(props: Props): JSX.Element
|
||||
//////////////////////////////////////////////////////
|
||||
// look for column-header tooltips from helpContent //
|
||||
//////////////////////////////////////////////////////
|
||||
const columnHeaderTooltips: { [columnName: string]: JSX.Element } = {};
|
||||
const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
|
||||
for (let column of props.widgetData?.columns ?? [])
|
||||
{
|
||||
const helpRoles = ["ALL_SCREENS"];
|
||||
const helpRoles = ["ALL_SCREENS"]
|
||||
const slotName = `columnHeader=${column.accessor}`;
|
||||
const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
|
||||
|
||||
if (showHelp)
|
||||
if(showHelp)
|
||||
{
|
||||
const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
|
||||
columnHeaderTooltips[column.accessor] = formattedHelpContent;
|
||||
|
||||
@ -29,7 +29,6 @@ export interface FieldRule
|
||||
sourceField: string;
|
||||
action: FieldRuleAction;
|
||||
targetField: string;
|
||||
targetWidget: string;
|
||||
}
|
||||
|
||||
|
||||
@ -47,6 +46,5 @@ export enum FieldRuleTrigger
|
||||
*******************************************************************************/
|
||||
export enum FieldRuleAction
|
||||
{
|
||||
CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD",
|
||||
RELOAD_WIDGET = "RELOAD_WIDGET"
|
||||
CLEAR_TARGET_FIELD = "CLEAR_TARGET_FIELD"
|
||||
}
|
||||
|
||||
@ -35,7 +35,8 @@ import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
|
||||
import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobStarted";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
|
||||
import {Alert, Box, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
|
||||
import {Alert, Button, CircularProgress, Icon, TablePagination} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Step from "@mui/material/Step";
|
||||
@ -47,19 +48,16 @@ import FormData from "form-data";
|
||||
import {Form, Formik} from "formik";
|
||||
import parse from "html-react-parser";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton, QSubmitButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import QDynamicForm from "qqq/components/forms/DynamicForm";
|
||||
import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
||||
import MDButton from "qqq/components/legacy/MDButton";
|
||||
import MDProgress from "qqq/components/legacy/MDProgress";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
||||
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
|
||||
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
|
||||
import ValidationReview from "qqq/components/processes/ValidationReview";
|
||||
import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
|
||||
import BaseLayout from "qqq/layouts/BaseLayout";
|
||||
import {TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT} from "qqq/pages/records/query/RecordQuery";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
@ -88,14 +86,6 @@ const INITIAL_RETRY_MILLIS = 1_500;
|
||||
const RETRY_MAX_MILLIS = 12_000;
|
||||
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
|
||||
{
|
||||
const processNameParam = useParams().processName;
|
||||
@ -134,9 +124,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
const [showErrorDetail, setShowErrorDetail] = useState(false);
|
||||
const [showFullHelpText, setShowFullHelpText] = useState(false);
|
||||
|
||||
const [renderedWidgets, setRenderedWidgets] = useState({} as { [step: string]: { [widgetName: string]: any } });
|
||||
|
||||
const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
|
||||
const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// for setting the processError state - call this function, which will also set the isUserFacingError state //
|
||||
@ -238,15 +226,15 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
setShowFullHelpText(!showFullHelpText);
|
||||
};
|
||||
|
||||
const download = (processValues: { [key: string]: string }) =>
|
||||
const download = (processValues: {[key: string]: string}) =>
|
||||
{
|
||||
let url;
|
||||
let fileName = processValues.downloadFileName;
|
||||
if (processValues.serverFilePath)
|
||||
if(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)}`;
|
||||
}
|
||||
@ -285,42 +273,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderWidget(widgetName: string)
|
||||
{
|
||||
if (!renderedWidgets[activeStep.name])
|
||||
{
|
||||
renderedWidgets[activeStep.name] = {};
|
||||
setRenderedWidgets(renderedWidgets);
|
||||
}
|
||||
|
||||
if (renderedWidgets[activeStep.name][widgetName])
|
||||
{
|
||||
return renderedWidgets[activeStep.name][widgetName];
|
||||
}
|
||||
|
||||
const widgetMetaData = qInstance.widgets.get(widgetName);
|
||||
if (!widgetMetaData)
|
||||
{
|
||||
return (<Alert color="error">Unrecognized widget name: {widgetName}</Alert>);
|
||||
}
|
||||
|
||||
const queryStringParts: string[] = [];
|
||||
for (let name in processValues)
|
||||
{
|
||||
queryStringParts.push(`${name}=${encodeURIComponent(processValues[name])}`);
|
||||
}
|
||||
|
||||
const renderedWidget = (<Box m={-2}>
|
||||
<DashboardWidgets widgetMetaDataList={[widgetMetaData]} omitWrappingGridContainer={true} childUrlParams={queryStringParts.join("&")} />
|
||||
</Box>);
|
||||
renderedWidgets[activeStep.name][widgetName] = renderedWidget;
|
||||
return renderedWidget;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
// generate the main form body content for a step //
|
||||
////////////////////////////////////////////////////
|
||||
@ -367,8 +319,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
</MDTypography>
|
||||
<Box component="div" py={3}>
|
||||
<Grid container justifyContent="flex-end" spacing={3}>
|
||||
{isModal ? <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} label="Close" />
|
||||
: !isWidget && <QCancelButton onClickHandler={() => handleCancelClicked(true)} disabled={false} />
|
||||
{isModal ? <QCancelButton onClickHandler={handleCancelClicked} disabled={false} label="Close" />
|
||||
: !isWidget && <QCancelButton onClickHandler={handleCancelClicked} disabled={false} />
|
||||
}
|
||||
</Grid>
|
||||
</Box>
|
||||
@ -455,13 +407,6 @@ 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 (
|
||||
<>
|
||||
{
|
||||
@ -476,13 +421,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
</MDTypography>
|
||||
}
|
||||
|
||||
{
|
||||
showHelp &&
|
||||
<Box fontSize={"0.875rem"} color={colors.blueGray.main} pb={2}>
|
||||
{formattedHelpContent}
|
||||
</Box>
|
||||
}
|
||||
|
||||
{
|
||||
//////////////////////////////////////////////////
|
||||
// render all of the components for this screen //
|
||||
@ -495,23 +433,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
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 (
|
||||
<div key={index}>
|
||||
{
|
||||
@ -607,22 +528,9 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.EDIT_FORM &&
|
||||
<>
|
||||
{
|
||||
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.EDIT_FORM && (
|
||||
<QDynamicForm formData={formData} helpRoles={helpRoles} helpContentKeyPrefix={`process:${processName};`} />
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.VIEW_FORM && step.viewFields && (
|
||||
@ -745,12 +653,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
{
|
||||
component.type === QComponentType.WIDGET && (
|
||||
component.values?.widgetName &&
|
||||
renderWidget(component.values?.widgetName)
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}))
|
||||
@ -1013,7 +915,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);
|
||||
setValidationScheme(Yup.object().shape(newFormValidations));
|
||||
@ -1079,30 +981,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
setProcessValues(qJobComplete.values);
|
||||
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)
|
||||
{
|
||||
setNeedRecords(true);
|
||||
@ -1401,20 +1279,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
const handleCancelClicked = (isClose: boolean) =>
|
||||
const handleCancelClicked = () =>
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////
|
||||
// unless this is a 'close', then tell backend we're cancelling //
|
||||
//////////////////////////////////////////////////////////////////
|
||||
if (!isClose)
|
||||
{
|
||||
Client.getInstance().processCancel(processName, processUUID);
|
||||
}
|
||||
|
||||
if (isModal && closeModalHandler)
|
||||
{
|
||||
closeModalHandler(null, "cancelClicked");
|
||||
@ -1427,7 +1293,6 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
navigate(path, {replace: true});
|
||||
};
|
||||
|
||||
|
||||
const mainCardStyles: any = {};
|
||||
const formStyles: any = {};
|
||||
mainCardStyles.minHeight = `calc(100vh - ${isModal ? 150 : 400}px)`;
|
||||
@ -1475,98 +1340,89 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
||||
>
|
||||
{({
|
||||
values, errors, touched, isSubmitting, setFieldValue,
|
||||
}) =>
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////
|
||||
// once we're in the formik form, use its setFieldValue function //
|
||||
// over top of the default one we created globally //
|
||||
///////////////////////////////////////////////////////////////////
|
||||
formikSetFieldValueFunction = setFieldValue;
|
||||
}) => (
|
||||
<Form style={formStyles} id={formId} autoComplete="off">
|
||||
<Card sx={mainCardStyles}>
|
||||
{
|
||||
!isWidget && (
|
||||
<Box mx={2} mt={-3}>
|
||||
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
||||
{steps.map((step) => (
|
||||
<Step key={step.name}>
|
||||
<StepLabel>{step.label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Form style={formStyles} id={formId} autoComplete="off">
|
||||
<Card sx={mainCardStyles}>
|
||||
{
|
||||
!isWidget && (
|
||||
<Box mx={2} mt={-3} sx={{"& .MuiStepper-horizontal": {minHeight: "5rem"}}}>
|
||||
<Stepper activeStep={activeStepIndex} alternativeLabel>
|
||||
{steps.map((step) => (
|
||||
<Step key={step.name}>
|
||||
<StepLabel>{step.label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
<Box p={3}>
|
||||
<Box pb={isWidget ? 6 : "initial"}>
|
||||
{/***************************************************************************
|
||||
** step content - e.g., the appropriate form or other screen for the step **
|
||||
***************************************************************************/}
|
||||
{getDynamicStepContent(
|
||||
activeStepIndex,
|
||||
activeStep,
|
||||
{
|
||||
values,
|
||||
touched,
|
||||
formFields,
|
||||
errors,
|
||||
},
|
||||
processError,
|
||||
processValues,
|
||||
recordConfig,
|
||||
setFieldValue,
|
||||
<Box p={3}>
|
||||
<Box pb={isWidget ? 6 : "initial"}>
|
||||
{/***************************************************************************
|
||||
** step content - e.g., the appropriate form or other screen for the step **
|
||||
***************************************************************************/}
|
||||
{getDynamicStepContent(
|
||||
activeStepIndex,
|
||||
activeStep,
|
||||
{
|
||||
values,
|
||||
touched,
|
||||
formFields,
|
||||
errors,
|
||||
},
|
||||
processError,
|
||||
processValues,
|
||||
recordConfig,
|
||||
setFieldValue,
|
||||
)}
|
||||
{/********************************
|
||||
** 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}
|
||||
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>
|
||||
</Card>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Box>
|
||||
</Card>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ const qController = Client.getInstance();
|
||||
*******************************************************************************/
|
||||
const getLoadingScreen = (isModal: boolean) =>
|
||||
{
|
||||
if (isModal)
|
||||
if(isModal)
|
||||
{
|
||||
return (<Box> </Box>);
|
||||
}
|
||||
@ -151,7 +151,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
*******************************************************************************/
|
||||
function localStorageSet(key: string, value: string)
|
||||
{
|
||||
if (mayWriteLocalStorage)
|
||||
if(mayWriteLocalStorage)
|
||||
{
|
||||
localStorage.setItem(key, value);
|
||||
}
|
||||
@ -163,7 +163,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
*******************************************************************************/
|
||||
function localStorageRemove(key: string)
|
||||
{
|
||||
if (mayWriteLocalStorage)
|
||||
if(mayWriteLocalStorage)
|
||||
{
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
@ -176,7 +176,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
{
|
||||
return view;
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -256,7 +256,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
defaultView.mode = defaultMode;
|
||||
}
|
||||
|
||||
if (firstRender)
|
||||
if(firstRender)
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////////
|
||||
// allow a caller to send in an initial filter & set of columns. //
|
||||
@ -408,10 +408,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
//////////////////////////////////////////////////////////////////
|
||||
// we use our own header - so clear out the context page header //
|
||||
//////////////////////////////////////////////////////////////////
|
||||
if (!isModal)
|
||||
{
|
||||
setPageHeader(null);
|
||||
}
|
||||
setPageHeader(null);
|
||||
|
||||
//////////////////////
|
||||
// ole' faithful... //
|
||||
@ -486,6 +483,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
};
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@ -710,7 +708,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
{
|
||||
if (localStorage.getItem(currentSavedViewLocalStorageKey))
|
||||
{
|
||||
if (usage == "queryScreen")
|
||||
if(usage == "queryScreen")
|
||||
{
|
||||
currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
|
||||
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
|
||||
@ -749,13 +747,13 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
const viewForLocalStorage: RecordQueryView = JSON.parse(viewAsJSON);
|
||||
if (viewForLocalStorage?.queryFilter?.criteria?.length > 0)
|
||||
{
|
||||
FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter);
|
||||
FilterUtils.stripAwayIncompleteCriteria(viewForLocalStorage.queryFilter)
|
||||
}
|
||||
localStorageSet(viewLocalStorageKey, JSON.stringify(viewForLocalStorage));
|
||||
}
|
||||
catch (e)
|
||||
catch(e)
|
||||
{
|
||||
console.log("Error storing view in local storage: " + e);
|
||||
console.log("Error storing view in local storage: " + e)
|
||||
}
|
||||
};
|
||||
|
||||
@ -867,7 +865,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
for (let i = 0; i < queryFilter?.orderBys?.length; i++)
|
||||
{
|
||||
const fieldName = queryFilter.orderBys[i].fieldName;
|
||||
if (fieldName != null && fieldName.indexOf(".") > -1)
|
||||
if (fieldName.indexOf(".") > -1)
|
||||
{
|
||||
const joinTableName = fieldName.replaceAll(/\..*/g, "");
|
||||
if (!vjtToUse.has(joinTableName))
|
||||
@ -900,26 +898,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
return;
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if any values in the query are of type "FilterVariableExpression", display an error showing //
|
||||
// that a backend query cannot be made because of missing values for that expression //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
setWarningAlert(null);
|
||||
for (var i = 0; i < queryFilter?.criteria?.length; i++)
|
||||
{
|
||||
for (var j = 0; j < queryFilter?.criteria[i]?.values?.length; j++)
|
||||
{
|
||||
const value = queryFilter.criteria[i].values[j];
|
||||
if (value?.type == "FilterVariableExpression")
|
||||
{
|
||||
setWarningAlert("Cannot perform query because of a missing value for a variable.");
|
||||
setLoading(false);
|
||||
setRows([]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
recordAnalytics({category: "tableEvents", action: "query", label: tableMetaData.label});
|
||||
|
||||
console.log(`In updateTable for ${reason} ${JSON.stringify(queryFilter)}`);
|
||||
@ -958,7 +936,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
console.log(`Issuing query: ${thisQueryId}`);
|
||||
if (tableMetaData.capabilities.has(Capability.TABLE_COUNT))
|
||||
{
|
||||
if (clearOutCount)
|
||||
if(clearOutCount)
|
||||
{
|
||||
setTotalRecords(null);
|
||||
setDistinctRecords(null);
|
||||
@ -1456,6 +1434,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
return (selectedIds.length);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** get a query-string to put on the url to indicate what records are going into
|
||||
** a process.
|
||||
@ -2545,7 +2524,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
{
|
||||
const currentSavedViewId = Number.parseInt(localStorage.getItem(currentSavedViewLocalStorageKey));
|
||||
console.log(`returning to previously active saved view ${currentSavedViewId}`);
|
||||
if (usage == "queryScreen")
|
||||
if(usage == "queryScreen")
|
||||
{
|
||||
navigate(`${metaData.getTablePathByName(tableName)}/savedView/${currentSavedViewId}`);
|
||||
}
|
||||
@ -2788,7 +2767,7 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
spaceAboveGrid += 60;
|
||||
}
|
||||
|
||||
if (isModal)
|
||||
if(isModal)
|
||||
{
|
||||
spaceAboveGrid += 130;
|
||||
}
|
||||
@ -2908,7 +2887,6 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
filterPanel:
|
||||
{
|
||||
tableMetaData: tableMetaData,
|
||||
queryScreenUsage: usage,
|
||||
metaData: metaData,
|
||||
queryFilter: queryFilter,
|
||||
updateFilter: doSetQueryFilter,
|
||||
@ -2995,15 +2973,15 @@ const RecordQuery = forwardRef(({table, usage, isModal, initialQueryFilter, init
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
if (isModal)
|
||||
if(isModal)
|
||||
{
|
||||
return body;
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseLayout>{body}</BaseLayout>
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
RecordQuery.defaultProps = {
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
|
||||
import {QException} from "@kingsrook/qqq-frontend-core/lib/exceptions/QException";
|
||||
import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
@ -50,13 +49,11 @@ import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import AuditBody from "qqq/components/audits/AuditBody";
|
||||
import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton, standardWidth} from "qqq/components/buttons/DefaultButtons";
|
||||
import {QActionsMenuButton, QCancelButton, QDeleteButton, QEditButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import EntityForm from "qqq/components/forms/EntityForm";
|
||||
import MDButton from "qqq/components/legacy/MDButton";
|
||||
import {GotoRecordButton} from "qqq/components/misc/GotoRecordDialog";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
||||
import ShareModal from "qqq/components/sharing/ShareModal";
|
||||
import DashboardWidgets from "qqq/components/widgets/DashboardWidgets";
|
||||
import BaseLayout from "qqq/layouts/BaseLayout";
|
||||
import ProcessRun from "qqq/pages/processes/ProcessRun";
|
||||
@ -74,94 +71,18 @@ const qController = Client.getInstance();
|
||||
interface Props
|
||||
{
|
||||
table?: QTableMetaData;
|
||||
record?: QRecord;
|
||||
launchProcess?: QProcessMetaData;
|
||||
}
|
||||
|
||||
RecordView.defaultProps =
|
||||
{
|
||||
table: null,
|
||||
record: null,
|
||||
launchProcess: null,
|
||||
};
|
||||
|
||||
const TABLE_VARIANT_LOCAL_STORAGE_KEY_ROOT = "qqq.tableVariant";
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
export function renderSectionOfFields(key: string, fieldNames: string[], tableMetaData: QTableMetaData, helpHelpActive: boolean, record: QRecord, fieldMap?: {[name: string]: QFieldMetaData} )
|
||||
{
|
||||
return <Box key={key} display="flex" flexDirection="column" py={1} pr={2}>
|
||||
{
|
||||
fieldNames.map((fieldName: string) =>
|
||||
{
|
||||
let [field, tableForField] = tableMetaData ? TableUtils.getFieldAndTable(tableMetaData, fieldName) : fieldMap ? [fieldMap[fieldName], null] : [null, null];
|
||||
|
||||
if (field != null)
|
||||
{
|
||||
let label = field.label;
|
||||
|
||||
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
|
||||
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
|
||||
const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableMetaData?.name};field:${fieldName}`} />;
|
||||
|
||||
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
|
||||
|
||||
return (
|
||||
<Box key={fieldName} flexDirection="row" pr={2}>
|
||||
<>
|
||||
{
|
||||
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
|
||||
}
|
||||
<div style={{display: "inline-block", width: 0}}> </div>
|
||||
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
|
||||
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
|
||||
</Typography>
|
||||
</>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
</Box>;
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************
|
||||
**
|
||||
***************************************************************************/
|
||||
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.
|
||||
*******************************************************************************/
|
||||
function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.Element
|
||||
function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
const {id} = useParams();
|
||||
|
||||
@ -178,7 +99,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
const [adornmentFieldsMap, setAdornmentFieldsMap] = useState(new Map<string, boolean>);
|
||||
const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
|
||||
const [metaData, setMetaData] = useState(null as QInstance);
|
||||
const [record, setRecord] = useState(overrideRecord ?? null as QRecord);
|
||||
const [record, setRecord] = useState(null as QRecord);
|
||||
const [tableSections, setTableSections] = useState([] as QTableSection[]);
|
||||
const [t1Section, setT1Section] = useState(null as QTableSection);
|
||||
const [t1SectionName, setT1SectionName] = useState(null as string);
|
||||
@ -196,14 +117,11 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
const [launchingProcess, setLaunchingProcess] = useState(launchProcess);
|
||||
const [showEditChildForm, setShowEditChildForm] = useState(null as any);
|
||||
const [showAudit, setShowAudit] = useState(false);
|
||||
const [showShareModal, setShowShareModal] = useState(false);
|
||||
|
||||
const [isDeleteSubmitting, setIsDeleteSubmitting] = useState(false);
|
||||
|
||||
const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget);
|
||||
const closeActionsMenu = () => setActionsMenu(null);
|
||||
|
||||
const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics, userId: currentUserId} = useContext(QContext);
|
||||
const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics} = useContext(QContext);
|
||||
|
||||
if (localStorage.getItem(tableVariantLocalStorageKey))
|
||||
{
|
||||
@ -412,6 +330,31 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
reload();
|
||||
}, [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
|
||||
@ -487,18 +430,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
let record: QRecord;
|
||||
try
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
// 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);
|
||||
}
|
||||
|
||||
record = await qController.get(tableName, id, tableVariant, null, queryJoins);
|
||||
setRecord(record);
|
||||
recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel});
|
||||
}
|
||||
@ -535,7 +467,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
|
||||
setPageHeader(record.recordLabel);
|
||||
|
||||
if (!launchingProcess && !activeModalProcess)
|
||||
if (!launchingProcess)
|
||||
{
|
||||
try
|
||||
{
|
||||
@ -587,7 +519,40 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
// for a section with field names, render the field values. //
|
||||
// for the T1 section, the "wrapper" will come out below - but for other sections, produce a wrapper too. //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const fields = renderSectionOfFields(section.name, section.fieldNames, tableMetaData, helpHelpActive, record);
|
||||
const fields = (
|
||||
<Box key={section.name} display="flex" flexDirection="column" py={1} pr={2}>
|
||||
{
|
||||
section.fieldNames.map((fieldName: string) =>
|
||||
{
|
||||
let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
|
||||
if (field != null)
|
||||
{
|
||||
let label = field.label;
|
||||
|
||||
const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
|
||||
const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
|
||||
const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
|
||||
|
||||
const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
|
||||
|
||||
return (
|
||||
<Box key={fieldName} flexDirection="row" pr={2}>
|
||||
<>
|
||||
{
|
||||
showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
|
||||
}
|
||||
<div style={{display: "inline-block", width: 0}}> </div>
|
||||
<Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
|
||||
{ValueUtils.getDisplayValue(field, record, "view", fieldName)}
|
||||
</Typography>
|
||||
</>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
</Box>
|
||||
);
|
||||
|
||||
if (section.tier === "T1")
|
||||
{
|
||||
@ -657,7 +622,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
const handleClickDeleteButton = () =>
|
||||
{
|
||||
setDeleteConfirmationOpen(true);
|
||||
setIsDeleteSubmitting(false);
|
||||
};
|
||||
|
||||
const handleDeleteConfirmClose = () =>
|
||||
@ -667,7 +631,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
|
||||
const handleDelete = (event: { preventDefault: () => void }) =>
|
||||
{
|
||||
setIsDeleteSubmitting(true);
|
||||
event?.preventDefault();
|
||||
(async () =>
|
||||
{
|
||||
@ -676,13 +639,11 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
await qController.delete(tableName, id)
|
||||
.then(() =>
|
||||
{
|
||||
setIsDeleteSubmitting(false);
|
||||
const path = pathParts.slice(0, -1).join("/");
|
||||
navigate(path, {state: {deleteSuccess: true}});
|
||||
})
|
||||
.catch((error) =>
|
||||
{
|
||||
setIsDeleteSubmitting(false);
|
||||
setDeleteConfirmationOpen(false);
|
||||
console.log("Caught:");
|
||||
console.log(error);
|
||||
@ -798,68 +759,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
</Menu>
|
||||
);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** function to open the sharing modal
|
||||
*******************************************************************************/
|
||||
const openShareModal = () =>
|
||||
{
|
||||
setShowShareModal(true);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** function to close the sharing modal
|
||||
*******************************************************************************/
|
||||
const closeShareModal = () =>
|
||||
{
|
||||
setShowShareModal(false);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** render the share button (if allowed for table)
|
||||
*******************************************************************************/
|
||||
const renderShareButton = () =>
|
||||
{
|
||||
if (tableMetaData && tableMetaData.shareableTableMetaData)
|
||||
{
|
||||
let shareDisabled = true;
|
||||
let disabledTooltipText = "";
|
||||
if(tableMetaData.shareableTableMetaData.thisTableOwnerIdFieldName && record)
|
||||
{
|
||||
const ownerId = record.values.get(tableMetaData.shareableTableMetaData.thisTableOwnerIdFieldName);
|
||||
if(ownerId != currentUserId)
|
||||
{
|
||||
disabledTooltipText = `Only the owner of a ${tableMetaData.label} may share it.`
|
||||
shareDisabled = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
disabledTooltipText = "";
|
||||
shareDisabled = false;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
shareDisabled = false;
|
||||
}
|
||||
|
||||
return (<Box width={standardWidth} mr={2}>
|
||||
<Tooltip title={disabledTooltipText}>
|
||||
<span>
|
||||
<MDButton id="shareButton" type="button" color="info" size="small" onClick={() => openShareModal()} fullWidth startIcon={<Icon>group_add</Icon>} disabled={shareDisabled}>
|
||||
Share
|
||||
</MDButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>);
|
||||
}
|
||||
|
||||
return (<React.Fragment />);
|
||||
};
|
||||
|
||||
|
||||
const openModalProcess = (process: QProcessMetaData = null) =>
|
||||
{
|
||||
navigate(process.name);
|
||||
@ -1015,7 +914,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
</Typography>
|
||||
<Box display="flex">
|
||||
<GotoRecordButton metaData={metaData} tableMetaData={tableMetaData} />
|
||||
{renderShareButton()}
|
||||
<QActionsMenuButton isOpen={actionsMenu} onClickHandler={openActionsMenu} />
|
||||
</Box>
|
||||
{renderActionsMenu}
|
||||
@ -1064,7 +962,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleDeleteConfirmClose}>No</Button>
|
||||
<Button onClick={handleDelete} autoFocus disabled={isDeleteSubmitting}>
|
||||
<Button onClick={handleDelete} autoFocus>
|
||||
Yes
|
||||
</Button>
|
||||
</DialogActions>
|
||||
@ -1081,7 +979,7 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
|
||||
{
|
||||
showEditChildForm &&
|
||||
<Modal open={showEditChildForm !== null} onClose={(event, reason) => closeEditChildForm(event, reason)}>
|
||||
<Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
|
||||
<div className="modalEditForm">
|
||||
<EntityForm
|
||||
isModal={true}
|
||||
@ -1112,11 +1010,6 @@ function RecordView({table, record: overrideRecord, launchProcess}: Props): JSX.
|
||||
</Modal>
|
||||
}
|
||||
|
||||
{
|
||||
showShareModal && tableMetaData && record &&
|
||||
<ShareModal open={showShareModal} onClose={closeShareModal} tableMetaData={tableMetaData} record={record}></ShareModal>
|
||||
}
|
||||
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
|
||||
@ -1,163 +0,0 @@
|
||||
/*
|
||||
* 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,14 +421,6 @@ input[type="search"]::-webkit-search-results-decoration
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.dashboard-order-release-icon
|
||||
{
|
||||
font-size: 1.5rem !important;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.dashboard-schedule-icon
|
||||
{
|
||||
font-size: 1.1rem !important;
|
||||
@ -661,11 +653,6 @@ input[type="search"]::-webkit-search-results-decoration
|
||||
min-height: unset !important;
|
||||
}
|
||||
|
||||
.MuiDataGrid-columnHeaders
|
||||
{
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/* new style for toggle buttons */
|
||||
.MuiToggleButtonGroup-root
|
||||
{
|
||||
@ -701,86 +688,8 @@ input[type="search"]::-webkit-search-results-decoration
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.recordView .widget
|
||||
{
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.entityForm .widget
|
||||
{
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.recordView .widget .recordGridWidget
|
||||
{
|
||||
margin: -8px;
|
||||
}
|
||||
|
||||
.MuiPickersDay-root.Mui-selected, .MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover
|
||||
{
|
||||
color: white;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -23,7 +23,6 @@ import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QControl
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {FilterVariableExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/FilterVariableExpression";
|
||||
import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
|
||||
import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
|
||||
import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
|
||||
@ -109,8 +108,6 @@ class FilterUtils
|
||||
let [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
|
||||
|
||||
let values = criteria.values;
|
||||
let hasFilterVariable = false;
|
||||
|
||||
if (field.possibleValueSourceName)
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
@ -124,17 +121,7 @@ class FilterUtils
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
if (values && values.length > 0 && values[0] !== null && values[0] !== undefined && values[0] !== "")
|
||||
{
|
||||
////////////////////////////////////////////////////////////////////////
|
||||
// do not do this lookup if the field is a filter variable expression //
|
||||
////////////////////////////////////////////////////////////////////////
|
||||
if (values[0].type && values[0].type == "FilterVariableExpression")
|
||||
{
|
||||
hasFilterVariable = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
|
||||
}
|
||||
values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////
|
||||
@ -245,10 +232,6 @@ class FilterUtils
|
||||
{
|
||||
return (new ThisOrLastPeriodExpression(value));
|
||||
}
|
||||
else if (value.type == "FilterVariableExpression")
|
||||
{
|
||||
return (new FilterVariableExpression(value));
|
||||
}
|
||||
}
|
||||
|
||||
return (null);
|
||||
@ -382,12 +365,7 @@ class FilterUtils
|
||||
for (let i = 0; i < maxLoops; i++)
|
||||
{
|
||||
const value = criteria.values[i];
|
||||
if (value.type == "FilterVariableExpression")
|
||||
{
|
||||
const expression = new FilterVariableExpression(value);
|
||||
labels.push(expression.toString());
|
||||
}
|
||||
else if (value.type == "NowWithOffset")
|
||||
if (value.type == "NowWithOffset")
|
||||
{
|
||||
const expression = new NowWithOffsetExpression(value);
|
||||
labels.push(expression.toString());
|
||||
@ -679,7 +657,7 @@ class FilterUtils
|
||||
|
||||
filterForBackend.subFilters = subFilters;
|
||||
|
||||
if (pageNumber !== undefined && rowsPerPage !== undefined)
|
||||
if(pageNumber !== undefined && rowsPerPage !== undefined)
|
||||
{
|
||||
filterForBackend.skip = pageNumber * rowsPerPage;
|
||||
filterForBackend.limit = rowsPerPage;
|
||||
|
||||
@ -133,11 +133,6 @@ class TableUtils
|
||||
*******************************************************************************/
|
||||
public static getFieldAndTable(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
|
||||
{
|
||||
if(!fieldName)
|
||||
{
|
||||
return [null, null];
|
||||
}
|
||||
|
||||
if (fieldName.indexOf(".") > -1)
|
||||
{
|
||||
const nameParts = fieldName.split(".", 2);
|
||||
|
||||
@ -47,8 +47,6 @@ module.exports = function (app)
|
||||
app.use("/download/*", getRequestHandler());
|
||||
app.use("/metaData/*", getRequestHandler());
|
||||
app.use("/data/*", getRequestHandler());
|
||||
app.use("/possibleValues/*", getRequestHandler());
|
||||
app.use("/possibleValues", getRequestHandler());
|
||||
app.use("/widget/*", getRequestHandler());
|
||||
app.use("/serverInfo", getRequestHandler());
|
||||
app.use("/manageSession", getRequestHandler());
|
||||
|
||||
@ -29,7 +29,6 @@ import com.kingsrook.qqq.backend.core.model.metadata.authentication.QAuthenticat
|
||||
import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldMetaData;
|
||||
import com.kingsrook.qqq.backend.core.model.metadata.fields.QFieldType;
|
||||
import com.kingsrook.qqq.backend.core.model.metadata.tables.QTableMetaData;
|
||||
import com.kingsrook.qqq.backend.core.modules.backend.implementations.memory.MemoryBackendModule;
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -76,7 +75,7 @@ public class TestUtils
|
||||
{
|
||||
return (new QBackendMetaData()
|
||||
.withName(DEFAULT_BACKEND_NAME)
|
||||
.withBackendType(MemoryBackendModule.class));
|
||||
.withBackendType("memory"));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -29,9 +29,6 @@ import com.kingsrook.qqq.backend.core.instances.QInstanceValidator;
|
||||
import com.kingsrook.qqq.backend.core.model.metadata.QInstance;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.junit.BaseTest;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.junit.TestUtils;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRule;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleAction;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.model.metadata.fieldrules.FieldRuleTrigger;
|
||||
import org.junit.jupiter.api.Test;
|
||||
import static org.assertj.core.api.Assertions.assertThat;
|
||||
import static org.junit.jupiter.api.Assertions.assertEquals;
|
||||
@ -79,37 +76,6 @@ class MaterialDashboardTableMetaDataTest extends BaseTest
|
||||
|
||||
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withDefaultQuickFilterFieldNames(List.of("firstName", "lastName", "firstName"))),
|
||||
"duplicated field name: firstName");
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Test
|
||||
void testValidateFieldRules()
|
||||
{
|
||||
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule())),
|
||||
"without an action",
|
||||
"without a trigger",
|
||||
"without a sourceField");
|
||||
|
||||
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule()
|
||||
.withTrigger(FieldRuleTrigger.ON_CHANGE)
|
||||
.withAction(FieldRuleAction.CLEAR_TARGET_FIELD)
|
||||
.withSourceField("notAField")
|
||||
.withTargetField("alsoNotAField")
|
||||
)),
|
||||
"unrecognized sourceField: notAField",
|
||||
"unrecognized targetField: alsoNotAField");
|
||||
|
||||
assertValidationFailureReasons(qInstance -> qInstance.getTable(TestUtils.TABLE_NAME_PERSON).withSupplementalMetaData(new MaterialDashboardTableMetaData().withFieldRule(new FieldRule()
|
||||
.withTrigger(FieldRuleTrigger.ON_CHANGE)
|
||||
.withAction(FieldRuleAction.RELOAD_WIDGET)
|
||||
.withSourceField("id")
|
||||
.withTargetWidget("notAWidget")
|
||||
)),
|
||||
"unrecognized targetWidget: notAWidget");
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -33,7 +33,6 @@ import org.junit.jupiter.api.AfterEach;
|
||||
import org.junit.jupiter.api.BeforeAll;
|
||||
import org.junit.jupiter.api.BeforeEach;
|
||||
import org.junit.jupiter.api.TestInfo;
|
||||
import org.junit.jupiter.api.extension.ExtendWith;
|
||||
import org.openqa.selenium.Dimension;
|
||||
import org.openqa.selenium.WebDriver;
|
||||
import org.openqa.selenium.chrome.ChromeDriver;
|
||||
@ -44,7 +43,6 @@ import static org.junit.jupiter.api.Assertions.fail;
|
||||
/*******************************************************************************
|
||||
** Base class for Selenium tests
|
||||
*******************************************************************************/
|
||||
@ExtendWith(SeleniumTestWatcher.class)
|
||||
public class QBaseSeleniumTest
|
||||
{
|
||||
protected static ChromeOptions chromeOptions;
|
||||
@ -95,8 +93,6 @@ public class QBaseSeleniumTest
|
||||
driver.manage().window().setSize(new Dimension(1700, 1300));
|
||||
qSeleniumLib = new QSeleniumLib(driver);
|
||||
|
||||
SeleniumTestWatcher.setCurrentSeleniumLib(qSeleniumLib);
|
||||
|
||||
if(useInternalJavalin())
|
||||
{
|
||||
qSeleniumJavalin = new QSeleniumJavalin();
|
||||
@ -201,10 +197,10 @@ public class QBaseSeleniumTest
|
||||
qSeleniumLib.takeScreenshotToFile(getClass().getSimpleName() + "/" + testInfo.getDisplayName());
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////
|
||||
// note - at one time we did a driver.quit here - but we're moving that into //
|
||||
// SeleniumTestWatcher, so it can dump logs if it wants to (it runs after the @After) //
|
||||
////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(driver != null)
|
||||
{
|
||||
driver.quit();
|
||||
}
|
||||
|
||||
if(qSeleniumJavalin != null)
|
||||
{
|
||||
|
||||
@ -42,8 +42,6 @@ import org.openqa.selenium.StaleElementReferenceException;
|
||||
import org.openqa.selenium.WebDriver;
|
||||
import org.openqa.selenium.WebElement;
|
||||
import org.openqa.selenium.interactions.Actions;
|
||||
import org.openqa.selenium.logging.LogEntries;
|
||||
import org.openqa.selenium.logging.LogEntry;
|
||||
import org.openqa.selenium.support.ui.ExpectedConditions;
|
||||
import org.openqa.selenium.support.ui.WebDriverWait;
|
||||
import static org.assertj.core.api.Assertions.assertThat;
|
||||
@ -335,7 +333,7 @@ public class QSeleniumLib
|
||||
return;
|
||||
}
|
||||
|
||||
if(elements.stream().noneMatch(e -> e.getText().toLowerCase().contains(textContains.toLowerCase())))
|
||||
if(elements.stream().noneMatch(e -> e.getText().toLowerCase().contains(textContains)))
|
||||
{
|
||||
LOG.debug("Found non-existence of element(s) matching selector [" + cssSelector + "] containing text [" + textContains + "]");
|
||||
return;
|
||||
@ -345,7 +343,7 @@ public class QSeleniumLib
|
||||
}
|
||||
while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
|
||||
|
||||
fail("Failed for non-existence of element matching selector [" + cssSelector + "] containing text [" + textContains + "] after [" + WAIT_SECONDS + "] seconds.");
|
||||
fail("Failed for non-existence of element matching selector [" + cssSelector + "] after [" + WAIT_SECONDS + "] seconds.");
|
||||
}
|
||||
|
||||
|
||||
@ -737,22 +735,4 @@ public class QSeleniumLib
|
||||
return (this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public void dumpConsole()
|
||||
{
|
||||
Set<String> availableLogTypes = driver.manage().logs().getAvailableLogTypes();
|
||||
for(String logType : availableLogTypes)
|
||||
{
|
||||
LogEntries logEntries = driver.manage().logs().get(logType);
|
||||
for(LogEntry logEntry : logEntries)
|
||||
{
|
||||
System.out.println(logEntry.toJson());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -261,7 +261,9 @@ public class QueryScreenLib
|
||||
if(StringUtils.hasContent(value))
|
||||
{
|
||||
qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").click();
|
||||
qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").sendKeys(value);
|
||||
// todo - no, not in a listbox/LI here...
|
||||
qSeleniumLib.waitForSelectorContaining(".MuiAutocomplete-listbox LI", value).click();
|
||||
System.out.println(value);
|
||||
}
|
||||
|
||||
qSeleniumLib.clickBackdrop();
|
||||
@ -269,21 +271,6 @@ public class QueryScreenLib
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public void setBasicBooleanFilter(String fieldLabel, String operatorLabel)
|
||||
{
|
||||
qSeleniumLib.waitForSelectorContaining("BUTTON", fieldLabel).click();
|
||||
qSeleniumLib.waitForMillis(250);
|
||||
qSeleniumLib.waitForSelector("#criteriaOperator").click();
|
||||
qSeleniumLib.waitForSelectorContaining("LI", operatorLabel).click();
|
||||
|
||||
qSeleniumLib.clickBackdrop();
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
|
||||
@ -1,126 +0,0 @@
|
||||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
|
||||
|
||||
|
||||
import java.util.Optional;
|
||||
import org.junit.jupiter.api.extension.ExtensionContext;
|
||||
import org.junit.jupiter.api.extension.TestWatcher;
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public class SeleniumTestWatcher implements TestWatcher
|
||||
{
|
||||
private static QSeleniumLib qSeleniumLib;
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static void setCurrentSeleniumLib(QSeleniumLib qSeleniumLib)
|
||||
{
|
||||
SeleniumTestWatcher.qSeleniumLib = qSeleniumLib;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Override
|
||||
public void testFailed(ExtensionContext context, Throwable cause)
|
||||
{
|
||||
if(qSeleniumLib != null)
|
||||
{
|
||||
System.out.println("Dumping browser console after failed test: " + context.getDisplayName());
|
||||
System.out.println("----------------------------------------------------------------------------");
|
||||
try
|
||||
{
|
||||
qSeleniumLib.dumpConsole();
|
||||
}
|
||||
catch(Exception e)
|
||||
{
|
||||
System.out.println("Error dumping console:");
|
||||
e.printStackTrace();
|
||||
}
|
||||
System.out.println("----------------------------------------------------------------------------");
|
||||
}
|
||||
|
||||
tryToQuitSelenium();
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
private void tryToQuitSelenium()
|
||||
{
|
||||
if(qSeleniumLib != null)
|
||||
{
|
||||
try
|
||||
{
|
||||
qSeleniumLib.driver.quit();
|
||||
}
|
||||
catch(Exception e)
|
||||
{
|
||||
System.err.println("Error quiting selenium driver: " + e.getMessage());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Override
|
||||
public void testSuccessful(ExtensionContext context)
|
||||
{
|
||||
tryToQuitSelenium();
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Override
|
||||
public void testAborted(ExtensionContext context, Throwable cause)
|
||||
{
|
||||
tryToQuitSelenium();
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Override
|
||||
public void testDisabled(ExtensionContext context, Optional<String> reason)
|
||||
{
|
||||
tryToQuitSelenium();
|
||||
}
|
||||
}
|
||||
@ -1,172 +0,0 @@
|
||||
/*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
|
||||
|
||||
|
||||
import java.util.List;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QSeleniumLib;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
|
||||
import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
|
||||
import org.junit.jupiter.api.Test;
|
||||
import org.openqa.selenium.By;
|
||||
import org.openqa.selenium.Keys;
|
||||
import org.openqa.selenium.WebElement;
|
||||
import static org.assertj.core.api.Assertions.assertThat;
|
||||
import static org.junit.jupiter.api.Assertions.assertEquals;
|
||||
import static org.junit.jupiter.api.Assertions.assertNull;
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Test for Saved Report screen (table has some special behaviors)
|
||||
*******************************************************************************/
|
||||
public class SavedReportTest extends QBaseSeleniumTest
|
||||
{
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Override
|
||||
protected void addJavalinRoutes(QSeleniumJavalin qSeleniumJavalin)
|
||||
{
|
||||
super.addJavalinRoutes(qSeleniumJavalin);
|
||||
qSeleniumJavalin
|
||||
.withRouteToFile("/metaData/table/savedReport", "metaData/table/savedReport.json")
|
||||
.withRouteToFile("/widget/reportSetupWidget", "widget/reportSetupWidget.json")
|
||||
.withRouteToFile("/widget/pivotTableSetupWidget", "widget/pivotTableSetupWidget.json")
|
||||
.withRouteToFile("/data/savedReport/possibleValues/tableName", "data/savedReport/possibleValues/tableName.json")
|
||||
|
||||
.withRouteToFile("/data/person/count", "data/person/count.json")
|
||||
.withRouteToFile("/data/person/query", "data/person/index.json")
|
||||
;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
@Test
|
||||
void testCreate()
|
||||
{
|
||||
qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/userCustomizations/savedReport/create", "Creating New Saved Report");
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
// make sure things are disabled before a table is selected //
|
||||
//////////////////////////////////////////////////////////////
|
||||
WebElement webElement = qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns");
|
||||
assertEquals("true", webElement.getAttribute("disabled"));
|
||||
|
||||
qSeleniumLib.waitForSelector("#label").click();
|
||||
qSeleniumLib.waitForSelector("#label").sendKeys("My Report");
|
||||
|
||||
qSeleniumLib.waitForSelector("#tableName").click();
|
||||
qSeleniumLib.waitForSelector("#tableName").sendKeys("Person" + Keys.DOWN + Keys.ENTER);
|
||||
|
||||
//////////////////////////////////
|
||||
// make sure things enabled now //
|
||||
//////////////////////////////////
|
||||
webElement = qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns");
|
||||
assertNull(webElement.getAttribute("disabled"));
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
// open query-screen popup, wait for query to run //
|
||||
////////////////////////////////////////////////////
|
||||
qSeleniumJavalin.beginCapture();
|
||||
qSeleniumLib.waitForSelectorContaining("button", "Edit Filters and Columns").click();
|
||||
qSeleniumJavalin.waitForCapturedPath("/data/person/count");
|
||||
qSeleniumJavalin.waitForCapturedPath("/data/person/query");
|
||||
qSeleniumJavalin.endCapture();
|
||||
|
||||
QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
|
||||
queryScreenLib.setBasicFilter("First Name", "contains", "Darin");
|
||||
|
||||
////////////////////////
|
||||
// close query screen //
|
||||
////////////////////////
|
||||
qSeleniumLib.waitForSelectorContaining("button", "OK").click();
|
||||
|
||||
//////////////////////////////////////////////////////
|
||||
// make sure query things appear on edit screen now //
|
||||
//////////////////////////////////////////////////////
|
||||
qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "First Name");
|
||||
qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "contains");
|
||||
qSeleniumLib.waitForSelectorContaining(".advancedQueryString", "Darin");
|
||||
List<WebElement> columns = qSeleniumLib.waitForSelectorContaining("h5", "Columns")
|
||||
.findElement(QSeleniumLib.PARENT)
|
||||
.findElements(By.cssSelector("DIV"));
|
||||
|
||||
assertThat(columns)
|
||||
.hasSizeGreaterThanOrEqualTo(5) // at least this many
|
||||
.anyMatch(we -> we.getText().equals("Home City")); // a few fields are found
|
||||
|
||||
///////////////////
|
||||
// turn on pivot //
|
||||
///////////////////
|
||||
qSeleniumLib.waitForSelectorContaining("label", "Use Pivot Table").click();
|
||||
qSeleniumLib.waitForSelectorContaining("button", "Edit Pivot Table").click();
|
||||
qSeleniumLib.waitForSelectorContaining("h3", "Edit Pivot Table");
|
||||
|
||||
///////////////
|
||||
// add a row //
|
||||
///////////////
|
||||
qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new row").click();
|
||||
WebElement row0Input = qSeleniumLib.waitForSelector("#rows-0");
|
||||
row0Input.click();
|
||||
row0Input.sendKeys("Last Name" + Keys.ENTER);
|
||||
|
||||
//////////////////
|
||||
// add a column //
|
||||
//////////////////
|
||||
qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new column").click();
|
||||
WebElement column0Input = qSeleniumLib.waitForSelector("#columns-0");
|
||||
column0Input.click();
|
||||
column0Input.sendKeys("Home City" + Keys.ENTER);
|
||||
|
||||
/////////////////
|
||||
// add a value //
|
||||
/////////////////
|
||||
qSeleniumLib.waitForSelectorContaining(".MuiModal-root button", "Add new value").click();
|
||||
WebElement value0Input = qSeleniumLib.waitForSelector("#values-field-0");
|
||||
value0Input.click();
|
||||
value0Input.sendKeys("Id" + Keys.ENTER);
|
||||
|
||||
/////////////////////////////////////////
|
||||
// try to submit - but expect an error //
|
||||
/////////////////////////////////////////
|
||||
qSeleniumLib.waitForSelectorContaining("button", "OK").click();
|
||||
qSeleniumLib.waitForSelectorContaining(".MuiAlert-standard", "Missing value in 1 field.").click();
|
||||
|
||||
///////////////////////////
|
||||
// now select a function //
|
||||
///////////////////////////
|
||||
WebElement function0Input = qSeleniumLib.waitForSelector("#values-function-0");
|
||||
function0Input.click();
|
||||
function0Input.sendKeys("Count" + Keys.ENTER);
|
||||
|
||||
qSeleniumLib.waitForSelectorContaining("button", "OK").click();
|
||||
qSeleniumLib.waitForSelectorContainingToNotExist("h3", "Edit Pivot Table");
|
||||
|
||||
// qSeleniumLib.waitForever();
|
||||
}
|
||||
|
||||
}
|
||||
@ -153,16 +153,16 @@ public class QueryScreenTest extends QBaseSeleniumTest
|
||||
|
||||
queryScreenLib.addBasicFilter("Is Employed");
|
||||
|
||||
testBasicBooleanCriteria(queryScreenLib, "Is Employed", "equals yes", "(?s).*Is Employed:.*yes.*", """
|
||||
testBasicCriteria(queryScreenLib, "Is Employed", "equals yes", null, "(?s).*Is Employed:.*yes.*", """
|
||||
{"fieldName":"isEmployed","operator":"EQUALS","values":[true]}""");
|
||||
|
||||
testBasicBooleanCriteria(queryScreenLib, "Is Employed", "equals no", "(?s).*Is Employed:.*no.*", """
|
||||
testBasicCriteria(queryScreenLib, "Is Employed", "equals no", null, "(?s).*Is Employed:.*no.*", """
|
||||
{"fieldName":"isEmployed","operator":"EQUALS","values":[false]}""");
|
||||
|
||||
testBasicBooleanCriteria(queryScreenLib, "Is Employed", "is empty", "(?s).*Is Employed:.*is empty.*", """
|
||||
testBasicCriteria(queryScreenLib, "Is Employed", "is empty", null, "(?s).*Is Employed:.*is empty.*", """
|
||||
{"fieldName":"isEmployed","operator":"IS_BLANK","values":[]}""");
|
||||
|
||||
testBasicBooleanCriteria(queryScreenLib, "Is Employed", "is not empty", "(?s).*Is Employed:.*is not empty.*", """
|
||||
testBasicCriteria(queryScreenLib, "Is Employed", "is not empty", null, "(?s).*Is Employed:.*is not empty.*", """
|
||||
{"fieldName":"isEmployed","operator":"IS_NOT_BLANK","values":[]}""");
|
||||
}
|
||||
|
||||
@ -203,10 +203,10 @@ public class QueryScreenTest extends QBaseSeleniumTest
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
private void testBasicBooleanCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String expectButtonStringRegex, String expectFilterJsonContains)
|
||||
private void testBasicCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String value, String expectButtonStringRegex, String expectFilterJsonContains)
|
||||
{
|
||||
qSeleniumJavalin.beginCapture();
|
||||
queryScreenLib.setBasicBooleanFilter(fieldLabel, operatorLabel);
|
||||
queryScreenLib.setBasicFilter(fieldLabel, operatorLabel, value);
|
||||
queryScreenLib.waitForBasicFilterButtonMatchingRegex(expectButtonStringRegex);
|
||||
qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
|
||||
qSeleniumJavalin.endCapture();
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
{
|
||||
"options": [
|
||||
{
|
||||
"id": "person",
|
||||
"label": "Person"
|
||||
},
|
||||
{
|
||||
"id": "city",
|
||||
"label": "City"
|
||||
},
|
||||
{
|
||||
"id": "savedReport",
|
||||
"label": "Saved Report"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -189,26 +189,6 @@
|
||||
"insertPermission": true,
|
||||
"editPermission": true,
|
||||
"deletePermission": true
|
||||
},
|
||||
"savedReport": {
|
||||
"name": "savedReport",
|
||||
"label": "Saved Report",
|
||||
"isHidden": false,
|
||||
"iconName": "article",
|
||||
"capabilities": [
|
||||
"TABLE_COUNT",
|
||||
"TABLE_GET",
|
||||
"TABLE_QUERY",
|
||||
"QUERY_STATS",
|
||||
"TABLE_UPDATE",
|
||||
"TABLE_INSERT",
|
||||
"TABLE_DELETE"
|
||||
],
|
||||
"readPermission": true,
|
||||
"insertPermission": true,
|
||||
"editPermission": true,
|
||||
"deletePermission": true,
|
||||
"usesVariants": false
|
||||
}
|
||||
},
|
||||
"processes": {
|
||||
@ -440,40 +420,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"userCustomizations": {
|
||||
"name": "userCustomizations",
|
||||
"label": "User Customizations",
|
||||
"iconName": "article",
|
||||
"widgets": [],
|
||||
"children": [
|
||||
{
|
||||
"type": "TABLE",
|
||||
"name": "savedReport",
|
||||
"label": "Saved Report",
|
||||
"iconName": "article"
|
||||
}
|
||||
],
|
||||
"childMap": {
|
||||
"savedReport": {
|
||||
"type": "TABLE",
|
||||
"name": "savedReport",
|
||||
"label": "Saved Report",
|
||||
"iconName": "article"
|
||||
}
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
"name": "userCustomizations",
|
||||
"label": "User Customizations",
|
||||
"icon": {
|
||||
"name": "badge"
|
||||
},
|
||||
"tables": [
|
||||
"savedReport"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"miscellaneous": {
|
||||
"name": "miscellaneous",
|
||||
"label": "Miscellaneous",
|
||||
@ -784,20 +730,6 @@
|
||||
}
|
||||
],
|
||||
"iconName": "data_object"
|
||||
},
|
||||
{
|
||||
"type": "APP",
|
||||
"name": "userCustomizations",
|
||||
"label": "User Customizations",
|
||||
"children": [
|
||||
{
|
||||
"type": "TABLE",
|
||||
"name": "savedReport",
|
||||
"label": "Saved Report",
|
||||
"iconName": "article"
|
||||
}
|
||||
],
|
||||
"iconName": "data_object"
|
||||
}
|
||||
],
|
||||
"branding": {
|
||||
@ -818,28 +750,6 @@
|
||||
"isCard": true,
|
||||
"storeDropdownSelections": false,
|
||||
"hasPermission": true
|
||||
},
|
||||
"reportSetupWidget": {
|
||||
"name": "reportSetupWidget",
|
||||
"label": "Filters and Columns",
|
||||
"type": "filterAndColumnsSetup",
|
||||
"isCard": true,
|
||||
"storeDropdownSelections": false,
|
||||
"showReloadButton": true,
|
||||
"showExportButton": false,
|
||||
"defaultValues": {},
|
||||
"hasPermission": true
|
||||
},
|
||||
"pivotTableSetupWidget": {
|
||||
"name": "pivotTableSetupWidget",
|
||||
"label": "Pivot Table",
|
||||
"type": "pivotTableSetup",
|
||||
"isCard": true,
|
||||
"storeDropdownSelections": false,
|
||||
"showReloadButton": true,
|
||||
"showExportButton": false,
|
||||
"defaultValues": {},
|
||||
"hasPermission": true
|
||||
}
|
||||
},
|
||||
"environmentValues": {
|
||||
|
||||
@ -1,218 +0,0 @@
|
||||
{
|
||||
"table": {
|
||||
"name": "savedReport",
|
||||
"label": "Saved Report",
|
||||
"isHidden": false,
|
||||
"primaryKeyField": "id",
|
||||
"iconName": "article",
|
||||
"fields": {
|
||||
"queryFilterJson": {
|
||||
"name": "queryFilterJson",
|
||||
"label": "Query Filter",
|
||||
"type": "STRING",
|
||||
"isRequired": false,
|
||||
"isEditable": true,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"columnsJson": {
|
||||
"name": "columnsJson",
|
||||
"label": "Columns",
|
||||
"type": "STRING",
|
||||
"isRequired": false,
|
||||
"isEditable": true,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"inputFieldsJson": {
|
||||
"name": "inputFieldsJson",
|
||||
"label": "Input Fields",
|
||||
"type": "STRING",
|
||||
"isRequired": false,
|
||||
"isEditable": true,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"pivotTableJson": {
|
||||
"name": "pivotTableJson",
|
||||
"label": "Pivot Table",
|
||||
"type": "STRING",
|
||||
"isRequired": false,
|
||||
"isEditable": true,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"modifyDate": {
|
||||
"name": "modifyDate",
|
||||
"label": "Modify Date",
|
||||
"type": "DATE_TIME",
|
||||
"isRequired": false,
|
||||
"isEditable": false,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"label": {
|
||||
"name": "label",
|
||||
"label": "Report Name",
|
||||
"type": "STRING",
|
||||
"isRequired": true,
|
||||
"isEditable": true,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"id": {
|
||||
"name": "id",
|
||||
"label": "Id",
|
||||
"type": "INTEGER",
|
||||
"isRequired": false,
|
||||
"isEditable": false,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"userId": {
|
||||
"name": "userId",
|
||||
"label": "User Id",
|
||||
"type": "STRING",
|
||||
"isRequired": false,
|
||||
"isEditable": true,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"tableName": {
|
||||
"name": "tableName",
|
||||
"label": "Table",
|
||||
"type": "STRING",
|
||||
"isRequired": true,
|
||||
"isEditable": true,
|
||||
"isHeavy": false,
|
||||
"possibleValueSourceName": "tables",
|
||||
"displayFormat": "%s"
|
||||
},
|
||||
"createDate": {
|
||||
"name": "createDate",
|
||||
"label": "Create Date",
|
||||
"type": "DATE_TIME",
|
||||
"isRequired": false,
|
||||
"isEditable": false,
|
||||
"isHeavy": false,
|
||||
"displayFormat": "%s"
|
||||
}
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
"name": "identity",
|
||||
"label": "Identity",
|
||||
"tier": "T1",
|
||||
"fieldNames": [
|
||||
"id",
|
||||
"label",
|
||||
"tableName"
|
||||
],
|
||||
"icon": {
|
||||
"name": "badge"
|
||||
},
|
||||
"isHidden": false
|
||||
},
|
||||
{
|
||||
"name": "filtersAndColumns",
|
||||
"label": "Filters and Columns",
|
||||
"tier": "T2",
|
||||
"widgetName": "reportSetupWidget",
|
||||
"icon": {
|
||||
"name": "table_chart"
|
||||
},
|
||||
"isHidden": false
|
||||
},
|
||||
{
|
||||
"name": "pivotTable",
|
||||
"label": "Pivot Table",
|
||||
"tier": "T2",
|
||||
"widgetName": "pivotTableSetupWidget",
|
||||
"icon": {
|
||||
"name": "pivot_table_chart"
|
||||
},
|
||||
"isHidden": false
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"label": "Data",
|
||||
"tier": "T2",
|
||||
"fieldNames": [
|
||||
"queryFilterJson",
|
||||
"columnsJson",
|
||||
"pivotTableJson"
|
||||
],
|
||||
"icon": {
|
||||
"name": "text_snippet"
|
||||
},
|
||||
"isHidden": true
|
||||
},
|
||||
{
|
||||
"name": "hidden",
|
||||
"label": "Hidden",
|
||||
"tier": "T2",
|
||||
"fieldNames": [
|
||||
"inputFieldsJson",
|
||||
"userId"
|
||||
],
|
||||
"icon": {
|
||||
"name": "text_snippet"
|
||||
},
|
||||
"isHidden": true
|
||||
},
|
||||
{
|
||||
"name": "dates",
|
||||
"label": "Dates",
|
||||
"tier": "T3",
|
||||
"fieldNames": [
|
||||
"createDate",
|
||||
"modifyDate"
|
||||
],
|
||||
"icon": {
|
||||
"name": "calendar_month"
|
||||
},
|
||||
"isHidden": false
|
||||
}
|
||||
],
|
||||
"exposedJoins": [],
|
||||
"supplementalTableMetaData": {
|
||||
"materialDashboard": {
|
||||
"fieldRules": [
|
||||
{
|
||||
"trigger": "ON_CHANGE",
|
||||
"sourceField": "tableName",
|
||||
"action": "CLEAR_TARGET_FIELD",
|
||||
"targetField": "queryFilterJson"
|
||||
},
|
||||
{
|
||||
"trigger": "ON_CHANGE",
|
||||
"sourceField": "tableName",
|
||||
"action": "CLEAR_TARGET_FIELD",
|
||||
"targetField": "columnsJson"
|
||||
},
|
||||
{
|
||||
"trigger": "ON_CHANGE",
|
||||
"sourceField": "tableName",
|
||||
"action": "CLEAR_TARGET_FIELD",
|
||||
"targetField": "pivotTableJson"
|
||||
}
|
||||
],
|
||||
"type": "materialDashboard"
|
||||
}
|
||||
},
|
||||
"capabilities": [
|
||||
"TABLE_COUNT",
|
||||
"TABLE_GET",
|
||||
"TABLE_QUERY",
|
||||
"QUERY_STATS",
|
||||
"TABLE_UPDATE",
|
||||
"TABLE_INSERT",
|
||||
"TABLE_DELETE"
|
||||
],
|
||||
"readPermission": true,
|
||||
"insertPermission": true,
|
||||
"editPermission": true,
|
||||
"deletePermission": true,
|
||||
"usesVariants": false
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
{"type":"pivotTableSetup"}
|
||||
@ -1 +0,0 @@
|
||||
{"type":"reportSetup"}
|
||||
Reference in New Issue
Block a user