complete Complete User Request Submission section RAD-1
This commit is contained in:
@@ -0,0 +1,138 @@
|
||||
<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="[
|
||||
'placeholder:!text-sm !text-sm',
|
||||
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="[
|
||||
'placeholder:!text-sm !text-sm',
|
||||
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="[
|
||||
'placeholder:!text-sm !text-sm',
|
||||
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="flex pt-2 !text-sm !font-light" disabled id="email" fluid />
|
||||
</section>
|
||||
</FormField>
|
||||
<Button type="submit" :loading="loading" severity="secondary" label="ذخیره اطلاعات" />
|
||||
</Form>
|
||||
</Fieldset>
|
||||
</div>
|
||||
</section>
|
||||
</master>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user