From da37d37d3ef63a1b09922cb16cee4bd00c47af29 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 27 Aug 2019 19:02:57 +0200
Subject: [PATCH] Search autocomplete suggestions. WIP #2770 @8

---
 app/Templates/Search.php                  |  2 +-
 package.json                              |  1 +
 resources/js/app.js                       |  4 +-
 resources/js/components/Search.vue        | 28 ++++----
 resources/js/components/SearchField.vue   | 80 +++++++++++++++++++++++
 resources/styles/components/search.styl   | 34 ++++++++++
 resources/views/pages/search.blade.php    | 14 ++--
 resources/views/partials/header.blade.php |  2 +-
 yarn.lock                                 |  5 ++
 9 files changed, 146 insertions(+), 24 deletions(-)
 create mode 100644 resources/js/components/SearchField.vue

diff --git a/app/Templates/Search.php b/app/Templates/Search.php
index 6c29386..28b12e3 100644
--- a/app/Templates/Search.php
+++ b/app/Templates/Search.php
@@ -31,7 +31,7 @@ class Search extends Base
 
         $request = $data['request'];
 
-        $data['results'] = SearchEngine::query($request->q, $request->type ?? null, $request->limit ?? null);
+        $data['results'] = $request->q ? SearchEngine::query($request->q, $request->type, $request->limit) : [];
 
     }
 
diff --git a/package.json b/package.json
index 83d661e..a5439d0 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@trevoreyre/autocomplete-vue": "^2.0.2",
         "axios": "^0.18",
         "bootstrap": "^4.0.0",
         "browser-sync": "^2.26.5",
