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

QQQ-21: initial stab at merging some of form parts of create/edit and processes

Browse Source
This commit is contained in:
Tim Chamberlain
2022-07-07 14:59:24 -05:00
parent 510afb8dc4
commit 22e35cdfb0
6 changed files with 201 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/qqq/components/EntityForm/index.tsx
View File

@ -1,26 +1,16 @@
/**
=========================================================
* 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.
*/
// react imports
// react components
import { useParams } from "react-router-dom";
import React, { useReducer, useState } from "react";
// qqq imports
// misc components
import * as Yup from "yup";
import { Form, Formik } from "formik";
// qqq components
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import { QRecord } from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import { QFieldType } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QDynamicForm from "qqq/components/QDynamicForm";
import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
// @material-ui core components
import Card from "@mui/material/Card";
@ -29,7 +19,6 @@ import Grid from "@mui/material/Grid";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import FormField from "layouts/pages/account/components/FormField";
import MDButton from "../../../components/MDButton";
// Declaring props types for EntityForm
@ -41,17 +30,24 @@ function EntityForm({ id }: Props): JSX.Element {
const qController = new QController("");
const { tableName } = useParams();
const [validations, setValidations] = useState({});
const [initialValues, setInitialValues] = useState({} as { [key: string]: string });
const [formFields, setFormFields] = useState({});
const [asyncLoadInited, setAsyncLoadInited] = useState(false);
const [formValues, setFormValues] = useState({} as { [key: string]: string });
const [formFields, setFormFields] = useState([] as JSX.Element[]);
const [tableMetaData, setTableMetaData] = useState(null);
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const handleInputChange = (e: { target: { name: any; value: any } }) => {
const { name, value } = e.target;
formValues[name] = value;
setFormValues(formValues);
};
function getDynamicStepContent(formData: any): JSX.Element {
const { formFields, values, errors, touched } = formData;
if (!Object.keys(formFields).length) {
return <div>Loading...</div>;
}
return <QDynamicForm formData={formData} primaryKeyId={tableMetaData.primaryKeyField} />;
}
if (!asyncLoadInited) {
setAsyncLoadInited(true);
@ -59,73 +55,46 @@ function EntityForm({ id }: Props): JSX.Element {
const tableMetaData = await qController.loadTableMetaData(tableName);
setTableMetaData(tableMetaData);
const fieldArray = [] as QFieldMetaData[];
const sortedKeys = [...tableMetaData.fields.keys()].sort();
sortedKeys.forEach((key) => {
const fieldMetaData = tableMetaData.fields.get(key);
fieldArray.push(fieldMetaData);
});
if (id !== null) {
const foundRecord = await qController.get(tableName, id);
const record = await qController.get(tableName, id);
tableMetaData.fields.forEach((fieldMetaData, key) => {
formValues[key] = foundRecord.values.get(key);
initialValues[key] = record.values.get(key);
});
setFormValues(formValues);
}
const sortedKeys = [...tableMetaData.fields.keys()].sort();
sortedKeys.forEach((key) => {
const fieldMetaData = tableMetaData.fields.get(key);
if (fieldMetaData.name !== tableMetaData.primaryKeyField) {
let fieldType: string;
switch (fieldMetaData.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 = fieldMetaData.type.toString();
break;
case QFieldType.TEXT:
case QFieldType.HTML:
case QFieldType.STRING:
default:
fieldType = "text";
}
const { dynamicFormFields, formValidations } = DynamicFormUtils.getFormData(fieldArray);
setInitialValues(initialValues);
setFormFields(dynamicFormFields);
setValidations(Yup.object().shape(formValidations));
formFields.push(
<Grid item xs={12} sm={4} key={fieldMetaData.name}>
<FormField
id={fieldMetaData.name}
key={fieldMetaData.name}
name={fieldMetaData.name}
label={fieldMetaData.label}
type={fieldType}
defaultValue={formValues[fieldMetaData.name]}
onChange={handleInputChange}
/>
</Grid>
);
}
});
setFormFields(formFields);
forceUpdate();
})();
}
const handleSubmit = (event: { preventDefault: () => void }) => {
event.preventDefault();
(async () => {
const handleSubmit = async (values: any, actions: any) => {
actions.setSubmitting(true);
await (async () => {
if (id !== null) {
await qController.update(tableName, id, formValues).then((record) => {
window.location.href = `/${tableName}/view/${record.values.get("id")}`; // todo - primaryKeyField
await qController.update(tableName, id, values).then((record) => {
window.location.href = `/${tableName}/${record.values.get(
tableMetaData.primaryKeyField
)}`;
});
} else {
await qController.create(tableName, formValues).then((record) => {
window.location.href = `/${tableName}/view/${record.values.get("id")}`; // todo - primaryKeyField
await qController.create(tableName, values).then((record) => {
window.location.href = `/${tableName}/${record.values.get(
tableMetaData.primaryKeyField
)}`;
});
}
})();
@ -133,24 +102,46 @@ function EntityForm({ id }: Props): JSX.Element {
const pageTitle =
id != null ? `Edit ${tableMetaData?.label} (${id})` : `Create New ${tableMetaData?.label}`;
const formId =
id != null ? `edit-${tableMetaData?.label}-form` : `create-${tableMetaData?.label}-form`;
return (
<Card id="basic-info" sx={{ overflow: "visible" }}>
<Card id="edit-form-container" sx={{ overflow: "visible" }}>
<MDBox p={3}>
<MDTypography variant="h5">{pageTitle}</MDTypography>
</MDBox>
<MDBox component="form" pb={3} px={3} onSubmit={handleSubmit}>
<Grid key="fieldsGrid" container spacing={3}>
{formFields}
</Grid>
</MDBox>
<MDBox p={3}>
<Grid key="buttonGrid" container spacing={3}>
<MDBox ml="auto">
<MDButton type="submit" variant="gradient" color="dark" size="small">
save {tableMetaData?.label}
</MDButton>
</MDBox>
<MDBox pb={3} px={3}>
<Grid key="fields-grid" container spacing={3}>
<Formik
initialValues={initialValues}
validationSchema={validations}
onSubmit={handleSubmit}
>
{({ values, errors, touched, isSubmitting }) => (
<Form id={formId} autoComplete="off">
<MDBox p={3} width="100%">
<MDBox>
{/***************************************************************************
** step content - e.g., the appropriate form or other screen for the step **
***************************************************************************/}
{getDynamicStepContent({
values,
touched,
formFields,
errors,
})}
<Grid key="buttonGrid" container spacing={3}>
<MDBox mt={5} ml="auto">
<MDButton type="submit" variant="gradient" color="dark" size="small">
save {tableMetaData?.label}
</MDButton>
</MDBox>
</Grid>
</MDBox>
</MDBox>
</Form>
)}
</Formik>
</Grid>
</MDBox>
</Card>

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

@ -25,29 +25,30 @@ import FormField from "layouts/pages/users/new-user/components/FormField";
import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
interface Props {
formLabel?: string;
formData: any;
step?: QFrontendStepMetaData | undefined;
primaryKeyId?: string;
}
function QDynamicForm(props: Props): JSX.Element {
const { formData, step } = props;
const { formData, formLabel, primaryKeyId } = props;
const { formFields, values, errors, touched } = formData;
/*
const {
firstName: firstNameV,
lastName: lastNameV,
company: companyV,
email: emailV,
password: passwordV,
repeatPassword: repeatPasswordV,
} = values;
*/
const {
firstName: firstNameV,
lastName: lastNameV,
company: companyV,
email: emailV,
password: passwordV,
repeatPassword: repeatPasswordV,
} = values;
*/
return (
<MDBox>
<MDBox lineHeight={0}>
<MDTypography variant="h5">{step?.label}</MDTypography>
<MDTypography variant="h5">{formLabel}</MDTypography>
{/* TODO - help text
<MDTypography variant="button" color="text">
Mandatory information
@ -60,12 +61,16 @@ function QDynamicForm(props: Props): JSX.Element {
Object.keys(formFields).length > 0 &&
Object.keys(formFields).map((fieldName: any) => {
const field = formFields[fieldName];
if (primaryKeyId && fieldName === primaryKeyId) {
return null;
}
if (values[fieldName] === undefined) {
values[fieldName] = "";
}
return (
<Grid item xs={12} sm={6} key={fieldName}>
<FormField
required={field.isRequired}
type={field.type}
label={field.label}
name={fieldName}
@ -156,7 +161,8 @@ function QDynamicForm(props: Props): JSX.Element {
}
QDynamicForm.defaultProps = {
step: undefined,
formLabel: undefined,
primaryKeyId: undefined,
};
export default QDynamicForm;

75
src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts Normal file
View File

@ -0,0 +1,75 @@
/*
* 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/>.
*/
import * as Yup from "yup";
import { QFieldMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import { QFieldType } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
/*******************************************************************************
** Meta-data to represent a single field in a table.
**
*******************************************************************************/
class DynamicFormUtils {
public static getFormData(qqqFormFields: QFieldMetaData[]) {
const dynamicFormFields: any = {};
const formValidations: any = {};
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";
}
dynamicFormFields[field.name] = {
name: field.name,
label: field.label ? field.label : field.name,
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.`);
}
});
return { dynamicFormFields, formValidations };
}
}
export default DynamicFormUtils;

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

@ -22,23 +22,24 @@ import Icon from "@mui/material/Icon";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Divider from "@mui/material/Divider";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";
import Link from "@mui/material/Link";
// Material Dashboard 2 PRO React TS examples components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
import DataTable from "examples/Tables/DataTable";
// Data
// QQQ
import { QProcessMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import Link from "@mui/material/Link";
import { QTableMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import { useParams } from "react-router-dom";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";
import Footer from "../../components/Footer";
import IdCell from "../../components/EntityForm/components/IdCell";

26
src/qqq/pages/entity-view/components/ViewContents/index.tsx
View File

@ -13,7 +13,9 @@
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
// react components
import { useParams } from "react-router-dom";
import React, { useReducer, useState } from "react";
// @material-ui core components
import Card from "@mui/material/Card";
@ -26,17 +28,12 @@ import DialogContentText from "@mui/material/DialogContentText";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
// qqq imports
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// Settings page components
// qqq imports
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import { QRecord } from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import React, { useReducer, useState } from "react";
import MDButton from "../../../../../components/MDButton";
const qController = new QController("");
@ -104,20 +101,16 @@ function ViewContents({ id }: Props): JSX.Element {
setOpen(false);
};
/*
const handleDelete = (event: { preventDefault: () => void }) => {
event.preventDefault();
/*
(async () => {
await qController.delete(tableName, id).then(() => {
window.location.href = `/${tableName}/list/`;
window.location.href = `/${tableName}`;
});
})();
};
*/
const editPath = `/${tableName}/edit/${id}`;
const editPath = `/${tableName}/${id}/edit`;
return (
<Card id="basic-info" sx={{ overflow: "visible" }}>
@ -131,7 +124,6 @@ function ViewContents({ id }: Props): JSX.Element {
<Grid key="tres" container spacing={3}>
<MDBox ml="auto" mr={3}>
<MDButton
type="submit"
variant="gradient"
color="primary"
size="small"
@ -153,14 +145,14 @@ function ViewContents({ id }: Props): JSX.Element {
</DialogContent>
<DialogActions>
<Button onClick={handleClickConfirmClose}>No</Button>
<Button onClick={handleClickConfirmClose} autoFocus>
<Button onClick={handleDelete} autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
</MDBox>
<MDBox>
<MDButton type="submit" variant="gradient" color="dark" size="small">
<MDButton variant="gradient" color="dark" size="small">
<Link href={editPath}>edit {tableMetaData?.label}</Link>
</MDButton>
</MDBox>

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

@ -45,6 +45,7 @@ import * as Yup from "yup";
import { QController } from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
import { QFrontendStepMetaData } from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFrontendStepMetaData";
import { useParams } from "react-router-dom";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QDynamicForm from "../../components/QDynamicForm";
function getDynamicStepContent(stepIndex: number, stepParam: any, formData: any): JSX.Element {
@ -57,7 +58,7 @@ function getDynamicStepContent(stepIndex: number, stepParam: any, formData: any)
return <div>Loading...</div>;
}
return <QDynamicForm formData={formData} step={step} />;
return <QDynamicForm formData={formData} formLabel={step.name} />;
}
const qController = new QController("");
@ -90,31 +91,23 @@ function ProcessRun(): JSX.Element {
setActiveStep(activeStep);
setFormId(activeStep.name);
const { dynamicFormFields, formValidations } = DynamicFormUtils.getFormData(
activeStep.formFields
);
const formFields: any = {};
const initialValues: any = {};
const validations: any = {};
activeStep.formFields.forEach((field) => {
formFields[field.name] = {
name: field.name,
label: field.label,
type: "text", // todo better
// todo invalidMsg: "Zipcode is not valid (e.g. 70000).",
};
// todo - not working - also, needs real value.
initialValues[field.name] = "Hi";
// todo - all this based on type and other metadata.
// see src/layouts/pages/users/new-user/schemas/validations.ts
validations[field.name] = Yup.string().required(`${field.label} is required.`);
// validations[field.name] = Yup.string().optional();
});
setFormFields(formFields);
setFormFields(dynamicFormFields);
setInitialValues(initialValues);
setValidations(Yup.object().shape(validations));
console.log(`in updateActiveStep: formFields ${JSON.stringify(formFields)}`);
setValidations(Yup.object().shape(formValidations));
console.log(`in updateActiveStep: formFields ${JSON.stringify(dynamicFormFields)}`);
console.log(`in updateActiveStep: initialValues ${JSON.stringify(initialValues)}`);
}
};