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

Merge remote-tracking branch 'remotes/origin/feature/QQQ-28-bulk-ops-frontend' into feature/sprint-7-integration

Browse Source
This commit is contained in:
darin.kelkhoff
2022-07-25 08:59:21 -05:00
parent a3ae32017e 0c6d17d103
commit 90e43ada66
8 changed files with 734 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -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
View 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;