reza fixed qr

master
RezaAshrafi77 4 years ago
parent f5325128b4
commit 250ab86004
  1. 14
      src/AppRouter.js
  2. 2
      src/Redux/reducers/qr.js
  3. 22
      src/components/Loader/index.js
  4. 3
      src/views/Auth/Profile/Input/index.js
  5. 633
      src/views/Auth/Profile/index.js
  6. 4
      src/views/Home/index.js
  7. 55
      src/views/QR/index.js
  8. 11
      src/views/QR/index.scss

@ -31,13 +31,13 @@ class AppRouter extends Component {
let home = ( let home = (
<Route exact path={"/"}> <Route exact path={"/"}>
{proxy.status() ? ( {proxy.status() ? (
// this.props.profile.username ? ( this.props.profile.username ? (
// <Home /> <Home />
// ) : ( ) : (
// <Auth page={"profile"} /> <Auth page={"profile"} />
// ) )
<Home />
) : ( ) : (
// <Home />
<Auth /> <Auth />
)} )}
</Route> </Route>
@ -102,7 +102,7 @@ class AppRouter extends Component {
export default connect( export default connect(
(state) => ({ (state) => ({
profile: state.user.status.profile || {}, profile: state.user.status || state.user.status.profile || {},
// status: state.user.status, // status: state.user.status,
}), }),
{} {}

@ -18,7 +18,7 @@ export default function qr(state = initialState, action) {
return { return {
...state, ...state,
loading: false, loading: false,
list: data.content, list: data,
error: null, error: null,
}; };
///////////// /////////////

@ -0,0 +1,22 @@
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import CircularProgress from "@material-ui/core/CircularProgress";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
"& > * + *": {
marginLeft: theme.spacing(2),
},
},
}));
export default function CircularIndeterminate() {
const classes = useStyles();
return (
<div className={classes.root}>
<CircularProgress />
</div>
);
}

@ -19,6 +19,7 @@ export default function FormPropsTextFields(props) {
const classes = useStyles(); const classes = useStyles();
const { parent, defaultValue } = props; const { parent, defaultValue } = props;
console.log(defaultValue[props.name]);
return ( return (
<form className={classes.root} noValidate autoComplete="off"> <form className={classes.root} noValidate autoComplete="off">
<div> <div>
@ -28,7 +29,7 @@ export default function FormPropsTextFields(props) {
label={props.label} label={props.label}
variant="outlined" variant="outlined"
onChange={(e) => parent.onChange(e.target.name, e.target.value)} onChange={(e) => parent.onChange(e.target.name, e.target.value)}
defaultValue={defaultValue} defaultValue={defaultValue[props.name]}
/> />
</div> </div>
</form> </form>

@ -9,6 +9,7 @@ import Upload from "./Upload/index";
import Gender from "./GenderSwitch/index"; import Gender from "./GenderSwitch/index";
import Birthdate from "./Birthdate/index"; import Birthdate from "./Birthdate/index";
import MultipleSelector from "./MultipleSelector/index"; import MultipleSelector from "./MultipleSelector/index";
import Loader from "~/components/Loader/index";
import logo from "../../../assets/icons/logo.png"; import logo from "../../../assets/icons/logo.png";
import pic from "../../../assets/images/pic.png"; import pic from "../../../assets/images/pic.png";
@ -30,6 +31,7 @@ const fontSize = {
}; };
class Profile extends Component { class Profile extends Component {
state = { state = {
render: false,
file: null, file: null,
firstName: "", firstName: "",
lastName: "", lastName: "",
@ -66,9 +68,17 @@ class Profile extends Component {
} }
}; };
componentDidMount() { async componentDidMount() {
const { getProfile, profile } = this.props; const { getProfile, profile } = this.props;
// getProfile(); getProfile();
}
componentDidUpdate(prevProps) {
if (prevProps.profile !== this.props.profile) {
this.setState({
render: true,
});
}
} }
onSubmit = async (e) => { onSubmit = async (e) => {
@ -103,340 +113,366 @@ class Profile extends Component {
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<div className="auth-profile d-flex justify-content-center"> !this.props.loading ? (
<div className="auth-profile__box d-flex flex-column p-4"> <div className="auth-profile d-flex justify-content-center">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>حساب کاربری</h1> <div className="auth-profile__box d-flex flex-column p-4">
<p style={{ fontSize: fontSize.desktop.p }}> <h1 style={{ fontSize: fontSize.desktop.h1 }}>حساب کاربری</h1>
لطفا مشخصات خود را به صورت کامل نمایید. <p style={{ fontSize: fontSize.desktop.p }}>
</p> لطفا مشخصات خود را به صورت کامل نمایید.
<form </p>
className="auth-profile__box--form d-flex" <form
onSubmit={(e) => this.onSubmit(e)} className="auth-profile__box--form d-flex"
> onSubmit={(e) => this.onSubmit(e)}
<div style={{ width: "48%" }}> >
<div className="mb-2 d-flex justify-content-center"> <div style={{ width: "48%" }}>
<Upload name="file" parent={this} /> <div className="mb-2 d-flex justify-content-center">
</div> <Upload name="file" parent={this} />
<div className="mb-2"> </div>
<Input <div className="mb-2">
name="firstName" <Input
label="نام" name="firstName"
parent={this} label="نام"
defaultValue={profile.firstName} parent={this}
/> defaultValue={profile.firstName}
</div> />
<div className="mb-2"> </div>
<Input <div className="mb-2">
name="lastName" <Input
label="نام خانوادگی" name="lastName"
parent={this} label="نام خانوادگی"
defaultValue={profile.lastName} parent={this}
/> defaultValue={profile.lastName}
</div> />
<div className="mb-2"> </div>
<Input <div className="mb-2">
name="username" <Input
label="نام کاربری" name="username"
parent={this} label="نام کاربری"
defaultValue={profile.username} parent={this}
align="left" defaultValue={profile.username}
/> align="left"
</div> />
</div>
<div className="mb-2"> <div className="mb-2">
<Gender <Gender
options={["دختر", "پسر"]} options={["دختر", "پسر"]}
parent={this} parent={this}
name="gender" name="gender"
selectedOption={this.state.gender} selectedOption={this.state.gender}
/> />
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Input <Input
name="nationalId" name="nationalId"
label="کد ملی" label="کد ملی"
parent={this} parent={this}
align="left" align="left"
/> />
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Birthdate /> <Birthdate />
</div> </div>
{/* <div className="mb-2"> {/* <div className="mb-2">
<Input name="password" label="رمز عبور" parent={this} /> <Input name="password" label="رمز عبور" parent={this} />
</div> */} </div> */}
</div>
<div style={{ width: "48%" }}>
<div className="mb-2" style={{ minWidth: "100%" }}>
<Gender
parent={this}
options={["معلم", "دانش آموز"]}
name="userRoleId"
label={"عنوان"}
selectedOption={this.state.userRoleId}
/>
</div> </div>
{this.state.userRoleId === "دانش آموز" ? ( <div style={{ width: "48%" }}>
<div className="mb-2"> <div className="mb-2" style={{ minWidth: "100%" }}>
<Gender
parent={this}
options={["معلم", "دانش آموز"]}
name="userRoleId"
label={"عنوان"}
selectedOption={this.state.userRoleId}
/>
</div>
{this.state.userRoleId === "دانش آموز" ? (
<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 <Select
parent={this} parent={this}
options={[ options={["karaj", "tehran"]}
"1", name="province"
"2", label={"استان"}
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
]}
name="gradeId"
label={"پایه تحصیلی"}
/> />
</div> </div>
) : null}
{this.state.userRoleId === "معلم" ? (
<div className="mb-2"> <div className="mb-2">
<MultipleSelector <Select
parent={this} parent={this}
options={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]} options={["karaj", "tehran"]}
name="gradeId" name="city"
label={"پایه تحصیلی"} label={"شهرستان"}
selectedOptions={this.state.gradeId}
/> />
</div> </div>
) : null}
{this.state.userRoleId === "دانش آموز" &&
this.state.gradeId > 9 ? (
<div className="mb-2"> <div className="mb-2">
<Select <Select
parent={this} parent={this}
options={[ options={["chaharbagh", "mahalat"]}
"ریاضی", name="zoneId"
"تجربی", label={"شهر/روستا"}
"انسانی",
"فنی حرفهای",
"کاردانش",
"معارف",
]}
name="field"
label={"رشته تحصیلی"}
selectedOptions={this.state.gradeId}
/> />
</div> </div>
) : null} {this.state.userRoleId === "دانش آموز" ? (
<div className="mb-2">
<div className="mb-2" style={{ minWidth: "100%" }}> <Input
<Select parent={this}
parent={this} name="schoolId"
options={["karaj", "tehran"]} label={"نام مدرسه"}
name="province" />
label={"استان"} </div>
/> ) : null}
</div> {this.state.userRoleId === "معلم" ? (
<div className="mb-2"> <div className="mb-2">
<Select <Input
parent={this} parent={this}
options={["karaj", "tehran"]} name="schoolId"
name="city" label={"محل تدریس"}
label={"شهرستان"} />
/> </div>
</div> ) : null}
<div className="mb-2">
<Select
parent={this}
options={["chaharbagh", "mahalat"]}
name="zoneId"
label={"شهر/روستا"}
/>
</div>
{this.state.userRoleId === "دانش آموز" ? (
<div className="mb-2"> <div className="mb-2">
<Input <Input
parent={this} parent={this}
name="schoolId" name="postalCode"
label={"نام مدرسه"} label={"کد پستی"}
align="left"
/> />
</div> </div>
) : null}
{this.state.userRoleId === "معلم" ? (
<div className="mb-2"> <div className="mb-2">
<Input <TextArea
parent={this} parent={this}
name="schoolId" label={"آدرس محل سکونت"}
label={"محل تدریس"} name="address"
/> />
</div> </div>
) : null} <div className="auth-profile__box--form__footer d-flex justify-content-center">
<div className="mb-2"> <button>ذخیره</button>
<Input </div>
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> </div>
</div> </form>
</form> </div>
</div> </div>
</div> ) : (
<Loader />
)
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-auth-profile d-flex flex-column"> !this.props.loading ? (
<img src={logo} alt="دانوین" /> <div className="mobile-auth-profile d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>حساب کاربری</h1> <img src={logo} alt="دانوین" />
<p style={{ fontSize: fontSize.mobile.p }}> <h1 style={{ fontSize: fontSize.mobile.h1 }}>حساب کاربری</h1>
لطفا مشحصات خود را به صورت کامل وارد نمایید <p style={{ fontSize: fontSize.mobile.p }}>
</p> لطفا مشحصات خود را به صورت کامل وارد نمایید
<Upload name="file" parent={this} /> </p>
<Input <Upload name="file" parent={this} />
name="firstName" <Input
label="نام" name="firstName"
parent={this} label="نام"
defaultValue={profile.firstName} parent={this}
/> defaultValue={profile}
<Input />
name="lastName" <Input
label="نام خانوادگی" name="lastName"
parent={this} label="نام خانوادگی"
defaultValue={profile.lastName} parent={this}
/> defaultValue={profile}
<Input />
name="username" <Input
label="نام کاربری" name="username"
parent={this} label="نام کاربری"
align="left" parent={this}
/> align="left"
<Gender defaultValue={profile}
options={["دختر", "پسر"]} />
parent={this} <Gender
name="gender" options={["دختر", "پسر"]}
selectedOption={this.state.gender} parent={this}
/> name="gender"
<Input selectedOption={this.state.gender}
name="nationalId" />
label="کد ملی" <Input
parent={this} name="nationalId"
align="left" label="کد ملی"
/> parent={this}
<Birthdate /> align="left"
<Gender defaultValue={profile}
parent={this} />
options={["معلم", "دانش آموز"]} <Birthdate />
name="userRoleId" <Gender
selectedOption={this.state.userRoleId} parent={this}
/> options={["معلم", "دانش آموز"]}
{this.state.userRoleId === "دانش آموز" ? ( 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 <Select
parent={this} parent={this}
options={[ options={["karaj", "tehran"]}
"1", name="provinceId"
"2", label={"استان"}
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
]}
name="gradeId"
label={"پایه تحصیلی"}
/> />
) : null} <Select
{this.state.userRoleId === "معلم" ? (
<MultipleSelector
parent={this} parent={this}
options={[ options={["karaj", "tehran"]}
"1", name="cityId"
"2", label={"شهرستان"}
"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 <Select
parent={this} parent={this}
options={[ options={["chaharbagh", "mahalat"]}
"ریاضی", name="zoneId"
"تجربی", label={"شهر/روستا"}
"انسانی",
"فنی حرفهای",
"کاردانش",
"معارف",
]}
name="field"
label={"رشته تحصیلی"}
selectedOptions={this.state.gradeId}
/> />
) : null} {this.state.userRoleId === "دانش آموز" ? (
<Input
<Select parent={this}
parent={this} name="schoolId"
options={["karaj", "tehran"]} label={"نام مدرسه"}
name="provinceId" defaultValue={profile}
label={"استان"} />
/> ) : null}
<Select {this.state.userRoleId === "معلم" ? (
parent={this} <Input
options={["karaj", "tehran"]} parent={this}
name="cityId" name="schoolId"
label={"شهرستان"} label={"محل تدریس"}
/> defaultValue={profile}
<Select />
parent={this} ) : null}
options={["chaharbagh", "mahalat"]} <Input
name="zoneId" parent={this}
label={"شهر/روستا"} name="postalCode"
/> label={"کد پستی"}
{this.state.userRoleId === "دانش آموز" ? ( align="left"
<Input parent={this} name="schoolId" label={"نام مدرسه"} /> defaultValue={profile}
) : null} />
{this.state.userRoleId === "معلم" ? ( <TextArea parent={this} label={"آدرس محل سکونت"} name="address" />
<Input parent={this} name="schoolId" label={"محل تدریس"} /> <div className="mobile-auth-profile__footer d-flex justify-content-center">
) : null} <button onClick={() => this.onSubmit()}>ذخیره</button>
<Input </div>
parent={this} </div>
name="postalCode" ) : (
label={"کد پستی"} <div
align="left" className="d-flex justify-content-center align-items-center"
/> style={{ height: "100vh", width: "100vw" }}
<TextArea parent={this} label={"آدرس محل سکونت"} name="address" /> >
<div className="mobile-auth-profile__footer d-flex justify-content-center"> <Loader />
<button onClick={() => this.onSubmit()}>ذخیره</button>
</div> </div>
</div> )
) : null} ) : null}
</> </>
); );
@ -445,7 +481,8 @@ class Profile extends Component {
export default connect( export default connect(
(state) => ({ (state) => ({
profile: state.user.status.profile || {}, profile: state.user.status || {},
loading: state.user.loading,
}), }),
{ getProfile: user.getProfile, setProfile: user.setProfile } { getProfile: user.getProfile, setProfile: user.setProfile }
)(Profile); )(Profile);

@ -196,7 +196,7 @@ Home.defaultProps = {
design: "flex", design: "flex",
title: "واقعیت افزوده", title: "واقعیت افزوده",
subTitle: "توضیحات مختصر در این رابطه", subTitle: "توضیحات مختصر در این رابطه",
link: "/ar-scan", link: "/ar",
badge: "", badge: "",
flex: 1, flex: 1,
fontSize: "large", fontSize: "large",
@ -319,7 +319,7 @@ Home.defaultProps = {
subTitle: "", subTitle: "",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
link: "/chatroom", link: "/contact",
badge: "", badge: "",
flex: 1, flex: 1,
fontSize: "normal", fontSize: "normal",

@ -152,40 +152,51 @@ class QR extends Component {
<> <>
<div className="mobile-qr d-flex flex-column"> <div className="mobile-qr d-flex flex-column">
<Navbar /> <Navbar />
<div className="d-flex p-3"> {this.props.qrList ? (
{this.state.menu ? ( <div className="d-flex p-3">
<div className="mobile-qr__buttons d-flex flex-column align-items-center"> {this.state.menu ? (
<div> <div className="mobile-qr__buttons d-flex flex-column align-items-center">
<img <div>
src={exit} <img
alt="خروج" src={exit}
alt="خروج"
onClick={() =>
this.setState({ menu: !this.state.menu })
}
/>
</div>
<button>نمایش تمامی محتواها</button>
{qrList.content.map((item, i) => (
<MenuIdentifier data={item} key={i} />
))}
</div>
) : (
<div className="mobile-qr__buttons d-flex flex-column align-items-center">
<MoreVertIcon
style={{ fontSize: 40, color: "grey" }}
onClick={() => onClick={() =>
this.setState({ menu: !this.state.menu }) this.setState({ menu: !this.state.menu })
} }
/> />
</div> </div>
<button>نمایش تمامی محتواها</button> )}
<div className="mobile-qr__content d-flex flex-column">
<div className="mobile-qr-scan__back d-flex mb-2">
<Link to="/">بازگشت</Link>
</div>
{qrList.map((item, i) => ( {qrList.map((item, i) => (
<MenuIdentifier data={item} key={i} /> <Identifier data={item} key={i} />
))} ))}
</div> </div>
) : ( </div>
<div className="mobile-qr__buttons d-flex flex-column align-items-center"> ) : (
<MoreVertIcon <div className="mobile-qr__notAccess d-flex flex-column p-3">
style={{ fontSize: 40, color: "grey" }}
onClick={() => this.setState({ menu: !this.state.menu })}
/>
</div>
)}
<div className="mobile-qr__content d-flex flex-column">
<div className="mobile-qr-scan__back d-flex mb-2"> <div className="mobile-qr-scan__back d-flex mb-2">
<Link to="/">بازگشت</Link> <Link to="/">بازگشت</Link>
</div> </div>
{qrList.map((item, i) => ( <h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
<Identifier data={item} key={i} />
))}
</div> </div>
</div> )}
</div> </div>
</> </>
) : null} ) : null}

@ -6,6 +6,17 @@
direction: rtl; direction: rtl;
padding-top: 70px; padding-top: 70px;
overflow-x: hidden; overflow-x: hidden;
&__notAccess {
justify-content: center;
h1 {
font-size: calc(100vw / 28);
color: #6f7074;
text-align: center;
font-family: numeralLight;
margin-top: calc(100vh / 2 - 150px);
letter-spacing: -1px;
}
}
&__header { &__header {
padding: 0px 10px; padding: 0px 10px;
width: 100%; width: 100%;

Loading…
Cancel
Save