vuefilemanager/resources/js/views/Admin/Invoices.vue

<template>
    <div>
		<PageTab :is-loading="isLoading">
			<div class="card shadow-card">
				<DatatableWrapper
					@init="isLoading = false"
					api="/api/subscription/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.plan_name }}
								</span>
							</td>
							<td>
								<ColorLabel color="purple">
									{{ row.data.attributes.status }}
								</ColorLabel>
							</td>
							<td>
								<span class="text-sm font-bold">
									{{ row.data.attributes.price }}
								</span>
							</td>
							<td>
								<span class="text-sm font-bold">
									{{ row.data.attributes.created_at }}
								</span>
							</td>
							<td>
								<div 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>
							</td>
							<td class="text-right">
								<span class="text-sm font-bold w-full">
									{{ row.data.attributes.driver }}
								</span>
							</td>
						</tr>
					</template>
				</DatatableWrapper>
			</div>
		</PageTab>
        <!--Empty invoices-->
		<!--<EmptyPageContent
                v-if="! isLoading && invoices.length === 0 && config.stripe_public_key"
                icon="file-text"
                :title="$t('admin_page_invoices.empty.title')"
                :description="$t('admin_page_invoices.empty.description')"
        >
        </EmptyPageContent>-->

        <!--Stripe Not Configured-->
		<!--<EmptyPageContent
                v-if="! config.stripe_public_key"
                icon="settings"
                :title="$t('activation.stripe.title')"
                :description="$t('activation.stripe.description')"
        >
            <router-link :to="{name: 'AppPayments'}">
                <ButtonBase button-style="theme">{{ $t('activation.stripe.button') }}</ButtonBase>
            </router-link>
        </EmptyPageContent>-->

        <!--Spinner-->
        <div id="loader" v-if="isLoading">
            <Spinner></Spinner>
        </div>
    </div>
</template>

<script>
	import MemberAvatar from "../../components/FilesView/MemberAvatar";
	import PageTab from "../../components/Others/Layout/PageTab";
    import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
    import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
    import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
    import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
    import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
    import SectionTitle from '/resources/js/components/Others/SectionTitle'
    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
    import PageHeader from '/resources/js/components/Others/PageHeader'
    import ColorLabel from '/resources/js/components/Others/ColorLabel'
    import Spinner from '/resources/js/components/FilesView/Spinner'
    import {ExternalLinkIcon} from "vue-feather-icons";
    import { mapGetters } from 'vuex'
    import axios from 'axios'

    export default {
        name: 'Invoices',
        components: {
			MemberAvatar,
            DatatableCellImage,
            MobileActionButton,
            ExternalLinkIcon,
            EmptyPageContent,
            DatatableWrapper,
            SectionTitle,
            MobileHeader,
            SwitchInput,
            PageHeader,
            ButtonBase,
            ColorLabel,
			PageTab,
            Spinner,
        },
        computed: {
            ...mapGetters([
				'config'
			]),
        },
        data() {
            return {
                isLoading: true,
                invoices: [],
				columns: [
					{
						label: this.$t('Plan'),
						field: 'plan_name',
						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('User'),
						field: 'user',
						sortable: true
					},
					{
						label: this.$t('Service'),
						sortable: true
					},
				],
            }
        },
        created() {
            if (! this.config.stripe_public_key)
                this.isLoading = false
        }
    }
</script>

<style lang="scss" scoped>
    @import '/resources/sass/vuefilemanager/_variables';
    @import '/resources/sass/vuefilemanager/_mixins';

</style>