reza added some option to profile

src/views/Auth/Profile/Birthdate/index.js

@@ -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}
+    />
+  );
+};

src/views/Auth/Profile/Birthdate/index.scss

@@ -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;
+    }
+  }
+}

src/views/Auth/Profile/GenderSwitch/index.js

@@ -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}
     </>

src/views/Auth/Profile/GenderSwitch/index.scss

@@ -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;
+  }
+}

src/views/Auth/Profile/MultipleSelector/index.js

@@ -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}
+    </>
+  );
+}

src/views/Auth/Profile/MultipleSelector/index.scss

@@ -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;
+  }
+}

src/views/Auth/Profile/Select/index.js

@@ -41,6 +41,39 @@ export default function CustomizedSelects(props) {
   const classes = useStyles();
   const { parent } = props;
   return (
+    <>
+      {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">
@@ -70,5 +103,7 @@ export default function CustomizedSelects(props) {
             }}
           />
         </div>
+      ) : null}
+    </>
   );
 }

src/views/Auth/Profile/index.js

@@ -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) => {
+    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 === "دانش آموز" ? (
+                    <div className="mb-2">
                       <Select
                         parent={this}
-                      options={["دختر", "پسر"]}
-                      name="gender"
-                      label={"جنسیت"}
+                        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>

src/views/Auth/Profile/index.scss

@@ -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 {

src/views/Auth/index.scss

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