157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<IndexSettingsModal
|
|
id="indexSettingsModal"
|
|
:left-column="settings.employeesIndexColumnsSelected"
|
|
:right-column="columnsNotSelected"
|
|
|
|
@update-columns-selected="updateColumnsSelected"
|
|
/>
|
|
<IndexControls />
|
|
|
|
<SimpleSearch
|
|
:columns="settings.employeesIndexColumnsSelected"
|
|
@search="store.setSimpleSearch($event)"
|
|
/>
|
|
|
|
<table class="table table-hover mt-3 ">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
v-for="(col, index) in settings.employeesIndexColumnsSelected"
|
|
@click="onSortBy(col)"
|
|
>
|
|
{{ 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.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.state.rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
|
|
|
|
<VPaginator
|
|
:radius="1"
|
|
:page="store.state.page"
|
|
:first-page="store.state.meta.first_page"
|
|
:last-page="store.state.meta.last_page"
|
|
@set-page="paginatorSetPage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SimpleSearch from '@/components/Employees/SimpleSearch.vue';
|
|
import IndexSettingsModal from '@/components/Employees/IndexSettingsModal.vue';
|
|
import IndexControls from '@/components/Employees/IndexControls.vue';
|
|
import VPaginator from '@/components/VPaginator.vue';
|
|
import { onMounted, reactive, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { storeToRefs } from 'pinia'
|
|
import useEmployees from '@/stores/employees'
|
|
import { useSettings } from '@/stores/settings';
|
|
import _difference from 'lodash/difference'
|
|
|
|
const store = useEmployees()
|
|
const router = useRouter()
|
|
const settingsStore = useSettings()
|
|
|
|
const { settings } = storeToRefs(settingsStore)
|
|
|
|
const sort_by = reactive({
|
|
asc: true,
|
|
column: 'id'
|
|
})
|
|
|
|
onMounted(async () =>{
|
|
console.log("Employees Index onMounted")
|
|
await store.fetchFromApi()
|
|
await settingsStore.fetchFromApi()
|
|
})
|
|
|
|
const columnsNotSelected = computed(() => {
|
|
return _difference(store.state.columns, settings.value.employeesIndexColumnsSelected)
|
|
})
|
|
|
|
function styleColSelected(col : string) : {visibility: 'visible' | 'hidden'} {
|
|
return {
|
|
visibility: sort_by.column === col ? 'visible' : 'hidden'
|
|
}
|
|
}
|
|
|
|
function updateColumnsSelected(arr: string[]) {
|
|
settings.value.employeesIndexColumnsSelected = arr
|
|
settingsStore.persist()
|
|
}
|
|
|
|
function onSortBy(col : string) {
|
|
if(col !== sort_by.column) sort_by.asc = true
|
|
else sort_by.asc = !sort_by.asc
|
|
|
|
sort_by.column = col
|
|
store.state.sort_by = (sort_by.asc ? 'asc(' : 'desc(') + sort_by.column + ')'
|
|
}
|
|
|
|
const iconSort = computed(() => {
|
|
return 'bi-sort-' + (sort_by.asc ? 'down' : 'up')+'-alt'
|
|
})
|
|
|
|
function paginatorSetPage(e : number){
|
|
store.setPage(e)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.list- {
|
|
&enter-active,
|
|
&leave-active {
|
|
transition: all .2s ease
|
|
}
|
|
|
|
&enter-from,
|
|
&leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
&move {
|
|
transition: all .2s ease
|
|
}
|
|
}
|
|
|
|
table thead tr:first-child th:first-child {
|
|
min-width: 51px;
|
|
}
|
|
|
|
table th {
|
|
-ms-user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-touch-callout: none;
|
|
-khtml-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style> |