mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-22 09:32:14 +00:00
datatable refactoring
This commit is contained in:
Čarodej
@@ -3,7 +3,7 @@
|
||||
<div id="page-content" v-if="! isLoading && data">
|
||||
|
||||
<!--Headline-->
|
||||
<div v-if="config.isAdminVueFileManagerBar" class="md:flex justify-between md:mb-6 mb-4">
|
||||
<div v-if="config.isAdminVueFileManagerBar" class="md:flex justify-between md:mb-6 mb-4 md:block hidden">
|
||||
|
||||
<!--VueFileManager logo-->
|
||||
<a href="https://vuefilemanager.com" target="_blank">
|
||||
|
||||
@@ -2,61 +2,19 @@
|
||||
<div>
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper
|
||||
v-if="! config.isEmptyTransactions" class="card shadow-card"
|
||||
@init="isLoading = false"
|
||||
api="/api/subscriptions/admin/transactions"
|
||||
v-if="! config.isEmptyTransactions" class="card shadow-card overflow-x-auto"
|
||||
api="/api/admin/transactions"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-5">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.note }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="row.data.relationships.user" class="flex items-center">
|
||||
<MemberAvatar
|
||||
:is-border="false"
|
||||
:size="36"
|
||||
:member="row.data.relationships.user"
|
||||
/>
|
||||
<div class="ml-3">
|
||||
<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>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ row.data.relationships.user.data.attributes.email }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
|
||||
{{ $t('User was deleted') }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
|
||||
{{ row.data.attributes.type }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
|
||||
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
|
||||
</td>
|
||||
</tr>
|
||||
<!--Transaction rows-->
|
||||
<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" :user="true" @showDetail="showTransactionDetail" />
|
||||
|
||||
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" :user="true" />
|
||||
|
||||
<!--Transaction detail-->
|
||||
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
|
||||
@@ -76,6 +34,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FixedTransactionRow from "../../components/Subscription/FixedTransactionRow";
|
||||
import MeteredTransactionDetailRow from "../../components/Subscription/MeteredTransactionDetailRow";
|
||||
import MeteredTransactionRow from "../../components/Subscription/MeteredTransactionRow";
|
||||
import MemberAvatar from "../../components/FilesView/MemberAvatar"
|
||||
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
|
||||
import ColorLabel from '/resources/js/components/Others/ColorLabel'
|
||||
@@ -84,6 +45,9 @@
|
||||
export default {
|
||||
name: 'Invoices',
|
||||
components: {
|
||||
MeteredTransactionDetailRow,
|
||||
MeteredTransactionRow,
|
||||
FixedTransactionRow,
|
||||
DatatableWrapper,
|
||||
MemberAvatar,
|
||||
ColorLabel,
|
||||
@@ -92,44 +56,22 @@
|
||||
...mapGetters([
|
||||
'config',
|
||||
]),
|
||||
columns() {
|
||||
return this.$store.getters.transactionColumns.filter(column => ! ['type'].includes(column.field))
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
invoices: [],
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'note',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('User'),
|
||||
field: 'user_id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_invoices.table.total'),
|
||||
field: 'amount',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Payed At'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver',
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
showedTransactionDetailById: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTransactionDetail(id) {
|
||||
if (this.showedTransactionDetailById === id)
|
||||
this.showedTransactionDetailById = undefined
|
||||
else
|
||||
this.showedTransactionDetailById = id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,42 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="page-content" v-show="! isLoading">
|
||||
<div class="card shadow-card">
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="table table-users">
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-4">
|
||||
<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="text-sm font-bold cursor-pointer" tag="div">
|
||||
{{ row.data.attributes.title }}
|
||||
<div>
|
||||
<div class="card shadow-card">
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="overflow-x-auto">
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-5 md:pr-1 pr-3">
|
||||
<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="text-sm font-bold cursor-pointer" tag="div">
|
||||
{{ row.data.attributes.title }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.slug }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
<SwitchInput @input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)" v-model="row.data.attributes.visibility" :state="row.data.attributes.visibility" class="switch"/>
|
||||
</span>
|
||||
</td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md dark:bg-2x-dark-foreground hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.slug }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
<SwitchInput @input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)" v-model="row.data.attributes.visibility" :state="row.data.attributes.visibility" class="switch"/>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md dark:bg-2x-dark-foreground hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -13,37 +13,37 @@
|
||||
</div>
|
||||
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns">
|
||||
<DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns" class="overflow-x-auto">
|
||||
<template slot-scope="{ row }">
|
||||
|
||||
<!--Metered subscription-->
|
||||
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-4">
|
||||
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-5 md:pr-1 pr-3">
|
||||
<router-link class="text-sm font-bold" :to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}">
|
||||
{{ row.data.attributes.name }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getPlanStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.currency }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold capitalize">
|
||||
{{ row.data.attributes.interval }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.subscribers }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link
|
||||
:to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}"
|
||||
@@ -63,36 +63,36 @@
|
||||
</tr>
|
||||
|
||||
<!--Fixed subscription-->
|
||||
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-4">
|
||||
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-5 md:pr-1 pr-3">
|
||||
<SwitchInput @input="$updateInput(`/subscriptions/admin/plans/${row.data.id}`, 'visible', row.data.attributes.visible)" v-model="row.data.attributes.visible" :state="row.data.attributes.visible" class="switch"/>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<router-link class="text-sm font-bold" :to="{name: 'PlanFixedSettings', params: {id: row.data.id}}">
|
||||
{{ row.data.attributes.name }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold capitalize">
|
||||
{{ row.data.attributes.interval }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.subscribers }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.features.max_storage_amount }} GB
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanFixedSettings', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card">
|
||||
<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card overflow-x-auto">
|
||||
|
||||
<!--Table data content-->
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td>
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-5 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>
|
||||
@@ -23,12 +23,12 @@
|
||||
</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>
|
||||
@@ -36,18 +36,18 @@
|
||||
{{ row.data.relationships.plan.data.attributes.price }} / {{ $t(`interval.${row.data.relationships.plan.data.attributes.interval}`) }}
|
||||
</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>
|
||||
|
||||
@@ -14,11 +14,11 @@
|
||||
</div>
|
||||
|
||||
<!--Datatable-->
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
|
||||
<DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="overflow-x-auto">
|
||||
<template slot-scope="{ row }">
|
||||
<!--Not a subscription-->
|
||||
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-3">
|
||||
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
|
||||
<td class="py-3 md:pr-1 pr-3">
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
@@ -26,7 +26,7 @@
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<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.settings.data.attributes.name }}
|
||||
</b>
|
||||
@@ -37,12 +37,12 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.used_formatted }}
|
||||
</span>
|
||||
@@ -50,7 +50,7 @@
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td v-if="config.storageLimit">
|
||||
<td class="md:px-1 px-3" v-if="config.storageLimit">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
</span>
|
||||
@@ -58,12 +58,12 @@
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
@@ -76,8 +76,8 @@
|
||||
</tr>
|
||||
|
||||
<!--Fixed subscription-->
|
||||
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-3">
|
||||
<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 :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
@@ -85,7 +85,7 @@
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<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.settings.data.attributes.name }}
|
||||
</b>
|
||||
@@ -96,17 +96,17 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td v-if="config.isSaaS">
|
||||
<td class="md:px-1 px-3" v-if="config.isSaaS">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.used_formatted }}
|
||||
</span>
|
||||
@@ -114,7 +114,7 @@
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td v-if="config.storageLimit">
|
||||
<td class="md:px-1 px-3" v-if="config.storageLimit">
|
||||
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
</span>
|
||||
@@ -122,12 +122,12 @@
|
||||
-
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
@@ -140,8 +140,8 @@
|
||||
</tr>
|
||||
|
||||
<!--Metered subscription-->
|
||||
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-3">
|
||||
<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 :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<div class="flex items-center">
|
||||
<MemberAvatar
|
||||
@@ -149,7 +149,7 @@
|
||||
:size="44"
|
||||
:member="row.data.relationships.settings"
|
||||
/>
|
||||
<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.settings.data.attributes.name }}
|
||||
</b>
|
||||
@@ -160,27 +160,27 @@
|
||||
</div>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.featureEstimates.storage.usage }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.meta.usages.costEstimate }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:px-1 px-3">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<td class="md:pl-1 pl-3 text-right">
|
||||
<div class="flex space-x-2 w-full justify-end">
|
||||
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<Edit2Icon size="15" class="opacity-75" />
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
{{ subscription.relationships.plan.data.attributes.name }} / {{ price }}
|
||||
</b>
|
||||
|
||||
<div v-for="(limit, i) in limitations" :key="i">
|
||||
<div v-for="(limit, i) in limitations" :key="i" :class="{'mb-6': (Object.keys(limitations).length - 1) !== i}">
|
||||
<b class="mb-3 block text-sm text-gray-400">
|
||||
{{ limit.message }}
|
||||
</b>
|
||||
|
||||
@@ -35,40 +35,21 @@
|
||||
</FormLabel>
|
||||
|
||||
<DatatableWrapper
|
||||
class="overflow-x-auto"
|
||||
@init="isLoading = false"
|
||||
:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
|
||||
:api="'/api/admin/users/' + this.$route.params.id + '/transactions'"
|
||||
:paginator="true"
|
||||
:columns="columns"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
|
||||
<td class="py-4">
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.note }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
|
||||
{{ row.data.attributes.status }}
|
||||
</ColorLabel>
|
||||
<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
|
||||
{{ row.data.attributes.type }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
|
||||
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-bold">
|
||||
{{ row.data.attributes.created_at }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!--Transaction rows-->
|
||||
<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" @showDetail="showTransactionDetail" />
|
||||
<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" />
|
||||
|
||||
<!--Transaction detail-->
|
||||
<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
|
||||
|
||||
</template>
|
||||
|
||||
<!--Empty page-->
|
||||
@@ -83,14 +64,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel";
|
||||
import ColorLabel from "/resources/js/components/Others/ColorLabel"
|
||||
import MeteredTransactionDetailRow from "../../../../components/Subscription/MeteredTransactionDetailRow"
|
||||
import MeteredTransactionRow from "../../../../components/Subscription/MeteredTransactionRow"
|
||||
import FixedTransactionRow from "../../../../components/Subscription/FixedTransactionRow"
|
||||
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
|
||||
import FormLabel from "../../../../components/Others/Forms/FormLabel"
|
||||
import PageTab from '/resources/js/components/Others/Layout/PageTab'
|
||||
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
import UserMeteredSubscription from "./UserMeteredSubscription";
|
||||
import UserMeteredSubscription from "./UserMeteredSubscription"
|
||||
import UserFixedSubscription from "./UserFixedSubscription"
|
||||
import {mapGetters} from "vuex";
|
||||
import {mapGetters} from "vuex"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
@@ -99,10 +82,12 @@
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
MeteredTransactionDetailRow,
|
||||
UserMeteredSubscription,
|
||||
MeteredTransactionRow,
|
||||
UserFixedSubscription,
|
||||
FixedTransactionRow,
|
||||
DatatableWrapper,
|
||||
ColorLabel,
|
||||
FormLabel,
|
||||
InfoBox,
|
||||
PageTab,
|
||||
@@ -111,38 +96,28 @@
|
||||
...mapGetters([
|
||||
'config',
|
||||
]),
|
||||
columns() {
|
||||
let filter = {
|
||||
metered: ['user_id'],
|
||||
fixed: ['type', 'user_id'],
|
||||
}
|
||||
|
||||
return this.$store.getters.transactionColumns.filter(column => !filter[config.subscriptionType].includes(column.field))
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showedTransactionDetailById: undefined,
|
||||
subscription: undefined,
|
||||
isLoading: true,
|
||||
columns: [
|
||||
{
|
||||
label: this.$t('Note'),
|
||||
field: 'note',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Status'),
|
||||
field: 'status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_invoices.table.total'),
|
||||
field: 'amount',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Payed At'),
|
||||
field: 'created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('Service'),
|
||||
field: 'driver',
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTransactionDetail(id) {
|
||||
if (this.showedTransactionDetailById === id)
|
||||
this.showedTransactionDetailById = undefined
|
||||
else
|
||||
this.showedTransactionDetailById = id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
Reference in New Issue
Block a user