Faut fixer les appels d'api

This commit is contained in:
DavidBelisle 2022-11-11 22:49:38 -05:00
parent 035731dd2f
commit 7df82c4616
5 changed files with 127 additions and 4 deletions

View File

@ -1,4 +1,7 @@
const InvoiceItem = ({ invoice }) => { import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const InvoiceItem = ({ invoice, onCancel }) => {
const productTotal = (p) => { const productTotal = (p) => {
return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price)) return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
@ -79,7 +82,6 @@ const InvoiceItem = ({ invoice }) => {
} }
} }
return ( return (
<div className="invoice-item-container"> <div className="invoice-item-container">
@ -101,7 +103,11 @@ const InvoiceItem = ({ invoice }) => {
</div> </div>
</div> </div>
<div className="invoice-item-products"> <div className="invoice-item-products">
<h4>Produits</h4> <div className="invoice-product-delete">
<h4 className='simple-item-title' >Produits</h4>
<h1 className='simple-item-buttons'><FontAwesomeIcon icon={faTimes} className='btn-effacer-morceau' style={{ color: "red", cursor: 'pointer', margin: 'auto'}}
onClick={() => onCancel(invoice.id)} /></h1>
</div>
<ul className="invoice-item-product-list"> <ul className="invoice-item-product-list">
{invoice.products.map((p) => ( {invoice.products.map((p) => (
<li key={p.id}>{p.quantity} x {p.product.title} <br /> <b>{productTotal(p).toFixed(2)} $ CA</b></li> <li key={p.id}>{p.quantity} x {p.product.title} <br /> <b>{productTotal(p).toFixed(2)} $ CA</b></li>

View File

@ -1,12 +1,13 @@
import InvoiceItem from "./InvoiceItem"; import InvoiceItem from "./InvoiceItem";
const InvoiceList = ({ invoices }) => { const InvoiceList = ({ invoices, onCancel }) => {
return ( return (
<div className="invoice-list-container"> <div className="invoice-list-container">
{invoices.map((invoice) => ( {invoices.map((invoice) => (
<InvoiceItem <InvoiceItem
key={invoice.id} key={invoice.id}
invoice={invoice} invoice={invoice}
onCancel={onCancel}
/> />
))} ))}
</div> </div>

View File

@ -1,11 +1,19 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useState } from "react"; import { useState } from "react";
import InvoiceList from "../components/InvoiceList"; import InvoiceList from "../components/InvoiceList";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
const Invoices = () => { const Invoices = () => {
const [invoices, setInvoices] = useState([]); const [invoices, setInvoices] = useState([]);
const mySwal = withReactContent(Swal);
const [alertTitle, setAlertTitle] = useState("");
const [alertMessage, setAlertMessage] = useState("");
const [showAlert, setShowAlert] = useState(false);
useEffect(() => { useEffect(() => {
fetch(`https://localhost:7292/api/Invoice?all=true`, { fetch(`https://localhost:7292/api/Invoice?all=true`, {
method: 'GET', method: 'GET',
@ -23,10 +31,57 @@ const Invoices = () => {
}); });
}, []); }, []);
const handleCancelInvoice = async (id) => {
mySwal.fire({
title: `Effacer la commande?`,
text: 'Êtes-vous certain de vouloir effacer cette commande (cette action est irréversible)?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Oui',
cancelButtonText: 'Non',
}).then(async (result) => {
if (result.isConfirmed) {
fetch(`https://localhost:7292/api/Invoice?id=${id}`, {
method: 'CANCEL',
mode: 'cors',
credentials: 'include'
}).then(async (response) => {
console.log(response);
if (response.ok) {
const deletedId = await response.json();
setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
onShowAlert('Suppression de la commande avec succès!', 2000);
}
else {
console.log("test");
mySwal.fire({
title: `Erreur lors de la suppression de la commande...`,
text: `L'erreur: ${response}`,
icon: 'error',
});
}
});
}
})
};
const onShowAlert = (title, message, time) => {
setAlertTitle(title);
setAlertMessage(message);
setShowAlert(true);
window.setTimeout(() => { setShowAlert(false); }, time);
}
return ( return (
<> <>
<InvoiceList <InvoiceList
invoices={invoices} invoices={invoices}
onCancel={handleCancelInvoice}
/> />
</> </>
); );

View File

@ -1,11 +1,19 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useState } from "react"; import { useState } from "react";
import InvoiceList from "../components/InvoiceList"; import InvoiceList from "../components/InvoiceList";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
const MyInvoices = () => { const MyInvoices = () => {
const [invoices, setInvoices] = useState([]); const [invoices, setInvoices] = useState([]);
const mySwal = withReactContent(Swal);
const [alertTitle, setAlertTitle] = useState("");
const [alertMessage, setAlertMessage] = useState("");
const [showAlert, setShowAlert] = useState(false);
useEffect(() => { useEffect(() => {
fetch(`https://localhost:7292/api/Invoice`, { fetch(`https://localhost:7292/api/Invoice`, {
method: 'GET', method: 'GET',
@ -23,10 +31,59 @@ const MyInvoices = () => {
}); });
}, []); }, []);
const handleCancelInvoice = async (id) => {
mySwal.fire({
title: `Effacer la commande?`,
text: 'Êtes-vous certain de vouloir effacer cette commande (cette action est irréversible)?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Oui',
cancelButtonText: 'Non',
}).then(async (result) => {
if (result.isConfirmed) {
fetch(`https://localhost:7292/api/Invoice?id=${id}`, {
method: 'CANCEL',
mode: 'cors',
credentials: 'include'
}).then(async (response) => {
console.log(response);
if (response.ok) {
const deletedId = await response.json();
setInvoices(invoices.filter((invoice) => invoice.id !== deletedId));
onShowAlert('Suppression de la commande avec succès!', 2000);
}
else {
console.log("test");
mySwal.fire({
title: `Erreur lors de la suppression de la commande...`,
text: `L'erreur: ${response}`,
icon: 'error',
});
}
});
}
})
};
const onShowAlert = (title, message, time) => {
setAlertTitle(title);
setAlertMessage(message);
setShowAlert(true);
window.setTimeout(() => { setShowAlert(false); }, time);
}
return ( return (
<> <>
<InvoiceList <InvoiceList
invoices={invoices} invoices={invoices}
onCancel={handleCancelInvoice}
/> />
</> </>
); );

View File

@ -791,6 +791,10 @@ a {
margin-bottom: 2px; margin-bottom: 2px;
} }
.invoice-product-delete {
display: flex;
}
.invoice-item-expedition {} .invoice-item-expedition {}
.invoice-item-product-list {} .invoice-item-product-list {}