mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-25 18:20:38 +00:00
frontend update
This commit is contained in:
carodej
@@ -5,39 +5,39 @@
|
||||
<PageHeader :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="content-page">
|
||||
<DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
|
||||
<DatatableWrapper :paginator="false" :columns="columns" :data="gateways" class="table table-users">
|
||||
<template scope="{ row }">
|
||||
<tr>
|
||||
<td style="min-width: 200px;">
|
||||
<router-link :to="{name: 'GatewaySettings', params: {name: row.attributes.type}}">
|
||||
<router-link :to="{name: 'GatewaySettings', params: {slug: row.data.attributes.slug}}">
|
||||
<DatatableCellImage
|
||||
:image="row.attributes.avatar"
|
||||
:title="row.attributes.gateway"
|
||||
:image="row.data.attributes.logo"
|
||||
:title="row.data.attributes.name"
|
||||
/>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
<SwitchInput
|
||||
@input="changeStatus($event, row.attributes.type)"
|
||||
:state="row.attributes.status"
|
||||
@input="changeStatus($event, row.data.attributes.slug)"
|
||||
:state="row.data.attributes.status"
|
||||
class="switch"
|
||||
/>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.payments_processed }}
|
||||
{{ row.data.attributes.payments_processed }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.active_subscribers }}
|
||||
{{ row.data.attributes.active_subscribers }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<router-link :to="{name: 'GatewaySettings', params: {name: row.attributes.type}}">
|
||||
<router-link :to="{name: 'GatewaySettings', params: {slug: row.data.attributes.slug}}">
|
||||
<edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
@@ -85,52 +85,27 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
plans: [
|
||||
{
|
||||
id: '2',
|
||||
type: 'payment_method',
|
||||
attributes: {
|
||||
type: 'paypal',
|
||||
gateway: 'PayPal',
|
||||
avatar: '/assets/images/paypal-logo-thumbnail.png',
|
||||
status: 0,
|
||||
payments_processed: 234,
|
||||
active_subscribers: 2920,
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
type: 'payment_method',
|
||||
attributes: {
|
||||
type: 'stripe',
|
||||
gateway: 'Stripe',
|
||||
avatar: '/assets/images/stripe-logo-thumbnail.png',
|
||||
status: 1,
|
||||
payments_processed: 798,
|
||||
active_subscribers: 3587,
|
||||
}
|
||||
},
|
||||
],
|
||||
isLoading: true,
|
||||
gateways: undefined,
|
||||
columns: [
|
||||
{
|
||||
label: 'Payment Gateway',
|
||||
field: 'attributes.gateway',
|
||||
field: 'data.attributes.gateway',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
field: 'attributes.status',
|
||||
field: 'data.attributes.status',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Payments Processed',
|
||||
field: 'attributes.payments_processed',
|
||||
field: 'data.attributes.payments_processed',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Active Subscribers',
|
||||
field: 'attributes.active_subscribers',
|
||||
field: 'data.attributes.active_subscribers',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
@@ -143,15 +118,15 @@
|
||||
},
|
||||
methods: {
|
||||
changeStatus(val, type) {
|
||||
this.$updateText('/gateways/' + type, 'active', val)
|
||||
this.$updateText('/gateways/' + type, 'status', val)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/*axios.get('/api/plans')
|
||||
axios.get('/api/gateways')
|
||||
.then(response => {
|
||||
this.plans = response.data.data
|
||||
this.gateways = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -4,22 +4,22 @@
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="content-page">
|
||||
<div class="content-page" v-if="gateway">
|
||||
|
||||
<!--User thumbnail-->
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<img :src="gateway.attributes.avatar" :alt="gateway.attributes.gateway">
|
||||
<img :src="gateway.attributes.logo" :alt="gateway.attributes.name">
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">{{ gateway.attributes.gateway }}</b>
|
||||
<b class="name">{{ gateway.attributes.name }}</b>
|
||||
<span class="email">Payment Gateway</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Page Tab links-->
|
||||
<div class="menu-list-wrapper horizontal">
|
||||
<router-link replace :to="{name: 'GatewaySettings', params: {name: gateway.attributes.type}}" class="menu-list-item link">
|
||||
<router-link replace :to="{name: 'GatewaySettings', params: {name: gateway.attributes.slug}}" class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<settings-icon size="17"></settings-icon>
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'GatewayTransactions', params: {name: gateway.attributes.type}}"
|
||||
<router-link replace :to="{name: 'GatewayTransactions', params: {name: gateway.attributes.slug}}"
|
||||
class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<credit-card-icon size="17"></credit-card-icon>
|
||||
@@ -75,40 +75,11 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
if (this.$route.params.name === 'paypal') {
|
||||
this.gateway = {
|
||||
id: '2',
|
||||
type: 'payment_method',
|
||||
attributes: {
|
||||
type: 'paypal',
|
||||
gateway: 'PayPal',
|
||||
avatar: '/assets/images/paypal-logo-thumbnail.png',
|
||||
status: 0,
|
||||
payments_processed: 234,
|
||||
active_subscribers: 2920,
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.gateway = {
|
||||
id: '1',
|
||||
type: 'payment_method',
|
||||
attributes: {
|
||||
type: 'stripe',
|
||||
gateway: 'Stripe',
|
||||
avatar: '/assets/images/stripe-logo-thumbnail.png',
|
||||
status: 1,
|
||||
payments_processed: 798,
|
||||
active_subscribers: 3587,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*axios.get('/api/gateway/' + this.$route.params.name)
|
||||
axios.get('/api/gateways/' + this.$route.params.slug)
|
||||
.then(response => {
|
||||
this.user = response.data.data
|
||||
this.gateway = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<ValidationObserver v-if="gateway.attributes.type === 'paypal'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<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>
|
||||
<SwitchInput @input="$updateText('/gateways/paypal', 'status', paypal.status)" v-model="paypal.status" class="switch" :state="paypal.status"/>
|
||||
<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>
|
||||
@@ -16,7 +17,7 @@
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Sandbox Mode:</label>
|
||||
<SwitchInput @input="$updateText('/gateways/paypal', 'sandbox', paypal.sandbox)" v-model="paypal.sandbox" class="switch" :state="paypal.sandbox"/>
|
||||
<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>
|
||||
@@ -30,7 +31,7 @@
|
||||
<label>Paypal Client ID</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input @keyup="$updateText('/gateways/paypal', 'client_id', paypal.client_id)" v-model="paypal.client_id" placeholder="Paste PayPal client id here" type="text" />
|
||||
<input @keyup="$updateText('/gateways/paypal', 'client_id', paymentGateway.attributes.client_id)" v-model="paymentGateway.attributes.client_id" placeholder="Paste PayPal client id here" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -40,7 +41,7 @@
|
||||
<label>Paypal Secret</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PayPalSecret" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input @keyup="$updateText('/gateways/paypal', 'secret', paypal.secret)" v-model="paypal.secret" placeholder="Paste PayPal secret here" type="text" />
|
||||
<input @keyup="$updateText('/gateways/paypal', 'secret', paymentGateway.attributes.secret)" v-model="paymentGateway.attributes.secret" placeholder="Paste PayPal secret here" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -50,21 +51,21 @@
|
||||
<label>Paypal Webhook ID</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PayPalSecret" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input @keyup="$updateText('/gateways/paypal', 'webhook', paypal.webhook)" v-model="paypal.webhook" placeholder="Paste PayPal webhook here" type="text" />
|
||||
<input @keyup="$updateText('/gateways/paypal', 'webhook', paymentGateway.attributes.webhook)" v-model="paymentGateway.attributes.webhook" placeholder="Paste PayPal webhook here" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</ValidationObserver>
|
||||
|
||||
<ValidationObserver v-if="gateway.attributes.type === 'stripe'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<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>
|
||||
<SwitchInput @input="$updateText('/gateways/stripe', 'status', stripe.status)" v-model="stripe.status" class="switch" :state="stripe.status"/>
|
||||
<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>
|
||||
@@ -73,7 +74,7 @@
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Sandbox Mode:</label>
|
||||
<SwitchInput @input="$updateText('/gateways/stripe', 'sandbox', stripe.sandbox)" v-model="stripe.sandbox" class="switch" :state="stripe.sandbox"/>
|
||||
<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>
|
||||
@@ -86,7 +87,7 @@
|
||||
<div class="block-wrapper">
|
||||
<label>Stripe Client ID</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required" v-slot="{ errors }">
|
||||
<input @keyup="$updateText('/gateways/stripe', 'client_id', stripe.client_id)" v-model="stripe.client_id" placeholder="Paste stripe client id here" type="text" />
|
||||
<input @keyup="$updateText('/gateways/stripe', 'client_id', paymentGateway.attributes.client_id)" v-model="paymentGateway.attributes.client_id" placeholder="Paste stripe client id here" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -96,7 +97,7 @@
|
||||
<label>Stripe Secret</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="StripeSecret" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input @keyup="$updateText('/gateways/stripe', 'secret', stripe.secret)" v-model="stripe.secret" placeholder="Paste stripe secret here" type="text" />
|
||||
<input @keyup="$updateText('/gateways/stripe', 'secret', paymentGateway.attributes.secret)" v-model="paymentGateway.attributes.secret" placeholder="Paste stripe secret here" type="text" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
@@ -137,21 +138,12 @@
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
paypal: {
|
||||
status: 1,
|
||||
sandbox: 0,
|
||||
client_id: '',
|
||||
secret: '',
|
||||
webhook: '',
|
||||
},
|
||||
stripe: {
|
||||
status: 0,
|
||||
sandbox: 0,
|
||||
client_id: '',
|
||||
secret: '',
|
||||
}
|
||||
paymentGateway: undefined,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.paymentGateway = this.gateway
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -8,19 +8,24 @@
|
||||
<DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
|
||||
<template scope="{ row }">
|
||||
<tr>
|
||||
<td>
|
||||
<a :href="'/invoice/' + row.data.attributes.token" target="_blank" class="cell-item">
|
||||
{{ row.data.attributes.order }}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
${{ row.attributes.total }}
|
||||
${{ row.data.attributes.total }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.plan }}
|
||||
{{ row.data.attributes.bag[0].description }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.created_at_formatted }}
|
||||
{{ row.data.attributes.created_at_formatted }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
@@ -34,9 +39,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<router-link :to="{name: 'UserDelete', params: {id: row.relationships.user.data.id}}">
|
||||
<download-cloud-icon size="15" class="icon"></download-cloud-icon>
|
||||
</router-link>
|
||||
<a :href="'/invoice/' + row.data.attributes.token" target="_blank">
|
||||
<external-link-icon size="15" class="icon"></external-link-icon>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -58,16 +63,16 @@
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import SectionTitle from '@/components/Others/SectionTitle'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import {DownloadCloudIcon} from "vue-feather-icons";
|
||||
import {ExternalLinkIcon} from "vue-feather-icons";
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import ColorLabel from '@/components/Others/ColorLabel'
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Plans',
|
||||
name: 'Invoices',
|
||||
components: {
|
||||
DownloadCloudIcon,
|
||||
ExternalLinkIcon,
|
||||
DatatableCellImage,
|
||||
MobileActionButton,
|
||||
DatatableWrapper,
|
||||
@@ -81,202 +86,14 @@
|
||||
},
|
||||
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',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
isLoading: true,
|
||||
invoices: undefined,
|
||||
columns: [
|
||||
{
|
||||
label: 'Invoice Number',
|
||||
field: 'attributes.total',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Total',
|
||||
field: 'attributes.total',
|
||||
@@ -306,11 +123,11 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/*axios.get('/api/invoices')
|
||||
axios.get('/api/invoices')
|
||||
.then(response => {
|
||||
this.invoices = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -21,36 +21,36 @@
|
||||
<template scope="{ row }">
|
||||
<tr>
|
||||
<td class="name" style="min-width: 200px">
|
||||
<router-link :to="{name: 'PlanSettings', params: {id: row.id}}" class="cell-item" tag="div">
|
||||
<span>{{ row.attributes.name }}</span>
|
||||
<router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}" class="cell-item" tag="div">
|
||||
<span>{{ row.data.attributes.name }}</span>
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
<SwitchInput @input="changeStatus($event, row.id)" class="switch" :state="row.attributes.status"/>
|
||||
<SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.status"/>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
${{ row.attributes.price }}
|
||||
${{ row.data.attributes.price }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.capacity }}
|
||||
{{ row.data.attributes.capacity_formatted }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.subscribers }}
|
||||
{{ row.data.attributes.subscribers }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<router-link :to="{name: 'PlanSettings', params: {id: row.id}}">
|
||||
<router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}">
|
||||
<edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'PlanDelete', params: {id: row.id}}">
|
||||
<router-link :to="{name: 'PlanDelete', params: {id: row.data.id}}">
|
||||
<trash2-icon size="15" class="icon icon-trash"></trash2-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
@@ -96,42 +96,8 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
plans: [
|
||||
{
|
||||
id: '1',
|
||||
type: 'plans',
|
||||
attributes: {
|
||||
name: 'Starter Plan',
|
||||
status: 1,
|
||||
price: 9.99,
|
||||
capacity: '200GB',
|
||||
subscribers: 172,
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'plans',
|
||||
attributes: {
|
||||
name: 'Professional Plan',
|
||||
status: 0,
|
||||
price: 19.99,
|
||||
capacity: '500GB',
|
||||
subscribers: 1929,
|
||||
}
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'plans',
|
||||
attributes: {
|
||||
name: 'Business Plan',
|
||||
status: 1,
|
||||
price: 44.99,
|
||||
capacity: '1TB',
|
||||
subscribers: 389,
|
||||
}
|
||||
},
|
||||
],
|
||||
isLoading: true,
|
||||
plans: undefined,
|
||||
columns: [
|
||||
{
|
||||
label: 'Plan',
|
||||
@@ -172,11 +138,11 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/*axios.get('/api/plans')
|
||||
axios.get('/api/plans')
|
||||
.then(response => {
|
||||
this.plans = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -71,30 +71,16 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isLoading: true,
|
||||
plan: undefined,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.plan = {
|
||||
id: '1',
|
||||
type: 'plans',
|
||||
attributes: {
|
||||
name: 'Starter Plan',
|
||||
description: 'This plan fits for every storage starter.',
|
||||
status: 1,
|
||||
price: 9.99,
|
||||
capacity: 200,
|
||||
subscribers: 172,
|
||||
}
|
||||
}
|
||||
|
||||
/*axios.get('/api/gateway/' + this.$route.params.name)
|
||||
axios.get('/api/plans/' + this.$route.params.id)
|
||||
.then(response => {
|
||||
this.user = response.data.data
|
||||
this.plan = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -111,7 +111,9 @@
|
||||
|
||||
// Send request to get user token
|
||||
axios
|
||||
.post('/api/plans/create', this.plan)
|
||||
.post('/api/plans/store', {
|
||||
attributes: this.plan
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
@@ -124,7 +126,7 @@
|
||||
})
|
||||
|
||||
// Go to User page
|
||||
this.$router.push({name: 'UserDetail', params: {id: response.data.data.id}})
|
||||
this.$router.push({name: 'PlanSettings', params: {id: response.data.data.id}})
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
},
|
||||
methods: {
|
||||
changeStatus(val) {
|
||||
this.$updateText('/plans/' + this.$route.params.id + '/update', 'state', val)
|
||||
this.$updateText('/plans/' + this.$route.params.id + '/update', 'status', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,12 +36,12 @@
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.data.attributes.storage.used }}%
|
||||
{{ row.relationships.storage.data.attributes.used }}%
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.data.attributes.storage.capacity_formatted }}
|
||||
{{ row.relationships.storage.data.attributes.capacity_formatted }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
@@ -9,16 +9,16 @@
|
||||
<!--User thumbnail-->
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<img :src="user.attributes.avatar" :alt="user.attributes.name">
|
||||
<img :src="user.data.attributes.avatar" :alt="user.data.attributes.name">
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">
|
||||
{{ user.attributes.name }}
|
||||
{{ user.data.attributes.name }}
|
||||
<ColorLabel color="purple">
|
||||
{{ user.attributes.role }}
|
||||
{{ user.data.attributes.role }}
|
||||
</ColorLabel>
|
||||
</b>
|
||||
<span class="email">{{ user.attributes.email }}</span>
|
||||
<span class="email">{{ user.data.attributes.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'UserDelete'}" v-if="user.attributes.name !== app.user.name"
|
||||
<router-link replace :to="{name: 'UserDelete'}" v-if="user.data.attributes.name !== app.user.name"
|
||||
class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<trash2-icon size="17"></trash2-icon>
|
||||
@@ -120,7 +120,7 @@
|
||||
fetchUser() {
|
||||
axios.get('/api/users/' + this.$route.params.id + '/detail')
|
||||
.then(response => {
|
||||
this.user = response.data.data
|
||||
this.user = response.data
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
@@ -8,12 +8,16 @@
|
||||
:title="$t('user_box_role.title')"
|
||||
:description="$t('user_box_role.description')"
|
||||
>
|
||||
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role" rules="required">
|
||||
<ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form"
|
||||
class="form block-form">
|
||||
<ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role"
|
||||
rules="required">
|
||||
<label>{{ $t('admin_page_user.select_role') }}:</label>
|
||||
<div class="single-line-form">
|
||||
<SelectInput v-model="userRole" :options="roles" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
|
||||
<SelectInput v-model="userRole" :options="roles"
|
||||
:placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
|
||||
<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
|
||||
button-style="theme" class="submit-button">
|
||||
{{ $t('admin_page_user.save_role') }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
@@ -25,8 +29,7 @@
|
||||
|
||||
<!--Personal Information-->
|
||||
<PageTabGroup>
|
||||
<ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
|
||||
<div class="form block-form">
|
||||
<b class="form-group-label">{{ $t('admin_page_user.label_person_info') }}</b>
|
||||
<div class="wrapper-inline">
|
||||
|
||||
@@ -34,25 +37,99 @@
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.attributes.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled />
|
||||
<input :value="user.data.attributes.email"
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
|
||||
v-slot="{ errors }">
|
||||
<input :value="user.attributes.name"
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.data.attributes.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
|
||||
<!--Billing Information-->
|
||||
<PageTabGroup>
|
||||
<div class="form block-form">
|
||||
<b class="form-group-label">Billing Information</b>
|
||||
<div class="block-wrapper">
|
||||
<label>Name:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_name"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Address:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_address"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</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>
|
||||
<div class="block-wrapper">
|
||||
<label>City:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_city"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Postal Code:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_postal_code"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Country:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_country"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Phone Number:</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="user.relationships.settings.data.attributes.billing_phone_number"
|
||||
type="text"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</template>
|
||||
@@ -66,7 +143,7 @@
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
import axios from 'axios'
|
||||
|
||||
@@ -150,7 +227,6 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@@ -1,27 +1,34 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<PageTab v-if="invoices">
|
||||
<PageTabGroup>
|
||||
<DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
|
||||
<template scope="{ row }">
|
||||
<tr>
|
||||
<td>
|
||||
<a :href="'/invoice/' + row.data.attributes.token" target="_blank" class="cell-item">
|
||||
{{ row.data.attributes.order }}
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
${{ row.attributes.total }}
|
||||
${{ row.data.attributes.total }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.plan }}
|
||||
{{ row.data.attributes.bag[0].description }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.created_at_formatted }}
|
||||
{{ row.data.attributes.created_at_formatted }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<download-cloud-icon size="15" class="icon"></download-cloud-icon>
|
||||
<a :href="'/invoice/' + row.data.attributes.token" target="_blank">
|
||||
<external-link-icon size="15" class="icon"></external-link-icon>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -35,124 +42,40 @@
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
|
||||
import {DownloadCloudIcon} from "vue-feather-icons";
|
||||
import {ExternalLinkIcon} from "vue-feather-icons";
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'UserStorage',
|
||||
name: 'UserInvoices',
|
||||
components: {
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
DatatableWrapper,
|
||||
DownloadCloudIcon,
|
||||
ExternalLinkIcon,
|
||||
},
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
],
|
||||
isLoading: true,
|
||||
invoices: undefined,
|
||||
columns: [
|
||||
{
|
||||
label: 'Invoice Number',
|
||||
field: 'data.attributes.total',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Total',
|
||||
field: 'attributes.total',
|
||||
field: 'data.attributes.total',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Plan',
|
||||
field: 'attributes.plan',
|
||||
field: 'data.attributes.plan',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Payed',
|
||||
field: 'attributes.created_at',
|
||||
field: 'data.attributes.created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
@@ -164,11 +87,11 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
/*axios.get('/api/users/' + this.$route.params.id + '/storage')
|
||||
axios.get('/api/users/' + this.$route.params.id + '/invoices')
|
||||
.then(response => {
|
||||
this.storage = response.data.data
|
||||
this.invoices = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user