mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
73 lines
2.8 KiB
Vue
73 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<!--Datatable-->
|
|
<DatatableWrapper v-if="!config.isEmptyTransactions" class="card overflow-x-auto shadow-card" api="/api/admin/transactions" :paginator="true" :columns="columns">
|
|
<template slot-scope="{ row }">
|
|
<!--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>
|
|
|
|
<!--Empty State-->
|
|
<div v-if="config.isEmptyTransactions" class="flex h-full items-center justify-center">
|
|
<div class="text-center">
|
|
<img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9ee.svg" alt="transaction" />
|
|
<h1 class="mb-1 text-2xl font-bold">
|
|
{{ $t('There is Nothing') }}
|
|
</h1>
|
|
<p class="text-sm text-gray-600">
|
|
{{ $t('All your transactions will be visible here') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 '../../components/Others/Tables/DatatableWrapper'
|
|
import ColorLabel from '../../components/Others/ColorLabel'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Invoices',
|
|
components: {
|
|
MeteredTransactionDetailRow,
|
|
MeteredTransactionRow,
|
|
FixedTransactionRow,
|
|
DatatableWrapper,
|
|
MemberAvatar,
|
|
ColorLabel,
|
|
},
|
|
computed: {
|
|
...mapGetters(['config']),
|
|
columns() {
|
|
if (config.subscriptionType === 'fixed') {
|
|
return this.$store.getters.transactionColumns.filter((column) => !['type'].includes(column.field))
|
|
}
|
|
|
|
return this.$store.getters.transactionColumns
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
showedTransactionDetailById: undefined,
|
|
}
|
|
},
|
|
methods: {
|
|
showTransactionDetail(id) {
|
|
if (this.showedTransactionDetailById === id) this.showedTransactionDetailById = undefined
|
|
else this.showedTransactionDetailById = id
|
|
},
|
|
},
|
|
}
|
|
</script>
|