From f0a9c18ccbcad06e868f62d83ea8d09bd67a654b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Mon, 20 Jan 2020 17:48:46 +0300
Subject: [PATCH] refs #1147 Invoice item selectbox style.

---
 app/Http/Controllers/Common/Items.php         |   8 +-
 app/Providers/Form.php                        |   8 +-
 .../js/components/AkauntingSelectRemote.vue   | 680 ++++++++++++++++++
 resources/assets/js/mixins/global.js          |   2 +
 resources/lang/en-GB/general.php              |   1 +
 .../views/partials/form/alias_group.blade.php |  30 -
 .../partials/form/select_group.blade.php      |  23 +-
 .../form/select_remote_group.blade.php        |  45 ++
 resources/views/sales/invoices/item.blade.php |  40 +-
 9 files changed, 793 insertions(+), 44 deletions(-)
 create mode 100644 resources/assets/js/components/AkauntingSelectRemote.vue
 delete mode 100644 resources/views/partials/form/alias_group.blade.php
 create mode 100644 resources/views/partials/form/select_remote_group.blade.php

diff --git a/app/Http/Controllers/Common/Items.php b/app/Http/Controllers/Common/Items.php
index 66636856f..cfc211a73 100644
--- a/app/Http/Controllers/Common/Items.php
+++ b/app/Http/Controllers/Common/Items.php
@@ -278,7 +278,13 @@ class Items extends Controller
             }
         }
 
-        return response()->json($items);
+        return response()->json([
+            'success' => true,
+            'message' => 'Get all items.',
+            'errors' => [],
+            'count' => $items->count(),
+            'data' => ($items->count()) ? $items : null,
+        ]);
     }
 
     public function total(TotalRequest $request)
diff --git a/app/Providers/Form.php b/app/Providers/Form.php
index 829ee6a44..75dd3b827 100644
--- a/app/Providers/Form.php
+++ b/app/Providers/Form.php
@@ -15,10 +15,6 @@ class Form extends Provider
     public function boot()
     {
         // Form components
-        Facade::component('aliasGroup', 'partials.form.alias_group', [
-            'original', 'name', 'text', 'icon', 'attributes' => ['required' => 'required'], 'value' => null, 'col' => 'col-md-6', 'group_class' => null
-        ]);
-
         Facade::component('moneyGroup', 'partials.form.money_group', [
             'name', 'text', 'icon', 'attributes' => ['required' => 'required'], 'value' => null, 'col' => 'col-md-6', 'group_class' => null
         ]);
@@ -67,6 +63,10 @@ class Form extends Provider
             'name', 'text', 'icon', 'values', 'selected' => null, 'attributes' => ['required' => 'required'], 'col' => 'col-md-6', 'group_class' => null
         ]);
 
