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

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

Browse Source
This commit is contained in:
darin.kelkhoff
2022-08-19 09:15:09 -05:00
parent 3a53a418ac
commit 246c722381
7 changed files with 90 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

1
src/qqq/components/QDynamicForm/index.tsx
View File

@ -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}

1
src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts
View File

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

13
src/qqq/components/QDynamicFormField/index.tsx
View File

@ -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>}

11
src/qqq/pages/entity-list/index.tsx
View File

@ -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,6 +301,9 @@ function EntityList({table}: Props): JSX.Element
let columnType = "string";
let columnWidth = 200;
if (!field.possibleValueSourceName)
{
switch (field.type)
{
case QFieldType.DECIMAL:
@ -330,17 +332,22 @@ function EntityList({table}: Props): JSX.Element
default:
// noop - leave as string
}
}
const column = {
field: field.name,
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
{

25
src/qqq/pages/process-run/index.tsx
View File

@ -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,9 +572,13 @@ 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);
if (jobUUID)
{
(async () =>
{
setTimeout(async () =>
@ -583,6 +592,7 @@ function ProcessRun({process}: Props): JSX.Element
}, 1500);
})();
}
}
}, [needToCheckJobStatus]);
//////////////////////////////////////////////////////////////////////////////////////////
@ -685,6 +695,10 @@ function ProcessRun({process}: Props): JSX.Element
"content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366",
};
setLastProcessResponse(new QJobRunning({message: "Working..."}));
setTimeout(async () =>
{
console.log("Calling processStep...");
const processResponse = await QClient.getInstance().processStep(
processName,
@ -694,11 +708,11 @@ function ProcessRun({process}: Props): JSX.Element
formDataHeaders,
);
setLastProcessResponse(processResponse);
});
};
return (
<DashboardLayout>
<Navbar />
<BaseLayout>
<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 />
</DashboardLayout>
</BaseLayout>
);
}

5
src/qqq/styles/qqq-override-styles.css
View File

@ -99,3 +99,8 @@
{
background-position-y: 1.4rem !important;
}
.MuiInputAdornment-sizeMedium *
{
font-size: .875rem !important;
}