reza added level3 profile

master
RezaAshrafi77 3 years ago
parent b92aa90c4f
commit 8a9fc46bbf
  1. 2
      src/components/Input/index.js
  2. 8
      src/components/Navbar/index.scss
  3. 10
      src/components/NavbarDrawer/NavbarDrawer.scss
  4. 4
      src/components/NavbarDrawer/NavbarDrawer.tsx
  5. 2
      src/components/PrivateRouter/index.js
  6. 8
      src/redux/reducers/user.tsx
  7. 13
      src/views/Auth/Profile/Document/index.js
  8. 26
      src/views/Auth/Profile/Document/index.scss
  9. 96
      src/views/Auth/Profile/MultipleSelector/index.js
  10. 43
      src/views/Auth/Profile/MultipleSelector/index.tsx
  11. 5
      src/views/Auth/Profile/Upload/index.scss
  12. 24
      src/views/Auth/Profile/index.scss
  13. 65
      src/views/Auth/Profile/index.tsx
  14. 5
      src/views/Course/Lesson/index.scss
  15. 2
      src/views/Course/index.scss
  16. 4
      src/views/Course/index.tsx
  17. 2
      src/views/Home/Courses/index.scss
  18. 4
      src/views/Home/Courses/index.tsx
  19. 2
      src/views/Home/Header/index.scss

