From 7a4d28d755f90101fdd15274061525473a537d1c Mon Sep 17 00:00:00 2001
From: "benguozakinci@gmail.com"
 <akaunting-002@Akaunting-002s-MacBook-Pro.local>
Date: Tue, 3 Aug 2021 13:07:09 +0300
Subject: [PATCH] Input field is active after new item created

---
 .../js/components/AkauntingItemButton.vue     | 93 ++++++++-----------
 resources/assets/js/plugins/functions.js      | 18 ++--
 resources/assets/js/views/common/documents.js | 11 +--
 .../components/select-item-button.blade.php   |  2 +-
 4 files changed, 53 insertions(+), 71 deletions(-)

diff --git a/resources/assets/js/components/AkauntingItemButton.vue b/resources/assets/js/components/AkauntingItemButton.vue
index fb7e87884..dd7c487b2 100644
--- a/resources/assets/js/components/AkauntingItemButton.vue
+++ b/resources/assets/js/components/AkauntingItemButton.vue
@@ -21,9 +21,9 @@
                                 type="text"
                                 data-input="true"
                                 class="form-control"
-                                autocapitalize="default" autocorrect="ON" 
+                                autocapitalize="default" 
+                                autocorrect="ON" 
                                 :placeholder="placeholder"
-                                :ref="'input-item-field-' + _uid"
                                 v-model="search"
                                 @input="onInput"
                                 @keydown.enter="onItemCreate"
@@ -33,7 +33,7 @@
                 </div>
 
                 <ul class="aka-select-menu-options">
-                    <div class="aka-select-menu-option" v-for="(item, index) in sortedItems" :key="index" @click="onItemSeleted(index, item.id)">
+                    <div class="aka-select-menu-option" v-for="(item, index) in sortedItems" :key="index" @click="onItemSelected(item)">
                         <div class="item-select w-100">
                             <div class="item-select-column item-select-info w-75">
                                 <b class="item-select-info-name"><span>{{ item.name }}</span></b>
