socrates/duty-schedule-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finetuning Schedule component

Browse Source
This commit is contained in:
Sockenklaus
2021-10-09 23:57:39 +02:00
parent 281cd59acc
commit 0e64a815ea
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Schedule.vue
View File

@@ -13,7 +13,7 @@ AddEmployeeModal(
table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData" :key="rIndex") table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData" :key="rIndex")
thead thead
tr tr
td(style="width: 150px" class="fw-bold") {{ format(startDate, "MMMM", {locale: de}) }} td.fw-bold(style="width: 150px") {{ 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 }} 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 tr
td.fw-bold {{ format(startDate, "y") }} td.fw-bold {{ format(startDate, "y") }}
@@ -21,15 +21,17 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
template(v-if="date !== null") {{ format(date, "dd.MM.")}} template(v-if="date !== null") {{ format(date, "dd.MM.")}}
tbody tbody
tr(v-for="(employee, eIndex) in row.employees" :key="eIndex") tr(v-for="(employee, eIndex) in row.employees" :key="eIndex")
td.text-start td
button.btn( .row.justify-content-between.align-items-center.employee-wrapper
@click="removeEmployee(rIndex, employee)" .col.text-start.ps-3 {{employee.handle}}
) .col.text-end
i.bi-x-lg.me-2 button.btn(
| {{employee.handle}} @click="removeEmployee(rIndex, employee)"
)
i.bi-x-lg
td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")   td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")  
tr() tr()
td.text-start(style="width: 250px") td.text-end
button( button(
class="btn" class="btn"
@click="addEmployeeRow = rIndex" @click="addEmployeeRow = rIndex"
@@ -139,4 +141,14 @@ table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData
background-color: aliceblue !important; background-color: aliceblue !important;
} }
div.employee-wrapper .btn {
transition: 0.3s;
opacity: 0;
border: 0px;
}
div.employee-wrapper:hover .btn {
opacity: 1;
}
</style> </style>