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

L'importation d'image fonctionne. Il manque à faire fonctionner la modifiction et le delete avec.

Browse Source
This commit is contained in:
Victor Turgeon
2022-11-01 18:50:32 -04:00
parent f38f4bf44a
commit 9df28d3eed
47 changed files with 198 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedImage.js Normal file
View File

@@ -0,0 +1,26 @@
import { useState, useEffect } from "react";
const FeaturedImage = ({ productId }) => {
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
useEffect(() => {
fetch(`https://localhost:7292/api/Image?id=${productId}`)
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl);
})
},[]);
return (
<img
className="featured-img"
src={imageSrc}
alt={productId + "_image"}
/>
);
}
export default FeaturedImage;

7
GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js
View File

@@ -1,5 +1,7 @@
import { Carousel } from "react-bootstrap";
import { Link } from "react-router-dom";
import FeaturedImage from "./FeaturedImage";
const FeaturedList = ({ products }) => {
if (products === null)
return (<></>);
@@ -9,10 +11,7 @@ const FeaturedList = ({ products }) => {
<Carousel.Item key={product.id} className="featured-itm">
<Link key={product.id} to={`/morceaux/${product.id}`}>
<img
className="featured-img"
src={`/images/${product.imageName}.jpg`}
/>
<FeaturedImage productId={product.id}/>
<Carousel.Caption className="featured-info">
<h3>{product.title}</h3>
<p>{product.description}</p>

29
GrossesMitaines/grosses-mitaines-ui/src/components/Item.js
View File

@@ -1,13 +1,7 @@
import { Card } from "react-bootstrap";
import { useState, useEffect } from "react";
// public enum States {
// Available,
// BackOrder,
// Unavailable,
// Clearance,
// Promotion,
// Discontinued
// }
function renderStatus(statusCode) {
if (statusCode !== undefined) {
@@ -62,7 +56,7 @@ function renderPrice(price, newPrice, status) {
if (price !== undefined) {
if (status != 3 && status != 4) {
if (status !== 3 && status !== 4) {
return (
<Card.Text className="item-price-container">
<span className="item-price">
@@ -87,12 +81,25 @@ function renderPrice(price, newPrice, status) {
}
const Item = ({ imageUrl, name, price, newPrice, status }) => {
const Item = ({ productId, name, price, newPrice, status }) => {
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
useEffect(() => {
fetch(`https://localhost:7292/api/Image?id=${productId}&thumbnail=true`)
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl);
})
}, []);
if (name !== undefined) {
return (
<Card className="item">
<Card.Img className="item-img" variant="top" src={`/images/${imageUrl}_thumbnail.jpg`} />
<Card.Img className="item-img" variant="top" src={imageSrc} />
<Card.Body className="item-info">
<div className="item-name-container">
<Card.Title className="item-name">

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

@@ -9,7 +9,8 @@ const ItemList = ({ items }) => {
{items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
{items.map((item) =>
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
<Item imageUrl={item.imageName}
<Item
productId={item.id}
name={item.title}
price={item.price}
status={item.status}

18
GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js
View File

@@ -20,14 +20,24 @@ const Inventaire = () => {
}, []);
const handleAddItem = async (morceau) => {
console.log(morceau);
let formData = new FormData();
Object.keys(morceau).map((k) => {
formData.set(k,morceau[k]);
});
console.log(formData);
const response = await fetch(`https://localhost:7292/api/Product`, {
method: 'POST',
credentials: 'include',
mode: 'cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
'accept': 'application/json',
},
body: JSON.stringify(morceau)
body: formData
})
const newMorceau = await response.json();
@@ -38,7 +48,7 @@ const Inventaire = () => {
console.log("Ajout de l'item avec succès: \r\n" + newMorceau);
}
else
console.log("Erreur de creation " + morceau);
console.log("Erreur de creation " + morceau.title);
};
const handleDeleteItem = async (id) => {

18
GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js
View File

@@ -7,6 +7,7 @@ const MorceauDetail = () => {
const { id } = useParams();
const [item, setItem] = useState({});
const [isLoading, setIsLoading] = useState(false);
const [imageSrc, setImageSrc] = useState("/images/default_thumbnail.jpg");
useEffect(() => {
document.title = 'Morceaux';
@@ -16,10 +17,25 @@ const MorceauDetail = () => {
const json = await response.json();
setItem(json);
}
fetchData();
fetch(`https://localhost:7292/api/Image?id=${id}`)
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
setImageSrc(imageUrl);
})
setIsLoading(false);
});
useEffect(() => {
}, []);
function renderPrice(price, newPrice, status) {
if (price !== undefined) {
if (status !== 3 && status !== 4) {
@@ -99,7 +115,7 @@ const MorceauDetail = () => {
<div className="detail-container">
<div className="detail-container-left">
<img className="detail-image" alt="" src={`/images/${item.imageName}.jpg`} />
<img className="detail-image" alt="" src={imageSrc} />
<p className="detail-description">{item.description}</p>
</div>
<div className="detail-container-right">