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

CE-969: added basic support for 'too complex' subfilters

Browse Source
This commit is contained in:
Tim Chamberlain
2024-03-12 17:40:56 -05:00
parent 626ada3507
commit c36dfb5683
10 changed files with 4126 additions and 3378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/qqq/components/audits/AuditBody.tsx
View File

@ -34,7 +34,7 @@ import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import Tooltip from "@mui/material/Tooltip";
import Typography from "@mui/material/Typography";
import React, {JSXElementConstructor, useContext, useEffect, useState} from "react";
import React, {useContext, useEffect, useState} from "react";
import QContext from "QContext";
import Client from "qqq/utils/qqq/Client";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
@ -58,19 +58,19 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const [limit, setLimit] = useState(1000);
const [statusString, setStatusString] = useState("Loading audits...");
const [auditsByDate, setAuditsByDate] = useState([] as QRecord[][]);
const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>)
const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>)
const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>);
const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>);
const [sortDirection, setSortDirection] = useState(localStorage.getItem("audit.sortDirection") === "true");
const {accentColor} = useContext(QContext);
function wrapValue(value: any): JSX.Element
{
return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>
return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>;
}
function wasValue(value: any): JSX.Element
{
return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>
return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>;
}
function getAuditDetailFieldChangeRow(qRecord: QRecord): JSX.Element | null
@ -79,10 +79,14 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const fieldName = qRecord.values.get("auditDetail.fieldName");
const oldValue = qRecord.values.get("auditDetail.oldValue");
const newValue = qRecord.values.get("auditDetail.newValue");
if(fieldName && (oldValue !== null || newValue !== null))
if (fieldName && (oldValue !== null || newValue !== null))
{
const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName
return (<tr><td>{fieldLabel}</td><td>{oldValue}</td><td>{newValue}</td></tr>)
const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
return (<tr>
<td>{fieldLabel}</td>
<td>{oldValue}</td>
<td>{newValue}</td>
</tr>);
}
return (null);
}
@ -93,22 +97,22 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const fieldName = qRecord.values.get("auditDetail.fieldName");
const oldValue = qRecord.values.get("auditDetail.oldValue");
const newValue = qRecord.values.get("auditDetail.newValue");
if(fieldName && (oldValue !== null || newValue !== null))
if (fieldName && (oldValue !== null || newValue !== null))
{
const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
if(oldValue !== undefined && newValue !== undefined)
if (oldValue !== undefined && newValue !== undefined)
{
return (<>{fieldLabel}: Changed from {(oldValue)} to <b>{(newValue)}</b></>);
}
else if(newValue !== undefined)
else if (newValue !== undefined)
{
return (<>{fieldLabel}: Set to <b>{(newValue)}</b></>);
}
else if(oldValue !== undefined)
else if (oldValue !== undefined)
{
return (<>{fieldLabel}: Removed value {(oldValue)}</>);
}
else if(message)
else if (message)
{
return (<>{message}</>);
}
@ -177,7 +181,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
}
*/
}
else if(message)
else if (message)
{
return (<>{message}</>);
}
@ -198,18 +202,18 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
new QFilterOrderBy("timestamp", sortDirection),
new QFilterOrderBy("id", sortDirection),
new QFilterOrderBy("auditDetail.id", true)
], "AND", 0, limit);
], null, "AND", 0, limit);
///////////////////////////////
// fetch audits in try-catch //
///////////////////////////////
let audits = [] as QRecord[]
let audits = [] as QRecord[];
try
{
audits = await qController.query("audit", filter, [new QueryJoin("auditDetail", true, "LEFT")]);
setAudits(audits);
}
catch(e)
catch (e)
{
if (e instanceof QException)
{
@ -233,33 +237,33 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
//////////////////////////////////////////////////////////////////////////////////////////////////////////
// group the audits by auditId (e.g., this is a list that joined audit & auditDetail, so un-flatten it) //
//////////////////////////////////////////////////////////////////////////////////////////////////////////
const unflattenedAudits: QRecord[] = []
const unflattenedAudits: QRecord[] = [];
const detailMap: Map<number, JSX.Element[]> = new Map();
const fieldChangeRowsMap: Map<number, JSX.Element[]> = new Map();
for (let i = 0; i < audits.length; i++)
{
let id = audits[i].values.get("id");
if(i == 0 || unflattenedAudits[unflattenedAudits.length-1].values.get("id") != id)
if (i == 0 || unflattenedAudits[unflattenedAudits.length - 1].values.get("id") != id)
{
unflattenedAudits.push(audits[i]);
}
let auditDetail = getAuditDetailElement(audits[i]);
if(auditDetail)
if (auditDetail)
{
if(!detailMap.has(id))
if (!detailMap.has(id))
{
detailMap.set(id, []);
}
detailMap.get(id).push(auditDetail)
detailMap.get(id).push(auditDetail);
}
// table version, probably not to commit
let fieldChangeRow = getAuditDetailFieldChangeRow(audits[i]);
if(auditDetail)
if (auditDetail)
{
if(!fieldChangeRowsMap.has(id))
if (!fieldChangeRowsMap.has(id))
{
fieldChangeRowsMap.set(id, []);
}
@ -273,7 +277,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
for (let i = 0; i < unflattenedAudits.length; i++)
{
let id = unflattenedAudits[i].values.get("id");
if(fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
if (fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
{
const fieldChangeTable = (
<table style={{fontSize: "0.875rem"}} className="auditDetailTable" cellSpacing="0">
@ -288,11 +292,11 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
{fieldChangeRowsMap.get(id).map((row, key) => <React.Fragment key={key}>{row}</React.Fragment>)}
</tbody>
</table>
)
);
fieldChangeMap.set(id, fieldChangeTable);
}
}
setFieldChangeMap(fieldChangeMap)
setFieldChangeMap(fieldChangeMap);
//////////////////////////////
// group the audits by date //
@ -350,7 +354,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
const changeSortDirection = () =>
{
setAudits([]);
const newSortDirection = !sortDirection
const newSortDirection = !sortDirection;
setSortDirection(newSortDirection);
localStorage.setItem("audit.sortDirection", String(newSortDirection));
};

54
src/qqq/components/misc/GotoRecordDialog.tsx
View File

@ -61,7 +61,7 @@ const qController = Client.getInstance();
function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
{
const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
if(mdbMetaData && mdbMetaData.gotoFieldNames)
if (mdbMetaData && mdbMetaData.gotoFieldNames)
{
return (true);
}
@ -71,25 +71,25 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
function GotoRecordDialog(props: Props): JSX.Element
{
const fields: QFieldMetaData[] = []
const fields: QFieldMetaData[] = [];
let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
let addedPkey = false;
const mdbMetaData = props?.tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
if(mdbMetaData)
if (mdbMetaData)
{
if(mdbMetaData.gotoFieldNames)
if (mdbMetaData.gotoFieldNames)
{
for(let i = 0; i<mdbMetaData.gotoFieldNames.length; i++)
for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
{
// todo - multi-field keys!!
let fieldName = mdbMetaData.gotoFieldNames[i][0];
let field = props.tableMetaData.fields.get(fieldName);
if(field)
if (field)
{
fields.push(field);
if(field.name == pkey.name)
if (field.name == pkey.name)
{
addedPkey = true;
}
@ -98,17 +98,17 @@ function GotoRecordDialog(props: Props): JSX.Element
}
}
if(pkey && !addedPkey)
if (pkey && !addedPkey)
{
fields.unshift(pkey);
}
const makeInitialValues = () =>
{
const rs = {} as {[field: string]: string};
const rs = {} as { [field: string]: string };
fields.forEach((field) => rs[field.name] = "");
return (rs);
}
};
const [error, setError] = useState("");
const [values, setValues] = useState(makeInitialValues());
@ -118,49 +118,49 @@ function GotoRecordDialog(props: Props): JSX.Element
{
values[fieldName] = newValue;
setValues(JSON.parse(JSON.stringify(values)));
}
};
const close = () =>
{
setError("");
setValues(makeInitialValues());
props.closeHandler();
}
};
const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
{
// @ts-ignore
const targetId: string = e.target?.id;
if(e.key == "Esc")
if (e.key == "Esc")
{
if(props.mayClose)
if (props.mayClose)
{
close();
}
}
else if(e.key == "Enter" && targetId?.startsWith("gotoInput-"))
else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
{
const index = targetId?.replaceAll("gotoInput-", "");
document.getElementById("gotoButton-" + index).click();
}
}
};
const closeRequested = () =>
{
if(props.mayClose)
if (props.mayClose)
{
close();
}
}
};
const goClicked = async (fieldName: string) =>
{
setError("");
const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], 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)
const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
if (queryResult.length == 0)
{
setError("Record not found.");
@ -177,19 +177,19 @@ function GotoRecordDialog(props: Props): JSX.Element
setTimeout(() => setError(""), 3000);
}
}
catch(e)
catch (e)
{
// @ts-ignore
setError(`Error: ${(e && e.message) ? e.message : e}`);
setTimeout(() => setError(""), 6000);
}
}
};
if(props.tableMetaData)
if (props.tableMetaData)
{
if (fields.length == 0 && !error)
{
setError("This table is not configured for this feature.")
setError("This table is not configured for this feature.");
}
}
@ -244,7 +244,7 @@ function GotoRecordDialog(props: Props): JSX.Element
: <Box>&nbsp;</Box>
}
</Dialog>
)
);
}
interface GotoRecordButtonProps
@ -266,7 +266,7 @@ GotoRecordButton.defaultProps = {
export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
{
const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen)
const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen);
function openGoto()
{
@ -282,7 +282,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
return (
<React.Fragment>
{
props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} >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>

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

@ -29,7 +29,7 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
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 {Badge, ToggleButton, ToggleButtonGroup} from "@mui/material";
import {ToggleButton} from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
@ -38,9 +38,9 @@ import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Icon from "@mui/material/Icon";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import Tooltip from "@mui/material/Tooltip";
import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
import QContext from "QContext";
import colors from "qqq/assets/theme/base/colors";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
@ -51,6 +51,7 @@ import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFi
import XIcon from "qqq/components/query/XIcon";
import FilterUtils from "qqq/utils/qqq/FilterUtils";
import TableUtils from "qqq/utils/qqq/TableUtils";
import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
interface BasicAndAdvancedQueryControlsProps
{
@ -89,14 +90,14 @@ let debounceTimeout: string | number | NodeJS.Timeout;
*******************************************************************************/
const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
{
const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props
const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props;
/////////////////////
// state variables //
/////////////////////
const [defaultQuickFilterFieldNames, setDefaultQuickFilterFieldNames] = useState(getDefaultQuickFilterFieldNames(tableMetaData));
const [defaultQuickFilterFieldNameMap, setDefaultQuickFilterFieldNameMap] = useState(Object.fromEntries(defaultQuickFilterFieldNames.map(k => [k, true])));
const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null)
const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null);
const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
const [mouseOverElement, setMouseOverElement] = useState(null as string);
@ -122,7 +123,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{
return (mode);
}
}
};
});
@ -176,7 +177,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
let foundIndex = null;
for (let i = 0; i < queryFilter?.criteria?.length; i++)
{
if(queryFilter.criteria[i].fieldName == newCriteria.fieldName)
if (queryFilter.criteria[i].fieldName == newCriteria.fieldName)
{
queryFilter.criteria[i] = newCriteria;
found = true;
@ -185,9 +186,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
}
}
if(doClearCriteria)
if (doClearCriteria)
{
if(found)
if (found)
{
queryFilter.criteria.splice(foundIndex, 1);
setQueryFilter(queryFilter);
@ -195,9 +196,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
return;
}
if(!found)
if (!found)
{
if(!queryFilter.criteria)
if (!queryFilter.criteria)
{
queryFilter.criteria = [];
}
@ -205,9 +206,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
found = true;
}
if(found)
if (found)
{
clearTimeout(debounceTimeout)
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() =>
{
setQueryFilter(queryFilter);
@ -227,17 +228,17 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const matches: QFilterCriteriaWithId[] = [];
for (let i = 0; i < queryFilter?.criteria?.length; i++)
{
if(queryFilter.criteria[i].fieldName == fieldName)
if (queryFilter.criteria[i].fieldName == fieldName)
{
matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId);
}
}
if(matches.length == 0)
if (matches.length == 0)
{
return (null);
}
else if(matches.length == 1)
else if (matches.length == 1)
{
return (matches[0]);
}
@ -254,8 +255,8 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
*******************************************************************************/
const handleRemoveQuickFilterField = (fieldName: string): void =>
{
const index = quickFilterFieldNames.indexOf(fieldName)
if(index >= 0)
const index = quickFilterFieldNames.indexOf(fieldName);
if (index >= 0)
{
//////////////////////////////////////
// remove this field from the query //
@ -276,7 +277,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{
setAddQuickFilterMenu(event.currentTarget);
setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
}
};
/*******************************************************************************
@ -285,7 +286,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const closeAddQuickFilterMenu = () =>
{
setAddQuickFilterMenu(null);
}
};
/*******************************************************************************
@ -306,7 +307,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const fieldName = newValue ? newValue.fieldName : null;
if (fieldName)
{
if(defaultQuickFilterFieldNameMap[fieldName])
if (defaultQuickFilterFieldNameMap[fieldName])
{
return;
}
@ -322,12 +323,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// only do this when user has added the field (e.g., not when adding it because of a selected view or filter-in-url) //
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if(reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
if (reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
{
setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
}
}
else if(reason == "columnMenu")
else if (reason == "columnMenu")
{
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field //
@ -346,13 +347,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void =>
{
let fullFieldName = field.name;
if(table && table.name != tableMetaData.name)
if (table && table.name != tableMetaData.name)
{
fullFieldName = `${table.name}.${field.name}`;
}
addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
}
};
/*******************************************************************************
@ -385,15 +386,16 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{
queryFilter.criteria.splice(index, 1);
setQueryFilter(queryFilter);
}
};
/*******************************************************************************
** format the current query as a string for showing on-screen as a preview.
*******************************************************************************/
const queryToAdvancedString = () =>
const queryToAdvancedString = (thisQueryFilter: QQueryFilter, isSubFilter: boolean, subFilterOperator: string) =>
{
if(queryFilter == null || !queryFilter.criteria)
const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
if (thisQueryFilter == null || !thisQueryFilter.criteria)
{
return (<span></span>);
}
@ -402,18 +404,22 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
return (
<Box display="flex" flexWrap="wrap" fontSize="0.875rem">
{queryFilter.criteria.map((criteria, i) =>
{isSubFilter && (`${subFilterOperator} ( `)}
{thisQueryFilter.criteria.map((criteria, i) =>
{
const {criteriaIsValid} = validateCriteria(criteria, null);
if(criteriaIsValid)
if (criteriaIsValid)
{
counter++;
return (
<span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
{counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{queryFilter.booleanOperator}&nbsp;</span> : <span/>}
{counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
{FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
{mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}><XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>}
{canFilterWorkAsAdvanced && (
mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
<XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>
)}
</span>
);
}
@ -422,6 +428,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
return (<span />);
}
})}
{thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, i) =>
{
return (queryToAdvancedString(filter, true, thisQueryFilter.booleanOperator));
}))}
{isSubFilter && (")")}
</Box>
);
};
@ -434,16 +446,21 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{
if (newValue)
{
if(newValue == "basic")
if (newValue == "basic")
{
////////////////////////////////////////////////////////////////////////////////
// we're always allowed to go to advanced - //
// but if we're trying to go to basic, make sure the filter isn't too complex //
////////////////////////////////////////////////////////////////////////////////
const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
if (!canFilterWorkAsBasic)
{
console.log("Query cannot work as basic - so - not allowing toggle to basic.")
console.log("Query cannot work as basic - so - not allowing toggle to basic.");
return;
}
if (!canFilterWorkAsAdvanced)
{
console.log("Query cannot work as advanced - so - not allowing toggle to advanced.");
return;
}
@ -470,22 +487,29 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
*******************************************************************************/
const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) =>
{
if(!tableMetaData || !queryFilter)
if (!tableMetaData || !queryFilter)
{
return;
}
const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
if (!canFilterWorkAsBasic)
const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
if (!canFilterWorkAsBasic && canFilterWorkAsAdvanced)
{
console.log("query is too complex for basic - so - switching to advanced");
modeToggleClicked("advanced");
forceUpdate();
return;
}
if (!canFilterWorkAsAdvanced)
{
console.log("query is too complex for advanced - so disabling buttons");
modeToggleClicked("tooComplex");
forceUpdate();
return;
}
const modeToUse = newMode ?? mode;
if(modeToUse == "basic")
if (modeToUse == "basic")
{
for (let i = 0; i < queryFilter?.criteria?.length; i++)
{
@ -496,7 +520,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
}
}
}
}
};
/*******************************************************************************
@ -508,13 +532,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
for (let i = 0; i < queryFilter?.criteria?.length; i++)
{
const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null);
if(criteriaIsValid)
if (criteriaIsValid)
{
count++;
}
}
return count;
}
};
/*******************************************************************************
@ -523,11 +547,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
const handleSetSort = (field: QFieldMetaData, table: QTableMetaData, isAscending: boolean = true): void =>
{
const fullFieldName = table && table.name != tableMetaData.name ? `${table.name}.${field.name}` : field.name;
queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)]
queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)];
setQueryFilter(queryFilter);
forceUpdate();
}
};
/*******************************************************************************
@ -542,11 +566,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const isAscending = event.target.innerHTML == "arrow_upward";
const isDescending = event.target.innerHTML == "arrow_downward";
if(isAscending || isDescending)
if (isAscending || isDescending)
{
handleSetSort(field, table, isAscending);
}
}
};
/*******************************************************************************
@ -561,30 +585,30 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
setQueryFilter(queryFilter);
forceUpdate();
}
catch(e)
catch (e)
{
console.log(`Error toggling sort: ${e}`)
console.log(`Error toggling sort: ${e}`);
}
}
/////////////////////////////////
// set up the sort menu button //
/////////////////////////////////
let sortButtonContents = <>Sort...</>
if(queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
let sortButtonContents = <>Sort...</>;
if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
{
const orderBy = queryFilter.orderBys[0];
const orderByFieldName = orderBy.fieldName;
const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>
sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
// this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
////////////////////////////////////////////////////////////////////////////////////////////////////////////
const [lastIndex, setLastIndex] = useState(queryFilterJSON);
if(queryFilterJSON != lastIndex)
if (queryFilterJSON != lastIndex)
{
ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded");
setLastIndex(queryFilterJSON);
@ -594,16 +618,25 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
// set some status flags based on current filter //
///////////////////////////////////////////////////
const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0;
const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
const {canFilterWorkAsBasic, canFilterWorkAsAdvanced, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
let reasonWhyBasicIsDisabled = null;
if(reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
if (canFilterWorkAsAdvanced && reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
{
reasonWhyBasicIsDisabled = <>
Your current Filter cannot be managed using Basic mode because:
<ul style={{marginLeft: "1rem"}}>
{reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
</ul>
</>
</>;
}
if (!canFilterWorkAsAdvanced && reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
{
reasonWhyBasicIsDisabled = <>
Your current Filter is too complex to modify because:
<ul style={{marginLeft: "1rem"}}>
{reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
</ul>
</>;
}
const borderGray = colors.grayLines.main;
@ -646,7 +679,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
sx={{pl: 0.5, width: "10rem"}}
>
<ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton>
<ToggleButton value="advanced">Advanced</ToggleButton>
<ToggleButton value="advanced" disabled={!canFilterWorkAsAdvanced}>Advanced</ToggleButton>
</ToggleButtonGroup>
</Tooltip>
</Box>
@ -722,29 +755,29 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// advanced mode - 2 rows - one for Filter Builder button & sort control, 2nd row for the filter-detail box //
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
metaData && tableMetaData && mode == "advanced" &&
metaData && tableMetaData && (mode == "advanced" || mode == "tooComplex") &&
<Box borderRadius="0.75rem" border={`1px solid ${borderGray}`}>
<Box display="flex" justifyContent="space-between" alignItems="center">
{mode == "advanced" && (<Box display="flex" justifyContent="space-between" alignItems="center">
<Box p="0.5rem">
<Tooltip enterDelay={500} title="Build an advanced Filter" placement="top">
<>
<Button
className="filterBuilderButton"
onClick={(e) => openFilterBuilder(e)}
{... filterBuilderMouseEvents}
{...filterBuilderMouseEvents}
startIcon={<Icon>build</Icon>}
sx={{borderRadius: "0.75rem", padding: "0.5rem", pl: "1rem", fontSize: "0.875rem", fontWeight: 500, border: `1px solid ${accentColor}`, textTransform: "none"}}
>
Filter Builder
Filter Builder
{
countValidCriteria(queryFilter) > 0 &&
<Box {... filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge">
{countValidCriteria(queryFilter) }
</Box>
<Box {...filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge">
{countValidCriteria(queryFilter)}
</Box>
}
</Button>
{
hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {... filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {...filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
}
</>
</Tooltip>
@ -763,6 +796,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
{sortMenuComponent}
</Box>
</Box>
)}
<Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
{
<Box
@ -777,7 +811,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
pb={"0.125rem"}
boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
>
{queryToAdvancedString()}
{queryToAdvancedString(queryFilter, false, null)}
</Box>
}
</Box>

24
src/qqq/components/widgets/misc/DataBagViewer.tsx
View File

@ -25,14 +25,13 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
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 {Chip} from "@mui/material";
import Alert from "@mui/material/Alert";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemAvatar from "@mui/material/ListItemAvatar";
@ -42,8 +41,6 @@ import Snackbar from "@mui/material/Snackbar";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import Typography from "@mui/material/Typography";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import DataBagDataEditor, {DataBagDataEditorProps} from "qqq/components/databags/DataBagDataEditor";
import DataBagPreview from "qqq/components/databags/DataBagPreview";
import TabPanel from "qqq/components/misc/TabPanel";
@ -57,6 +54,8 @@ import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/ext-language_tools";
const qController = Client.getInstance();
@ -64,12 +63,11 @@ const qController = Client.getInstance();
// Declaring props types for ViewForm
interface Props
{
dataBagId: number
dataBagId: number;
}
DataBagViewer.defaultProps =
{
};
{};
export default function DataBagViewer({dataBagId}: Props): JSX.Element
{
@ -77,12 +75,12 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
const [currentVersionId , setCurrentVersionId] = useState(null as number);
const [currentVersionId, setCurrentVersionId] = useState(null as number);
const [notFoundMessage, setNotFoundMessage] = useState(null);
const [selectedTab, setSelectedTab] = useState(0);
const [editorProps, setEditorProps] = useState(null as DataBagDataEditorProps);
const [successText, setSuccessText] = useState(null as string);
const [failText, setFailText] = useState(null as string)
const [failText, setFailText] = useState(null as string);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@ -100,13 +98,13 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
const criteria = [new QFilterCriteria("dataBagId", QCriteriaOperator.EQUALS, [dataBagId])];
const orderBys = [new QFilterOrderBy("sequenceNo", false)];
const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
const versions = await qController.query("dataBagVersion", filter);
console.log("Fetched versions:");
console.log(versions);
setVersionRecordList(versions);
if(versions && versions.length > 0)
if (versions && versions.length > 0)
{
setCurrentVersionId(versions[0].values.get("id"));
const latestVersion = await qController.get("dataBagVersion", versions[0].values.get("id"));
@ -362,7 +360,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
<Typography variant="h6" pl={3}>Data Preview (Version {selectedVersionRecord?.values?.get("sequenceNo")})</Typography>
</Box>
<Box height="400px" overflow="auto" ml={1} fontSize="14px">
{loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} /> }
{loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} />}
{loadingSelectedVersion.isLoadingSlow() && <Box pl={3}>Loading...</Box>}
</Box>
</Grid>
@ -377,7 +375,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
<Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
<DataBagDataEditor
closeCallback={closeEditingScript}
{... editorProps}
{...editorProps}
/>
</Modal>
}

54
src/qqq/components/widgets/misc/ScriptViewer.tsx
View File

@ -46,9 +46,6 @@ import Snackbar from "@mui/material/Snackbar";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import Typography from "@mui/material/Typography";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import {Link} from "react-router-dom";
import TabPanel from "qqq/components/misc/TabPanel";
import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
import ScriptEditor, {ScriptEditorProps} from "qqq/components/scripts/ScriptEditor";
@ -65,6 +62,9 @@ import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-velocity";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";
import React, {useReducer, useState} from "react";
import AceEditor from "react-ace";
import {Link} from "react-router-dom";
import "ace-builds/src-noconflict/ext-language_tools";
const qController = Client.getInstance();
@ -97,16 +97,16 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
const [scriptLogs, setScriptLogs] = useState({} as any);
const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord)
const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[])
const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord);
const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[]);
const [availableFileNames, setAvailableFileNames] = useState([] as string[]);
const [selectedFileName, setSelectedFileName] = useState("");
const [currentVersionId , setCurrentVersionId] = useState(null as number);
const [currentVersionId, setCurrentVersionId] = useState(null as number);
const [notFoundMessage, setNotFoundMessage] = useState(null);
const [selectedTab, setSelectedTab] = useState(0);
const [editorProps, setEditorProps] = useState(null as ScriptEditorProps);
const [successText, setSuccessText] = useState(null as string);
const [failText, setFailText] = useState(null as string)
const [failText, setFailText] = useState(null as string);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@ -129,13 +129,13 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
let fileMode = scriptTypeRecord.values.get("fileMode");
let scriptTypeFileSchemaList: QRecord[] = null;
if(fileMode == 1) // SINGLE
if (fileMode == 1) // SINGLE
{
scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})];
}
else if(fileMode == 2) // MULTI_PRE_DEFINED
else if (fileMode == 2) // MULTI_PRE_DEFINED
{
const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")])
const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")]);
scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
}
else // MULTI AD_HOC
@ -145,22 +145,22 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
}
setScriptTypeFileSchemaList(scriptTypeFileSchemaList);
if(scriptTypeFileSchemaList)
if (scriptTypeFileSchemaList)
{
const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"))
const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"));
setAvailableFileNames(availableFileNames);
setSelectedFileName(availableFileNames[0])
setSelectedFileName(availableFileNames[0]);
}
const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
const orderBys = [new QFilterOrderBy("sequenceNo", false)];
const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
const versions = await qController.query("scriptRevision", filter);
console.log("Fetched versions:");
console.log(versions);
setVersionRecordList(versions);
if(versions && versions.length > 0)
if (versions && versions.length > 0)
{
selectVersion(versions[0]);
}
@ -253,31 +253,31 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
const handleSelectFile = (event: SelectChangeEvent) =>
{
setSelectedFileName(event.target.value);
}
};
const getSelectedFileCode = (): string =>
{
return (getSelectedVersionCode()[selectedFileName] ?? "");
}
};
const getSelectedFileType = (): string =>
{
for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
{
let name = scriptTypeFileSchemaList[i].values.get("name");
if(name == selectedFileName)
if (name == selectedFileName)
{
return (scriptTypeFileSchemaList[i].values.get("fileType"));
}
}
return ("javascript"); // have some default...
}
};
const getSelectedVersionCode = (): {[name: string]: string} =>
const getSelectedVersionCode = (): { [name: string]: string } =>
{
let rs: {[name: string]: string} = {}
let files = selectedVersionRecord?.associatedRecords?.get("files")
let rs: { [name: string]: string } = {};
let files = selectedVersionRecord?.associatedRecords?.get("files");
for (let j = 0; j < files?.length; j++)
{
@ -286,7 +286,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
}
return (rs);
}
};
function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
{
@ -344,11 +344,11 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
const getScriptLogs = (scriptRevisionId: number) =>
{
if(!scriptLogs[scriptRevisionId])
if (!scriptLogs[scriptRevisionId])
{
(async () =>
{
let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], "AND", 0, 100);
let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], null, "AND", 0, 100);
scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter);
setScriptLogs(scriptLogs);
forceUpdate();
@ -368,7 +368,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
}
return (<ScriptLogsView logs={logs} />);
}
};
let editButtonTooltip = "";
let editButtonText = "Create New Version";
@ -556,7 +556,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
<Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
<ScriptEditor
closeCallback={closeEditingScript}
{... editorProps}
{...editorProps}
/>
</Modal>
}