reza added some option to profile

master
RezaAshrafi77 3 years ago
parent 1e2ab85cdc
commit eae2f124b3
  1. 46
      src/views/Auth/Profile/Birthdate/index.js
  2. 64
      src/views/Auth/Profile/Birthdate/index.scss
  3. 61
      src/views/Auth/Profile/GenderSwitch/index.js
  4. 26
      src/views/Auth/Profile/GenderSwitch/index.scss
  5. 96
      src/views/Auth/Profile/MultipleSelector/index.js
  6. 10
      src/views/Auth/Profile/MultipleSelector/index.scss
  7. 93
      src/views/Auth/Profile/Select/index.js
  8. 285
      src/views/Auth/Profile/index.js
  9. 30
      src/views/Auth/Profile/index.scss
  10. 6
      src/views/Auth/index.scss

@ -0,0 +1,46 @@
import React from "react";
import "./index.scss";
export default function Birthdate(props) {
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-birthdate d-flex justify-content-between align-items-center">
<label>تاریخ تولد</label>
<div className="mobile-birthdate__date d-flex align-items-center">
<Input name="day" placeholder="روز" maxLength={2} />
<span>/</span>
<Input name="month" placeholder="ماه" maxLength={2} />
<span>/</span>
<Input name="year" placeholder="سال" maxLength={4} />
</div>
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="birthdate d-flex justify-content-between align-items-center">
<label>تاریخ تولد</label>
<div className="birthdate__date d-flex align-items-center">
<Input name="day" placeholder="روز" maxLength={2} />
<span>/</span>
<Input name="month" placeholder="ماه" maxLength={2} />
<span>/</span>
<Input name="year" placeholder="سال" maxLength={4} />
</div>
</div>
) : null}
</>
);
}
const Input = (props) => {
const { name, placeholder, maxLength } = props;
return (
<input
type="text"
inputMode="numeric"
name={name}
placeholder={placeholder}
maxLength={maxLength}
/>
);
};

@ -0,0 +1,64 @@
.mobile-birthdate {
width: 100%;
height: 45px;
border-radius: 10px;
padding: 10px 10px;
border: 1px solid #ccc;
margin: 10px 0px;
label {
width: fit-content;
font-family: numeralLight;
}
span {
font-size: calc(100vw / 30);
color: #bfbfbf;
}
input {
border: 0px;
background-color: white;
font-family: numeralLight;
color: #4d4d4d;
width: 42px;
text-align: center;
direction: ltr;
font-size: calc(100vw / 26);
&:focus {
outline: 0px;
}
&::placeholder {
font-size: calc(100vw / 30);
color: #bfbfbf;
}
}
}
.birthdate {
width: 100%;
height: 55px;
border-radius: 10px;
padding: 10px 10px;
border: 1px solid #ccc;
margin: 10px 0px;
label {
width: fit-content;
font-family: numeralLight;
}
span {
color: #bfbfbf;
}
input {
border: 0px;
background-color: white;
font-family: numeralLight;
color: #4d4d4d;
width: 42px;
text-align: center;
direction: ltr;
&:focus {
outline: 0px;
}
&::placeholder {
color: #bfbfbf;
}
}
}

