From 246c7223818c338568e83673e345d80a45c5a787 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Fri, 19 Aug 2022 09:15:09 -0500 Subject: [PATCH] minor adjustments for field formats, possible values, faster feedback on process next/submit --- package.json | 2 +- src/qqq/components/QDynamicForm/index.tsx | 1 + .../QDynamicForm/utils/DynamicFormUtils.ts | 1 + .../components/QDynamicFormField/index.tsx | 13 +++- src/qqq/pages/entity-list/index.tsx | 59 +++++++++-------- src/qqq/pages/process-run/index.tsx | 63 +++++++++++-------- src/qqq/styles/qqq-override-styles.css | 5 ++ 7 files changed, 90 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index b4b223a..31d6da4 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@fullcalendar/interaction": "5.10.0", "@fullcalendar/react": "5.10.0", "@fullcalendar/timegrid": "5.10.0", - "@kingsrook/qqq-frontend-core": "1.0.9", + "@kingsrook/qqq-frontend-core": "1.0.10", "@mui/icons-material": "5.4.1", "@mui/material": "5.4.1", "@mui/styled-engine": "5.4.1", diff --git a/src/qqq/components/QDynamicForm/index.tsx b/src/qqq/components/QDynamicForm/index.tsx index 23c6fc5..71c5d17 100644 --- a/src/qqq/components/QDynamicForm/index.tsx +++ b/src/qqq/components/QDynamicForm/index.tsx @@ -111,6 +111,7 @@ function QDynamicForm(props: Props): JSX.Element label={field.label} isEditable={field.isEditable} name={fieldName} + displayFormat={field.displayFormat} value={values[fieldName]} error={errors[fieldName] && touched[fieldName]} bulkEditMode={bulkEditMode} diff --git a/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts b/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts index e5dc5d6..812fd77 100644 --- a/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts +++ b/src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts @@ -85,6 +85,7 @@ class DynamicFormUtils isRequired: field.isRequired, isEditable: field.isEditable, type: fieldType, + displayFormat: field.displayFormat, // todo invalidMsg: "Zipcode is not valid (e.g. 70000).", }); } diff --git a/src/qqq/components/QDynamicFormField/index.tsx b/src/qqq/components/QDynamicFormField/index.tsx index dc5a9ff..b521445 100644 --- a/src/qqq/components/QDynamicFormField/index.tsx +++ b/src/qqq/components/QDynamicFormField/index.tsx @@ -29,12 +29,14 @@ import MDInput from "components/MDInput"; import React, {useState} from "react"; import Grid from "@mui/material/Grid"; import Switch from "@mui/material/Switch"; +import {InputAdornment} from "@mui/material"; // Declaring props types for FormField interface Props { label: string; name: string; + displayFormat: string; type: string; isEditable?: boolean; [key: string]: any; @@ -43,7 +45,7 @@ interface Props } function QDynamicFormField({ - label, name, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, ...rest + label, name, displayFormat, bulkEditMode, bulkEditSwitchChangeHandler, type, isEditable, ...rest }: Props): JSX.Element { const [switchChecked, setSwitchChecked] = useState(false); @@ -56,9 +58,16 @@ function QDynamicFormField({ inputLabelProps.shrink = true; } + const inputProps = {}; + if (displayFormat && displayFormat.startsWith("$")) + { + // @ts-ignore + inputProps.startAdornment = $; + } + const field = () => ( <> - + {!isDisabled &&
} diff --git a/src/qqq/pages/entity-list/index.tsx b/src/qqq/pages/entity-list/index.tsx index 7adbbb6..d184814 100644 --- a/src/qqq/pages/entity-list/index.tsx +++ b/src/qqq/pages/entity-list/index.tsx @@ -218,7 +218,7 @@ function EntityList({table}: Props): JSX.Element let criteria = new QFilterCriteria(item.columnField, operator, [item.value]); if (operator === QCriteriaOperator.IS_BLANK || operator === QCriteriaOperator.IS_NOT_BLANK) { - criteria = new QFilterCriteria(item.columnField, translateCriteriaOperator(item.operatorValue), null); + criteria = new QFilterCriteria(item.columnField, operator, null); } qFilter.addCriteria(criteria); }); @@ -272,7 +272,6 @@ function EntityList({table}: Props): JSX.Element }); const fields = [...tableMetaData.fields.values()]; - const rows = [] as any[]; results.forEach((record) => { @@ -302,33 +301,37 @@ function EntityList({table}: Props): JSX.Element let columnType = "string"; let columnWidth = 200; - switch (field.type) + + if (!field.possibleValueSourceName) { - case QFieldType.DECIMAL: - case QFieldType.INTEGER: - columnType = "number"; - columnWidth = 100; + switch (field.type) + { + case QFieldType.DECIMAL: + case QFieldType.INTEGER: + columnType = "number"; + columnWidth = 100; - if (key === tableMetaData.primaryKeyField && field.label.length < 3) - { + if (key === tableMetaData.primaryKeyField && field.label.length < 3) + { + columnWidth = 75; + } + + break; + case QFieldType.DATE: + columnType = "date"; + columnWidth = 100; + break; + case QFieldType.DATE_TIME: + columnType = "dateTime"; + columnWidth = 200; + break; + case QFieldType.BOOLEAN: + columnType = "boolean"; columnWidth = 75; - } - - break; - case QFieldType.DATE: - columnType = "date"; - columnWidth = 100; - break; - case QFieldType.DATE_TIME: - columnType = "dateTime"; - columnWidth = 200; - break; - case QFieldType.BOOLEAN: - columnType = "boolean"; - columnWidth = 75; - break; - default: - // noop - leave as string + break; + default: + // noop - leave as string + } } const column = { @@ -336,11 +339,15 @@ function EntityList({table}: Props): JSX.Element type: columnType, headerName: field.label, width: columnWidth, + renderCell: null as any, }; if (key === tableMetaData.primaryKeyField) { columns.splice(0, 0, column); + column.renderCell = (cellValues: any) => ( + {cellValues.value} + ); } else { diff --git a/src/qqq/pages/process-run/index.tsx b/src/qqq/pages/process-run/index.tsx index cb9ace8..8d3137f 100644 --- a/src/qqq/pages/process-run/index.tsx +++ b/src/qqq/pages/process-run/index.tsx @@ -58,6 +58,7 @@ import MDTypography from "../../../components/MDTypography"; import Footer from "examples/Footer"; import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; import Navbar from "qqq/components/Navbar"; +import BaseLayout from "qqq/components/BaseLayout"; interface Props { @@ -530,12 +531,13 @@ function ProcessRun({process}: Props): JSX.Element if (lastProcessResponse) { setLastProcessResponse(null); - setQJobRunning(null); + if (lastProcessResponse instanceof QJobComplete) { const qJobComplete = lastProcessResponse as QJobComplete; console.log("Setting new step."); + setJobUUID(null); setNewStep(qJobComplete.nextStep); setProcessValues(qJobComplete.values); // console.log(`Updated process values: ${JSON.stringify(qJobComplete.values)}`); @@ -544,6 +546,7 @@ function ProcessRun({process}: Props): JSX.Element { const qJobStarted = lastProcessResponse as QJobStarted; setJobUUID(qJobStarted.jobUUID); + console.log("setting need to check because started"); setNeedToCheckJobStatus(true); } else if (lastProcessResponse instanceof QJobRunning) @@ -551,12 +554,14 @@ function ProcessRun({process}: Props): JSX.Element const qJobRunning = lastProcessResponse as QJobRunning; setQJobRunning(qJobRunning); setQJobRunningDate(new Date()); + console.log("setting need to check because running"); setNeedToCheckJobStatus(true); } else if (lastProcessResponse instanceof QJobError) { const qJobError = lastProcessResponse as QJobError; console.log(`Got an error from the backend... ${qJobError.error}`); + setJobUUID(null); setProcessError(qJobError.error); } } @@ -567,21 +572,26 @@ function ProcessRun({process}: Props): JSX.Element ///////////////////////////////////////////////////////////////////////// useEffect(() => { + console.log("In effect for checking status"); if (needToCheckJobStatus) { + console.log(" and the bool was true"); setNeedToCheckJobStatus(false); - (async () => + if (jobUUID) { - setTimeout(async () => + (async () => { - const processResponse = await QClient.getInstance().processJobStatus( - processName, - processUUID, - jobUUID, - ); - setLastProcessResponse(processResponse); - }, 1500); - })(); + setTimeout(async () => + { + const processResponse = await QClient.getInstance().processJobStatus( + processName, + processUUID, + jobUUID, + ); + setLastProcessResponse(processResponse); + }, 1500); + })(); + } } }, [needToCheckJobStatus]); @@ -685,20 +695,24 @@ function ProcessRun({process}: Props): JSX.Element "content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366", }; - console.log("Calling processStep..."); - const processResponse = await QClient.getInstance().processStep( - processName, - processUUID, - activeStep.name, - formData, - formDataHeaders, - ); - setLastProcessResponse(processResponse); + setLastProcessResponse(new QJobRunning({message: "Working..."})); + + setTimeout(async () => + { + console.log("Calling processStep..."); + const processResponse = await QClient.getInstance().processStep( + processName, + processUUID, + activeStep.name, + formData, + formDataHeaders, + ); + setLastProcessResponse(processResponse); + }); }; return ( - - + (
- + {steps.map((step) => ( @@ -795,8 +809,7 @@ function ProcessRun({process}: Props): JSX.Element -