up and down arrows now work as vertical tab in row editor

pull/35/head
Ondřej Hruška 6 years ago
parent d3a7381f39
commit 8d6ec7b47d
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 46
      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"> <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] }]" <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" :title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
:ref="`edit-${row._id}-${col.id}`"
type="text" type="text"
@input="markRowDirty(row)" @input="markRowDirty(row)"
@keydown.down="verticalTab(row._id, col.id, 1)"
@keydown.up="verticalTab(row._id, col.id, -1)"
@keyup.enter="toggleRowEditing(row._id)"> @keyup.enter="toggleRowEditing(row._id)">
</td> </td>
</template> </template>
@ -366,6 +369,49 @@ Rows are identified by row._id, columns by col.id
_.each(this.rows, (row, id) => { _.each(this.rows, (row, id) => {
this.$set(this.rows[id], '_editing', true) 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()
}
}
} }
}, },
} }

Loading…
Cancel
Save