@ -1,18 +1,67 @@
import React from "react";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 65,
mobile: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
};
export default function GenderSwitch(props) {
const { parent, name, options, selectedOption } = props;
const styles = {
girl: {
fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
color: selectedOption === options[1] ? "white" : "grey",
backgroundColor: selectedOption === options[1] ? "green" : "white",
border: selectedOption === options[1] ? "0px" : "1px solid #ccc",
borderTopLeftRadius: 10,
borderBottomLeftRadius: 10,
},
boy: {
fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
color: selectedOption === options[0] ? "white" : "grey",
backgroundColor: selectedOption === options[0] ? "green" : "white",
border: selectedOption === options[0] ? "0px" : "1px solid #ccc",
borderTopRightRadius: 10,
borderBottomRightRadius: 10,
borderLeft: window.innerWidth > 1000 ? "1px solid #ccc" : "0px",
},
};
return (
<>
{window.innerWidth > 1000 ? (
<div className="gender d-flex">
<button onClick={}>پسر</button>
<button>دختر</button>
<div className="gender d-flex justify-content-between align-items-center">
<div
style={styles.boy}
onClick={() => parent.onChange(name, options[0])}
>
{options[0]}
</div>
<div
style={styles.girl}
onClick={() => parent.onChange(name, options[1])}
>
{options[1]}
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-gender d-flex">
<button>پسر</button>
<button>دختر</button>
<div className="mobile-gender d-flex justify-content-between align-items-center">
<div
style={styles.boy}
onClick={() => parent.onChange(name, options[0])}
>
{options[0]}
</div>
<div
style={styles.girl}
onClick={() => parent.onChange(name, options[1])}
>
{options[1]}
</div>
</div>
) : null}
</>

@ -0,0 +1,26 @@
.gender {
width: 100%;
margin-bottom: 10px;
div {
border-radius: 10px;
font-family: numeralLight;
padding: 13px 0px;
width: 45%;
height: 55px;
text-align: center;
cursor: pointer;
}
}
.mobile-gender {
width: 100%;
margin: 10px 0px;
div {
font-family: numeralLight;
padding: 11px 0px;
width: 50%;
height: 45px;
text-align: center;
cursor: pointer;
}
}

@ -0,0 +1,96 @@
import React from "react";
import Select from "@material-ui/core/Select";
import { makeStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import KeyboardArrowDownIcon from "@material-ui/icons/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}
onChange={(e) => parent.onChange(name, e.target.value)}
input={<Input />}
variant="outlined"
>
{options.map((name) => (
<MenuItem key={name} value={name}>
{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}
onChange={(e) => parent.onChange(name, e.target.value)}
input={<Input />}
variant="outlined"
>
{options.map((name) => (
<MenuItem key={name} value={name}>
{name}
</MenuItem>
))}
</Select>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 10,
fontSize: 30,
color: "#a5a5a5",
}}
/>
</FormControl>
) : null}
</>
);
}

@ -0,0 +1,10 @@
.mobile-multiple-selector {
width: 100%;
border-radius: 10px;
padding: 10px 10px;
border: 1px solid #ccc !important;
margin: 0px !important;
.MuiInput-formControl {
margin: 9px 0px 7px !important;
}
}

@ -41,34 +41,69 @@ export default function CustomizedSelects(props) {
const classes = useStyles();
const { parent } = props;
return (
<div style={{ position: "relative" }}>
<FormControl variant="outlined" className={classes.marginLeft}>
<InputLabel id="demo-simple-select-outlined-label">
{props.label}
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
// value={props.parent.state[props.name]}
onChange={(e) => parent.onChange(props.name, e.target.value)}
>
{/* 09366858119 */}
{props.options.map((item, i) => (
<option key={i} value={item}>
{item}
</option>
))}
</Select>
</FormControl>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 25,
fontSize: 30,
color: "#a5a5a5",
}}
/>
</div>
<>
{window.innerWidth < 1000 ? (
<div style={{ position: "relative" }}>
<FormControl variant="outlined" className={classes.marginLeft}>
<InputLabel id="demo-simple-select-outlined-label">
{props.label}
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
// value={props.parent.state[props.name]}
onChange={(e) => parent.onChange(props.name, e.target.value)}
>
{/* 09366858119 */}
{props.options.map((item, i) => (
<option key={i} value={item}>
{item}
</option>
))}
</Select>
</FormControl>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 20,
fontSize: 30,
color: "#a5a5a5",
}}
/>
</div>
) : null}
{window.innerWidth > 1000 ? (
<div style={{ position: "relative" }}>
<FormControl variant="outlined" className={classes.marginLeft}>
<InputLabel id="demo-simple-select-outlined-label">
{props.label}
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
// value={props.parent.state[props.name]}
onChange={(e) => parent.onChange(props.name, e.target.value)}
>
{/* 09366858119 */}
{props.options.map((item, i) => (
<option key={i} value={item}>
{item}
</option>
))}
</Select>
</FormControl>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 25,
fontSize: 30,
color: "#a5a5a5",
}}
/>
</div>
) : null}
</>
);
}