+        Facade::component('selectRemoteGroup', 'partials.form.select_remote_group', [
+            'name', 'text', 'icon', 'values', 'selected' => null, 'attributes' => ['required' => 'required'], 'col' => 'col-md-6', 'group_class' => null
+        ]);
+
         Facade::component('textareaGroup', 'partials.form.textarea_group', [
             'name', 'text', 'icon', 'value' => null, 'attributes' => ['rows' => '3'], 'col' => 'col-md-12', 'group_class' => null
         ]);
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
new file mode 100644
index 000000000..65cd977ac
--- /dev/null
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -0,0 +1,680 @@
+<template>
+    <base-input v-if="title" :label="title" :name="name" :class="formClasses" :error="formError">
+        <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
+            :placeholder="placeholder">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <template slot="prefix">
+                <span class="el-input__suffix-inner el-select-icon">
+                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
+                </span>
+            </template>
+
+            <el-option v-if="!group" v-for="(label, value) in selectOptions"
+               :key="value"
+               :label="label"
+               :value="value">
+            </el-option>
+
+            <el-option-group
+                v-if="group"
+                v-for="(options, name) in selectOptions"
+                :key="name"
+                :label="name">
+                <el-option
+                    v-for="(label, value) in options"
+                    :key="value"
+                    :label="label"
+                    :value="value">
+                </el-option>
+            </el-option-group>
+
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
+        </el-select>
+
+        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
+            :placeholder="placeholder">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <template slot="prefix">
+                <span class="el-input__suffix-inner el-select-icon">
+                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
+                </span>
+            </template>
+
+            <el-option v-if="!group" v-for="(label, value) in selectOptions"
+               :key="value"
+               :label="label"
+               :value="value">
+            </el-option>
+
+            <el-option-group
+                v-if="group"
+                v-for="(options, name) in selectOptions"
+                :key="name"
+                :label="name">
+                <el-option
+                    v-for="(label, value) in options"
+                    :key="value"
+                    :label="label"
+                    :value="value">
+                </el-option>
+            </el-option-group>
+
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
+        </el-select>
+
+        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
+            :placeholder="placeholder">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <template slot="prefix">
+                <span class="el-input__suffix-inner el-select-icon">
+                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
+                </span>
+            </template>
+
+            <el-option v-if="!group" v-for="(label, value) in selectOptions"
+               :key="value"
+               :label="label"
+               :value="value">
+            </el-option>
+
+            <el-option-group
+                v-if="group"
+                v-for="(options, name) in selectOptions"
+                :key="name"
+                :label="name">
+                <el-option
+                    v-for="(label, value) in options"
+                    :key="value"
+                    :label="label"
+                    :value="value">
+                </el-option>
+            </el-option-group>
+
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
+        </el-select>
+
+        <el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
+            :placeholder="placeholder">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <template slot="prefix">
+                <span class="el-input__suffix-inner el-select-icon">
+                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
+                </span>
+            </template>
+
+            <el-option v-if="!group" v-for="(label, value) in selectOptions"
+               :key="value"
+               :label="label"
+               :value="value">
+            </el-option>
+
+            <el-option-group
+                v-if="group"
+                v-for="(options, name) in selectOptions"
+                :key="name"
+                :label="name">
+                <el-option
+                    v-for="(label, value) in options"
+                    :key="value"
+                    :label="label"
+                    :value="value">
+                </el-option>
+            </el-option-group>
+
+            <el-option v-if="addNew.status && options.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
+        </el-select>
+
+        <component v-bind:is="add_new_html" @submit="onSubmit"></component>
+
+        <select :name="name" class="d-none" v-model="real_model">
+            <option v-for="(label, value) in selectOptions" :value="value">{{ label }}</option>
+        </select>
+    </base-input>
+
+    <el-select v-else
+        v-model="real_model"
+        @input="change"
+        filterable
+        remote
+        reserve-keyword
+        :placeholder="placeholder"
+        :remote-method="remoteMethod"
+        :loading="loading">
+            <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noMatchingDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <div v-else-if="addNew.status && options.length == 0" slot="empty">
+                <p class="el-select-dropdown__empty">
+                    {{ noDataText }}
+                </p>
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                    <li class="el-select-dropdown__item el-select__footer">
+                        <div @click="onAddItem">
+                            <i class="fas fa-plus"></i>
+                            <span>
+                                {{ add_new_text }}
+                            </span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+            <template slot="prefix">
+                <span class="el-input__suffix-inner el-select-icon">
+                    <i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
+                </span>
+            </template>
+
+            <el-option v-if="!group" v-for="(label, value) in selectOptions"
+               :key="value"
+               :label="label"
+               :value="value">
+            </el-option>
+
+            <el-option-group
+                v-if="group"
+                v-for="(options, name) in selectOptions"
+                :key="name"
+                :label="name">
+                <el-option
+                    v-for="(label, value) in options"
+                    :key="value"
+                    :label="label"
+                    :value="value">
+                </el-option>
+            </el-option-group>
+
+            <el-option v-if="addNew.status && selectOptions.length != 0" class="el-select__footer" :value="add_new">
+                <div @click="onAddItem">
+                    <i class="fas fa-plus"></i>
+                    <span>
+                        {{ add_new_text }}
+                    </span>
+                </div>
+            </el-option>
+    </el-select>
+</template>
+
+<script>
+import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
+
+import AkauntingModalAddNew from './AkauntingModalAddNew';
+import AkauntingModal from './AkauntingModal';
+import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
+import AkauntingSelect from './AkauntingSelect';
+import AkauntingDate from './AkauntingDate';
+import AkauntingRecurring from './AkauntingRecurring';
+
+import Form from './../plugins/form';
+
+export default {
+    name: "akaunting-select-remote",
+
+    components: {
+        [Select.name]: Select,
+        [Option.name]: Option,
+        [OptionGroup.name]: OptionGroup,
+        [ColorPicker.name]: ColorPicker,
+        AkauntingModalAddNew,
+        AkauntingRadioGroup,
+        AkauntingSelect,
+        AkauntingModal,
+        AkauntingDate,
+        AkauntingRecurring,
+    },
+
+    props: {
+        title: {
+            type: String,
+            default: null,
+            description: "Selectbox label text"
+        },
+        placeholder: {
+            type: String,
+            default: '',
+            description: "Selectbox input placeholder text"
+        },
+        formClasses: {
+            type: Array,
+            default: null,
+            description: "Selectbox input class name"
+        },
+        formError: {
+            type: String,
+            default: null,
+            description: "Selectbox input error message"
+        },
+        name: {
+            type: String,
+            default: null,
+            description: "Selectbox attribute name"
+        },
+        value: {
+            type: String,
+            default: null,
+            description: "Selectbox selected value"
+        },
+        options: null,
+
+        model: null,
+
+        icon: {
+            type: String,
+            description: "Prepend icon (left)"
+        },
+
+        addNew: {
+            type: Object,
+            default: function () {
+                return {
+                    text: 'Add New Item',
+                    status: false,
+                    path: null,
+                    type: 'modal', // modal, inline
+                    field: 'name',
+                    buttons: {}
+                };
+            },
+            description: "Selectbox Add New Item Feature"
+        },
+
+        group:  {
+            type: Boolean,
+            default: false,
+            description: "Selectbox option group status"
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+            description: "Multible feature status"
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+            description: "Selectbox disabled status"
+        },
+        collapse:  {
+            type: Boolean,
+            default: false,
+            description: "Selectbox collapse status"
+        },
+
+        noDataText: {
+            type: String,
+            default: 'No Data',
+            description: "Selectbox empty options message"
+        },
+        noMatchingDataText: {
+            type: String,
+            default: 'No Matchign Data',
+            description: "Selectbox search option not found item message"
+        },
+    },
+
+    data() {
+        return {
+            list: [],
+            add_new: this.addNew,
+            add_new_text: this.addNew.text,
+            selectOptions: this.options,
+            real_model: this.model,
+            add_new_html: '',
+            form: {},
+            loading: false,
+        }
+    },
+
+    mounted() {
+        this.real_model = this.value;
+
+        this.$emit('interface', this.real_model);
+    },
+
+    methods: {
+        remoteMethod(query) {
+            if (query !== '') {
+                this.loading = true;
+                /*
+                this.list = [];
+                this.selectOptions = this.options;
+
+                Object.keys(this.selectOptions).forEach(key => {
+                    const item = this.selectOptions[key];
+
+                    if (item.toLowerCase().indexOf(query.toLowerCase()) > -1) {
+                        this.list.push(this.selectOptions[key]);
+                    }
+                });
+
+                this.selectOptions = this.list;
+                */
+
+                axios.get(url + '/common/items/autocomplete', {
+                    params: {
+                        type: 'email',
+                        query: query,
+                        currency_code: 'USD',
+                    }
+                })
+                .then(response => {
+                    this.loading = false;
+
+                    this.selectOptions = response.data.data;
+                })
+                .catch(e => {
+                })
+                .finally(function () {
+                    // always executed
+                });
+            } else {
+                this.selectOptions = this.options;
+            }
+        },
+
+        change() {
+            this.$emit('change', this.real_model);
+            this.$emit('interface', this.real_model);
+            this.$emit('label', this.selectOptions[this.real_model]);
+
+            alert(this.selectOptions[this.real_model]);
+        },
+
+        onAddItem() {
+            // Get Select Input value
+            var value = this.$children[0].$children[0].$children[0].$refs.input.value;
+
+            if (this.add_new.type == 'inline') {
+                this.addInline(value);
+            } else {
+                this.onModal(value);
+            }
+        },
+
+        addInline(value) {
+
+        },
+
+        onModal(value) {
+            let add_new = this.add_new;
+
+            axios.get(this.add_new.path)
+            .then(response => {
+                add_new.status = true;
+                add_new.html = response.data.html;
+
+                this.$children[0].$children[0].visible = false;
+
+                this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
+                    resolve({
+                        template: '<div><akaunting-modal-add-new :show="add_new.status" @submit="onSubmit" @cancel="add_new.status = false" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
+
+                        components: {
+                            AkauntingModalAddNew,
+                            AkauntingRadioGroup,
+                            AkauntingSelect,
+                            AkauntingModal,
+                            AkauntingDate,
+                            AkauntingRecurring,
+                            [ColorPicker.name]: ColorPicker,
+                        },
+
+                        data: function () {
+                            return {
+                                add_new: add_new,
+                            }
+                        },
+
+                        methods: {
+                            onSubmit(event) {
+                                this.$emit('submit', event);
+                            }
+                        }
+                    })
+                });
+            })
+            .catch(e => {
+                this.errors.push(e);
+            })
+            .finally(function () {
+                // always executed
+            });
+        },
+
+        onSubmit(event) {
+            this.form = event;
+
+            axios.post(this.form.action, this.form.data())
+            .then(response => {
+                this.form.loading = false;
+
+                if (response.data.success) {
+                    this.selectOptions[response.data.data.id] = response.data.data['name'];
+                    this.real_model = response.data.data.id.toString();
+
+                    this.change();
+
+                    this.add_new.status = false;
+                }
+            })
+            .catch(error => {
+                this.form.loading = false;
+
+                this.form.onFail(error);
+
+                this.method_show_html = error.message;
+            });
+        },
+    },
+
+    watch: {
+        options: function (options) {
+            // update options
+            //this.selectOptions = options;
+        }
+    },
+}
+</script>
+
+<style scoped>
+    .form-group .modal {
+        z-index: 3050;
+    }
+
+    .el-select-dropdown__empty {
+        padding: 10px 0 0 !important;
+    }
+
+    .el-select__footer {
+        text-align: center;
+        border-top: 1px solid #dee2e6;
+        padding: 0px;
+        cursor: pointer;
+        color: #3c3f72;
+        font-weight: bold;
+        height: 38px;
+        line-height: 38px;
+        margin-top: 5px;
+        margin-bottom: -6px;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+    }
+
+    .el-select__footer.el-select-dropdown__item.hover {
+        background-color: inherit !important;
+    }
+
+    .el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
+        background-color: #3c3f72 !important;
+        color: white !important;
+        border-top-color: #3c3f72;
+    }
+
+    .el-select__footer div span {
+        margin-left: 5px;
+    }
+</style>
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index d5f6ee34b..034a242bf 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -4,6 +4,7 @@ import AkauntingSearch from './../components/AkauntingSearch';
 import AkauntingModal from './../components/AkauntingModal';
 import AkauntingRadioGroup from './../components/forms/AkauntingRadioGroup';
 import AkauntingSelect from './../components/AkauntingSelect';
