From 24d62f6d02dc2eb21f808053c2d4b9b533084a33 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Fri, 8 Oct 2021 22:12:40 +0200
Subject: [PATCH] worked on autocomplete modal, solved #1

---
 src/components/AddEmployeeModal.vue | 60 ++++++++++++++++++++++-------
 src/components/Schedule.vue         |  5 +--
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/components/AddEmployeeModal.vue b/src/components/AddEmployeeModal.vue
index 584241a..fb0b9ab 100644
--- a/src/components/AddEmployeeModal.vue
+++ b/src/components/AddEmployeeModal.vue
@@ -4,7 +4,7 @@ div.modal.fade(
     :id="modalId"
     tabindex="-1"
     aria-labelledby="addEmployeeModalLabel"
-    aria-hidden="false"
+    aria-hidden="true"
     data-bs-focus="true"
 )
     .modal-dialog 
@@ -14,12 +14,15 @@ div.modal.fade(
                 button.btn-close(
                     type="button"
                     aria-label="Close"
-                    @click="closeModal()"
+                    data-bs-dismiss="modal"
                 )
             .modal-body
-                input.form-control(
+                input.form-control#inputAutocomplete(
                     v-model="query"
                     @input="onChange($event)"
+                    @keypress.enter="onEnter"
+                    @keypress.down="onDown"
+                    @keypress.up="onUp"
                 )
                 .card.p-0(v-show="isOpenSuggestions")
                     ul.list-group.text-start
@@ -27,15 +30,15 @@ div.modal.fade(
                             v-for="(sugg, i) in suggestions"
                             :key="i"
                             @click="setResult(sugg)"
+                            :class="{'active' : selected === i}"
                         ) {{sugg.name}}
 </template>
 
 <script setup lang="ts">
     import { Modal } from 'bootstrap'
-    import { computed, ref } from 'vue'
+    import { computed, ref, onMounted } from 'vue'
     import type { Ref } from 'vue'
 
-
     /**
      * Begin definitions
      */
@@ -55,6 +58,8 @@ div.modal.fade(
     const isOpenSuggestions : Ref<boolean> = ref(false)
     const suggestions : Ref<Employee[]> = ref([])
     const result : Ref<Employee | undefined> = ref()
+    const selected : Ref<number> = ref(0)
+
     /**
      * End definitions
      * 
@@ -75,14 +80,6 @@ div.modal.fade(
         emit('emitResult', result.value)
     }
 
-    function closeModal() {
-        let modal = Modal.getInstance(document.getElementById(props.modalId))
-        query.value = ''
-        result.value = undefined
-        suggestions.value = []
-        isOpenSuggestions.value = false
-        modal.hide()
-    }
     /**
      * End Functions
      * 
@@ -100,14 +97,49 @@ div.modal.fade(
             isOpenSuggestions.value = false
         }
     }
+
+    function onModalHide() {
+        query.value = ''
+        result.value = undefined
+        suggestions.value = []
+        isOpenSuggestions.value = false
+    }
+
+    function onEnter() {
+        if(selected.value > -1 && selected.value < suggestions.value.length ) {
+            setResult(suggestions.value[selected.value])
+        }
+    }
+
+    function onDown() {
+        if (selected.value < suggestions.value.length - 1) {
+            selected.value++
+        }
+    }
+    function onUp() {
+
+    }
+
+    /**
+     * Lifecycle Hooks
+     */
+    onMounted(() => {
+        let modal = document.getElementById(props.modalId);
+
+        modal?.addEventListener('hide.bs.modal', onModalHide)
+
+        modal?.addEventListener('shown.bs.modal', () => {
+            document.getElementById('inputAutocomplete')?.focus()
+        })
+    })
 </script>
 
 <style scoped>
 
 li.dropdown-item:active,
 li.dropdown-item.active {
-    color: black;
     background-color: #e9ecef;
+    color: #1e2125;
 }
 
 li.dropdown-item {
diff --git a/src/components/Schedule.vue b/src/components/Schedule.vue
index 9b0bfec..e054d39 100644
--- a/src/components/Schedule.vue
+++ b/src/components/Schedule.vue
@@ -5,6 +5,7 @@ AddEmployeeModal(
         :searchFields="['name']" 
         :searchRow="addEmployeeRow" 
         :modalId="modalId" 
+        @emitResult="addEmployee($event)"
     )
 
 //- TODO: #2 Can't highlight list-group-item when hovering
@@ -121,15 +122,11 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
      */
 
     function addEmployee(param : Employee){
-        console.log(addEmployeeRow.value)
-        console.log(param)
-
         if (addEmployeeRow.value !== undefined && param !== null) {
             scheduleData.value[addEmployeeRow.value].employees.push(param)
             addEmployeeRow.value = undefined
             addEmployeeInput.value = ''
         }
-        console.log(scheduleData.value)
     }
 
 </script>