update 13 files

master
Reza_ashrafi 2 years ago
parent 9711959824
commit f5ba1596b0
  1. 2
      src/components/Navbar/index.js
  2. 1
      src/components/Select/index.js
  3. 1
      src/components/StarRating/index.js
  4. 4
      src/views/Address/index.js
  5. 119
      src/views/Auth/Profile/Birthdate/index.js
  6. 70
      src/views/Auth/Profile/Upload/index.js
  7. 331
      src/views/Auth/Profile/index.js
  8. 7
      src/views/Dashboard/layouts/Main/index.js
  9. 1
      src/views/Home/Portrait/Private/index.js
  10. 3
      src/views/ShoppingCart/index.js

@ -61,8 +61,6 @@ function Navbar({
);
}, [headerOptions, userFavoriteList]);
console.log(Boolean(isActiveBookmark));
useEffect(() => {
if (window.scrollY === 0) {
setTop(() => true);

@ -13,7 +13,6 @@ function Select({
width = "w-1/2",
selectProvince,
}) {
console.log({ options });
return (
<div
className={`inline-block ${width} relative group rounded-md overflow-hidden ${margin} bg-transparent`}

@ -19,7 +19,6 @@ function StarRating({
const [rate, setRating] = React.useState(null);
useMemo(() => {
//console.log("gl2");
// if (isLogin && !userProducts.length) getUserProducts();
}, []);

@ -48,7 +48,6 @@ export const Address = ({
const [addressFields, setAddressFields] = useState({});
const [mapAddress, setMapAddress] = useState(null);
const navigation = useNavigate();
console.log({ provinces });
useEffect(() => {
setHeaderOptions(headerOptions);
if (province.length <= 1) {
@ -98,7 +97,6 @@ export const Address = ({
useEffect(() => {
if (addressFields?.provinceId) {
console.log({ addressFields });
getCity({
provinceId: addressFields?.provinceId,
});
@ -114,7 +112,6 @@ export const Address = ({
}, [profileFields]);
const onChange = (name, value) => {
console.log({ name, value });
setAddressFields({ ...addressFields, [name]: value });
};
@ -296,7 +293,6 @@ export const Address = ({
</div>
);
};
console.log({ state: location?.state });
return (
<div

@ -1,61 +1,86 @@
import React, { useState } from "react";
import React from "react";
import onInput from "../../../../utils/onInput";
import Input from "../../../../components/Input/index";
import { connect } from "react-redux";
import moment from "jalali-moment";
function Birthdate({ value, name, onChange, isDesktop, ...props }) {
const [isFocused, setIsFocused] = React.useState(false);
export default function Birthdate({ defaultValue, name, ...props }) {
let momentDate = moment(defaultValue[name]);
let isvalid = momentDate.isValid();
const day = isvalid ? momentDate.format("jDD") : null,
month = isvalid ? momentDate.format("jMM") : null,
year = isvalid ? momentDate.format("jYYYY") : null;
const [state, setState] = useState({ day, month, year });
const onChange = (_name, value) => {
let _state = { ...state, [_name]: value };
setState(_state);
props.onChange(
name,
moment
.from(`${_state.year}/${_state.month}/${_state.day}`, "fa", "YYYY/M/D")
.locale("en")
);
};
return (
<div className="birthdate d-flex justify-content-between align-items-center">
<label>{window.t("تاریخ تولد")} </label>
<div className="mobile-birthdate__date d-flex align-items-center">
<Input
variant="standard"
<div className="flex bg-background relative justify-center lg:w-full border border-solid focus:border-blueMarine dark:focus:border-blueCurious border-surfaceBorder rounded-md py-4 px-4">
{isDesktop && (
<label
className={`text-tiny text-blueMarine bg-background dark:bg-grayDarkJungle font-4 right-4 absolute transform -translate-y-1/2 transition-all ${
isFocused
? "top-0 text-blueMarine text-sm dark:text-blueCurious"
: "top-1/2 text-grayBattleShip text-tiny"
}`}
onClick={() => setIsFocused(true)}
>
تاریخ تولد
</label>
)}
<div className="flex items-center">
<input
type="text"
inputMode="numeric"
name="day"
placeholder={window.t("روز")}
maxLength={2}
onInput={onInput.dayHandler}
onChange={onChange}
defaultValue={state}
className="w-20 text-center ltr text-sm lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white"
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
onChange={(e) =>
onChange(name, {
...value,
day: onInput.dayHandler(e.target.value),
})
}
placeholder="روز"
maxLength="2"
value={value?.day}
/>
<span>/</span>
<Input
variant="standard"
<span className="mx-4 text-gray-300">/</span>
<input
type="text"
inputMode="numeric"
name="month"
placeholder={window.t("ماه")}
maxLength={2}
onInput={onInput.monthHandler}
onChange={onChange}
defaultValue={state}
className="w-20 text-center text-sm ltr lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white"
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
onChange={(e) =>
onChange(name, {
...value,
month: onInput.monthHandler(e.target.value),
})
}
placeholder="ماه"
maxLength="2"
value={value?.month}
/>
<span>/</span>
<Input
variant="standard"
<span className="mx-4 text-gray-300">/</span>
<input
type="text"
inputMode="numeric"
name="year"
placeholder={window.t("سال")}
maxLength={4}
onInput={onInput.yearHandler}
onChange={onChange}
defaultValue={state}
className="w-20 text-center text-sm ltr lg:text-tiny outline-none bg-gray-50 dark:bg-opacity-10 dark:text-white"
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
onChange={(e) =>
onChange(name, {
...value,
year: onInput.yearHandler(e.target.value),
})
}
placeholder="سال"
maxLength="4"
value={value?.year}
/>
</div>
</div>
);
}
const mapStateToProps = (state) => ({
isDesktop: state.config.device === "desktop",
});
export default connect(mapStateToProps)(Birthdate);

@ -1,27 +1,55 @@
import React from "react";
import React, { useState, useMemo } from "react";
import { connect } from "react-redux";
//assets
export default function Upload({ name, value, onChange, label }) {
const reader = new FileReader();
function Upload({ name, value: initValue, onChange }) {
const [loaded, setSelected] = useState(null);
reader.onload = (e) => setSelected(e.target.result);
const value = loaded || initValue;
useMemo(() => {
setSelected(null);
}, [initValue]);
return (
<div className="profile-upload d-flex justify-content-center align-items-center mb-3">
<>
{value === null ? (
<></>
) : (
<img
src={
value.name
? URL.createObjectURL(value)
: window.baseURL + "file/" + value
}
alt={window.t("کاربر")}
/>
)}
<input
type="file"
name={name}
onChange={(e) => onChange(e.target.name, e.target.files[0])}
<div className="flex justify-center bg-surface rounded-full items-center overflow-hidden relative max-w-[100px] max-h-[100px] w-[100px] h-[100px]">
<div
className={`h-full w-full rounded-full flex justify-center items-center ${
value ? "" : "bg-surface"
}`}
>
<img
src={
value
? value?.indexOf("data") > -1
? value
: "https://iranesch.com/api/v1/file/" + value
: "/icons/camera-white.svg"
}
alt=""
className={`rounded-full ${
value ? "w-full object-contain " : "w-2/5 object-contain"
} ${isNaN(value) ? "grayscale" : ""}`}
/>
</>
</div>
{value && (
<div className="rounded-full flex justify-center bg-surface items-center absolute right-0 bottom-0 w-7 h-7 z-20">
<img src={"/icons/camera-white.svg"} alt="camera" className="w-2/3" />
</div>
)}
<input
type="file"
name={name}
className="w-full h-full opacity-0 absolute top-0 left-0"
onChange={(e) => {
reader.readAsDataURL(e.target.files[0]);
onChange(e.target.name, e.target.files[0]);
}}
/>
</div>
);
}
const mapStateToProps = (state) => ({
});
export default connect(mapStateToProps)(Upload);

@ -3,10 +3,12 @@ import { useNavigate } from "react-router-dom";
import onInput from "../../../utils/onInput";
import { user, file, publicApi } from "../../../redux/actions";
import { connect } from "react-redux";
import moment from "jalali-moment";
import Select from "../../../components/Select";
import Input from "../../../components/Input";
import TextArea from "../../../components/Textarea";
import Button from "../../../components/Button";
import Upload from "./Upload";
import Gender from "./GenderSwitch";
import Birthdate from "./Birthdate";
@ -17,52 +19,68 @@ function Profile({
isMobile,
profile,
uploads,
uploadId,
upload,
getProvince,
getCity,
setDone,
upload,
setProfile,
province,
provinceList,
cityList,
setHeaderOptions,
loading,
}) {
let navigate = useNavigate();
const [render, setRender] = useState(false);
const [formData, setFormData] = useState({
file: uploads["file"] || profile.picFileId || null,
picFileId: uploads["file"] || profile.picFileId || null,
docFileIds: uploads["docFileIds"] || profile.docFileIds || "",
firstName: profile.firstName || "",
lastName: profile.lastName || "",
password: profile.password || "",
username: profile.username || "",
address: profile.address || "",
email: profile.email || "",
birthDate: profile.birthDate || "",
gender: profile.gender || 1,
status: profile.status || 1,
nationalId: profile.nationalId || "",
phone: profile.phone || "",
schools: profile.schools || null,
zoneId: profile.zoneId || "",
schoolId: profile.schoolId || "",
postalCode: profile.postalCode || "",
gradeIds: profile.gradeIds || [],
provinceId: profile.provinceId || null,
cityId: profile.cityId || null,
});
const [formData, setFormData] = useState(null);
useEffect(() => {
if (user) {
const momentDate = moment(profile?.birthDate);
const isValid = momentDate.isValid();
setFormData({
file: uploads["file"] || profile.picFileId,
picFileId: uploads["file"] || profile.picFileId,
docFileIds: uploads["docFileIds"] || profile.docFileIds,
firstName: profile.firstName,
lastName: profile.lastName,
password: profile.password,
username: profile.username,
address: profile.address,
email: profile.email,
birthDate: {
day: isValid ? moment(profile?.birthDate).format("jDD") : null,
month: isValid ? moment(profile?.birthDate).format("jMM") : null,
year: isValid ? moment(profile?.birthDate).format("jYYYY") : null,
},
gender: profile.gender || 1,
status: profile.status || 1,
nationalId: profile.nationalId || "",
phone: profile.phone || "",
schools: profile.schools || null,
zoneId: profile.zoneId || "",
schoolId: profile.schoolId || "",
postalCode: profile.postalCode || "",
gradeIds: profile.gradeIds || [],
provinceId: profile.provinceId || null,
cityId: profile.cityId || null,
});
}
}, [user]);
useEffect(() => {
setHeaderOptions({
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
back: false,
shown: true,
menu: false,
});
if (!isMobile) {
setHeaderOptions({
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
back: false,
shown: true,
menu: false,
});
}
getProvince();
getCity({ provinceId: profile.provinceId });
}, []);
@ -135,7 +153,7 @@ function Profile({
} else if (name === "status") {
setFormData({
...formData,
gradeIds: formData.gradeIds?.slice(0, 1) || [],
gradeIds: formData?.gradeIds?.slice(0, 1) || [],
[name]: value,
});
} else if (name === "docFileIds") {
@ -208,7 +226,7 @@ function Profile({
<div className="mobile justify-content-center">
<Upload
name="file"
value={formData.file}
value={formData?.file}
onChange={onChange}
label={window.t("فایل")}
/>
@ -219,7 +237,7 @@ function Profile({
<div className="mb-2 desktop justify-content-center">
<Upload
name="file"
value={formData.file}
value={formData?.file}
onChange={onChange}
label={window.t("فایل")}
/>
@ -230,9 +248,11 @@ function Profile({
label={window.t("نام")}
align="right"
onInput={onInput.persianOnly}
defaultValue={formData}
onChange={onChange}
// ref={usernameInput}
value={formData?.firstName}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => val}
/>
</div>
<div className="mb-2">
@ -240,27 +260,34 @@ function Profile({
name="lastName"
label={window.t("نام نام خانوادگی")}
align="right"
defaultValue={formData}
onChange={onChange}
value={formData?.lastName}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
onInput={onInput.persianOnly}
regex={(val) => val}
/>
</div>
<div className="mb-2">
<Input
name="username"
label={window.t("نام کاربری")}
defaultValue={formData}
onChange={onChange}
value={formData?.username}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
align="left"
onInput={onInput.englishAndNumberWithoutSpace}
regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
/>
</div>
<div className="mb-2">
<Gender
options={[window.t("دختر"), window.t("دانش پسر")]}
options={[window.t("دختر"), window.t("پسر")]}
name="gender"
selectedOption={formData.gender}
onChange={onChange}
selectedOption={formData?.gender}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
label=""
/>
</div>
@ -270,25 +297,32 @@ function Profile({
label={window.t("کد ملی/اتباع")}
align="left"
maxLength={13}
defaultValue={formData}
onChange={onChange}
onInput={onInput.numberOnly}
value={formData?.nationalId}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => onInput.numberOnly(val)}
/>
</div>
<div className="mb-2">
<Birthdate
defaultValue={formData}
name="birthDate"
onChange={onChange}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
value={formData?.birthDate}
/>
</div>
<div className="mb-2">
<Input
name="password"
label={window.t("رمز عبور")}
onChange={onChange}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
value={formData?.password}
align="left"
onInput={onInput.englishAndNumberWithoutSpace}
regex={(val) => onInput.englishAndNumberWithoutSpace(val)}
/>
</div>
</div>
@ -298,37 +332,41 @@ function Profile({
options={[window.t("معلم"), window.t("دانش آموز")]}
name="status"
label={window.t("عنوان")}
selectedOption={formData.status}
selectedOption={formData?.status}
onChange={onChange}
/>
</div>
{formData.status === 1 ? (
{formData?.status === 1 ? (
<div className="mb-2">
<Select
options={grades}
name="gradeIds"
label={window.t("پایه تحصیلی")}
selectedOptions={formData.gradeIds}
onChange={onChange}
selectedOptions={formData?.gradeIds}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
</div>
) : null}
{formData.status === 2 ? (
{formData?.status === 2 ? (
<div className="mb-2">
<MultipleSelector
options={grades}
name="gradeIds"
label={window.t("پایه تحصیلی")}
selectedOptions={formData.gradeIds}
onChange={onChange}
selectedOptions={formData?.gradeIds}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
align="right"
defaultValue={profile}
/>
</div>
) : null}
{formData.status === window.t("دانش آموز") &&
formData.gradeIds > 9 ? (
{formData?.status === window.t("دانش آموز") &&
formData?.gradeIds > 9 ? (
<div className="mb-2">
<Select
options={[
@ -341,8 +379,10 @@ function Profile({
]}
name="field"
label={window.t("رشته تحصیلی")}
selectedOptions={formData.gradeIds}
onChange={onChange}
selectedOptions={formData?.gradeIds}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
</div>
) : null}
@ -351,8 +391,10 @@ function Profile({
options={provinceList}
name="provinceId"
label={window.t("استان")}
selectedOptions={formData.provinceId}
onChange={onChange}
selectedOptions={formData?.provinceId}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
</div>
<div className="mb-2">
@ -360,36 +402,42 @@ function Profile({
options={cityList}
name="cityId"
label={window.t("شهرستان")}
selectedOptions={formData.cityId}
onChange={onChange}
selectedOptions={formData?.cityId}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
</div>
{formData.status == 1 ? (
{formData?.status == 1 ? (
<div className="mb-2">
<Input
name="schools"
label={window.t("نام مدرسه")}
defaultValue={formData}
onInput={onInput.persianOnly}
onChange={onChange}
value={formData?.schoolId}
regex={(val) => onInput.persianOnly(val)}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
</div>
) : null}
{formData.status == 2 ? (
{formData?.status == 2 ? (
<div className="mb-2">
<Input
name="schools"
label={window.t("محل تدریس")}
defaultValue={formData}
onInput={onInput.persianOnly}
regex={(val) => onInput.persianOnly(val)}
onChange={onChange}
/>
</div>
) : null}
{formData.status == 2 ? (
{formData?.status == 2 ? (
<Document
onChange={onChange}
defaultValue={formData}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
value={formData?.docFileIds}
name="docFileIds"
/>
) : null}
@ -401,16 +449,18 @@ function Profile({
onChange={onChange}
maxLength={10}
inputMode="numeric"
defaultValue={formData}
onInput={onInput.numberOnly}
value={formData?.postalCode}
regex={(val) => onInput.numberOnly(val)}
/>
</div>
<div className="mb-2">
<TextArea
placeholder={window.t("آدرس محل سکونت")}
name="address"
defaultValue={formData}
onChange={onChange}
value={formData?.address}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
/>
</div>
<div className="profile__box--form__footer d-flex justify-content-center">
@ -421,19 +471,106 @@ function Profile({
</main>
</div>
) : (
<ul className="flex flex-col flex-1">
<li className="flex gap-5">
<div className="flex flex-col w-4/12">
<strong>{window.t(" اطلاعات هویتی")}</strong>
<p>
{window.t(
" لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید"
)}
</p>
</div>
<div className="flex w-8/12"></div>
</li>
</ul>
<div
className="flex flex-col items-center gap-5 w-full pt-5"
onSubmit={(e) => onSubmit()}
>
<Upload
name="file"
value={String(uploadId || formData?.picFileId)}
onChange={onChange}
label="فایل"
/>
<br />
<div
className={`w-full gap-5 lg:flex lg:flex-row lg:my-2 lg:items-center flex flex-col`}
>
<Input
name="firstName"
label={window.t("نام")}
align="right"
onInput={onInput.persianOnly}
value={formData?.firstName}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => val}
/>
<Input
name="lastName"
label="نام خانوادگی"
align="right"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={(val) => val}
padding="py-4"
value={formData?.lastName}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="cellphone"
label="شماره تلفن همراه"
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={onInput.numberOnly}
value={formData?.cellphone}
maxLength={11}
direction={"ltr"}
/>
<Input
name="nationalId"
label="کدملی"
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={onInput.numberOnly}
value={formData?.nationalId}
maxLength={10}
direction={"ltr"}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Input
name="email"
label="ایمیل"
align="left"
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
regex={onInput.englishAndNumberWithoutSpace}
value={formData?.email}
/>
<Birthdate
name="birthDate"
onChange={(name, value) => setProfile({ name, value })}
value={formData?.birthDate}
/>
</div>
<div
className={`w-full flex lg:flex-row flex-col gap-5 lg:my-2 lg:items-center`}
>
<Gender
options={[window.t("دختر"), window.t("پسر")]}
name="gender"
selectedOption={formData?.gender}
onChange={(name, value) =>
setFormData({ ...formData, [name]: value })
}
label=""
/>
<div className="w-full"></div>
</div>
<button onClick={() => onSubmit()}>{window.t("ذخیره")}</button>
</div>
);
}
@ -446,7 +583,7 @@ export default connect(
uploads: state.file.uploads,
provinceList: state.publicApi.province,
cityList: state.publicApi.city,
isMobile: state.publicApi.isMobile,
isMobile: state.config.device === "mobile",
}),
{
getProfile: user.getProfile,

@ -9,6 +9,7 @@ import Ticket from "../../../Contact/layouts/Ticket";
import Favorites from "../../../Favorites/index";
import Addresses from "./Addresses";
import Address from "../../../Address";
import Profile from "../../../Auth/Profile";
const views = {
orders: <Orders />,
@ -21,14 +22,10 @@ const views = {
),
favorites: <Favorites />,
addresses: <Addresses />,
profile: <Address profilePage={true} />,
profile: <Profile />,
};
export const Main = ({ setHeaderOptions, page }) => {
useEffect(() => {
setHeaderOptions({ shown: true });
}, []);
return (
<div
className="overflow-y-scroll overflow-x-hidden flex-1 flex-shrink-0 no-scrollbar pl-5 pb-10 pt-4"

@ -14,7 +14,6 @@ function Private({ getList, products, blogs, getBlogList, grades }) {
if(blogs.length === 0){
getBlogList();
}
// console.log(getBlogList());
}, []);
return (
<div className="w-full flex-1 pb-24">

@ -77,8 +77,7 @@ function ShoppingCart({
accept: () => payFactor({ userId: user.id }),
}),
profile: () => {
console.log("Set profile");
console.log("Go to shaparak");
return null;
},
};
}, [userProducts, user]);

Loading…
Cancel
Save