mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-22 07:08:44 +00:00
Compare commits
10 Commits
snapshot-f
...
snapshot-i
| Author | SHA1 | Date | |
|---|---|---|---|
| 84e627467f | |||
| 6c524c4eca | |||
| 5c442b2024 | |||
| b8c36bccd2 | |||
| 67feb95c60 | |||
| e34811354f | |||
| ef85f5cd40 | |||
| c36dfb5683 | |||
| 626ada3507 | |||
| 6cf1c2a0e4 |
@ -28,8 +28,7 @@
|
||||
},
|
||||
"plugins": [
|
||||
"react",
|
||||
"@typescript-eslint",
|
||||
"import"
|
||||
"@typescript-eslint"
|
||||
],
|
||||
"rules": {
|
||||
"brace-style": [
|
||||
@ -43,41 +42,6 @@
|
||||
"SwitchCase": 1
|
||||
}
|
||||
],
|
||||
"import/extensions": [
|
||||
"error",
|
||||
"ignorePackages",
|
||||
{
|
||||
"ts": "never",
|
||||
"tsx": "never",
|
||||
"js": "never"
|
||||
}
|
||||
],
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error",
|
||||
{
|
||||
"devDependencies": true
|
||||
}
|
||||
],
|
||||
"import/order": [
|
||||
"error",
|
||||
{
|
||||
"groups": [
|
||||
"builtin", // Built-in imports (come from NodeJS native) go first
|
||||
"external", // <- External imports
|
||||
"internal", // <- Absolute imports
|
||||
["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
|
||||
"index", // <- index imports
|
||||
"unknown"
|
||||
],
|
||||
"newlines-between": "never",
|
||||
"alphabetize": {
|
||||
/* sort in ascending order. Options: ["ignore", "asc", "desc"] */
|
||||
"order": "asc",
|
||||
/* ignore case. Options: [true, false] */
|
||||
"caseInsensitive": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"jsx-one-expression-per-line": "off",
|
||||
"max-len": "off",
|
||||
"no-console": "off",
|
||||
@ -114,15 +78,6 @@
|
||||
"quotes": [
|
||||
"error",
|
||||
"double"
|
||||
],
|
||||
"sort-imports": [
|
||||
"error",
|
||||
{
|
||||
"ignoreCase": false,
|
||||
"ignoreDeclarationSort": true,
|
||||
"ignoreMemberSort": true,
|
||||
"allowSeparatedGroups": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"settings": {
|
||||
|
||||
6820
package-lock.json
generated
6820
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.87",
|
||||
"@kingsrook/qqq-frontend-core": "1.0.90",
|
||||
"@mui/icons-material": "5.4.1",
|
||||
"@mui/material": "5.11.1",
|
||||
"@mui/styles": "5.11.1",
|
||||
|
||||
2
pom.xml
2
pom.xml
@ -66,7 +66,7 @@
|
||||
<dependency>
|
||||
<groupId>com.kingsrook.qqq</groupId>
|
||||
<artifactId>qqq-backend-core</artifactId>
|
||||
<version>feature-CE-876-develop-missing-widget-types-20240221.002945-1</version>
|
||||
<version>0.20.0-20240308.165846-65</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>org.slf4j</groupId>
|
||||
|
||||
@ -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
|
||||
@ -81,8 +81,12 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
|
||||
const newValue = qRecord.values.get("auditDetail.newValue");
|
||||
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);
|
||||
}
|
||||
@ -198,12 +202,12 @@ 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")]);
|
||||
@ -233,7 +237,7 @@ 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++)
|
||||
@ -252,7 +256,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
|
||||
detailMap.set(id, []);
|
||||
}
|
||||
|
||||
detailMap.get(id).push(auditDetail)
|
||||
detailMap.get(id).push(auditDetail);
|
||||
}
|
||||
|
||||
// table version, probably not to commit
|
||||
@ -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));
|
||||
};
|
||||
|
||||
@ -24,27 +24,38 @@ import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QF
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import * as Yup from "yup";
|
||||
|
||||
|
||||
type DisabledFields = { [fieldName: string]: boolean } | string[];
|
||||
|
||||
/*******************************************************************************
|
||||
** Meta-data to represent a single field in a table.
|
||||
**
|
||||
*******************************************************************************/
|
||||
class DynamicFormUtils
|
||||
{
|
||||
public static getFormData(qqqFormFields: QFieldMetaData[])
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static getFormData(qqqFormFields: QFieldMetaData[], disabledFields?: DisabledFields)
|
||||
{
|
||||
const dynamicFormFields: any = {};
|
||||
const formValidations: any = {};
|
||||
|
||||
qqqFormFields.forEach((field) =>
|
||||
{
|
||||
dynamicFormFields[field.name] = this.getDynamicField(field);
|
||||
formValidations[field.name] = this.getValidationForField(field);
|
||||
dynamicFormFields[field.name] = this.getDynamicField(field, disabledFields);
|
||||
formValidations[field.name] = this.getValidationForField(field, disabledFields);
|
||||
});
|
||||
|
||||
return {dynamicFormFields, formValidations};
|
||||
}
|
||||
|
||||
public static getDynamicField(field: QFieldMetaData)
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static getDynamicField(field: QFieldMetaData, disabledFields?: DisabledFields)
|
||||
{
|
||||
let fieldType: string;
|
||||
switch (field.type.toString())
|
||||
@ -85,15 +96,21 @@ class DynamicFormUtils
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////
|
||||
// this feels right, but... might be cases where it isn't //
|
||||
////////////////////////////////////////////////////////////
|
||||
const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
|
||||
const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
|
||||
|
||||
let label = field.label ? field.label : field.name;
|
||||
label += field.isRequired ? " *" : "";
|
||||
label += effectivelyIsRequired ? " *" : "";
|
||||
|
||||
return ({
|
||||
fieldMetaData: field,
|
||||
name: field.name,
|
||||
label: label,
|
||||
isRequired: field.isRequired,
|
||||
isEditable: field.isEditable,
|
||||
isRequired: effectivelyIsRequired,
|
||||
isEditable: effectiveIsEditable,
|
||||
type: fieldType,
|
||||
displayFormat: field.displayFormat,
|
||||
// todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
|
||||
@ -101,9 +118,16 @@ class DynamicFormUtils
|
||||
});
|
||||
}
|
||||
|
||||
public static getValidationForField(field: QFieldMetaData)
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static getValidationForField(field: QFieldMetaData, disabledFields?: DisabledFields)
|
||||
{
|
||||
if (field.isRequired)
|
||||
const effectiveIsEditable = field.isEditable && !this.isFieldDynamicallyDisabled(field.name, disabledFields);
|
||||
const effectivelyIsRequired = field.isRequired && effectiveIsEditable;
|
||||
|
||||
if (effectivelyIsRequired)
|
||||
{
|
||||
if (field.possibleValueSourceName)
|
||||
{
|
||||
@ -121,6 +145,10 @@ class DynamicFormUtils
|
||||
return (null);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static addPossibleValueProps(dynamicFormFields: any, qFields: QFieldMetaData[], tableName: string, processName: string, displayValues: Map<string, string>)
|
||||
{
|
||||
for (let i = 0; i < qFields.length; i++)
|
||||
@ -159,6 +187,29 @@ class DynamicFormUtils
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** private helper - check the disabled fields object (array or map), and return
|
||||
** true iff fieldName is in it.
|
||||
*******************************************************************************/
|
||||
private static isFieldDynamicallyDisabled(fieldName: string, disabledFields?: DisabledFields): boolean
|
||||
{
|
||||
if (!disabledFields)
|
||||
{
|
||||
return (false);
|
||||
}
|
||||
|
||||
if (Array.isArray(disabledFields))
|
||||
{
|
||||
return (disabledFields.indexOf(fieldName) > -1)
|
||||
}
|
||||
else
|
||||
{
|
||||
return (disabledFields[fieldName]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default DynamicFormUtils;
|
||||
|
||||
@ -22,8 +22,10 @@
|
||||
import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
|
||||
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 {QPossibleValue} from "@kingsrook/qqq-frontend-core/lib/model/QPossibleValue";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Alert} from "@mui/material";
|
||||
@ -32,22 +34,24 @@ import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {Form, Formik, useFormikContext} from "formik";
|
||||
import React, {useContext, useEffect, useReducer, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
import * as Yup from "yup";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import {Form, Formik, FormikErrors, FormikTouched, FormikValues, useFormikContext} from "formik";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import QDynamicForm from "qqq/components/forms/DynamicForm";
|
||||
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 RecordGridWidget, {ChildRecordListData} from "qqq/components/widgets/misc/RecordGridWidget";
|
||||
import HtmlUtils from "qqq/utils/HtmlUtils";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import TableUtils from "qqq/utils/qqq/TableUtils";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React, {useContext, useEffect, useReducer, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
import {Value} from "sass";
|
||||
import * as Yup from "yup";
|
||||
|
||||
interface Props
|
||||
{
|
||||
@ -58,6 +62,8 @@ interface Props
|
||||
defaultValues: { [key: string]: string };
|
||||
disabledFields: { [key: string]: boolean } | string[];
|
||||
isCopy?: boolean;
|
||||
onSubmitCallback?: (values: any) => void;
|
||||
overrideHeading?: string
|
||||
}
|
||||
|
||||
EntityForm.defaultProps = {
|
||||
@ -67,7 +73,8 @@ EntityForm.defaultProps = {
|
||||
closeModalHandler: null,
|
||||
defaultValues: {},
|
||||
disabledFields: {},
|
||||
isCopy: false
|
||||
isCopy: false,
|
||||
onSubmitCallback: null,
|
||||
};
|
||||
|
||||
function EntityForm(props: Props): JSX.Element
|
||||
@ -90,10 +97,15 @@ function EntityForm(props: Props): JSX.Element
|
||||
|
||||
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
|
||||
const [tableMetaData, setTableMetaData] = useState(null as QTableMetaData);
|
||||
const [metaData, setMetaData] = useState(null as QInstance);
|
||||
const [record, setRecord] = useState(null as QRecord);
|
||||
const [tableSections, setTableSections] = useState(null as QTableSection[]);
|
||||
const [renderedWidgetSections, setRenderedWidgetSections] = useState({} as {[name: string]: JSX.Element});
|
||||
const [childListWidgetData, setChildListWidgetData] = useState({} as {[name: string]: ChildRecordListData});
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
const [showEditChildForm, setShowEditChildForm] = useState(null as any);
|
||||
|
||||
const [notAllowedError, setNotAllowedError] = useState(null as string);
|
||||
|
||||
const {pageHeader, setPageHeader} = useContext(QContext);
|
||||
@ -101,6 +113,8 @@ function EntityForm(props: Props): JSX.Element
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const cardElevation = props.isModal ? 3 : 0;
|
||||
|
||||
////////////////////////////////////////////////////////////////////
|
||||
// first take defaultValues and disabledFields from props //
|
||||
// but, also allow them to be sent in the hash, in the format of: //
|
||||
@ -129,7 +143,131 @@ function EntityForm(props: Props): JSX.Element
|
||||
{}
|
||||
}
|
||||
|
||||
function getFormSection(values: any, touched: any, formFields: any, errors: any): JSX.Element
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function openAddChildRecord(name: string, widgetData: any)
|
||||
{
|
||||
let defaultValues = widgetData.defaultValuesForNewChildRecords;
|
||||
|
||||
let disabledFields = widgetData.disabledFieldsForNewChildRecords;
|
||||
if(!disabledFields)
|
||||
{
|
||||
disabledFields = widgetData.defaultValuesForNewChildRecords;
|
||||
}
|
||||
|
||||
doOpenEditChildForm(name, widgetData.childTableMetaData, null, defaultValues, disabledFields);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function openEditChildRecord(name: string, widgetData: any, rowIndex: number)
|
||||
{
|
||||
let defaultValues = widgetData.queryOutput.records[rowIndex].values;
|
||||
|
||||
let disabledFields = widgetData.disabledFieldsForNewChildRecords;
|
||||
if(!disabledFields)
|
||||
{
|
||||
disabledFields = widgetData.defaultValuesForNewChildRecords;
|
||||
}
|
||||
|
||||
doOpenEditChildForm(name, widgetData.childTableMetaData, rowIndex, defaultValues, disabledFields);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
const deleteChildRecord = (name: string, widgetData: any, rowIndex: number) =>
|
||||
{
|
||||
updateChildRecordList(name, "delete", rowIndex);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function doOpenEditChildForm(widgetName: string, table: QTableMetaData, rowIndex: number, defaultValues: any, disabledFields: any)
|
||||
{
|
||||
const showEditChildForm: any = {};
|
||||
showEditChildForm.widgetName = widgetName;
|
||||
showEditChildForm.table = table;
|
||||
showEditChildForm.rowIndex = rowIndex;
|
||||
showEditChildForm.defaultValues = defaultValues;
|
||||
showEditChildForm.disabledFields = disabledFields;
|
||||
setShowEditChildForm(showEditChildForm);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
const closeEditChildForm = (event: object, reason: string) =>
|
||||
{
|
||||
if (reason === "backdropClick" || reason === "escapeKeyDown")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
setShowEditChildForm(null);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function submitEditChildForm(values: any)
|
||||
{
|
||||
updateChildRecordList(showEditChildForm.widgetName, showEditChildForm.rowIndex == null ? "insert" : "edit", showEditChildForm.rowIndex, values);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function updateChildRecordList(widgetName: string, action: "insert" | "edit" | "delete", rowIndex?: number, values?: any)
|
||||
{
|
||||
const metaData = await qController.loadMetaData();
|
||||
const widgetMetaData = metaData.widgets.get(widgetName);
|
||||
|
||||
const newChildListWidgetData: {[name: string]: ChildRecordListData} = Object.assign({}, childListWidgetData)
|
||||
if(!newChildListWidgetData[widgetName].queryOutput.records)
|
||||
{
|
||||
newChildListWidgetData[widgetName].queryOutput.records = [];
|
||||
}
|
||||
|
||||
switch(action)
|
||||
{
|
||||
case "insert":
|
||||
newChildListWidgetData[widgetName].queryOutput.records.push({values: values})
|
||||
break;
|
||||
case "edit":
|
||||
newChildListWidgetData[widgetName].queryOutput.records[rowIndex] = {values: values};
|
||||
break;
|
||||
case "delete":
|
||||
newChildListWidgetData[widgetName].queryOutput.records.splice(rowIndex, 1);
|
||||
break;
|
||||
}
|
||||
newChildListWidgetData[widgetName].totalRows = newChildListWidgetData[widgetName].queryOutput.records.length;
|
||||
setChildListWidgetData(newChildListWidgetData);
|
||||
|
||||
const newRenderedWidgetSections = Object.assign({}, renderedWidgetSections)
|
||||
newRenderedWidgetSections[widgetName] = getWidgetSection(widgetMetaData, newChildListWidgetData[widgetName]);
|
||||
setRenderedWidgetSections(newRenderedWidgetSections);
|
||||
forceUpdate();
|
||||
|
||||
setShowEditChildForm(null);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** render a section (full of fields) as a form
|
||||
*******************************************************************************/
|
||||
function getFormSection(section: QTableSection, values: any, touched: any, formFields: any, errors: any, omitWrapper = false): JSX.Element
|
||||
{
|
||||
const formData: any = {};
|
||||
formData.values = values;
|
||||
@ -152,13 +290,68 @@ function EntityForm(props: Props): JSX.Element
|
||||
|
||||
if (!Object.keys(formFields).length)
|
||||
{
|
||||
return <div>Loading...</div>;
|
||||
return <div>Error: No form fields in section {section.name}</div>;
|
||||
}
|
||||
|
||||
const helpRoles = [props.id ? "EDIT_SCREEN" : "INSERT_SCREEN", "WRITE_SCREENS", "ALL_SCREENS"]
|
||||
return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />;
|
||||
|
||||
if(omitWrapper)
|
||||
{
|
||||
return <QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
|
||||
}
|
||||
|
||||
return <Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
|
||||
<MDTypography variant="h6" p={3} pb={1}>
|
||||
{section.label}
|
||||
</MDTypography>
|
||||
{getSectionHelp(section)}
|
||||
<Box pb={1} px={3}>
|
||||
<Box pb={"0.75rem"} width="100%">
|
||||
<QDynamicForm formData={formData} record={record} helpRoles={helpRoles} helpContentKeyPrefix={`table:${tableName};`} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** render a section as a widget
|
||||
*******************************************************************************/
|
||||
function getWidgetSection(widgetMetaData: QWidgetMetaData, widgetData: any): JSX.Element
|
||||
{
|
||||
widgetData.viewAllLink = null;
|
||||
widgetMetaData.showExportButton = false;
|
||||
|
||||
return <RecordGridWidget
|
||||
key={new Date().getTime()} // added so that editing values actually re-renders...
|
||||
widgetMetaData={widgetMetaData}
|
||||
data={widgetData}
|
||||
disableRowClick
|
||||
allowRecordEdit
|
||||
allowRecordDelete
|
||||
addNewRecordCallback={() => openAddChildRecord(widgetMetaData.name, widgetData)}
|
||||
editRecordCallback={(rowIndex) => openEditChildRecord(widgetMetaData.name, widgetData, rowIndex)}
|
||||
deleteRecordCallback={(rowIndex) => deleteChildRecord(widgetMetaData.name, widgetData, rowIndex)}
|
||||
/>
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** render a form section
|
||||
*******************************************************************************/
|
||||
function renderSection(section: QTableSection, values: FormikValues | Value, touched: FormikTouched<FormikValues> | Value, formFields: Map<string, any>, errors: FormikErrors<FormikValues> | Value)
|
||||
{
|
||||
if(section.fieldNames && section.fieldNames.length > 0)
|
||||
{
|
||||
return getFormSection(section, values, touched, formFields.get(section.name), errors);
|
||||
}
|
||||
else
|
||||
{
|
||||
return renderedWidgetSections[section.widgetName] ?? <Box>Loading {section.label}...</Box>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (!asyncLoadInited)
|
||||
{
|
||||
setAsyncLoadInited(true);
|
||||
@ -167,10 +360,16 @@ function EntityForm(props: Props): JSX.Element
|
||||
const tableMetaData = await qController.loadTableMetaData(tableName);
|
||||
setTableMetaData(tableMetaData);
|
||||
|
||||
const metaData = await qController.loadMetaData();
|
||||
setMetaData(metaData);
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
// define the sections, e.g., for the left-bar //
|
||||
/////////////////////////////////////////////////
|
||||
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()]);
|
||||
const tableSections = TableUtils.getSectionsForRecordSidebar(tableMetaData, [...tableMetaData.fields.keys()], (section: QTableSection) =>
|
||||
{
|
||||
return section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList" && metaData.widgets.get(section.widgetName)?.defaultValues?.has("manageAssociationName")
|
||||
});
|
||||
setTableSections(tableSections);
|
||||
|
||||
const fieldArray = [] as QFieldMetaData[];
|
||||
@ -263,6 +462,18 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////
|
||||
// if an override heading was passed in, use it. //
|
||||
///////////////////////////////////////////////////
|
||||
if(props.overrideHeading)
|
||||
{
|
||||
setFormTitle(props.overrideHeading);
|
||||
if (!props.isModal)
|
||||
{
|
||||
setPageHeader(props.overrideHeading);
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////////////
|
||||
// check capabilities & permissions //
|
||||
//////////////////////////////////////
|
||||
@ -309,27 +520,9 @@ function EntityForm(props: Props): JSX.Element
|
||||
const {
|
||||
dynamicFormFields,
|
||||
formValidations,
|
||||
} = DynamicFormUtils.getFormData(fieldArray);
|
||||
} = DynamicFormUtils.getFormData(fieldArray, disabledFields);
|
||||
DynamicFormUtils.addPossibleValueProps(dynamicFormFields, fieldArray, tableName, null, record ? record.displayValues : defaultDisplayValues);
|
||||
|
||||
if(disabledFields)
|
||||
{
|
||||
if(Array.isArray(disabledFields))
|
||||
{
|
||||
for (let i = 0; i < disabledFields.length; i++)
|
||||
{
|
||||
dynamicFormFields[disabledFields[i]].isEditable = false;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
for (let fieldName in disabledFields)
|
||||
{
|
||||
dynamicFormFields[fieldName].isEditable = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////////
|
||||
// group the formFields by section //
|
||||
/////////////////////////////////////
|
||||
@ -337,16 +530,28 @@ function EntityForm(props: Props): JSX.Element
|
||||
let t1sectionName;
|
||||
let t1section;
|
||||
const nonT1Sections: QTableSection[] = [];
|
||||
const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
|
||||
const newChildListWidgetData: {[name: string]: ChildRecordListData} = {};
|
||||
|
||||
for (let i = 0; i < tableSections.length; i++)
|
||||
{
|
||||
const section = tableSections[i];
|
||||
const sectionDynamicFormFields: any[] = [];
|
||||
|
||||
if (section.isHidden || !section.fieldNames)
|
||||
if (section.isHidden)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
const hasFields = section.fieldNames && section.fieldNames.length > 0;
|
||||
const hasChildRecordListWidget = section.widgetName && metaData.widgets.get(section.widgetName)?.type == "childRecordList"
|
||||
if(!hasFields && !hasChildRecordListWidget)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
if(hasFields)
|
||||
{
|
||||
for (let j = 0; j < section.fieldNames.length; j++)
|
||||
{
|
||||
const fieldName = section.fieldNames[j];
|
||||
@ -381,7 +586,14 @@ function EntityForm(props: Props): JSX.Element
|
||||
{
|
||||
dynamicFormFieldsBySection.set(section.name, sectionDynamicFormFields);
|
||||
}
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
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;
|
||||
}
|
||||
//////////////////////////////////////
|
||||
// capture the tier1 section's name //
|
||||
//////////////////////////////////////
|
||||
@ -395,16 +607,38 @@ function EntityForm(props: Props): JSX.Element
|
||||
nonT1Sections.push(section);
|
||||
}
|
||||
}
|
||||
|
||||
setT1SectionName(t1sectionName);
|
||||
setT1Section(t1section);
|
||||
setNonT1Sections(nonT1Sections);
|
||||
setFormFields(dynamicFormFieldsBySection);
|
||||
setValidations(Yup.object().shape(formValidations));
|
||||
setRenderedWidgetSections(newRenderedWidgetSections);
|
||||
setChildListWidgetData(newChildListWidgetData);
|
||||
|
||||
forceUpdate();
|
||||
})();
|
||||
}
|
||||
|
||||
|
||||
//////////////////////////////////////////////////////////////////
|
||||
// watch widget data - if they change, re-render those sections //
|
||||
//////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if(childListWidgetData)
|
||||
{
|
||||
const newRenderedWidgetSections: {[name: string]: JSX.Element} = {};
|
||||
for(let name in childListWidgetData)
|
||||
{
|
||||
const widgetMetaData = metaData.widgets.get(name);
|
||||
newRenderedWidgetSections[name] = getWidgetSection(widgetMetaData, childListWidgetData[name]);
|
||||
}
|
||||
setRenderedWidgetSections(newRenderedWidgetSections);
|
||||
}
|
||||
}, [childListWidgetData]);
|
||||
|
||||
|
||||
const handleCancelClicked = () =>
|
||||
{
|
||||
///////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -429,9 +663,23 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** event handler for the (Formik) Form.
|
||||
*******************************************************************************/
|
||||
const handleSubmit = async (values: any, actions: any) =>
|
||||
{
|
||||
actions.setSubmitting(true);
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if there's a callback (e.g., for a modal nested on another create/edit screen), then just pass our data back there anre return. //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(props.onSubmitCallback)
|
||||
{
|
||||
props.onSubmitCallback(values);
|
||||
return;
|
||||
}
|
||||
|
||||
await (async () =>
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -486,9 +734,34 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
}
|
||||
|
||||
// todo - associations + copy might be a "bad time"
|
||||
|
||||
const associationsToPost: any = {}
|
||||
let haveAssociationsToPost = false;
|
||||
for (let name of Object.keys(childListWidgetData))
|
||||
{
|
||||
const manageAssociationName = metaData.widgets.get(name)?.defaultValues?.get("manageAssociationName")
|
||||
if(!manageAssociationName)
|
||||
{
|
||||
console.log(`Cannot send association data to backend - missing a manageAssociationName defaultValue in widget meta data for widget name ${name}`);
|
||||
}
|
||||
associationsToPost[manageAssociationName] = [];
|
||||
haveAssociationsToPost = true;
|
||||
for(let i=0; i<childListWidgetData[name].queryOutput?.records?.length; i++)
|
||||
{
|
||||
associationsToPost[manageAssociationName].push(childListWidgetData[name].queryOutput.records[i].values);
|
||||
}
|
||||
}
|
||||
if(haveAssociationsToPost)
|
||||
{
|
||||
valuesToPost["associations"] = JSON.stringify(associationsToPost);
|
||||
}
|
||||
|
||||
if (props.id !== null && !props.isCopy)
|
||||
{
|
||||
// todo - audit that it's a dupe
|
||||
///////////////////////
|
||||
// perform an update //
|
||||
///////////////////////
|
||||
await qController
|
||||
.update(tableName, props.id, valuesToPost)
|
||||
.then((record) =>
|
||||
@ -499,8 +772,14 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
else
|
||||
{
|
||||
let warningMessage = null;
|
||||
if(record.warnings && record.warnings.length && record.warnings.length > 0)
|
||||
{
|
||||
warningMessage = record.warnings[0];
|
||||
}
|
||||
|
||||
const path = location.pathname.replace(/\/edit$/, "");
|
||||
navigate(path, {state: {updateSuccess: true}});
|
||||
navigate(path, {state: {updateSuccess: true, warning: warningMessage}});
|
||||
}
|
||||
})
|
||||
.catch((error) =>
|
||||
@ -522,6 +801,10 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
else
|
||||
{
|
||||
/////////////////////////////////
|
||||
// perform an insert //
|
||||
// todo - audit if it's a dupe //
|
||||
/////////////////////////////////
|
||||
await qController
|
||||
.create(tableName, valuesToPost)
|
||||
.then((record) =>
|
||||
@ -532,10 +815,16 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
else
|
||||
{
|
||||
let warningMessage = null;
|
||||
if(record.warnings && record.warnings.length && record.warnings.length > 0)
|
||||
{
|
||||
warningMessage = record.warnings[0];
|
||||
}
|
||||
|
||||
const path = props.isCopy ?
|
||||
location.pathname.replace(new RegExp(`/${props.id}/copy$`), "/" + record.values.get(tableMetaData.primaryKeyField))
|
||||
: location.pathname.replace(/create$/, record.values.get(tableMetaData.primaryKeyField));
|
||||
navigate(path, {state: {createSuccess: true}});
|
||||
navigate(path, {state: {createSuccess: true, warning: warningMessage}});
|
||||
}
|
||||
})
|
||||
.catch((error) =>
|
||||
@ -594,7 +883,6 @@ function EntityForm(props: Props): JSX.Element
|
||||
}
|
||||
else
|
||||
{
|
||||
const cardElevation = props.isModal ? 3 : 0;
|
||||
body = (
|
||||
<Box mb={3}>
|
||||
{
|
||||
@ -656,7 +944,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
t1sectionName && formFields ? (
|
||||
<Box px={3}>
|
||||
<Box pb={"0.25rem"} width="100%">
|
||||
{getFormSection(values, touched, formFields.get(t1sectionName), errors)}
|
||||
{getFormSection(t1section, values, touched, formFields.get(t1sectionName), errors, true)}
|
||||
</Box>
|
||||
</Box>
|
||||
) : null
|
||||
@ -665,17 +953,7 @@ function EntityForm(props: Props): JSX.Element
|
||||
</Box>
|
||||
{formFields && nonT1Sections.length ? nonT1Sections.map((section: QTableSection) => (
|
||||
<Box key={`edit-card-${section.name}`} pb={3}>
|
||||
<Card id={section.name} sx={{overflow: "visible", scrollMarginTop: "100px"}} elevation={cardElevation}>
|
||||
<MDTypography variant="h6" p={3} pb={1}>
|
||||
{section.label}
|
||||
</MDTypography>
|
||||
{getSectionHelp(section)}
|
||||
<Box pb={1} px={3}>
|
||||
<Box pb={"0.75rem"} width="100%">
|
||||
{getFormSection(values, touched, formFields.get(section.name), errors)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
{renderSection(section, values, touched, formFields, errors)}
|
||||
</Box>
|
||||
)) : null}
|
||||
|
||||
@ -690,6 +968,23 @@ function EntityForm(props: Props): JSX.Element
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
{
|
||||
showEditChildForm &&
|
||||
<Modal open={showEditChildForm as boolean} onClose={(event, reason) => closeEditChildForm(event, reason)}>
|
||||
<div className="modalEditForm">
|
||||
<EntityForm
|
||||
isModal={true}
|
||||
closeModalHandler={closeEditChildForm}
|
||||
table={showEditChildForm.table}
|
||||
defaultValues={showEditChildForm.defaultValues}
|
||||
disabledFields={showEditChildForm.disabledFields}
|
||||
onSubmitCallback={submitEditChildForm}
|
||||
overrideHeading={`${showEditChildForm.rowIndex != null ? "Editing" : "Creating New"} ${showEditChildForm.table.label}`}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
}
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
@ -71,7 +71,7 @@ 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;
|
||||
@ -108,7 +108,7 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
const rs = {} as { [field: string]: string };
|
||||
fields.forEach((field) => rs[field.name] = "");
|
||||
return (rs);
|
||||
}
|
||||
};
|
||||
|
||||
const [error, setError] = useState("");
|
||||
const [values, setValues] = useState(makeInitialValues());
|
||||
@ -118,14 +118,14 @@ 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>) =>
|
||||
{
|
||||
@ -144,7 +144,7 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
const index = targetId?.replaceAll("gotoInput-", "");
|
||||
document.getElementById("gotoButton-" + index).click();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const closeRequested = () =>
|
||||
{
|
||||
@ -152,15 +152,15 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
{
|
||||
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.");
|
||||
@ -183,13 +183,13 @@ function GotoRecordDialog(props: Props): JSX.Element
|
||||
setError(`Error: ${(e && e.message) ? e.message : e}`);
|
||||
setTimeout(() => setError(""), 6000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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> </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()
|
||||
{
|
||||
|
||||
@ -29,7 +29,6 @@ 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 Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Dialog from "@mui/material/Dialog";
|
||||
@ -38,9 +37,10 @@ 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 ToggleButton from "@mui/material/ToggleButton";
|
||||
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);
|
||||
@ -104,6 +105,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
|
||||
const {accentColor} = useContext(QContext);
|
||||
|
||||
/////////////////////////////////////////////////
|
||||
// temporary, until we implement sub-filtering //
|
||||
/////////////////////////////////////////////////
|
||||
const [isQueryTooComplex, setIsQueryTooComplex] = useState(false);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
// make some functions available to our parent - so it can tell us to do things //
|
||||
//////////////////////////////////////////////////////////////////////////////////
|
||||
@ -122,7 +128,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
{
|
||||
return (mode);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -207,7 +213,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
|
||||
if (found)
|
||||
{
|
||||
clearTimeout(debounceTimeout)
|
||||
clearTimeout(debounceTimeout);
|
||||
debounceTimeout = setTimeout(() =>
|
||||
{
|
||||
setQueryFilter(queryFilter);
|
||||
@ -254,7 +260,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
*******************************************************************************/
|
||||
const handleRemoveQuickFilterField = (fieldName: string): void =>
|
||||
{
|
||||
const index = quickFilterFieldNames.indexOf(fieldName)
|
||||
const index = quickFilterFieldNames.indexOf(fieldName);
|
||||
if (index >= 0)
|
||||
{
|
||||
//////////////////////////////////////
|
||||
@ -276,7 +282,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
{
|
||||
setAddQuickFilterMenu(event.currentTarget);
|
||||
setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -285,7 +291,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
const closeAddQuickFilterMenu = () =>
|
||||
{
|
||||
setAddQuickFilterMenu(null);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -352,7 +358,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
}
|
||||
|
||||
addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -360,8 +366,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
** filter panel
|
||||
*******************************************************************************/
|
||||
const openFilterBuilder = (e: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) =>
|
||||
{
|
||||
if (!isQueryTooComplex)
|
||||
{
|
||||
gridApiRef.current.showFilterPanel();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -385,13 +394,13 @@ 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) =>
|
||||
{
|
||||
if (queryFilter == null || !queryFilter.criteria)
|
||||
{
|
||||
@ -402,18 +411,21 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
|
||||
return (
|
||||
<Box display="flex" flexWrap="wrap" fontSize="0.875rem">
|
||||
{queryFilter.criteria.map((criteria, i) =>
|
||||
{thisQueryFilter.criteria?.map((criteria, i) =>
|
||||
{
|
||||
const {criteriaIsValid} = validateCriteria(criteria, null);
|
||||
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} </span> : <span/>}
|
||||
{counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator} </span> : <span />}
|
||||
{FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
|
||||
{mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}><XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>}
|
||||
{!isQueryTooComplex && (
|
||||
mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
|
||||
<XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>
|
||||
)}
|
||||
{counter > 1 && i == thisQueryFilter.criteria?.length - 1 && thisQueryFilter.subFilters?.length > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator} </span> : <span />}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@ -422,6 +434,18 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
return (<span />);
|
||||
}
|
||||
})}
|
||||
|
||||
{thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
|
||||
{
|
||||
return (
|
||||
<React.Fragment key={j}>
|
||||
{j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator} </span> : <span></span>}
|
||||
<span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
|
||||
{queryToAdvancedString(filter)}
|
||||
<span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
|
||||
</React.Fragment>
|
||||
);
|
||||
}))}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@ -443,7 +467,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
const {canFilterWorkAsBasic} = 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;
|
||||
}
|
||||
|
||||
@ -475,6 +499,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
return;
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////
|
||||
// set a flag if the query is 'too complex' //
|
||||
//////////////////////////////////////////////
|
||||
setIsQueryTooComplex(queryFilter.subFilters?.length > 0);
|
||||
|
||||
const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
|
||||
if (!canFilterWorkAsBasic)
|
||||
{
|
||||
@ -496,7 +525,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -513,9 +542,18 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
|
||||
/////////////////////////////////////////////////////////////
|
||||
// recursively add any children filters to the total count //
|
||||
/////////////////////////////////////////////////////////////
|
||||
for (let i = 0; i < queryFilter.subFilters?.length; i++)
|
||||
{
|
||||
count += countValidCriteria(queryFilter.subFilters[i]);
|
||||
}
|
||||
|
||||
return count;
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
** Event handler for setting the sort from that menu
|
||||
@ -523,11 +561,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();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -546,7 +584,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
{
|
||||
handleSetSort(field, table, isAscending);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -563,21 +601,21 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
console.log(`Error toggling sort: ${e}`)
|
||||
console.log(`Error toggling sort: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////
|
||||
// set up the sort menu button //
|
||||
/////////////////////////////////
|
||||
let sortButtonContents = <>Sort...</>
|
||||
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></>;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -594,16 +632,22 @@ 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 (isQueryTooComplex)
|
||||
{
|
||||
reasonWhyBasicIsDisabled = <>
|
||||
Your current Filter is too complex to modify because it contains Sub-filters.
|
||||
</>;
|
||||
}
|
||||
|
||||
const borderGray = colors.grayLines.main;
|
||||
@ -777,7 +821,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
|
||||
pb={"0.125rem"}
|
||||
boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
|
||||
>
|
||||
{queryToAdvancedString()}
|
||||
{queryToAdvancedString(queryFilter)}
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
|
||||
@ -169,15 +169,17 @@ export class AddNewRecordButton extends LabelComponent
|
||||
label: string;
|
||||
defaultValues: any;
|
||||
disabledFields: any;
|
||||
addNewRecordCallback?: () => void;
|
||||
|
||||
|
||||
constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues)
|
||||
constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues, addNewRecordCallback?: () => void)
|
||||
{
|
||||
super();
|
||||
this.table = table;
|
||||
this.label = label;
|
||||
this.defaultValues = defaultValues;
|
||||
this.disabledFields = disabledFields;
|
||||
this.addNewRecordCallback = addNewRecordCallback;
|
||||
}
|
||||
|
||||
openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
|
||||
@ -189,7 +191,7 @@ export class AddNewRecordButton extends LabelComponent
|
||||
{
|
||||
return (
|
||||
<Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="-0.5rem">
|
||||
<Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
|
||||
<Button sx={{mt: 0.75}} onClick={() => this.addNewRecordCallback ? this.addNewRecordCallback() : this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
|
||||
</Typography>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
|
||||
{
|
||||
@ -82,7 +80,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
|
||||
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,7 +98,7 @@ 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);
|
||||
|
||||
@ -25,28 +25,53 @@ import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import {DataGridPro, GridCallbackDetails, GridEventListener, GridFilterModel, gridPreferencePanelStateSelector, GridRowParams, GridSelectionModel, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, GridToolbarFilterButton, MuiEvent, useGridApiContext, useGridApiEventHandler, useGridSelector} from "@mui/x-data-grid-pro";
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import {useNavigate, Link} from "react-router-dom";
|
||||
import Widget, {AddNewRecordButton, LabelComponent} from "qqq/components/widgets/Widget";
|
||||
import {DataGridPro, GridCallbackDetails, GridEventListener, GridRenderCellParams, GridRowParams, GridToolbarContainer, MuiEvent, useGridApiContext, useGridApiEventHandler} from "@mui/x-data-grid-pro";
|
||||
import Widget, {AddNewRecordButton, LabelComponent, WidgetData} from "qqq/components/widgets/Widget";
|
||||
import DataGridUtils from "qqq/utils/DataGridUtils";
|
||||
import HtmlUtils from "qqq/utils/HtmlUtils";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import {Link, useNavigate} from "react-router-dom";
|
||||
|
||||
export interface ChildRecordListData extends WidgetData
|
||||
{
|
||||
title: string;
|
||||
queryOutput: {records: {values: any}[]}
|
||||
childTableMetaData: QTableMetaData;
|
||||
tablePath: string;
|
||||
viewAllLink: string;
|
||||
totalRows: number;
|
||||
canAddChildRecord: boolean;
|
||||
defaultValuesForNewChildRecords: {[fieldName: string]: any};
|
||||
disabledFieldsForNewChildRecords: {[fieldName: string]: any};
|
||||
}
|
||||
|
||||
interface Props
|
||||
{
|
||||
widgetMetaData: QWidgetMetaData;
|
||||
data: any;
|
||||
data: ChildRecordListData;
|
||||
addNewRecordCallback?: () => void;
|
||||
disableRowClick: boolean;
|
||||
allowRecordEdit: boolean;
|
||||
editRecordCallback?: (rowIndex: number) => void;
|
||||
allowRecordDelete: boolean;
|
||||
deleteRecordCallback?: (rowIndex: number) => void;
|
||||
}
|
||||
|
||||
RecordGridWidget.defaultProps = {};
|
||||
RecordGridWidget.defaultProps =
|
||||
{
|
||||
disableRowClick: false,
|
||||
allowRecordEdit: false,
|
||||
allowRecordDelete: false
|
||||
};
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
|
||||
function RecordGridWidget({widgetMetaData, data, addNewRecordCallback, disableRowClick, allowRecordEdit, editRecordCallback, allowRecordDelete, deleteRecordCallback}: Props): JSX.Element
|
||||
{
|
||||
const instance = useRef({timer: null});
|
||||
const [rows, setRows] = useState([]);
|
||||
@ -74,7 +99,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
|
||||
}
|
||||
|
||||
const tableMetaData = new QTableMetaData(data.childTableMetaData);
|
||||
const rows = DataGridUtils.makeRows(records, tableMetaData);
|
||||
const rows = DataGridUtils.makeRows(records, tableMetaData, true);
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////
|
||||
// note - tablePath may be null, if the user doesn't have access to the table. //
|
||||
@ -103,6 +128,28 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////
|
||||
// add actions cell, if available //
|
||||
////////////////////////////////////
|
||||
if(allowRecordEdit || allowRecordDelete)
|
||||
{
|
||||
columns.unshift({
|
||||
field: "_actions",
|
||||
type: "string",
|
||||
headerName: "Actions",
|
||||
sortable: false,
|
||||
filterable: false,
|
||||
width: allowRecordEdit && allowRecordDelete ? 80 : 50,
|
||||
renderCell: ((params: GridRenderCellParams) =>
|
||||
{
|
||||
return <Box>
|
||||
{allowRecordEdit && <IconButton onClick={() => editRecordCallback(params.row.__rowIndex)}><Icon>edit</Icon></IconButton>}
|
||||
{allowRecordDelete && <IconButton onClick={() => deleteRecordCallback(params.row.__rowIndex)}><Icon>delete</Icon></IconButton>}
|
||||
</Box>
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
setRows(rows);
|
||||
setRecords(records)
|
||||
setColumns(columns);
|
||||
@ -195,7 +242,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
|
||||
{
|
||||
disabledFields = data.defaultValuesForNewChildRecords;
|
||||
}
|
||||
labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields))
|
||||
labelAdditionalComponentsRight.push(new AddNewRecordButton(data.childTableMetaData, data.defaultValuesForNewChildRecords, "Add new", disabledFields, addNewRecordCallback))
|
||||
}
|
||||
|
||||
|
||||
@ -204,13 +251,18 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
|
||||
/////////////////////////////////////////////////////////////////
|
||||
const handleRowClick = (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) =>
|
||||
{
|
||||
if(disableRowClick)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
(async () =>
|
||||
{
|
||||
const qInstance = await qController.loadMetaData()
|
||||
let tablePath = qInstance.getTablePathByName(data.childTableMetaData.name)
|
||||
if(tablePath)
|
||||
{
|
||||
tablePath = `${tablePath}/${params.id}`;
|
||||
tablePath = `${tablePath}/${params.row[data.childTableMetaData.primaryKeyField]}`;
|
||||
DataGridUtils.handleRowClick(tablePath, event, gridMouseDownX, gridMouseDownY, navigate, instance);
|
||||
}
|
||||
})();
|
||||
@ -266,6 +318,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
|
||||
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
|
||||
|
||||
@ -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,8 +97,8 @@ 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);
|
||||
@ -106,7 +106,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
|
||||
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"));
|
||||
@ -135,7 +135,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
|
||||
}
|
||||
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
|
||||
@ -147,14 +147,14 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
|
||||
setScriptTypeFileSchemaList(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);
|
||||
@ -253,12 +253,12 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
|
||||
const handleSelectFile = (event: SelectChangeEvent) =>
|
||||
{
|
||||
setSelectedFileName(event.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const getSelectedFileCode = (): string =>
|
||||
{
|
||||
return (getSelectedVersionCode()[selectedFileName] ?? "");
|
||||
}
|
||||
};
|
||||
|
||||
const getSelectedFileType = (): string =>
|
||||
{
|
||||
@ -272,12 +272,12 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
|
||||
}
|
||||
|
||||
return ("javascript"); // have some default...
|
||||
}
|
||||
};
|
||||
|
||||
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)
|
||||
{
|
||||
@ -348,7 +348,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
|
||||
{
|
||||
(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";
|
||||
|
||||
@ -44,11 +44,9 @@ import LinearProgress from "@mui/material/LinearProgress";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridFilterMenuItem, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro";
|
||||
import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnVisibilityModel, GridDensity, GridEventListener, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarContainer, GridToolbarDensitySelector, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro";
|
||||
import {GridRowModel} from "@mui/x-data-grid/models/gridRows";
|
||||
import FormData from "form-data";
|
||||
import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
|
||||
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons";
|
||||
@ -78,6 +76,8 @@ import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
|
||||
import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
|
||||
import TableUtils from "qqq/utils/qqq/TableUtils";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
|
||||
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
|
||||
|
||||
const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId";
|
||||
const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
|
||||
@ -112,7 +112,7 @@ const getLoadingScreen = () =>
|
||||
return (<BaseLayout>
|
||||
|
||||
</BaseLayout>);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -246,7 +246,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// state of the page - e.g., have we loaded meta data? what about the initial view? or are we ready to render records. //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const [pageState, setPageState] = useState("initial" as PageState)
|
||||
const [pageState, setPageState] = useState("initial" as PageState);
|
||||
|
||||
/////////////////////////////////
|
||||
// meta-data and derived state //
|
||||
@ -260,8 +260,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////////////////////
|
||||
// state of the view of the query screen //
|
||||
///////////////////////////////////////////
|
||||
const [view, setView] = useState(defaultView)
|
||||
const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView))
|
||||
const [view, setView] = useState(defaultView);
|
||||
const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView));
|
||||
const [queryFilter, setQueryFilter] = useState(defaultView.queryFilter);
|
||||
const [queryColumns, setQueryColumns] = useState(defaultView.queryColumns);
|
||||
const [lastFetchedQFilterJSON, setLastFetchedQFilterJSON] = useState("");
|
||||
@ -309,7 +309,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
/////////////////////////////////////////
|
||||
const [columnStatsFieldName, setColumnStatsFieldName] = useState(null as string);
|
||||
const [columnStatsField, setColumnStatsField] = useState(null as QFieldMetaData);
|
||||
const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string)
|
||||
const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string);
|
||||
const [filterForColumnStats, setFilterForColumnStats] = useState(null as QQueryFilter);
|
||||
|
||||
///////////////////////////////////////////////////
|
||||
@ -353,14 +353,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////////////////////////////////////////////////////////////////////
|
||||
// add a LoadingState object, in case the initial loads (of meta data and view) are slow //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////
|
||||
const [pageLoadingState, _] = useState(new LoadingState(forceUpdate))
|
||||
const [pageLoadingState, _] = useState(new LoadingState(forceUpdate));
|
||||
|
||||
if (isFirstRenderAfterChangingTables)
|
||||
{
|
||||
setIsFirstRenderAfterChangingTables(false);
|
||||
|
||||
console.log("This is the first render after changing tables - so - setting state based on 'defaults' from localStorage");
|
||||
setView(defaultView)
|
||||
setView(defaultView);
|
||||
}
|
||||
|
||||
/*******************************************************************************
|
||||
@ -415,7 +415,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
}
|
||||
}
|
||||
return (false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -423,7 +423,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
*******************************************************************************/
|
||||
const prepQueryFilterForBackend = (sourceFilter: QQueryFilter) =>
|
||||
{
|
||||
const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.booleanOperator);
|
||||
const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
|
||||
for (let i = 0; i < sourceFilter?.criteria?.length; i++)
|
||||
{
|
||||
const criteria = sourceFilter.criteria[i];
|
||||
@ -442,7 +442,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName)
|
||||
const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName);
|
||||
filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field)));
|
||||
}
|
||||
}
|
||||
@ -451,7 +451,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
filterForBackend.limit = rowsPerPage;
|
||||
|
||||
return filterForBackend;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -475,7 +475,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////////////////////
|
||||
// build the export menu, for the header //
|
||||
///////////////////////////////////////////
|
||||
let exportMenu = <></>
|
||||
let exportMenu = <></>;
|
||||
try
|
||||
{
|
||||
const exportMenuItemRestProps =
|
||||
@ -485,7 +485,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
columnsModel: columnsModel,
|
||||
columnVisibilityModel: columnVisibilityModel,
|
||||
queryFilter: prepQueryFilterForBackend(queryFilter)
|
||||
}
|
||||
};
|
||||
|
||||
exportMenu = (<>
|
||||
<IconButton sx={{p: 0, fontSize: "0.75rem", mb: 1, color: colors.secondary.main, fontVariationSettings: "'wght' 100"}} onClick={openExportMenu}><Icon fontSize="small">save_alt</Icon></IconButton>
|
||||
@ -552,7 +552,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
<ul style={{marginLeft: "1rem"}}>
|
||||
{joinLabels.map((name) => <li key={name}>{name}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -586,7 +586,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
</Tooltip>
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
///////////////////////
|
||||
// Keyboard handling //
|
||||
@ -602,12 +602,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
|
||||
{
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
navigate(`${metaData?.getTablePathByName(tableName)}/create`);
|
||||
}
|
||||
else if (!e.metaKey && e.key === "r")
|
||||
{
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
updateTable("'r' keyboard event");
|
||||
}
|
||||
/*
|
||||
@ -620,23 +620,23 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
*/
|
||||
else if (!e.metaKey && e.key === "f")
|
||||
{
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
|
||||
// @ts-ignore
|
||||
if (basicAndAdvancedQueryControlsRef?.current?.getCurrentMode() == "advanced")
|
||||
{
|
||||
gridApiRef.current.showFilterPanel()
|
||||
}
|
||||
gridApiRef.current.showFilterPanel();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", down)
|
||||
document.addEventListener("keydown", down);
|
||||
return () =>
|
||||
{
|
||||
document.removeEventListener("keydown", down)
|
||||
}
|
||||
}, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess])
|
||||
document.removeEventListener("keydown", down);
|
||||
};
|
||||
}, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -645,7 +645,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
const urlLooksLikeProcess = (): boolean =>
|
||||
{
|
||||
return (pathParts[pathParts.length - 2] === tableName);
|
||||
}
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// monitor location changes - if our url looks like a savedView, then load that view, kinda //
|
||||
@ -703,7 +703,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
setView(view);
|
||||
setViewAsJson(JSON.stringify(view));
|
||||
localStorage.setItem(viewLocalStorageKey, JSON.stringify(view));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -712,10 +712,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
const handleColumnVisibilityChange = (columnVisibilityModel: GridColumnVisibilityModel) =>
|
||||
{
|
||||
setColumnVisibilityModel(columnVisibilityModel);
|
||||
queryColumns.updateVisibility(columnVisibilityModel)
|
||||
queryColumns.updateVisibility(columnVisibilityModel);
|
||||
|
||||
view.queryColumns = queryColumns;
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
|
||||
forceUpdate();
|
||||
};
|
||||
@ -735,7 +735,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
fieldName = `${table.name}.${field.name}`;
|
||||
}
|
||||
|
||||
view.queryColumns.setIsVisible(fieldName, newValue)
|
||||
view.queryColumns.setIsVisible(fieldName, newValue);
|
||||
|
||||
/////////////////////
|
||||
// update the grid //
|
||||
@ -745,13 +745,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
/////////////////////////////////////////////////
|
||||
// update the view (e.g., write local storage) //
|
||||
/////////////////////////////////////////////////
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
|
||||
///////////////////
|
||||
// ole' faithful //
|
||||
///////////////////
|
||||
forceUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -790,7 +790,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
setPinnedColumns(queryColumns.toGridPinnedColumns());
|
||||
setColumnVisibilityModel(queryColumns.toColumnVisibilityModel());
|
||||
setColumnsModel(columns);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -799,7 +799,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
const promptForTableVariantSelection = () =>
|
||||
{
|
||||
setTableVariantPromptOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -826,7 +826,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
}
|
||||
|
||||
return (rs);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1055,7 +1055,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
setRowsPerPage(size);
|
||||
|
||||
view.rowsPerPage = size;
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1064,11 +1064,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
const handlePinnedColumnsChange = (pinnedColumns: GridPinnedColumns) =>
|
||||
{
|
||||
setPinnedColumns(pinnedColumns);
|
||||
queryColumns.setPinnedLeftColumns(pinnedColumns.left)
|
||||
queryColumns.setPinnedRightColumns(pinnedColumns.right)
|
||||
queryColumns.setPinnedLeftColumns(pinnedColumns.left);
|
||||
queryColumns.setPinnedRightColumns(pinnedColumns.right);
|
||||
|
||||
view.queryColumns = queryColumns;
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1121,7 +1121,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
let selectedPrimaryKeys = new Set<string>();
|
||||
selectionModel.forEach((value: GridRowId, index: number) =>
|
||||
{
|
||||
checkboxesChecked++
|
||||
checkboxesChecked++;
|
||||
const valueToPush = latestQueryResults[value as number].values.get(tableMetaData.primaryKeyField);
|
||||
selectedPrimaryKeys.add(valueToPush as string);
|
||||
});
|
||||
@ -1150,7 +1150,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
queryColumns.updateColumnOrder(columnOrdering);
|
||||
|
||||
view.queryColumns = queryColumns;
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
};
|
||||
|
||||
|
||||
@ -1162,7 +1162,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
queryColumns.updateColumnWidth(params.colDef.field, params.width);
|
||||
|
||||
view.queryColumns = queryColumns;
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
};
|
||||
|
||||
|
||||
@ -1185,7 +1185,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
const fieldName = gridSort[i].field;
|
||||
const isAscending = gridSort[i].sort == "asc";
|
||||
queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending))
|
||||
queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending));
|
||||
}
|
||||
|
||||
//////////////////////////////////////////////////////////
|
||||
@ -1209,7 +1209,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
const handleColumnHeaderClick = (params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails): void =>
|
||||
{
|
||||
event.defaultMuiPrevented = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1227,7 +1227,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
|
||||
setRowsPerPage(view.rowsPerPage ?? defaultRowsPerPage);
|
||||
setMode(view.mode ?? defaultMode);
|
||||
setQuickFilterFieldNames(view.quickFilterFieldNames ?? []) // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData));
|
||||
setQuickFilterFieldNames(view.quickFilterFieldNames ?? []); // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData));
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// do this last - in case anything in the view got modified in any of those other doSet methods //
|
||||
@ -1240,7 +1240,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// @ts-ignore
|
||||
setTimeout(() => basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "activatedView"));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1287,14 +1287,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
if (!isFromActivateView)
|
||||
{
|
||||
view.queryFilter = queryFilter;
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// this force-update causes a re-render that'll see the changed filter hash/json string, and make an updateTable run (if appropriate) //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
forceUpdate();
|
||||
}
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
** Wrapper around setQueryColumns that also sets column models for the grid, puts
|
||||
@ -1327,9 +1327,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
if (!isFromActivateView)
|
||||
{
|
||||
view.queryColumns = queryColumns;
|
||||
doSetView(view)
|
||||
}
|
||||
doSetView(view);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1341,7 +1341,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
setQuickFilterFieldNames([...(names ?? [])]);
|
||||
|
||||
view.quickFilterFieldNames = names;
|
||||
doSetView(view)
|
||||
doSetView(view);
|
||||
};
|
||||
|
||||
|
||||
@ -1354,7 +1354,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
|
||||
view.mode = newValue;
|
||||
doSetView(view);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1372,7 +1372,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
}
|
||||
|
||||
return (selectedIds.length);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1403,7 +1403,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1568,7 +1568,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
|
||||
setCurrentSavedView(savedViewRecord);
|
||||
|
||||
const viewJson = savedViewRecord.values.get("viewJson")
|
||||
const viewJson = savedViewRecord.values.get("viewJson");
|
||||
const newView = RecordQueryView.buildFromJSON(viewJson);
|
||||
|
||||
activateView(newView);
|
||||
@ -1577,7 +1577,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
// todo can/should/does this move into the view's "identity"? //
|
||||
////////////////////////////////////////////////////////////////
|
||||
localStorage.setItem(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1587,7 +1587,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
setCurrentSavedView(null);
|
||||
localStorage.removeItem(currentSavedViewLocalStorageKey);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1603,7 +1603,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
newDefaultView.quickFilterFieldNames = [];
|
||||
newDefaultView.mode = defaultMode;
|
||||
return newDefaultView;
|
||||
}
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
** event handler for SavedViews component, to handle user selecting a view
|
||||
@ -1638,9 +1638,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////////////////////////
|
||||
// activate a new default view for the table //
|
||||
///////////////////////////////////////////////
|
||||
activateView(buildTableDefaultView(tableMetaData))
|
||||
}
|
||||
activateView(buildTableDefaultView(tableMetaData));
|
||||
}
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
** utility function to fetch a saved view from the backend.
|
||||
@ -1668,7 +1668,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
// such as, making values be what they'd be in the UI (not necessarily //
|
||||
// what they're like in the backend); similarly, set anything that's unset. //
|
||||
//////////////////////////////////////////////////////////////////////////////
|
||||
const viewJson = qRecord.values.get("viewJson")
|
||||
const viewJson = qRecord.values.get("viewJson");
|
||||
const newView = RecordQueryView.buildFromJSON(viewJson);
|
||||
|
||||
setWarningAlert(null);
|
||||
@ -1689,11 +1689,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
newView.queryColumns = QQueryColumns.buildDefaultForTable(tableMetaData);
|
||||
}
|
||||
|
||||
qRecord.values.set("viewJson", JSON.stringify(newView))
|
||||
qRecord.values.set("viewJson", JSON.stringify(newView));
|
||||
}
|
||||
|
||||
return (qRecord);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1798,7 +1798,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
const plural = removedFieldCount > 1;
|
||||
setWarningAlert(`${removedFieldCount} field${plural ? "s" : ""} that ${plural ? "were" : "was"} part of this view ${plural ? "are" : "is"} no longer in this table, and ${plural ? "were" : "was"} removed from this view (${[...removedFieldNames.values()].join(", ")}).`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -1834,8 +1834,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
///////////////////////////
|
||||
// open the filter panel //
|
||||
///////////////////////////
|
||||
gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
|
||||
}
|
||||
gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
|
||||
};
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
@ -2006,7 +2006,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
}
|
||||
else
|
||||
{
|
||||
gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
|
||||
gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
@ -2116,7 +2116,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
// this page //
|
||||
///////////////
|
||||
programmaticallySelectSomeOrAllRows();
|
||||
setSelectFullFilterState("checked")
|
||||
setSelectFullFilterState("checked");
|
||||
}
|
||||
else if (selectedIndex == 1)
|
||||
{
|
||||
@ -2124,7 +2124,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
// full query result //
|
||||
///////////////////////
|
||||
programmaticallySelectSomeOrAllRows();
|
||||
setSelectFullFilterState("filter")
|
||||
setSelectFullFilterState("filter");
|
||||
}
|
||||
else if (selectedIndex == 2)
|
||||
{
|
||||
@ -2138,7 +2138,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
/////////////////////
|
||||
// clear selection //
|
||||
/////////////////////
|
||||
setSelectFullFilterState("n/a")
|
||||
setSelectFullFilterState("n/a");
|
||||
setRowSelectionModel([]);
|
||||
setSelectedIds([]);
|
||||
}
|
||||
@ -2166,7 +2166,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
programmaticallySelectSomeOrAllRows(value);
|
||||
setSelectionSubsetSize(value);
|
||||
setSelectFullFilterState("filterSubset")
|
||||
setSelectFullFilterState("filterSubset");
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -2453,7 +2453,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
// so the useEffect that monitors location will see the change, and will set viewIdInLocation //
|
||||
// so upon a re-render we'll hit this block again. //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
setPageState("loadedMetaData")
|
||||
setPageState("loadedMetaData");
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2487,7 +2487,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
setTimeout(() =>
|
||||
{
|
||||
// @ts-ignore
|
||||
basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded")
|
||||
basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded");
|
||||
});
|
||||
|
||||
console.log("finished preparing grid, going to page state ready");
|
||||
@ -2511,11 +2511,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
{
|
||||
if (pageState == "ready")
|
||||
{
|
||||
pageLoadingState.setNotLoading()
|
||||
pageLoadingState.setNotLoading();
|
||||
|
||||
if (!tableVariantPromptOpen)
|
||||
{
|
||||
updateTable("pageState is now ready")
|
||||
updateTable("pageState is now ready");
|
||||
}
|
||||
}
|
||||
}, [pageState, tableVariantPromptOpen]);
|
||||
@ -2563,7 +2563,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
let gotoVariantSubHeader = <></>;
|
||||
if (tableMetaData?.usesVariants)
|
||||
{
|
||||
gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>
|
||||
gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -2615,7 +2615,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
|
||||
const viewDiffs: string[] = [];
|
||||
SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs)
|
||||
SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs);
|
||||
|
||||
if (viewDiffs.length == 0 && currentSavedView)
|
||||
{
|
||||
@ -2653,7 +2653,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
color: buttonColor,
|
||||
backgroundColor: buttonBackground,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (<Box order="2">
|
||||
<FieldListMenu
|
||||
@ -2668,7 +2668,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
|
||||
handleToggleField={handleChangeOneColumnVisibility}
|
||||
/>
|
||||
</Box>);
|
||||
}
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it //
|
||||
|
||||
@ -46,8 +46,6 @@ import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
import QContext from "QContext";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import AuditBody from "qqq/components/audits/AuditBody";
|
||||
@ -65,6 +63,8 @@ import Client from "qqq/utils/qqq/Client";
|
||||
import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
|
||||
import TableUtils from "qqq/utils/qqq/TableUtils";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import {useLocation, useNavigate, useParams} from "react-router-dom";
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
@ -864,7 +864,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
|
||||
}
|
||||
{
|
||||
warningMessage ?
|
||||
<Alert color="warning" sx={{mb: 3}} onClose={() =>
|
||||
<Alert color="warning" sx={{mb: 3}} icon={<Icon>warning</Icon>} onClose={() =>
|
||||
{
|
||||
setWarningMessage(null);
|
||||
}}>
|
||||
|
||||
@ -29,11 +29,11 @@ import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import {GridColDef, GridFilterItem, GridRowsProp, MuiEvent} from "@mui/x-data-grid-pro";
|
||||
import {GridFilterOperator} from "@mui/x-data-grid/models/gridFilterOperator";
|
||||
import {GridColumnHeaderParams} from "@mui/x-data-grid/models/params/gridColumnHeaderParams";
|
||||
import React from "react";
|
||||
import {Link, NavigateFunction} from "react-router-dom";
|
||||
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||
import {buildQGridPvsOperators, QGridBlobOperators, QGridBooleanOperators, QGridNumericOperators, QGridStringOperators} from "qqq/pages/records/query/GridFilterOperators";
|
||||
import ValueUtils from "qqq/utils/qqq/ValueUtils";
|
||||
import React from "react";
|
||||
import {Link, NavigateFunction} from "react-router-dom";
|
||||
|
||||
|
||||
const emptyApplyFilterFn = (filterItem: GridFilterItem, column: GridColDef): null => null;
|
||||
@ -118,7 +118,7 @@ export default class DataGridUtils
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData): GridRowsProp[] =>
|
||||
public static makeRows = (results: QRecord[], tableMetaData: QTableMetaData, allowEmptyId = false): GridRowsProp[] =>
|
||||
{
|
||||
const fields = [...tableMetaData.fields.values()];
|
||||
const rows = [] as any[];
|
||||
@ -159,9 +159,12 @@ export default class DataGridUtils
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
// DataGrid gets very upset about a null or undefined here, so, try to make it happier //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
if(!allowEmptyId)
|
||||
{
|
||||
row["id"] = "--";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rows.push(row);
|
||||
});
|
||||
@ -279,7 +282,7 @@ export default class DataGridUtils
|
||||
if (key === tableMetaData.primaryKeyField && linkBase)
|
||||
{
|
||||
column.renderCell = (cellValues: any) => (
|
||||
<Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link>
|
||||
cellValues.value ? <Link to={`${linkBase}${encodeURIComponent(cellValues.value)}`} onClick={(e) => e.stopPropagation()}>{cellValues.value}</Link> : ""
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -263,18 +263,24 @@ class FilterUtils
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] }
|
||||
public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; canFilterWorkAsAdvanced: boolean, reasonsWhyItCannot?: string[] }
|
||||
{
|
||||
const reasonsWhyItCannot: string[] = [];
|
||||
|
||||
if (filter == null)
|
||||
{
|
||||
return ({canFilterWorkAsBasic: true});
|
||||
return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
|
||||
}
|
||||
|
||||
if (filter.booleanOperator == "OR")
|
||||
{
|
||||
reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
|
||||
reasonsWhyItCannot.push("Filter uses the 'OR' operator.");
|
||||
}
|
||||
|
||||
if (filter.subFilters?.length > 0)
|
||||
{
|
||||
reasonsWhyItCannot.push("Filter contains sub-filters.");
|
||||
return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: false, reasonsWhyItCannot: reasonsWhyItCannot});
|
||||
}
|
||||
|
||||
if (filter.criteria)
|
||||
@ -309,11 +315,11 @@ class FilterUtils
|
||||
|
||||
if (reasonsWhyItCannot.length == 0)
|
||||
{
|
||||
return ({canFilterWorkAsBasic: true});
|
||||
return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
|
||||
}
|
||||
else
|
||||
{
|
||||
return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot});
|
||||
return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: true, reasonsWhyItCannot: reasonsWhyItCannot});
|
||||
}
|
||||
}
|
||||
|
||||
@ -372,7 +378,7 @@ class FilterUtils
|
||||
}
|
||||
else if (fieldMetaData.type == QFieldType.BOOLEAN)
|
||||
{
|
||||
labels.push(value == true ? "yes" : "no")
|
||||
labels.push(value == true ? "yes" : "no");
|
||||
}
|
||||
else if (fieldMetaData.type == QFieldType.DATE_TIME)
|
||||
{
|
||||
@ -450,7 +456,7 @@ class FilterUtils
|
||||
for (let i = 0; i < queryFilter?.orderBys?.length; i++)
|
||||
{
|
||||
const orderBy = queryFilter.orderBys[i];
|
||||
gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"})
|
||||
gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"});
|
||||
}
|
||||
return (gridSortModel);
|
||||
}
|
||||
@ -497,33 +503,33 @@ class FilterUtils
|
||||
case QCriteriaOperator.LESS_THAN:
|
||||
if (isDate || isDateTime)
|
||||
{
|
||||
return ("is before")
|
||||
return ("is before");
|
||||
}
|
||||
return ("less than");
|
||||
case QCriteriaOperator.LESS_THAN_OR_EQUALS:
|
||||
if (isDate)
|
||||
{
|
||||
return ("is on or before")
|
||||
return ("is on or before");
|
||||
}
|
||||
if (isDateTime)
|
||||
{
|
||||
return ("is at or before")
|
||||
return ("is at or before");
|
||||
}
|
||||
return ("less than or equals");
|
||||
case QCriteriaOperator.GREATER_THAN:
|
||||
if (isDate || isDateTime)
|
||||
{
|
||||
return ("is after")
|
||||
return ("is after");
|
||||
}
|
||||
return ("greater than or equals");
|
||||
case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
|
||||
if (isDate)
|
||||
{
|
||||
return ("is on or after")
|
||||
return ("is on or after");
|
||||
}
|
||||
if (isDateTime)
|
||||
{
|
||||
return ("is at or after")
|
||||
return ("is at or after");
|
||||
}
|
||||
return ("greater than or equals");
|
||||
case QCriteriaOperator.IS_BLANK:
|
||||
@ -539,7 +545,7 @@ class FilterUtils
|
||||
catch (e)
|
||||
{
|
||||
console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
|
||||
return criteria?.operator
|
||||
return criteria?.operator;
|
||||
}
|
||||
}
|
||||
|
||||
@ -567,7 +573,7 @@ class FilterUtils
|
||||
{valuesString && <Box display="inline" p="0.125rem" pr="0.5rem" sx={{background: "#009971"}} borderRadius="0 0.5rem 0.5rem 0"> {valuesString}</Box>}
|
||||
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@ -30,62 +30,102 @@ import {QueryJoin} from "@kingsrook/qqq-frontend-core/lib/model/query/QueryJoin"
|
||||
*******************************************************************************/
|
||||
class TableUtils
|
||||
{
|
||||
|
||||
/*******************************************************************************
|
||||
** For a table, return a sub-set of sections (originally meant for display in
|
||||
** the record-screen sidebars)
|
||||
**
|
||||
** If the table has no sections, one big "all fields" section is created.
|
||||
**
|
||||
** a list of "allowed field names" may be given, in which case, a section is only
|
||||
** included if it has a field in that list. e.g., an edit-screen, where disabled
|
||||
** fields aren't to be shown - if a section only has disabled fields, don't include it.
|
||||
**
|
||||
** By default sections w/ widget names are excluded -- but -- to include them,
|
||||
** provide the metaData plus list of allowedWidgetTypes.
|
||||
*******************************************************************************/
|
||||
public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedKeys: any = null): QTableSection[]
|
||||
public static getSectionsForRecordSidebar(tableMetaData: QTableMetaData, allowedFieldNames: any = null, additionalInclusionPredicate?: (section: QTableSection) => boolean): QTableSection[]
|
||||
{
|
||||
/////////////////////////////////////////////////////////////////
|
||||
// if the table has sections, then filter them and return some //
|
||||
/////////////////////////////////////////////////////////////////
|
||||
if (tableMetaData.sections)
|
||||
{
|
||||
if (allowedKeys)
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if there are filters (a list of allowed field names, or an additionalInclusionPredicate, //
|
||||
// then only return a subset of sections matching the filters //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (allowedFieldNames || additionalInclusionPredicate)
|
||||
{
|
||||
const allowedKeySet = new Set<string>();
|
||||
allowedKeys.forEach((k: string) => allowedKeySet.add(k));
|
||||
////////////////////////////////////////////////////////////////
|
||||
// put the field names in a set, for better inclusion testing //
|
||||
////////////////////////////////////////////////////////////////
|
||||
const allowedFieldNameSet = new Set<string>();
|
||||
if(allowedFieldNames)
|
||||
{
|
||||
allowedFieldNames.forEach((k: string) => allowedFieldNameSet.add(k));
|
||||
}
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
// loop over the sections, deciding which ones to include in the return list //
|
||||
///////////////////////////////////////////////////////////////////////////////
|
||||
const allowedSections: QTableSection[] = [];
|
||||
|
||||
for (let i = 0; i < tableMetaData.sections.length; i++)
|
||||
{
|
||||
const section = tableMetaData.sections[i];
|
||||
if (section.fieldNames)
|
||||
let includeSection = false;
|
||||
|
||||
for (let j = 0; j < section.fieldNames?.length; j++)
|
||||
{
|
||||
for (let j = 0; j < section.fieldNames.length; j++)
|
||||
if (allowedFieldNameSet.has(section.fieldNames[j]))
|
||||
{
|
||||
if (allowedKeySet.has(section.fieldNames[j]))
|
||||
{
|
||||
allowedSections.push(section);
|
||||
includeSection = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (additionalInclusionPredicate && additionalInclusionPredicate(section))
|
||||
{
|
||||
includeSection = true;
|
||||
}
|
||||
|
||||
if(includeSection)
|
||||
{
|
||||
allowedSections.push(section);
|
||||
}
|
||||
}
|
||||
|
||||
console.log("allowedSections length: " + allowedSections.length);
|
||||
return (allowedSections);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
////////////////////////////////////////////////////////////////
|
||||
// if there are no filters to apply, then return all sections //
|
||||
////////////////////////////////////////////////////////////////
|
||||
return (tableMetaData.sections);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// else, if the table had no sections, then make a pseudo-one with either all of the fields, //
|
||||
// or a subset based on the allowedFieldNames //
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
let fieldNames = [...tableMetaData.fields.keys()];
|
||||
if (allowedKeys)
|
||||
if (allowedFieldNames)
|
||||
{
|
||||
fieldNames = [];
|
||||
for (const fieldName in tableMetaData.fields.keys())
|
||||
{
|
||||
if (allowedKeys[fieldName])
|
||||
if (allowedFieldNames[fieldName])
|
||||
{
|
||||
fieldNames.push(fieldName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ([new QTableSection({
|
||||
iconName: "description", label: "All Fields", name: "allFields", fieldNames: [...fieldNames],
|
||||
})]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
|
||||
Reference in New Issue
Block a user