frontend/backend update

This commit is contained in:
carodej
2020-06-05 16:48:11 +02:00
parent ca14838212
commit cffdc3ced9
67 changed files with 3611 additions and 1136 deletions
@@ -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>
+1 -1
View File
@@ -134,7 +134,7 @@
},
methods: {
changeStatus(val, id) {
this.$updateText('/plans/' + id + '/update', 'status', val)
this.$updateText('/plans/' + id + '/update', 'is_active', val)
}
},
created() {
+6 -7
View File
@@ -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>
+13
View File
@@ -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 -1
View File
@@ -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">