359 lines
17 KiB
Vue
Executable File
359 lines
17 KiB
Vue
Executable File
<template>
|
||
<meta-head title="Мои настройки"></meta-head>
|
||
|
||
<div class="xl:container xl:mx-auto px-2 md:px-3">
|
||
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
|
||
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
|
||
<settings-menu />
|
||
|
||
<div class="col-span-4">
|
||
<div class="m-4 lg:m-8">
|
||
<div class="flex flex-col xl:flex-row">
|
||
<div class="xl:mr-24">
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 mr-5">
|
||
<user-avatar :user="user" class="w-20 h-20 text-lg" />
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<p class="text-base lg:text-xl font-semibold text-gray">
|
||
{{ user.name }}
|
||
</p>
|
||
<p class="lg:mt-1 text-base text-gray-light">
|
||
@{{ user.username }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<input ref="fileavatar" class="hidden"
|
||
accept="image/png, image/jpeg, image/jpg" type="file"
|
||
@change="previewFiles"
|
||
>
|
||
<input ref="filebanner" class="hidden"
|
||
accept="image/png, image/jpeg, image/jpg" type="file"
|
||
@change="previewFilesBanner"
|
||
>
|
||
<div>
|
||
<div v-if="$page.props.errors.avatar" class="text-red lg:text-lg">
|
||
{{ $page.props.errors.avatar }}
|
||
</div>
|
||
<button v-if="!user.photo_path" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange"
|
||
@click="changeAvatar"
|
||
>
|
||
Изменить фото профиля
|
||
</button>
|
||
<button v-else class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red"
|
||
@click="removeAvatar"
|
||
>
|
||
Удалить фото
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5 xl:mt-0">
|
||
<div class="flex items-center">
|
||
<div class="flex-shrink-0 mr-5">
|
||
<user-banner class="w-60 lg:w-96 h-20 rounded-xl bg-indigo-300" :user="user"
|
||
size="banner"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div v-if="$page.props.errors.banner" class="text-red lg:text-lg">
|
||
{{ $page.props.errors.banner }}
|
||
</div>
|
||
<button v-if="!user.banner_path" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange"
|
||
@click="changeBanner"
|
||
>
|
||
Изменить баннер профиля
|
||
</button>
|
||
<button v-else class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red"
|
||
@click="removeBanner"
|
||
>
|
||
Удалить баннер
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form class="border-b border-indigo-400 pb-10 mt-10 grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-7 gap-5 lg:gap-10 items-start" @submit.prevent="submitPassword">
|
||
<div class="2xl:col-span-3 flex flex-col">
|
||
<text-input v-model="passwordForm.old_password" :error="passwordForm.errors.old_password"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Старый пароль"
|
||
type="password"
|
||
/>
|
||
</div>
|
||
<div class="2xl:col-span-3 flex flex-col">
|
||
<text-input v-model="passwordForm.new_password" :error="passwordForm.errors.new_password"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Новый пароль"
|
||
type="password"
|
||
/>
|
||
</div>
|
||
<div class="lg:col-span-2 2xl:col-span-1 2xl:mt-8">
|
||
<loading-button :loading="form.processing" class="transition shadow-none hover:shadow-classic2 inline-flex items-center px-3 py-2.5 w-full justify-center text-base rounded-md text-white bg-orange focus:outline-none"
|
||
type="submit"
|
||
>
|
||
Обновить
|
||
</loading-button>
|
||
</div>
|
||
</form>
|
||
|
||
<form class="mt-10 grid gap-4 lg:gap-10 grid-cols-1 lg:grid-cols-2" @submit.prevent="submit">
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.first_name" :error="form.errors.first_name"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Имя"
|
||
/>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.last_name" :error="form.errors.last_name"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Фамилия"
|
||
/>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.username" :error="form.errors.username"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Тег"
|
||
/>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.date_of_birth" :error="form.errors.date_of_birth"
|
||
type="date" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
|
||
label="Дата рождения"
|
||
/>
|
||
</div>
|
||
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.email" :error="form.errors.email"
|
||
type="email" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
|
||
label="Почта"
|
||
/>
|
||
</div>
|
||
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.phone" :error="form.errors.phone"
|
||
type="tel" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
|
||
label="Телефон"
|
||
/>
|
||
</div>
|
||
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.inn" :error="form.errors.inn"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
|
||
label="ИНН"
|
||
/>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.checking_account" :error="form.errors.checking_account"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
|
||
label="Расчетный счет"
|
||
/>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<text-input v-model="form.bik" :error="form.errors.bik"
|
||
class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
|
||
label="Бик банка"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<div class="text-gray-light text-lg mb-2">
|
||
Пол
|
||
</div>
|
||
<div class="flex space-x-6">
|
||
<div class="flex items-center">
|
||
<input id="user-sex-1" v-model="form.sex"
|
||
value="1" type="radio"
|
||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-sex-1" class="select-none ml-3 text-gray">Женский</label>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<input id="user-sex-2" v-model="form.sex"
|
||
value="2" type="radio"
|
||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-sex-2" class="select-none ml-3 text-gray">Мужской</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="lg:col-span-2">
|
||
<div class="text-gray-light text-lg mb-2">
|
||
Тип
|
||
</div>
|
||
<div class="flex space-x-6">
|
||
<div class="flex items-center">
|
||
<input id="user-type-1" v-model="form.type"
|
||
value="1" type="radio"
|
||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-type-1" class="select-none ml-3 text-gray">Физ. лицо</label>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<input id="user-type-2" v-model="form.type"
|
||
value="2" type="radio"
|
||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-type-2" class="select-none ml-3 text-gray">Самозанятый</label>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<input id="user-type-3" v-model="form.type"
|
||
value="3" type="radio"
|
||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-type-3" class="select-none ml-3 text-gray">Юридическое лицо</label>
|
||
</div>
|
||
|
||
<div class="flex items-center">
|
||
<input id="user-type-4" v-model="form.type"
|
||
value="4" type="radio"
|
||
class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-type-4" class="select-none ml-3 text-gray">ИП</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:col-span-2">
|
||
<div class="flex flex-col">
|
||
<textarea-input v-model="form.about" label="О себе"
|
||
:error="form.errors.about" class="focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md"
|
||
cols="30" rows="2"
|
||
></textarea-input>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lg:col-span-2">
|
||
<!-- <div class="text-gray-light text-lg mb-2">
|
||
Ограничить доступ
|
||
</div> -->
|
||
<div class="flex items-center">
|
||
<input id="user-private" v-model="form.private"
|
||
type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-private" class="select-none ml-3 text-gray">Включить эксклюзивный акаунт, доступ к контенту только по подписке</label>
|
||
</div>
|
||
<!-- <div class="flex items-center">
|
||
<input id="user-commercial" v-model="form.allow_adult_content"
|
||
type="checkbox" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
||
>
|
||
<label for="user-commercial" class="select-none ml-3 text-gray">Разрешить контент для взрослых</label>
|
||
</div> -->
|
||
</div>
|
||
|
||
<div class="flex flex-wrap -my-1 -mx-3">
|
||
<loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none"
|
||
type="submit"
|
||
>
|
||
Сохранить
|
||
</loading-button>
|
||
<!-- <button type="button"
|
||
class="mx-3 my-1 default text-lg text-orange"
|
||
>
|
||
Удалить аккаунт
|
||
</button> -->
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { useForm } from '@inertiajs/inertia-vue3'
|
||
import { Inertia } from '@inertiajs/inertia'
|
||
import { toRefs } from 'vue'
|
||
|
||
import Layout from '@/Shared/Layout.vue'
|
||
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
|
||
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
|
||
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
||
import UserBanner from '@/Shared/Misc/UserBanner.vue'
|
||
import MetaHead from '@/Shared/MetaHead.vue'
|
||
import TextInput from '@/Shared/Form/TextInput.vue'
|
||
import TextareaInput from '@/Shared/Form/TextareaInput.vue'
|
||
|
||
|
||
export default {
|
||
components: {
|
||
MetaHead,
|
||
UserAvatar,
|
||
UserBanner,
|
||
TextInput,
|
||
TextareaInput,
|
||
LoadingButton,
|
||
SettingsMenu,
|
||
},
|
||
layout: Layout,
|
||
props: {
|
||
user: Object,
|
||
},
|
||
setup(props) {
|
||
const { user } = toRefs(props)
|
||
const form = useForm({
|
||
first_name: user.value.first_name,
|
||
last_name: user.value.last_name,
|
||
username: user.value.username,
|
||
email: user.value.email,
|
||
phone: user.value.phone,
|
||
sex: user.value.sex,
|
||
type: user.value.type,
|
||
date_of_birth: user.value.date_of_birth,
|
||
about: user.value.about,
|
||
private: user.value.private,
|
||
inn: user.value.inn,
|
||
checking_account: user.value.checking_account,
|
||
bik: user.value.bik,
|
||
password: null,
|
||
})
|
||
|
||
const passwordForm = useForm({
|
||
old_password: null,
|
||
new_password: null,
|
||
})
|
||
|
||
const submit = () => {
|
||
form.put(route('users.update', user.value.id))
|
||
}
|
||
const submitPassword = () => {
|
||
passwordForm.put(route('users.update.password', user.value.id), {
|
||
onSuccess: () => passwordForm.reset(),
|
||
})
|
||
}
|
||
|
||
return { form, passwordForm, submit, submitPassword }
|
||
},
|
||
methods: {
|
||
previewFilesBanner(event){
|
||
const file = event.target.files[0]
|
||
Inertia.post(route('image.banner'), {
|
||
_method: 'put',
|
||
banner: file,
|
||
})
|
||
},
|
||
previewFiles(event){
|
||
const file = event.target.files[0]
|
||
Inertia.post(route('image.avatar'), {
|
||
_method: 'put',
|
||
avatar: file,
|
||
})
|
||
},
|
||
changeBanner(){
|
||
this.$refs.filebanner.click()
|
||
},
|
||
removeBanner(){
|
||
Inertia.post(route('image.banner.remove'), {
|
||
_method: 'delete',
|
||
})
|
||
},
|
||
changeAvatar(){
|
||
this.$refs.fileavatar.click()
|
||
},
|
||
removeAvatar(){
|
||
Inertia.post(route('image.avatar.remove'), {
|
||
_method: 'delete',
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|