130 lines
7.1 KiB
Vue
130 lines
7.1 KiB
Vue
<script setup>
|
||
import {onMounted, reactive, ref} from "vue";
|
||
import {useToast} from "primevue";
|
||
import Master from "../../../layouts/master.vue";
|
||
import {useGlobalStore} from "../../../store/Global.js";
|
||
|
||
const src = ref(null);
|
||
const file = ref({});
|
||
const loading = ref(false);
|
||
const isUpload = ref(false);
|
||
const loadingUpload = ref(false);
|
||
|
||
const toast = useToast();
|
||
const globalStore = useGlobalStore();
|
||
const user_form = ref({
|
||
name: '',
|
||
first_name: '',
|
||
last_name: '',
|
||
});
|
||
|
||
onMounted(() => {
|
||
user_form.value = {
|
||
name: globalStore.current_user?.name ?? '',
|
||
first_name: globalStore.current_user?.first_name ?? '',
|
||
last_name: globalStore.current_user?.last_name ?? '',
|
||
};
|
||
})
|
||
const errors = ref([]);
|
||
const onFileSelect = (event) => {
|
||
isUpload.value = false;
|
||
file.value = event.files[0];
|
||
const reader = new FileReader();
|
||
|
||
reader.onload = async (e) => {
|
||
src.value = e.target.result;
|
||
};
|
||
reader.readAsDataURL(file.value);
|
||
}
|
||
|
||
const onRemoveTemplatingFile = () => {
|
||
src.value = null;
|
||
file.value = {};
|
||
};
|
||
|
||
const onFormSubmit = () => {
|
||
loading.value = true;
|
||
axios.post(`/admin/setting-profile/update-data/${globalStore.current_user.id}` , user_form.value ).then(res => {
|
||
toast.add({ severity: 'success', summary: 'اطلاعات شما با موفقیت ثبت شد.', life: 3000 });
|
||
errors.value = [];
|
||
loading.value = false;
|
||
globalStore.current_user.name = res.data.name;
|
||
globalStore.current_user.first_name = res.data.first_name;
|
||
globalStore.current_user.last_name = res.data.last_name;
|
||
}).catch(error => {
|
||
errors.value = error.response.data.errors;
|
||
loading.value = false;
|
||
});
|
||
};
|
||
|
||
|
||
const uploadProfile = () => {
|
||
loadingUpload.value = true;
|
||
const form = new FormData();
|
||
form.append('file' , file.value );
|
||
axios.post('/admin/setting-profile/update-avatar' , form ).then(res => {
|
||
toast.add({ severity: 'success', summary: 'پروفایل شما با موفقیت آپلود شد', life: 3000 });
|
||
isUpload.value = true;
|
||
loadingUpload.value = false;
|
||
globalStore.current_user.profile_url = res.data.profile_url ?? '';
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<master>
|
||
<section class="grid grid-cols-[1fr] pb-10 gap-4 px-10 max-lg:px-4">
|
||
<div class="!w-1/2 max-lg:!w-full !m-auto grid grid-cols-a text-client-Fontcolor justify-center text-center">
|
||
<i class="fi fi-rr-user-pen flex text-5xl m-auto"></i>
|
||
<h4 class="font-extrabold text-2xl mt-4">ویرایش اطلاعات</h4>
|
||
<p class="leading-6 text-sm font-light mt-2">برای تغییر آواتار خود، تصویر مورد نظر را از دستگاه خود انتخاب کرده و بارگذاری کنید. پس از بارگذاری، آواتار جدید شما به‌طور خودکار در پروفایل به‌روز می‌شود.</p>
|
||
</div>
|
||
<div class="card grid grid-cols-1 !w-[30rem] max-lg:!w-full !m-auto justify-center">
|
||
<div class="card flex flex-col items-center gap-6 !mb-8">
|
||
<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" chooseLabel="انتخاب آواتار" class="p-button-outlined flex flex-row-reverse !text-xs !text-white !bg-client-primary" />
|
||
<img v-if="!src && globalStore.current_user.profile_url" :src="globalStore.current_user.profile_url" alt="Image" class="shadow-md rounded-xl w-auto max-h-28 object-contain" />
|
||
<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-auto max-h-28 object-contain" :style="!isUpload ? {filter: 'grayscale(100%)' } : {}" />
|
||
<div v-if="!isUpload" class="grid grid-cols-2a gap-2 -mt-3 items-center justify-center">
|
||
<Button v-if="src" icon="fi fi-rr-trash" :pt="{icon: 'flex'}" @click="onRemoveTemplatingFile()" outlined severity="danger" />
|
||
<Button v-if="src" icon="fi fi-rr-cloud-upload" :pt="{icon: 'flex text-sm'}" label=" آپلود آواتار"
|
||
class="!text-xs flex flex-row-reverse !py-3 !font-light"
|
||
@click="uploadProfile()" :loading="loadingUpload" outlined severity="secondary" />
|
||
</div>
|
||
</div>
|
||
<Fieldset legend="ویرایش حساب شما" pt:legend="!text-sm !rounded-lg !border-[1px] !border-gray-200"
|
||
pt:root:class="!border-[1px] !rounded-xl"
|
||
pt:content:class="grid grid-cols-1 !p-6 !pt-4 flex justify-center">
|
||
<Form @submit="onFormSubmit" class="grid grid-cols-1 gap-4 w-full !border-0 !text-sm">
|
||
<FormField v-slot="$field" name="name" initialValue="" class="flex flex-col gap-1">
|
||
<label>نام کاربری</label>
|
||
<InputText type="text" :class="errors?.name && !errors.name ? 'p-invalid' : ''" v-model="user_form.name" placeholder="نام کاربری را وارد کنید" />
|
||
<Message v-if="errors?.name"
|
||
severity="error" size="small" variant="simple">{{ errors?.name[0] }}</Message>
|
||
</FormField>
|
||
<FormField v-slot="$field" name="first_name" initialValue="" class="flex flex-col gap-1">
|
||
<label>نام کوچک</label>
|
||
<InputText type="text" :class="errors?.first_name && !errors.first_name ? 'p-invalid' : ''" v-model="user_form.first_name" placeholder="نام کوچک خود را وارد کنید" />
|
||
<Message v-if="errors?.first_name"
|
||
severity="error" size="small" variant="simple">{{ errors?.first_name[0] }}</Message>
|
||
</FormField>
|
||
<FormField v-slot="$field" name="last_name" initialValue="" class="flex flex-col gap-1">
|
||
<label>نام خانوادگی</label>
|
||
<InputText type="text" :class="errors?.last_name && !errors.last_name ? 'p-invalid' : ''" v-model="user_form.last_name" placeholder="نام کوچک خود را وارد کنید" />
|
||
<Message v-if="errors?.last_name"
|
||
severity="error" size="small" variant="simple">{{ errors?.last_name[0] }}</Message>
|
||
</FormField>
|
||
<FormField v-slot="$field" asChild name="email" :initialValue="globalStore.current_user.email">
|
||
<section class="flex flex-col gap-2">
|
||
<InputText type="email" class="!font-light" disabled id="email" fluid />
|
||
</section>
|
||
</FormField>
|
||
<Button type="submit" :loading="loading" severity="secondary" label="ذخیره اطلاعات" />
|
||
</Form>
|
||
</Fieldset>
|
||
</div>
|
||
</section>
|
||
</master>
|
||
</template>
|
||
|