wiki-grav/plugins/flex-objects/app/list/components/Table.vue
2022-04-24 14:32:58 +02:00

95 lines
3.6 KiB
Vue

<template>
<div>
<vuetable ref="vuetable"
:css="css.table"
:fields="store.fields || []"
:searchFields="store.searchFields || []"
:sortOrder="store.sortOrder"
:multi-sort="true"
:api-mode="true"
:api-url="store.api"
:per-page="perPage"
:append-params="extraParams"
pagination-path="links.pagination"
:show-sort-icons="true"
@vuetable:pagination-data="onPaginationData"
@vuetable:loading="onVuetableLoading"
@vuetable:load-success="onVueTableLoadSuccess"
/>
<div class="flex-list-pagination">
<vuetable-pagination-info ref="paginationInfo"
:info-template="store.paginationInfo"
:info-no-data-template="store.emptyResult"
:css="css.paginationInfo"
/>
<vuetable-pagination ref="pagination"
:css="css.pagination"
@vuetable-pagination:change-page="onChangePage"
/>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import Vuetable from 'vuetable-2/src/components/Vuetable.vue';
import VuetablePagination from "vuetable-2/src/components/VuetablePagination.vue";
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue';
import VuetableCssConfig from "../VuetableCssConfig.js";
import set from 'lodash/set';
import unset from 'lodash/unset';
export default {
props: ['store', 'value'],
components: {Vuetable, VuetablePagination, VuetablePaginationInfo},
data: () => ({
css: VuetableCssConfig,
perPage: 10,
data: [],
extraParams: {}
}),
created() {
this.perPage = this.store.perPage;
this.data = Object.values(this.store.data);
},
mounted() {
this.$refs.vuetable.setData(this.store.data);
this.$events.$on('filter-set', event => this.onFilterSet(event));
this.$events.$on('filter-reset', event => this.onFilterReset());
this.$events.$on('filter-perPage', event => this.onFilterPerPage(event));
},
methods: {
onPaginationData(paginationData) {
this.$refs.pagination.setPaginationData(paginationData);
this.$refs.paginationInfo.setPaginationData(paginationData);
},
onFilterSet (filterText) {
set(this.extraParams, 'filter', filterText);
Vue.nextTick(() => this.$refs.vuetable.refresh());
},
onFilterReset () {
unset(this.extraParams, 'filter');
Vue.nextTick(() => this.$refs.vuetable.refresh());
},
onFilterPerPage (limit) {
// console.log('onFilterPerPage', limit, this.store.data);
this.perPage = limit || this.$refs.paginationInfo.tablePagination.total;
// this.$refs.vuetable.perPage = limit;
Vue.nextTick(() => this.$refs.vuetable.refresh());
},
onChangePage(page) {
this.$refs.vuetable.changePage(page);
},
onVuetableLoading() {
this.$emit('input', true);
},
onVueTableLoadSuccess() {
this.$emit('input', false);
}
}
}
</script>