memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Un bon début

Browse Source
This commit is contained in:
DavidBelisle 2022-11-07 16:28:11 -05:00
parent 5a2f0fa8b0
commit 6d693a3d23
6 changed files with 159 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js
View File

@ -1,9 +1,12 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Dropdown } from "react-bootstrap"; import { Dropdown } from "react-bootstrap";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { useForm } from "react-hook-form";
const Ajouter = ({ onCreation }) => { const Ajouter = ({ onCreation }) => {
const { register, handleSubmit, formState: { errors } } = useForm();
const [currentStatus, setStatus] = useState("Disponible"); const [currentStatus, setStatus] = useState("Disponible");
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
@ -27,9 +30,7 @@ const Ajouter = ({ onCreation }) => {
}, [imageFile]); }, [imageFile]);
const handleSubmit = (e) => { const onSubmit = () => {
e.preventDefault(); // Empêcher de reloader la page au submit.
// Appeler le comportement onCreation // Appeler le comportement onCreation
onCreation({ onCreation({
title: title, title: title,
@ -63,50 +64,86 @@ const Ajouter = ({ onCreation }) => {
return ( return (
<div className="inventaire-form-container"> <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> <h4 className="text-center">Ajouter un morceau</h4>
<div className="form-group"> <div className="form-group">
<label>Morceau: </label> <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..." placeholder="Nom du morceau..."
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} /> onChange={(e) => setTitle(e.target.value)} />
</div> </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"> <div className="form-group">
<label>Description: </label> <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..." placeholder="Description du morceau..."
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} /> onChange={(e) => setDescription(e.target.value)} />
</div> </div>
<div className="Error_color">
{errors.description && errors.description.type === 'required' && <span>Veuillez écrire une description.</span>}
</div>
<div className="form-group"> <div className="form-group">
<label>Catégorie: </label> <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..." placeholder="Catégorie du morceau..."
value={category} value={category}
onChange={(e) => setCategory(e.target.value)} /> onChange={(e) => setCategory(e.target.value)} />
</div> </div>
<div className="Error_color">
{errors.category && errors.category.type === 'required' && <span>Veuillez inscrire une catégorie.</span>}
</div>
<div className="form-group"> <div className="form-group">
<label>Prix: </label> <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..." placeholder="Prix..."
value={price} value={price}
onChange={(e) => setPrice(e.target.value)} /> onChange={(e) => setPrice(e.target.value)} />
</div> </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"> <div className="form-group">
<label>Prix promotionnel: </label> <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..." placeholder="Prix promotionnel..."
value={promoPrice} value={promoPrice}
onChange={(e) => setPromoPrice(e.target.value)} /> onChange={(e) => setPromoPrice(e.target.value)} />
</div> </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"> <div className="form-group">
<label>Quantité: </label> <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é..." placeholder="Quantité..."
value={quantity} value={quantity}
onChange={(e) => setQuantity(e.target.value)} /> onChange={(e) => setQuantity(e.target.value)} />
</div> </div>
<div className="Error_color">
{errors.quantity && errors.quantity.type === 'min' && <span>Minimum 0.</span>}
</div>
<div className="form-group"> <div className="form-group">
<label>Image: </label> <label>Image: </label>
<input <input

56
GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
View File

@ -1,6 +1,7 @@
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Dropdown } from "react-bootstrap"; import { Dropdown } from "react-bootstrap";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { useForm } from "react-hook-form";
function renderStatus(statusCode) { function renderStatus(statusCode) {
if (statusCode !== undefined) { if (statusCode !== undefined) {
@ -27,6 +28,8 @@ function renderStatus(statusCode) {
const Modify = ({ morceau, onModify }) => { const Modify = ({ morceau, onModify }) => {
const { register, handleSubmit, formState: { errors } } = useForm();
const [currentStatus, setStatus] = useState(renderStatus(morceau.status)); const [currentStatus, setStatus] = useState(renderStatus(morceau.status));
const [title, setTitle] = useState(morceau.title); const [title, setTitle] = useState(morceau.title);
const [description, setDescription] = useState(morceau.description); const [description, setDescription] = useState(morceau.description);
@ -57,9 +60,7 @@ const Modify = ({ morceau, onModify }) => {
const id = morceau.id; const id = morceau.id;
const handleSubmit = (e) => { const onSubmit = (e) => {
e.preventDefault(); // Empêcher de reloader la page au submit.
// Appeler le comportement // Appeler le comportement
onModify({ onModify({
id: morceau.id, id: morceau.id,
@ -87,50 +88,85 @@ const Modify = ({ morceau, onModify }) => {
return ( return (
<div className="inventaire-form-container"> <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> <h4 className="text-center">Modifier morceau: {morceau.title}</h4>
<div className="form-group"> <div className="form-group">
<label>Morceau: </label> <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..." placeholder="Nom du morceau..."
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} /> onChange={(e) => setTitle(e.target.value)} />
</div> </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"> <div className="form-group">
<label>Description: </label> <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..." placeholder="Description du morceau..."
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} /> onChange={(e) => setDescription(e.target.value)} />
</div> </div>
<div className="Error_color">
{errors.description && errors.description.type === 'required' && <span>Veuillez écrire une description.</span>}
</div>
<div className="form-group"> <div className="form-group">
<label>Catégorie: </label> <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..." placeholder="Catégorie du morceau..."
value={category} value={category}
onChange={(e) => setCategory(e.target.value)} /> onChange={(e) => setCategory(e.target.value)} />
</div> </div>
<div className="Error_color">
{errors.category && errors.category.type === 'required' && <span>Veuillez inscrire une catégorie.</span>}
</div>
<div className="form-group"> <div className="form-group">
<label>Prix: </label> <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..." placeholder="Prix..."
value={price} value={price}
onChange={(e) => setPrice(e.target.value)} /> onChange={(e) => setPrice(e.target.value)} />
</div> </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"> <div className="form-group">
<label>Prix promotionnel: </label> <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..." placeholder="Prix promotionnel..."
value={promoPrice} value={promoPrice}
onChange={(e) => setPromoPrice(e.target.value)} /> onChange={(e) => setPromoPrice(e.target.value)} />
</div> </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"> <div className="form-group">
<label>Quantité: </label> <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é..." placeholder="Quantité..."
value={quantity} value={quantity}
onChange={(e) => setQuantity(e.target.value)} /> onChange={(e) => setQuantity(e.target.value)} />
</div> </div>
<div className="Error_color">
{errors.quantity && errors.quantity.type === 'min' && <span>Minimum 0.</span>}
</div>
<div className="form-group"> <div className="form-group">
<label>Image: </label> <label>Image: </label>
<input <input

108
GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js
View File

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

2
GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js
View File

@ -7,7 +7,7 @@ export default function App() {
const onSubmit = data => console.log(data); const onSubmit = data => console.log(data);
return ( return (
<div className="inventaire-form-container"> <div className="form-container">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<h4 className="text-center">Formulaire de commande</h4> <h4 className="text-center">Formulaire de commande</h4>
<div className="Error_color"> <div className="Error_color">

8
GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
View File

@ -85,7 +85,7 @@ const Inventaire = () => {
const deletedId = await response.json(); const deletedId = await response.json();
setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId)); setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
onShowAlert('Suppression de:', `${name} avec succès!`); onShowAlert('Suppression de:', `${name} avec succès!`, 2000);
} }
else { else {
console.log("test"); console.log("test");
@ -134,7 +134,7 @@ const Inventaire = () => {
if (response.ok) { if (response.ok) {
setMorceaux([...(morceaux.filter((morceau) => morceau.id !== modifiedMorceau.id)), { ...modifiedMorceau }].sort((a, b) => a.id - b.id)); 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({ mySwal.fire({
title:`Modification de: ${modifiedMorceau.title} avec succès!`, title:`Modification de: ${modifiedMorceau.title} avec succès!`,
timer: 2000, timer: 2000,
@ -149,13 +149,13 @@ const Inventaire = () => {
}; };
const onShowAlert = (title, message) => { const onShowAlert = (title, message, time) => {
setAlertTitle(title); setAlertTitle(title);
setAlertMessage(message); setAlertMessage(message);
setShowAlert(true); setShowAlert(true);
window.setTimeout(() => { setShowAlert(false); }, 2000); window.setTimeout(() => { setShowAlert(false); }, time);
} }
return ( return (

7
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -717,6 +717,13 @@ a {
color: green; color: green;
} }
.form-container {
padding: 3% 5% 3% 5%;
color: black;
background-color: beige;
margin: 1.25%;
}
/* -------------------------------------------------------- */ /* -------------------------------------------------------- */
/* specification pour les moyennes écrans /* specification pour les moyennes écrans