Merge branch 'feature/show_profile' into 'develop'
Feature/show profile See merge request witel3/loan-facilities-expert!17
This commit is contained in:
yasaman aliakbari
@@ -23,7 +23,8 @@
|
||||
"passenger-boss": "رئیس مسافر",
|
||||
"transportation-assistance": "معاونت حمل و نقل",
|
||||
"manager": "مدیر کل",
|
||||
"change-password": "تغییر رمز عبور"
|
||||
"change-password": "تغییر رمز عبور",
|
||||
"edit-profile": "ویرایش پروفایل"
|
||||
},
|
||||
"Authorization": {
|
||||
"typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.",
|
||||
@@ -63,5 +64,11 @@
|
||||
"SubmitButton": {
|
||||
"button_while_submit": "در حال ثبت",
|
||||
"button_submit": "ثبت"
|
||||
},
|
||||
"UpdateProfile": {
|
||||
"error_invalid_email": "ایمیل نامعتبر است",
|
||||
"typography_edit_profile": "ویرایش پروفایل",
|
||||
"text_field_email": "ایمیل",
|
||||
"text_field_enter_your_password": "رمز عبور خود را وارد کنید"
|
||||
}
|
||||
}
|
||||
|
||||
282
src/components/dashboard/edit-profile/index.jsx
Normal file
282
src/components/dashboard/edit-profile/index.jsx
Normal file
@@ -0,0 +1,282 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import * as Yup from "yup";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import AvatarUpload from "@/core/components/AvatarUpload";
|
||||
import axios from "axios";
|
||||
import { UPDATE_PROFILE, UPDATE_AVATAR } from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import ImageResizer from "@/core/components/ImageConvertor";
|
||||
|
||||
const DashboardEditProfile = () => {
|
||||
const t = useTranslations();
|
||||
const { user, token, getUser, changeUser } = useUser();
|
||||
const { directionApp } = useDirection();
|
||||
|
||||
const editAvatar = async (avatar) => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
|
||||
if (avatar != null) {
|
||||
var resizedAvatar;
|
||||
resizedAvatar = await ImageResizer(avatar);
|
||||
formData.append("avatar", resizedAvatar);
|
||||
}
|
||||
|
||||
await axios.post(UPDATE_AVATAR, formData, {
|
||||
headers: {
|
||||
authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
Notifications(directionApp, error.response, t);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const handleSubmit = (values, { setSubmitting }) => {
|
||||
// const formData = new FormData();
|
||||
// formData.append("email", values.expert_email);
|
||||
// if (values.change_avatar !== false) {
|
||||
// editAvatar(values.expert_avatar)
|
||||
// .then(() => {
|
||||
// return axios.post(UPDATE_PROFILE, formData, {
|
||||
// headers: {
|
||||
// authorization: `Bearer ${token}`,
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// },
|
||||
// });
|
||||
// })
|
||||
// .then((response) => {
|
||||
// Notifications(directionApp, response, t);
|
||||
// getUser((data) => {
|
||||
// changeUser(data);
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setSubmitting(false);
|
||||
// });
|
||||
// } else {
|
||||
// axios
|
||||
// .post(UPDATE_PROFILE, formData, {
|
||||
// headers: {
|
||||
// authorization: `Bearer ${token}`,
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// Notifications(directionApp, response, t);
|
||||
// getUser((data) => {
|
||||
// changeUser(data);
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// Notifications(directionApp, error.response, t);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setSubmitting(false);
|
||||
// });
|
||||
// }
|
||||
};
|
||||
const initialValues = {
|
||||
expert_avatar: null,
|
||||
expert_email: user.expert_email,
|
||||
change_avatar: false,
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
expert_email: Yup.string().email(t("UpdateProfile.error_invalid_email")),
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<StyledForm
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleSubmit();
|
||||
}}
|
||||
>
|
||||
<Paper elevation={0}>
|
||||
<Stack spacing={3} sx={{ p: 5 }} component="div">
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("UpdateProfile.typography_edit_profile")}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<AvatarUpload
|
||||
user={user}
|
||||
setFieldValue={props.setFieldValue}
|
||||
valueAvatar="expert_avatar"
|
||||
changeFlag="change_avatar"
|
||||
/>
|
||||
</Box>
|
||||
<Grid container spacing={2} sx={{ pb: 2 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="username"
|
||||
label={t("text_field_username")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
error={
|
||||
props.touched.username && props.errors.username
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.username
|
||||
? props.errors.username
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="name"
|
||||
label={t("text_field_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
error={
|
||||
props.touched.name && props.errors.name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.name ? props.errors.name : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="email"
|
||||
label={t("text_field_name")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
error={
|
||||
props.touched.name && props.errors.name
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.name ? props.errors.name : null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="position"
|
||||
label={t("text_field_phone_number")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
error={
|
||||
props.touched.phone_number &&
|
||||
props.errors.phone_number
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="province_name"
|
||||
label={t("text_field_national_id_code")}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
size="small"
|
||||
error={
|
||||
props.touched.national_id_code &&
|
||||
props.errors.national_id_code
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
props.touched.national_id_code
|
||||
? props.errors.national_id_code
|
||||
: null
|
||||
}
|
||||
sx={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{props.isSubmitting
|
||||
? t("SubmitButton.button_while_submit")
|
||||
: t("SubmitButton.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</StyledForm>
|
||||
)}
|
||||
</Formik>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardEditProfile;
|
||||
128
src/core/components/AvatarUpload.jsx
Normal file
128
src/core/components/AvatarUpload.jsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { Avatar, Box, TextField } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
|
||||
const AvatarUpload = ({ user, setFieldValue, valueAvatar, changeFlag }) => {
|
||||
const [selectedImage, setSelectedImage] = useState(user.expert_avatar);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleImageChange = (event) => {
|
||||
const newImage = event.target?.files?.[0];
|
||||
if (newImage) {
|
||||
setSelectedImage(URL.createObjectURL(newImage));
|
||||
setFieldValue(valueAvatar, newImage);
|
||||
setFieldValue(changeFlag, true);
|
||||
} else {
|
||||
setSelectedImage("");
|
||||
setFieldValue(valueAvatar, null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteImage = () => {
|
||||
setSelectedImage("");
|
||||
setFieldValue(valueAvatar, null);
|
||||
setFieldValue(changeFlag, true);
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="label"
|
||||
htmlFor="avatar-upload"
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
width: "fit-content",
|
||||
height: "fit-content",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="div"
|
||||
className={`avatar-container ${isHovered ? "hovered" : ""}`}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: 150,
|
||||
height: 150,
|
||||
borderRadius: "50%",
|
||||
overflow: "hidden",
|
||||
transition: "transform 0.3s ease-in-out",
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
alt="User Avatar"
|
||||
src={selectedImage}
|
||||
sx={{
|
||||
width: 150,
|
||||
height: 150,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
}}
|
||||
/>
|
||||
{isHovered && (
|
||||
<Box
|
||||
component="div"
|
||||
className="avatar-overlay"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
transition: "transform 0.3s ease-in-out",
|
||||
transform: `scale(${isHovered ? 1 : 0})`,
|
||||
}}
|
||||
>
|
||||
{selectedImage ? (
|
||||
<DeleteIcon
|
||||
sx={{
|
||||
color: "#fff",
|
||||
width: 35,
|
||||
height: 35,
|
||||
}}
|
||||
onClick={handleDeleteImage}
|
||||
/>
|
||||
) : (
|
||||
<AddIcon
|
||||
sx={{
|
||||
color: "#fff",
|
||||
width: 35,
|
||||
height: 35,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<TextField
|
||||
id="avatar-upload"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
sx={{ display: "none" }}
|
||||
onChange={handleImageChange}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AvatarUpload;
|
||||
23
src/pages/dashboard/edit-profile/index.jsx
Normal file
23
src/pages/dashboard/edit-profile/index.jsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import DashboardEditProfile from "@/components/dashboard/edit-profile";
|
||||
import TitlePage from "@/core/components/TitlePage";
|
||||
import WithAuthMiddleware from "@/middlewares/WithoutAuth";
|
||||
import { parse } from "next-useragent";
|
||||
|
||||
export default function LoanFollowUp() {
|
||||
return (
|
||||
<WithAuthMiddleware>
|
||||
<TitlePage text="Dashboard.change_password" />
|
||||
<DashboardEditProfile />
|
||||
</WithAuthMiddleware>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps({ req, locale }) {
|
||||
const { isBot } = parse(req.headers["user-agent"]);
|
||||
return {
|
||||
props: {
|
||||
messages: (await import(`&/locales/${locale}/app.json`)).default,
|
||||
isBot,
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user