mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
Merge remote-tracking branch 'remotes/origin/feature/QQQ-28-bulk-ops-frontend' into feature/sprint-7-integration
This commit is contained in:
@ -64,6 +64,7 @@
|
||||
"no-unused-vars": "off",
|
||||
"no-plusplus": "off",
|
||||
"no-underscore-dangle": "off",
|
||||
"no-else-return": "off",
|
||||
"spaced-comment": "off",
|
||||
"object-curly-spacing": [
|
||||
"error",
|
||||
|
||||
@ -74,7 +74,10 @@ function EntityForm({id}: Props): JSX.Element
|
||||
sortedKeys.forEach((key) =>
|
||||
{
|
||||
const fieldMetaData = tableMetaData.fields.get(key);
|
||||
fieldArray.push(fieldMetaData);
|
||||
if (fieldMetaData.isEditable)
|
||||
{
|
||||
fieldArray.push(fieldMetaData);
|
||||
}
|
||||
});
|
||||
|
||||
if (id !== null)
|
||||
|
||||
@ -1,16 +1,22 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
@ -21,32 +27,38 @@ import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// NewUser page components
|
||||
import FormField from "layouts/pages/users/new-user/components/FormField";
|
||||
import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
|
||||
import {useFormikContext} from "formik";
|
||||
import React from "react";
|
||||
import QDynamicFormField from "qqq/components/QDynamicFormField";
|
||||
|
||||
interface Props {
|
||||
formLabel?: string;
|
||||
formData: any;
|
||||
primaryKeyId?: string;
|
||||
bulkEditMode?: boolean;
|
||||
bulkEditSwitchChangeHandler?: any
|
||||
}
|
||||
|
||||
function QDynamicForm(props: Props): JSX.Element
|
||||
{
|
||||
const {formData, formLabel, primaryKeyId} = props;
|
||||
const {
|
||||
formData, formLabel, primaryKeyId, bulkEditMode, bulkEditSwitchChangeHandler,
|
||||
} = props;
|
||||
const {
|
||||
formFields, values, errors, touched,
|
||||
} = formData;
|
||||
|
||||
/*
|
||||
const {
|
||||
firstName: firstNameV,
|
||||
lastName: lastNameV,
|
||||
company: companyV,
|
||||
email: emailV,
|
||||
password: passwordV,
|
||||
repeatPassword: repeatPasswordV,
|
||||
} = values;
|
||||
*/
|
||||
const formikProps = useFormikContext();
|
||||
|
||||
const fileChanged = (event: React.FormEvent<HTMLInputElement>, field: any) =>
|
||||
{
|
||||
formikProps.setFieldValue(field.name, event.currentTarget.files[0]);
|
||||
};
|
||||
|
||||
const bulkEditSwitchChanged = (name: string, value: boolean) =>
|
||||
{
|
||||
bulkEditSwitchChangeHandler(name, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<MDBox>
|
||||
@ -73,93 +85,46 @@ function QDynamicForm(props: Props): JSX.Element
|
||||
{
|
||||
values[fieldName] = "";
|
||||
}
|
||||
|
||||
if (field.type === "file")
|
||||
{
|
||||
return (
|
||||
<Grid item xs={12} sm={6} key={fieldName}>
|
||||
<MDBox mb={1.5}>
|
||||
<input
|
||||
id={fieldName}
|
||||
name={fieldName}
|
||||
type="file"
|
||||
onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
|
||||
/>
|
||||
<MDBox mt={0.75}>
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
|
||||
{errors[fieldName] && <span>You must select a file to proceed</span>}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
// todo? inputProps={{ autoComplete: "" }}
|
||||
// todo? placeholder={password.placeholder}
|
||||
// todo? success={!errors[fieldName] && touched[fieldName]}
|
||||
return (
|
||||
<Grid item xs={12} sm={6} key={fieldName}>
|
||||
<FormField
|
||||
<QDynamicFormField
|
||||
type={field.type}
|
||||
label={field.label}
|
||||
name={fieldName}
|
||||
value={values[fieldName]}
|
||||
error={errors[fieldName] && touched[fieldName]}
|
||||
bulkEditMode={bulkEditMode}
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
/>
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
{/*
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormField
|
||||
type={firstName.type}
|
||||
label={firstName.label}
|
||||
name={firstName.name}
|
||||
value={firstNameV}
|
||||
placeholder={firstName.placeholder}
|
||||
error={errors.firstName && touched.firstName}
|
||||
success={firstNameV.length > 0 && !errors.firstName}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormField
|
||||
type={lastName.type}
|
||||
label={lastName.label}
|
||||
name={lastName.name}
|
||||
value={lastNameV}
|
||||
placeholder={lastName.placeholder}
|
||||
error={errors.lastName && touched.lastName}
|
||||
success={lastNameV.length > 0 && !errors.lastName}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormField
|
||||
type={company.type}
|
||||
label={company.label}
|
||||
name={company.name}
|
||||
value={companyV}
|
||||
placeholder={company.placeholder}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormField
|
||||
type={email.type}
|
||||
label={email.label}
|
||||
name={email.name}
|
||||
value={emailV}
|
||||
placeholder={email.placeholder}
|
||||
error={errors.email && touched.email}
|
||||
success={emailV.length > 0 && !errors.email}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormField
|
||||
type={password.type}
|
||||
label={password.label}
|
||||
name={password.name}
|
||||
value={passwordV}
|
||||
placeholder={password.placeholder}
|
||||
error={errors.password && touched.password}
|
||||
success={passwordV.length > 0 && !errors.password}
|
||||
inputProps={{ autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormField
|
||||
type={repeatPassword.type}
|
||||
label={repeatPassword.label}
|
||||
name={repeatPassword.name}
|
||||
value={repeatPasswordV}
|
||||
placeholder={repeatPassword.placeholder}
|
||||
error={errors.repeatPassword && touched.repeatPassword}
|
||||
success={repeatPasswordV.length > 0 && !errors.repeatPassword}
|
||||
inputProps={{ autoComplete: "" }}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
*/}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
@ -168,6 +133,9 @@ function QDynamicForm(props: Props): JSX.Element
|
||||
QDynamicForm.defaultProps = {
|
||||
formLabel: undefined,
|
||||
primaryKeyId: undefined,
|
||||
bulkEditMode: false,
|
||||
bulkEditSwitchChangeHandler: () =>
|
||||
{},
|
||||
};
|
||||
|
||||
export default QDynamicForm;
|
||||
|
||||
@ -39,47 +39,81 @@ class DynamicFormUtils
|
||||
|
||||
qqqFormFields.forEach((field) =>
|
||||
{
|
||||
let fieldType: string;
|
||||
switch (field.type.toString())
|
||||
{
|
||||
case QFieldType.DECIMAL:
|
||||
case QFieldType.INTEGER:
|
||||
fieldType = "number";
|
||||
break;
|
||||
case QFieldType.DATE_TIME:
|
||||
fieldType = "datetime-local";
|
||||
break;
|
||||
case QFieldType.PASSWORD:
|
||||
case QFieldType.TIME:
|
||||
case QFieldType.DATE:
|
||||
fieldType = field.type.toString();
|
||||
break;
|
||||
case QFieldType.TEXT:
|
||||
case QFieldType.HTML:
|
||||
case QFieldType.STRING:
|
||||
default:
|
||||
fieldType = "text";
|
||||
}
|
||||
|
||||
let label = field.label ? field.label : field.name;
|
||||
label += field.isRequired ? " *" : "";
|
||||
|
||||
dynamicFormFields[field.name] = {
|
||||
name: field.name,
|
||||
label: label,
|
||||
isRequired: field.isRequired,
|
||||
type: fieldType,
|
||||
// todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
|
||||
};
|
||||
|
||||
if (field.isRequired)
|
||||
{
|
||||
formValidations[field.name] = Yup.string().required(`${field.label} is required.`);
|
||||
}
|
||||
dynamicFormFields[field.name] = this.getDynamicField(field);
|
||||
formValidations[field.name] = this.getValidationForField(field);
|
||||
});
|
||||
|
||||
return {dynamicFormFields, formValidations};
|
||||
}
|
||||
|
||||
public static getDynamicField(field: QFieldMetaData)
|
||||
{
|
||||
let fieldType: string;
|
||||
switch (field.type.toString())
|
||||
{
|
||||
case QFieldType.DECIMAL:
|
||||
case QFieldType.INTEGER:
|
||||
fieldType = "number";
|
||||
break;
|
||||
case QFieldType.DATE_TIME:
|
||||
fieldType = "datetime-local";
|
||||
break;
|
||||
case QFieldType.PASSWORD:
|
||||
case QFieldType.TIME:
|
||||
case QFieldType.DATE:
|
||||
fieldType = field.type.toString();
|
||||
break;
|
||||
case QFieldType.BLOB:
|
||||
fieldType = "file";
|
||||
break;
|
||||
case QFieldType.TEXT:
|
||||
case QFieldType.HTML:
|
||||
case QFieldType.STRING:
|
||||
default:
|
||||
fieldType = "text";
|
||||
}
|
||||
|
||||
let label = field.label ? field.label : field.name;
|
||||
label += field.isRequired ? " *" : "";
|
||||
|
||||
return ({
|
||||
name: field.name,
|
||||
label: label,
|
||||
isRequired: field.isRequired,
|
||||
type: fieldType,
|
||||
// todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
|
||||
});
|
||||
}
|
||||
|
||||
public static getValidationForField(field: QFieldMetaData)
|
||||
{
|
||||
if (field.isRequired)
|
||||
{
|
||||
return (Yup.string().required(`${field.label} is required.`));
|
||||
}
|
||||
return (null);
|
||||
}
|
||||
|
||||
public static getFormDataForUploadForm(fieldName: string, fieldLabel: string, isRequired: boolean = true)
|
||||
{
|
||||
const dynamicFormFields: any = {};
|
||||
const formValidations: any = {};
|
||||
|
||||
dynamicFormFields[fieldName] = {
|
||||
name: fieldName,
|
||||
label: fieldLabel,
|
||||
isRequired: isRequired,
|
||||
type: "file",
|
||||
// todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
|
||||
};
|
||||
|
||||
if (isRequired)
|
||||
{
|
||||
formValidations[fieldName] = Yup.string().required(`${fieldLabel} is required.`);
|
||||
}
|
||||
|
||||
return {dynamicFormFields, formValidations};
|
||||
}
|
||||
}
|
||||
|
||||
export default DynamicFormUtils;
|
||||
|
||||
107
src/qqq/components/QDynamicFormField/index.tsx
Normal file
107
src/qqq/components/QDynamicFormField/index.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// formik components
|
||||
import {ErrorMessage, Field} from "formik";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import QDynamicForm from "qqq/components/QDynamicForm";
|
||||
import React, {useState} from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Declaring props types for FormField
|
||||
interface Props
|
||||
{
|
||||
label: string;
|
||||
name: string;
|
||||
[key: string]: any;
|
||||
bulkEditMode?: boolean;
|
||||
bulkEditSwitchChangeHandler?: any
|
||||
}
|
||||
|
||||
function QDynamicFormField({
|
||||
label, name, bulkEditMode, bulkEditSwitchChangeHandler, ...rest
|
||||
}: Props): JSX.Element
|
||||
{
|
||||
const [switchChecked, setSwitchChecked] = useState(false);
|
||||
const [isDisabled, setIsDisabled] = useState(bulkEditMode);
|
||||
|
||||
const field = () => (
|
||||
<>
|
||||
<Field {...rest} name={name} as={MDInput} variant="standard" label={label} fullWidth disabled={isDisabled} />
|
||||
<MDBox mt={0.75}>
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
|
||||
{!isDisabled && <ErrorMessage name={name} />}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</>
|
||||
);
|
||||
|
||||
const bulkEditSwitchChanged = () =>
|
||||
{
|
||||
const newSwitchValue = !switchChecked;
|
||||
setSwitchChecked(newSwitchValue);
|
||||
setIsDisabled(!newSwitchValue);
|
||||
bulkEditSwitchChangeHandler(name, newSwitchValue);
|
||||
};
|
||||
|
||||
if (bulkEditMode)
|
||||
{
|
||||
return (
|
||||
<MDBox mb={1.5}>
|
||||
<Grid container>
|
||||
<Grid item xs={1} alignItems="baseline" pt={1}>
|
||||
<Switch
|
||||
id={`bulkEditSwitch-${name}`}
|
||||
checked={switchChecked}
|
||||
onClick={bulkEditSwitchChanged}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={11}>
|
||||
<label htmlFor={`bulkEditSwitch-${name}`}>
|
||||
{field()}
|
||||
</label>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
return (
|
||||
<MDBox mb={1.5}>
|
||||
{field()}
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
QDynamicFormField.defaultProps = {
|
||||
bulkEditMode: false,
|
||||
bulkEditSwitchChangeHandler: () =>
|
||||
{},
|
||||
};
|
||||
|
||||
export default QDynamicFormField;
|
||||
@ -39,7 +39,6 @@ import {
|
||||
GridToolbarColumnsButton,
|
||||
GridToolbarContainer,
|
||||
GridToolbarDensitySelector,
|
||||
GridToolbarExport,
|
||||
GridToolbarExportContainer,
|
||||
GridToolbarFilterButton,
|
||||
GridExportMenuItemProps,
|
||||
@ -62,6 +61,7 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
|
||||
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import Navbar from "qqq/components/Navbar";
|
||||
import Button from "@mui/material/Button";
|
||||
import Footer from "../../components/Footer";
|
||||
import QProcessUtils from "../../utils/QProcessUtils";
|
||||
|
||||
@ -450,10 +450,82 @@ function EntityList({table}: Props): JSX.Element
|
||||
);
|
||||
}
|
||||
|
||||
function getNoOfSelectedRecords()
|
||||
{
|
||||
if (selectFullFilterState === "filter")
|
||||
{
|
||||
return (totalRecords);
|
||||
}
|
||||
|
||||
return (selectedIds.length);
|
||||
}
|
||||
|
||||
function getRecordsQueryString()
|
||||
{
|
||||
if (selectFullFilterState === "filter")
|
||||
{
|
||||
return `?recordsParam=filterJSON&filterJSON=${JSON.stringify(buildQFilter())}`;
|
||||
}
|
||||
|
||||
if (selectedIds.length > 0)
|
||||
{
|
||||
return `?recordsParam=recordIds&recordIds=${selectedIds.join(",")}`;
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
const bulkLoadClicked = () =>
|
||||
{
|
||||
document.location.href = `/processes/${tableName}.bulkInsert${getRecordsQueryString()}`;
|
||||
};
|
||||
|
||||
const bulkEditClicked = () =>
|
||||
{
|
||||
if (getNoOfSelectedRecords() === 0)
|
||||
{
|
||||
setAlertContent("No records were selected to Bulk Edit.");
|
||||
return;
|
||||
}
|
||||
document.location.href = `/processes/${tableName}.bulkEdit${getRecordsQueryString()}`;
|
||||
};
|
||||
|
||||
const bulkDeleteClicked = () =>
|
||||
{
|
||||
if (getNoOfSelectedRecords() === 0)
|
||||
{
|
||||
setAlertContent("No records were selected to Bulk Delete.");
|
||||
return;
|
||||
}
|
||||
document.location.href = `/processes/${tableName}.bulkDelete${getRecordsQueryString()}`;
|
||||
};
|
||||
|
||||
function CustomToolbar()
|
||||
{
|
||||
const [bulkActionsMenuAnchor, setBulkActionsMenuAnchor] = useState(null as HTMLElement);
|
||||
const bulkActionsMenuOpen = Boolean(bulkActionsMenuAnchor);
|
||||
|
||||
const openBulkActionsMenu = (event: React.MouseEvent<HTMLElement>) =>
|
||||
{
|
||||
setBulkActionsMenuAnchor(event.currentTarget);
|
||||
};
|
||||
|
||||
const closeBulkActionsMenu = () =>
|
||||
{
|
||||
setBulkActionsMenuAnchor(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<GridToolbarContainer>
|
||||
<div>
|
||||
<Button
|
||||
id="refresh-button"
|
||||
onClick={updateTable}
|
||||
>
|
||||
<Icon>refresh</Icon>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
<GridToolbarColumnsButton />
|
||||
<GridToolbarFilterButton />
|
||||
<GridToolbarDensitySelector />
|
||||
@ -461,6 +533,29 @@ function EntityList({table}: Props): JSX.Element
|
||||
<ExportMenuItem format="csv" />
|
||||
<ExportMenuItem format="xlsx" />
|
||||
</GridToolbarExportContainer>
|
||||
<div>
|
||||
<Button
|
||||
id="bulk-actions-button"
|
||||
onClick={openBulkActionsMenu}
|
||||
aria-controls={bulkActionsMenuOpen ? "basic-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={bulkActionsMenuOpen ? "true" : undefined}
|
||||
>
|
||||
<Icon>fact_check</Icon>
|
||||
Bulk Actions
|
||||
</Button>
|
||||
<Menu
|
||||
id="bulk-actions-menu"
|
||||
open={bulkActionsMenuOpen}
|
||||
anchorEl={bulkActionsMenuAnchor}
|
||||
onClose={closeBulkActionsMenu}
|
||||
MenuListProps={{"aria-labelledby": "bulk-actions-button"}}
|
||||
>
|
||||
<MenuItem onClick={bulkLoadClicked}>Bulk Load</MenuItem>
|
||||
<MenuItem onClick={bulkEditClicked}>Bulk Edit</MenuItem>
|
||||
<MenuItem onClick={bulkDeleteClicked}>Bulk Delete</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
<div>
|
||||
{
|
||||
selectFullFilterState === "checked" && (
|
||||
@ -503,21 +598,6 @@ function EntityList({table}: Props): JSX.Element
|
||||
);
|
||||
}
|
||||
|
||||
function getRecordsQueryString()
|
||||
{
|
||||
if (selectFullFilterState === "filter")
|
||||
{
|
||||
return `?recordsParam=filterJSON&filterJSON=${JSON.stringify(buildQFilter())}`;
|
||||
}
|
||||
|
||||
if (selectedIds.length > 0)
|
||||
{
|
||||
return `?recordsParam=recordIds&recordIds=${selectedIds.join(",")}`;
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
const renderActionsMenu = (
|
||||
<Menu
|
||||
anchorEl={actionsMenu}
|
||||
|
||||
@ -13,10 +13,10 @@
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import {useEffect, useState} from "react";
|
||||
import React, {useEffect, useState, Fragment} from "react";
|
||||
|
||||
// formik components
|
||||
import {Formik, Form} from "formik";
|
||||
import {Form, Formik, useFormikContext} from "formik";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
@ -36,7 +36,6 @@ import Footer from "examples/Footer";
|
||||
|
||||
// ProcessRun layout schemas for form and form fields
|
||||
import * as Yup from "yup";
|
||||
import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
|
||||
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
||||
import {QFrontendStepMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
|
||||
import {useLocation, useParams} from "react-router-dom";
|
||||
@ -45,113 +44,31 @@ import {QJobStarted} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJob
|
||||
import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
|
||||
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
|
||||
import {QJobRunning} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobRunning";
|
||||
import {
|
||||
DataGridPro, GridColDef, GridRowParams, GridRowsProp,
|
||||
} from "@mui/x-data-grid-pro";
|
||||
import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
|
||||
import {QFrontendComponent} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendComponent";
|
||||
import {QComponentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QComponentType";
|
||||
import FormData from "form-data";
|
||||
import QClient from "qqq/utils/QClient";
|
||||
import {CircularProgress} from "@mui/material";
|
||||
import QDynamicForm from "../../components/QDynamicForm";
|
||||
import MDTypography from "../../../components/MDTypography";
|
||||
|
||||
function getDynamicStepContent(
|
||||
stepIndex: number,
|
||||
step: any,
|
||||
formData: any,
|
||||
processError: string,
|
||||
processValues: any,
|
||||
recordConfig: any,
|
||||
): JSX.Element
|
||||
function logFormValidations(prefix: string, formValidations: any)
|
||||
{
|
||||
const {
|
||||
formFields, values, errors, touched,
|
||||
} = formData;
|
||||
// console.log(`in getDynamicStepContent: step label ${step?.label}`);
|
||||
|
||||
if (processError)
|
||||
{
|
||||
return (
|
||||
<>
|
||||
<MDTypography color="error" variant="h3">
|
||||
Error
|
||||
</MDTypography>
|
||||
<div>{processError}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (step === null)
|
||||
{
|
||||
console.log("in getDynamicStepContent. No step yet, so returning 'loading'");
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
console.log(`in getDynamicStepContent. the step looks like: ${JSON.stringify(step)}`);
|
||||
|
||||
return (
|
||||
<>
|
||||
{step.formFields && <QDynamicForm formData={formData} formLabel={step.label} />}
|
||||
{step.viewFields && (
|
||||
<div>
|
||||
{step.viewFields.map((field: QFieldMetaData) => (
|
||||
<div key={field.name}>
|
||||
<b>
|
||||
{field.label}
|
||||
:
|
||||
</b>
|
||||
{" "}
|
||||
{processValues[field.name]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{step.recordListFields && (
|
||||
<div>
|
||||
<b>Records</b>
|
||||
{" "}
|
||||
<br />
|
||||
<MDBox height="100%">
|
||||
<DataGridPro
|
||||
page={recordConfig.pageNo}
|
||||
disableSelectionOnClick
|
||||
autoHeight
|
||||
rows={recordConfig.rows}
|
||||
columns={recordConfig.columns}
|
||||
rowBuffer={10}
|
||||
rowCount={recordConfig.totalRecords}
|
||||
pageSize={recordConfig.rowsPerPage}
|
||||
rowsPerPageOptions={[10, 25, 50]}
|
||||
onPageSizeChange={recordConfig.handleRowsPerPageChange}
|
||||
onPageChange={recordConfig.handlePageChange}
|
||||
onRowClick={recordConfig.handleRowClick}
|
||||
paginationMode="server"
|
||||
pagination
|
||||
density="compact"
|
||||
loading={recordConfig.loading}
|
||||
/>
|
||||
</MDBox>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
console.log(`${prefix}: ${JSON.stringify(formValidations)} `);
|
||||
}
|
||||
|
||||
function trace(name: string, isComponent: boolean = false)
|
||||
{
|
||||
if (isComponent)
|
||||
{
|
||||
console.log(`COMPONENT: ${name}`);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log(` function: ${name}`);
|
||||
}
|
||||
}
|
||||
|
||||
const qController = new QController("");
|
||||
|
||||
function ProcessRun(): JSX.Element
|
||||
{
|
||||
const {processName} = useParams();
|
||||
|
||||
///////////////////
|
||||
// process state //
|
||||
///////////////////
|
||||
const [processUUID, setProcessUUID] = useState(null as string);
|
||||
const [jobUUID, setJobUUID] = useState(null as string);
|
||||
const [qJobRunning, setQJobRunning] = useState(null as QJobRunning);
|
||||
const [qJobRunningDate, setQJobRunningDate] = useState(null as Date);
|
||||
const [activeStepIndex, setActiveStepIndex] = useState(0);
|
||||
const [activeStep, setActiveStep] = useState(null as QFrontendStepMetaData);
|
||||
const [newStep, setNewStep] = useState(null);
|
||||
@ -159,33 +76,239 @@ function ProcessRun(): JSX.Element
|
||||
const [needInitialLoad, setNeedInitialLoad] = useState(true);
|
||||
const [processMetaData, setProcessMetaData] = useState(null);
|
||||
const [processValues, setProcessValues] = useState({} as any);
|
||||
const [processError, setProcessError] = useState(null as string);
|
||||
const [needToCheckJobStatus, setNeedToCheckJobStatus] = useState(false);
|
||||
const [lastProcessResponse, setLastProcessResponse] = useState(
|
||||
null as QJobStarted | QJobComplete | QJobError | QJobRunning,
|
||||
);
|
||||
const onLastStep = activeStepIndex === steps.length - 2;
|
||||
const noMoreSteps = activeStepIndex === steps.length - 1;
|
||||
|
||||
////////////////
|
||||
// form state //
|
||||
////////////////
|
||||
const [formId, setFormId] = useState("");
|
||||
const [formFields, setFormFields] = useState({});
|
||||
const [initialValues, setInitialValues] = useState({});
|
||||
const [validationScheme, setValidationScheme] = useState(null);
|
||||
const [validationFunction, setValidationFunction] = useState(null);
|
||||
const [needToCheckJobStatus, setNeedToCheckJobStatus] = useState(false);
|
||||
const [needRecords, setNeedRecords] = useState(false);
|
||||
const [processError, setProcessError] = useState(null as string);
|
||||
const [recordConfig, setRecordConfig] = useState({} as any);
|
||||
const onLastStep = activeStepIndex === steps.length - 2;
|
||||
const noMoreSteps = activeStepIndex === steps.length - 1;
|
||||
const [formError, setFormError] = useState(null as string);
|
||||
|
||||
trace("ProcessRun", true);
|
||||
///////////////////////
|
||||
// record list state //
|
||||
///////////////////////
|
||||
const [needRecords, setNeedRecords] = useState(false);
|
||||
const [recordConfig, setRecordConfig] = useState({} as any);
|
||||
const [pageNumber, setPageNumber] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
|
||||
//////////////////////////////
|
||||
// state for bulk edit form //
|
||||
//////////////////////////////
|
||||
const [disabledBulkEditFields, setDisabledBulkEditFields] = useState({} as any);
|
||||
|
||||
const doesStepHaveComponent = (step: QFrontendStepMetaData, type: QComponentType): boolean =>
|
||||
{
|
||||
if (step.components)
|
||||
{
|
||||
for (let i = 0; i < step.components.length; i++)
|
||||
{
|
||||
if (step.components[i].type === type)
|
||||
{
|
||||
return (true);
|
||||
}
|
||||
}
|
||||
}
|
||||
return (false);
|
||||
};
|
||||
|
||||
//////////////////////////////////////////////////////////////
|
||||
// event handler for the bulk-edit field-enabled checkboxes //
|
||||
//////////////////////////////////////////////////////////////
|
||||
const bulkEditSwitchChanged = (name: string, switchValue: boolean) =>
|
||||
{
|
||||
const newDisabledBulkEditFields = JSON.parse(JSON.stringify(disabledBulkEditFields));
|
||||
newDisabledBulkEditFields[name] = !switchValue;
|
||||
setDisabledBulkEditFields(newDisabledBulkEditFields);
|
||||
};
|
||||
|
||||
const formatViewValue = (value: any): JSX.Element =>
|
||||
{
|
||||
if (value === null || value === undefined)
|
||||
{
|
||||
return <span>--</span>;
|
||||
}
|
||||
|
||||
if (typeof value === "string")
|
||||
{
|
||||
return (
|
||||
<>
|
||||
{value.split(/\n/).map((value: string, index: number) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<Fragment key={index}>
|
||||
<span>{value}</span>
|
||||
<br />
|
||||
</Fragment>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (<span>{value}</span>);
|
||||
};
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
// generate the main form body content for a step //
|
||||
////////////////////////////////////////////////////
|
||||
const getDynamicStepContent = (
|
||||
stepIndex: number,
|
||||
step: any,
|
||||
formData: any,
|
||||
processError: string,
|
||||
processValues: any,
|
||||
recordConfig: any,
|
||||
): JSX.Element =>
|
||||
{
|
||||
if (processError)
|
||||
{
|
||||
return (
|
||||
<>
|
||||
<MDTypography color="error" variant="h5">
|
||||
Error
|
||||
</MDTypography>
|
||||
<MDTypography color="body" variant="button">
|
||||
{processError}
|
||||
</MDTypography>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (qJobRunning)
|
||||
{
|
||||
return (
|
||||
<>
|
||||
<MDTypography variant="h5">
|
||||
{" "}
|
||||
Working
|
||||
</MDTypography>
|
||||
<Grid container>
|
||||
<Grid item padding={1}>
|
||||
<CircularProgress color="info" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<MDTypography color="body" variant="button">
|
||||
{qJobRunning?.message}
|
||||
<br />
|
||||
{qJobRunning.current && qJobRunning.total && (
|
||||
<div>{`${qJobRunning.current.toLocaleString()} of ${qJobRunning.total.toLocaleString()}`}</div>
|
||||
)}
|
||||
<i>
|
||||
{`Updated at ${qJobRunningDate.toLocaleTimeString()}`}
|
||||
</i>
|
||||
</MDTypography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (step === null)
|
||||
{
|
||||
console.log("in getDynamicStepContent. No step yet, so returning 'loading'");
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MDTypography variation="h5" fontWeight="bold">{step?.label}</MDTypography>
|
||||
{step.components && (
|
||||
step.components.map((component: QFrontendComponent, index: number) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<div key={index}>
|
||||
{
|
||||
component.type === QComponentType.HELP_TEXT && (
|
||||
<MDTypography variant="button" color="info">
|
||||
{component.values.text}
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)))}
|
||||
{(step.formFields) && (
|
||||
<QDynamicForm
|
||||
formData={formData}
|
||||
bulkEditMode={doesStepHaveComponent(activeStep, QComponentType.BULK_EDIT_FORM)}
|
||||
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
|
||||
/>
|
||||
)}
|
||||
{step.viewFields && (
|
||||
<div>
|
||||
{step.viewFields.map((field: QFieldMetaData) => (
|
||||
<MDBox key={field.name} display="flex" py={1} pr={2}>
|
||||
<MDTypography variant="button" fontWeight="bold">
|
||||
{field.label}
|
||||
:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{formatViewValue(processValues[field.name])}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{(step.recordListFields && recordConfig.columns) && (
|
||||
<div>
|
||||
<MDTypography variant="button" fontWeight="bold">Records</MDTypography>
|
||||
{" "}
|
||||
<br />
|
||||
<MDBox height="100%">
|
||||
<DataGridPro
|
||||
page={recordConfig.pageNo}
|
||||
disableSelectionOnClick
|
||||
autoHeight
|
||||
rows={recordConfig.rows}
|
||||
columns={recordConfig.columns}
|
||||
rowBuffer={10}
|
||||
rowCount={recordConfig.totalRecords}
|
||||
pageSize={recordConfig.rowsPerPage}
|
||||
rowsPerPageOptions={[10, 25, 50]}
|
||||
onPageSizeChange={recordConfig.handleRowsPerPageChange}
|
||||
onPageChange={recordConfig.handlePageChange}
|
||||
onRowClick={recordConfig.handleRowClick}
|
||||
getRowId={(row) => row.__idForDataGridPro__}
|
||||
paginationMode="server"
|
||||
pagination
|
||||
density="compact"
|
||||
loading={recordConfig.loading}
|
||||
disableColumnFilter
|
||||
/>
|
||||
</MDBox>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) =>
|
||||
{
|
||||
setPageNumber(page);
|
||||
};
|
||||
|
||||
const handleRowsPerPageChange = (size: number) =>
|
||||
{
|
||||
setRowsPerPage(size);
|
||||
};
|
||||
|
||||
function buildNewRecordConfig()
|
||||
{
|
||||
const newRecordConfig = {} as any;
|
||||
newRecordConfig.pageNo = 1;
|
||||
newRecordConfig.rowsPerPage = 20;
|
||||
newRecordConfig.pageNo = pageNumber;
|
||||
newRecordConfig.rowsPerPage = rowsPerPage;
|
||||
newRecordConfig.columns = [] as GridColDef[];
|
||||
newRecordConfig.rows = [];
|
||||
newRecordConfig.totalRecords = 0;
|
||||
newRecordConfig.handleRowsPerPageChange = null;
|
||||
newRecordConfig.handlePageChange = null;
|
||||
newRecordConfig.handleRowsPerPageChange = handleRowsPerPageChange;
|
||||
newRecordConfig.handlePageChange = handlePageChange;
|
||||
newRecordConfig.handleRowClick = null;
|
||||
newRecordConfig.loading = true;
|
||||
return (newRecordConfig);
|
||||
@ -196,8 +319,6 @@ function ProcessRun(): JSX.Element
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
trace("updateActiveStep");
|
||||
|
||||
if (!processMetaData)
|
||||
{
|
||||
console.log("No process meta data yet, so returning early");
|
||||
@ -249,10 +370,27 @@ function ProcessRun(): JSX.Element
|
||||
initialValues[field.name] = processValues[field.name];
|
||||
});
|
||||
|
||||
////////////////////////////////////////////////////
|
||||
// disable all fields if this is a bulk edit form //
|
||||
////////////////////////////////////////////////////
|
||||
if (doesStepHaveComponent(activeStep, QComponentType.BULK_EDIT_FORM))
|
||||
{
|
||||
const newDisabledBulkEditFields: any = {};
|
||||
activeStep.formFields.forEach((field) =>
|
||||
{
|
||||
newDisabledBulkEditFields[field.name] = true;
|
||||
dynamicFormFields[field.name].isRequired = false;
|
||||
formValidations[field.name] = null;
|
||||
});
|
||||
setDisabledBulkEditFields(newDisabledBulkEditFields);
|
||||
}
|
||||
|
||||
setFormFields(dynamicFormFields);
|
||||
setInitialValues(initialValues);
|
||||
setValidationScheme(Yup.object().shape(formValidations));
|
||||
setValidationFunction(null);
|
||||
|
||||
logFormValidations("Post-disable thingie", formValidations);
|
||||
}
|
||||
else
|
||||
{
|
||||
@ -263,24 +401,65 @@ function ProcessRun(): JSX.Element
|
||||
setValidationScheme(null);
|
||||
setValidationFunction(() => true);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if there are fields to load, build a record config, and set the needRecords state flag //
|
||||
////////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (activeStep.recordListFields)
|
||||
{
|
||||
const newRecordConfig = buildNewRecordConfig();
|
||||
activeStep.recordListFields.forEach((field) =>
|
||||
{
|
||||
newRecordConfig.columns.push({field: field.name, headerName: field.label, width: 200});
|
||||
});
|
||||
setRecordConfig(newRecordConfig);
|
||||
setNeedRecords(true);
|
||||
}
|
||||
}
|
||||
}, [newStep]);
|
||||
}, [newStep, rowsPerPage, pageNumber]);
|
||||
|
||||
// when we need to load records, do so, async
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// if there are records to load: build a record config, and set the needRecords state flag //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if (activeStep && activeStep.recordListFields)
|
||||
{
|
||||
const newRecordConfig = buildNewRecordConfig();
|
||||
activeStep.recordListFields.forEach((field) =>
|
||||
{
|
||||
newRecordConfig.columns.push({
|
||||
field: field.name, headerName: field.label, width: 200, sortable: false,
|
||||
});
|
||||
});
|
||||
setRecordConfig(newRecordConfig);
|
||||
setNeedRecords(true);
|
||||
}
|
||||
}, [activeStep, rowsPerPage, pageNumber]);
|
||||
|
||||
/////////////////////////////////////////////////////
|
||||
// handle a bulk-edit enabled-switch being checked //
|
||||
/////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if (activeStep && activeStep.formFields)
|
||||
{
|
||||
console.log("In useEffect for disabledBulkEditFields");
|
||||
console.log(disabledBulkEditFields);
|
||||
|
||||
const newDynamicFormFields: any = {};
|
||||
const newFormValidations: any = {};
|
||||
activeStep.formFields.forEach((field) =>
|
||||
{
|
||||
const fieldName = field.name;
|
||||
const isDisabled = disabledBulkEditFields[fieldName];
|
||||
|
||||
newDynamicFormFields[field.name] = DynamicFormUtils.getDynamicField(field);
|
||||
newFormValidations[field.name] = DynamicFormUtils.getValidationForField(field);
|
||||
|
||||
if (isDisabled)
|
||||
{
|
||||
newDynamicFormFields[field.name].isRequired = false;
|
||||
newFormValidations[field.name] = null;
|
||||
}
|
||||
|
||||
logFormValidations("Upon update", newFormValidations);
|
||||
|
||||
setFormFields(newDynamicFormFields);
|
||||
setValidationScheme(Yup.object().shape(newFormValidations));
|
||||
});
|
||||
}
|
||||
}, [disabledBulkEditFields]);
|
||||
|
||||
////////////////////////////////////////////////
|
||||
// when we need to load records, do so, async //
|
||||
////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if (needRecords)
|
||||
@ -288,13 +467,15 @@ function ProcessRun(): JSX.Element
|
||||
setNeedRecords(false);
|
||||
(async () =>
|
||||
{
|
||||
const records = await qController.processRecords(
|
||||
const response = await QClient.getInstance().processRecords(
|
||||
processName,
|
||||
processUUID,
|
||||
recordConfig.rowsPerPage * (recordConfig.pageNo - 1),
|
||||
recordConfig.rowsPerPage * recordConfig.pageNo,
|
||||
recordConfig.rowsPerPage,
|
||||
);
|
||||
|
||||
const {records} = response;
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
// re-construct the recordConfig object, so the setState call triggers a new rendering //
|
||||
/////////////////////////////////////////////////////////////////////////////////////////
|
||||
@ -306,14 +487,11 @@ function ProcessRun(): JSX.Element
|
||||
records.forEach((record) =>
|
||||
{
|
||||
const row = Object.fromEntries(record.values.entries());
|
||||
if (!row.id)
|
||||
{
|
||||
row.id = ++rowId;
|
||||
}
|
||||
row.__idForDataGridPro__ = ++rowId;
|
||||
newRecordConfig.rows.push(row);
|
||||
});
|
||||
// todo count?
|
||||
newRecordConfig.totalRecords = records.length;
|
||||
|
||||
newRecordConfig.totalRecords = response.totalRecords;
|
||||
setRecordConfig(newRecordConfig);
|
||||
})();
|
||||
}
|
||||
@ -326,8 +504,9 @@ function ProcessRun(): JSX.Element
|
||||
{
|
||||
if (lastProcessResponse)
|
||||
{
|
||||
trace("handleProcessResponse");
|
||||
setLastProcessResponse(null);
|
||||
|
||||
setQJobRunning(null);
|
||||
if (lastProcessResponse instanceof QJobComplete)
|
||||
{
|
||||
const qJobComplete = lastProcessResponse as QJobComplete;
|
||||
@ -345,6 +524,8 @@ function ProcessRun(): JSX.Element
|
||||
else if (lastProcessResponse instanceof QJobRunning)
|
||||
{
|
||||
const qJobRunning = lastProcessResponse as QJobRunning;
|
||||
setQJobRunning(qJobRunning);
|
||||
setQJobRunningDate(new Date());
|
||||
setNeedToCheckJobStatus(true);
|
||||
}
|
||||
else if (lastProcessResponse instanceof QJobError)
|
||||
@ -363,13 +544,12 @@ function ProcessRun(): JSX.Element
|
||||
{
|
||||
if (needToCheckJobStatus)
|
||||
{
|
||||
trace("checkJobStatus");
|
||||
setNeedToCheckJobStatus(false);
|
||||
(async () =>
|
||||
{
|
||||
setTimeout(async () =>
|
||||
{
|
||||
const processResponse = await qController.processJobStatus(
|
||||
const processResponse = await QClient.getInstance().processJobStatus(
|
||||
processName,
|
||||
processUUID,
|
||||
jobUUID,
|
||||
@ -385,7 +565,6 @@ function ProcessRun(): JSX.Element
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
if (needInitialLoad)
|
||||
{
|
||||
trace("initialLoad");
|
||||
setNeedInitialLoad(false);
|
||||
(async () =>
|
||||
{
|
||||
@ -411,15 +590,28 @@ function ProcessRun(): JSX.Element
|
||||
|
||||
console.log(`@dk: Query String for init: ${queryStringForInit}`);
|
||||
|
||||
const processMetaData = await qController.loadProcessMetaData(processName);
|
||||
// console.log(processMetaData);
|
||||
setProcessMetaData(processMetaData);
|
||||
setSteps(processMetaData.frontendSteps);
|
||||
try
|
||||
{
|
||||
const processMetaData = await QClient.getInstance().loadProcessMetaData(processName);
|
||||
setProcessMetaData(processMetaData);
|
||||
setSteps(processMetaData.frontendSteps);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
setProcessError("Error loading process definition.");
|
||||
return;
|
||||
}
|
||||
|
||||
const processResponse = await qController.processInit(processName, queryStringForInit);
|
||||
setProcessUUID(processResponse.processUUID);
|
||||
setLastProcessResponse(processResponse);
|
||||
// console.log(processResponse);
|
||||
try
|
||||
{
|
||||
const processResponse = await QClient.getInstance().processInit(processName, queryStringForInit);
|
||||
setProcessUUID(processResponse.processUUID);
|
||||
setLastProcessResponse(processResponse);
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
setProcessError("Error initializing process.");
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
||||
@ -429,7 +621,6 @@ function ProcessRun(): JSX.Element
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const handleBack = () =>
|
||||
{
|
||||
trace("handleBack");
|
||||
setNewStep(activeStepIndex - 1);
|
||||
};
|
||||
|
||||
@ -438,23 +629,44 @@ function ProcessRun(): JSX.Element
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
const handleSubmit = async (values: any, actions: any) =>
|
||||
{
|
||||
trace("handleSubmit");
|
||||
setFormError(null);
|
||||
|
||||
// todo - post?
|
||||
let queryString = "";
|
||||
const formData = new FormData();
|
||||
Object.keys(values).forEach((key) =>
|
||||
{
|
||||
queryString += `${key}=${encodeURIComponent(values[key])}&`;
|
||||
formData.append(key, values[key]);
|
||||
});
|
||||
|
||||
actions.setSubmitting(false);
|
||||
actions.resetForm();
|
||||
if (doesStepHaveComponent(activeStep, QComponentType.BULK_EDIT_FORM))
|
||||
{
|
||||
const bulkEditEnabledFields: string[] = [];
|
||||
activeStep.formFields.forEach((field) =>
|
||||
{
|
||||
if (!disabledBulkEditFields[field.name])
|
||||
{
|
||||
bulkEditEnabledFields.push(field.name);
|
||||
}
|
||||
});
|
||||
|
||||
const processResponse = await qController.processStep(
|
||||
if (bulkEditEnabledFields.length === 0)
|
||||
{
|
||||
setFormError("You must edit at least one field to continue.");
|
||||
return;
|
||||
}
|
||||
formData.append("bulkEditEnabledFields", bulkEditEnabledFields.join(","));
|
||||
}
|
||||
|
||||
const formDataHeaders = {
|
||||
"content-type": "multipart/form-data; boundary=--------------------------320289315924586491558366",
|
||||
};
|
||||
|
||||
console.log("Calling processStep...");
|
||||
const processResponse = await QClient.getInstance().processStep(
|
||||
processName,
|
||||
processUUID,
|
||||
activeStep.name,
|
||||
queryString,
|
||||
formData,
|
||||
formDataHeaders,
|
||||
);
|
||||
setLastProcessResponse(processResponse);
|
||||
};
|
||||
@ -529,17 +741,24 @@ function ProcessRun(): JSX.Element
|
||||
back
|
||||
</MDButton>
|
||||
)}
|
||||
{noMoreSteps || processError ? (
|
||||
{noMoreSteps || processError || qJobRunning ? (
|
||||
<MDBox />
|
||||
) : (
|
||||
<MDButton
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
variant="gradient"
|
||||
color="dark"
|
||||
>
|
||||
{onLastStep ? "submit" : "next"}
|
||||
</MDButton>
|
||||
<>
|
||||
{formError && (
|
||||
<MDTypography component="div" variant="caption" color="error" fontWeight="regular" align="right" fullWidth>
|
||||
{formError}
|
||||
</MDTypography>
|
||||
)}
|
||||
<MDButton
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
variant="gradient"
|
||||
color="dark"
|
||||
>
|
||||
{onLastStep ? "submit" : "next"}
|
||||
</MDButton>
|
||||
</>
|
||||
)}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
|
||||
@ -31,7 +31,7 @@ class QClient
|
||||
{
|
||||
private static qController: QController;
|
||||
|
||||
private static getInstance()
|
||||
public static getInstance()
|
||||
{
|
||||
if (this.qController == null)
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user