feat: get upload component up to spec

2021-10-20 22:50:38 +01:00 · 2021-10-20 22:50:38 +01:00 · 10b8838cf0
commit 10b8838cf0
parent bedb75b767
7 changed files with 130 additions and 34 deletions
--- 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",
--- 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",
--- 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 }) => {
            </Grid>
          </Grid>
        )}
+        {customEntries && (
+          <div className={classes.wrapper}>
+            <div className={classes.separator}>{'Custom data entry'}</div>
+          </div>
+        )}
      </div>
    </div>
  )
--- 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]]
+    }
  }
 }
--- 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))
--- 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 (
    <>
-      <div className={classes.board}>
-        <input
-          type={type}
-          name={type}
-          onClick={() => {
-            console.log(values)
-          }}
-          className={classes.input}
-        />
+      <div {...getRootProps()} className={classes.board}>
+        <input {...getInputProps()} />
+        {R.isEmpty(data) && (
+          <div className={classes.box}>
+            <div className={classes.boxContent}>
+              <Info3>{message}</Info3>
+            </div>
+          </div>
+        )}
+        {!R.isEmpty(data) && type === IMAGE && (
+          <div key={data.name}>
+            <img src={data.preview} className={classes.box}></img>
+          </div>
+        )}
      </div>
-      <div className={classes.picture}></div>
    </>
  )
 }
--- 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()
 })

 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 (
    <>
      <Box display="flex" alignItems="center">
@ -177,7 +176,7 @@ const CustomData = ({ selectedValues }) => {
      {customElements[dataTypeSelected].options.map(({ display, code }) => (
        <Field name={code} label={display} component={TextInput} width={390} />
      ))}
-      {upload && <Upload type="image"></Upload>}
+      {upload && <Upload type={dataTypeSelected}></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: '' }
  }
 }