@ -6,6 +6,9 @@ import Select from "./Select/index";
import Input from "./Input/index";
import TextArea from "./TextArea/index";
import Upload from "./Upload/index";
import Gender from "./GenderSwitch/index";
import Birthdate from "./Birthdate/index";
import MultipleSelector from "./MultipleSelector/index";
import logo from "../../../assets/icons/logo.png";
import pic from "../../../assets/images/pic.png";
@ -13,12 +16,17 @@ import pic from "../../../assets/images/pic.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
},
};
class Profile extends Component {
state = {
@ -30,6 +38,13 @@ class Profile extends Component {
address: "",
gender: "",
userRoleId: "",
nationalId: "",
provinceId: "",
cityId: "",
zoneId: "",
schoolId: "",
postalCode: "",
gradeId: [],
validation: {
firstName: { name: "نام", status: "" },
lastName: { name: "نام خانوادگی", status: "" },
@ -38,9 +53,15 @@ class Profile extends Component {
};
onChange = (name, value) => {
this.setState({
[name]: value,
});
if (name === "gardeId" && this.state.userRoleId === "معلم") {
this.setState((prevState) => ({
gradeId: [...prevState.gradeId, value],
}));
} else {
this.setState({
[name]: value,
});
}
};
componentDidMount() {
@ -68,7 +89,7 @@ class Profile extends Component {
return (
<>
{window.innerWidth > 1000 ? (
<div className="auth-profile d-flex justify-content-center align-items-center">
<div className="auth-profile d-flex justify-content-center">
<div className="auth-profile__box d-flex flex-column p-4">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>حساب کاربری</h1>
<p style={{ fontSize: fontSize.desktop.p }}>
@ -93,7 +114,7 @@ class Profile extends Component {
<div className="mb-2">
<Input
name="lastName"
label="نام و نام خانوادگی"
label="نام خانوادگی"
parent={this}
defaultValue={profile.lastName}
/>
@ -107,27 +128,95 @@ class Profile extends Component {
align="left"
/>
</div>
<div className="mb-2">
<Gender
options={["دختر", "پسر"]}
parent={this}
name="gender"
selectedOption={this.state.gender}
/>
</div>
<div className="mb-2">
<Input
name="nationalId"
label="کد ملی"
parent={this}
align="left"
/>
</div>
<div className="mb-2">
<Birthdate />
</div>
{/* <div className="mb-2">
<Input name="password" label="رمز عبور" parent={this} />
</div> */}
</div>
<div style={{ width: "48%" }}>
<div className="mb-2" style={{ minWidth: "100%" }}>
<Select
<Gender
parent={this}
options={["معلم", "دانش آموز"]}
name="userRoleId"
label={"عنوان"}
selectedOption={this.state.userRoleId}
/>
</div>
{this.state.userRoleId === "دانش آموز" ? (
<Select
parent={this}
options={["دختر", "پسر"]}
name="gender"
label={"جنسیت"}
/>
<div className="mb-2">
<Select
parent={this}
options={[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
]}
name="gradeId"
label={"پایه تحصیلی"}
/>
</div>
) : null}
{this.state.userRoleId === "معلم" ? (
<div className="mb-2">
<MultipleSelector
parent={this}
options={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
name="gradeId"
label={"پایه تحصیلی"}
selectedOptions={this.state.gradeId}
/>
</div>
) : null}
{this.state.userRoleId === "دانش آموز" &&
this.state.gradeId > 9 ? (
<div className="mb-2">
<Select
parent={this}
options={[
"ریاضی",
"تجربی",
"انسانی",
"فنی حرفهای",
"کاردانش",
"معارف",
]}
name="field"
label={"رشته تحصیلی"}
selectedOptions={this.state.gradeId}
/>
</div>
) : null}
<div className="mb-2" style={{ minWidth: "100%" }}>
<Select
parent={this}
@ -144,6 +233,47 @@ class Profile extends Component {
label={"شهرستان"}
/>
</div>
<div className="mb-2">
<Select
parent={this}
options={["chaharbagh", "mahalat"]}
name="zoneId"
label={"شهر/روستا"}
/>
</div>
{this.state.userRoleId === "دانش آموز" ? (
<div className="mb-2">
<Input
parent={this}
name="schoolId"
label={"نام مدرسه"}
/>
</div>
) : null}
{this.state.userRoleId === "معلم" ? (
<div className="mb-2">
<Input
parent={this}
name="schoolId"
label={"محل تدریس"}
/>
</div>
) : null}
<div className="mb-2">
<Input
parent={this}
name="postalCode"
label={"کد پستی"}
align="left"
/>
</div>
<div className="mb-2">
<TextArea
parent={this}
label={"آدرس محل سکونت"}
name="address"
/>
</div>
<div className="auth-profile__box--form__footer d-flex justify-content-center">
<button>ذخیره</button>
</div>
@ -155,24 +285,139 @@ class Profile extends Component {
{window.innerWidth < 1000 ? (
<div className="mobile-auth-profile d-flex flex-column">
<img src={logo} alt="دانوین" />
<h1>حساب کاربری</h1>
<p>لطفا مشحصات خود را به صورت کامل وارد نمایید</p>
<Upload name="file" />
<Input name="name" label="نام و نام خانوادگی" />
<Input name="username" label="نام کاربری" />
<Input name="password" label="رمز عبور" />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>حساب کاربری</h1>
<p style={{ fontSize: fontSize.mobile.p }}>
لطفا مشحصات خود را به صورت کامل وارد نمایید
</p>
<Upload name="file" parent={this} />
<Input
name="firstName"
label="نام"
parent={this}
defaultValue={profile.firstName}
/>
<Input
name="lastName"
label="نام خانوادگی"
parent={this}
defaultValue={profile.lastName}
/>
<Input
name="username"
label="نام کاربری"
parent={this}
align="left"
/>
<Gender
options={["دختر", "پسر"]}
parent={this}
name="gender"
selectedOption={this.state.gender}
/>
<Input
name="nationalId"
label="کد ملی"
parent={this}
align="left"
/>
<Birthdate />
<Gender
parent={this}
options={["معلم", "دانش آموز"]}
name="userRoleId"
selectedOption={this.state.userRoleId}
/>
{this.state.userRoleId === "دانش آموز" ? (
<Select
parent={this}
options={[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
]}
name="gradeId"
label={"پایه تحصیلی"}
/>
) : null}
{this.state.userRoleId === "معلم" ? (
<MultipleSelector
parent={this}
options={[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
]}
name="gradeId"
label={"پایه تحصیلی"}
selectedOptions={this.state.gradeId}
/>
) : null}
{this.state.userRoleId === "دانش آموز" &&
this.state.gradeId.length > 0 ? (
<Select
parent={this}
options={[
"ریاضی",
"تجربی",
"انسانی",
"فنی حرفهای",
"کاردانش",
"معارف",
]}
name="field"
label={"رشته تحصیلی"}
selectedOptions={this.state.gradeId}
/>
) : null}
<Select
parent={this}
options={["karaj", "tehran"]}
name="province"
name="provinceId"
label={"استان"}
/>
<Select
parent={this}
options={["karaj", "tehran"]}
name="city"
name="cityId"
label={"شهرستان"}
/>
<Select
parent={this}
options={["chaharbagh", "mahalat"]}
name="zoneId"
label={"شهر/روستا"}
/>
{this.state.userRoleId === "دانش آموز" ? (
<Input parent={this} name="schoolId" label={"نام مدرسه"} />
) : null}
{this.state.userRoleId === "معلم" ? (
<Input parent={this} name="schoolId" label={"محل تدریس"} />
) : null}
<Input
parent={this}
name="postalCode"
label={"کد پستی"}
align="left"
/>
<TextArea parent={this} label={"آدرس محل سکونت"} name="address" />
<div className="mobile-auth-profile__footer d-flex justify-content-center">
<button onClick={() => this.onSubmit()}>ذخیره</button>

@ -85,16 +85,16 @@
}
.MuiOutlinedInput-input {
padding: 20px 14px !important;
font-size: calc(100vw / 25) !important;
padding: 15px 14px !important;
font-size: calc(100vw / 28) !important;
}
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display: inline !important;
position: absolute;
text-align: right !important;
right: 7px;
top: 20px;
right: 15px;
top: 17px;
padding: 0px !important;
transform: translate(0px, 0px) scale(1) !important;
}
@ -105,14 +105,14 @@
right: 0px;
top: -8px;
transform: translate(0px, 0px) scale(0.85) !important;
padding-right: 0px !important;
padding: 0px 10px !important;
}
label {
background-color: white;
width: fit-content;
text-align: center;
font-size: calc(100vw / 25) !important;
font-size: calc(100vw / 27) !important;
color: #797979 !important;
letter-spacing: -1px;
}
@ -146,7 +146,12 @@
.auth-profile {
width: 100vw;
height: 100vh;
// height: 100vh;
scrollbar-width: 0px;
margin: 50px 0px;
&::-webkit-scrollbar {
display: none;
}
&__box {
width: 100%;
max-width: 1000px;
@ -283,10 +288,21 @@
}
}
.MuiSelect-select:focus {
background-color: white !important;
color: #4d4d4d !important;
}
.MuiFormControl-root {
}
.MuiMenu-list {
option {
font-family: numeralLight !important;
padding: 5px 5px !important;
&:focus:enabled:hover {
background-color: white !important;
}
}
}
.MuiSelect-root {

@ -1,5 +1,5 @@
.auth{
.auth {
width: 100%;
height: 100vh;
min-height: 100vh;
overflow-x: hidden;
}
}

Loading…
Cancel
Save