better usability on AddEmployeeModal and some styling on Schedule

src/components/AddEmployeeModal.vue

@@ -35,7 +35,7 @@ div.modal.fade(
 </template>
 
 <script setup lang="ts">
-    import { computed, ref, onMounted } from 'vue'
+    import { computed, ref, watch, onMounted } from 'vue'
     import type { Ref } from 'vue'
 
     /**
@@ -70,17 +70,16 @@ div.modal.fade(
         suggestions.value = props.searchData.filter((el: { name: string }) => {
             return el.name.toLowerCase().search(query.toLowerCase()) > -1
         })
+        if(selected.value >= suggestions.value.length){
+            selected.value = suggestions.value.length - 1
+        }
     }
 
     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)
     }
@@ -93,7 +92,6 @@ div.modal.fade(
      */
     function onChange(){
         if(query.value.length >= (props.minQueryLength ?? 1)) {
-            console.log(query.value)
             filterResults(query.value)
             isOpenSuggestions.value = true
         }
@@ -105,6 +103,7 @@ div.modal.fade(
     function onModalHide() {
         query.value = ''
         result.value = undefined
+        selected.value = 0
         suggestions.value = []
         isOpenSuggestions.value = false
     }

src/components/Schedule.vue

@@ -13,7 +13,7 @@ AddEmployeeModal(
 table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData" :key="rIndex")
     thead
         tr
-            td(style="width: 100px" class="fw-bold") {{ format(startDate, "MMMM", {locale: de}) }}
+            td(style="width: 150px" class="fw-bold") {{ format(startDate, "MMMM", {locale: de}) }}
             td(v-for="(day, index) in weekdays" :key="index"  :class="{'text-body text-opacity-50 bg-secondary bg-opacity-10' : row.dates[index] === null}") {{ day }}
         tr
             td.fw-bold {{ format(startDate, "y") }}
@@ -21,16 +21,17 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
                 template(v-if="date !== null") {{ format(date, "dd.MM.")}}
     tbody 
         tr(v-for="(employee, eIndex) in row.employees" :key="eIndex")
-            td {{employee.handle}} 
-                button.btn.btn-outline-secondary.btn-sm(
+            td.text-start
+                button.btn(
                     @click="removeEmployee(rIndex, employee)"
-                ) 
-                    i.bi.bi-trash
+                )
+                    i.bi-x-lg.me-2
+                    | {{employee.handle}}
             td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")  
         tr()
-            td(style="width: 250px")
+            td.text-start(style="width: 250px")
                 button(
-                        class="btn btn-outline-secondary btn-sm" 
+                        class="btn" 
                         @click="addEmployeeRow = rIndex"
                         data-bs-toggle="modal"
                         :data-bs-target="'#'+modalId"
@@ -119,10 +120,7 @@ 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)
-            console.log(scheduleData.value)
         }
     }
 

src/views/Home.vue

@@ -2,8 +2,8 @@
 
 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="months[0]" :initialOffset="iOffsets[0]")
+div(class="mt-5" v-for="(month, index) in months" :key="index") 
+  Schedule(  :startDate="months[index]" :initialOffset="iOffsets[index]")
 
 </template>