Un bon début

GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js

@@ -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

GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js

@@ -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

GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js

@@ -1,63 +1,63 @@
 import { useForm } from "react-hook-form";
 
 export default function App() {
-  const { register, handleSubmit, watch, formState: { errors } } = useForm();
-  const onSubmit = data => console.log(data);
+   const { register, handleSubmit, watch, formState: { errors } } = useForm();
+   const onSubmit = data => console.log(data);
 
-  return (
-    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
-    <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="Contact">
-        <h1>Contacter-nous!</h1>
-        <div className="Error_color">
-        <div>
-            <div>
-            <label>Nom*</label>  
-            </div>
-            {/* include validation with required or other standard HTML validation rules */}
-            <input {...register("Nom", { required: true, minLength: 2})} />
-            {/* errors will return when field validation fails  */}
-            <div>
-            {errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
-            {errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
-            </div>
-        </div>
+   return (
+      /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
+      <form onSubmit={handleSubmit(onSubmit)}>
+         <div className="Contact">
+            <h1>Contacter-nous!</h1>
+            <div className="Error_color">
+               <div>
+                  <div>
+                     <label>Nom*</label>
+                  </div>
+                  {/* include validation with required or other standard HTML validation rules */}
+                  <input {...register("Nom", { required: true, minLength: 2 })} />
+                  {/* errors will return when field validation fails  */}
+                  <div>
+                     {errors.Nom && errors.Nom.type === 'required' && <span>Vous devez entrer votre nom!</span>}
+                     {errors.Nom && errors.Nom.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
+                  </div>
+               </div>
 
-         <div>
-            <div>
-            <label>Email*</label>  
-            </div>
-            <input {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
-            <div>
-            {errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse!</span>}
-            {errors.Email && errors.Email.type === 'pattern' && <span>Adresse non valide!</span>}
+               <div>
+                  <div>
+                     <label>Email*</label>
+                  </div>
+                  <input {...register("Email", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
+                  <div>
+                     {errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse!</span>}
+                     {errors.Email && errors.Email.type === 'pattern' && <span>Adresse non valide!</span>}
+                  </div>
+               </div>
+
+               <div>
+                  <div>
+                     <label>Téléphone*</label>
+                  </div>
+                  <input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
+                  <div>
+                     {errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
+                     {errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
+                  </div>
+               </div>
+
+               <div>
+                  <div>
+                     <label>Message</label>
+                  </div>
+                  <textarea {...register("Message")} />
+               </div>
             </div>
+
+
+
+            <input type="submit" value="Contacter" />
          </div>
 
-         <div>
-            <div>
-            <label>Téléphone*</label>  
-            </div>
-            <input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
-            <div>
-            {errors.Téléphone && errors.Téléphone.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
-            {errors.Téléphone && errors.Téléphone.type === 'pattern' && <span>Téléphone non valide!</span>}
-            </div>
-         </div>
-
-         <div>
-            <div>
-            <label>Message</label>  
-            </div>
-            <textarea {...register("Message")} />
-         </div>
-        </div>
-        
-
-      
-        <input type="submit" value="Contacter"/>
-        </div>
-        
-    </form>
-  );
+      </form>
+   );
 }

GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js

@@ -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">

GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js

@@ -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 (

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -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