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>