SaaS frontend update

This commit is contained in:
carodej
2020-05-29 17:37:23 +02:00
parent 252b6fd0bf
commit 61a8849e2d
21 changed files with 1975 additions and 112 deletions
@@ -0,0 +1,91 @@
<template>
<div class="page-tab">
<!--Personal Information-->
<div class="page-tab-group">
<ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
<b class="form-group-label">Stripe Secret</b>
<!---->
<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 placeholder="Paste stripe client id here" type="text" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<!---->
<div class="block-wrapper">
<label>Stripe Secret</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="StripeSecret" rules="required"
v-slot="{ errors }">
<input placeholder="Paste stripe secret here" type="text" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
</ValidationObserver>
</div>
</div>
</template>
<script>
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'
import { mapGetters } from 'vuex'
import {events} from "@/bus"
import axios from 'axios'
export default {
name: 'UserDetail',
props: [
'user'
],
components: {
ValidationProvider,
ValidationObserver,
StorageItemDetail,
SelectInput,
ButtonBase,
SetupBox,
required,
},
data() {
return {
isLoading: false,
isSendingRequest: false,
}
},
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@import '@assets/vue-file-manager/_forms';
.page-tab {
.page-tab-group {
margin-bottom: 45px;
}
}
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>
@@ -0,0 +1,199 @@
<template>
<div class="page-tab">
<!--Change role-->
<div class="page-tab-group">
<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>
</div>
</div>
</template>
<script>
import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
import {DownloadCloudIcon} from "vue-feather-icons";
import axios from 'axios'
export default {
name: 'UserStorage',
components: {
DatatableWrapper,
DownloadCloudIcon,
},
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';
.page-tab {
.page-tab-group {
margin-bottom: 45px;
}
}
.block-form {
max-width: 100%;
}
@media only screen and (max-width: 960px) {
}
@media (prefers-color-scheme: dark) {
}
</style>