feat: allow for multifield inputs in EditableTable

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,25 +164,35 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
   }
 
   return (
+    <div className={classes.fields}>
+      {R.map(f => (
         <Td
           className={{
             [classes.extraPaddingRight]: extraPaddingRight,
             [classes.extraPadding]: extraPadding,
-        [classes.withSuffix]: suffix
+            [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={name} component={input} {...innerProps} />
+            <Field name={f} component={input} {...innerProps} />
           )}
           {isEditing && !isField && !isHidden(values) && (
-        <config.input name={name} />
+            <config.input name={f} />
           )}
           {!isEditing && values && !isHidden(values) && (
             <div style={textStyle(values, isEditing)}>
-          {view(values[name], values)}
+              {view(values[f], values)}
             </div>
           )}
           {suffix && !isHidden(values) && (
@@ -189,6 +204,8 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
           )}
           {isHidden(values) && <StripesSvg />}
         </Td>
+      ))(fields)}
+    </div>
   )
 }
 

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'
+  }
 }

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 },
+  7: { machine: 140, cassette: 125 }
-  8: { machine: 120, 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(
+      elements.push({
-        {
+        names: [`stacker${it}f`, `stacker${it}r`],
-          name: `stacker${it}f`,
+        header: `Stacker ${it}`,
-          header: `Stacker ${it}F`,
         size: 'sm',
         stripe: true,
         textAlign: 'right',
         width: widthsByNumberOfCassettes[maxNumberOfCashUnits]?.cassette,
+        prefix: it => (R.last(it) === 'f' ? 'F' : 'R'),
         suffix: fiatCurrency,
         bold: bold,
-          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)
             .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
-        }
-      )
       return R.add(1, it)
     },
     1