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
+15 -16
View File
@@ -1,8 +1,10 @@
<template>
<PageTab :is-loading="isLoading">
<PageTabGroup v-if="invoices && invoices.length > 0">
<PageTabGroup v-show="! isLoading">
<FormLabel>{{ $t('user_invoices.title') }}</FormLabel>
<DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
<DatatableWrapper @init="isLoading = false" api="/api/user/invoices" :paginator="false" :columns="columns" class="table">
<!--Table data content-->
<template slot-scope="{ row }">
<tr>
<td>
@@ -34,11 +36,15 @@
</td>
</tr>
</template>
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox>
<p>{{ $t('user_invoices.empty') }}</p>
</InfoBox>
</template>
</DatatableWrapper>
</PageTabGroup>
<InfoBox v-else>
<p>{{ $t('user_invoices.empty') }}</p>
</InfoBox>
</PageTab>
</template>
@@ -69,22 +75,22 @@
{
label: this.$t('rows.invoice.number'),
field: 'data.attributes.order',
sortable: true
sortable: false
},
{
label: this.$t('rows.invoice.total'),
field: 'data.attributes.bag.amount',
sortable: true
sortable: false
},
{
label: this.$t('rows.invoice.plan'),
field: 'data.attributes.bag.amount',
sortable: true
sortable: false
},
{
label: this.$t('rows.invoice.payed'),
field: 'data.attributes.created_at',
sortable: true
sortable: false
},
{
label: this.$t('admin_page_user.table.action'),
@@ -93,13 +99,6 @@
],
}
},
created() {
axios.get('/api/user/invoices')
.then(response => {
this.invoices = response.data.data
this.isLoading = false
})
}
}
</script>
+21 -19
View File
@@ -1,7 +1,11 @@
<template>
<PageTab :is-loading="isLoading">
<PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
<!--Page title-->
<FormLabel>{{ $t('user_payments.title') }}</FormLabel>
<!--Add payment method button-->
<div class="page-actions">
<router-link :to="{name: 'CreatePaymentMethod'}">
<MobileActionButton icon="credit-card">
@@ -9,7 +13,11 @@
</MobileActionButton>
</router-link>
</div>
<DatatableWrapper :paginator="false" :columns="columns" :data="PaymentMethods" class="table">
<!--Payment methods table-->
<DatatableWrapper :table-data="{data: PaymentMethods}" :paginator="false" :columns="columns" class="table">
<!--Table data content-->
<template slot-scope="{ row }">
<tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
<td style="width: 300px">
@@ -24,11 +32,6 @@
</div>
</span>
</td>
<!--<td>
<span class="cell-item">
<ColorLabel :color="getCardStatusColor(row.data.attributes.status)">{{ getCardStatus(row.data.attributes.status) }}</ColorLabel>
</span>
</td>-->
<td>
<span class="cell-item">
{{ row.data.attributes.exp_month }} / {{ row.data.attributes.exp_year }}
@@ -46,11 +49,15 @@
</td>
</tr>
</template>
<!--Empty page-->
<template v-slot:empty-page>
<InfoBox>
<p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
</InfoBox>
</template>
</DatatableWrapper>
</PageTabGroup>
<InfoBox v-else>
<p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}">Add new payment method.</router-link> </p>
</InfoBox>
</PageTab>
</template>
@@ -92,17 +99,12 @@
{
label: this.$t('rows.card.number'),
field: 'data.attributes.total',
sortable: true
sortable: false
},
/*{
label: this.$t('rows.card.status'),
field: 'data.attributes.status',
sortable: true
},*/
{
label: this.$t('rows.card.expiration'),
field: 'data.attributes.total',
sortable: true
sortable: false
},
{
label: this.$t('admin_page_user.table.action'),
@@ -170,15 +172,15 @@
}
if (response.status == 200) {
this.defaultPaymentCard = response.data.default
this.PaymentMethods = response.data.others.data
this.PaymentMethods.push(response.data.default)
}
}).finally(() => {
this.isLoading = false
})
}
)
}
},
created() {
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<PageTab :is-loading="isLoading">
<PageTabGroup v-if="subscription">
<PageTabGroup v-if="subscription && !isLoading">
<FormLabel>
{{ $t('user_subscription.title') }}
</FormLabel>
@@ -45,7 +45,7 @@
</div>
</div>
</PageTabGroup>
<InfoBox v-else>
<InfoBox v-if="! subscription && !isLoading">
<p>{{ $t('user_subscription.empty') }}</p>
</InfoBox>
</PageTab>