Skip to content

Commit

Permalink
Focus on next input when pressed enter
Browse files Browse the repository at this point in the history
  • Loading branch information
benguozakinci@gmail.com authored and benguozakinci@gmail.com committed Aug 25, 2021
1 parent 37eff2d commit b6f3cc7
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 13 deletions.
8 changes: 4 additions & 4 deletions resources/assets/js/components/AkauntingItemButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -380,7 +380,7 @@ export default {
? item = this.item_list[0]
: this.newItems.push(item)
this.addItem(item);
this.addItem(item, 'newItem');
},
onSubmit(event) {
Expand Down
16 changes: 13 additions & 3 deletions resources/assets/js/views/common/documents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down
16 changes: 10 additions & 6 deletions resources/views/components/documents/form/line-item.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,16 +34,16 @@
@stack('name_input_start')
<input
type="text"
ref="name-input"
ref="name"
class="form-control"
:name="'items.' + index + '.name'"
autocomplete="off"
required="required"
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')">
Expand All @@ -59,13 +59,16 @@ class="form-control"
@if (!$hideDescription)
<textarea
class="form-control"
ref="description"
placeholder="{{ trans('items.enter_item_description') }}"
style="height: 46px; overflow: hidden;"
:name="'items.' + index + '.description'"
v-model="row.description"
data-item="description"
resize="none"
@input="onBindingItemField(index, 'description')"
@keydown.enter.exact.prevent
@keydown.enter.exact="onRefFocus('quantity', index)"
></textarea>
@endif
</td>
Expand All @@ -81,15 +84,16 @@ class="form-control"
<input
type="number"
min="0"
ref="quantity"
class="form-control text-center p-0 input-number-disabled"
:name="'items.' + index + '.quantity'"
autocomplete="off"
required="required"
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')">
Expand All @@ -105,7 +109,7 @@ class="form-control text-center p-0 input-number-disabled"
@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
Expand Down
5 changes: 5 additions & 0 deletions resources/views/partials/form/money_group.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -74,6 +78,7 @@
@if (isset($attributes['row-input']))
:row-input="{{ $attributes['row-input'] }}"
@endif

></akaunting-money>

@stack($name . '_input_end')

0 comments on commit b6f3cc7

Please sign in to comment.