Focus on next input when pressed enter
This commit is contained in:
benguozakinci@gmail.com
parent
37eff2d980
commit
b6f3cc7c8f
@ -345,13 +345,13 @@ export default {
|
||||
onItemSelected(item) {
|
||||
const indexeditem = { ...item, index: this.currentIndex };
|
||||
|
||||
this.addItem(indexeditem);
|
||||
this.addItem(indexeditem, 'oldItem');
|
||||
},
|
||||
|
||||
addItem(item) {
|
||||
addItem(item, itemType) {
|
||||
this.selected_items.push(item);
|
||||
|
||||
this.$emit('item', item);
|
||||
this.$emit('item', { item, itemType } );
|
||||
this.$emit('items', this.selected_items);
|
||||
|
||||
this.show.item_selected = false;
|
||||
@ -380,7 +380,7 @@ export default {
|
||||
? item = this.item_list[0]
|
||||
: this.newItems.push(item)
|
||||
|
||||
this.addItem(item);
|
||||
this.addItem(item, 'newItem');
|
||||
},
|
||||
|
||||
onSubmit(event) {
|
||||
|
||||
16
resources/assets/js/views/common/documents.js
vendored
16
resources/assets/js/views/common/documents.js
vendored
@ -97,6 +97,14 @@ const app = new Vue({
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefFocus(ref, index) {
|
||||
ref
|
||||
? ref === 'price'
|
||||
? setPromiseTimeout(100).then(() => this.$refs[ref][0].$children[0].$el.focus())
|
||||
: setPromiseTimeout(100).then(() => this.$refs[ref][index].focus())
|
||||
: {}
|
||||
},
|
||||
|
||||
onCalculateTotal() {
|
||||
let global_discount = parseFloat(this.form.discount);
|
||||
let discount_total = 0;
|
||||
@ -303,12 +311,14 @@ const app = new Vue({
|
||||
},
|
||||
|
||||
// addItem to list
|
||||
onAddItem(item) {
|
||||
onAddItem(payload) {
|
||||
let { item, itemType } = payload
|
||||
let { index } = item;
|
||||
let inputRef = `${itemType === 'newItem' ? 'name' : 'description'}`; // indication for which input to focus first
|
||||
let total = 1 * item.price;
|
||||
let item_taxes = [];
|
||||
|
||||
setPromiseTimeout(200).then(() => this.$refs['name-input'][index].focus()); //add focus to new item name input
|
||||
|
||||
this.onRefFocus(inputRef, index); // trigger initial focus event on input
|
||||
|
||||
if (item.tax_ids) {
|
||||
item.tax_ids.forEach(function (tax_id, index) {
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
@stack('name_input_start')
|
||||
<input
|
||||
type="text"
|
||||
ref="name-input"
|
||||
ref="name"
|
||||
class="form-control"
|
||||
:name="'items.' + index + '.name'"
|
||||
autocomplete="off"
|
||||
@ -42,8 +42,8 @@
|
||||
data-item="name"
|
||||
v-model="row.name"
|
||||
@input="onBindingItemField(index, 'name')"
|
||||
@change="form.errors.clear('items.' + index + '.name')">
|
||||
|
||||
@change="form.errors.clear('items.' + index + '.name')"
|
||||
@keydown.enter="onRefFocus('description', index)">
|
||||
<div class="invalid-feedback d-block"
|
||||
v-if="form.errors.has('items.' + index + '.name')"
|
||||
v-html="form.errors.get('items.' + index + '.name')">
|
||||
@ -59,6 +59,7 @@
|
||||
@if (!$hideDescription)
|
||||
<textarea
|
||||
class="form-control"
|
||||
ref="description"
|
||||
placeholder="{{ trans('items.enter_item_description') }}"
|
||||
style="height: 46px; overflow: hidden;"
|
||||
:name="'items.' + index + '.description'"
|
||||
@ -66,6 +67,8 @@
|
||||
data-item="description"
|
||||
resize="none"
|
||||
@input="onBindingItemField(index, 'description')"
|
||||
@keydown.enter.exact.prevent
|
||||
@keydown.enter.exact="onRefFocus('quantity', index)"
|
||||
></textarea>
|
||||
@endif
|
||||
</td>
|
||||
@ -81,6 +84,7 @@
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
ref="quantity"
|
||||
class="form-control text-center p-0 input-number-disabled"
|
||||
:name="'items.' + index + '.quantity'"
|
||||
autocomplete="off"
|
||||
@ -88,8 +92,8 @@
|
||||
data-item="quantity"
|
||||
v-model="row.quantity"
|
||||
@input="onCalculateTotal"
|
||||
@change="form.errors.clear('items.' + index + '.quantity')">
|
||||
|
||||
@change="form.errors.clear('items.' + index + '.quantity')"
|
||||
@keydown.enter="onRefFocus('price', index)">
|
||||
<div class="invalid-feedback d-block"
|
||||
v-if="form.errors.has('items.' + index + '.quantity')"
|
||||
v-html="form.errors.get('items.' + index + '.quantity')">
|
||||
@ -105,7 +109,7 @@
|
||||
@if (!$hidePrice)
|
||||
<div>
|
||||
@stack('price_input_start')
|
||||
{{ Form::moneyGroup('price', '', '', ['required' => 'required', 'row-input' => 'true', 'v-model' => 'row.price', 'v-error' => 'form.errors.get(\'items.\' + index + \'.price\')', 'v-error-message' => 'form.errors.get(\'items.\' + index + \'.price\')' , 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; form.errors.clear(\'items.\' + index + \'.price\'); onCalculateTotal'], 0.00, 'text-right input-price p-0') }}
|
||||
{{ Form::moneyGroup('price', '', '', ['required' => 'required', 'inputRef' => 'price', 'row-input' => 'true', 'v-model' => 'row.price', 'v-error' => 'form.errors.get(\'items.\' + index + \'.price\')', 'v-error-message' => 'form.errors.get(\'items.\' + index + \'.price\')' , 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; form.errors.clear(\'items.\' + index + \'.price\'); onCalculateTotal'], 0.00, 'text-right input-price p-0') }}
|
||||
@stack('price_input_end')
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@ -27,6 +27,10 @@
|
||||
v-if="{{ $attributes['show'] }}"
|
||||
@endif
|
||||
|
||||
@if (isset($attributes['inputRef']))
|
||||
ref="{{ $attributes['inputRef'] }}"
|
||||
@endif
|
||||
|
||||
@if (isset($attributes['masked']))
|
||||
:masked="{{ ($attributes['masked']) ? 'true' : 'false' }}"
|
||||
@endif
|
||||
@ -74,6 +78,7 @@
|
||||
@if (isset($attributes['row-input']))
|
||||
:row-input="{{ $attributes['row-input'] }}"
|
||||
@endif
|
||||
|
||||
></akaunting-money>
|
||||
|
||||
@stack($name . '_input_end')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user