mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-06 02:33:48 +00:00
create plan page refactoring
This commit is contained in:
Čarodej
@@ -55,9 +55,9 @@
|
||||
"/chunks/page-edit.js": "/chunks/page-edit.js?id=d116a63e3c59bc0a5133",
|
||||
"/chunks/pages.js": "/chunks/pages.js?id=57cb88433843d50803cc",
|
||||
"/chunks/plan.js": "/chunks/plan.js?id=483129eff79a17ac0385",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js?id=c1ad8299871917f21f8e",
|
||||
"/chunks/plan-create.js": "/chunks/plan-create.js?id=356baaa5a3526092427f",
|
||||
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=0bb61dfb1adac4b941ec",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=d05adc407c271c7ece76",
|
||||
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=a76effa1bd41a19581c9",
|
||||
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=cee121363af5d208dcf7",
|
||||
"/chunks/plans.js": "/chunks/plans.js?id=a03911a6f6001380f11b",
|
||||
"/chunks/platform.js": "/chunks/platform.js?id=dc3c6677ab43d4475b66",
|
||||
@@ -427,5 +427,64 @@
|
||||
"/chunks/subscriptions.25ea8acd465eae4c377e.hot-update.js": "/chunks/subscriptions.25ea8acd465eae4c377e.hot-update.js",
|
||||
"/chunks/subscriptions.8ce5c6a4da6e1894d8ee.hot-update.js": "/chunks/subscriptions.8ce5c6a4da6e1894d8ee.hot-update.js",
|
||||
"/js/main.8d3eade3e32203b853d9.hot-update.js": "/js/main.8d3eade3e32203b853d9.hot-update.js",
|
||||
"/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js": "/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js"
|
||||
"/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js": "/chunks/subscriptions.8d3eade3e32203b853d9.hot-update.js",
|
||||
"/chunks/plan-create.c8a1b6cc4bbc8012a287.hot-update.js": "/chunks/plan-create.c8a1b6cc4bbc8012a287.hot-update.js",
|
||||
"/chunks/plan-create.e93e4ce22566d560bf4a.hot-update.js": "/chunks/plan-create.e93e4ce22566d560bf4a.hot-update.js",
|
||||
"/chunks/plan-create.9cbbcff6554726fca9f4.hot-update.js": "/chunks/plan-create.9cbbcff6554726fca9f4.hot-update.js",
|
||||
"/chunks/plan-create.6de9c8b3607901be20e7.hot-update.js": "/chunks/plan-create.6de9c8b3607901be20e7.hot-update.js",
|
||||
"/chunks/plan-create.42ca2e7ff725262d256b.hot-update.js": "/chunks/plan-create.42ca2e7ff725262d256b.hot-update.js",
|
||||
"/chunks/plan-create.e65915f676d55dd55942.hot-update.js": "/chunks/plan-create.e65915f676d55dd55942.hot-update.js",
|
||||
"/chunks/plan-create.b264ee984ce759295056.hot-update.js": "/chunks/plan-create.b264ee984ce759295056.hot-update.js",
|
||||
"/chunks/plan-create.ebb143110a73b215d106.hot-update.js": "/chunks/plan-create.ebb143110a73b215d106.hot-update.js",
|
||||
"/chunks/plan-create.43c5c333f453f16ab943.hot-update.js": "/chunks/plan-create.43c5c333f453f16ab943.hot-update.js",
|
||||
"/chunks/plan-create.332eda01d463b92a7e21.hot-update.js": "/chunks/plan-create.332eda01d463b92a7e21.hot-update.js",
|
||||
"/chunks/plan-create.78f142c79c4425fd6ead.hot-update.js": "/chunks/plan-create.78f142c79c4425fd6ead.hot-update.js",
|
||||
"/chunks/plan-create.5152585867444d6763ae.hot-update.js": "/chunks/plan-create.5152585867444d6763ae.hot-update.js",
|
||||
"/chunks/plan-create.9ec8dc96a51cd86ed6cb.hot-update.js": "/chunks/plan-create.9ec8dc96a51cd86ed6cb.hot-update.js",
|
||||
"/chunks/plan-create.1595f4e2bfdd03e8f2b9.hot-update.js": "/chunks/plan-create.1595f4e2bfdd03e8f2b9.hot-update.js",
|
||||
"/chunks/plan-create.46cf4b10fa48605a8d4b.hot-update.js": "/chunks/plan-create.46cf4b10fa48605a8d4b.hot-update.js",
|
||||
"/chunks/plan-create.b7dd4fd87decc82d8810.hot-update.js": "/chunks/plan-create.b7dd4fd87decc82d8810.hot-update.js",
|
||||
"/chunks/plan-create.acd7df2a7fb570d72409.hot-update.js": "/chunks/plan-create.acd7df2a7fb570d72409.hot-update.js",
|
||||
"/chunks/plan-create.7c76268dc96c929e8c9b.hot-update.js": "/chunks/plan-create.7c76268dc96c929e8c9b.hot-update.js",
|
||||
"/chunks/plan-create.7f0bfa511465f11f3c34.hot-update.js": "/chunks/plan-create.7f0bfa511465f11f3c34.hot-update.js",
|
||||
"/chunks/plan-create.fc29f9dd795f4f2c3454.hot-update.js": "/chunks/plan-create.fc29f9dd795f4f2c3454.hot-update.js",
|
||||
"/chunks/plan-create.be3862f379a5f291e8c6.hot-update.js": "/chunks/plan-create.be3862f379a5f291e8c6.hot-update.js",
|
||||
"/chunks/plan-create.15319506d3a164f99431.hot-update.js": "/chunks/plan-create.15319506d3a164f99431.hot-update.js",
|
||||
"/chunks/plan-create.55a984e0f8b5e8406b17.hot-update.js": "/chunks/plan-create.55a984e0f8b5e8406b17.hot-update.js",
|
||||
"/chunks/plan-create.33b9f58415e7404cb14e.hot-update.js": "/chunks/plan-create.33b9f58415e7404cb14e.hot-update.js",
|
||||
"/chunks/plan-create.a8436772c7c8ac9beecf.hot-update.js": "/chunks/plan-create.a8436772c7c8ac9beecf.hot-update.js",
|
||||
"/chunks/plan-create.d88765a4950d9898f6d9.hot-update.js": "/chunks/plan-create.d88765a4950d9898f6d9.hot-update.js",
|
||||
"/chunks/plan-create.40dbebe5dc91eae5f7af.hot-update.js": "/chunks/plan-create.40dbebe5dc91eae5f7af.hot-update.js",
|
||||
"/chunks/plan-create.3dd88ec3459677ea073e.hot-update.js": "/chunks/plan-create.3dd88ec3459677ea073e.hot-update.js",
|
||||
"/chunks/plan-create.362d54160e5daba25a0f.hot-update.js": "/chunks/plan-create.362d54160e5daba25a0f.hot-update.js",
|
||||
"/chunks/plan-create.897ac9ace89e32b28056.hot-update.js": "/chunks/plan-create.897ac9ace89e32b28056.hot-update.js",
|
||||
"/chunks/plan-create.ae20f9f134d0ab9e71b2.hot-update.js": "/chunks/plan-create.ae20f9f134d0ab9e71b2.hot-update.js",
|
||||
"/chunks/plan-create.53221c657462a224f085.hot-update.js": "/chunks/plan-create.53221c657462a224f085.hot-update.js",
|
||||
"/chunks/plan-create.66a187d979dd712001e8.hot-update.js": "/chunks/plan-create.66a187d979dd712001e8.hot-update.js",
|
||||
"/chunks/plan-create.fee89e531a840d2fc7ce.hot-update.js": "/chunks/plan-create.fee89e531a840d2fc7ce.hot-update.js",
|
||||
"/js/main.41b1f1edb0b6a60b2b4b.hot-update.js": "/js/main.41b1f1edb0b6a60b2b4b.hot-update.js",
|
||||
"/chunks/plan-create.6ecb5b31b8320042225d.hot-update.js": "/chunks/plan-create.6ecb5b31b8320042225d.hot-update.js",
|
||||
"/chunks/plan-create.10175274588db9492215.hot-update.js": "/chunks/plan-create.10175274588db9492215.hot-update.js",
|
||||
"/chunks/plan-create.0ba1efc4954d64d82927.hot-update.js": "/chunks/plan-create.0ba1efc4954d64d82927.hot-update.js",
|
||||
"/chunks/plan-create.ee7c846ba10512495042.hot-update.js": "/chunks/plan-create.ee7c846ba10512495042.hot-update.js",
|
||||
"/chunks/plan-create.464dec7d2b1a20e48088.hot-update.js": "/chunks/plan-create.464dec7d2b1a20e48088.hot-update.js",
|
||||
"/chunks/plan-create.f6aea5862e8f553966a6.hot-update.js": "/chunks/plan-create.f6aea5862e8f553966a6.hot-update.js",
|
||||
"/chunks/plan-create.85971684acc1d8711c33.hot-update.js": "/chunks/plan-create.85971684acc1d8711c33.hot-update.js",
|
||||
"/chunks/plan-create.76a73fed548eed336d05.hot-update.js": "/chunks/plan-create.76a73fed548eed336d05.hot-update.js",
|
||||
"/chunks/plan-create.d4cbd302ac338d5e442f.hot-update.js": "/chunks/plan-create.d4cbd302ac338d5e442f.hot-update.js",
|
||||
"/chunks/plan-create.76276d97bc81b9a20e3b.hot-update.js": "/chunks/plan-create.76276d97bc81b9a20e3b.hot-update.js",
|
||||
"/chunks/plan-create.e6cccdfcb666fb9adbb5.hot-update.js": "/chunks/plan-create.e6cccdfcb666fb9adbb5.hot-update.js",
|
||||
"/js/main.6b2170fcadb2927f399d.hot-update.js": "/js/main.6b2170fcadb2927f399d.hot-update.js",
|
||||
"/js/main.e7e84aa4aa6d213c861e.hot-update.js": "/js/main.e7e84aa4aa6d213c861e.hot-update.js",
|
||||
"/chunks/plan-settings.8198dff8e2b753b56fc9.hot-update.js": "/chunks/plan-settings.8198dff8e2b753b56fc9.hot-update.js",
|
||||
"/js/main.739ab5364a95dc1828c0.hot-update.js": "/js/main.739ab5364a95dc1828c0.hot-update.js",
|
||||
"/js/main.1dbf463022c37e8abbb1.hot-update.js": "/js/main.1dbf463022c37e8abbb1.hot-update.js",
|
||||
"/chunks/plan-settings.6e731202f78b0ff2fc43.hot-update.js": "/chunks/plan-settings.6e731202f78b0ff2fc43.hot-update.js",
|
||||
"/chunks/plan-settings.054bc973fbddae38ae65.hot-update.js": "/chunks/plan-settings.054bc973fbddae38ae65.hot-update.js",
|
||||
"/chunks/plan-settings.694f37c5569dff000d0e.hot-update.js": "/chunks/plan-settings.694f37c5569dff000d0e.hot-update.js",
|
||||
"/chunks/plan-settings.f1c56ae4bfeda0475c1c.hot-update.js": "/chunks/plan-settings.f1c56ae4bfeda0475c1c.hot-update.js",
|
||||
"/js/main.bd857d3176a2a454e300.hot-update.js": "/js/main.bd857d3176a2a454e300.hot-update.js",
|
||||
"/chunks/plan-settings.df3f955f56f5a1b309c3.hot-update.js": "/chunks/plan-settings.df3f955f56f5a1b309c3.hot-update.js",
|
||||
"/chunks/plan-settings.f60d9630351de71c009e.hot-update.js": "/chunks/plan-settings.f60d9630351de71c009e.hot-update.js",
|
||||
"/chunks/plan-settings.08cf008f99dc2668eefa.hot-update.js": "/chunks/plan-settings.08cf008f99dc2668eefa.hot-update.js"
|
||||
}
|
||||
|
||||
16
resources/js/helpers/functionHelpers.js
vendored
16
resources/js/helpers/functionHelpers.js
vendored
@@ -20,6 +20,22 @@ const FunctionHelpers = {
|
||||
})
|
||||
}, 150)
|
||||
|
||||
Vue.prototype.$updateInput = debounce(function (route, name, value, allowEmpty = false) {
|
||||
|
||||
if ((value === '' || value === ' ' || typeof value === 'object') && !allowEmpty) return
|
||||
|
||||
axios.post(this.$store.getters.api + route, {
|
||||
[name]: value,
|
||||
_method: 'patch'
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('alert:open', {
|
||||
title: this.$t('popup_error.title'),
|
||||
message: this.$t('popup_error.message'),
|
||||
})
|
||||
})
|
||||
}, 150)
|
||||
|
||||
Vue.prototype.$updateImage = function (route, name, image) {
|
||||
|
||||
// Create form
|
||||
|
||||
11
resources/js/store/modules/app.js
vendored
11
resources/js/store/modules/app.js
vendored
@@ -302,6 +302,16 @@ const defaultState = {
|
||||
value: 168,
|
||||
},
|
||||
],
|
||||
intervalList: [
|
||||
{
|
||||
label: 'Monthly',
|
||||
value: 'month',
|
||||
},
|
||||
{
|
||||
label: 'Annually',
|
||||
value: 'year',
|
||||
},
|
||||
],
|
||||
currencyList: [
|
||||
{
|
||||
label: 'USD - United States Dollar',
|
||||
@@ -1063,6 +1073,7 @@ const getters = {
|
||||
expirationList: state => state.expirationList,
|
||||
requestedPlan: state => state.requestedPlan,
|
||||
currencyList: state => state.currencyList,
|
||||
intervalList: state => state.intervalList,
|
||||
countries: state => state.countries,
|
||||
timezones: state => state.timezones,
|
||||
api: state => state.config.api,
|
||||
|
||||
@@ -1,180 +1,187 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="small-width">
|
||||
<MobileHeader :title="$t($router.currentRoute.meta.title)"/>
|
||||
<PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
|
||||
<ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form">
|
||||
|
||||
<div class="content-page">
|
||||
<ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Details') }}
|
||||
</FormLabel>
|
||||
|
||||
<div class="form-group">
|
||||
<FormLabel>
|
||||
{{ $t('admin_page_plans.form.title_details') }}
|
||||
</FormLabel>
|
||||
<!--Name-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('admin_page_plans.form.name')">
|
||||
<input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--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 v-model="plan.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>
|
||||
<!--Description-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Description" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('admin_page_plans.form.description')" :is-last="true">
|
||||
<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--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 v-model="plan.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>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Pricing') }}
|
||||
</FormLabel>
|
||||
|
||||
<FormLabel>
|
||||
{{ $t('admin_page_plans.form.title_pricing') }}
|
||||
</FormLabel>
|
||||
<div class="flex space-x-4">
|
||||
<!--Price-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Price" rules="required" v-slot="{ errors }" class="w-full">
|
||||
<AppInputText :title="$t('admin_page_plans.form.price')" class="w-full">
|
||||
<input v-model="plan.amount" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Currency-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }" class="w-full">
|
||||
<AppInputText :title="$t('Currency')" class="w-full">
|
||||
<SelectInput v-model="plan.currency" :options="currencyList" :placeholder="$t('Select plan currency')" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Price-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('admin_page_plans.form.price') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Plan price" rules="required" v-slot="{ errors }">
|
||||
<input v-model="plan.price" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<!--Interval-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Interval" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Interval')" :is-last="true">
|
||||
<SelectInput v-model="plan.interval" :options="intervalList" :placeholder="$t('Select billing interval')" :isError="errors[0]" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--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 v-model="plan.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>
|
||||
</div>
|
||||
<div class="card shadow-card">
|
||||
<FormLabel>
|
||||
{{ $t('Features') }}
|
||||
</FormLabel>
|
||||
|
||||
<div class="form-group" v-if="isError">
|
||||
<InfoBox type="error" style="margin-top: 40px">
|
||||
<p>{{ errorMessage }}</p>
|
||||
</InfoBox>
|
||||
</div>
|
||||
<!--Storage Capacity-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Max Storage Capacity" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
|
||||
<input v-model="plan.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<div class="form-group">
|
||||
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
|
||||
{{ $t('admin_page_plans.create_plan_button') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Team Members-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Max Team Members" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Team Members')" :description="$t('To set unlimited team members, type -1 into form')" :is-last="true">
|
||||
<input v-model="plan.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<InfoBox v-if="isError" type="error" style="margin-top: 40px">
|
||||
<p>{{ errorMessage }}</p>
|
||||
</InfoBox>
|
||||
|
||||
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
|
||||
{{ $t('admin_page_plans.create_plan_button') }}
|
||||
</ButtonBase>
|
||||
</ValidationObserver>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
|
||||
import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
|
||||
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
|
||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
||||
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 InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '/resources/js/bus'
|
||||
import axios from 'axios'
|
||||
import AppInputText from "../../../components/Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
|
||||
import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
|
||||
import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
|
||||
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
|
||||
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 InfoBox from '/resources/js/components/Others/Forms/InfoBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '/resources/js/bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'PlanCreate',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SectionTitle,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
ImageInput,
|
||||
PageHeader,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
errorMessage: '',
|
||||
isError: false,
|
||||
plan: {
|
||||
name: '',
|
||||
price: '',
|
||||
capacity: '',
|
||||
description: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async createPlan() {
|
||||
export default {
|
||||
name: 'PlanCreate',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SectionTitle,
|
||||
AppInputText,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
ImageInput,
|
||||
PageHeader,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'currencyList',
|
||||
'intervalList',
|
||||
])
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errorMessage: undefined,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
plan: {
|
||||
name: undefined,
|
||||
description: undefined,
|
||||
interval: undefined,
|
||||
amount: undefined,
|
||||
currency: undefined,
|
||||
features: {
|
||||
max_storage_amount: undefined,
|
||||
max_team_members: undefined,
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async createPlan() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.createPlan.validate();
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.createPlan.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
// Start loading
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get user token
|
||||
axios
|
||||
.post('/api/admin/plans', {
|
||||
attributes: this.plan
|
||||
})
|
||||
.then(response => {
|
||||
axios
|
||||
.post('/api/subscriptions/plans', this.plan)
|
||||
.then(response => {
|
||||
|
||||
// Show toaster
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.plan_created'),
|
||||
})
|
||||
// Show toaster
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('toaster.plan_created'),
|
||||
})
|
||||
|
||||
// Go to User page
|
||||
this.$router.push({name: 'PlanSettings', params: {id: response.data.data.id}})
|
||||
})
|
||||
.catch(error => {
|
||||
// Go to User page
|
||||
this.$router.push({name: 'PlanSettings', params: {id: response.data.data.id}})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// Validation errors
|
||||
if (error.response.status == 422) {
|
||||
// Validation errors
|
||||
if (error.response.status === 422) {
|
||||
|
||||
if (error.response.data.errors['max_storage_amount']) {
|
||||
this.$refs.createPlan.setErrors({
|
||||
'storage capacity': this.$t('errors.capacity_digit')
|
||||
});
|
||||
}
|
||||
}
|
||||
if (error.response.data.errors['max_storage_amount']) {
|
||||
this.$refs.createPlan.setErrors({
|
||||
'Max Storage Capacity': this.$t('errors.capacity_digit')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (error.response.status == 500) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
if (error.response.status === 500) {
|
||||
this.isError = true
|
||||
this.errorMessage = error.response.data.message
|
||||
}
|
||||
|
||||
}).finally(() => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '/resources/sass/vuefilemanager/_variables';
|
||||
@import '/resources/sass/vuefilemanager/_mixins';
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
</style>
|
||||
|
||||
@@ -7,17 +7,17 @@
|
||||
|
||||
<!--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"/>
|
||||
<SwitchInput @input="$updateInput('/subscriptions/plans/' + $route.params.id, 'visible', plan.attributes.visible)" v-model="visible" class="switch" :state="plan.attributes.visible"/>
|
||||
</AppInputSwitch>
|
||||
|
||||
<!--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"/>
|
||||
<input @input="$updateInput('/subscriptions/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-->
|
||||
<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>
|
||||
<textarea @input="$updateInput('/subscriptions/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>
|
||||
|
||||
<InfoBox style="margin-bottom: 0">
|
||||
@@ -31,12 +31,12 @@
|
||||
|
||||
<!--Storage Capacity-->
|
||||
<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
|
||||
<input @input="$updateText('/admin/plans/' + $route.params.id, 'max_storage_amount', plan.attributes.max_storage_amount)" 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"/>
|
||||
<input @input="$updateInput(`/subscriptions/plans/${$route.params.id}/features`, 'max_storage_amount', plan.attributes.features.max_storage_amount)" 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>
|
||||
|
||||
<!--Team Members-->
|
||||
<AppInputText :title="$t('Max Team Members')" is-last="true">
|
||||
<input @input="$updateText('/admin/plans/' + $route.params.id, 'max_team_members', plan.attributes.max_team_members)" v-model="plan.attributes.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
|
||||
<input @input="$updateInput(`/subscriptions/plans/${$route.params.id}/features`, 'max_team_members', plan.attributes.features.max_team_members)" v-model="plan.attributes.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
|
||||
</AppInputText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@ namespace Domain\SetupWizard\Controllers;
|
||||
|
||||
use Illuminate\Http\Response;
|
||||
use App\Http\Controllers\Controller;
|
||||
use Domain\Subscriptions\Services\StripeService;
|
||||
use Domain\SetupWizard\Requests\StoreStripePlansRequest;
|
||||
|
||||
/**
|
||||
@@ -11,10 +10,6 @@ use Domain\SetupWizard\Requests\StoreStripePlansRequest;
|
||||
*/
|
||||
class StorePlansController extends Controller
|
||||
{
|
||||
public function __construct(
|
||||
public StripeService $stripe,
|
||||
) {
|
||||
}
|
||||
|
||||
public function __invoke(
|
||||
StoreStripePlansRequest $request
|
||||
|
||||
Reference in New Issue
Block a user