+import AkauntingSelectRemote from './../components/AkauntingSelectRemote';
 import AkauntingDate from './../components/AkauntingDate';
 import AkauntingRecurring from './../components/AkauntingRecurring';
 
@@ -19,6 +20,7 @@ export default {
         AkauntingSearch,
         AkauntingRadioGroup,
         AkauntingSelect,
+        AkauntingSelectRemote,
         AkauntingModal,
         AkauntingDate,
         AkauntingRecurring,
diff --git a/resources/lang/en-GB/general.php b/resources/lang/en-GB/general.php
index 5de97ce66..b2aaa8885 100644
--- a/resources/lang/en-GB/general.php
+++ b/resources/lang/en-GB/general.php
@@ -149,6 +149,7 @@ return [
     'month'                => 'Month',
     'year'                => 'Year',
 
+    'type_item_name'    => 'Type an item name',
     'no_data'           => 'No data',
     'no_matching_data'  => 'No matching data',
 
diff --git a/resources/views/partials/form/alias_group.blade.php b/resources/views/partials/form/alias_group.blade.php
deleted file mode 100644
index d3235d7c6..000000000
--- a/resources/views/partials/form/alias_group.blade.php
+++ /dev/null
@@ -1,30 +0,0 @@
-@stack($name . '_input_start')
-
-<div
-    class="form-group visible-field {{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
-    :class="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]">
-    {!! Form::label($name, $text, ['class' => 'form-control-label'])!!}
-
-    <div class="input-group input-group-merge {{ $group_class }}">
-        <div class="input-group-prepend">
-            <span class="input-group-text">
-                <i class="fa fa-{{ $icon }}"></i>
-            </span>
-        </div>
-
-        <vue-suglify :slugify="form.{{ $original }}" :slug.sync="form.{{ $name }}" :disabled="true">
-            {!! Form::text($name, $value, array_merge([
-                'class' => 'form-control',
-                "slot-scope" => "{inputBidding}",
-                "v-bind" => "inputBidding"
-            ], $attributes)) !!}
-        </vue-suglify>
-    </div>
-
-    <div class="invalid-feedback d-block"
-         v-if="{{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.has("' . $name . '")' }}"
-         v-html="{{ isset($attributes['v-error-message']) ? $attributes['v-error-message'] : 'form.errors.get("' . $name . '")' }}">
-    </div>
-</div>
-
-@stack($name . '_input_end')
diff --git a/resources/views/partials/form/select_group.blade.php b/resources/views/partials/form/select_group.blade.php
index 5d29ba994..e06c7fbd0 100644
--- a/resources/views/partials/form/select_group.blade.php
+++ b/resources/views/partials/form/select_group.blade.php
@@ -2,25 +2,42 @@
 
 <akaunting-select
     class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
-    :form-classes="[{'has-error': {{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }} }]"
+
+    @if (!empty($attributes['v-error']))
+    :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
+    @else
+    :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+    @endif
+
+    :icon="'{{ $icon }}'"
     :title="'{{ $text }}'"
     :placeholder="'{{ trans('general.form.select.field', ['field' => $text]) }}'"
     :name="'{{ $name }}'"
     :options="{{ json_encode($values) }}"
     :value="'{{ old($name, $selected) }}'"
-    :icon="'{{ $icon }}'"
-    @interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : (!empty($attributes['data-field'])  ? 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' : 'form.' . $name . ' = $event') }}"
+
+    @if (!empty($attributes['v-model']))
+    @interface="{{ $attributes['v-model'] . ' = $event' }}"
+    @elseif (!empty($attributes['data-field']))
+    @interface="{{ 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' }}"
+    @else
+    @interface="form.{{ $name }} = $event"
+    @endif
+
     @if (!empty($attributes['change']))
     @change="{{ $attributes['change'] }}($event)"
     @endif
+
     @if (isset($attributes['disabled']))
     :disabled="{{ $attributes['disabled'] }}"
     @endif
+
     @if(isset($attributes['v-error-message']))
     :form-error="{{ $attributes['v-error-message'] }}"
     @else
     :form-error="form.errors.get('{{ $name }}')"
     @endif
+
     :no-data-text="'{{ trans('general.no_data') }}'"
     :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
 ></akaunting-select>
diff --git a/resources/views/partials/form/select_remote_group.blade.php b/resources/views/partials/form/select_remote_group.blade.php
new file mode 100644
index 000000000..8e5032538
--- /dev/null
+++ b/resources/views/partials/form/select_remote_group.blade.php
@@ -0,0 +1,45 @@
+@stack($name . '_input_start')
+
+<akaunting-select-remote
+    class="{{ $col }} {{ isset($attributes['required']) ? 'required' : '' }}"
+
+    @if (!empty($attributes['v-error']))
+    :form-classes="[{'has-error': {{ $attributes['v-error'] }} }]"
+    @else
+    :form-classes="[{'has-error': form.errors.get('{{ $name }}') }]"
+    @endif
+
+    :icon="'{{ $icon }}'"
+    :title="'{{ $text }}'"
+    :placeholder="'{{ trans('general.form.select.field', ['field' => $text]) }}'"
+    :name="'{{ $name }}'"
+    :options="{{ json_encode($values) }}"
+    :value="'{{ old($name, $selected) }}'"
+
+    @if (!empty($attributes['v-model']))
+    @interface="{{ $attributes['v-model'] . ' = $event' }}"
+    @elseif (!empty($attributes['data-field']))
+    @interface="{{ 'form.' . $attributes['data-field'] . '.' . $name . ' = $event' }}"
+    @else
+    @interface="form.{{ $name }} = $event"
+    @endif
+
+    @if (!empty($attributes['change']))
+    @change="{{ $attributes['change'] }}($event)"
+    @endif
+
+    @if (isset($attributes['disabled']))
+    :disabled="{{ $attributes['disabled'] }}"
+    @endif
+
+    @if(isset($attributes['v-error-message']))
+    :form-error="{{ $attributes['v-error-message'] }}"
+    @else
+    :form-error="form.errors.get('{{ $name }}')"
+    @endif
+
+    :no-data-text="'{{ trans('general.no_data') }}'"
+    :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+></akaunting-select-remote>
+
+@stack($name . '_input_end')
diff --git a/resources/views/sales/invoices/item.blade.php b/resources/views/sales/invoices/item.blade.php
index 5158cc446..e92a9d67c 100644
--- a/resources/views/sales/invoices/item.blade.php
+++ b/resources/views/sales/invoices/item.blade.php
@@ -16,15 +16,43 @@
     @stack('name_td_start')
         <td class="col-md-3 border-right-0 border-bottom-0">
             @stack('name_input_start')
-                <input class="form-control text-center"
-                       autocomplete="off"
-                       required="required"
+            <akaunting-select-remote
+                :form-classes="[{'has-error': form.errors.get('name') }]"
+                :placeholder="'{{ trans('general.type_item_name') }}'"
+                :name="'item_id'"
+                :options="{{ json_encode($items) }}"
+                :value="'{{ old('item_id', '') }}'"
+                :add-new="{{ json_encode([
+                    'status' => true,
+                    'text' => trans('general.form.add_new', ['field' => trans_choice('general.items', 1)]),
+                    'path' => isset($attributes['path']) ? $attributes['path']: false,
+                    'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
+                    'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
+                    'buttons' => [
+                        'cancel' => [
+                            'text' => trans('general.cancel'),
+                            'icon' => 'fas fa-times',
+                            'class' => 'btn-outline-secondary'
+                        ],
+                        'confirm' => [
+                            'text' => trans('general.save'),
+                            'icon' => 'fas fa-save',
+                            'class' => 'btn-success'
+                        ]
+                    ]
+                ])}}"
+                @interface="row.item_id = $event"
+                @label="row.name = $event"
+                :form-error="form.errors.get('name')"
+                :no-data-text="'{{ trans('general.no_data') }}'"
+                :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+            ></akaunting-select-remote>
+            <input type="hidden"
                        data-item="name"
                        v-model="row.name"
                        @input="onCalculateTotal"
-                       name="item[][name]"
-                       type="text">
-                {!! $errors->first('item.name', '<p class="help-block">:message</p>') !!}
+                       name="item[][name]">
+            {!! $errors->first('item.name', '<p class="help-block">:message</p>') !!}
             @stack('name_input_end')
         </td>
     @stack('name_td_end')