From 53f32ba49bec7e0f714cb9f860879cb6fd3e166b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Tue, 19 Oct 2021 19:00:05 +0100 Subject: [PATCH] feat: add custom file/image to the wizard --- .../src/pages/Customers/CustomerData.js | 32 ++++--- .../src/pages/Customers/Wizard.js | 40 +++++++-- .../Customers/components/EditableCard.js | 10 +-- .../src/pages/Customers/components/Upload.js | 0 .../src/pages/Customers/helper.js | 85 +++++++++++++++++-- 5 files changed, 131 insertions(+), 36 deletions(-) create mode 100644 new-lamassu-admin/src/pages/Customers/components/Upload.js diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js index 6293893c..f6b41da7 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js @@ -256,21 +256,25 @@ const CustomerData = ({ customer, updateCustomer }) => { } ] - const editableCard = ({ - title, - authorize, - reject, - state, - titleIcon, - data, - save, - children, - validationSchema, - initialValues - }) => { + const editableCard = ( + { + title, + authorize, + reject, + state, + titleIcon, + data, + save, + children, + validationSchema, + initialValues + }, + idx + ) => { return ( { {visibleCards.map((elem, idx) => { - return isEven(idx) ? editableCard(elem) : null + return isEven(idx) ? editableCard(elem, idx) : null })} {visibleCards.map((elem, idx) => { - return !isEven(idx) ? editableCard(elem) : null + return !isEven(idx) ? editableCard(elem, idx) : null })} diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js index 75f05272..6a65b3df 100644 --- a/new-lamassu-admin/src/pages/Customers/Wizard.js +++ b/new-lamassu-admin/src/pages/Customers/Wizard.js @@ -1,7 +1,7 @@ import { makeStyles } from '@material-ui/core' -import { Form, Formik } from 'formik' +import { Form, Formik, useFormikContext } from 'formik' import * as R from 'ramda' -import React, { useState } from 'react' +import React, { useState, Fragment, useEffect } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' @@ -9,7 +9,7 @@ import Stepper from 'src/components/Stepper' import { Button } from 'src/components/buttons' import { comet } from 'src/styling/variables' -import { entryType } from './helper' +import { entryType, customElements } from './helper' const LAST_STEP = 2 @@ -46,26 +46,44 @@ const styles = { const useStyles = makeStyles(styles) -const getStep = step => { +const getStep = (step, selectedValues) => { switch (step) { case 1: return entryType + case 2: + return customElements[selectedValues?.dataType] default: - return entryType + return Fragment } } +const GetValues = ({ setValues }) => { + const { values, touched, errors } = useFormikContext() + console.log(touched, errors, values) + + useEffect(() => { + setValues && values && setValues(values) + }, [setValues, values]) + + return null +} + const Wizard = ({ onClose, save, error }) => { const classes = useStyles() + const [selectedValues, setSelectedValues] = useState(null) + const [liveValues, setLiveValues] = useState({}) + const [{ step, config }, setState] = useState({ step: 1 }) - + console.log(liveValues) const isLastStep = step === LAST_STEP - const stepOptions = getStep(step) + const stepOptions = getStep(step, selectedValues) + const onContinue = async it => { const newConfig = R.merge(config, stepOptions.schema.cast(it)) + setSelectedValues(newConfig) if (isLastStep) { return save(newConfig) @@ -98,11 +116,15 @@ const Wizard = ({ onClose, save, error }) => { initialValues={stepOptions.initialValues} validationSchema={stepOptions.schema}>
- + +
{error && Failed to save}
diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js index 492ca943..1756b635 100644 --- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js +++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js @@ -38,7 +38,7 @@ const fieldStyles = { }, label: { color: comet, - margin: [[0, 3]] + margin: [[0, 0, 0, 0]] }, notEditing: { display: 'flex', @@ -58,8 +58,10 @@ const fieldStyles = { } }, editing: { - '& > input': { - padding: 0 + '& > div': { + '& > input': { + padding: 0 + } } } } @@ -88,9 +90,7 @@ const EditableField = ({ editing, field, size, ...props }) => { { const classes = useStyles() const { values } = useFormikContext() - const displayCustom = values.entryType === 'custom' + + const CUSTOM = 'custom' + const REQUIREMENT = 'requirement' + + const displayCustomOptions = values.entryType === CUSTOM + const displayRequirementOptions = values.entryType === REQUIREMENT return ( <> @@ -146,7 +171,7 @@ const EntryType = () => { radioClassName={classes.radio} className={classnames(classes.radioGroup, classes.specialGrid)} /> - {displayCustom && ( + {displayCustomOptions && (

Type of data

@@ -161,7 +186,7 @@ const EntryType = () => { />
)} - {!displayCustom && ( + {displayRequirementOptions && (

Requirements

@@ -180,11 +205,55 @@ const EntryType = () => { ) } +const CustomData = ({ selectedValues }) => { + const dataTypeSelected = selectedValues?.dataType + const upload = dataTypeSelected === 'file' || dataTypeSelected === 'image' + console.log(dataTypeSelected, 'LAWDOIUHJAWIDUAW', selectedValues) + return ( + <> + +

{`Custom ${dataTypeSelected} entry`}

+ + {customElements[dataTypeSelected].options.map(({ display, code }) => ( + + ))} + {upload &&

{'OI'}

} + + ) +} + +const customElements = { + text: { + schema: customTextSchema, + options: customTextOptions, + Component: CustomData, + initialValues: { text: { title: '', data: '' } } + }, + file: { + schema: customFileSchema, + options: customUploadOptions, + Component: CustomData, + initialValues: { file: { title: '', file: '' } } + }, + image: { + schema: customImageSchema, + options: customUploadOptions, + Component: CustomData, + initialValues: { image: { title: '', image: '' } } + } +} + const entryType = { schema: entryTypeSchema, options: entryOptions, Component: EntryType, - initialValues: { entryType: { entryType: '' } } + initialValues: { entryType: '' } } -export { getAuthorizedStatus, getFormattedPhone, getName, entryType } +export { + getAuthorizedStatus, + getFormattedPhone, + getName, + entryType, + customElements +}