forked from Abdulbari/sgeUpdated
Khaled Elagamy
85f1847070
git-subtree-dir: sge-frontend git-subtree-mainline:876c278ac4git-subtree-split:5fa787e054
454 lines
16 KiB
JavaScript
454 lines
16 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Check, Lock } from "react-feather";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
Col,
|
|
Input,
|
|
Label,
|
|
Row,
|
|
} from "reactstrap";
|
|
import PasswordModal from "../components/password-change";
|
|
import { useTranslation } from "react-i18next";
|
|
import { getUser, updateUserInfo } from "../redux/actions/user/index";
|
|
import {
|
|
getUserProfileSettings,
|
|
updateUserProfileSettings,
|
|
} from "../redux/actions/userProfileSettings/index";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { useSnackbar } from "notistack";
|
|
|
|
const UserProfile = () => {
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const userId = localStorage.getItem("userId");
|
|
const userStore = useSelector((state) => state.user);
|
|
const userProfileSettingsStore = useSelector(
|
|
(state) => state.userProfileSettings.userProfileSettings
|
|
);
|
|
const [userInfo, setUserInfo] = useState([]);
|
|
const [userProfileSettings, setUserProfileSettings] = useState([]);
|
|
const [showPasswordModal, setShowPasswordModal] = useState(false);
|
|
const [showAvatarModal, setShowAvatarModal] = useState(false);
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
|
|
useEffect(() => {
|
|
dispatch(getUser(userId));
|
|
dispatch(getUserProfileSettings());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setUserInfo({
|
|
id: userId,
|
|
firstName: userStore.data?.firstName,
|
|
lastName: userStore.data?.lastName,
|
|
email: userStore.data?.email,
|
|
phoneNumber: userStore.data?.phoneNumber,
|
|
});
|
|
}, [userStore]);
|
|
|
|
useEffect(() => {
|
|
setUserProfileSettings({
|
|
infoMail: userProfileSettingsStore?.infoMail || false,
|
|
errorMail: userProfileSettingsStore?.errorMail || false,
|
|
infoNotification: userProfileSettingsStore?.infoNotification || false,
|
|
errorNotification: userProfileSettingsStore?.errorNotification || false,
|
|
});
|
|
}, [userProfileSettingsStore]);
|
|
|
|
const onPasswordButtonPressed = () => {
|
|
setShowPasswordModal(true);
|
|
};
|
|
|
|
const onSaveUserInfosButtonPressed = () => {
|
|
setLoading(true);
|
|
|
|
dispatch(updateUserInfo(userInfo))
|
|
.then(() => {
|
|
enqueueSnackbar(t("Warnings.updatedSuccessfully"), {
|
|
variant: "success",
|
|
});
|
|
setLoading(false);
|
|
})
|
|
.catch(() => {
|
|
enqueueSnackbar(` ${t("Warnings.updatedFail")},`, {
|
|
variant: "error",
|
|
});
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
const onSaveUserProfileSettingsButtonPressed = () => {
|
|
setLoading(true);
|
|
|
|
dispatch(updateUserProfileSettings(userProfileSettings))
|
|
.then(() => {
|
|
enqueueSnackbar(t("Warnings.updatedSuccessfully"), {
|
|
variant: "success",
|
|
});
|
|
setLoading(false);
|
|
})
|
|
.catch(() => {
|
|
enqueueSnackbar(` ${t("Warnings.updatedFail")},`, {
|
|
variant: "error",
|
|
});
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
// const onEditAvatarButtonPressed = () => {
|
|
// setShowAvatarModal(true);
|
|
// };
|
|
|
|
// const renderAvatarModal = () => {
|
|
// return (
|
|
// <Modal
|
|
// isOpen={showAvatarModal}
|
|
// toggle={() => setShowAvatarModal(!showAvatarModal)}
|
|
// className="modal-dialog-centered"
|
|
// >
|
|
// <ModalHeader toggle={() => setShowAvatarModal(!showAvatarModal)}>
|
|
// {t("UserProfile.updateAvatar")}
|
|
// </ModalHeader>
|
|
// <ModalBody>
|
|
// <div className="mb-3 d-flex justify-content-center">
|
|
// <img
|
|
// className="rounded-circle border border-3"
|
|
// width="150"
|
|
// height="150"
|
|
// src={
|
|
// selectedImage
|
|
// ? URL.createObjectURL(selectedImage)
|
|
// : "/logo192.png"
|
|
// }
|
|
// />
|
|
// </div>
|
|
// <div className="mb-2">
|
|
// <Input
|
|
// type="file"
|
|
// name="newAvatar"
|
|
// onChange={(event) => {
|
|
// setSelectedImage(event.target.files[0]);
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// </ModalBody>
|
|
// <ModalFooter>
|
|
// <Button
|
|
// color="primary"
|
|
// //onClick={onUpdateAvatarModalButtonPressed}
|
|
// >
|
|
// {loading ? t("Cruds.saving") : t("Cruds.update")}
|
|
// </Button>
|
|
// </ModalFooter>
|
|
// </Modal>
|
|
// );
|
|
// };
|
|
|
|
return (
|
|
<div style={{ marginTop: "2%" }}>
|
|
<Card className="border-bottom">
|
|
<CardHeader className="border-bottom">
|
|
<CardTitle tag="h4" className="row ml-md-3 align-items-center">
|
|
{/* <div className="d-flex position-relative mr-2">
|
|
<img
|
|
className="rounded-circle"
|
|
width="50"
|
|
height="50"
|
|
src="/logo192.png"
|
|
/>
|
|
<button
|
|
style={{
|
|
position: "absolute",
|
|
right: "-5px",
|
|
border: "none",
|
|
borderRadius: "50%",
|
|
backgroundColor: "#028a4a",
|
|
padding: "2px 4px",
|
|
color: "whitesmoke",
|
|
fontSize: "small",
|
|
}}
|
|
>
|
|
<Edit size={15} />
|
|
</button>
|
|
</div> */}
|
|
{/* <div className="d-flex position-relative mr-2">
|
|
<svg
|
|
className="rounded-circle"
|
|
fill="currentColor"
|
|
width="50"
|
|
height="50"
|
|
version="1.1"
|
|
id="Capa_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 311.541 311.541"
|
|
>
|
|
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
|
|
<g
|
|
id="SVGRepo_tracerCarrier"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<g>
|
|
<g>
|
|
<path d="M155.771,26.331C69.74,26.331,0,96.071,0,182.102c0,37.488,13.25,71.883,35.314,98.761 c3.404-27.256,30.627-50.308,68.8-61.225c13.946,12.994,31.96,20.878,51.656,20.878c19.233,0,36.894-7.487,50.698-19.936 c38.503,11.871,65.141,36.27,66.017,64.63c24.284-27.472,39.056-63.555,39.056-103.108 C311.541,96.071,241.801,26.331,155.771,26.331z M155.771,222.069c-9.944,0-19.314-2.732-27.634-7.464 c-20.05-11.409-33.855-34.756-33.855-61.711c0-38.143,27.583-69.176,61.489-69.176c33.909,0,61.489,31.033,61.489,69.176 c0,27.369-14.237,51.004-34.786,62.215C174.379,219.523,165.346,222.069,155.771,222.069z"></path>{" "}
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<button
|
|
style={{
|
|
position: "absolute",
|
|
right: "-5px",
|
|
border: "none",
|
|
borderRadius: "50%",
|
|
backgroundColor: "#028a4a",
|
|
padding: "2px 4px",
|
|
color: "whitesmoke",
|
|
fontSize: "small",
|
|
}}
|
|
onClick={onEditAvatarButtonPressed}
|
|
>
|
|
<Edit size={15} />
|
|
</button>
|
|
</div> */}
|
|
{t("UserProfile.myProfile")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<Row>
|
|
<Col className="pl-md-5 pl-2 col-md-6 col-12">
|
|
<Row className="mx-0 mt-1">
|
|
<Col sm="6" md="5" className="mr-2">
|
|
<div className="d-flex flex-column align-items-start mb-2">
|
|
<Label for="user-firstName">
|
|
{t("UserProfile.firstName")}
|
|
</Label>
|
|
<Input
|
|
type="text"
|
|
id="user-firstName"
|
|
defaultValue={userInfo?.firstName}
|
|
onChange={(e) =>
|
|
setUserInfo({
|
|
...userInfo,
|
|
firstName: e.target.value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
<Col sm="6" md="5" className="mr-2">
|
|
<div className="d-flex flex-column align-items-start mb-2">
|
|
<Label for="user-lastName">{t("UserProfile.lastName")}</Label>
|
|
<Input
|
|
type="text"
|
|
id="user-lastName"
|
|
defaultValue={userInfo?.lastName}
|
|
onChange={(e) =>
|
|
setUserInfo({
|
|
...userInfo,
|
|
lastName: e.target.value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row className="mx-0 mt-1">
|
|
<Col sm="6" md="5" className="mr-2">
|
|
<div className="d-flex flex-column align-items-start mb-2">
|
|
<Label for="user-email">Email </Label>
|
|
<Input
|
|
type="text"
|
|
id="user-email"
|
|
defaultValue={userInfo?.email}
|
|
onChange={(e) =>
|
|
setUserInfo({
|
|
...userInfo,
|
|
email: e.target.value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
<Col sm="6" md="5" className="mr-2">
|
|
<div className="d-flex flex-column align-items-start mb-2">
|
|
<Label for="user-phoneNumber">
|
|
{t("UserProfile.phoneNumber")}
|
|
</Label>
|
|
<Input
|
|
type="text"
|
|
id="user-phoneNumber"
|
|
defaultValue={userInfo?.phoneNumber}
|
|
onChange={(e) =>
|
|
setUserInfo({
|
|
...userInfo,
|
|
phoneNumber: e.target.value,
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row className="mx-0 mt-1 mb-5">
|
|
<Col sm="6" md="5" className="mr-2">
|
|
<Button color="primary" onClick={onSaveUserInfosButtonPressed}>
|
|
<Check size={15} />
|
|
<span className="align-middle ml-50">
|
|
{loading ? t("Cruds.saving") : t("Cruds.save")}
|
|
</span>
|
|
</Button>
|
|
</Col>
|
|
<Col sm="6" md="5" className="ml-md-auto mt-md-0 mt-2">
|
|
<Button color="primary" onClick={onPasswordButtonPressed}>
|
|
<Lock size={15} />
|
|
<span className="align-middle ml-50">
|
|
{t("UserProfile.changePassword")}
|
|
</span>
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
|
|
<Col className="pl-md-5 pl-2 col-md-6 col-12 pb-2 border-left">
|
|
<Row className="mx-0 mt-1">
|
|
<Col sm="6" md="6" className="mr-2">
|
|
<Label className="h4">
|
|
{t("UserProfile.communicationPreferences")}
|
|
</Label>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row className="mx-0 mt-1">
|
|
<Col sm="6" md="4" className="mr-2">
|
|
<div className="form-check form-switch mb-2">
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
role="switch"
|
|
id="info-mail-checkbox"
|
|
checked={
|
|
userProfileSettings?.infoMail === true ? true : false
|
|
}
|
|
onChange={(e) => {
|
|
setUserProfileSettings({
|
|
...userProfileSettings,
|
|
infoMail: e.target.checked,
|
|
});
|
|
}}
|
|
/>
|
|
<label
|
|
className="form-check-label h6"
|
|
htmlFor="info-mail-checkbox"
|
|
>
|
|
Info Email
|
|
</label>
|
|
</div>
|
|
<div className="form-check form-switch mb-2">
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
role="switch"
|
|
id="error-mail-checkbox"
|
|
checked={
|
|
userProfileSettings?.errorMail === true ? true : false
|
|
}
|
|
onChange={(e) => {
|
|
setUserProfileSettings({
|
|
...userProfileSettings,
|
|
errorMail: e.target.checked,
|
|
});
|
|
}}
|
|
/>
|
|
<label
|
|
className="form-check-label h6"
|
|
htmlFor="error-mail-checkbox"
|
|
>
|
|
Error Email
|
|
</label>
|
|
</div>
|
|
</Col>
|
|
<Col sm="6" md="4" className="mr-2">
|
|
<div className="form-check form-switch mb-2">
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
role="switch"
|
|
id="info-notification-checkbox"
|
|
checked={
|
|
userProfileSettings?.errorNotification === true
|
|
? true
|
|
: false
|
|
}
|
|
onChange={(e) => {
|
|
setUserProfileSettings({
|
|
...userProfileSettings,
|
|
errorNotification: e.target.checked,
|
|
});
|
|
}}
|
|
/>
|
|
<label
|
|
className="form-check-label h6"
|
|
htmlFor="info-notification-checkbox"
|
|
>
|
|
Info {t("Notifications.notification")}
|
|
</label>
|
|
</div>
|
|
<div className="form-check form-switch mb-2">
|
|
<input
|
|
className="form-check-input"
|
|
type="checkbox"
|
|
role="switch"
|
|
id="error-notification-checkbox"
|
|
checked={
|
|
userProfileSettings?.infoNotification === true
|
|
? true
|
|
: false
|
|
}
|
|
onChange={(e) => {
|
|
setUserProfileSettings({
|
|
...userProfileSettings,
|
|
infoNotification: e.target.checked,
|
|
});
|
|
}}
|
|
/>
|
|
<label
|
|
className="form-check-label h6"
|
|
htmlFor="error-notification-checkbox"
|
|
>
|
|
Error {t("Notifications.notification")}
|
|
</label>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
<Row className="mx-0 mt-1">
|
|
<Col sm="6" md="5" className="mr-2">
|
|
<Button
|
|
color="primary"
|
|
onClick={onSaveUserProfileSettingsButtonPressed}
|
|
>
|
|
<Check size={15} />
|
|
<span className="align-middle ml-50">{t("Cruds.save")}</span>
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
</Card>
|
|
<PasswordModal
|
|
showPasswordModal={showPasswordModal}
|
|
setShowPasswordModal={setShowPasswordModal}
|
|
userId={userId}
|
|
/>
|
|
{/* {renderAvatarModal()} */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserProfile;
|