Un bon début
This commit is contained in:
DavidBelisle
parent
5a2f0fa8b0
commit
6d693a3d23
@ -1,9 +1,12 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Dropdown } from "react-bootstrap";
|
||||
import { Button } from "react-bootstrap";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
const Ajouter = ({ onCreation }) => {
|
||||
|
||||
const { register, handleSubmit, formState: { errors } } = useForm();
|
||||
|
||||
const [currentStatus, setStatus] = useState("Disponible");
|
||||
|
||||
const [title, setTitle] = useState("");
|
||||
@ -27,9 +30,7 @@ const Ajouter = ({ onCreation }) => {
|
||||
|
||||
}, [imageFile]);
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault(); // Empêcher de reloader la page au submit.
|
||||
|
||||
const onSubmit = () => {
|
||||
// Appeler le comportement onCreation
|
||||
onCreation({
|
||||
title: title,
|
||||
@ -63,50 +64,86 @@ const Ajouter = ({ onCreation }) => {
|
||||
|
||||
return (
|
||||
<div className="inventaire-form-container">
|
||||
<form className="form-horizontal" onSubmit={handleSubmit}>
|
||||
<form className="form-horizontal" onSubmit={handleSubmit(onSubmit)}>
|
||||
<h4 className="text-center">Ajouter un morceau</h4>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Morceau: </label>
|
||||
<input className="form-control form-input" type='text'
|
||||
<input {...register("title", { required: true, maxLength: 255 })}
|
||||
className="form-control form-input" type='text'
|
||||
placeholder="Nom du morceau..."
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.title && errors.title.type === 'required' && <span>Veuillez entrer un titre de morceaux.</span>}
|
||||
{errors.title && errors.title.type === 'maxLength' && <span>Ne doit pas dépasser 255 caractères!</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Description: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("description", { required: true })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Description du morceau..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.description && errors.description.type === 'required' && <span>Veuillez écrire une description.</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Catégorie: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("category", { required: true })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Catégorie du morceau..."
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.category && errors.category.type === 'required' && <span>Veuillez inscrire une catégorie.</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Prix: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("price", { required: true, min: 0.01, max: 79228162514264337593543950335 })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Prix..."
|
||||
value={price}
|
||||
onChange={(e) => setPrice(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.price && errors.price.type === 'required' && <span>Veuillez entrer un prix.</span>}
|
||||
{errors.price && errors.price.type === 'min' && <span>Minimum 0.01$.</span>}
|
||||
{errors.price && errors.price.type === 'max' && <span>Trop cher... voyons donc!</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Prix promotionnel: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("promoPrice", { required: true, min: 0, max: 79228162514264337593543950335 })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Prix promotionnel..."
|
||||
value={promoPrice}
|
||||
onChange={(e) => setPromoPrice(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.promoPrice && errors.promoPrice.type === 'required' && <span>Veuillez entrer un prix promotionnel.</span>}
|
||||
{errors.promoPrice && errors.promoPrice.type === 'min' && <span>Minimum 0$.</span>}
|
||||
{errors.promoPrice && errors.promoPrice.type === 'max' && <span>Trop cher... voyons donc!</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Quantité: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("quantity", { min: 0 })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Quantité..."
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.quantity && errors.quantity.type === 'min' && <span>Minimum 0.</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Image: </label>
|
||||
<input
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { Dropdown } from "react-bootstrap";
|
||||
import { Button } from "react-bootstrap";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
function renderStatus(statusCode) {
|
||||
if (statusCode !== undefined) {
|
||||
@ -27,6 +28,8 @@ function renderStatus(statusCode) {
|
||||
|
||||
const Modify = ({ morceau, onModify }) => {
|
||||
|
||||
const { register, handleSubmit, formState: { errors } } = useForm();
|
||||
|
||||
const [currentStatus, setStatus] = useState(renderStatus(morceau.status));
|
||||
const [title, setTitle] = useState(morceau.title);
|
||||
const [description, setDescription] = useState(morceau.description);
|
||||
@ -57,9 +60,7 @@ const Modify = ({ morceau, onModify }) => {
|
||||
|
||||
const id = morceau.id;
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault(); // Empêcher de reloader la page au submit.
|
||||
|
||||
const onSubmit = (e) => {
|
||||
// Appeler le comportement
|
||||
onModify({
|
||||
id: morceau.id,
|
||||
@ -87,50 +88,85 @@ const Modify = ({ morceau, onModify }) => {
|
||||
|
||||
return (
|
||||
<div className="inventaire-form-container">
|
||||
<form className="form-horizontal" onSubmit={handleSubmit}>
|
||||
<form className="form-horizontal" onSubmit={handleSubmit(onSubmit)}>
|
||||
<h4 className="text-center">Modifier morceau: {morceau.title}</h4>
|
||||
<div className="form-group">
|
||||
<label>Morceau: </label>
|
||||
<input className="form-control form-input" type='text'
|
||||
<input {...register("title", { required: true, maxLength: 255 })}
|
||||
className="form-control form-input" type='text'
|
||||
placeholder="Nom du morceau..."
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.title && errors.title.type === 'required' && <span>Veuillez entrer un titre de morceaux.</span>}
|
||||
{errors.title && errors.title.type === 'maxLength' && <span>Ne doit pas dépasser 255 caractères!</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Description: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("description", { required: true })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Description du morceau..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.description && errors.description.type === 'required' && <span>Veuillez écrire une description.</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Catégorie: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("category", { required: true })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Catégorie du morceau..."
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.category && errors.category.type === 'required' && <span>Veuillez inscrire une catégorie.</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Prix: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("price", { required: true, min: 0.01, max: 79228162514264337593543950335 })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Prix..."
|
||||
value={price}
|
||||
onChange={(e) => setPrice(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.price && errors.price.type === 'required' && <span>Veuillez entrer un prix.</span>}
|
||||
{errors.price && errors.price.type === 'min' && <span>Minimum 0.01$.</span>}
|
||||
{errors.price && errors.price.type === 'max' && <span>Trop cher... voyons donc!</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Prix promotionnel: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("promoPrice", { required: true, min: 0, max: 79228162514264337593543950335 })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Prix promotionnel..."
|
||||
value={promoPrice}
|
||||
onChange={(e) => setPromoPrice(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.promoPrice && errors.promoPrice.type === 'required' && <span>Veuillez entrer un prix promotionnel.</span>}
|
||||
{errors.promoPrice && errors.promoPrice.type === 'min' && <span>Minimum 0$.</span>}
|
||||
{errors.promoPrice && errors.promoPrice.type === 'max' && <span>Trop cher... voyons donc!</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Quantité: </label>
|
||||
<input type='text' className="form-control form-input"
|
||||
<input {...register("quantity", { min: 0 })}
|
||||
type='text' className="form-control form-input"
|
||||
placeholder="Quantité..."
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value)} />
|
||||
</div>
|
||||
<div className="Error_color">
|
||||
{errors.quantity && errors.quantity.type === 'min' && <span>Minimum 0.</span>}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Image: </label>
|
||||
<input
|
||||
|
||||
@ -7,7 +7,7 @@ export default function App() {
|
||||
const onSubmit = data => console.log(data);
|
||||
|
||||
return (
|
||||
<div className="inventaire-form-container">
|
||||
<div className="form-container">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<h4 className="text-center">Formulaire de commande</h4>
|
||||
<div className="Error_color">
|
||||
|
||||
@ -85,7 +85,7 @@ const Inventaire = () => {
|
||||
const deletedId = await response.json();
|
||||
setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
|
||||
|
||||
onShowAlert('Suppression de:', `${name} avec succès!`);
|
||||
onShowAlert('Suppression de:', `${name} avec succès!`, 2000);
|
||||
}
|
||||
else {
|
||||
console.log("test");
|
||||
@ -134,7 +134,7 @@ const Inventaire = () => {
|
||||
|
||||
if (response.ok) {
|
||||
setMorceaux([...(morceaux.filter((morceau) => morceau.id !== modifiedMorceau.id)), { ...modifiedMorceau }].sort((a, b) => a.id - b.id));
|
||||
onShowAlert('Modification de:', `${modifiedMorceau.title} avec succès!`);
|
||||
onShowAlert('Modification de:', `${modifiedMorceau.title} avec succès!`, 2000);
|
||||
mySwal.fire({
|
||||
title:`Modification de: ${modifiedMorceau.title} avec succès!`,
|
||||
timer: 2000,
|
||||
@ -149,13 +149,13 @@ const Inventaire = () => {
|
||||
|
||||
};
|
||||
|
||||
const onShowAlert = (title, message) => {
|
||||
const onShowAlert = (title, message, time) => {
|
||||
|
||||
setAlertTitle(title);
|
||||
setAlertMessage(message);
|
||||
setShowAlert(true);
|
||||
|
||||
window.setTimeout(() => { setShowAlert(false); }, 2000);
|
||||
window.setTimeout(() => { setShowAlert(false); }, time);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -717,6 +717,13 @@ a {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 3% 5% 3% 5%;
|
||||
color: black;
|
||||
background-color: beige;
|
||||
margin: 1.25%;
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------------------------------------- */
|
||||
/* specification pour les moyennes écrans
|
||||
|
||||
Loading…
Reference in New Issue
Block a user