From a2b89204669a80812dbd1c44d7040ae9db9e02f3 Mon Sep 17 00:00:00 2001 From: Yasiu1376 Date: Wed, 12 Jul 2023 10:18:36 +0330 Subject: [PATCH 1/2] implrement profile --- public/locales/fa/app.json | 9 +- .../dashboard/edit-profile/index.jsx | 190 ++++++++++++++++++ src/core/components/AvatarUpload.jsx | 128 ++++++++++++ src/pages/dashboard/edit-profile/index.jsx | 23 +++ 4 files changed, 349 insertions(+), 1 deletion(-) create mode 100644 src/components/dashboard/edit-profile/index.jsx create mode 100644 src/core/components/AvatarUpload.jsx create mode 100644 src/pages/dashboard/edit-profile/index.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 192ba78..8334094 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -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": "رمز عبور خود را وارد کنید" } } diff --git a/src/components/dashboard/edit-profile/index.jsx b/src/components/dashboard/edit-profile/index.jsx new file mode 100644 index 0000000..3dd5468 --- /dev/null +++ b/src/components/dashboard/edit-profile/index.jsx @@ -0,0 +1,190 @@ +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, + 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 ( + + + + + {(props) => ( + { + e.preventDefault(); + props.handleSubmit(); + }} + > + + + + {t("UpdateProfile.typography_edit_profile")} + + + + + + + + + + + + )} + + + + + ); +}; + +export default DashboardEditProfile; diff --git a/src/core/components/AvatarUpload.jsx b/src/core/components/AvatarUpload.jsx new file mode 100644 index 0000000..e1ade5c --- /dev/null +++ b/src/core/components/AvatarUpload.jsx @@ -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 ( + + + + + {isHovered && ( + + {selectedImage ? ( + + ) : ( + + )} + + )} + + + + + ); +}; + +export default AvatarUpload; diff --git a/src/pages/dashboard/edit-profile/index.jsx b/src/pages/dashboard/edit-profile/index.jsx new file mode 100644 index 0000000..1cf3b5c --- /dev/null +++ b/src/pages/dashboard/edit-profile/index.jsx @@ -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 ( + + + + + ); +} + +export async function getServerSideProps({ req, locale }) { + const { isBot } = parse(req.headers["user-agent"]); + return { + props: { + messages: (await import(`&/locales/${locale}/app.json`)).default, + isBot, + }, + }; +} From 08672c0a1ebcafb20fc6c292c3fad3fca8c8b8f5 Mon Sep 17 00:00:00 2001 From: Yasiu1376 Date: Wed, 12 Jul 2023 11:01:07 +0330 Subject: [PATCH 2/2] implement user profile --- .../dashboard/edit-profile/index.jsx | 142 +++++++++++++++--- 1 file changed, 117 insertions(+), 25 deletions(-) diff --git a/src/components/dashboard/edit-profile/index.jsx b/src/components/dashboard/edit-profile/index.jsx index 3dd5468..cfa16d7 100644 --- a/src/components/dashboard/edit-profile/index.jsx +++ b/src/components/dashboard/edit-profile/index.jsx @@ -6,6 +6,7 @@ import { Box, Button, Container, + Grid, Paper, Stack, TextField, @@ -50,7 +51,6 @@ const DashboardEditProfile = () => { const handleSubmit = (values, { setSubmitting }) => { // const formData = new FormData(); // formData.append("email", values.expert_email); - // if (values.change_avatar !== false) { // editAvatar(values.expert_avatar) // .then(() => { @@ -140,30 +140,122 @@ const DashboardEditProfile = () => { changeFlag="change_avatar" /> - - - + + + + + + + + + + + + + + + + + +