mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 19:10:40 +00:00
frontend/backend update
This commit is contained in:
carodej
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="medium-width" v-if="! isLoading">
|
||||
<div id="page-content" v-if="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
|
||||
@@ -3,23 +3,26 @@
|
||||
<ValidationObserver v-if="gateway.attributes.slug === 'paypal'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
|
||||
<PageTabGroup>
|
||||
<b class="form-group-label">Settings</b>
|
||||
<div class="block-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Status:</label>
|
||||
<div class="switch-label">
|
||||
<label class="input-label">Status:</label>
|
||||
<small class="input-help">Status of your payment gateway on website.</small>
|
||||
</div>
|
||||
<SwitchInput @input="$updateText('/gateways/paypal', 'status', paymentGateway.attributes.status)" v-model="paymentGateway.attributes.status" class="switch" :state="paymentGateway.attributes.status"/>
|
||||
</div>
|
||||
<small class="input-help">Status of your payment gateway on website.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Sandbox Mode:</label>
|
||||
<div class="switch-label">
|
||||
<label class="input-label">Sandbox Mode:</label>
|
||||
<small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
|
||||
</div>
|
||||
<SwitchInput @input="$updateText('/gateways/paypal', 'sandbox', paymentGateway.attributes.sandbox)" v-model="paymentGateway.attributes.sandbox" class="switch" :state="paymentGateway.attributes.sandbox"/>
|
||||
</div>
|
||||
<small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
@@ -60,23 +63,26 @@
|
||||
|
||||
<ValidationObserver v-if="gateway.attributes.slug === 'stripe'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<PageTabGroup>
|
||||
<b class="form-group-label">Settings</b>
|
||||
<div class="block-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Status:</label>
|
||||
<div class="switch-label">
|
||||
<label class="input-label">Status:</label>
|
||||
<small class="input-help">Status of your payment gateway on website.</small>
|
||||
</div>
|
||||
<SwitchInput @input="$updateText('/gateways/stripe', 'status', paymentGateway.attributes.status)" v-model="paymentGateway.attributes.status" class="switch" :state="paymentGateway.attributes.status"/>
|
||||
</div>
|
||||
<small class="input-help">Status of your payment gateway on website.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Sandbox Mode:</label>
|
||||
<div class="switch-label">
|
||||
<label class="input-label">Sandbox Mode:</label>
|
||||
<small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
|
||||
</div>
|
||||
<SwitchInput @input="$updateText('/gateways/stripe', 'sandbox', paymentGateway.attributes.sandbox)" v-model="paymentGateway.attributes.sandbox" class="switch" :state="paymentGateway.attributes.sandbox"/>
|
||||
</div>
|
||||
<small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
|
||||
@@ -134,7 +134,7 @@
|
||||
},
|
||||
methods: {
|
||||
changeStatus(val, id) {
|
||||
this.$updateText('/plans/' + id + '/update', 'status', val)
|
||||
this.$updateText('/plans/' + id + '/update', 'is_active', val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="medium-width" v-if="! isLoading">
|
||||
<div id="page-content" v-if="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
@@ -18,13 +18,13 @@
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'PlanTransactions', params: {id: plan.id}}"
|
||||
<router-link replace :to="{name: 'PlanSubscribers', params: {id: plan.id}}"
|
||||
class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<credit-card-icon size="17"></credit-card-icon>
|
||||
<users-icon size="17"></users-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Transactions
|
||||
Subscribers
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
@@ -50,20 +50,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CreditCardIcon, SettingsIcon, Trash2Icon} from 'vue-feather-icons'
|
||||
import {UsersIcon, SettingsIcon, Trash2Icon} from 'vue-feather-icons'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import SectionTitle from '@/components/Others/SectionTitle'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Gateway',
|
||||
components: {
|
||||
UsersIcon,
|
||||
Trash2Icon,
|
||||
SettingsIcon,
|
||||
CreditCardIcon,
|
||||
SectionTitle,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
|
||||
@@ -7,10 +7,12 @@
|
||||
<div class="block-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Status:</label>
|
||||
<div class="switch-label">
|
||||
<label class="input-label">Status:</label>
|
||||
<small class="input-help">Status of your payment gateway on website.</small>
|
||||
</div>
|
||||
<SwitchInput @input="changeStatus" class="switch" :state="plan.attributes.status"/>
|
||||
</div>
|
||||
<small class="input-help">Status of your payment gateway on website.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -91,7 +93,7 @@
|
||||
},
|
||||
methods: {
|
||||
changeStatus(val) {
|
||||
this.$updateText('/plans/' + this.$route.params.id + '/update', 'status', val)
|
||||
this.$updateText('/plans/' + this.$route.params.id + '/update', 'is_active', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<PageTab v-if="subscribers">
|
||||
<PageTabGroup>
|
||||
<DatatableWrapper :paginator="true" :columns="columns" :data="subscribers" class="table">
|
||||
<template scope="{ row }">
|
||||
<tr>
|
||||
<td>
|
||||
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
|
||||
<DatatableCellImage
|
||||
image-size="small"
|
||||
:image="row.data.attributes.avatar"
|
||||
:title="row.data.attributes.name"
|
||||
/>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.relationships.storage.data.attributes.used }}%
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.relationships.subscription.data.attributes.ends_at }}
|
||||
</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"></edit-2-icon>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
|
||||
<trash2-icon size="15" class="icon icon-trash"></trash2-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
|
||||
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import {DownloadCloudIcon, Edit2Icon, Trash2Icon} from "vue-feather-icons";
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'PlanSubscribers',
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
DownloadCloudIcon,
|
||||
DatatableWrapper,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
Edit2Icon,
|
||||
Trash2Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
subscribers: undefined,
|
||||
columns: [
|
||||
{
|
||||
label: 'User',
|
||||
field: 'data.attributes.plan',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
field: 'data.storage.attributes.storage.used',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Expire At',
|
||||
field: 'data.subscription.data.attributes.ends_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
field: 'data.action',
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get('/api/plans/' + this.$route.params.id + '/subscribers')
|
||||
.then(response => {
|
||||
this.subscribers = response.data.data
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,304 +0,0 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<PageTabGroup>
|
||||
<DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
|
||||
<template scope="{ row }">
|
||||
<tr>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
${{ row.attributes.total }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<router-link :to="{name: 'UserInvoices', params: {id: row.relationships.user.data.id}}">
|
||||
<DatatableCellImage
|
||||
image-size="small"
|
||||
:image="row.relationships.user.data.attributes.avatar"
|
||||
:title="row.relationships.user.data.attributes.name"
|
||||
/>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.created_at_formatted }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<download-cloud-icon size="15" class="icon"></download-cloud-icon>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
|
||||
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import {DownloadCloudIcon} from "vue-feather-icons";
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'PlanTransactions',
|
||||
components: {
|
||||
DatatableCellImage,
|
||||
DownloadCloudIcon,
|
||||
DatatableWrapper,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
invoices: [
|
||||
{
|
||||
id: '1',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 9.99,
|
||||
plan: 'Starter Plan',
|
||||
created_at: '30. April. 2020',
|
||||
created_at_formatted: '30. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/avatars/6osmoXJo-avatar-01.png',
|
||||
name: 'Jane Doe',
|
||||
email: 'howdy@hi5ve.digital',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 9.99,
|
||||
plan: 'Starter Plan',
|
||||
created_at: '30. April. 2020',
|
||||
created_at_formatted: '30. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
|
||||
name: 'Peter Papp',
|
||||
email: 'peterpapp@makingcg.com',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 49.99,
|
||||
plan: 'Business Plan',
|
||||
created_at: '31. April. 2020',
|
||||
created_at_formatted: '31. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/assets/images/default-avatar.png',
|
||||
name: 'Pavel Svintsitskiy',
|
||||
email: 'pashaUSA@gmail.com',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 29.99,
|
||||
plan: 'Professional Plan',
|
||||
created_at: '31. April. 2020',
|
||||
created_at_formatted: '31. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
|
||||
name: 'Torsten',
|
||||
email: 'torsten.hoegel@go-on-net.de',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 9.99,
|
||||
plan: 'Starter Plan',
|
||||
created_at: '30. April. 2020',
|
||||
created_at_formatted: '30. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/avatars/6osmoXJo-avatar-01.png',
|
||||
name: 'Jane Doe',
|
||||
email: 'howdy@hi5ve.digital',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 9.99,
|
||||
plan: 'Starter Plan',
|
||||
created_at: '30. April. 2020',
|
||||
created_at_formatted: '30. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
|
||||
name: 'Peter Papp',
|
||||
email: 'peterpapp@makingcg.com',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 49.99,
|
||||
plan: 'Business Plan',
|
||||
created_at: '31. April. 2020',
|
||||
created_at_formatted: '31. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/assets/images/default-avatar.png',
|
||||
name: 'Pavel Svintsitskiy',
|
||||
email: 'pashaUSA@gmail.com',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
type: 'invoices',
|
||||
attributes: {
|
||||
total: 29.99,
|
||||
plan: 'Professional Plan',
|
||||
created_at: '31. April. 2020',
|
||||
created_at_formatted: '31. April. 2020',
|
||||
download: 'https://vuefilemanager.com/',
|
||||
},
|
||||
relationships: {
|
||||
user: {
|
||||
data: {
|
||||
id: '1',
|
||||
type: 'users',
|
||||
attributes: {
|
||||
avatar: '/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
|
||||
name: 'Torsten',
|
||||
email: 'torsten.hoegel@go-on-net.de',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
label: 'Total',
|
||||
field: 'attributes.total',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'User',
|
||||
field: 'attributes.plan',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Payed',
|
||||
field: 'relationships.user.data.attributes.name',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
field: 'data.action',
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/*axios.get('/api/users/' + this.$route.params.id + '/storage')
|
||||
.then(response => {
|
||||
this.storage = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -34,6 +34,14 @@
|
||||
{{ row.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item" v-if="row.relationships.subscription">
|
||||
{{ row.relationships.subscription.data.attributes.name }}
|
||||
</span>
|
||||
<span class="cell-item" v-else>
|
||||
Free
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.relationships.storage.data.attributes.used }}%
|
||||
@@ -113,6 +121,11 @@
|
||||
field: 'data.attributes.role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Subscription Plan',
|
||||
field: 'data.attributes.role',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.storage_used'),
|
||||
field: 'data.attributes.storage.used',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="single-page" v-if="app">
|
||||
<div id="page-content" class="medium-width" v-if="! isLoading">
|
||||
<div id="page-content" v-if="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
|
||||
<!--Avatar-->
|
||||
<div class="block-wrapper">
|
||||
<label>Avatar</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
|
||||
<ImageInput v-model="user.avatar" :error="errors[0]" />
|
||||
</ValidationProvider>
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
<ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form"
|
||||
class="form block-form">
|
||||
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
|
||||
name="User name" :rules="'required|is:' + user.attributes.name">
|
||||
<label>{{ $t('admin_page_user.label_delete_user', {user: user.attributes.name}) }}:</label>
|
||||
name="User name" :rules="'required|is:' + user.data.attributes.name">
|
||||
<label>{{ $t('admin_page_user.label_delete_user', {user: user.data.attributes.name}) }}:</label>
|
||||
<div class="single-line-form">
|
||||
<input v-model="userName"
|
||||
:placeholder="$t('admin_page_user.placeholder_delete_user')"
|
||||
@@ -101,7 +101,7 @@
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -82,16 +82,16 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>State:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_state"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>State:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_state"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>City:</label>
|
||||
<div class="input-wrapper">
|
||||
|
||||
@@ -7,16 +7,30 @@
|
||||
<div class="content-page">
|
||||
|
||||
<!--User thumbnail-->
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<UserImageInput
|
||||
v-model="avatar"
|
||||
:avatar="profile.data.attributes.avatar"
|
||||
/>
|
||||
<div class="page-detail-headline">
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<UserImageInput
|
||||
v-model="avatar"
|
||||
:avatar="profile.data.attributes.avatar"
|
||||
/>
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">
|
||||
{{ profile.data.attributes.name }}
|
||||
<ColorLabel :color="subscriptionColor">
|
||||
{{ subscriptionStatus }}
|
||||
</ColorLabel>
|
||||
</b>
|
||||
<span class="email">{{ profile.data.attributes.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">{{ profile.data.attributes.name }}</b>
|
||||
<span class="email">{{ profile.data.attributes.email }}</span>
|
||||
<div class="headline-actions">
|
||||
<router-link :to="{name: 'UpgradePlan'}">
|
||||
<ButtonBase button-style="secondary" type="button">
|
||||
Upgrade Plan
|
||||
</ButtonBase>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,6 +54,15 @@
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<credit-card-icon size="17"></credit-card-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Subscription
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<file-text-icon size="17"></file-text-icon>
|
||||
@@ -81,11 +104,13 @@
|
||||
<script>
|
||||
import UserImageInput from '@/components/Others/UserImageInput'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import ColorLabel from '@/components/Others/ColorLabel'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import axios from 'axios'
|
||||
|
||||
import {
|
||||
CreditCardIcon,
|
||||
HardDriveIcon,
|
||||
FileTextIcon,
|
||||
UserIcon,
|
||||
@@ -95,15 +120,26 @@
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: {
|
||||
ButtonBase,
|
||||
CreditCardIcon,
|
||||
UserImageInput,
|
||||
FileTextIcon,
|
||||
MobileHeader,
|
||||
ColorLabel,
|
||||
PageHeader,
|
||||
Spinner,
|
||||
HardDriveIcon,
|
||||
UserIcon,
|
||||
LockIcon,
|
||||
},
|
||||
computed: {
|
||||
subscriptionStatus() {
|
||||
return this.profile.relationships.subscription ? 'Subscription' : 'Free'
|
||||
},
|
||||
subscriptionColor() {
|
||||
return this.profile.relationships.subscription ? 'green' : 'purple'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
avatar: undefined,
|
||||
@@ -125,6 +161,11 @@
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.page-detail-headline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user-thumbnail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="large-width center-page" v-show="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="content-page">
|
||||
|
||||
<div class="plan-title">
|
||||
<credit-card-icon size="42" class="title-icon"></credit-card-icon>
|
||||
<h1>Choose Payment Method</h1>
|
||||
<h2>Choose plan witch perfect fit your needs. All plans is billed monthly automatically via your
|
||||
credit card.</h2>
|
||||
</div>
|
||||
|
||||
<div class="order">
|
||||
<div class="billing" v-if="billing">
|
||||
<b class="form-group-label">Billing Information:</b>
|
||||
<ValidationObserver ref="order" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<div class="form block-form">
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" rules="required"
|
||||
name="billing_name" v-slot="{ errors }">
|
||||
<input v-model="billing.billing_name"
|
||||
placeholder="Type your billing name"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Address:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" rules="required"
|
||||
name="billing_address" v-slot="{ errors }">
|
||||
<input v-model="billing.billing_address"
|
||||
placeholder="Type your billing address"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>State:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" rules="required"
|
||||
name="billing_state" v-slot="{ errors }">
|
||||
<input v-model="billing.billing_state"
|
||||
placeholder="Type your billing state"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>City:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required" name="billing_city" v-slot="{ errors }">
|
||||
<input v-model="billing.billing_city"
|
||||
placeholder="Type your billing city"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Postal Code:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper"
|
||||
rules="required" name="billing_postal_code"
|
||||
v-slot="{ errors }">
|
||||
<input v-model="billing.billing_postal_code"
|
||||
placeholder="Type your billing postal code"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Country:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" rules="required"
|
||||
name="billing_country" v-slot="{ errors }">
|
||||
<input v-model="billing.billing_country"
|
||||
placeholder="Type your billing country"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Phone Number:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" rules="required"
|
||||
name="billing_phone_number" v-slot="{ errors }">
|
||||
<input v-model="billing.billing_phone_number"
|
||||
placeholder="Type your billing phone number"
|
||||
type="text"
|
||||
:class="{'is-error': errors[0]}"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
<div class="summary">
|
||||
<b class="form-group-label">Order Summary:</b>
|
||||
|
||||
<div class="summary-list" v-if="requestedPlan">
|
||||
<div class="row">
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.attributes.name }}</b>
|
||||
<small>Billed monthly</small>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.attributes.price }} USD</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell">
|
||||
<b>Total</b>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<b>{{ requestedPlan.data.attributes.price }} USD</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ButtonBase :disabled="isSubmitted" :loading="isSubmitted" @click.native="submitOrder"
|
||||
type="submit" button-style="theme-solid" class="next-submit">
|
||||
Pay Order
|
||||
</ButtonBase>
|
||||
|
||||
<small class="disclaimer">
|
||||
By submit form, you agree to save the payment method and billing information in your
|
||||
VueFileManager account.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PlanPricingTables from '@/components/Others/PlanPricingTables'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import {CreditCardIcon} from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UpgradePlan',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
PlanPricingTables,
|
||||
CreditCardIcon,
|
||||
MobileHeader,
|
||||
ButtonBase,
|
||||
PageHeader,
|
||||
required,
|
||||
Spinner,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['requestedPlan']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
isSubmitted: false,
|
||||
billing: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitOrder() {
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.order.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Start loading
|
||||
this.isSubmitted = true
|
||||
|
||||
// Send order request
|
||||
axios
|
||||
.post('/api/upgrade', {
|
||||
billing: this.billing,
|
||||
plan: this.requestedPlan,
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isSubmitted = false
|
||||
|
||||
// Show toaster
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: 'Your account was successfully upgraded.',
|
||||
})
|
||||
|
||||
// Go to User page
|
||||
this.$router.push({name: 'Storage'})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// End loading
|
||||
this.isSubmitted = false
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get('/api/profile')
|
||||
.then(response => {
|
||||
|
||||
if (! this.requestedPlan) {
|
||||
this.$router.push({name: 'UpgradePlan'})
|
||||
}
|
||||
|
||||
this.billing = {
|
||||
billing_name: response.data.relationships.settings.data.attributes.billing_name,
|
||||
billing_address: response.data.relationships.settings.data.attributes.billing_address,
|
||||
billing_state: response.data.relationships.settings.data.attributes.billing_state,
|
||||
billing_city: response.data.relationships.settings.data.attributes.billing_city,
|
||||
billing_postal_code: response.data.relationships.settings.data.attributes.billing_postal_code,
|
||||
billing_country: response.data.relationships.settings.data.attributes.billing_country,
|
||||
billing_phone_number: response.data.relationships.settings.data.attributes.billing_phone_number,
|
||||
}
|
||||
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.summary-list {
|
||||
box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.06);
|
||||
border-radius: 8px;
|
||||
position: sticky;
|
||||
padding: 25px;
|
||||
top: 30px;
|
||||
|
||||
.next-submit {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
@include font-size(12);
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-top: 1px solid $light_mode_border;
|
||||
padding-bottom: 0;
|
||||
|
||||
b {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
b {
|
||||
display: block;
|
||||
@include font-size(18);
|
||||
}
|
||||
|
||||
small {
|
||||
color: $text-muted;
|
||||
@include font-size(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order {
|
||||
display: flex;
|
||||
|
||||
.billing {
|
||||
flex: 0 0 65%;
|
||||
padding-right: 30px;
|
||||
|
||||
.form {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
flex: 0 0 34%;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 80px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(38);
|
||||
font-weight: 800;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(20);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="large-width center-page" v-show="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="content-page">
|
||||
<div class="plan-title">
|
||||
<cloud-icon size="42" class="title-icon"></cloud-icon>
|
||||
<h1>Choose Your Plan</h1>
|
||||
<h2>Choose plan witch perfect fit your needs. All plans is billed monthly automatically via your credit card.</h2>
|
||||
</div>
|
||||
|
||||
<PlanPricingTables @load="onLoadPricingTables" @selected-plan="onSelectTable"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlanPricingTables from '@/components/Others/PlanPricingTables'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import { CloudIcon } from 'vue-feather-icons'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UpgradePlan',
|
||||
components: {
|
||||
PlanPricingTables,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
CloudIcon,
|
||||
Spinner,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onLoadPricingTables(state) {
|
||||
this.isLoading = state
|
||||
},
|
||||
onSelectTable(plan) {
|
||||
this.$store.commit('STORE_REQUESTED_PLAN', plan)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.plan-title {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 80px;
|
||||
|
||||
path, line, polyline, rect, circle {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(38);
|
||||
font-weight: 800;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include font-size(20);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -5,7 +5,7 @@
|
||||
class="form block-form">
|
||||
|
||||
<div class="block-wrapper">
|
||||
<b class="form-group-label">{{ $t('page_create_password.label_new_pass') }}:</b>
|
||||
<label>{{ $t('page_create_password.label_new_pass') }}:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
|
||||
rules="required" v-slot="{ errors }">
|
||||
<input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
<PageTab>
|
||||
<PageTabGroup v-if="userInfo">
|
||||
<div class="form block-form">
|
||||
<b class="form-group-label">{{ $t('admin_page_user.label_person_info') }}</b>
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
@@ -50,17 +49,17 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>State:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/relationships/settings', 'billing_state', billingInfo.billing_state)"
|
||||
v-model="billingInfo.billing_state"
|
||||
placeholder="Type your billing state"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>State:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/relationships/settings', 'billing_state', billingInfo.billing_state)"
|
||||
v-model="billingInfo.billing_state"
|
||||
placeholder="Type your billing state"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper-inline">
|
||||
<div class="block-wrapper">
|
||||
<label>City:</label>
|
||||
<div class="input-wrapper">
|
||||
@@ -135,13 +134,6 @@
|
||||
ThemeLabel,
|
||||
required,
|
||||
},
|
||||
/* watch: {
|
||||
'user.name': debounce(function (val) {
|
||||
if (val === '') return
|
||||
|
||||
this.$store.commit('UPDATE_NAME', val)
|
||||
}, 300),
|
||||
},*/
|
||||
data() {
|
||||
return {
|
||||
userInfo: undefined,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<PageTab v-if="storage">
|
||||
<PageTabGroup>
|
||||
<b class="form-group-label">{{ $t('storage.sec_capacity') }}</b>
|
||||
<StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.attributes.used})" :percentage="storage.attributes.percentage" :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"/>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<PageTabGroup>
|
||||
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
|
||||
import {ExternalLinkIcon} from "vue-feather-icons";
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserSubscription',
|
||||
components: {
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
DatatableWrapper,
|
||||
ExternalLinkIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
invoices: undefined,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/* axios.get('/api/user/subscription')
|
||||
.then(response => {
|
||||
this.invoices = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user