mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
frontend update
This commit is contained in:
carodej
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<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.data.attributes.total }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.data.attributes.bag[0].description }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-item">
|
||||
{{ row.data.attributes.created_at_formatted }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<a :href="'/invoice/' + row.data.attributes.token" target="_blank">
|
||||
<external-link-icon size="15" class="icon"></external-link-icon>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</DatatableWrapper>
|
||||
</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: 'UserInvoices',
|
||||
components: {
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
DatatableWrapper,
|
||||
ExternalLinkIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: true,
|
||||
invoices: undefined,
|
||||
columns: [
|
||||
{
|
||||
label: 'Invoice Number',
|
||||
field: 'data.attributes.total',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Total',
|
||||
field: 'data.attributes.total',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Plan',
|
||||
field: 'data.attributes.plan',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: 'Payed',
|
||||
field: 'data.attributes.created_at',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: this.$t('admin_page_user.table.action'),
|
||||
field: 'data.action',
|
||||
sortable: false
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
axios.get('/api/user/invoices')
|
||||
.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>
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div class="page-tab">
|
||||
<div class="page-tab-group">
|
||||
<ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_email') }}</label>
|
||||
<div class="input-wrapper">
|
||||
<input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email" disabled/>
|
||||
</div>
|
||||
</div>
|
||||
<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 @keyup="$updateText('/user/profile', 'name', name)" v-model="name"
|
||||
:placeholder="$t('page_registration.placeholder_name')" type="text"
|
||||
:class="{'is-error': errors[0]}"/>
|
||||
<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 MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import ThemeLabel from '@/components/Others/ThemeLabel'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
ButtonBase,
|
||||
ThemeLabel,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
},
|
||||
watch: {
|
||||
name: debounce(function (val) {
|
||||
if (val === '') return
|
||||
|
||||
this.$store.commit('UPDATE_NAME', val)
|
||||
}, 300),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.app) {
|
||||
this.name = this.app.user.name
|
||||
this.avatar = this.app.user.avatar
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.form {
|
||||
.button-base {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<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>
|
||||
<div class="input-wrapper">
|
||||
<input :value="userInfo.email"
|
||||
:placeholder="$t('page_registration.placeholder_email')"
|
||||
type="email"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>{{ $t('page_registration.label_name') }}</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="changeUserName"
|
||||
v-model="userInfo.name"
|
||||
:placeholder="$t('page_registration.placeholder_name')"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup v-if="billingInfo">
|
||||
<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 @keyup="$updateText('/user/relationships/settings', 'billing_name', billingInfo.billing_name)"
|
||||
v-model="billingInfo.billing_name"
|
||||
placeholder="Type your billing name"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Address:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/relationships/settings', 'billing_address', billingInfo.billing_address)"
|
||||
v-model="billingInfo.billing_address"
|
||||
placeholder="Type your billing address"
|
||||
type="text"
|
||||
/>
|
||||
</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>
|
||||
<div class="block-wrapper">
|
||||
<label>City:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/relationships/settings', 'billing_city', billingInfo.billing_city)"
|
||||
v-model="billingInfo.billing_city"
|
||||
placeholder="Type your billing city"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Postal Code:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/relationships/settings', 'billing_postal_code', billingInfo.billing_postal_code)"
|
||||
v-model="billingInfo.billing_postal_code"
|
||||
placeholder="Type your billing postal code"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Country:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/relationships/settings', 'billing_country', billingInfo.billing_country)"
|
||||
v-model="billingInfo.billing_country"
|
||||
placeholder="Type your billing country"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-wrapper">
|
||||
<label>Phone Number:</label>
|
||||
<div class="input-wrapper">
|
||||
<input @keyup="$updateText('/user/relationships/settings', 'billing_phone_number', billingInfo.billing_phone_number)"
|
||||
v-model="billingInfo.billing_phone_number"
|
||||
placeholder="Type your billing phone number"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import ThemeLabel from '@/components/Others/ThemeLabel'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
PageTabGroup,
|
||||
PageTab,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
MobileHeader,
|
||||
PageHeader,
|
||||
ButtonBase,
|
||||
ThemeLabel,
|
||||
required,
|
||||
},
|
||||
/* watch: {
|
||||
'user.name': debounce(function (val) {
|
||||
if (val === '') return
|
||||
|
||||
this.$store.commit('UPDATE_NAME', val)
|
||||
}, 300),
|
||||
},*/
|
||||
data() {
|
||||
return {
|
||||
userInfo: undefined,
|
||||
billingInfo: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeUserName() {
|
||||
this.$store.commit('UPDATE_NAME', this.userInfo.name)
|
||||
this.$updateText('/user/profile', 'name', this.userInfo.name)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.userInfo = {
|
||||
name: this.user.data.attributes.name,
|
||||
email: this.user.data.attributes.email
|
||||
}
|
||||
|
||||
this.billingInfo = {
|
||||
billing_name: this.user.relationships.settings.data.attributes.billing_name,
|
||||
billing_address: this.user.relationships.settings.data.attributes.billing_address,
|
||||
billing_state: this.user.relationships.settings.data.attributes.billing_state,
|
||||
billing_city: this.user.relationships.settings.data.attributes.billing_city,
|
||||
billing_postal_code: this.user.relationships.settings.data.attributes.billing_postal_code,
|
||||
billing_country: this.user.relationships.settings.data.attributes.billing_country,
|
||||
billing_phone_number: this.user.relationships.settings.data.attributes.billing_phone_number,
|
||||
}
|
||||
}
|
||||
}
|
||||
</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