nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-21 17:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend update

Browse Source
This commit is contained in:
carodej
2020-06-03 10:58:44 +02:00
parent 331ee52ea3
commit ca14838212
60 changed files with 1871 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
resources/js/views/User/Settings.vue Normal file
View File

@@ -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>