react-version #1
@ -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) => {
|
||||
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 (
|
||||
|
||||
<div className="invoice-item-container">
|
||||
@ -101,7 +103,11 @@ const InvoiceItem = ({ invoice }) => {
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
{invoice.products.map((p) => (
|
||||
<li key={p.id}>{p.quantity} x {p.product.title} <br /> <b>{productTotal(p).toFixed(2)} $ CA</b></li>
|
||||
|
@ -1,12 +1,13 @@
|
||||
import InvoiceItem from "./InvoiceItem";
|
||||
|
||||
const InvoiceList = ({ invoices }) => {
|
||||
const InvoiceList = ({ invoices, onCancel }) => {
|
||||
return (
|
||||
<div className="invoice-list-container">
|
||||
{invoices.map((invoice) => (
|
||||
<InvoiceItem
|
||||
key={invoice.id}
|
||||
invoice={invoice}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
@ -1,11 +1,19 @@
|
||||
import { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import InvoiceList from "../components/InvoiceList";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
const Invoices = () => {
|
||||
|
||||
const [invoices, setInvoices] = useState([]);
|
||||
|
||||
const mySwal = withReactContent(Swal);
|
||||
|
||||
const [alertTitle, setAlertTitle] = useState("");
|
||||
const [alertMessage, setAlertMessage] = useState("");
|
||||
const [showAlert, setShowAlert] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`https://localhost:7292/api/Invoice?all=true`, {
|
||||
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 (
|
||||
<>
|
||||
<InvoiceList
|
||||
invoices={invoices}
|
||||
onCancel={handleCancelInvoice}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
@ -1,11 +1,19 @@
|
||||
import { useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
import InvoiceList from "../components/InvoiceList";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
const MyInvoices = () => {
|
||||
|
||||
const [invoices, setInvoices] = useState([]);
|
||||
|
||||
const mySwal = withReactContent(Swal);
|
||||
|
||||
const [alertTitle, setAlertTitle] = useState("");
|
||||
const [alertMessage, setAlertMessage] = useState("");
|
||||
const [showAlert, setShowAlert] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`https://localhost:7292/api/Invoice`, {
|
||||
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 (
|
||||
<>
|
||||
<InvoiceList
|
||||
invoices={invoices}
|
||||
onCancel={handleCancelInvoice}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
@ -791,6 +791,10 @@ a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.invoice-product-delete {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.invoice-item-expedition {}
|
||||
|
||||
.invoice-item-product-list {}
|
||||
|
Loading…
Reference in New Issue
Block a user