Merge pull request #2539 from brkcvn/live-search

Live search development for Apps search bar

app/Http/Controllers/Modules/Tiles.php

@@ -155,7 +155,7 @@ class Tiles extends Controller
         $modules = $this->getSearchModules($data);
         $installed = Module::all()->pluck('enabled', 'alias')->toArray();
 
-        return view('modules.tiles.index', compact('title', 'modules', 'keyword', 'installed'));
+        return $this->response('modules.tiles.index', compact('modules', 'title', 'keyword', 'installed'));
     }
 
     public function loadMore($type, Request $request)

resources/assets/js/views/modules/apps.js

@@ -29,6 +29,10 @@ const app = new Vue({
         AkauntingSlider
     },
 
+    created() {
+        document.addEventListener('click', this.closeIfClickedOutside);
+    },
+
     mounted() {
         if (typeof app_slug !== 'undefined') {
             this.onReleases(1);
@@ -84,6 +88,12 @@ const app = new Vue({
 
             addToCartLoading: false,
             loadMoreLoading: false,
+            live_search: {
+                data: [],
+                modal: false,
+                not_found: false
+            },
+            route_url: url
         }
     },
 
@@ -288,5 +298,34 @@ const app = new Vue({
                 this.loadMoreLoading = false;
             });
         },
+
+        closeIfClickedOutside(event) {
+            let el = this.$refs.liveSearchModal;
+            let target = event.target;
+
+            if (el !== target && target.contains(el)) {
+                this.live_search.modal = false;
+            }
+        },
+
+        onLiveSearch(event) {
+            let target_length = event.target.value.length;
+
+            if (target_length > 2) {
+                window.axios.get(url + '/apps/search?keyword=' + event.target.value)
+                .then(response => {
+                    this.live_search.data = response.data.data.data;
+                    this.live_search.modal = true;
+                    this.live_search.not_found = false;
+                })
+                .catch(error => {
+                    this.live_search.not_found = true;
+                    this.live_search.data = [];
+                    console.log(error);
+                })
+            } else if (target_length == 0) {
+                this.live_search.modal = false;
+            }
+        }
     }
 });

resources/lang/en-GB/modules.php

@@ -50,6 +50,7 @@ return [
     'hosted_on_akaunting'   => 'Hosted on akaunting.com',
     'only_works_cloud'      => 'This app is available only on <strong>Cloud</strong>.',
     'only_premium_plan'     => 'This app is available only on <strong>Premium Cloud</strong>.',
+    'not_found'             => 'No app found',
 
     'about'                 => 'About',
 

resources/views/components/layouts/modules/bar.blade.php

@@ -61,7 +61,7 @@
     </div>
 
     <div class="flex flex-col lg:flex-row w-full justify-between">
-        <div class="h-full relative">
+        <div class="w-8/12 h-full">
             <form method="GET" action="{{ url("/" . company_id()) }}/apps/search">
                 <div class="h-full flex items-center pl-2 gap-2">
                     <i class="material-icons text-light-gray">search</i>
@@ -73,12 +73,42 @@
                         value="{{ isset($keyword) ? $keyword : '' }}"
                         placeholder="{{ trans('general.search_placeholder') }}"
                         autocomplete="off"
+                        v-on:keyup="onLiveSearch($event)"
                     />
                 </div>
+
+                <div
+                    ref="liveSearchModal"
+                    v-if="live_search.modal"
+                    class="absolute w-full left-0 right-0 bg-white rounded-xl shadow-md pl-4 pr-4 pt-4 top-20 z-10"
+                    :class="live_search.data.length > 8 ? 'pb-0' : 'pb-4'"
+                >
+                    <ul class="grid sm:grid-cols-6 gap-8">
+                        <li v-for="(item, index) in live_search.data.slice(0,8)" :key="index" class="sm:col-span-3 p-3 rounded-lg hover:bg-gray-100">
+                            <a :href="route_url + '/apps/' + item.slug" class="flex items-center space-x-4">
+                                <img v-for="(file, indis) in item.files"
+                                    :src="file.path_string"
+                                    :alt="item.name"
+                                    class="w-16 h-12 rounded-lg object-cover"
+                                />
+                                <div>
+                                    <h6 class="font-bold" v-html="item.name"></h6>
+                                    <span class="text-sm text-gray-500 line-clamp-1" v-html="item.sort_desc ? item.sort_desc : item.description"></span>
+                                </div>
+                            </a>
+                        </li>
+
+                        <li v-if="live_search.not_found">{{ trans('modules.not_found') }}</li>
+                    </ul>
+
+                <div v-if="live_search.data.length > 8" class="flex item-center justify-center mt-5 -mx-4">
+                    <x-button type="submit" class="w-full h-10 flex items-center justify-center text-purple font-medium border-y rounded-bl-xl rounded-br-xl disabled:bg-gray-200 hover:bg-gray-100" override="class">{{ trans('modules.see_more') }}</x-button>
+                </div>
+            </div>
             </form>
         </div>
 
-        <div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400">
+        <div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
             <x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
                 <x-link.hover color="to-black-400">
                     {{ trans('modules.home') }}