feat: allow for multifield inputs in EditableTable

2023-05-29 17:47:27 +01:00 · 2023-05-29 17:47:27 +01:00 · e194509d10
commit e194509d10
parent 6fbb2b4c5b
3 changed files with 120 additions and 73 deletions
--- a/new-lamassu-admin/src/components/editableTable/Row.js
+++ b/new-lamassu-admin/src/components/editableTable/Row.js
@ -120,6 +120,7 @@ const ActionCol = ({ disabled, editing }) => {
 const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
  const {
    name,
+    names,
    bypassField,
    input,
    editable = true,
@ -128,6 +129,8 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
    width,
    textAlign,
    editingAlign = textAlign,
+    prefix,
+    PrefixComponent = Label2,
    suffix,
    SuffixComponent = Label2,
    textStyle = it => {},
@ -136,6 +139,8 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
    inputProps = {}
  } = config

+  const fields = names ?? [name]
+
  const { values } = useFormikContext()
  const isEditable = editable => {
    if (typeof editable === 'function') return editable(values)
@ -159,36 +164,48 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
  }

  return (
-    <Td
-      className={{
-        [classes.extraPaddingRight]: extraPaddingRight,
-        [classes.extraPadding]: extraPadding,
-        [classes.withSuffix]: suffix
-      }}
-      width={width}
-      size={size}
-      bold={bold}
-      textAlign={textAlign}>
-      {isEditing && isField && !isHidden(values) && (
-        <Field name={name} component={input} {...innerProps} />
-      )}
-      {isEditing && !isField && !isHidden(values) && (
-        <config.input name={name} />
-      )}
-      {!isEditing && values && !isHidden(values) && (
-        <div style={textStyle(values, isEditing)}>
-          {view(values[name], values)}
-        </div>
-      )}
-      {suffix && !isHidden(values) && (
-        <SuffixComponent
-          className={classes.suffix}
-          style={isEditing ? {} : textStyle(values, isEditing)}>
-          {suffix}
-        </SuffixComponent>
-      )}
-      {isHidden(values) && <StripesSvg />}
-    </Td>
+    <div className={classes.fields}>
+      {R.map(f => (
+        <Td
+          className={{
+            [classes.extraPaddingRight]: extraPaddingRight,
+            [classes.extraPadding]: extraPadding,
+            [classes.withSuffix]: suffix,
+            [classes.withPrefix]: prefix
+          }}
+          width={width}
+          size={size}
+          bold={bold}
+          textAlign={textAlign}>
+          {prefix && !isHidden(values) && (
+            <PrefixComponent
+              className={classes.prefix}
+              style={isEditing ? {} : textStyle(values, isEditing)}>
+              {typeof prefix === 'function' ? prefix(f) : prefix}
+            </PrefixComponent>
+          )}
+          {isEditing && isField && !isHidden(values) && (
+            <Field name={f} component={input} {...innerProps} />
+          )}
+          {isEditing && !isField && !isHidden(values) && (
+            <config.input name={f} />
+          )}
+          {!isEditing && values && !isHidden(values) && (
+            <div style={textStyle(values, isEditing)}>
+              {view(values[f], values)}
+            </div>
+          )}
+          {suffix && !isHidden(values) && (
+            <SuffixComponent
+              className={classes.suffix}
+              style={isEditing ? {} : textStyle(values, isEditing)}>
+              {suffix}
+            </SuffixComponent>
+          )}
+          {isHidden(values) && <StripesSvg />}
+        </Td>
+      ))(fields)}
+    </div>
  )
 }

--- a/new-lamassu-admin/src/components/editableTable/Row.styles.js
+++ b/new-lamassu-admin/src/components/editableTable/Row.styles.js
@ -25,6 +25,21 @@ export default {
  suffix: {
    margin: [[0, 0, 0, 7]]
  },
+  withPrefix: ({ textAlign }) => {
+    const justifyContent = textAlign === 'right' ? 'flex-end' : textAlign
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent
+    }
+  },
+  prefix: {
+    margin: [[0, 7, 0, 0]]
+  },
  size: ({ size }) => bySize(size),
-  bold
+  bold,
+  fields: {
+    display: 'flex',
+    flexDirection: 'column'
+  }
 }
