|
|
|
@ -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() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|