empty states for pages

resources/js/components/Others/Emoji.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="[location, 'emoji-container', {'is-apple': $isApple}]">
-        <span v-if="!$isApple()" class="twemoji-emoji emoji-icon" v-html="transferEmoji"></span>
-        <span v-if="$isApple()" class="apple-emoji emoji-icon">{{ this.emoji.char }}</span>
+        <span v-if="!$isApple() || true" class="twemoji-emoji emoji-icon" v-html="transferEmoji"></span>
+<!--        <span v-if="$isApple()" class="apple-emoji emoji-icon">{{ this.emoji.char }}</span>-->
     </div>
 </template>
 

resources/js/views/Admin/Invoices.vue

@@ -1,139 +1,102 @@
 <template>
     <div>
-		<PageTab :is-loading="isLoading">
-			<div class="card shadow-card">
-				<DatatableWrapper
-					@init="isLoading = false"
-					api="/api/subscriptions/admin/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.note }}
+		<!--Datatable-->
+		<DatatableWrapper
+			v-if="! config.isEmptyTransactions" class="card shadow-card"
+			@init="isLoading = false"
+			api="/api/subscriptions/admin/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.note }}
+						</span>
+					</td>
+					<td>
+						<div v-if="row.data.relationships.user" 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>
-							</td>
-							<td>
-								<div v-if="row.data.relationships.user" 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>
-								<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
-									{{ $t('User was deleted') }}
-								</span>
-							</td>
-							<td>
-								<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
-									{{ row.data.attributes.status }}
-								</ColorLabel>
-								<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
-									{{ row.data.attributes.type }}
-								</ColorLabel>
-							</td>
-							<td>
-								<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
-									{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
-								</span>
-							</td>
-							<td>
-								<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>
-						</tr>
-					</template>
-				</DatatableWrapper>
+							</div>
+						</div>
+						<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
+							{{ $t('User was deleted') }}
+						</span>
+					</td>
+					<td>
+						<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
+							{{ row.data.attributes.status }}
+						</ColorLabel>
+						<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
+							{{ row.data.attributes.type }}
+						</ColorLabel>
+					</td>
+					<td>
+						<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
+							{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
+						</span>
+					</td>
+					<td>
+						<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>
+				</tr>
+			</template>
+		</DatatableWrapper>
+
+		<!--Empty State-->
+        <div class="flex items-center justify-center h-full">
+			<div class="text-center">
+				<img class="w-28 inline-block mb-6" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9ee.svg" alt="transaction">
+				<h1 class="text-2xl font-bold mb-1">
+					{{ $t("There is Nothing") }}
+				</h1>
+				<p class="text-sm text-gray-600">
+					{{ $t('All your transactions will be visible here') }}
+				</p>
 			</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>
     </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'
+	import MemberAvatar from "../../components/FilesView/MemberAvatar"
+	import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
+	import ColorLabel from '/resources/js/components/Others/ColorLabel'
+	import {mapGetters} from 'vuex'
 
-    export default {
-        name: 'Invoices',
-        components: {
+	export default {
+		name: 'Invoices',
+		components: {
+			DatatableWrapper,
 			MemberAvatar,
-            DatatableCellImage,
-            MobileActionButton,
-            ExternalLinkIcon,
-            EmptyPageContent,
-            DatatableWrapper,
-            SectionTitle,
-            MobileHeader,
-            SwitchInput,
-            PageHeader,
-            ButtonBase,
-            ColorLabel,
-			PageTab,
-            Spinner,
-        },
-        computed: {
-            ...mapGetters([
+			ColorLabel,
+		},
+		computed: {
+			...mapGetters([
 				'config',
 			]),
-        },
-        data() {
-            return {
-                isLoading: true,
-                invoices: [],
+		},
+		data() {
+			return {
+				isLoading: true,
+				invoices: [],
 				columns: [
 					{
 						label: this.$t('Note'),
@@ -166,17 +129,7 @@
 						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>

resources/js/views/Admin/Plans.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-		<div class="card shadow-card">
+		<!--Plans-->
+		<div v-if="! config.isEmptyPlans" class="card shadow-card">
 
 			<!--Create button-->
 			<div v-if="! config.isCreatedMeteredPlan || config.subscriptionType === 'fixed'" class="mb-6">
@@ -106,44 +107,34 @@
             </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: 'CreateFixedPlan'}" tag="p">
-                <ButtonBase button-style="theme">{{ $t('admin_page_plans.empty.button') }}</ButtonBase>
-            </router-link>
-        </EmptyPageContent>-->
+		<!--Empty State-->
+        <div class="flex items-center justify-center h-full">
+			<div class="text-center">
+				<img class="w-28 inline-block mb-6" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9fe.svg" alt="transaction">
 
-        <!--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>-->
+				<h1 class="text-2xl font-bold mb-1">
+					{{ $t("There is Nothing") }}
+				</h1>
 
-        <!--Spinner-->
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
+				<p class="text-sm text-gray-600">
+					{{ $t('All your plans will be visible here') }}
+				</p>
+
+				<router-link :to="{name: createPlanRoute}" class="inline-block mt-6">
+					<ButtonBase class="action-confirm" button-style="theme">
+						{{ $t('Create First Plan') }}
+					</ButtonBase>
+				</router-link>
+			</div>
+		</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 Spinner from '/resources/js/components/FilesView/Spinner'
 	import ColorLabel from "../../components/Others/ColorLabel";
     import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
     import { mapGetters } from 'vuex'
@@ -151,23 +142,18 @@
     export default {
         name: 'Plans',
         components: {
-            MobileActionButton,
-            EmptyPageContent,
+			MobileActionButton,
             DatatableWrapper,
             SwitchInput,
 			ColorLabel,
             Trash2Icon,
             ButtonBase,
             Edit2Icon,
-            Spinner,
         },
         computed: {
             ...mapGetters([
-				'config'
+				'config',
 			]),
-            isEmptyPlans() {
-                return ! this.isLoading && this.plans.length === 0 && this.config.stripe_public_key
-            },
 			createPlanRoute() {
 				return {
 					metered: 'CreateMeteredPlan',
@@ -243,15 +229,5 @@
 				}[this.config.subscriptionType]
 			}
         },
-        data() {
-            return {
-                isLoading: true,
-                plans: [],
-            }
-        },
-        created() {
-            if (! this.config.stripe_public_key)
-                this.isLoading = false
-        }
     }
 </script>

resources/js/views/Admin/Subscriptions.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
 		<!--Datatable-->
-		<DatatableWrapper @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card">
+		<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card">
 
 			<!--Table data content-->
 			<template slot-scope="{ row }">
@@ -52,84 +52,46 @@
 					</td>
 				</tr>
 			</template>
-
-			<!--Empty page-->
-			<template v-slot:empty-page>
-				<InfoBox style="margin-bottom: 0">
-					<p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
-				</InfoBox>
-			</template>
 		</DatatableWrapper>
 
-        <!--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: 'CreateFixedPlan'}" tag="p">
-                <ButtonBase button-style="theme">{{ $t('admin_page_plans.empty.button') }}</ButtonBase>
-            </router-link>
-        </EmptyPageContent>-->
+		<!--Empty State-->
+        <div class="flex items-center justify-center h-full">
+			<div class="text-center">
+				<img class="w-28 inline-block mb-6" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f5c3.svg" alt="transaction">
 
-        <!--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>-->
+				<h1 class="text-2xl font-bold mb-1">
+					{{ $t("There is Nothing") }}
+				</h1>
 
-        <!--Spinner-->
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
+				<p class="text-sm text-gray-600">
+					{{ $t('All your subscriptions will be visible here') }}
+				</p>
+			</div>
+		</div>
     </div>
 </template>
 
 <script>
-	import InfoBox from "../../components/Others/Forms/InfoBox";
 	import ColorLabel from "../../components/Others/ColorLabel";
 	import MemberAvatar from "../../components/FilesView/MemberAvatar";
     import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
-    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 Spinner from '/resources/js/components/FilesView/Spinner'
     import { mapGetters } from 'vuex'
 
     export default {
         name: 'Subscriptions',
         components: {
-			InfoBox,
 			ColorLabel,
 			MemberAvatar,
-            EmptyPageContent,
             DatatableWrapper,
-            SwitchInput,
-            ButtonBase,
-            Spinner,
         },
         computed: {
             ...mapGetters([
-				'config'
+				'config',
 			]),
-            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('admin_page_user.table.name'),
@@ -163,10 +125,6 @@
 					},
 				],
             }
-        },
-        created() {
-            if (! this.config.stripe_public_key)
-                this.isLoading = false
         }
     }
 </script>

resources/views/index.blade.php

@@ -1,7 +1,13 @@
 @php
     use VueFileManager\Subscription\Domain\Plans\Models\Plan;
+    use VueFileManager\Subscription\Domain\Transactions\Models\Transaction;
+    use VueFileManager\Subscription\Domain\Subscriptions\Models\Subscription;
 
     $plan = Plan::where('status', 'active')->where('type', 'metered');
+
+    $isEmptyPlans = Plan::count() === 0;
+    $isEmptyTransactions = Transaction::count() === 0;
+    $isEmptySubscriptions = Subscription::count() === 0;
 @endphp
 
 <!DOCTYPE html>
@@ -81,6 +87,11 @@
             installation: '{{ $installation ?? 'initial' }}',
             statusCheck: {!! json_encode($status_check) ?? 'undefined' !!},
 
+            // States
+			isEmptyPlans: {{ $isEmptyPlans }},
+			isEmptyTransactions: {{ $isEmptyTransactions }},
+			isEmptySubscriptions: {{ $isEmptySubscriptions }},
+
             // Hidden set ups
             isAdminVueFileManagerBar: {{ env('IS_ADMIN_VUEFILEMANAGER_BAR', 1) ? 1 : 0 }},