+
diff --git a/src/components/MonthPicker.vue b/src/components/MonthPicker.vue
index 223a58f..bed25b0 100644
--- a/src/components/MonthPicker.vue
+++ b/src/components/MonthPicker.vue
@@ -44,12 +44,10 @@
const props = defineProps<{
selectedMonth: number,
selectedYear: number,
- state: ('closed'|'open')
}>()
const selectedMonth : Ref
= ref(props.selectedMonth)
const selectedYear : Ref = 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 = computed(() => {
- if(state.value === 'open') return ''
- else return ''
- })
-
const emit = defineEmits<{
(e: 'getYear', year: number): number
(e: 'getMonth', month: number): number
diff --git a/src/components/Schedule.vue b/src/components/Schedule.vue
index 082827e..d0517dd 100644
--- a/src/components/Schedule.vue
+++ b/src/components/Schedule.vue
@@ -1,35 +1,70 @@
-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
+
+
+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")
+ td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}")
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")
+ 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}")
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 19adde9..a2c43c9 100644
--- a/src/main.ts
+++ b/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"
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 797f53c..bd43987 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
-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]")