From a2c82752e01d81b0f818705d6c8e282305a7ba38 Mon Sep 17 00:00:00 2001
From: David Belisle <79233327+DavidBelisle@users.noreply.github.com>
Date: Tue, 18 Oct 2022 13:02:40 -0400
Subject: [PATCH] Modifyayayayayay
---
.../src/components/Modify.js | 145 ++++++++++++++++++
.../src/components/SimpleItem.js | 16 +-
.../src/pages/ContactUs.js | 4 +-
.../src/pages/Inventaire.js | 25 ++-
.../src/stylesheets/site.css | 6 +-
5 files changed, 186 insertions(+), 10 deletions(-)
create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
new file mode 100644
index 0000000..9a2a3c5
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js
@@ -0,0 +1,145 @@
+import { render } from "@testing-library/react";
+import { useState } from "react"
+import { Dropdown } from "react-bootstrap";
+
+function renderStatus(statusCode) {
+ if (statusCode !== undefined) {
+
+ switch (statusCode) {
+ case 0:
+ return ("Disponible");
+ case 1:
+ return ("En commande");
+ case 2:
+ return ("Indisponible");
+ case 3:
+ return ("Liquidation");
+ case 4:
+ return ("Promotion");
+ case 5:
+ return ("Discontinué");
+ default:
+ return (<>>);
+ }
+ }
+
+}
+
+const Modify = ({ morceau, onModify }) => {
+
+ const [currentStatus, setStatus] = useState(renderStatus(morceau.status));
+
+ const [title, setTitle] = useState(morceau.title);
+ const [description, setDescription] = useState(morceau.description);
+ const [category, setCategory] = useState(morceau.category);
+ const [price, setPrice] = useState(morceau.price);
+ const [quantity, setQuantity] = useState(morceau.quantity);
+ const [imageName, setImageName] = useState(morceau.imageName);
+ const [statusValue, setStatusValue] = useState(morceau.status)
+
+ const handleSubmit = (e) => {
+ e.preventDefault(); // Empêcher de reloader la page au submit.
+
+ // Appeler le comportement onCreation
+ onModify({ title, description, category, price, quantity, imageName, statusValue })
+ }
+
+
+ return (
+
+ )
+}
+
+export default Modify
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
index 807436d..80b9085 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js
@@ -1,5 +1,8 @@
import { FaTimes } from 'react-icons/fa'
import { FaTools } from 'react-icons/fa'
+import { useState } from 'react';
+
+import Modify from './Modify';
function renderStatus(statusCode) {
if (statusCode !== undefined) {
@@ -25,19 +28,26 @@ function renderStatus(statusCode) {
}
const SimpleItem = ({ item, onDelete, onModify }) => {
+
+ const [isFormvisible, setFormVisibility] = useState(false);
+
return (
{item.title}
onModify(item.id)} />
+ onClick={() => setFormVisibility(!isFormvisible)} />
onDelete(item.id)} />
-
Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}
-
Description: {item.description}
+ {isFormvisible &&
}
+ {!isFormvisible &&
+
Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}
+
Description: {item.description}
+
+ }
)
}
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js
index d758d4d..663a9ea 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js
@@ -9,9 +9,9 @@ const ContactUs = () => {
});
return (
- <>
+
- >
+
);
}
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
index 8223a95..c704ff1 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
@@ -29,7 +29,7 @@ const Inventaire = () => {
},
body: JSON.stringify(morceau)
})
-
+
const newMorceau = await response.json();
console.log(newMorceau);
@@ -45,16 +45,33 @@ const Inventaire = () => {
const deletedId = await response.json();
- if (response.ok){
+ if (response.ok) {
setMorceaux(morceaux.filter((morceau) => morceau.id !== deletedId));
- console.log("DELETE de: "+deletedId +" avec succès!");
+ console.log("DELETE de: " + deletedId + " avec succès!");
}
else
console.log("Erreur leur du DELETE de " + id);
};
- const handleModifyItem = async (id) => {
+ const handleModifyItem = async (morceau) => {
+ const response = await fetch(`https://localhost:7292/api/Product`, {
+ method: 'PATCH',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(morceau)
+ })
+ const newMorceau = await response.json();
+ console.log(newMorceau);
+
+ if (response.ok) {
+ setMorceaux(morceaux.filter((morceau) => morceau.id !== newMorceau.id));
+ setMorceaux([...morceaux, { ...newMorceau }]);
+ }
+ else
+ console.log("Erreur de creation " + morceau);
};
return (
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index 3b7e18c..7dbf082 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -15,6 +15,10 @@ html {
height: 100%;
}
+.contactUs {
+ height: 100vh;
+}
+
.home-text {
/* border: black 1px solid; */
text-align: center;
@@ -398,7 +402,7 @@ html {
}
.privacy {
- height: 100%;
+ height: 100vh;
}
.morceaux {