Skip to content

Commit

Permalink
Merge pull request #48 from golnooshasefi/fix/add-product
Browse files Browse the repository at this point in the history
fix: add product
  • Loading branch information
Mahdi-Ghanbarzadeh authored May 27, 2022
2 parents 785602d + 0439e75 commit f7e0daa
Show file tree
Hide file tree
Showing 7 changed files with 319 additions and 42 deletions.
21 changes: 13 additions & 8 deletions src/components/filter/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ function Filter() {
<div className={classes.Filter}>
<h2 className={classes.Filter__header}>فیلترها</h2>
<ul className={classes.Filter__list}>
<li>
<a href="#/" className={classNames(classes["Filter__list__link"])}>
<i
className={classNames(
classes["Filter__icon"],
"fa-solid fa-heart"
)}
/>
محبوب‌ترین سبک‌ها
</a>
</li>

<li>
<a
href="#/"
Expand Down Expand Up @@ -188,17 +200,10 @@ function Filter() {
سفید
</a>
</li>
{/* </Link> */}
</ul>
</li>
<li>
<a
href="#/"
className={classNames(
// classes["Filter__list__link--active"],
classes["Filter__list__link"]
)}
>
<a href="#/" className={classNames(classes["Filter__list__link"])}>
<i
className={classNames(
classes["Filter__icon"],
Expand Down
22 changes: 11 additions & 11 deletions src/components/shared/Button.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@
border: 1px solid #6668ab;
transition: 0.3s;
}
&--green {
font-size: 1.5rem;
font-weight: bold;
padding: 1rem 2rem;
background-color: #51cf66;
color: #fff;
// border: 1px solid #8ce99a;
// &--green {
// font-size: 1.5rem;
// font-weight: bold;
// padding: 1rem 2rem;
// background-color: #51cf66;
// color: #fff;
// // border: 1px solid #8ce99a;

&:hover {
background-color: #69db7c;
}
}
// &:hover {
// background-color: #69db7c;
// }
// }
}
14 changes: 14 additions & 0 deletions src/pages/SellerPanel/AddProduct/AddProduct.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -82,4 +82,18 @@
}
.btn {
margin-top: 3rem;
font-size: 1.5rem;
font-weight: bold;
padding: 1rem 2rem;
background-color: #51cf66;
color: #fff;
text-decoration: none;
border: none;
border-radius: 5px;
cursor: pointer;
// border: 1px solid #8ce99a;

&:hover {
background-color: #69db7c;
}
}
3 changes: 2 additions & 1 deletion src/pages/SellerPanel/AddProduct/AddProductSurvey.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const questions = [
},
];

function AddProductSurvey() {
function AddProductSurvey({ answersHandler }) {
const [step, setStep] = useState(0);
const [canContinue, setCanContinue] = useState(false);
const [answers, setAnswers] = useState({});
Expand All @@ -91,6 +91,7 @@ function AddProductSurvey() {

const setAnswerHandler = useCallback((id, option) => {
setAnswers((answers) => ({ ...answers, [id]: option }));
answersHandler((answers) => ({ ...answers, [id]: option }));
}, []);
console.log(answers);
const nextClickHandler = () => {
Expand Down
91 changes: 69 additions & 22 deletions src/pages/SellerPanel/AddProduct/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,33 @@ import classes from "./AddProduct.module.scss";
import Button from "../../../components/shared/Button";
import Survey from "./AddProductSurvey";
import AddProductSurvey from "./AddProductSurvey";
import { useState } from "react";

function AddProduct() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
const {
register,
handleSubmit,
formState: { isValid },
} = useForm();

const [answers, setAnswers] = useState([]);
// console.log(1, answers);

let newObject = {};
for (let [key, value] of Object.entries(answers)) {
newObject = {
...newObject,
[`style_param_${key}`]: Array.isArray(value) ? value.join(",") : value,
};
}
const onSubmit = (values) => {
// console.log(data);
const newValues = {
...values,
...newObject,
};
console.log(1, newValues);
};
return (
<>
<div className={classes.container}>
Expand All @@ -17,15 +40,17 @@ function AddProduct() {
</span>
</div>
</div>
<form onSubmit={handleSubmit(onSubmit)} className={classes.form}>
<form className={classes.form}>
{/* <div className={classes.row}> */}
<div className={classes.column}>
<div className={classes.form__group}>
<label className={classes.form__label}>عنوان کالا</label>
<input
type="text"
placeholder="عنوان کالا"
{...register("title")}
{...register("product_name", {
required: true,
})}
className={classes.form__input}
/>
</div>
Expand All @@ -38,7 +63,9 @@ function AddProduct() {
id="color"
list="colors"
placeholder="رنگ محصول"
{...register("title")}
{...register("product_color", {
required: true,
})}
className={classes.form__input}
/>
<datalist id="colors">
Expand All @@ -55,7 +82,9 @@ function AddProduct() {
<input
type="text"
placeholder="قد"
{...register("height")}
{...register("product_height", {
required: true,
})}
className={classes.form__input}
/>
</div>
Expand All @@ -65,7 +94,9 @@ function AddProduct() {
<input
type="text"
placeholder="طرح"
{...register("material")}
{...register("product_design", {
required: true,
})}
className={classes.form__input}
/>
</div>
Expand All @@ -74,7 +105,9 @@ function AddProduct() {
<input
type="number"
placeholder="موجودی"
{...register("material")}
{...register("inventory", {
required: true,
})}
className={classes.form__input}
/>
</div>
Expand All @@ -88,7 +121,9 @@ function AddProduct() {
id="group"
list="groupes"
placeholder="دسته‌بندی "
{...register("group")}
{...register("group", {
required: true,
})}
className={classes.form__input}
/>
<datalist id="groupes">
Expand All @@ -109,7 +144,9 @@ function AddProduct() {
id="size"
list="sizes"
placeholder="سایز محصول"
{...register("size")}
{...register("product_size", {
required: true,
})}
className={classes.form__input}
/>
<datalist id="sizes">
Expand All @@ -123,7 +160,9 @@ function AddProduct() {
<input
type="text"
placeholder="جنس لباس"
{...register("material")}
{...register("product_material", {
required: true,
})}
className={classes.form__input}
/>
</div>
Expand All @@ -133,7 +172,9 @@ function AddProduct() {
<input
type="text"
placeholder="قیمت"
{...register("price")}
{...register("product_price", {
required: true,
})}
className={classes.form__input}
/>
</div>
Expand All @@ -142,7 +183,9 @@ function AddProduct() {
<input
type="text"
placeholder="کشور"
{...register("material")}
{...register("product_country", {
required: true,
})}
className={classes.form__input}
/>
</div>
Expand All @@ -151,19 +194,23 @@ function AddProduct() {
تصویر محصول
<i class="fa-regular fa-file-image"></i>
</label>
<input type="file" {...register("file")} />
<input
type="file"
{...register("upload", {
required: true,
})}
/>
</div>
</div>
{/* </div> */}

{/* <Button color="green" className={classes.btn}>
ثبت
</Button> */}
</form>
{<AddProductSurvey />}
<Button color="green" className={classes.btn}>
<AddProductSurvey answersHandler={setAnswers} />
<button
onClick={handleSubmit(onSubmit)}
className={classes.btn}
// disabled={!isValid}
>
ثبت
</Button>
</button>
</div>
</>
);
Expand Down
Empty file.
Loading

0 comments on commit f7e0daa

Please sign in to comment.