From 246f736fa8750a8c1ed523221fb7a2d3e0b64a63 Mon Sep 17 00:00:00 2001
From: Liordino Neto <liordinoneto@gmail.com>
Date: Wed, 19 Aug 2020 17:54:29 -0300
Subject: [PATCH] feat: first field now autofocus when editing a row

fix: move the focus to the first editable element

fix: make the Autocomplete options popup on autoFocus

feat: allow saving on table only when changes occurred

fix: compare only the editing row instead of the entire list to decide
if the save method will be called
---
 .../src/components/editableTable/Row.js            | 14 +++++++++++++-
 .../src/components/editableTable/Table.js          |  9 ++++++---
 .../src/components/inputs/base/Autocomplete.js     |  1 +
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/new-lamassu-admin/src/components/editableTable/Row.js b/new-lamassu-admin/src/components/editableTable/Row.js
index f365de97..2ab3ba7d 100644
--- a/new-lamassu-admin/src/components/editableTable/Row.js
+++ b/new-lamassu-admin/src/components/editableTable/Row.js
@@ -83,7 +83,13 @@ const ActionCol = ({ disabled, editing }) => {
   )
 }
 
-const ECol = ({ editing, config, extraPaddingRight, extraPaddingLeft }) => {
+const ECol = ({
+  editing,
+  focus,
+  config,
+  extraPaddingRight,
+  extraPaddingLeft
+}) => {
   const {
     name,
     input,
@@ -102,6 +108,7 @@ const ECol = ({ editing, config, extraPaddingRight, extraPaddingLeft }) => {
 
   const innerProps = {
     fullWidth: true,
+    autoFocus: focus,
     size,
     bold,
     textAlign,
@@ -176,6 +183,10 @@ const ERow = ({ editing, disabled }) => {
     ? R.indexOf(toSHeader[toSHeader.length - 1], elements)
     : -1
 
+  const elementToFocusIndex = innerElements.findIndex(
+    it => it.editable === undefined || it.editable
+  )
+
   return (
     <Tr
       size={rowSize}
@@ -187,6 +198,7 @@ const ERow = ({ editing, disabled }) => {
             key={idx}
             config={it}
             editing={editing}
+            focus={idx === elementToFocusIndex && editing}
             extraPaddingRight={extraPaddingRightIndex === idx}
             extraPaddingLeft={extraPaddingLeftIndex === idx}
           />
diff --git a/new-lamassu-admin/src/components/editableTable/Table.js b/new-lamassu-admin/src/components/editableTable/Table.js
index 7477bcca..da9a094a 100644
--- a/new-lamassu-admin/src/components/editableTable/Table.js
+++ b/new-lamassu-admin/src/components/editableTable/Table.js
@@ -57,9 +57,12 @@ const ETable = ({
     const index = R.findIndex(R.propEq('id', it.id))(data)
     const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
 
-    // no response means the save failed
-    const response = await save({ [name]: list }, it)
-    if (!response) return
+    if (!R.equals(data[index], it)) {
+      // no response means the save failed
+      const response = await save({ [name]: list }, it)
+      if (!response) return
+    }
+
     setAdding(false)
     setEditingId(null)
   }
diff --git a/new-lamassu-admin/src/components/inputs/base/Autocomplete.js b/new-lamassu-admin/src/components/inputs/base/Autocomplete.js
index 2effc5a8..55339449 100644
--- a/new-lamassu-admin/src/components/inputs/base/Autocomplete.js
+++ b/new-lamassu-admin/src/components/inputs/base/Autocomplete.js
@@ -84,6 +84,7 @@ const Autocomplete = ({
             size={size}
             fullWidth={fullWidth}
             textAlign={textAlign}
+            {...props}
           />
         )
       }}