diff --git a/resources/js/app.js b/resources/js/app.js
index d396607..96de17e 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -80,8 +80,8 @@ const app = new Vue({
 
           axios.post('/ajax/cart', data)
               .then(function(response) {
-                  console.log('Cart updated');
-                  console.table(response.data);
+                  //console.log('Cart updated');
+                  //console.table(response.data);
                   root.items = response.data;
               })
               .catch(function(error) {
diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
index 2271264..ccc6b0d 100644
--- a/resources/js/components/Search.vue
+++ b/resources/js/components/Search.vue
@@ -11,13 +11,9 @@
         <slide-toggle :active="visible" :duration="300" @open-end="focusField">
             <div class="header-search-box container py-3">
                 <form :action="endpoint" method="get" class="flex justify-between items-center">
-                    <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
-                           type="text"
-                           name="q"
-                           autocomplete="off"
-                           tabindex="-1"
-                           ref="searchInput"
-                           :placeholder="placeholder">
+
+                    <search-field :placeholder="placeholder" ref="searchInput"></search-field>
+
                     <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
                         <slot name="button"></slot>
                     </button>
@@ -29,11 +25,13 @@
 
 <script>
     import SlideToggle from 'vue-slide-up-down'
+    import SearchField from './SearchField'
 
     export default {
 
         components: {
-            SlideToggle
+            SlideToggle,
+            SearchField
         },
 
         data() {
@@ -67,13 +65,13 @@
             });
 
             // Allow search field to be hidden when pressing escape from inside the field
-            this.$refs.searchInput.addEventListener('keydown', (event) => {
-                event.stopPropagation(); // We'll handle all keydown events here only
-                if (event.keyCode === 27) {
-                    component.toggleVisibility(); // Hide the search box when ESC is pressed
-                    component.$refs.searchInput.blur(); // Take focus away from the search input so it doesn't block the opening shortcut
-                }
-            });
+            // this.$refs.searchInput.addEventListener('keydown', (event) => {
+            //     event.stopPropagation(); // We'll handle all keydown events here only
+            //     if (event.keyCode === 27) {
+            //         component.toggleVisibility(); // Hide the search box when ESC is pressed
+            //         component.$refs.searchInput.blur(); // Take focus away from the search input so it doesn't block the opening shortcut
+            //     }
+            // });
         },
 
         methods: {
diff --git a/resources/js/components/SearchField.vue b/resources/js/components/SearchField.vue
new file mode 100644
index 0000000..a70351e
--- /dev/null
+++ b/resources/js/components/SearchField.vue
@@ -0,0 +1,80 @@
+<template>
+    <autocomplete
+        class="flex-grow"
+        name="q"
+        ref="autocomplete"
+        :search="getSuggestions"
+        :get-result-value="getResultValue"
+        :placeholder="placeholder"
+        :aria-placeholder="placeholder"
+        @submit="handleSubmit"
+    >
+    </autocomplete>
+</template>
+
+<script>
+    import Autocomplete from '@trevoreyre/autocomplete-vue'
+
+    export default {
+
+        name: 'search-field',
+
+        components: {
+            Autocomplete
+        },
+
+        data() {
+            return {
+                ajaxURL: `/ajax/search`,
+                suggestionsLimit: 5,
+            }
+        },
+
+        props: {
+            placeholder: {
+                type: String,
+            },
+        },
+
+        mounted () {
+
+        },
+
+        methods: {
+            focus() {
+                this.$refs.autocomplete.$refs.input.focus()
+            },
+
+            getSuggestions(input) {
+
+                return new Promise(resolve => {
+
+                    if (input.length < 1) {
+                        return resolve([])
+                    }
+
+                    axios.post(this.ajaxURL, { q: input, limit: this.suggestionsLimit })
+                        .then(function(response) {
+                            if (response.data.length > 0) {
+                                resolve(response.data);
+                            }
+                        })
+                        .catch(function(error) {
+                            console.error('Error fetching search suggestions', error);
+                        });
+                });
+            },
+
+            getResultValue(result) {
+                return result.title
+            },
+
+            handleSubmit(input) {
+                let $this = this;
+                this.$nextTick(function () {
+                    $this.$el.closest('form').submit();
+                });
+            }
+        }
+    }
+</script>
diff --git a/resources/styles/components/search.styl b/resources/styles/components/search.styl
index 07af7c1..65f0ba5 100644
--- a/resources/styles/components/search.styl
+++ b/resources/styles/components/search.styl
@@ -28,3 +28,37 @@ $breakpoint-search-results = 980px
 
       .form-submit-button
         @apply w-full mb-4
+
+
+//== Autocomplete field
+.autocomplete
+  @apply flex-grow
+
+  &-input
+    @apply px-2 py-2 font-display text-2xl w-full appearance-none
+
+    &:focus
+      @apply outline-none border-t border-r border-l border-grey-200
+
+      .header-search-box &
+        @apply bg-grey-100
+
+        &[aria-expanded=true]
+          @apply bg-white
+
+    +below(450px)
+      @apply text-base
+
+
+  &-result-list
+    @apply border-l border-r border-b border-grey-200 shadow-lg
+    z-index: 20 !important
+
+  &-result
+    @apply bg-white px-2 py-4 border-b border-grey-200
+
+    &:last-child
+      @apply border-none
+
+    &:hover, &[aria-selected=true]
+      @apply bg-grey-100 cursor-pointer
diff --git a/resources/views/pages/search.blade.php b/resources/views/pages/search.blade.php
index b98a4bc..644fc6b 100644
--- a/resources/views/pages/search.blade.php
+++ b/resources/views/pages/search.blade.php
@@ -11,11 +11,15 @@
 
                 <div class="bg-grey-100 p-1v">
                     <form action="{{ $nav->getHrefByName('recherche') }}" method="get" class="flex justify-between items-center sm:block">
-                        <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none sm:w-full xs:text-base"
-                               type="text"
-                               name="q"
-                               autocomplete="off"
-                               placeholder="{{ __('Saisissez votre recherche') }}">
+
+                        <search-field placeholder="{{ __('Saisissez votre recherche') }}"></search-field>
+
+{{--                        <input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none sm:w-full xs:text-base"--}}
+{{--                               type="text"--}}
+{{--                               name="q"--}}
+{{--                               autocomplete="off"--}}
+{{--                               placeholder="{{ __('Saisissez votre recherche') }}">--}}
+
                         <button class="btn flex items-center py-3 px-8 font-display text-lg rounded ml-4 sm:mt-4 sm:mx-auto">
                             @svg('search', 'fill-current mr-2')
                             {{ __('Rechercher') }}
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 9cf10b8..d9b4743 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -1,5 +1,5 @@
 <header class="site-header">
-    <div class="container flex items-center py-8 relative z-20">
+    <div class="container flex items-center py-8 relative z-30">
 
         <div class="mobile-menu-icon hidden">
             <a href="#menu">
diff --git a/yarn.lock b/yarn.lock
index f6b9de7..72184c9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -655,6 +655,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@trevoreyre/autocomplete-vue@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@trevoreyre/autocomplete-vue/-/autocomplete-vue-2.0.2.tgz#78c7ef9d95a233f65ec38cd5c52d59f531866a0d"
+  integrity sha512-2A/SQjtZOX1/4AAsw/EkblMKw1xH+EJj99K2tRXu8umUpBFWUFk3PXCa7NlBE3fv2YSKf7fGEn1i225xtiulUg==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
-- 
2.39.5