--- a/new-lamassu-admin/src/pages/Cashout/helper.js
+++ b/new-lamassu-admin/src/pages/Cashout/helper.js
@ -14,8 +14,7 @@ const widthsByNumberOfCassettes = {
  4: { machine: 195, cassette: 190 },
  5: { machine: 175, cassette: 155 },
  6: { machine: 170, cassette: 130 },
-  7: { machine: 140, cassette: 125 },
-  8: { machine: 120, cassette: 125 }
+  7: { machine: 140, cassette: 125 }
 }

 const DenominationsSchema = Yup.object().shape({
@ -41,6 +40,42 @@ const DenominationsSchema = Yup.object().shape({
    .min(1)
    .max(CURRENCY_MAX)
    .nullable()
+    .transform(transformNumber),
+  stacker1f: Yup.number()
+    .label('Stacker 1')
+    .min(1)
+    .max(CURRENCY_MAX)
+    .nullable()
+    .transform(transformNumber),
+  stacker1r: Yup.number()
+    .label('Stacker 1')
+    .min(1)
+    .max(CURRENCY_MAX)
+    .nullable()
+    .transform(transformNumber),
+  stacker2f: Yup.number()
+    .label('Stacker 2')
+    .min(1)
+    .max(CURRENCY_MAX)
+    .nullable()
+    .transform(transformNumber),
+  stacker2r: Yup.number()
+    .label('Stacker 2')
+    .min(1)
+    .max(CURRENCY_MAX)
+    .nullable()
+    .transform(transformNumber),
+  stacker3f: Yup.number()
+    .label('Stacker 3')
+    .min(1)
+    .max(CURRENCY_MAX)
+    .nullable()
+    .transform(transformNumber),
+  stacker3r: Yup.number()
+    .label('Stacker 3')
+    .min(1)
+    .max(CURRENCY_MAX)
+    .nullable()
    .transform(transformNumber)
 })

@ -55,7 +90,7 @@ const getElements = (machines, locale = {}, classes) => {
    0
  )
  const maxNumberOfCashUnits = Math.max(
-    ...R.map(it => it.numberOfCassettes + it.numberOfStackers * 2, machines),
+    ...R.map(it => it.numberOfCassettes + it.numberOfStackers, machines),
    0
  )

@ -96,7 +131,7 @@ const getElements = (machines, locale = {}, classes) => {
        view: it => it,
        input: options?.length > 0 ? Autocomplete : NumberInput,
        inputProps: cassetteProps,
-        doubleHeader: 'Denominations',
+        doubleHeader: 'Denominations of Cassettes & Recyclers',
        isHidden: machine =>
          it >
          machines.find(({ deviceId }) => deviceId === machine.id)
@ -110,44 +145,24 @@ const getElements = (machines, locale = {}, classes) => {
  R.until(
    R.gt(R.__, maxNumberOfStackers),
    it => {
-      elements.push(
-        {
-          name: `stacker${it}f`,
-          header: `Stacker ${it}F`,
-          size: 'sm',
-          stripe: true,
-          textAlign: 'right',
-          width: widthsByNumberOfCassettes[maxNumberOfCashUnits]?.cassette,
-          suffix: fiatCurrency,
-          bold: bold,
-          view: it => it,
-          input: options?.length > 0 ? Autocomplete : NumberInput,
-          inputProps: cassetteProps,
-          doubleHeader: 'Denominations',
-          isHidden: machine =>
-            it >
-            machines.find(({ deviceId }) => deviceId === machine.id)
-              .numberOfStackers
-        },
-        {
-          name: `stacker${it}r`,
-          header: `Stacker ${it}R`,
-          size: 'sm',
-          stripe: true,
-          textAlign: 'right',
-          width: widthsByNumberOfCassettes[maxNumberOfCashUnits]?.cassette,
-          suffix: fiatCurrency,
-          bold: bold,
-          view: it => it,
-          input: options?.length > 0 ? Autocomplete : NumberInput,
-          inputProps: cassetteProps,
-          doubleHeader: 'Denominations',
-          isHidden: machine =>
-            it >
-            machines.find(({ deviceId }) => deviceId === machine.id)
-              .numberOfStackers
-        }
-      )
+      elements.push({
+        names: [`stacker${it}f`, `stacker${it}r`],
+        header: `Stacker ${it}`,
+        size: 'sm',
+        stripe: true,
+        textAlign: 'right',
+        width: widthsByNumberOfCassettes[maxNumberOfCashUnits]?.cassette,
+        prefix: it => (R.last(it) === 'f' ? 'F' : 'R'),
+        suffix: fiatCurrency,
+        bold: bold,
+        input: options?.length > 0 ? Autocomplete : NumberInput,
+        inputProps: cassetteProps,
+        doubleHeader: 'Denominations of Cassettes & Recyclers',
+        isHidden: machine =>
+          it >
+          machines.find(({ deviceId }) => deviceId === machine.id)
+            .numberOfStackers
+      })
      return R.add(1, it)
    },
    1