diff --git a/src/components/Schedule.vue b/src/components/Schedule.vue index d0517dd..6ea1f9f 100644 --- a/src/components/Schedule.vue +++ b/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 -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(v-for="(day, index) in weekdays" :key="index" :class="{'text-body text-opacity-50 bg-secondary bg-opacity-10' : row[index] === null}") {{ day }} + 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.dates[index] === null}") {{ day }} tr - td {{ format(startDate, "y") }} - td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}") + td.fw-bold {{ format(startDate, "y") }} + 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() - td {{}} - td(v-for="(date, dIndex) in row" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row[dIndex] === null}")   + tr(v-for="(employee, eIndex) in row.employees" :key="eIndex") + td {{employee.handle}} + 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}")   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}")   + td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")   diff --git a/src/types/schedule-data.d.ts b/src/types/schedule-data.d.ts new file mode 100644 index 0000000..7a31e08 --- /dev/null +++ b/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[] +} \ No newline at end of file