Focus the first matched item && enter event adds existing item that is matched

resources/assets/js/components/AkauntingItemButton.vue

@@ -33,7 +33,13 @@
                 </div>
 
                 <ul class="aka-select-menu-options">
-                    <div class="aka-select-menu-option" v-for="(item, index) in sortedItems" :key="index" @click="onItemSelected(item)">
+                    <div 
+                        class="aka-select-menu-option" 
+                        v-for="(item, index) in sortedItems" 
+                        :key="index" 
+                        :class="isItemMatched ? 'highlightItem' : ''"
+                        @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>
@@ -202,6 +208,7 @@ export default {
                 item_selected: false,
                 item_list: false,
             },
+            isItemMatched: false,
             form: {},
             add_new: {
                 text: this.addNew.text,
@@ -221,6 +228,10 @@ export default {
         };
     },
 
+    created() {
+        this.setItemList(this.items);
+    },
+
     mounted() {
         if (this.dynamicCurrency.code != this.currency.code) {
             if (!this.dynamicCurrency.decimal) {
@@ -283,6 +294,8 @@ export default {
         },
 
         onInput() {
+            this.isItemMatched = false; //to remove the style from first item on input change (option)
+
             //to optimize performance we kept the condition that checks for if search exists or not
             if (!this.search) {
                 return;
@@ -297,9 +310,17 @@ export default {
                 return;
             }
 
-            this.onItemMatchedSearchQuery()
+            this.fetchMatchedItems();
 
-            window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
+            this.item_list.length > 0
+                ? this.isItemMatched = true
+                : {}
+
+            this.$emit('input', this.search);
+        },
+
+        async fetchMatchedItems() {
+            await window.axios.get(url + '/common/items?search="' + this.search + '" limit:10')
                         .then(response => {
                             this.item_list = [];
 
@@ -319,15 +340,9 @@ export default {
                                 });
                             }, this);
                         })
-                        .catch(error => {
+                        .catch(error => {});
-
-                        });
-
-            this.$emit('input', this.search);
         },
 
-        onItemMatchedSearchQuery() {},
-
         onItemSelected(item) {
             const indexeditem = { ...item, index: this.currentIndex };
 
@@ -344,12 +359,13 @@ export default {
             this.show.item_list = false;
 
             this.search = '';
+
             // Set default item list
             this.setItemList(this.items);
         },
 
         onItemCreate() {
-            const newItem = {
+            let item = {
                 index: this.newItems.length,
                 key: 0,
                 value: this.search,
@@ -361,60 +377,11 @@ export default {
                 tax_ids: [],
             };
 
-            this.newItems.push(newItem);
+            this.item_list.length === 1 
+                ? item = this.item_list[0] 
+                : this.newItems.push(item)
 
-            this.addItem(newItem);
+            this.addItem(item);
-
-            /*
-            let add_new = this.add_new;
-
-            window.axios.get(this.createRoute)
-            .then(response => {
-                add_new.show = true;
-                add_new.html = response.data.html;
-
-                this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
-                    resolve({
-                        template: '<div><akaunting-modal-add-new :show="add_new.show" @submit="onSubmit" @cancel="onCancel" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
-
-                        components: {
-                            [Select.name]: Select,
-                            [Option.name]: Option,
-                            [OptionGroup.name]: OptionGroup,
-                            [ColorPicker.name]: ColorPicker,
-                            AkauntingModalAddNew,
-                            AkauntingModal,
-                            AkauntingMoney,
-                            AkauntingRadioGroup,
-                            AkauntingSelect,
-                            AkauntingDate,
-                        },
-
-                        data: function () {
-                            return {
-                                add_new: add_new,
-                            }
-                        },
-
-                        methods: {
-                            onSubmit(event) {
-                                this.$emit('submit', event);
-                            },
-
-                            onCancel(event) {
-                                this.$emit('cancel', event);
-                            }
-                        }
-                    })
-                });
-            })
-            .catch(e => {
-                console.log(e);
-            })
-            .finally(function () {
-                // always executed
-            });
-            */
         },
 
         onSubmit(event) {
@@ -541,10 +508,6 @@ export default {
         },
     },
 
-    created() {
-        this.setItemList(this.items);
-    },
-
     computed: {
         sortedItems() {
             return this.sortItems();
@@ -581,3 +544,9 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+    .highlightItem:first-child {
+        background-color: #F5F7FA;    
+    }
+</style>

resources/views/install/language/create.blade.php

@@ -3,15 +3,5 @@
 @section('header', trans('install.steps.language'))
 
 @section('content')
-    <div class="row">
+
-        <div class="col-md-12">
-            <div class="form-group mb-0">
-                <select name="lang" id="lang" size="14" class="col-xl-12 form-control-label">
-                    @foreach (language()->allowed() as $code => $name)
-                        <option value="{{ $code }}" @if ($code == 'en-GB') {{ 'selected="selected"' }} @endif>{{ $name }}</option>
-                    @endforeach
-                </select>
-            </div>
-        </div>
-    </div>
 @endsection

resources/views/layouts/install.blade.php

@@ -1,69 +1,15 @@
 <html>
     @include('partials.install.head')
 
+    @stack('body_start')
     <body class="installation-page">
-
         <div class="main-content">
-            <div class="header pt-3 pb-2">
                 <div class="container">
-                    <div class="header-body text-center mb-5">
+                    @stack('body_start')
-                        <div class="row justify-content-center">
+                    <div id="app"></div>
-                            <div class="col-md-8 col-lg-6 col-xl-5">
-                                <img class="pb-6" src="{{ asset('public/img/akaunting-logo-white.svg') }}" width="22%" alt="Akaunting"/>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="container mt--7 pb-5">
-                <div class="row justify-content-center">
-                    <div class="col-lg-5 col-md-7">
-                        <div id="app">
-                            {!! Form::open([
-                                'url' => url()->current(),
-                                'role' => 'form',
-                                'id' => 'form-install',
-                                '@submit.prevent' => 'onSubmit',
-                                '@keydown' => 'form.errors.clear($event.target.name)',
-                            ]) !!}
-                            <div class="card-body">
-                                <div class="text-center text-muted mt-2 mb-4">
-                                    <small>@yield('header')</small>
-                                </div>
-
-                                @include('flash::message')
-
-                                @yield('content')
-                            </div>
-
-                            <div class="card-footer">
-                                <div class="float-right">
-                                    @if (Request::is('install/requirements'))
-                                        <a href="{{ route('install.requirements') }}" class="btn btn-success"> {{ trans('install.refresh') }}</a>
-                                    @else
-                                        {!! Form::button(
-                                            '<i v-if="loading" :class="(loading) ? \'show \' : \'\'" class="fas fa-spinner fa-spin d-none"></i> ' .
-                                            trans('install.next'),
-                                            [
-                                                ':disabled' => 'loading',
-                                                'type' => 'submit',
-                                                'id' => 'next-button',
-                                                'class' => 'btn btn-success'
-                                            ]
-                                        ) !!}
-                                    @endif
-                                </div>
-                            </div>
-                            {!! Form::close() !!}
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
-
         @include('partials.install.scripts')
-
     </body>
-
 </html>