Solved #4 and #5

src/components/AddEmployeeModal.vue

@@ -19,10 +19,10 @@ div.modal.fade(
             .modal-body
                 input.form-control#inputAutocomplete(
                     v-model="query"
-                    @input="onChange($event)"
+                    @input="onChange"
                     @keypress.enter="onEnter"
-                    @keypress.down="onDown"
+                    @keydown.down="onDown"
-                    @keypress.up="onUp"
+                    @keydown.up="onUp"
                 )
                 .card.p-0(v-show="isOpenSuggestions")
                     ul.list-group.text-start
@@ -74,8 +74,14 @@ div.modal.fade(
 
     function setResult(pResult : Employee) {
         result.value = pResult
+        console.log("new result: "+result.value)
         query.value = pResult.name
+        console.log("new query-string: "+query.value)
         isOpenSuggestions.value = false
+        console.log("is suggestions open? "+ isOpenSuggestions.value)
+        selected.value = 0
+        console.log("whats selected? "+selected.value)
+        suggestions.value = []
         emit('emitResult', result.value)
     }
 
@@ -85,11 +91,10 @@ div.modal.fade(
      * 
      * Begin Event listeners
      */
-    function onChange(event : Event){
+    function onChange(){
-        let query : string = (<HTMLInputElement>event?.target).value
+        if(query.value.length >= (props.minQueryLength ?? 1)) {
-
+            console.log(query.value)
-        if(query.length >= (props.minQueryLength ?? 1)) {
+            filterResults(query.value)
-            filterResults(query)
             isOpenSuggestions.value = true
         }
         else {
@@ -110,16 +115,15 @@ div.modal.fade(
         }
     }
 
-    /**
-     * TODO: #5 Make down, up work!
-     */
     function onDown() {
         if (selected.value < suggestions.value.length - 1) {
-            selected.value++
+            selected.value = selected.value + 1
         }
     }
     function onUp() {
-
+        if(selected.value > 0){
+            selected.value = selected.value - 1
+        }
     }
 
     /**

src/components/Schedule.vue

@@ -44,6 +44,7 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
 
 <script setup lang="ts">
     import { toRef, watch, computed, ref, h, render } from 'vue'
+    import type { Ref } from 'vue'
     import { storeToRefs } from 'pinia'
     import { useEmployees } from '/src/stores/employees.js'
     import { addMonths, subDays, addDays, format, getISODay, isValid, eachDayOfInterval } from 'date-fns'
@@ -57,11 +58,14 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
         startDate: Date,
         initialOffset: number
     }>()
-    const addEmployeeRow = ref()
-    const addEmployeeInput = ref('')
 
+    const endDate = computed(():Date => subDays(addMonths(props.startDate, 1), 1))
+    const offset = computed(() => getISODay(props.startDate) - 1 + props.initialOffset)
+
+    const addEmployeeRow = ref()
     const startDate = toRef(props, 'startDate')
-    const endDate = computed(():Date => subDays(addMonths(startDate.value, 1), 1))
+
+    const scheduleData : Ref<ScheduleData> = ref(getScheduleData())
 
     /*
     *   Local variables
@@ -71,10 +75,7 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
     const store = useEmployees()
     const { employees } = storeToRefs(store)
     
-    const offset = computed(() => getISODay(startDate.value) - 1 + props.initialOffset)
+    function getScheduleData() : ScheduleData {
-    
-    // TODO: #4 Make scheduleData writable, only rewrite dates when startDate, endDate and offset change, keep employees?
-    const scheduleData = computed( () => {
         let arr : ScheduleData = []
         let row : ScheduleRow = {dates: [], employees: []}
 
@@ -102,7 +103,7 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
         }
 
         return arr
-    })
+    }
 
     function getDoubleWeekdays() : string[] {
         let arr = ['Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.', 'So.']
@@ -118,12 +119,17 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
 
     function addEmployee(param : Employee){
         if (addEmployeeRow.value !== undefined && param !== null) {
+            console.log("addEmployee fired!")
+            console.log("addEmployeeRow: "+addEmployeeRow.value)
             scheduleData.value[addEmployeeRow.value].employees.push(param)
-            addEmployeeRow.value = undefined
+            console.log(scheduleData.value)
-            addEmployeeInput.value = ''
         }
     }
 
+    watch(startDate, () => {
+        scheduleData.value = getScheduleData()
+    })
+
 </script>
 
 <style scoped>