Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

steps style ok #111

Merged
merged 1 commit into from
Feb 6, 2024
Merged

steps style ok #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion frontend/src/components/Step1.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ function Step1({ tag }) {
return (
<div className="step-one">
<div className="step-one-content content-left">
<h3> Votre recette commence ici... </h3>
<h2>
{" "}
Veuillez remplir les champs ci-dessous avant de passer à l'étape
suivante...{" "}
</h2>
<TextField
label="Nom de votre recette"
value={recipeCreation.recipeName}
Expand Down
108 changes: 55 additions & 53 deletions frontend/src/components/Step2.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,7 @@ export default function Step2({ ingredient }) {
setUnit(ingredientItem.unit);
}
};
/* const handleInputChange = (e) => {
setIngredientName(e.target.value);
const ingredientItem = ingredient.find(
(item) => item.name === e.target.value
);
if (ingredientItem) {
setKcal(ingredientItem.kcal);
setUnit(ingredientItem.unit);
}
}; */

const handleReset = () => {
setIngredientName("");
setQuantity("");
Expand All @@ -70,51 +61,62 @@ export default function Step2({ ingredient }) {
};

return (
<div>
<h1>Step 2</h1>
<Autocomplete
value={ingredientName}
onChange={handleInputChange}
id="ingredient-autocomplete"
options={ingredient.map((option) => option.name)}
/* eslint-disable-next-line react/jsx-props-no-spreading */
renderInput={(params) => <TextField {...params} label="Ingrédient" />}
/>
<TextField
className="quantity"
id="Quantité"
label="Quantité"
helperText="Quantité requise pour la recette"
variant="filled"
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
name="quantity"
/>
<TextField
className="unit"
id="Unité"
label="Unité"
helperText="L'unité de mesure de l'ingrédient"
variant="filled"
value={unit}
onChange={(e) => setUnit(e.target.value)}
name=" unit"
/>
<TextField
className="kcal"
id="Kcal"
label="Kcal"
variant="filled"
value={kcal}
name="kcal"
/>
<Button onClick={() => combineHandler()}> Ajouter l'ingrédient</Button>
<div className="step-two">
<h2> Ajouter tous les ingrédients nécessaires... </h2>
<div className="selection-div">
<Autocomplete
className="ingredient-autocomplete"
value={ingredientName}
onChange={handleInputChange}
id="ingredient-autocomplete"
options={ingredient.map((option) => option.name)}
/* eslint-disable-next-line react/jsx-props-no-spreading */
renderInput={(params) => <TextField {...params} label="Ingrédient" />}
/>
<div className="ingredient-selection">
<TextField
className="quantity"
id="Quantité"
label="Quantité"
helperText="Quantité requise pour la recette"
variant="filled"
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
name="quantity"
/>

<TextField
className="unit"
id="Unité"
label="Unité"
helperText="L'unité de mesure de l'ingrédient"
variant="filled"
value={unit}
onChange={(e) => setUnit(e.target.value)}
name=" unit"
/>
<TextField
className="kcal"
id="Kcal"
label="Kcal"
variant="filled"
value={kcal}
name="kcal"
/>
<Button onClick={() => combineHandler()}>
{" "}
Ajouter l'ingrédient
</Button>
</div>
</div>
<div className="ingredient-list">
{ingredientList.map((item) => (
<div key={item.index}>
<span>{item.name}</span>
<span style={{ margin: "0 10px" }}>{item.quantity}</span>
<span>{item.unit}</span>
<div className="ingredient-item" key={item.index}>
<span className="ingredient-span"> - {item.name} : </span>
<span className="ingredient-span" style={{ margin: "0 10px" }}>
{item.quantity}
</span>
<span className="ingredient-span">{item.unit}</span>
<button
type="button"
onClick={() => handleDeleteIngredient(item.id)}
Expand Down
50 changes: 28 additions & 22 deletions frontend/src/components/Step3.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,31 +33,37 @@ export default function Step3() {
};

return (
<div>
<h1>Step 3</h1>
<TextField
className="instruction"
id="instruction"
maxRows={4}
label="instruction"
helperText="Instruction"
variant="filled"
value={description}
onChange={(e) => setDescription(e.target.value)}
name="quantity"
/>
<Button
onClick={() => {
combineHandler();
}}
>
Ajouter une instruction
</Button>
<div className="step-three">
<h2>
Décrivez les différentes étapes de réalisation de votre recette...
</h2>
<div className="instruction-content">
<TextField
className="instruction-field"
id="instruction"
maxRows={4}
label="instruction"
helperText="Instruction"
variant="filled"
value={description}
onChange={(e) => setDescription(e.target.value)}
name="quantity"
/>
<Button
onClick={() => {
combineHandler();
}}
>
Ajouter une instruction
</Button>
</div>
<div className="instruction-list">
{instructionList.map((item) => (
<div key={item.id}>
<span>{item.name}</span>
<div className="instruction-item" key={item.id}>
<span> Instruction n°{item.id + 1}</span>
<span className="instruction-span-desc">{item.name}</span>
<button
className="delete-instruction"
type="button"
onClick={() => handleDeleteInstruction(item.id)}
>
Expand Down
101 changes: 71 additions & 30 deletions frontend/src/components/Step4.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ function Step4() {
const { recipeCreation } = useRecipeCreation();
const [insertId, setInsertId] = useState(null);
const [selectedFile, setSelectedFile] = useState(null);
const [selectedFileUrl, setselectedFileUrl] = useState(null);

console.info({ ingredientList, instructionList, recipeCreation, insertId });

Expand All @@ -35,6 +36,17 @@ function Step4() {
const handleFileInput = (e) => {
setSelectedFile(e.target.files[0]);
};
const handleImageUpload = (e) => {
if (e.target.files && e.target.files[0]) {
const imgFile = e.target.files[0];
setselectedFileUrl(URL.createObjectURL(imgFile));
}
};

const combineImagehandler = (e) => {
handleFileInput(e);
handleImageUpload(e);
};
const handlePostRecipe = async () => {
try {
const formData = new FormData();
Expand Down Expand Up @@ -114,37 +126,66 @@ function Step4() {
}, [insertId]);

return (
<div>
<h1>Step 4</h1>
<Typography>
{" "}
Sélectionnez une image pour illustrer votre recette !
</Typography>
<input type="file" onChange={handleFileInput} />
<div className="recipe-name">
.{recipeName} {recipeDesc}
{prepTime}
{nbPeople}
{tag1}
{tag2}
{tag3}
{difficulty}
</div>
<div className="ingredient-list">
{ingredientList.map((item) => (
<div key={item.id} value={item.name}>
{item.name}, {item.quantity} {item.unit}
</div>
))}
</div>
<div className="instruction-list">
{instructionList.map((item) => (
<div key={item.id}>
<span>{item.name}</span>
</div>
))}
<div className="step-four">
<div className="step-four-content">
<h1>Vérifiez avant de valider...</h1>
<Typography>
{" "}
Sélectionnez une image pour illustrer votre recette !
</Typography>
<input type="file" onChange={combineImagehandler} />
{selectedFileUrl ? (
<img
src={selectedFileUrl}
alt="Preview"
style={{
maxWidth: "500px",
maxHeight: "500px",
objectFit: "cover",
}}
/>
) : null}
<div className="recipe-name">
<span className="item-span-title">
{" "}
Nom de la recette : {recipeName}{" "}
</span>
<span className="item-span-desc"> Description: {recipeDesc} </span>
<span className="item-span-prop">
{" "}
Temps de préparation: {prepTime}{" "}
</span>
<span className="item-span-prop">
{" "}
Nombre de participants: {nbPeople}{" "}
</span>
<span className="item-span-prop"> Tag 1: {tag1} </span>
<span className="item-span-prop"> Tag 2: {tag2} </span>
<span className="item-span-prop"> Tag 3: {tag3} </span>
<span className="item-span-prop"> Difficulté: {difficulty} </span>
</div>
<div className="ingredient-list">
<span className="ingredients-title">Ingrédients: </span>
{ingredientList.map((item) => (
<div key={item.id} value={item.name}>
- {item.name}, {item.quantity} {item.unit}
</div>
))}
</div>
<div className="instruction-list">
<span className="instructions-title">Instructions: </span>
{instructionList.map((item) => (
<div key={item.id}>
<span> - {item.name}</span>
</div>
))}
</div>
</div>
<button type="submit" onClick={() => handlePostRecipe()}>
<button
className="submit-recipe"
type="submit"
onClick={() => handlePostRecipe()}
>
Poster la recette
</button>
</div>
Expand Down
20 changes: 11 additions & 9 deletions frontend/src/pages/CreateRecipe.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,17 @@ export default function CreateRecipe() {
return (
<div className="body-content create-page">
<Box>
<Stepper activeStep={activeStep}>
{steps.map((label) => {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
);
})}
</Stepper>
<div className="stepper">
<Stepper activeStep={activeStep}>
{steps.map((label) => {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
);
})}
</Stepper>
</div>
{activeStep > 3 && (
<>
<Typography sx={{ mt: 2, mb: 1 }}>
Expand Down
Loading
Loading