@ -36,7 +36,7 @@ export default function FormPropsTextFields({
name={name} name={name}
label={label} label={label}
variant={"outlined"} variant={"outlined"}
onChange={(e) => onChange(e)} onChange={(e) => onChange(name, e.target.value)}
defaultValue={defaultValue[name] || ""} defaultValue={defaultValue[name] || ""}
inputProps={{ maxLength }} inputProps={{ maxLength }}
onInput={ onInput={

@ -17,7 +17,7 @@
li{ li{
text-align: center; text-align: center;
padding: 6px 0px; padding: 6px 0px;
border-radius: 7px; border-radius: 6px;
min-width : 130px; min-width : 130px;
font-family: numeralLight; font-family: numeralLight;
a{ a{
@ -74,7 +74,7 @@
&--links{ &--links{
li{ li{
padding: 0px 20px; padding: 0px 20px;
font-size: calc(100vw / 95); font-size: calc(100vw / 120);
span{ span{
width: 2px; width: 2px;
height: 15px; height: 15px;
@ -86,7 +86,9 @@
} }
&--buttons{ &--buttons{
li{ li{
font-size: calc(100vw / 100); a{
font-size: calc(100vw / 120);
}
min-width: 100px; min-width: 100px;
} }
} }

@ -16,7 +16,6 @@
} }
&__header { &__header {
height: 60px; height: 60px;
background-color: rgb(0, 0, 0);
width: 100%; width: 100%;
align-items: center; align-items: center;
padding: 0px 8px; padding: 0px 8px;
@ -26,11 +25,11 @@
& h1 { & h1 {
margin-bottom: 0px; margin-bottom: 0px;
font-size: 17px; font-size: 17px;
color: #4d4d4f; color:white;
letter-spacing: -1px; letter-spacing: -1px;
} }
& div { & div {
color: #4d4d4f; color: white;
font-size: calc(100vw / 34); font-size: calc(100vw / 34);
letter-spacing: -1px; letter-spacing: -1px;
} }
@ -58,7 +57,6 @@
&__dropdown { &__dropdown {
width: calc(100vw * 0.8); width: calc(100vw * 0.8);
margin: 10px auto; margin: 10px auto;
background-color: rgb(0, 0, 0);
.navbar-drawer-user { .navbar-drawer-user {
padding: 10px 10px; padding: 10px 10px;
width: 100%; width: 100%;
@ -68,11 +66,11 @@
& h1 { & h1 {
margin-bottom: 0px; margin-bottom: 0px;
font-size: calc(100vw / 22); font-size: calc(100vw / 22);
color: #4d4d4f; color: white;
letter-spacing: -1px; letter-spacing: -1px;
} }
& div { & div {
color: #4d4d4f; color: white;
font-size: calc(100vw / 34); font-size: calc(100vw / 34);
letter-spacing: -1px; letter-spacing: -1px;
} }

@ -205,7 +205,7 @@ const NavbarDrawer = ({ status, logout }: any) => {
className="navbar-drawer__header--dropdown" className="navbar-drawer__header--dropdown"
onClick={() => setDropdown(false)} onClick={() => setDropdown(false)}
> >
{score ? <span>{score} امتیاز</span> : null} {/* {score ? <span>{score} امتیاز</span> : null} */}
<KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} /> <KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} />
</div> </div>
) : ( ) : (
@ -213,7 +213,7 @@ const NavbarDrawer = ({ status, logout }: any) => {
className="navbar-drawer__header--dropdown" className="navbar-drawer__header--dropdown"
onClick={() => setDropdown(true)} onClick={() => setDropdown(true)}
> >
{score ? <span>{score} امتیاز</span> : null}{" "} {/* {score ? <span>{score} امتیاز</span> : null}{" "} */}
<KeyboardArrowDownIcon style={{ color: "grey", fontSize: 30 }} /> <KeyboardArrowDownIcon style={{ color: "grey", fontSize: 30 }} />
</div> </div>
)} )}

@ -15,7 +15,7 @@ const PrivateRouter = ({
status ? ( status ? (
<Component {...props} /> <Component {...props} />
) : ( ) : (
<Redirect to="/login" /> <Redirect to="/" />
) )
} }
/> />

@ -9,6 +9,7 @@ const initialState = {
domains: [], domains: [],
mothers: [], mothers: [],
profileStatus: false, profileStatus: false,
setDone: false,
}; };
export default function user(state = initialState, action : UserAction) { export default function user(state = initialState, action : UserAction) {
let { type, data } = action; let { type, data } = action;
@ -29,7 +30,7 @@ export default function user(state = initialState, action : UserAction) {
}; };
case "user/getProfile": case "user/getProfile":
localStorage.setItem("userData", JSON.stringify(data)); localStorage.setItem("userData", JSON.stringify(data));
return { ...state, loading: false, status: data, error: null }; return { ...state, loading: false, status: data, error: null, setDone : false, };
case "user/logout": case "user/logout":
return { ...state, loading: false, status: proxy.status(), error: null }; return { ...state, loading: false, status: proxy.status(), error: null };
case "user/getUserRole": case "user/getUserRole":
@ -42,10 +43,7 @@ export default function user(state = initialState, action : UserAction) {
// return { ...state, loading: false, mothers: data, error: null }; // return { ...state, loading: false, mothers: data, error: null };
case "user/setProfile": case "user/setProfile":
toast.success("تغییرات اعمال شد."); toast.success("تغییرات اعمال شد.");
setTimeout(() => { return { ...state, loading: false, error: null, setDone : true };
window.location.pathname = "/";
}, 500);
return { ...state, loading: false, error: null };
case "loading": case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":

@ -1,16 +1,15 @@
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";
export default function Document({ defaultValue, name, onChange } : any) { export default function Document({ defaultValue, name, onChange }) {
return ( return (
<div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3"> <div className="mobile-auth-profile__document d-flex justify-content-center align-items-center mb-3">
{defaultValue?.docFileIds === "" ? ( {defaultValue.docFileIds === "" ? (
<> <>
<input <input
type="file" type="file"
// parent.onChange(e.target.name, e.target.value)
name={name} name={name}
// onChange={(e) => onChange(e.target.name, e.target.files[0])} onChange={(e) => onChange(name, e.target.files[0])}
/> />
<span>گواهی تدریس خود را آپلود کنید.</span> <span>گواهی تدریس خود را آپلود کنید.</span>
</> </>
@ -19,7 +18,7 @@ export default function Document({ defaultValue, name, onChange } : any) {
<input <input
type="file" type="file"
name="file" name="file"
// onChange={(e) => onChange(e.target.name, e.target.files[0])} onChange={(e) => onChange(name, e.target.files[0])}
/> />
<span <span
style={{ style={{
@ -28,8 +27,8 @@ export default function Document({ defaultValue, name, onChange } : any) {
margin: "auto", margin: "auto",
}} }}
> >
{defaultValue?.docFileIds.name || {/* {defaultValue.docFileIds.name ||
"گواهی تدریس ثبت شده و درحال بررسی می باشد"} "گواهی تدریس ثبت شده و درحال بررسی می باشد"} */}
</span> </span>
</> </>
)} )}

@ -4,7 +4,7 @@
width: 100%; width: 100%;
height: 50px; height: 50px;
border-radius: 10px; border-radius: 10px;
border: 2px dashed rgb(209, 209, 209); border: 2px dashed #777;
position: relative; position: relative;
input { input {
width: 100%; width: 100%;
@ -26,3 +26,27 @@
} }
} }
} }
@media screen and (min-width: 1441px){
span{
font-size: 14px;
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px){
span{
font-size: calc(100vw / 100);
}
}
@media screen and (min-width: 641px) and (max-width: 1007px){
span{
font-size: calc(100vw / 45);
}
}
@media screen and (max-width: 640px){
span{
font-size: calc(100vw / 30);
}
}

@ -1,96 +0,0 @@
import React from "react";
import Select from "@mui/material/Select";
import { makeStyles } from "@mui/styles";
import Input from "@mui/material/Input";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import "./index.scss";
export default function MultipleSelector(props) {
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiTextField-root": {
width: "100%",
position: "relative",
marginRight: 10,
"& input": {
textAlign: props.align,
direction: props.align === "right" ? "rtl" : "ltr",
},
},
},
}));
const classes = useStyles();
const { parent, defaultValue, name, label, options, selectedOptions } = props;
return (
<>
{window.innerWidth < 1000 ? (
<FormControl
variant="outlined"
className={`${classes.formControl} mobile-multiple-selector`}
>
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel>
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={selectedOptions.split(",")}
onChange={(e) => parent.onChange(name, e.target.value.join(","))}
input={<Input />}
variant="outlined"
>
{options.map((name, i) => (
<MenuItem key={name} value={i}>
{name}
</MenuItem>
))}
</Select>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 10,
fontSize: 30,
color: "#a5a5a5",
}}
/>
</FormControl>
) : null}
{window.innerWidth > 1000 ? (
<FormControl
variant="outlined"
className={`${classes.formControl} mobile-multiple-selector`}
>
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel>
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={selectedOptions.split(",")}
onChange={(e) => parent.onChange(name, e.target.value.join(","))}
input={<Input />}
variant="outlined"
>
{options.map((name, i) => (
<MenuItem key={name} value={i}>
{name}
</MenuItem>
))}
</Select>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 15,
fontSize: 30,
color: "#a5a5a5",
}}
/>
</FormControl>
) : null}
</>
);
}

@ -0,0 +1,43 @@
import React from "react";
import Select from "@mui/material/Select";
import Input from "@mui/material/Input";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import "./index.scss";
export default function MultipleSelector({align, onChange, selectedOptions, options, defaultValue, label, name,} : any) {
return (
<FormControl
variant="outlined"
className={`mobile-multiple-selector`}
>
<InputLabel id="demo-mutiple-name-label">{label}</InputLabel>
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={selectedOptions.map((item : any) => item.name)}
onChange={(e) => onChange(name, e.target.value.join(","))}
input={<Input />}
variant="outlined"
>
{options.map((name : any, i : any) => (
<MenuItem key={name} value={i}>
{name}
</MenuItem>
))}
</Select>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 10,
fontSize: 30,
color: "#a5a5a5",
}}
/>
</FormControl>
);
}

@ -7,6 +7,11 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background-color: #272727; background-color: #272727;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
input { input {
width: 100%; width: 100%;
height: 100%; height: 100%;

@ -67,6 +67,12 @@
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
.profile { .profile {
h1{
font-size: 30px;
}
p{
font-size: 14px;
}
button { button {
font-size: 21px; font-size: 21px;
} }
@ -83,6 +89,12 @@
@media screen and (min-width: 1008px) and (max-width: 1440px) { @media screen and (min-width: 1008px) and (max-width: 1440px) {
.profile { .profile {
h1{
font-size: calc(100vw / 50);
}
p{
font-size: calc(100vw / 90);
}
button { button {
font-size: calc(100vw / 70); font-size: calc(100vw / 70);
} }
@ -104,6 +116,12 @@
header { header {
margin: 0px; margin: 0px;
margin-top: 30px; margin-top: 30px;
h1{
font-size: calc(100vw / 35);
}
p{
font-size: calc(100vw / 55);
}
} }
&__box { &__box {
flex-direction: column; flex-direction: column;
@ -124,6 +142,12 @@
header { header {
margin: 0px; margin: 0px;
margin-top: 70px; margin-top: 70px;
h1{
font-size: calc(100vw / 20);
}
p{
font-size: calc(100vw / 35);
}
} }
&__box { &__box {
flex-direction: column; flex-direction: column;

@ -15,10 +15,6 @@ import "./index.scss";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import Navbar from "../../../components/Navbar/index"; import Navbar from "../../../components/Navbar/index";
import Footer from "../../Home/Footer/index"; import Footer from "../../Home/Footer/index";
function Navigate({ path }: any) {
let history = useHistory();
return <>{history.push(path)}</>;
}
function Profile({ function Profile({
profile, profile,
@ -32,29 +28,30 @@ function Profile({
provinceList, provinceList,
cityList, cityList,
}: any) { }: any) {
let history = useHistory();
const [render, setRender] = useState(false); const [render, setRender] = useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
file: uploads["file"] || profile.picFileId || null, file: uploads["file"] || profile.picFileId || null,
picFileId: uploads["file"] || profile.picFileId || null, picFileId: uploads["file"] || profile.picFileId || null,
docFileIds: uploads["docFileIds"] || profile.docFileIds || "", docFileIds: uploads["docFileIds"] || profile.docFileIds || "",
firstName: "", firstName: profile.firstName || "",
lastName: "", lastName: profile.lastName || "",
password: "", password: profile.password || "",
username: "", username: profile.username || "",
address: "", address: profile.address || "",
email: "", email: profile.email || "",
birthDate: "", birthDate: profile.birthDate || "",
gender: profile.gender || 1, gender: profile.gender || 1,
status: profile.status || 1, status: profile.status || 1,
nationalId: "", nationalId: profile.nationalId || "",
phone: "", phone: profile.phone || "",
schools: null, schools: profile.schools || null,
zoneId: "", zoneId: profile.zoneId || "",
schoolId: "", schoolId: profile.schoolId || "",
postalCode: "", postalCode: profile.postalCode || "",
gradeIds: profile.gradeIds, gradeIds: profile.gradeIds || [],
provinceId: profile.provinceId, provinceId: profile.provinceId || null,
cityId: profile.cityId, cityId: profile.cityId || null,
}); });
useEffect(() => { useEffect(() => {
@ -62,6 +59,12 @@ function Profile({
getCity({ provinceId: profile.provinceId }); getCity({ provinceId: profile.provinceId });
}, []); }, []);
useEffect(() => {
if(setDone){
history.push('/');
}
},[setDone])
const grades = [ const grades = [
{ {
name: "پیش دبستانی", name: "پیش دبستانی",
@ -222,7 +225,7 @@ function Profile({
label="نام" label="نام"
align="right" align="right"
onInput={onInput.persianOnly} onInput={onInput.persianOnly}
defaultValue={profile} defaultValue={formData}
onChange={onChange} onChange={onChange}
// ref={usernameInput} // ref={usernameInput}
/> />
@ -232,7 +235,7 @@ function Profile({
name="lastName" name="lastName"
label="نام خانوادگی" label="نام خانوادگی"
align="right" align="right"
defaultValue={profile} defaultValue={formData}
onChange={onChange} onChange={onChange}
onInput={onInput.persianOnly} onInput={onInput.persianOnly}
/> />
@ -241,7 +244,7 @@ function Profile({
<Input <Input
name="username" name="username"
label="نام کاربری" label="نام کاربری"
defaultValue={profile} defaultValue={formData}
onChange={onChange} onChange={onChange}
align="left" align="left"
onInput={onInput.englishAndNumberWithoutSpace} onInput={onInput.englishAndNumberWithoutSpace}
@ -263,14 +266,14 @@ function Profile({
label="کد ملی/اتباع" label="کد ملی/اتباع"
align="left" align="left"
maxLength={13} maxLength={13}
defaultValue={profile} defaultValue={formData}
onChange={onChange} onChange={onChange}
onInput={onInput.numberOnly} onInput={onInput.numberOnly}
/> />
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Birthdate <Birthdate
defaultValue={profile} defaultValue={formData}
name="birthDate" name="birthDate"
onChange={onChange} onChange={onChange}
/> />
@ -314,6 +317,8 @@ function Profile({
label={"پایه تحصیلی"} label={"پایه تحصیلی"}
selectedOptions={formData.gradeIds} selectedOptions={formData.gradeIds}
onChange={onChange} onChange={onChange}
align="right"
defaultValue={profile}
/> />
</div> </div>
) : null} ) : null}
@ -368,7 +373,7 @@ function Profile({
<Input <Input
name="schools" name="schools"
label={"نام مدرسه"} label={"نام مدرسه"}
defaultValue={profile} defaultValue={formData}
onInput={onInput.persianOnly} onInput={onInput.persianOnly}
onChange={onChange} onChange={onChange}
/> />
@ -379,7 +384,7 @@ function Profile({
<Input <Input
name="schools" name="schools"
label={"محل تدریس"} label={"محل تدریس"}
defaultValue={profile} defaultValue={formData}
onInput={onInput.persianOnly} onInput={onInput.persianOnly}
onChange={onChange} onChange={onChange}
/> />
@ -388,7 +393,7 @@ function Profile({
{formData.status == 2 ? ( {formData.status == 2 ? (
<Document <Document
onChange={onChange} onChange={onChange}
defaultValue={profile} defaultValue={formData}
name="docFileIds" name="docFileIds"
/> />
) : null} ) : null}
@ -400,7 +405,7 @@ function Profile({
onChange={onChange} onChange={onChange}
maxLength={10} maxLength={10}
inputMode="numeric" inputMode="numeric"
defaultValue={profile} defaultValue={formData}
onInput={onInput.numberOnly} onInput={onInput.numberOnly}
/> />
</div> </div>
@ -408,7 +413,7 @@ function Profile({
<TextArea <TextArea
placeholder={"آدرس محل سکونت"} placeholder={"آدرس محل سکونت"}
name="address" name="address"
defaultValue={profile} defaultValue={formData}
onChange={onChange} onChange={onChange}
/> />
</div> </div>

@ -6,7 +6,7 @@
} }
header { header {
background-color: #414141; background-color: #414141;
border: 1px solid #b3b3b3 !important; // border: 1px solid #b3b3b3 !important;
padding: 5px 15px !important; padding: 5px 15px !important;
cursor: pointer; cursor: pointer;
h4 { h4 {
@ -25,8 +25,6 @@
padding : 0px !important; padding : 0px !important;
border-left: 1px solid #b3b3b3; border-left: 1px solid #b3b3b3;
border-right: 1px solid #b3b3b3; border-right: 1px solid #b3b3b3;
border-bottom: 1px solid #b3b3b3;
// max-height: 0px
transition: all 0.4s ease-in; transition: all 0.4s ease-in;
& img{ & img{
width: 40px; width: 40px;
@ -44,6 +42,7 @@
} }
&--active{ &--active{
padding : 30px 15px 20px !important; padding : 30px 15px 20px !important;
border-bottom: 1px solid #b3b3b3;
} }
} }
} }

@ -67,7 +67,7 @@
header{ header{
padding: 20px 0px 20px !important; padding: 20px 0px 20px !important;
border: 0px; border: 0px !important;
h2{ h2{
color: #4DD35B; color: #4DD35B;
} }

@ -83,7 +83,7 @@ function Course({ lessons }: any) {
<img src={bookmark} alt="" /> <img src={bookmark} alt="" />
</button> </button>
<Link <Link
to="/" to="/video-tube"
className="course__options--button d-flex align-items-center justify-content-between" className="course__options--button d-flex align-items-center justify-content-between"
> >
مشاهده پیشنمایش دوره مشاهده پیشنمایش دوره
@ -118,7 +118,7 @@ function Course({ lessons }: any) {
<img src={bookmark} alt="" /> <img src={bookmark} alt="" />
</button> </button>
<Link <Link
to="/" to="/video-tube"
className="course__options--button d-flex align-items-center justify-content-around" className="course__options--button d-flex align-items-center justify-content-around"
> >
مشاهده پیشنمایش دوره مشاهده پیشنمایش دوره

@ -26,7 +26,7 @@
bottom: 0px; bottom: 0px;
left: 50%; left: 50%;
transform: translate(-50%, +50%); transform: translate(-50%, +50%);
background-color: #292929; background-color: black;
padding-right: 5px; padding-right: 5px;
color: #9CDF52; color: #9CDF52;
&:hover{ &:hover{

@ -9,9 +9,9 @@ import "./index.scss";
function Courses({number, courses, selectedSort} : any) { function Courses({number, courses, selectedSort} : any) {
const slideNumberHandler = () => { const slideNumberHandler = () => {
if (window.innerWidth >= 1440) { if (window.innerWidth >= 1440) {
return 4; return 5;
} else if (window.innerWidth >= 1008 && window.innerWidth < 1440) { } else if (window.innerWidth >= 1008 && window.innerWidth < 1440) {
return 4; return 5;
} else if (window.innerWidth > 640 && window.innerWidth < 1008) { } else if (window.innerWidth > 640 && window.innerWidth < 1008) {
return 3; return 3;
} else { } else {

@ -2,7 +2,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0px auto; margin: 0px auto;
margin-top: 30px; margin-top: 10px;
span { span {
height: 80%; height: 80%;
width: 8px; width: 8px;

Loading…
Cancel
Save