vuefilemanager/resources/js/views/User/Settings.vue

<template>
    <PageTab>

		<div class="card shadow-card">
			<div class="form block-form">
                <FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
                <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
							   class="focus-border-theme input-dark"
						/>
                    </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"
							   class="focus-border-theme input-dark"
						/>
                    </div>
                </div>
            </div>
		</div>
		<div class="card shadow-card">
			<div class="form block-form">
                <FormLabel>{{$t('user_settings.timezone')}}</FormLabel>
                <div class="block-wrapper">
                    <label>GMT:</label>
                    <div class="input-wrapper">
                        <SelectInput @input="$updateText('/user/settings', 'timezone', userInfo.timezone)"
									 v-model="userInfo.timezone"
									 :default="userInfo.timezone"
									 :options="timezones"
									 :placeholder="$t('user_settings.timezone_plac')"/>
                    </div>
                </div>
            </div>
		</div>
		<div class="card shadow-card">
			<div class="form block-form">
                <FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
                <div class="block-wrapper">
                    <label>{{ $t('user_settings.name') }}:</label>
                    <div class="input-wrapper">
                        <input @keyup="$updateText('/user/settings', 'name', billingInfo.name)"
							   v-model="billingInfo.name"
							   :placeholder="$t('user_settings.name_plac')"
							   type="text"
							   class="focus-border-theme input-dark"
						/>
                    </div>
                </div>
                <div class="block-wrapper">
                    <label>{{ $t('user_settings.address') }}:</label>
                    <div class="input-wrapper">
                        <input @keyup="$updateText('/user/settings', 'address', billingInfo.address)"
							   v-model="billingInfo.address"
							   :placeholder="$t('user_settings.address_plac')"
							   type="text"
							   class="focus-border-theme input-dark"
						/>
                    </div>
                </div>
                <div class="wrapper-inline">
                    <div class="block-wrapper">
                        <label>{{ $t('user_settings.city') }}:</label>
                        <div class="input-wrapper">
                            <input @keyup="$updateText('/user/settings', 'city', billingInfo.city)"
								   v-model="billingInfo.city"
								   :placeholder="$t('user_settings.city_plac')"
								   type="text"
								   class="focus-border-theme input-dark"
							/>
                        </div>
                    </div>
                    <div class="block-wrapper">
                        <label>{{ $t('user_settings.postal_code') }}:</label>
                        <div class="input-wrapper">
                            <input @keyup="$updateText('/user/settings', 'postal_code', billingInfo.postal_code)"
								   v-model="billingInfo.postal_code"
								   :placeholder="$t('user_settings.postal_code_plac')"
								   type="text"
								   class="focus-border-theme input-dark"
							/>
                        </div>
                    </div>
                </div>
                <div class="block-wrapper">
                    <label>{{ $t('user_settings.country') }}:</label>
                    <div class="input-wrapper">
                        <SelectInput @input="$updateText('/user/settings', 'country', billingInfo.country)"
									 v-model="billingInfo.country"
									 :default="billingInfo.country"
									 :options="countries"
									 :placeholder="$t('user_settings.country_plac')"
						/>
                    </div>
                </div>
                <div class="block-wrapper">
                    <label>{{ $t('user_settings.state') }}:</label>
                    <div class="input-wrapper">
                        <input @keyup="$updateText('/user/settings', 'state', billingInfo.state)"
							   v-model="billingInfo.state"
							   :placeholder="$t('user_settings.state_plac')"
							   type="text"
							   class="focus-border-theme input-dark"
						/>
                        <small class="input-help">
                            State, county, province, or region.
                        </small>
                    </div>
                </div>
                <div class="block-wrapper">
                    <label>{{ $t('user_settings.phone_number') }}:</label>
                    <div class="input-wrapper">
                        <input @keyup="$updateText('/user/settings', 'phone_number', billingInfo.phone_number)"
							   v-model="billingInfo.phone_number"
							   :placeholder="$t('user_settings.phone_number_plac')"
							   type="text"
							   class="focus-border-theme input-dark"
						/>
                    </div>
                </div>
            </div>
		</div>
    </PageTab>
</template>

<script>
    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
    import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
    import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
    import PageTab from '/resources/js/components/Others/Layout/PageTab'
    import PageHeader from '/resources/js/components/Others/PageHeader'
    import ThemeLabel from '/resources/js/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: {
            ValidationProvider,
            ValidationObserver,
            PageTabGroup,
            MobileHeader,
            SelectInput,
            PageHeader,
            ButtonBase,
            ThemeLabel,
            FormLabel,
            required,
            PageTab,
        },
        computed: {
            ...mapGetters(['config', 'countries', 'timezones']),
        },
        data() {
            return {
                userInfo: undefined,
                billingInfo: undefined,
                isLoading: false,
            }
        },
        methods: {
            changeUserName() {
                this.$store.commit('UPDATE_NAME', this.userInfo.name)
                this.$updateText('/user/settings', 'name', this.userInfo.name)
            }
        },
        created() {

            this.userInfo = {
                timezone: this.user.data.relationships.settings.data.attributes.timezone,
                name: this.user.data.relationships.settings.data.attributes.name,
                email: this.user.data.attributes.email
            }

            this.billingInfo = {
                name: this.user.data.relationships.settings.data.attributes.name,
                address: this.user.data.relationships.settings.data.attributes.address,
                state: this.user.data.relationships.settings.data.attributes.state,
                city: this.user.data.relationships.settings.data.attributes.city,
                postal_code: this.user.data.relationships.settings.data.attributes.postal_code,
                country: this.user.data.relationships.settings.data.attributes.country,
                phone_number: this.user.data.relationships.settings.data.attributes.phone_number,
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '/resources/sass/vuefilemanager/_variables';
    @import '/resources/sass/vuefilemanager/_mixins';
    @import '/resources/sass/vuefilemanager/_forms';

    .block-form {
        max-width: 100%;
    }

</style>