datatable refactoring

This commit is contained in:
Čarodej
2022-01-26 10:39:10 +01:00
parent 3652c64738
commit fb91c1883a
24 changed files with 925 additions and 625 deletions

View File

@@ -1,18 +1,18 @@
<template>
<PageTab :is-loading="isLoading">
<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscriptions/admin/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscriptions/admin/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card overflow-x-auto">
<!--Table data content-->
<template slot-scope="{ row }">
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td>
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link class="flex items-center" :to="{name: 'UserDetail', params: {id: row.data.relationships.user.data.id}}">
<MemberAvatar
:is-border="false"
:size="36"
:member="row.data.relationships.user"
/>
<div class="ml-3">
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
@@ -22,24 +22,24 @@
</div>
</router-link>
</td>
<td class="py-5">
<span class="text-sm font-bold">
<td class="md:px-1 px-3">
<span class="text-sm font-bold whitespace-nowrap">
{{ row.data.attributes.renews_at }}
</span>
</td>
<td class="text-right">
<td class="md:pl-1 pl-3 text-right">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</td>
</tr>
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
<td>
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-3 md:pr-1 pr-3">
<router-link class="flex items-center" :to="{name: 'UserDetail', params: {id: row.data.relationships.user.data.id}}">
<MemberAvatar
:is-border="false"
:size="36"
:member="row.data.relationships.user"
/>
<div class="ml-3">
<div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
{{ row.data.relationships.user.data.attributes.name }}
</b>
@@ -49,28 +49,28 @@
</div>
</router-link>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel :color="$getSubscriptionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="py-5">
<td class="md:px-1 px-3">
<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
{{ row.data.attributes.name }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
<!--todo: update renew attribute-->
{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold">
{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
</span>
</td>
<td class="text-right">
<td class="md:pl-1 pl-3 text-right">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</td>
</tr>