working an AddEmployeeModal

src/components/AddEmployeeModal.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 
-div.modal.fade#addEmployeeModal(
+div.modal.fade(
+    :id="modalId"
     tabindex="-1"
     aria-labelledby="addEmployeeModalLabel"
     aria-hidden="false"
@@ -13,41 +14,104 @@ div.modal.fade#addEmployeeModal(
                 button.btn-close(
                     type="button"
                     aria-label="Close"
-                    @click=""
+                    @click="closeModal()"
                 )
             .modal-body
                 input.form-control(
-
+                    v-model="query"
+                    @input="onChange($event)"
                 )
-                ul.dropdown-menu(
-                    
-                ) 
-                    li.dropdown-item(
-                        
-                        
-                    )
-                    
-
+                .card.p-0(v-show="isOpenSuggestions")
+                    ul.list-group.text-start
+                        li.dropdown-item(
+                            v-for="(sugg, i) in suggestions"
+                            :key="i"
+                            @click="setResult(sugg)"
+                        ) {{sugg.name}}
 </template>
 
 <script setup lang="ts">
-    import { computed } from 'vue'
+    import { Modal } from 'bootstrap'
+    import { computed, ref } from 'vue'
+    import type { Ref } from 'vue'
 
+
+    /**
+     * Begin definitions
+     */
     const props = defineProps<{
+        modalId: string,
         searchData : [],
         searchFields? : string[],
         sourceRow? : number,
+        minQueryLength? : number
     }>()
 
-    console.log("hi")
+    const emit = defineEmits<{
+        (e: 'emitResult', result : Employee) : Employee
+    }>()
 
-    /* const addEmployeeSuggestions = computed(() => {
-        return employees.value.filter((el: { name: string }) => {
-            return el.name.toLowerCase().search(addEmployeeInput.value.toLowerCase()) > 0
+    const query : Ref<string> = ref('')
+    const isOpenSuggestions : Ref<boolean> = ref(false)
+    const suggestions : Ref<Employee[]> = ref([])
+    const result : Ref<Employee | undefined> = ref()
+    /**
+     * End definitions
+     * 
+     * 
+     * 
+     * Begin functions
+     */
+    function filterResults(query : string) {
+        suggestions.value = props.searchData.filter((el: { name: string }) => {
+            return el.name.toLowerCase().search(query.toLowerCase()) > -1
         })
-    }) */
+    }
 
+    function setResult(pResult : Employee) {
+        result.value = pResult
+        query.value = pResult.name
+        isOpenSuggestions.value = false
+        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
+     * 
+     * 
+     * Begin Event listeners
+     */
+    function onChange(event : Event){
+        let query : string = (<HTMLInputElement>event?.target).value
+
+        if(query.length >= (props.minQueryLength ?? 1)) {
+            filterResults(query)
+            isOpenSuggestions.value = true
+        }
+        else {
+            isOpenSuggestions.value = false
+        }
+    }
 </script>
 
 <style scoped>
+
+li.dropdown-item:active,
+li.dropdown-item.active {
+    color: black;
+    background-color: #e9ecef;
+}
+
+li.dropdown-item {
+    cursor: pointer;
+}
+
 </style>

src/components/Schedule.vue

@@ -1,7 +1,11 @@
 <template lang="pug">
 
-div#modal-container
-//- div   {{employees}}
+AddEmployeeModal(
+        :searchData="employees" 
+        :searchFields="['name']" 
+        :searchRow="addEmployeeRow" 
+        :modalId="modalId" 
+    )
 
 //- TODO: #2 Can't highlight list-group-item when hovering
 //- TODO: #3 Close Modal after successful input
@@ -27,7 +31,9 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
             td(style="width: 250px")
                 button(
                         class="btn btn-outline-secondary btn-sm" 
-                        @click="onClickOpenModal(rIndex)"
+                        @click="addEmployeeRow = rIndex"
+                        data-bs-toggle="modal"
+                        :data-bs-target="'#'+modalId"
                     )
                     i.bi.bi-plus-lg
             td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}") &nbsp;
@@ -37,7 +43,7 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
 
 
 <script setup lang="ts">
-    import { toRef, computed, ref, h, render } from 'vue'
+    import { toRef, watch, computed, ref, h, render } from 'vue'
     import { storeToRefs } from 'pinia'
     import { useEmployees } from '/src/stores/employees.js'
     import { addMonths, subDays, addDays, format, getISODay, isValid, eachDayOfInterval } from 'date-fns'
@@ -53,7 +59,6 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
     }>()
     const addEmployeeRow = ref()
     const addEmployeeInput = ref('')
-    const autocomplete = ref(null)
 
     const startDate = toRef(props, 'startDate')
     const endDate = computed(():Date => subDays(addMonths(startDate.value, 1), 1))
@@ -61,6 +66,7 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
     /*
     *   Local variables
     */
+    const modalId : string = "addEmployeeModal"
     const weekdays : string[] = getDoubleWeekdays()
     const store = useEmployees()
     const { employees } = storeToRefs(store)
@@ -110,18 +116,9 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
         }
     }
 
-
     /**
      * TODO: #1 Can't focus the autocomplete input 
      */
-    function onClickOpenModal(index: number): void {
-        const modal = h('AddEmployeeModal', {
-            searchData: employees.value,
-            searchFields: ['name'],
-            sourceRow: index
-        })
-        render(modal, ,)
-    }
 
     function addEmployee(param : Employee){
         console.log(addEmployeeRow.value)

src/main.ts

@@ -5,7 +5,7 @@ import router from './router'
 import Oruga from '@oruga-ui/oruga-next'
 import '@oruga-ui/oruga-next/dist/oruga.css'
 import 'bootstrap'
-import "bootstrap/dist/css/bootstrap.css"
+import "bootstrap/scss/bootstrap.scss"
 import "bootstrap-icons/font/bootstrap-icons.css"
 
 createApp(App)