196 lines
10 KiB
Vue
196 lines
10 KiB
Vue
<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" @click="changeAvatar" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange">
|
||
Изменить фото профиля
|
||
</button>
|
||
<button v-else @click="removeAvatar" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red">
|
||
Удалить фото
|
||
</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" @click="changeBanner" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-orange">
|
||
Изменить баннер профиля
|
||
</button>
|
||
<button v-else @click="removeBanner" class="hover:underline mt-2 text-left lg:mt-5 default lg:text-lg text-red">
|
||
Удалить баннер
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<form @submit.prevent="submit" class="mt-10 grid gap-4 lg:gap-10 grid-cols-1 lg:grid-cols-2">
|
||
<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>
|
||
<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="flex flex-col">
|
||
<textarea-input label="О себе" v-model="form.about" :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="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 Layout from '@/Shared/Layout'
|
||
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
|
||
import LoadingButton from "@/Shared/Form/LoadingButton";
|
||
import UserAvatar from '@/Shared/Misc/UserAvatar'
|
||
import UserBanner from '@/Shared/Misc/UserBanner'
|
||
import MetaHead from '@/Shared/MetaHead'
|
||
import TextInput from '@/Shared/Form/TextInput'
|
||
import TextareaInput from '@/Shared/Form/TextareaInput'
|
||
import { useForm } from "@inertiajs/inertia-vue3";
|
||
import { Inertia } from "@inertiajs/inertia";
|
||
import { toRefs } from "vue";
|
||
|
||
export default {
|
||
layout: Layout,
|
||
components: {
|
||
MetaHead,
|
||
UserAvatar,
|
||
UserBanner,
|
||
TextInput,
|
||
TextareaInput,
|
||
LoadingButton,
|
||
SettingsMenu,
|
||
},
|
||
props: {
|
||
user: Object,
|
||
},
|
||
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',
|
||
})
|
||
}
|
||
},
|
||
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,
|
||
date_of_birth: user.value.date_of_birth,
|
||
about: user.value.about,
|
||
password: null,
|
||
});
|
||
|
||
const submit = () => {
|
||
form.put(route("users.update", user.value.id));
|
||
};
|
||
|
||
return { form, submit }
|
||
},
|
||
}
|
||
</script>
|