plan pages refactoring

resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue

@@ -1,37 +1,32 @@
 <template>
-    <PageTab class="form-fixed-width">
-        <PageTabGroup>
-            <FormLabel>
-                {{ $t('admin_page_plans.form.title_delete') }}
-            </FormLabel>
-            <InfoBox>
-                <p>{{ $t('admin_page_plans.disclaimer_delete_plan') }}</p>
-            </InfoBox>
-            <ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form" class="form block-form">
-                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
-                    <label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
-                    <div class="single-line-form">
-                        <input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
-                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
-                            {{ $t('admin_page_plans.delete_plan_button') }}
-                        </ButtonBase>
-                    </div>
-                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                </ValidationProvider>
-            </ValidationObserver>
-        </PageTabGroup>
-    </PageTab>
+	<div class="card shadow-card">
+		<FormLabel>
+			{{ $t('admin_page_plans.form.title_delete') }}
+		</FormLabel>
+		<InfoBox>
+			<p>{{ $t('admin_page_plans.disclaimer_delete_plan') }}</p>
+		</InfoBox>
+		<ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form">
+			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
+				<AppInputText :title="$t('admin_page_user.label_delete_user', {user: plan.attributes.name})" :is-last="true">
+					<div class="flex space-x-4">
+						<input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+						<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
+							{{ $t('admin_page_plans.delete_plan_button') }}
+						</ButtonBase>
+					</div>
+				</AppInputText>
+			</ValidationProvider>
+		</ValidationObserver>
+	</div>
 </template>
 
 <script>
+	import AppInputText from "../../../../components/Admin/AppInputText";
     import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
     import {required, is} from 'vee-validate/dist/rules'
     import {events} from '/resources/js/bus'
     import axios from 'axios'
@@ -44,13 +39,11 @@
         components: {
             ValidationProvider,
             ValidationObserver,
-            PageTabGroup,
+			AppInputText,
             ButtonBase,
             FormLabel,
-            SetupBox,
             required,
             InfoBox,
-            PageTab,
         },
         data() {
             return {
@@ -70,7 +63,7 @@
                 this.isSendingRequest = true
 
                 axios
-                    .post(this.$store.getters.api + '/admin/plans/' + this.$route.params.id,
+                    .post('/api/subscription/plans/' + this.$route.params.id,
                         {
                             data: {
                                 name: this.planName
@@ -79,37 +72,23 @@
                         }
                     )
                     .then(() => {
-                        this.isSendingRequest = false
-
-                        // Show message
-                        events.$emit('success:open', {
-                            emoji: '👍',
-                            title: this.$t('popup_deleted_plan.title'),
-                            message: this.$t('popup_deleted_plan.message'),
-                        })
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('popup_deleted_plan.title'),
+						})
 
                         this.$router.push({name: 'Plans'})
                     })
                     .catch(() => {
-
-                        this.isSendingRequest = false
-
-                        events.$emit('alert:open', {
-                            title: this.$t('popup_error.title'),
-                            message: this.$t('popup_error.message'),
-                        })
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('popup_error.title'),
+						})
                     })
+					.finally(() => {
+                        this.isSendingRequest = false
+					})
             }
         }
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>

resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue

@@ -1,73 +1,42 @@
 <template>
-    <PageTab>
-        <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
-            <PageTabGroup>
-                <FormLabel>
-                    {{ $t('admin_page_plans.form.title_details') }}
-                </FormLabel>
+	<div class="card shadow-card">
+		<FormLabel>
+			{{ $t('admin_page_plans.form.title_details') }}
+		</FormLabel>
 
-                <!--Visible-->
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">{{ $t('admin_page_plans.form.status') }}:</label>
-                                <small class="input-help">{{ $t('admin_page_plans.form.status_help') }}</small>
-                            </div>
-                            <SwitchInput @input="changeStatus" class="switch" :state="plan.attributes.status"/>
-                        </div>
-                    </div>
-                </div>
+		<!--Visible-->
+		<AppInputSwitch :title="$t('admin_page_plans.form.status')" :description="$t('admin_page_plans.form.status_help')">
+			<SwitchInput @input="$updateText('/admin/plans/' + $route.params.id, 'visible', plan.attributes.visible)" v-model="visible" class="switch" :state="plan.attributes.visible"/>
+		</AppInputSwitch>
 
