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

Faut fixer les appels d'api

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceItem.js
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) => {
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>

3
GrossesMitaines/grosses-mitaines-ui/src/components/InvoiceList.js
View File

@ -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>

55
GrossesMitaines/grosses-mitaines-ui/src/pages/Invoices.js
View File

@ -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}
/>
</>
);

57
GrossesMitaines/grosses-mitaines-ui/src/pages/MyInvoices.js
View File

@ -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}
/>
</>
);

4
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

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