@@ -196,7 +196,7 @@ export default {
     data() {
         return {
             item_list: [],
-            selected_items: [],
+            invoiceItems: [],
             search: '', // search column model
             show: {
                 item_selected: false,
@@ -208,6 +208,7 @@ export default {
                 show: false,
                 buttons: this.addNew.buttons,
             },
+            newItems: [],
             add_new_html: '',
             money: {
                 decimal: this.currency.decimal_mark,
@@ -279,12 +280,6 @@ export default {
 
         onItemList() {
             this.show.item_list = true;
-
-            console.log(this.$refs['input-item-field-' + this._uid].focus());
-
-            setTimeout(function() {
-                this.$refs['input-item-field-' + this._uid].focus();
-            }.bind(this), 100);
         },
 
         onInput() {
@@ -303,60 +298,55 @@ export default {
             }
 
             window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
-            .then(response => {
-                this.item_list = [];
+                        .then(response => {
+                            this.item_list = [];
 
-                let items = response.data.data;
+                            let items = response.data.data;
 
-                items.forEach(function (item, index) {
-                    this.item_list.push({
-                        index: index,
-                        key: item.id,
-                        value: (item.title) ? item.title : (item.display_name) ? item.display_name : item.name,
-                        type: this.type,
-                        id: item.id,
-                        name: (item.title) ? item.title : (item.display_name) ? item.display_name : item.name,
-                        description: (item.description) ? item.description : '',
-                        price: (item.price) ? item.price : (this.price == 'purchase_price') ? item.purchase_price : item.sale_price,
-                        tax_ids: (item.tax_ids) ? item.tax_ids : [],
-                    });
-                }, this);
-            })
-            .catch(error => {
+                            items.forEach(function (item, index) {
+                                this.item_list.push({
+                                    index: index,
+                                    key: item.id,
+                                    value: (item.title) ? item.title : (item.display_name) ? item.display_name : item.name,
+                                    type: this.type,
+                                    id: item.id,
+                                    name: (item.title) ? item.title : (item.display_name) ? item.display_name : item.name,
+                                    description: (item.description) ? item.description : '',
+                                    price: (item.price) ? item.price : (this.price == 'purchase_price') ? item.purchase_price : item.sale_price,
+                                    tax_ids: (item.tax_ids) ? item.tax_ids : [],
+                                });
+                            }, this);
+                        })
+                        .catch(error => {
 
-            });
+                        });
 
             this.$emit('input', this.search);
         },
 
-        onItemSeleted(index, item_id) {
-            let item = '';
+        onItemSelected(item) {
+            const indexeditem = { ...item, index: this.currentIndex };
 
-            this.item_list.forEach(function (item_list, item_index) {
-                if (item_list.id == item_id) {
-                    item = item_list;
-                }
-            });
+            this.addItem(indexeditem);
+        },
 
-            this.selected_items.push(item);
+        addItem(item) {
+            this.invoiceItems.push(item);
 
             this.$emit('item', item);
-            this.$emit('items', this.selected_items);
+            this.$emit('items', this.invoiceItems);
 
             this.show.item_selected = false;
             this.show.item_list = false;
-            this.search = '';
 
-            // Set deault item list
+            this.search = '';
+            // Set default item list
             this.setItemList(this.items);
         },
 
         onItemCreate() {
-            let index = Object.keys(this.item_list).length;
-            index++;
-
-            let item = {
-                index: index,
+            const newItem = {
+                index: this.newItems.length,
                 key: 0,
                 value: this.search,
                 type: this.type,
@@ -367,15 +357,9 @@ export default {
                 tax_ids: [],
             };
 
-            this.selected_items.push(item);
+            this.newItems.push(newItem);
 
-            this.$emit('item', item)
-            this.$emit('items', this.selected_items);
-            this.setItemList(this.items);
-
-            this.show.item_selected = false;
-            this.show.item_list = false;
-            this.search = '';
+            this.addItem(newItem);
 
             /*
             let add_new = this.add_new;
@@ -561,6 +545,9 @@ export default {
         sortedItems() {
             return this.sortItems();
         },
+        currentIndex() {
+            return this.invoiceItems.length;
+        },
     },
 
     watch: {
diff --git a/resources/assets/js/plugins/functions.js b/resources/assets/js/plugins/functions.js
index a55d63ae2..4dd8c7118 100644
--- a/resources/assets/js/plugins/functions.js
+++ b/resources/assets/js/plugins/functions.js
@@ -15,14 +15,12 @@ function getQueryVariable(variable) {
     return(false);
 }
 
-function promiseTimeout(time) {
-    return new Promise(function(resolve,reject) {
-      setTimeout(function(){
-          resolve(time);
-      }, time);
-    });
-};
+//This function wraps setTimeout function in a promise in order to display dom manipulations on root components asynchronously & fast 
+const setPromiseTimeout = time => 
+    new Promise(resolve => 
+        setTimeout(() => 
+            resolve(time)
+        , time)
+    );
 
-
-
-export {getQueryVariable, promiseTimeout}
+export {getQueryVariable, setPromiseTimeout}
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index daefd8619..51d08507b 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -9,8 +9,7 @@ require('./../../bootstrap');
 import Vue from 'vue';
 
 import DashboardPlugin from './../../plugins/dashboard-plugin';
-import { promiseTimeout } from './../../plugins/functions';
-
+import { setPromiseTimeout } from './../../plugins/functions';
 
 import Global from './../../mixins/global';
 
@@ -291,15 +290,13 @@ const app = new Vue({
         },
 
 
-        // Select Item added form
-        onSelectedItem(item) {
+        // addItem to list
+        onAddItem(item) {
             let { index } = item;
-
             let total = 1 * item.price;
             let item_taxes = [];
 
-            promiseTimeout(500).then(() => this.$refs['name-input'][index].focus());
-            
+            setPromiseTimeout(200).then(() => this.$refs['name-input'][index].focus()); //add focus to new item name input 
             if (item.tax_ids) {
                 item.tax_ids.forEach(function (tax_id, index) {
                     if (this.taxes.includes(tax_id)) {
diff --git a/resources/views/components/select-item-button.blade.php b/resources/views/components/select-item-button.blade.php
index f4855e6d3..61a34b49b 100644
--- a/resources/views/components/select-item-button.blade.php
+++ b/resources/views/components/select-item-button.blade.php
@@ -7,7 +7,7 @@
     :dynamic-currency="currency"
     :items="{{ json_encode($items) }}"
     :search-char-limit="{{ $searchCharLimit }}"
-    @item="onSelectedItem($event)"
+    @item="onAddItem($event)"
     add-item-text="{{ trans('general.form.add_an', ['field' => trans_choice('general.items', 1)]) }}"
     create-new-item-text="{{ trans('general.title.create', ['type' =>  trans_choice('general.items', 1)]) }}"
 ></akaunting-item-button>