-                <!--Name-->
-                <div class="block-wrapper">
-                    <label>{{ $t('admin_page_plans.form.name') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
-                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
+		<!--Name-->
+		<AppInputText :title="$t('admin_page_plans.form.name')">
+			<input @input="$updateText('/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" class="focus-border-theme input-dark"/>
+		</AppInputText>
 
-                <!--Description-->
-                <div class="block-wrapper">
-                    <label>{{ $t('admin_page_plans.form.description') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
-                        <textarea @input="$updateText('/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
+		<!--Description-->
+		<AppInputText :title="$t('admin_page_plans.form.description')">
+			<textarea @input="$updateText('/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" class="focus-border-theme input-dark"></textarea>
+		</AppInputText>
 
-                <!--Storage Capacity-->
-                <div class="block-wrapper">
-                    <label>{{ $t('admin_page_plans.form.storage') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
-                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'capacity', plan.attributes.capacity)" v-model="plan.attributes.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                    <small class="input-help">
-                        {{ $t('admin_page_plans.form.storage_helper') }}
-                    </small>
-                </div>
+		<!--Storage Capacity-->
+		<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')" is-last="">
+			<input @input="$updateText('/admin/plans/' + $route.params.id, 'capacity', plan.attributes.capacity)" v-model="plan.attributes.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
+		</AppInputText>
 
-                <InfoBox>
-                    <p>{{ $t('admin_page_plans.disclaimer_edit_price') }}</p>
-                </InfoBox>
-            </PageTabGroup>
-        </ValidationObserver>
-    </PageTab>
+		<InfoBox style="margin-bottom: 0">
+			<p>{{ $t('admin_page_plans.disclaimer_edit_price') }}</p>
+		</InfoBox>
+	</div>
 </template>
 
 <script>
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
+	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch"
     import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
+	import AppInputText from "../../../../components/Admin/AppInputText"
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import {required} from 'vee-validate/dist/rules'
 
     export default {
         name: 'PlanSettings',
@@ -75,38 +44,20 @@
             'plan'
         ],
         components: {
-            ValidationProvider,
-            ValidationObserver,
-            PageTabGroup,
+			AppInputSwitch,
+			AppInputText,
             SwitchInput,
             SelectInput,
-            ButtonBase,
             FormLabel,
-            SetupBox,
-            required,
             InfoBox,
-            PageTab,
         },
         data() {
-            return {
-                isLoading: false,
-                isSendingRequest: false,
-            }
-        },
-        methods: {
-            changeStatus(val) {
-                this.$updateText('/admin/plans/' + this.$route.params.id, 'is_active', val)
-            }
-        }
-    }
+			return {
+				visible: undefined
+			}
+		},
+		created() {
+			this.visible = this.plan.attributes.visible
+		}
+	}
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>

resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue

@@ -1,50 +1,67 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup>
-            <DatatableWrapper @init="isLoading = false" :api="`/api/admin/plans/${this.$route.params.id}/subscribers`" :paginator="false" :columns="columns" :data="subscribers" class="table">
+		<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscription/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
 
-                <!--Table data content-->
-                <template slot-scope="{ row }">
-                    <tr>
-                        <td>
-                            <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-                                <DatatableCellImage
-                                        image-size="small"
-                                        :image="row.data.relationships.settings.data.attributes.avatar.sm"
-                                        :title="row.data.relationships.settings.data.attributes.name"
-                                />
-                            </router-link>
-                        </td>
-                        <td>
-                            <span class="cell-item">
-                                {{ row.data.attributes.storage.used }}%
-                            </span>
-                        </td>
-                        <td>
-                            <div class="action-icons">
-                                <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-                                    <edit-2-icon size="15" class="icon icon-edit" />
-                                </router-link>
-                                <router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
-                                    <trash2-icon size="15" class="icon icon-trash" />
-                                </router-link>
-                            </div>
-                        </td>
-                    </tr>
-                </template>
+			<!--Table data content-->
+			<template slot-scope="{ row }">
+				<tr class="border-b dark:border-opacity-5 border-light border-dashed">
+					<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>
+						<ColorLabel :color="getSubscriptionStatusColor(row.data.attributes.status)">
+							{{ row.data.attributes.status }}
+						</ColorLabel>
+					</td>
+					<td class="py-5">
+						<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
+							{{ row.data.attributes.name }}
+						</span>
+					</td>
+					<td>
+						<span class="text-sm font-bold">
+							<!--todo: update renew attribute-->
+							{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
+						</span>
+					</td>
+					<td>
+						<span class="text-sm font-bold">
+							{{ row.data.attributes.ends_at ? row.data.attributes.ends_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>
 
-                <!--Empty page-->
-                <template v-slot:empty-page>
-                    <InfoBox>
-                        <p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
-                    </InfoBox>
-                </template>
-            </DatatableWrapper>
-        </PageTabGroup>
+			<!--Empty page-->
+			<template v-slot:empty-page>
+				<InfoBox style="margin-bottom: 0">
+					<p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
+				</InfoBox>
+			</template>
+		</DatatableWrapper>
     </PageTab>
 </template>
 
 <script>
+	import ColorLabel from "../../../../components/Others/ColorLabel";
+	import MemberAvatar from "../../../../components/FilesView/MemberAvatar";
     import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
     import {DownloadCloudIcon, Edit2Icon, Trash2Icon} from "vue-feather-icons"
     import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
@@ -60,6 +77,8 @@
             DownloadCloudIcon,
             DatatableWrapper,
             PageTabGroup,
+			MemberAvatar,
+			ColorLabel,
             Trash2Icon,
             Edit2Icon,
             PageTab,
@@ -76,12 +95,25 @@
                         sortable: true
                     },
                     {
-                        label: this.$t('admin_page_user.table.storage_used'),
+                        label: this.$t('Status'),
                         field: 'used',
                         sortable: false
                     },
                     {
-                        label: this.$t('admin_page_user.table.action'),
+                        label: this.$t('Plan'),
+                        field: 'name',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('Renews At'),
+                        sortable: false
+                    },
+                    {
+                        label: this.$t('Ends At'),
+                        sortable: false
+                    },
+                    {
+                        label: this.$t('Service'),
                         sortable: false
                     },
                 ],
@@ -89,13 +121,3 @@
         },
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>