nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-20 08:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

show transaction usage history detail

Browse Source
This commit is contained in:
Čarodej
2022-01-17 13:30:44 +01:00
parent 97b429f8d1
commit 2403f89ca3
11 changed files with 444 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
View File

@@ -5,39 +5,82 @@
</FormLabel>
<DatatableWrapper
api="/api/subscriptions/transactions"
class="overflow-x-auto"
api="/api/user/transactions"
:paginator="true"
:columns="columns"
>
<!--TODO: refactor all tables as this template-->
<template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed">
<td class="py-4">
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
<td class="py-5 md:pr-1 pr-3">
<span class="text-sm font-bold">
{{ row.data.attributes.note }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }}
</ColorLabel>
</td>
<td class="py-4">
<td class="md:px-1 px-3">
<span class="text-sm font-bold capitalize">
{{ $t(row.data.attributes.type) }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span>
</td>
<td>
<td class="md:px-1 px-3">
<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 class="md:px-1 px-3">
<div class="w-28">
<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
</div>
</td>
<td class="md:pl-1 pl-3 text-right">
<div v-if="row.data.attributes.metadata" class="flex space-x-2 w-full justify-end">
<div @click="showTransactionDetail(row.data.id)" class="cursor-pointer 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">
<EyeIcon size="15" class="opacity-75" />
</div>
<div class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-purple-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
<FileTextIcon size="15" class="opacity-75" />
</div>
</div>
<div v-else>
-
</div>
</td>
</tr>
<!--Transaction detail-->
<tr v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id">
<td colspan="7" class="dark:bg-2x-dark-foreground bg-light-background bg-opacity-50 rounded-lg overflow-hidden py-2 px-4">
<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in row.data.attributes.metadata" :key="i">
<div class="w-2/4 leading-none">
<b class="text-sm font-bold leading-none">
{{ $t(usage.feature) }}
</b>
<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
{{ $t(`feature_usage_desc_${usage.feature}`) }}
</small>
</div>
<div class="text-left w-1/4">
<span class="text-sm font-bold text-gray-560">
{{ usage.usage }}
</span>
</div>
<div class="text-right w-1/4">
<span class="text-sm font-bold text-theme">
{{ usage.cost }}
</span>
</div>
</div>
</td>
</tr>
</template>
@@ -52,54 +95,76 @@
</div>
</template>
<script>
import ColorLabel from "../Others/ColorLabel"
import DatatableWrapper from "../Others/Tables/DatatableWrapper"
import FormLabel from "../Others/Forms/FormLabel"
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {EyeIcon, FileTextIcon} from 'vue-feather-icons'
import ColorLabel from "../Others/ColorLabel"
import DatatableWrapper from "../Others/Tables/DatatableWrapper"
import FormLabel from "../Others/Forms/FormLabel"
import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {mapGetters} from "vuex";
export default {
name: 'UserTransactionsForMeteredBilling',
components: {
ColorLabel,
DatatableWrapper,
FormLabel,
InfoBox
},
data() {
return {
columns: [
{
label: this.$t('Note'),
field: 'note',
sortable: true
},
{
label: this.$t('Status'),
field: 'status',
sortable: true
},
{
label: this.$t('Type'),
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
},
],
export default {
name: 'UserTransactionsForMeteredBilling',
components: {
DatatableWrapper,
ColorLabel,
FormLabel,
InfoBox,
FileTextIcon,
EyeIcon,
},
computed: {
...mapGetters([
'user',
])
},
data() {
return {
showedTransactionDetailById: undefined,
columns: [
{
label: this.$t('Note'),
field: 'note',
sortable: true
},
{
label: this.$t('Status'),
field: 'status',
sortable: true
},
{
label: this.$t('Type'),
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
},
{
label: this.$t('Actions'),
sortable: false
},
],
}
},
methods: {
showTransactionDetail(id) {
if (this.showedTransactionDetailById === id)
this.showedTransactionDetailById = undefined
else
this.showedTransactionDetailById = id
}
}
}
}
</script>