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

<template>
    <div>
		<div class="card shadow-card">
			<div class="mb-6">
				<router-link :to="{name: 'PlanCreate'}">
					<MobileActionButton icon="plus">
						{{ $t('admin_page_plans.create_plan_button') }}
					</MobileActionButton>
				</router-link>
			</div>

			<!--Datatable-->
            <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/plans" :paginator="true" :columns="columns">
                <template slot-scope="{ row }">
                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
						<td class="py-4">
							<SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.visible"/>
						</td>
                        <td>
							<router-link class="text-sm font-bold" :to="{name: 'PlanSettings', params: {id: row.data.id}}">
                            	{{ row.data.attributes.name }}
							</router-link>
                        </td>
                        <td>
                            <span class="text-sm font-bold">
                            	{{ row.data.attributes.price }}
                            </span>
                        </td>
                        <td>
                            <span class="text-sm font-bold capitalize">
                            	{{ row.data.attributes.interval }}
                            </span>
                        </td>
                        <td>
                            <span class="text-sm font-bold">
                            	{{ row.data.attributes.subscribers }}
                            </span>
                        </td>
                        <td>
                            <span class="text-sm font-bold">
                            	{{ row.data.attributes.features.max_storage_amount }} GB
                            </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 hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanSettings', params: {id: row.data.id}}">
                                    <Edit2Icon size="15" class="opacity-75" />
                                </router-link>
                                <router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanDelete', params: {id: row.data.id}}">
                                    <Trash2Icon size="15" class="opacity-75" />
                                </router-link>
                            </div>
                        </td>
                    </tr>
                </template>
            </DatatableWrapper>
		</div>

        <!--Stripe configured but has empty plans-->
		<!--<EmptyPageContent
                v-if="isEmptyPlans"
                icon="file"
                :title="$t('admin_page_plans.empty.title')"
                :description="$t('admin_page_plans.empty.description')"
        >
            <router-link :to="{name: 'PlanCreate'}" tag="p">
                <ButtonBase button-style="theme">{{ $t('admin_page_plans.empty.button') }}</ButtonBase>
            </router-link>
        </EmptyPageContent>-->

        <!--Stripe is Not Configured-->
		<!--<EmptyPageContent
                v-if="stripeIsNotConfigured"
                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 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 ButtonBase from '/resources/js/components/FilesView/ButtonBase'
    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
    import Spinner from '/resources/js/components/FilesView/Spinner'
    import { mapGetters } from 'vuex'

    export default {
        name: 'Plans',
        components: {
            MobileActionButton,
            EmptyPageContent,
            DatatableWrapper,
            SwitchInput,
            Trash2Icon,
            ButtonBase,
            Edit2Icon,
            Spinner,
        },
        computed: {
            ...mapGetters(['config']),
            isEmptyPlans() {
                return ! this.isLoading && this.plans.length === 0 && this.config.stripe_public_key
            },
            stripeIsNotConfigured() {
                return ! this.config.stripe_public_key
            },
            stripeConfiguredWithPlans() {
                return ! this.isLoading && this.config.stripe_public_key
            }
        },
        data() {
            return {
                isLoading: true,
                plans: [],
                columns: [
                    {
                        label: this.$t('Visibility'),
                        field: 'data.attributes.status',
                        sortable: false
                    },
                    {
                        label: this.$t('Name'),
                        field: 'data.attributes.name',
                        sortable: false
                    },
                    {
                        label: this.$t('Price'),
                        field: 'data.attributes.subscribers',
                        sortable: false
                    },
                    {
                        label: this.$t('Interval'),
                        field: 'data.attributes.price',
                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_plans.table.subscribers'),
                        field: 'data.attributes.capacity',
                        sortable: false
                    },
                    {
                        label: this.$t('Storage'),
                        field: 'data.attributes.capacity',
                        sortable: false
                    },
                    {
                        label: this.$t('admin_page_user.table.action'),
                        sortable: false
                    },
                ],
            }
        },
        methods: {
            changeStatus(val, id) {
                this.$updateText('/subscription/plans/' + id, 'visible', val)
            }
        },
        created() {
            if (! this.config.stripe_public_key)
                this.isLoading = false
        }
    }
</script>