started working on autocomplete addEmployee

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-main>
-      <div class="container">
+      <div class="container bg-white shadow p-3">
         <router-view></router-view>
       </div>
     </v-main>

src/components/MonthPicker.vue

@@ -44,12 +44,10 @@
     const props = defineProps<{
         selectedMonth: number,
         selectedYear: number,
-        state: ('closed'|'open')
     }>()
 
     const selectedMonth : Ref<number>= ref(props.selectedMonth)
     const selectedYear : Ref<number> = ref(props.selectedYear)
-    const state : Ref<'closed'|'open'> = ref(props.state)
 
     const monthsShort : string[] = [
         'Jan', 'Feb', 'Mrz', 'Apr', 
@@ -64,16 +62,6 @@
         'November', 'Dezember'
     ]
 
-    function toggleState() {
-        if(state.value === 'open') state.value = 'closed'
-        else state.value = 'open'
-    }
-
-    const btnCloseBg : ComputedRef<string> = computed(() => {
-        if(state.value === 'open') return ''
-        else return ''
-    })
-
     const emit = defineEmits<{
         (e: 'getYear', year: number): number
         (e: 'getMonth', month: number): number

src/components/Schedule.vue

@@ -1,35 +1,70 @@
 <template lang="pug">
 
-h1(v-if="isValid(startDate)") {{format(startDate, "MMMM y", {locale: de})}}
+//- div   {{employees}}
 
-table(class='table table-sm' v-for="(row, rIndex) in dates" :key="rIndex")
+
+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
+
+<!-- Schedule Table -->
+table(class='table table-bordered table-sm' v-for="(row, rIndex) in dates" :key="rIndex")
     thead
         tr
-            td(style="width: 200px")
-            td(v-for="(day, index) in weekdays" :key="index" :class="{'text-body text-opacity-25' : row[index] === null}") {{ day }}
+            td(style="width: 100px") {{ 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[index] === null}") {{ day }}
         tr
-            td
-            td(v-for="(date, dIndex) in row" :key="dIndex") 
+            td {{ format(startDate, "y") }}
+            td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}") 
                 template(v-if="date !== null") {{ format(date, "dd.MM.")}}
     tbody 
         tr()
             td {{}}
-            td(v-for="(date, dIndex) in row" :key="dIndex") &nbsp;
+            td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}") &nbsp;
         tr()
             td(style="width: 250px")
-                o-autocomplete(
-                    :keep-first="true" 
-                    :open-on-focus="true"
-                    inputClass="form-control form-control-sm"
-                )   
-            td(v-for="(date, dIndex) in row" :key="dIndex") &nbsp;
+                button(
+                        class="btn btn-outline-secondary btn-sm" 
+                        data-bs-toggle="modal" 
+                        data-bs-target="#addEmployeeModal" 
+                        @click="openModal(rIndex)"
+                    )
+                    i(class="bi bi-plus-lg")
+            td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}") &nbsp;
 
 
 </template>
 
 
 <script setup lang="ts">
-    import { toRef, computed, ref } from 'vue'
+    import { toRef, watch, computed, 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'
@@ -42,6 +77,9 @@ table(class='table table-sm' v-for="(row, rIndex) in dates" :key="rIndex")
         startDate: Date,
         initialOffset: number
     }>()
+    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))
@@ -50,7 +88,8 @@ table(class='table table-sm' v-for="(row, rIndex) in dates" :key="rIndex")
     *   Local variables
     */
     const weekdays : string[] = doubleWeekdays()
-    const { employees } = storeToRefs(useEmployees())
+    const store = useEmployees()
+    const { employees } = storeToRefs(store)
     
     const daysInMonth : Date[] = eachDayOfInterval({
         start: startDate.value,
@@ -93,12 +132,36 @@ table(class='table table-sm' v-for="(row, rIndex) in dates" :key="rIndex")
         return arr.concat(arr)
     }
 
+    const addEmployeeSuggestions = computed(() => {
+        return employees.value.filter((el: { name: string }) => {
+            return el.name.toLowerCase().search(addEmployeeInput.value.toLowerCase()) > 0
+        })
+    })
 
 
+    /**
+     * TODO: #1 Can't focus the autocomplete input 
+     */
+    function openModal(index: number) {
+        let temp : HTMLElement = autocomplete.value ?? new HTMLElement()
+        temp.focus()
+        addEmployeeRow.value = index
+    }
+
+    function addEmployee(){
+        console.log("hi")
+        console.log(dates.value)
+    }
+
 </script>
 
 <style scoped>
     table {
         table-layout: fixed
     }
+
+    .o-acp__item.list-group-item:hover {
+        background-color: aliceblue !important;
+    }
+
 </style>

src/main.ts

@@ -4,7 +4,7 @@ import App from './App.vue'
 import router from './router'
 import Oruga from '@oruga-ui/oruga-next'
 import '@oruga-ui/oruga-next/dist/oruga.css'
-import "bootstrap"
+import 'bootstrap'
 import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap-icons/font/bootstrap-icons.css"
 

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 
-MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" @getMonth="selectedMonth = $event" @getYear="selectedYear = $event" state="closed")
+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]")