react-version #1
@ -62,7 +62,7 @@ public class AddressController : Controller {
|
||||
id = _signInMan.Context.User.Identity.GetUserId();
|
||||
if (all is not null && all == true && roles.Contains("Administrateur"))
|
||||
return Ok(_context.Addresses.ToList());
|
||||
else return Ok(user.Adresses.ToList());
|
||||
else return Ok(_context.Users.Where(x=>x.Id == id).Include("Adresses").First().Adresses);
|
||||
} catch (Exception e) {
|
||||
_logger.LogError(10, e.Message);
|
||||
return BadRequest();
|
||||
|
||||
@ -386,6 +386,7 @@ Pikachu is also the starter Pokémon of Pokémon Rumble Blast and Pokémon Rumbl
|
||||
LastName = "Admin",
|
||||
NormalizedUserName = "ADMIN",
|
||||
UserName = "Admin",
|
||||
PhoneNumber = "111-111-1111",
|
||||
Id = AdminID,
|
||||
NormalizedEmail = "ADMIN@ADMIN.COM",
|
||||
Email = "admin@admin.com"
|
||||
@ -396,6 +397,7 @@ Pikachu is also the starter Pokémon of Pokémon Rumble Blast and Pokémon Rumbl
|
||||
LastName = "A.",
|
||||
NormalizedUserName = "PASLA",
|
||||
UserName = "PasLa",
|
||||
PhoneNumber="222-222-2222",
|
||||
Id = PaulID,
|
||||
NormalizedEmail = "PAUL@EXEMPLE.COM",
|
||||
Email = "paul@exemple.com"
|
||||
|
||||
@ -36,7 +36,7 @@ const CartButton = () => {
|
||||
navigate("/login");
|
||||
handleClose();
|
||||
}
|
||||
else if(result.isDismissed && result.dismiss == Swal.DismissReason.cancel){
|
||||
else if (result.isDismissed && result.dismiss == Swal.DismissReason.cancel) {
|
||||
navigate("/formulaire");
|
||||
handleClose();
|
||||
}
|
||||
|
||||
@ -1,55 +1,163 @@
|
||||
import { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import { Button } from "react-bootstrap";
|
||||
import { useForm } from "react-hook-form";
|
||||
import Cookies from "universal-cookie";
|
||||
import { Form } from "react-bootstrap";
|
||||
|
||||
export default function App() {
|
||||
const { register, handleSubmit, watch, formState: { errors } } = useForm();
|
||||
const { register, handleSubmit, setValue, watch, formState: { errors } } = useForm();
|
||||
const onSubmit = data => console.log(data);
|
||||
const cookies = new Cookies();
|
||||
|
||||
const [userAddresses, setUserAddresses] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const userInfo = cookies.get("GMGM");
|
||||
if (userInfo != null && userInfo.LoggedIn == true) {
|
||||
if (userInfo.firstName != null)
|
||||
setValue("firstName", userInfo.firstName);
|
||||
if (userInfo.lastName != null)
|
||||
setValue("lastName", userInfo.lastName);
|
||||
if (userInfo.phone != null)
|
||||
setValue("phoneNumber", userInfo.phone);
|
||||
if (userInfo.email != null)
|
||||
setValue("emailAddress", userInfo.email);
|
||||
|
||||
fetch("https://localhost:7292/api/Address", {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
mode: 'cors'
|
||||
},).then(async (response) => {
|
||||
if (response.ok) {
|
||||
const json = await response.json();
|
||||
setUserAddresses(json);
|
||||
// if (json.length >= 1)
|
||||
// setFormAddress(json[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
const setFormAddress = (addressId) => {
|
||||
|
||||
const address = userAddresses.filter(a => a.id == addressId);
|
||||
|
||||
console.log(address);
|
||||
setValue("civicNumber", address.civicNumber);
|
||||
setValue("appartment", address.appartment);
|
||||
setValue("street", address.street);
|
||||
setValue("city", address.city);
|
||||
setValue("province", address.province);
|
||||
setValue("country", address.country);
|
||||
setValue("postalCode", address.postalCode);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<h4 className="text-center">Formulaire de commande</h4>
|
||||
<div className="Error_color">
|
||||
<div className="form-group">
|
||||
<label>Prénom: </label>
|
||||
<input placeholder="Votre prénom:" {...register("Prénom", { 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>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Nom: </label>
|
||||
<input placeholder="Votre nom:" {...register("Nom", { 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>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Numéro de téléphone: </label>
|
||||
<input placeholder="Exemple: 111-111-1111" {...register("Téléphone", { 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>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adresse civique: </label>
|
||||
<input placeholder="Votre adresse:" {...register("Adresse", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.Adresse && errors.Adresse.type === 'required' && <span>Vous devez entrer une adresse!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adresse courriel: </label>
|
||||
<input placeholder="Votre courriel" {...register("Email", { 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>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adresse courriel*: </label>
|
||||
<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>}
|
||||
</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>}
|
||||
</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>}
|
||||
</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>}
|
||||
</div>
|
||||
<div className="formulaire-address">
|
||||
<h5>
|
||||
Adresse
|
||||
<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>
|
||||
</h5>
|
||||
<div className="form-group">
|
||||
<label>Numéro civique*: </label>
|
||||
<input type="number" min="0" {...register("civicNumber", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.civicNumber && errors.civicNumber.type === 'required' && <span>Vous devez entrer une numéro civique!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Rue*: </label>
|
||||
<input {...register("street", { required: true, minLength: 3, maxLength: 50 })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.street && errors.street.type === 'required' && <span>Vous devez entrer votre rue!</span>}
|
||||
{errors.street && errors.street.type === 'minLength' && <span>Votre rue doit avoir au moins 3 lettres!</span>}
|
||||
{errors.street && errors.street.type === 'maxLength' && <span>Votre rue doit avoir moins de 51 lettres!</span>}
|
||||
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Numéro d'appartement: </label>
|
||||
<input {...register("appartment", { required: false })} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Ville*: </label>
|
||||
<input {...register("city", { required: true, minLength: 4, maxLength: 50 })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
|
||||
{errors.city && errors.city.type === 'minLength' && <span>Votre ville doit avoir au moins 4 lettres!</span>}
|
||||
{errors.city && errors.city.type === 'maxLength' && <span>Votre ville doit avoir moins de 51 lettres!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Province (abréviation)*: </label>
|
||||
<input placeholder="Exemple: QC" {...register("province", { required: true, maxLength: 3 })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.province && errors.province.type === 'required' && <span>Vous devez entrer votre province!</span>}
|
||||
{errors.province && errors.province.type === 'maxLength' && <span>Votre province doit avoir moins de 4 lettres!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Pays*: </label>
|
||||
<input {...register("country", { required: true, minLength: 4, maxLength: 30 })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.country && errors.country.type === 'required' && <span>Vous devez entrer votre pays!</span>}
|
||||
{errors.country && errors.country.type === 'minLength' && <span>Votre pays doit avoir au moins 4 lettres!</span>}
|
||||
{errors.cicountryty && errors.country.type === 'maxLength' && <span>Votre pays doit avoir moins de 31 lettres!</span>}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Code postal*: </label>
|
||||
<input {...register("postalCode", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Button className="btn-primary btn-ajouter-morceau" type="submit" >Confirmer</Button>
|
||||
</form>
|
||||
|
||||
@ -780,6 +780,13 @@ a {
|
||||
|
||||
.invoice-item-price {}
|
||||
|
||||
.formulaire-address{
|
||||
border:gray 1px solid;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------- */
|
||||
/* specification pour les moyennes écrans
|
||||
/* -------------------------------------------------------- */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user