vuefilemanager/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue

<template>
    <PageTab :is-loading="isLoading">

		<UserMeteredSubscription
			v-if="subscription && config.subscriptionType === 'metered'"
			:subscription="subscription"
			:user="user"
		/>

		<UserFixedSubscription
			v-if="subscription && config.subscriptionType === 'fixed'"
			:subscription="subscription"
			:user="user"
		/>

		<!--Free Plan-->
		<div v-if="!subscription && config.subscriptionType === 'fixed'" class="card shadow-card">
			<FormLabel>
				{{ $t('Subscription') }}
			</FormLabel>

			<b class="sm:text-3xl text-2xl font-extrabold -mt-3 block mb-0.5">
				{{ $t('Free Plan') }}
			</b>

			<b class="block text-sm text-gray-400">
				{{ $t('1GB Free storage space with 5 Team members') }}
			</b>
		</div>

		<!--Transactions-->
		<div class="card shadow-card">
			<FormLabel icon="file-text">
                {{ $t('Transactions') }}
            </FormLabel>

			<DatatableWrapper
				class="overflow-x-auto"
				@init="isLoading = false"
				:api="'/api/admin/users/' + this.$route.params.id + '/transactions'"
				:paginator="true"
				:columns="columns"
			>
                <template slot-scope="{ row }">

					<!--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-->
                <template v-slot:empty-page>
                    <InfoBox style="margin-bottom: 0">
                        <p>{{ $t("User doesn't have any transactions yet.") }}</p>
                    </InfoBox>
                </template>
            </DatatableWrapper>
		</div>
    </PageTab>
</template>

<script>
	import MeteredTransactionDetailRow from "../../../../components/Subscription/MeteredTransactionDetailRow"
	import MeteredTransactionRow from "../../../../components/Subscription/MeteredTransactionRow"
	import FixedTransactionRow from "../../../../components/Subscription/FixedTransactionRow"
	import DatatableWrapper from "../../../../components/Others/Tables/DatatableWrapper";
	import FormLabel from "../../../../components/Others/Forms/FormLabel"
	import PageTab from "../../../../components/Others/Layout/PageTab";
	import InfoBox from "../../../../components/Others/Forms/InfoBox";
	import UserMeteredSubscription from "./UserMeteredSubscription"
	import UserFixedSubscription from "./UserFixedSubscription"
	import {mapGetters} from "vuex"
	import axios from 'axios'

	export default {
		name: 'UserSubscription',
		props: [
			'user'
		],
		components: {
			MeteredTransactionDetailRow,
			UserMeteredSubscription,
			MeteredTransactionRow,
			UserFixedSubscription,
			FixedTransactionRow,
			DatatableWrapper,
			FormLabel,
			InfoBox,
			PageTab,
		},
		computed: {
			...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,
			}
		},
		methods: {
			showTransactionDetail(id) {
				if (this.showedTransactionDetailById === id)
					this.showedTransactionDetailById = undefined
				else
					this.showedTransactionDetailById = id
			}
		},
		created() {
			axios.get(`/api/subscriptions/admin/users/${this.$route.params.id}/subscription`)
				.then(response => {
					this.subscription = response.data.data

					this.isLoading = false
				})
				.catch(error => {
					if (error.response.status === 404)
						this.isLoading = false
				})
		}
	}
</script>