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

monke magic

Browse Source
This commit is contained in:
Victor Turgeon
2022-11-08 06:31:10 -05:00
parent faa119b0ad
commit 17d7c1ebb5
4 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
GrossesMitaines/grosses-mitaines-ui/src/components/App.js
View File

@@ -16,6 +16,7 @@ import { useState, useEffect } from "react";
import React from 'react';
import Invoices from "../pages/Invoices";
import Cookies from "universal-cookie";
import ReviewInvoice from "../pages/ReviewInvoice";
const App = () => {
const cookies = new Cookies();
@@ -51,6 +52,7 @@ const App = () => {
<Route path="formulaire" element={<Formulaire />} />
<Route path="myinvoices" element={<MyInvoices />} />
<Route path="invoices" element={<Invoices />} />
<Route path="reviewinvoice/:id" element={<ReviewInvoice />} />
</Route>
</Routes>
</BrowserRouter>

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

@@ -4,13 +4,13 @@ import { Button } from "react-bootstrap";
import { useForm } from "react-hook-form";
import Cookies from "universal-cookie";
import { Form } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
export default function App() {
const { register, handleSubmit, setValue, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
const cookies = new Cookies();
const [userAddresses, setUserAddresses] = useState([]);
const navigate = useNavigate();
useEffect(() => {
@@ -33,20 +33,15 @@ export default function App() {
if (response.ok) {
const json = await response.json();
setUserAddresses(json);
// if (json.length >= 1)
// setFormAddress(json[0]);
if (json.length >= 1)
setFormAddress(json[0]);
}
});
}
}, []);
const setFormAddress = (addressId) => {
const setFormAddress = (address) => {
const address = userAddresses.filter(a => a.id == addressId);
console.log(address);
setValue("civicNumber", address.civicNumber);
setValue("appartment", address.appartment);
setValue("street", address.street);
@@ -56,6 +51,34 @@ export default function App() {
setValue("postalCode", address.postalCode);
}
const onSubmit = async (data) => {
const cart = cookies.get('cart');
if (cart == null || cart.length < 1) {
console.log("Your cart is empty!!!");
}
else {
data.prodQuant ={};
cart.map((p) => {
data.prodQuant[p.id] = p.quantity;
});
console.log(data);
const jsonData = JSON.stringify(data);
fetch("https://localhost:7292/api/Invoice", {
mode: "cors",
method: "POST",
credentials: "include",
body: jsonData
}).then((response) => {
console.log(response);
});
}
}
return (
<div className="form-container">
<form onSubmit={handleSubmit(onSubmit)}>
@@ -66,41 +89,41 @@ export default function App() {
<input {...register("emailAddress", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
</div>
<div>
{errors.Email && errors.Email.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
{errors.Email && errors.Email.type === 'pattern' && <span>Adresse courriel non valide!</span>}
{errors.emailAddress && errors.emailAddress.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
{errors.emailAddress && errors.emailAddress.type === 'pattern' && <span>Adresse courriel non valide!</span>}
</div>
<div className="form-group">
<label>Prénom*: </label>
<input {...register("firstName", { required: true, minLength: 2 })} />
</div>
<div>
{errors.Prénom && errors.Prénom.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
{errors.Prénom && errors.Prénom.type === 'minLength' && <span>Votre prénom doit avoir au moins 2 lettres!</span>}
{errors.firstName && errors.firstName.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
{errors.firstName && errors.firstName.type === 'minLength' && <span>Votre prénom doit avoir au moins 2 lettres!</span>}
</div>
<div className="form-group">
<label>Nom*: </label>
<input {...register("lastName", { required: true, minLength: 2 })} />
</div>
<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>}
{errors.lastName && errors.lastName.type === 'required' && <span>Vous devez entrer votre nom!</span>}
{errors.lastName && errors.lastName.type === 'minLength' && <span>Votre nom doit avoir au moins 2 lettres!</span>}
</div>
<div className="form-group">
<label>Numéro de téléphone*: </label>
<input placeholder="Exemple: 111-111-1111" {...register("phoneNumber", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
</div>
<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>}
{errors.phoneNumber && errors.phoneNumber.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
{errors.phoneNumber && errors.phoneNumber.type === 'pattern' && <span>Téléphone non valide!</span>}
</div>
<div className="formulaire-address">
<h5>
Adresse
<Form.Select onSelect={(e) => { setFormAddress(e.target.value); }}>
{/* <Form.Select onSelect={(e) => { setFormAddress(e.target.value); }}>
{userAddresses.map((a) => (
<option key={a.id} value={a.id}>{a.civicNumber} {a.street}</option>
))}
</Form.Select>
</Form.Select> */}
</h5>
<div className="form-group">
<label>Numéro civique*: </label>

5
GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js Normal file
View File

@@ -0,0 +1,5 @@
const ReviewInvoice = () =>{
}
export default ReviewInvoice;