From 8d6ec7b47d87d65bcd384f4038fb767290615f74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Sat, 11 Aug 2018 22:59:13 +0200
Subject: [PATCH] up and down arrows now work as vertical tab in row editor

---
 resources/assets/js/components/RowsEditor.vue | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/resources/assets/js/components/RowsEditor.vue b/resources/assets/js/components/RowsEditor.vue
index e4eee85..a0bab0c 100644
--- a/resources/assets/js/components/RowsEditor.vue
+++ b/resources/assets/js/components/RowsEditor.vue
@@ -102,8 +102,11 @@ Rows are identified by row._id, columns by col.id
               <td v-for="col in columns" class="pr-0">
                 <input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
                        :title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
+                       :ref="`edit-${row._id}-${col.id}`"
                        type="text"
                        @input="markRowDirty(row)"
+                       @keydown.down="verticalTab(row._id, col.id, 1)"
+                       @keydown.up="verticalTab(row._id, col.id, -1)"
                        @keyup.enter="toggleRowEditing(row._id)">
               </td>
             </template>
@@ -366,6 +369,49 @@ Rows are identified by row._id, columns by col.id
         _.each(this.rows, (row, id) => {
           this.$set(this.rows[id], '_editing', true)
         })
+      },
+
+      /**
+       * Move to next or prev editable cell vertically
+       *
+       * @param row_id
+       * @param col_id
+       * @param dir - +1 down, -1 up
+       */
+      verticalTab (row_id, col_id, dir) {
+        if (dir == -1) {
+          // up
+          let last_editable_row = null
+          for (let row of Object.values(this.rows)) {
+            if (row._id === row_id) {
+              break
+            }
+            if (row._editing || this.newRows) {
+              last_editable_row = row
+            }
+          }
+          if (last_editable_row) {
+            this.$refs[`edit-${last_editable_row._id}-${col_id}`][0].focus()
+          }
+        }
+        else {
+          // down
+          let first_editable_row = null
+          let foundself = false
+          for (let row of Object.values(this.rows)) {
+            if (row._id === row_id) {
+              foundself = true
+              continue
+            }
+            if (foundself && (row._editing || this.newRows)) {
+              first_editable_row = row
+              break
+            }
+          }
+          if (first_editable_row) {
+            this.$refs[`edit-${first_editable_row._id}-${col_id}`][0].focus()
+          }
+        }
       }
     },
   }