EF17 So Many Addresses
This commit is contained in:
parent
980cb1ab53
commit
73421ea1ef
@ -104,10 +104,13 @@ public class AddressController : Controller {
|
|||||||
}
|
}
|
||||||
|
|
||||||
[EnableCors("_myAllowSpecificOrigins"), HttpPost]
|
[EnableCors("_myAllowSpecificOrigins"), HttpPost]
|
||||||
public async Task<ActionResult<AddressModel>> Post(AddressModel ad) {
|
public async Task<ActionResult<AddressModel>> Post([FromForm] AddressModel ad) {
|
||||||
|
string id;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var user = await _userMan.GetUserAsync(_signInMan.Context.User);
|
var user = await _userMan.GetUserAsync(_signInMan.Context.User);
|
||||||
user.Adresses.Add(ad);
|
id = _signInMan.Context.User.Identity.GetUserId();
|
||||||
|
_context.Users.Where(x => x.Id == id).Include("Adresses").First().Adresses.Add(ad);
|
||||||
_context.SaveChanges();
|
_context.SaveChanges();
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
_logger.LogError(10, e.Message);
|
_logger.LogError(10, e.Message);
|
||||||
|
@ -0,0 +1,31 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { faTimes } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
|
const Address = ({ address, onDelete }) => {
|
||||||
|
return (
|
||||||
|
<div className="inventaire-item">
|
||||||
|
<div className='simple-item-top-container'>
|
||||||
|
<h3 className='simple-item-title' >
|
||||||
|
{address.civicNumber} {address.street}
|
||||||
|
</h3>
|
||||||
|
<h1 className='simple-item-buttons'>
|
||||||
|
<FontAwesomeIcon icon={faTimes} className='.btn-effacer-morceau' style={{ color: "red", cursor: 'pointer' }}
|
||||||
|
onClick={() => onDelete(address)} />
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
{address.appartment != null ?
|
||||||
|
<h5>
|
||||||
|
App: {address.appartment}
|
||||||
|
</h5>
|
||||||
|
:
|
||||||
|
null
|
||||||
|
}
|
||||||
|
<div>
|
||||||
|
<p> {address.city}, {address.province}, {address.country}, {address.postalCode}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Address;
|
@ -17,6 +17,7 @@ import React from 'react';
|
|||||||
import Invoices from "../pages/Invoices";
|
import Invoices from "../pages/Invoices";
|
||||||
import Cookies from "universal-cookie";
|
import Cookies from "universal-cookie";
|
||||||
import ReviewInvoice from "../pages/ReviewInvoice";
|
import ReviewInvoice from "../pages/ReviewInvoice";
|
||||||
|
import MyAddresses from "../pages/MyAddresses";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const cookies = new Cookies();
|
const cookies = new Cookies();
|
||||||
@ -53,6 +54,7 @@ const App = () => {
|
|||||||
<Route path="myinvoices" element={<MyInvoices />} />
|
<Route path="myinvoices" element={<MyInvoices />} />
|
||||||
<Route path="invoices" element={<Invoices />} />
|
<Route path="invoices" element={<Invoices />} />
|
||||||
<Route path="reviewinvoice" element={<ReviewInvoice />} />
|
<Route path="reviewinvoice" element={<ReviewInvoice />} />
|
||||||
|
<Route path="myaddresses" element={<MyAddresses />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
@ -137,7 +137,7 @@ export default function App() {
|
|||||||
Adresse
|
Adresse
|
||||||
<Form.Select onChange={(e) => setFormAddress(userAddresses[e.target.value])}>
|
<Form.Select onChange={(e) => setFormAddress(userAddresses[e.target.value])}>
|
||||||
{userAddresses.map((a, i) => (
|
{userAddresses.map((a, i) => (
|
||||||
<option key={a.id} value={i} >{a.civicNumber} {a.street} </option> //{a.civicNumber} {a.street}
|
<option key={a.id} value={i} >{a.civicNumber} {a.street} </option>
|
||||||
))}
|
))}
|
||||||
</Form.Select>
|
</Form.Select>
|
||||||
</h5>
|
</h5>
|
||||||
|
238
GrossesMitaines/grosses-mitaines-ui/src/pages/MyAddresses.js
Normal file
238
GrossesMitaines/grosses-mitaines-ui/src/pages/MyAddresses.js
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
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";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import Address from "../components/Address";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { Alert } from "react-bootstrap";
|
||||||
|
|
||||||
|
|
||||||
|
const MyAddresses = () => {
|
||||||
|
const { register, handleSubmit, setValue, formState: { errors } } = useForm();
|
||||||
|
const cookies = new Cookies();
|
||||||
|
const [userAddresses, setUserAddresses] = useState([]);
|
||||||
|
const [alertTitle, setAlertTitle] = useState("");
|
||||||
|
const [alertMessage, setAlertMessage] = useState("");
|
||||||
|
const [showAlert, setShowAlert] = useState(false);
|
||||||
|
const [isFormvisible, setFormVisibility] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
const mySwal = withReactContent(Swal);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
const userInfo = cookies.get("GMGM");
|
||||||
|
if (userInfo != null && userInfo.LoggedIn == true) {
|
||||||
|
|
||||||
|
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);
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (userAddresses.length == 0) {
|
||||||
|
// if (cookies.get('addresses') != null && cookies.get('addresses').length != 0)
|
||||||
|
// setUserAddresses(cookies.get('addresses'));
|
||||||
|
// }
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// cookies.set('addresses', userAddresses, { path: '/', SameSite: 'strict', secure: true, maxAge: 2592000 })
|
||||||
|
|
||||||
|
|
||||||
|
// }, [userAddresses]);
|
||||||
|
|
||||||
|
const OnDelete = async (address) => {
|
||||||
|
mySwal.fire({
|
||||||
|
title: `Effacer ${address.civicNumber} ${address.street}?`,
|
||||||
|
text: 'Êtes-vous certain de vouloir effacer cette adresse (cette action est irréversible)?',
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Oui',
|
||||||
|
cancelButtonText: 'Non',
|
||||||
|
}).then(async (result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
fetch(`https://localhost:7292/api/Address?id=${address.id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
mode: 'cors',
|
||||||
|
credentials: 'include'
|
||||||
|
}).then(async (response) => {
|
||||||
|
console.log(response);
|
||||||
|
if (response.ok) {
|
||||||
|
const deletedId = await response.json();
|
||||||
|
setUserAddresses(userAddresses.filter((address) => address.id !== deletedId));
|
||||||
|
|
||||||
|
onShowAlert('Suppression de:', `${address.civicNumber} ${address.street} avec succès!`, 2000);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log("test");
|
||||||
|
mySwal.fire({
|
||||||
|
title: `Erreur lors de la suppression de ${address.civicNumber} ${address.street}`,
|
||||||
|
text: `L'erreur: ${response}`,
|
||||||
|
icon: 'error',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSubmit = async (address) => {
|
||||||
|
console.log(address);
|
||||||
|
|
||||||
|
let formData = new FormData();
|
||||||
|
Object.keys(address).map((k) => {
|
||||||
|
formData.set(k, address[k]);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(formData);
|
||||||
|
|
||||||
|
const response = await fetch(`https://localhost:7292/api/Address`, {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
mode: 'cors',
|
||||||
|
headers: {
|
||||||
|
'accept': 'application/json',
|
||||||
|
},
|
||||||
|
body: formData
|
||||||
|
})
|
||||||
|
|
||||||
|
const newAddress = await response.json();
|
||||||
|
console.log(newAddress);
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setUserAddresses([...userAddresses, { ...newAddress }]);
|
||||||
|
|
||||||
|
onShowAlert('Création de:', `${address.civicNumber} ${address.street} avec succès!`);
|
||||||
|
setFormVisibility(false);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
console.log("Erreur de creation " + address.civicNumber + " " + address.street);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onShowAlert = (title, message, time) => {
|
||||||
|
|
||||||
|
setAlertTitle(title);
|
||||||
|
setAlertMessage(message);
|
||||||
|
setShowAlert(true);
|
||||||
|
|
||||||
|
window.setTimeout(() => { setShowAlert(false); }, time);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="inventaire">
|
||||||
|
<Alert variant="success" show={showAlert}>
|
||||||
|
<b>{alertTitle}</b> {alertMessage}
|
||||||
|
</Alert>
|
||||||
|
<header className='header'>
|
||||||
|
<h1>Adresses</h1>
|
||||||
|
<Button
|
||||||
|
className={isFormvisible ? 'btn-fermer' : 'btn-ajouter'}
|
||||||
|
onClick={() => setFormVisibility(!isFormvisible)}>
|
||||||
|
{isFormvisible ? 'Fermer' : 'Ajouter'}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
{isFormvisible &&
|
||||||
|
<div className="form-container">
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<h4 className="text-center">Ajouter une adresse</h4>
|
||||||
|
<div className="Error_color">
|
||||||
|
<div className="formulaire-address">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{isLoading && <div className="cat-load" />}
|
||||||
|
{userAddresses.length > 0 ?
|
||||||
|
userAddresses.map((add) => (
|
||||||
|
add &&
|
||||||
|
<Address key={add.id}
|
||||||
|
address={add}
|
||||||
|
onDelete={OnDelete}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
:
|
||||||
|
('Il n\'y a pas d\'adresses!')}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MyAddresses;
|
Loading…
Reference in New Issue
Block a user