minor adjustments for field formats, possible values, faster feedback on process next/submit

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",

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}

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).",
       });
    }

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 = <InputAdornment position="start">$</InputAdornment>;
+   }
+
    const field = () => (
       <>
-         <Field {...rest} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} fullWidth disabled={isDisabled} />
+         <Field {...rest} name={name} type={type} as={MDInput} variant="standard" label={label} InputLabelProps={inputLabelProps} InputProps={inputProps} fullWidth disabled={isDisabled} />
          <MDBox mt={0.75}>
             <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
                {!isDisabled && <div className="fieldErrorMessage"><ErrorMessage name={name} /></div>}

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:
+               switch (field.type)
-               case QFieldType.INTEGER:
+               {
-                  columnType = "number";
+                  case QFieldType.DECIMAL:
-                  columnWidth = 100;
+                  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;
-
+                  default:
-                  break;
+                  // noop - leave as string
-               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
             }
 
             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) => (
+                  <Link to={cellValues.value}>{cellValues.value}</Link>
+               );
             }
             else
             {

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(
+               setTimeout(async () =>
-                  processName,
+               {
-                  processUUID,
+                  const processResponse = await QClient.getInstance().processJobStatus(
-                  jobUUID,
+                     processName,
-               );
+                     processUUID,
-               setLastProcessResponse(processResponse);
+                     jobUUID,
-            }, 1500);
+                  );
-         })();
+                  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...");
+      setLastProcessResponse(new QJobRunning({message: "Working..."}));
-      const processResponse = await QClient.getInstance().processStep(
+
-         processName,
+      setTimeout(async () =>
-         processUUID,
+      {
-         activeStep.name,
+         console.log("Calling processStep...");
-         formData,
+         const processResponse = await QClient.getInstance().processStep(
-         formDataHeaders,
+            processName,
-      );
+            processUUID,
-      setLastProcessResponse(processResponse);
+            activeStep.name,
+            formData,
+            formDataHeaders,
+         );
+         setLastProcessResponse(processResponse);
+      });
    };
 
    return (
-      <DashboardLayout>
+      <BaseLayout>
-         <Navbar />
          <MDBox py={3} mb={20}>
             <Grid
                container
@@ -718,7 +732,7 @@ function ProcessRun({process}: Props): JSX.Element
                         values, errors, touched, isSubmitting,
                      }) => (
                         <Form id={formId} autoComplete="off">
-                           <Card sx={{height: "100%"}}>
+                           <Card sx={{minHeight: "calc(100vh - 400px)"}}>
                               <MDBox mx={2} mt={-3}>
                                  <Stepper activeStep={activeStepIndex} alternativeLabel>
                                     {steps.map((step) => (
@@ -795,8 +809,7 @@ function ProcessRun({process}: Props): JSX.Element
                </Grid>
             </Grid>
          </MDBox>
-         <Footer />
+      </BaseLayout>
-      </DashboardLayout>
    );
 }
 

src/qqq/styles/qqq-override-styles.css

@@ -98,4 +98,9 @@
 .MuiFormControl-root
 {
    background-position-y: 1.4rem !important;
+}
+
+.MuiInputAdornment-sizeMedium *
+{
+   font-size: .875rem !important;
 }