224 lines
12 KiB
JavaScript
224 lines
12 KiB
JavaScript
import StyledForm from "@/core/components/StyledForm";
|
|
import CenterLayout from "@/layouts/CenterLayout";
|
|
import DashboardLayout from "@/layouts/DashboardLayout";
|
|
import useUser from "@/lib/app/hooks/useUser";
|
|
import {Box, 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_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) => {
|
|
Notifications(t);
|
|
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(t, error.response);
|
|
throw error;
|
|
}
|
|
};
|
|
const handleSubmit = (values, {setSubmitting}) => {
|
|
|
|
};
|
|
const initialValues = {
|
|
expert_avatar: null,
|
|
username: user.username,
|
|
name: user.name,
|
|
email: user.email,
|
|
province_name: user.province_name,
|
|
position: user.position,
|
|
};
|
|
const validationSchema = Yup.object().shape({});
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<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("UpdateProfile.text_field_username")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
disabled={true}
|
|
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("UpdateProfile.text_field_name")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
disabled={true}
|
|
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("UpdateProfile.text_field_email")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
disabled={true}
|
|
error={
|
|
props.touched.email && props.errors.email
|
|
? true
|
|
: false
|
|
}
|
|
helperText={
|
|
props.touched.email ? props.errors.email : null
|
|
}
|
|
sx={{
|
|
width: "100%",
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={6}>
|
|
<Field
|
|
as={TextField}
|
|
name="province_name"
|
|
label={t("UpdateProfile.text_field_province_name")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
disabled={true}
|
|
error={
|
|
props.touched.province_name &&
|
|
props.errors.province_name
|
|
? true
|
|
: false
|
|
}
|
|
helperText={
|
|
props.touched.province_name
|
|
? props.errors.province_name
|
|
: null
|
|
}
|
|
sx={{
|
|
width: "100%",
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<Field
|
|
as={TextField}
|
|
name="position"
|
|
label={t("UpdateProfile.text_field_position")}
|
|
variant="outlined"
|
|
margin="normal"
|
|
size="small"
|
|
disabled={true}
|
|
error={
|
|
props.touched.position && props.errors.position
|
|
? true
|
|
: false
|
|
}
|
|
helperText={
|
|
props.touched.position
|
|
? props.errors.position
|
|
: null
|
|
}
|
|
sx={{
|
|
width: "100%",
|
|
}}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Stack>
|
|
</Paper>
|
|
</StyledForm>
|
|
)}
|
|
</Formik>
|
|
</Container>
|
|
</CenterLayout>
|
|
</DashboardLayout>
|
|
);
|
|
};
|
|
|
|
export default DashboardEditProfile;
|