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

fixed EmployeesIndexSettingsModal: Handle empty right->left action and empty leftList... #24

Browse Source
This commit is contained in:
Sockenklaus
2021-11-15 22:04:24 +01:00
parent 174cb17b04
commit bcbfa09edd
6 changed files with 72 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/Employees/Index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div>
<IndexSettingsModal
id="indexSettingsModal"
:left-column="settings.employeesIndexColumnsSelected"
@@ -20,38 +21,34 @@
v-for="(col, index) in settings.employeesIndexColumnsSelected"
@click="onSortBy(col)"
>
<div class="row">
<div class="col" >
</div>
<div class="col d-flex">
{{ col }} <i :style="styleColSelected(col)" class="bi" :class="iconSort"></i>
</div>
<div class="col" >
<button @click.stop data-bs-toggle="modal" data-bs-target="#indexSettingsModal" v-if="index + 1 === settings.employeesIndexColumnsSelected.length" class="btn my-0 py-0 btn-sm">
<i class="bi bi-gear-fill"></i>
</button>
</div>
</div>
{{ col }} <i :style="styleColSelected(col)" class="bi" :class="iconSort"></i>
</th>
<th>
<button @click.stop data-bs-toggle="modal" data-bs-target="#indexSettingsModal" class="btn m-0 p-0 btn-sm">
<i class="bi bi-gear-fill"></i>
</button>
</th>
</tr>
</thead>
<transition-group name="list" tag="tbody" mode="out-in">
<tr v-for="employee in store.rows" :key="employee.id" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
<tr v-for="employee in store.state.rows" :key="employee.id" @click="router.push({name: 'Employees/Details', params: {id: employee.id}})">
<td v-for="col in settings.employeesIndexColumnsSelected">
{{ employee[col] }}
</td>
<td>
</td>
</tr>
</transition-group>
</table>
<h5 v-show="store.rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
<h5 v-show="store.state.rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
<VPaginator
:radius="1"
:page="store.page"
:first-page="store.meta.first_page"
:last-page="store.meta.last_page"
:page="store.state.page"
:first-page="store.state.meta.first_page"
:last-page="store.state.meta.last_page"
@set-page="paginatorSetPage"
/>
</div>
@@ -85,10 +82,10 @@ onMounted(async () =>{
})
const columnsNotSelected = computed(() => {
return _difference(store.columns, settings.value.employeesIndexColumnsSelected)
return _difference(store.state.columns, settings.value.employeesIndexColumnsSelected)
})
function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
return {
visibility: sort_by.column === col ? 'visible' : 'hidden'
}
@@ -97,7 +94,6 @@ function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
function updateColumnsSelected(arr: string[]) {
settings.value.employeesIndexColumnsSelected = arr
settingsStore.persist()
}
function onSortBy(col : string) {
@@ -105,7 +101,7 @@ function onSortBy(col : string) {
else sort_by.asc = !sort_by.asc
sort_by.column = col
store.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
store.state.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
}
const iconSort = computed(() => {