...

src/components/Schedule.vue

@@ -33,21 +33,25 @@ div.modal.fade#addEmployeeModal(
                     @select="addEmployee"
                 )
 //- TODO: #2 Can't highlight list-group-item when hovering
-
+//- TODO: #3 Close Modal after successful input
 <!-- Schedule Table -->
-table(class='table table-bordered table-sm' v-for="(row, rIndex) in dates" :key="rIndex")
+table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData" :key="rIndex")
     thead
         tr
-            td(style="width: 100px") {{ format(startDate, "MMMM", {locale: de}) }}
+            td(style="width: 100px" 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[index] === null}") {{ day }}
+            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 {{ format(startDate, "y") }}
+            td.fw-bold {{ format(startDate, "y") }}
-            td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}") 
+            td(v-for="(date, dIndex) in row.dates" :key="dIndex"  :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}") 
                 template(v-if="date !== null") {{ format(date, "dd.MM.")}}
     tbody 
-        tr()
+        tr(v-for="(employee, eIndex) in row.employees" :key="eIndex")
-            td {{}}
+            td {{employee.handle}} 
-            td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}") &nbsp;
+                button.btn.btn-outline-secondary.btn-sm(
+                    @click="removeEmployee(rIndex, employee)"
+                ) 
+                    i.bi.bi-trash
+            td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}") &nbsp;
         tr()
             td(style="width: 250px")
                 button(
@@ -57,14 +61,14 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in dates" :key=
                         @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;
+            td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}") &nbsp;
 
 
 </template>
 
 
 <script setup lang="ts">
-    import { toRef, watch, computed, ref } from 'vue'
+    import { toRef, 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'
@@ -91,36 +95,33 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in dates" :key=
     const store = useEmployees()
     const { employees } = storeToRefs(store)
     
-    const daysInMonth : Date[] = eachDayOfInterval({
-        start: startDate.value,
-        end: endDate.value
-    })
     const offset = computed(() => getISODay(startDate.value) - 1 + props.initialOffset)
     
+    // 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: []}
 
-    const dates = computed( () => {
-        let arr = []
-        let row = []
         let start = startDate.value
         let end = endDate.value
         let i
 
         for (i = 0; i < offset.value ; i++) {
-            row.push(null)
+            row.dates.push(null)
         }
 
         while (start <= end){
             while (i < 14 && start <= end){
-                row.push(start)
+                row.dates.push(start)
                 start = addDays(start, 1)
                 i++
             }
             while (i < 14) {
-                row.push(null)
+                row.dates.push(null)
                 i++
             }
             arr.push(row)
-            row = []
+            row = {dates: [], employees: []}
             i = 0
         }
 
@@ -138,19 +139,35 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in dates" :key=
         })
     })
 
+    function removeEmployee(rIndex: number, emp : Employee) : void {
+        let i = scheduleData.value[rIndex].employees.indexOf(emp)
+        if(i > -1){
+            scheduleData.value[rIndex].employees.splice(i, 1)
+        }
+    }
+
 
     /**
      * TODO: #1 Can't focus the autocomplete input 
      */
-    function openModal(index: number) {
+    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 addEmployee(){
+    function addEmployee(param : Employee){
-        console.log("hi")
+        console.log(addEmployeeRow.value)
-        console.log(dates.value)
+        console.log(param)
+
+        if (addEmployeeRow.value !== undefined && param !== null) {
+            scheduleData.value[addEmployeeRow.value].employees.push(param)
+            addEmployeeRow.value = undefined
+            addEmployeeInput.value = ''
+        }
+        console.log(scheduleData.value)
     }
 
 </script>

src/types/schedule-data.d.ts

@@ -0,0 +1,15 @@
+type ScheduleData = [
+    ...ScheduleRow[]
+]
+
+type Employee = {
+    id: number,
+    name: string,
+    handle: string
+    contractHours?: number
+}
+
+type ScheduleRow = {
+    dates : (Date | null)[],
+    employees : Employee[]
+}