working on AddEmployeeModal-Component

src/components/AddEmployeeModal.vue

@@ -0,0 +1,53 @@
+<template lang="pug">
+
+div.modal.fade#addEmployeeModal(
+    tabindex="-1"
+    aria-labelledby="addEmployeeModalLabel"
+    aria-hidden="false"
+    data-bs-focus="true"
+)
+    .modal-dialog 
+        .modal-content 
+            .modal-header 
+                h5.modal-title#addEmployeeModalLabel Mitarbeiter hinzufügen 
+                button.btn-close(
+                    type="button"
+                    aria-label="Close"
+                    @click=""
+                )
+            .modal-body
+                input.form-control(
+
+                )
+                ul.dropdown-menu(
+                    
+                ) 
+                    li.dropdown-item(
+                        
+                        
+                    )
+                    
+
+</template>
+
+<script setup lang="ts">
+    import { computed } from 'vue'
+
+    const props = defineProps<{
+        searchData : [],
+        searchFields? : string[],
+        sourceRow? : number,
+    }>()
+
+    console.log("hi")
+
+    /* const addEmployeeSuggestions = computed(() => {
+        return employees.value.filter((el: { name: string }) => {
+            return el.name.toLowerCase().search(addEmployeeInput.value.toLowerCase()) > 0
+        })
+    }) */
+
+</script>
+
+<style scoped>
+</style>

src/components/Schedule.vue

@@ -1,37 +1,8 @@
 <template lang="pug">
 
+div#modal-container
 //- div   {{employees}}
 
-
-div.modal.fade#addEmployeeModal( 
-        tabindex="-1" 
-        aria-labelledby="addEmployeeModalLabel" 
-        aria-hidden="true"
-        data-bs-focus="true"
-    )
-    .modal-dialog
-        .modal-content 
-            .modal-header
-                h5.modal-title#addEmployeeModalLabel Mitarbeiter hinzufügen
-                button.btn-close(type="button" data-bs-dismiss="modal" aria-label="Close")
-            .modal-body
-                o-autocomplete(
-                    ref="autocomplete"
-                    inputClass="form-control"
-                    id="addEmployeeInput"
-                    :keep-first="true"
-                    :open-on-focus="true"
-                    placeholder="Nach Vorname / Name suchen..."
-                    v-model="addEmployeeInput"
-                    :data="addEmployeeSuggestions"
-                    ariaAutocomplete="list"
-                    field="name"
-                    menuPosition="bottom"
-                    menuClass="list-group"
-                    itemClass="list-group-item text-start"
-                    itemHoverClass="bg-secondary bg-opacity-10"
-                    @select="addEmployee"
-                )
 //- TODO: #2 Can't highlight list-group-item when hovering
 //- TODO: #3 Close Modal after successful input
 <!-- Schedule Table -->
@@ -56,11 +27,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" 
-                        data-bs-toggle="modal" 
-                        data-bs-target="#addEmployeeModal" 
-                        @click="openModal(rIndex)"
+                        @click="onClickOpenModal(rIndex)"
                     )
-                    i(class="bi bi-plus-lg")
+                    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;
 
 
@@ -68,11 +37,12 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
 
 
 <script setup lang="ts">
-    import { toRef, computed, ref } from 'vue'
+    import { toRef, 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'
     import { de } from 'date-fns/locale'
+    import AddEmployeeModal from './AddEmployeeModal.vue'
 
     /*
     *   Props / Refs
@@ -91,7 +61,7 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
     /*
     *   Local variables
     */
-    const weekdays : string[] = doubleWeekdays()
+    const weekdays : string[] = getDoubleWeekdays()
     const store = useEmployees()
     const { employees } = storeToRefs(store)
     
@@ -128,17 +98,11 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
         return arr
     })
 
-    function doubleWeekdays() : string[] {
+    function getDoubleWeekdays() : string[] {
         let arr = ['Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.', 'So.']
         return arr.concat(arr)
     }
 
-    const addEmployeeSuggestions = computed(() => {
-        return employees.value.filter((el: { name: string }) => {
-            return el.name.toLowerCase().search(addEmployeeInput.value.toLowerCase()) > 0
-        })
-    })
-
     function removeEmployee(rIndex: number, emp : Employee) : void {
         let i = scheduleData.value[rIndex].employees.indexOf(emp)
         if(i > -1){
@@ -150,12 +114,13 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
     /**
      * TODO: #1 Can't focus the autocomplete input 
      */
-    function openModal(index: number): void {
-        let temp : HTMLElement = autocomplete.value ?? new HTMLElement()
-        temp.focus()
-        addEmployeeRow.value = index
-        addEmployeeInput.value = ''
-        console.log("row gesetzt: "+addEmployeeRow.value)
+    function onClickOpenModal(index: number): void {
+        const modal = h('AddEmployeeModal', {
+            searchData: employees.value,
+            searchFields: ['name'],
+            sourceRow: index
+        })
+        render(modal, ,)
     }
 
     function addEmployee(param : Employee){

src/views/Home.vue

@@ -2,15 +2,14 @@
 
 MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" @getMonth="selectedMonth = $event" @getYear="selectedYear = $event")
 
-div(class="mt-5" v-for="(month, index) in months" :key="index") 
-  Schedule(  :startDate="month" :initialOffset="iOffsets[index]")
+//- div(class="mt-5" v-for="(month, index) in months" :key="index") 
+Schedule(  :startDate="months[0]" :initialOffset="iOffsets[0]")
 
 </template>
 
 <script lang="ts" setup>
   import { ref, computed } from 'vue'
   import { getYear, getMonth, eachMonthOfInterval, getDaysInMonth, getISODay } from 'date-fns'
-  import { storeToRefs } from 'pinia'
   import Schedule from '/src/components/Schedule.vue'
   import MonthPicker from '/src/components/MonthPicker.vue'