mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-25 10:20:38 +00:00
frontend update
This commit is contained in:
carodej
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<div id="page-content" class="medium-width" v-if="! isLoading">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title"/>
|
||||
<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
|
||||
|
||||
<div class="content-page">
|
||||
|
||||
<!--User thumbnail-->
|
||||
<div class="user-thumbnail">
|
||||
<div class="avatar">
|
||||
<img :src="gateway.attributes.avatar" :alt="gateway.attributes.gateway">
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">{{ gateway.attributes.gateway }}</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">
|
||||
<div class="icon">
|
||||
<settings-icon size="17"></settings-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Settings
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<router-link replace :to="{name: 'GatewayTransactions', params: {name: gateway.attributes.type}}"
|
||||
class="menu-list-item link">
|
||||
<div class="icon">
|
||||
<credit-card-icon size="17"></credit-card-icon>
|
||||
</div>
|
||||
<div class="label">
|
||||
Transactions
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!--Router Content-->
|
||||
<router-view :gateway="gateway"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loader" v-if="isLoading">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CreditCardIcon, SettingsIcon} 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: {
|
||||
SettingsIcon,
|
||||
CreditCardIcon,
|
||||
SectionTitle,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
Spinner,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
gateway: undefined,
|
||||
}
|
||||
},
|
||||
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)
|
||||
.then(response => {
|
||||
this.user = response.data.data
|
||||
this.isLoading = false
|
||||
})*/
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.user-thumbnail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.avatar {
|
||||
margin-right: 20px;
|
||||
|
||||
img {
|
||||
line-height: 0;
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
@include font-size(17);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.email {
|
||||
color: $text-muted;
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.user-thumbnail {
|
||||
|
||||
.info {
|
||||
|
||||
.email {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<ValidationObserver v-if="gateway.attributes.type === '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"/>
|
||||
</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>
|
||||
<SwitchInput @input="$updateText('/gateways/paypal', 'sandbox', paypal.sandbox)" v-model="paypal.sandbox" class="switch" :state="paypal.sandbox"/>
|
||||
</div>
|
||||
<small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup>
|
||||
<b class="form-group-label">PayPal Secrets</b>
|
||||
|
||||
<!--Paypal Client ID-->
|
||||
<div class="block-wrapper">
|
||||
<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" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Paypal Secret-->
|
||||
<div class="block-wrapper">
|
||||
<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" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Paypal Webhook ID-->
|
||||
<div class="block-wrapper">
|
||||
<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" />
|
||||
<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">
|
||||
<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"/>
|
||||
</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>
|
||||
<SwitchInput @input="$updateText('/gateways/stripe', 'sandbox', stripe.sandbox)" v-model="stripe.sandbox" class="switch" :state="stripe.sandbox"/>
|
||||
</div>
|
||||
<small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup>
|
||||
<b class="form-group-label">Stripe Secret</b>
|
||||
|
||||
<!--Stripe Client ID-->
|
||||
<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" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--Stripe Secret-->
|
||||
<div class="block-wrapper">
|
||||
<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" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</ValidationObserver>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SwitchInput from '@/components/Others/Forms/SwitchInput'
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import StorageItemDetail from '@/components/Others/StorageItemDetail'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import SetupBox from '@/components/Others/Forms/SetupBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
|
||||
export default {
|
||||
name: 'GatewaySettings',
|
||||
props: [
|
||||
'gateway'
|
||||
],
|
||||
components: {
|
||||
SwitchInput,
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
StorageItemDetail,
|
||||
SelectInput,
|
||||
ButtonBase,
|
||||
SetupBox,
|
||||
required,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSendingRequest: false,
|
||||
paypal: {
|
||||
status: 1,
|
||||
sandbox: 0,
|
||||
client_id: '',
|
||||
secret: '',
|
||||
webhook: '',
|
||||
},
|
||||
stripe: {
|
||||
status: 0,
|
||||
sandbox: 0,
|
||||
client_id: '',
|
||||
secret: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,194 @@
|
||||
<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>
|
||||
<span class="cell-item">
|
||||
{{ row.attributes.plan }}
|
||||
</span>
|
||||
</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 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: 'GatewayTransactions',
|
||||
components: {
|
||||
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/',
|
||||
},
|
||||
},
|
||||
{
|
||||
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/',
|
||||
},
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
label: 'Total',
|
||||
field: 'attributes.total',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Plan',
|
||||
field: 'attributes.plan',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Payed',
|
||||
field: 'attributes.created_at',
|
||||
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>
|
||||
Reference in New Issue
Block a user