AddEmployeeModal(
:searchData="store.state.rows"
:searchFields="['first_name', 'last_name']"
:searchRow="addEmployeeRow"
:modalId="modalId"
@emitResult="addEmployee($event)"
)
.pt-5(v-for="(month, mIndex) in scheduleData" :key="mIndex")
table(class='table table-bordered table-sm' v-for="(row, rIndex) in month" :key="rIndex")
thead
tr
td.fw-bold(style="width: 150px") {{ format(startDates[mIndex], "MMMM", {locale: de}) }}
td(v-for="(day, dIndex) in weekdays" :key="dIndex" :style="dIndex === 6 ? 'border-right : 2px solid' : ''" :class="{'text-body text-opacity-50 bg-secondary bg-opacity-10' : row.dates[dIndex] === null}") {{ day }}
tr
td.fw-bold() {{ format(startDates[mIndex], "y") }}
td(v-for="(date, dIndex) in row.dates" :key="dIndex" :style="dIndex === 6 ? 'border-right : 2px solid' : ''" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")
template(v-if="date !== null") {{ format(date, "dd.MM.")}}
tbody
tr(v-for="(employee, eIndex) in row.employees" :key="eIndex")
td()
.row.justify-content-between.align-items-center.employee-wrapper
.col.text-start.ps-3 {{employee.shorthand}}
.col.text-end
button.btn.btn-sm(
@click="removeEmployee(mIndex, rIndex, employee)"
)
i.bi-x-lg
td(
v-for="(date, dIndex) in row.dates"
:key="dIndex"
:style="dIndex === 6 ? 'border-right : 2px solid' : ''"
:class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null, 'selected' : isSelected(mIndex, rIndex, eIndex, dIndex)}"
tabindex="0"
@click.exact="row.dates[dIndex] !== null ? select(mIndex, rIndex, eIndex, dIndex) : null"
@click.ctrl.exact="row.dates[dIndex] !== null ? ctrlSelect(mIndex, rIndex, eIndex, dIndex) : null"
@click.shift.exact="row.dates[dIndex] !== null ? shiftSelect(mIndex, rIndex, eIndex, dIndex) : null"
@keydown.esc="onEscape"
@keydown.up.prevent="onUp"
@keydown.down.prevent="onDown"
@keydown.right="onRight"
@keydown.left="onLeft"
)
tr()
td().text-end
button(
class="btn btn-sm"
@click="addEmployeeRow = rIndex; addEmployeeMonth = mIndex"
data-bs-toggle="modal"
:data-bs-target="'#'+modalId"
)
i.bi.bi-plus-lg
td(
v-for="(date, dIndex) in row.dates"
:key="dIndex"
:style="dIndex === 6 ? 'border-right : 2px solid' : ''"
:class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}"
)