backend pagination and sorting from laravel database

This commit is contained in:
Peter Papp
2020-08-21 16:04:21 +02:00
parent 3e6e046dfc
commit 6dd0b4f026
37 changed files with 853 additions and 505 deletions

View File

@@ -1,7 +1,15 @@
<template>
<PageTab :is-loading="isLoading" :class="{'form-fixed-width': ! isLoading && invoices.length === 0}">
<PageTabGroup v-if="invoices && invoices.length > 0">
<DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
<PageTab :is-loading="isLoading">
<PageTabGroup>
<DatatableWrapper
@init="isLoading = false"
:api="'/api/users/' + this.$route.params.id + '/invoices'"
:paginator="false"
:columns="columns"
class="table"
>
<!--Table data content-->
<template slot-scope="{ row }">
<tr>
<td>
@@ -33,11 +41,15 @@
</td>
</tr>
</template>
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox class="form-fixed-width">
<p>{{ $t('admin_page_user.invoices.empty') }}</p>
</InfoBox>
</template>
</DatatableWrapper>
</PageTabGroup>
<InfoBox v-else>
<p>{{ $t('admin_page_user.invoices.empty') }}</p>
</InfoBox>
</PageTab>
</template>
@@ -63,27 +75,26 @@
data() {
return {
isLoading: true,
invoices: undefined,
columns: [
{
label: this.$t('admin_page_invoices.table.number'),
field: 'data.attributes.order',
sortable: true
sortable: false
},
{
label: this.$t('admin_page_invoices.table.total'),
field: 'data.attributes.bag.amount',
sortable: true
sortable: false
},
{
label: this.$t('admin_page_invoices.table.plan'),
field: 'data.attributes.bag.amount',
sortable: true
sortable: false
},
{
label: this.$t('admin_page_invoices.table.payed'),
field: 'data.attributes.created_at',
sortable: true
sortable: false
},
{
label: this.$t('admin_page_user.table.action'),
@@ -92,13 +103,6 @@
],
}
},
created() {
axios.get('/api/users/' + this.$route.params.id + '/invoices')
.then(response => {
this.invoices = response.data.data
this.isLoading = false
})
}
}
</script>

View File

@@ -1,6 +1,6 @@
<template>
<PageTab :is-loading="isLoading" class="form-fixed-width">
<PageTabGroup v-if="subscription">
<PageTabGroup v-if="subscription && !isLoading">
<FormLabel>
{{ $t('user_subscription.title') }}
</FormLabel>
@@ -27,7 +27,7 @@
</ListInfo>
</div>
</PageTabGroup>
<PageTabGroup v-if="! subscription">
<PageTabGroup v-if="! subscription && !isLoading">
<InfoBox>
<p>{{ $t('admin_page_user.subscription.empty') }}</p>
</InfoBox>