From 5d46ed572301f3d9926c7e20aac27868895c0b82 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Fri, 10 Dec 2021 16:15:27 +0100
Subject: [PATCH 1/2] fix: multiple edit fields

---
 .../src/pages/Maintenance/CashboxHistory.js   | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
index 5e08e783..1caf56c0 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
@@ -66,7 +66,7 @@ const useStyles = makeStyles(styles)
 const CashboxHistory = ({ machines, currency }) => {
   const classes = useStyles()
   const [error, setError] = useState(false)
-  const [fields, setFields] = useState([])
+  const [field, setField] = useState(null)
 
   const { data, loading } = useQuery(GET_BATCHES)
 
@@ -106,7 +106,6 @@ const CashboxHistory = ({ machines, currency }) => {
   )
 
   const save = row => {
-    const field = R.find(f => f.id === row.id, fields)
     const performedBy = field.performedBy === '' ? null : field.performedBy
 
     schema
@@ -122,10 +121,10 @@ const CashboxHistory = ({ machines, currency }) => {
   }
 
   const close = id => {
-    setFields(R.filter(f => f.id !== id, fields))
+    setField(null)
   }
 
-  const notEditing = id => !R.any(R.propEq('id', id), fields)
+  const notEditing = id => field?.id !== id
 
   const elements = [
     {
@@ -195,21 +194,10 @@ const CashboxHistory = ({ machines, currency }) => {
           return R.isNil(it.performedBy) ? 'Unknown entity' : it.performedBy
         return (
           <TextInput
-            onChange={e =>
-              setFields(
-                R.map(
-                  f =>
-                    f.id === it.id ? { ...f, performedBy: e.target.value } : f,
-                  fields
-                )
-              )
-            }
+            onChange={e => setField({ ...field, performedBy: e.target.value })}
             error={error}
             width={190 * 0.85}
-            value={R.prop(
-              'performedBy',
-              R.find(f => f.id === it.id, fields)
-            )}
+            value={field?.performedBy}
           />
         )
       }
@@ -224,10 +212,7 @@ const CashboxHistory = ({ machines, currency }) => {
           return (
             <IconButton
               onClick={() => {
-                setFields([
-                  ...fields,
-                  { id: it.id, performedBy: it.performedBy }
-                ])
+                setField({ id: it.id, performedBy: it.performedBy })
               }}>
               <EditIcon />
             </IconButton>

From 7655f9ca202c8328d92af21767c44916277b9354 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Fri, 10 Dec 2021 21:14:25 +0100
Subject: [PATCH 2/2] fix: disable edit button

---
 .../src/pages/Maintenance/CashboxHistory.js         | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
index 1caf56c0..53b3e9bf 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
@@ -10,6 +10,7 @@ import { Link, IconButton } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs'
 import { NumberInput } from 'src/components/inputs/formik'
 import DataTable from 'src/components/tables/DataTable'
+import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
@@ -67,6 +68,7 @@ const CashboxHistory = ({ machines, currency }) => {
   const classes = useStyles()
   const [error, setError] = useState(false)
   const [field, setField] = useState(null)
+  const [editing, setEditing] = useState(false)
 
   const { data, loading } = useQuery(GET_BATCHES)
 
@@ -117,10 +119,11 @@ const CashboxHistory = ({ machines, currency }) => {
         })
       })
       .catch(setError(true))
-    return close(row.id)
+    return close()
   }
 
-  const close = id => {
+  const close = () => {
+    setEditing(false)
     setField(null)
   }
 
@@ -211,10 +214,12 @@ const CashboxHistory = ({ machines, currency }) => {
         if (notEditing(it.id))
           return (
             <IconButton
+              disabled={editing}
               onClick={() => {
                 setField({ id: it.id, performedBy: it.performedBy })
+                setEditing(true)
               }}>
-              <EditIcon />
+              {editing ? <EditIconDisabled /> : <EditIcon />}
             </IconButton>
           )
         return (
@@ -222,7 +227,7 @@ const CashboxHistory = ({ machines, currency }) => {
             <Link type="submit" color="primary" onClick={() => save(it)}>
               Save
             </Link>
-            <Link color="secondary" onClick={() => close(it.id)}>
+            <Link color="secondary" onClick={close}>
               Cancel
             </Link>
           </div>