From 10b8838cf027e2b149cf51ac432be79b0f3c4e3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Wed, 20 Oct 2021 22:50:38 +0100 Subject: [PATCH] feat: get upload component up to spec --- new-lamassu-admin/package-lock.json | 42 ++++++++++-- new-lamassu-admin/package.json | 1 + .../src/pages/Customers/CustomerData.js | 7 ++ .../pages/Customers/CustomerData.styles.js | 21 ++++++ .../src/pages/Customers/Wizard.js | 8 +-- .../src/pages/Customers/components/Upload.js | 68 +++++++++++++++---- .../src/pages/Customers/helper.js | 17 +++-- 7 files changed, 130 insertions(+), 34 deletions(-) diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json index 5dac80f0..f6429e07 100644 --- a/new-lamassu-admin/package-lock.json +++ b/new-lamassu-admin/package-lock.json @@ -7197,6 +7197,11 @@ "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", "dev": true }, + "attr-accept": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==" + }, "auto-bind": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-2.1.1.tgz", @@ -7206,9 +7211,9 @@ }, "dependencies": { "@types/react": { - "version": "16.14.11", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.11.tgz", - "integrity": "sha512-Don0MtsZZ3fjwTJ2BsoqkyOy7e176KplEAKOpr/4XDdzinlyJBn9yfsKn5mcSgn4kh1B22+3tBnzBC1z63ybtQ==", + "version": "16.14.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.21.tgz", + "integrity": "sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -7216,9 +7221,9 @@ } }, "csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz", + "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==" } } }, @@ -12769,6 +12774,21 @@ "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz", "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==" }, + "file-selector": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz", + "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==", + "requires": { + "tslib": "^2.0.3" + }, + "dependencies": { + "tslib": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", + "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + } + } + }, "file-system-cache": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-1.0.5.tgz", @@ -21819,6 +21839,16 @@ "prop-types": "^15.6.0" } }, + "react-dropzone": { + "version": "11.4.2", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.4.2.tgz", + "integrity": "sha512-ocYzYn7Qgp0tFc1gQtUTOaHHSzVTwhWHxxY+r7cj2jJTPfMTZB5GWSJHdIVoxsl+EQENpjJ/6Zvcw0BqKZQ+Eg==", + "requires": { + "attr-accept": "^2.2.1", + "file-selector": "^0.2.2", + "prop-types": "^15.7.2" + } + }, "react-error-overlay": { "version": "6.0.9", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json index 041b402c..24c17fa3 100644 --- a/new-lamassu-admin/package.json +++ b/new-lamassu-admin/package.json @@ -36,6 +36,7 @@ "react-copy-to-clipboard": "^5.0.2", "react-dom": "^16.10.2", "react-material-ui-carousel": "^2.2.7", + "react-dropzone": "^11.4.2", "react-number-format": "^4.4.1", "react-otp-input": "^2.3.0", "react-router-dom": "5.1.2", diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js index f6b41da7..838c53e2 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js @@ -75,6 +75,8 @@ const CustomerData = ({ customer, updateCustomer }) => { ? 'Passed' : 'Failed' + const customEntries = [] // get customer custom entries + const isEven = elem => elem % 2 === 0 const getVisibleCards = _.filter( @@ -322,6 +324,11 @@ const CustomerData = ({ customer, updateCustomer }) => { )} + {customEntries && ( +
+
{'Custom data entry'}
+
+ )} ) diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js index 5dfecd1a..d18ff46a 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js @@ -1,3 +1,5 @@ +import { offColor } from 'src/styling/variables' + export default { header: { display: 'flex', @@ -16,5 +18,24 @@ export default { }, viewIcons: { marginRight: 12 + }, + wrapper: { + display: 'flex' + }, + separator: { + display: 'flex', + flexBasis: '35%', + justifyContent: 'center', + color: offColor, + margin: [[8, 0, 8, 0]], + '&::before, &::after': { + content: '', + flexGrow: 1, + background: offColor, + height: 1, + fontSize: 1, + lineHeight: 0, + margin: [[0, 8, 0, 8]] + } } } diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js index 6a65b3df..bc1652ec 100644 --- a/new-lamassu-admin/src/pages/Customers/Wizard.js +++ b/new-lamassu-admin/src/pages/Customers/Wizard.js @@ -58,8 +58,7 @@ const getStep = (step, selectedValues) => { } const GetValues = ({ setValues }) => { - const { values, touched, errors } = useFormikContext() - console.log(touched, errors, values) + const { values } = useFormikContext() useEffect(() => { setValues && values && setValues(values) @@ -77,9 +76,10 @@ const Wizard = ({ onClose, save, error }) => { const [{ step, config }, setState] = useState({ step: 1 }) - console.log(liveValues) + + // TODO forms error handling const isLastStep = step === LAST_STEP - const stepOptions = getStep(step, selectedValues) + const stepOptions = getStep(step, selectedValues, liveValues) const onContinue = async it => { const newConfig = R.merge(config, stepOptions.schema.cast(it)) diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.js b/new-lamassu-admin/src/pages/Customers/components/Upload.js index 33f52abd..4221df0f 100644 --- a/new-lamassu-admin/src/pages/Customers/components/Upload.js +++ b/new-lamassu-admin/src/pages/Customers/components/Upload.js @@ -1,30 +1,68 @@ import { makeStyles } from '@material-ui/core/styles' -import { useFormikContext } from 'formik' +import * as R from 'ramda' +import React, { useState, useCallback } from 'react' +import { useDropzone } from 'react-dropzone' + +import { Info3 } from 'src/components/typography' +import { offColor, subheaderColor } from 'src/styling/variables' const useStyles = makeStyles({ - input: { - width: 200 + box: { + boxSizing: 'border-box', + marginTop: 31, + width: 450, + height: 120, + borderStyle: 'dashed', + borderColor: offColor, + borderRadius: 4, + borderWidth: 1, + backgroundColor: subheaderColor, + display: 'flex', + justifyContent: 'center' + }, + boxContent: { + marginTop: 30 + }, + board: { + width: 450, + height: 120 } }) const Upload = ({ type }) => { const classes = useStyles() - const { values } = useFormikContext() - console.log(values) + const IMAGE = 'image' + + const [data, setData] = useState({}) + + const message = + type === IMAGE + ? 'Drag and drop an image or click to select a file' + : 'Drag and drop or click to select a file' + + const onDrop = useCallback(acceptedData => { + setData({ preview: URL.createObjectURL(R.head(acceptedData)) }) + }, []) + + const { getRootProps, getInputProps } = useDropzone({ onDrop }) return ( <> -
- { - console.log(values) - }} - className={classes.input} - /> +
+ + {R.isEmpty(data) && ( +
+
+ {message} +
+
+ )} + {!R.isEmpty(data) && type === IMAGE && ( +
+ +
+ )}
-
) } diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js index 18357027..a5d776cc 100644 --- a/new-lamassu-admin/src/pages/Customers/helper.js +++ b/new-lamassu-admin/src/pages/Customers/helper.js @@ -94,18 +94,18 @@ const entryTypeSchema = Yup.object().shape({ }) const customFileSchema = Yup.object().shape({ + title: Yup.string().required(), file: Yup.mixed().required() }) const customImageSchema = Yup.object().shape({ + title: Yup.string().required(), image: Yup.mixed().required() }) const customTextSchema = Yup.object().shape({ - text: Yup.object({ - title: Yup.string().required(), - data: Yup.string().required() - }).required() + title: Yup.string().required(), + data: Yup.string().required() }) const EntryType = () => { @@ -168,7 +168,6 @@ const EntryType = () => { const CustomData = ({ selectedValues }) => { const dataTypeSelected = selectedValues?.dataType const upload = dataTypeSelected === 'file' || dataTypeSelected === 'image' - console.log(dataTypeSelected, 'LAWDOIUHJAWIDUAW', selectedValues) return ( <> @@ -177,7 +176,7 @@ const CustomData = ({ selectedValues }) => { {customElements[dataTypeSelected].options.map(({ display, code }) => ( ))} - {upload && } + {upload && } ) } @@ -187,19 +186,19 @@ const customElements = { schema: customTextSchema, options: customTextOptions, Component: CustomData, - initialValues: { text: { title: '', data: '' } } + initialValues: { data: '', title: '' } }, file: { schema: customFileSchema, options: customUploadOptions, Component: CustomData, - initialValues: { file: { title: '', file: '' } } + initialValues: { file: '', title: '' } }, image: { schema: customImageSchema, options: customUploadOptions, Component: CustomData, - initialValues: { image: { title: '', image: '' } } + initialValues: { image: '', title: '' } } }