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

petits ajustements et début boutton cart

Browse Source
This commit is contained in:
Victor Turgeon 2022-11-06 14:49:53 -05:00
parent 5c789e2cc7
commit ed04dc8293
4 changed files with 160 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js Normal file
View File

@ -0,0 +1,15 @@
import { Button } from "react-bootstrap";
import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const CartButton = () =>{
return(
<Button id="cart-button">
<FontAwesomeIcon icon={faCartShopping}/>
<div id="cart-count">3</div>
</Button>
)
}
export default CartButton;

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

@ -10,7 +10,7 @@ const ItemList = ({ items }) => {
{items.map((item) =>
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
<Item
productId={item.id}
productId={item.id}
name={item.title}
price={item.price}
status={item.status}

128
GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
View File

@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
import { Link } from "react-router-dom";
import Dropdown from "react-bootstrap/Dropdown";
import { useCookies } from "react-cookie";
import CartButton from "./CartButton";
const Topbar = () => {
const [cookies, setCookie, removeCookie] = useCookies(['name']);
@ -15,14 +16,14 @@ const Topbar = () => {
async function reset() {
await setLogin(await cookies.GMGM ?? null);
}
reset();
reset();
});
async function logOut() {
const response = fetch(`https://localhost:7292/api/Logout`, {
method: 'POST',
credentials: 'include'
})
})
await removeCookie("GMGM");
await setLogin(null); // Y U NO WORK?!?
}
@ -52,73 +53,74 @@ const Topbar = () => {
Vie privée
</Link>
{(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/login" >
Connexion
</Link>
<Link className="nav-link" to="/login" >
Connexion
</Link>
}
{(user === null || user.LoggedIn === false) &&
<Link className="nav-link" to="/register">
S'inscrire
</Link>
<Link className="nav-link" to="/register">
S'inscrire
</Link>
}
{user !== null && user.LoggedIn &&
<Dropdown className="dropdown-gestion-container">
<Dropdown.Toggle className="dropdown-gestion" >
Bonjour, {user.firstName} {user.lastName}!
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-gestion-menu">
<Dropdown.Item>
<Link className="nav-link" to="/myaccount" >
Mon Compte
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/myaddresses" >
Mes Addresses
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/myinvoices" >
Mes Commandes
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Button className="nav-link" onClick={() => logOut()}>
Déconnexion
</Button>
</Dropdown.Item>
{user.role === "Administrateur" &&
<Container>
<Dropdown.Divider/>
<Dropdown.ItemText>
Gestion
</Dropdown.ItemText>
<Dropdown.Item>
<Link className="nav-link" to="/inventaire" >
Inventaire
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/invoices" >
Commandes
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/clients" >
Clients
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/addresses" >
Adresses
</Link>
</Dropdown.Item>
</Container>
}
</Dropdown.Menu>
</Dropdown>
<Dropdown className="dropdown-gestion-container">
<Dropdown.Toggle className="dropdown-gestion" >
Bonjour, {user.firstName} {user.lastName}!
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-gestion-menu">
<Dropdown.Item>
<Link className="nav-link" to="/myaccount" >
Mon Compte
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/myaddresses" >
Mes Addresses
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/myinvoices" >
Mes Commandes
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Button className="nav-link" onClick={() => logOut()}>
Déconnexion
</Button>
</Dropdown.Item>
{user.role === "Administrateur" &&
<Container>
<Dropdown.Divider />
<Dropdown.ItemText>
Gestion
</Dropdown.ItemText>
<Dropdown.Item>
<Link className="nav-link" to="/inventaire" >
Inventaire
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/invoices" >
Commandes
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/clients" >
Clients
</Link>
</Dropdown.Item>
<Dropdown.Item>
<Link className="nav-link" to="/addresses" >
Adresses
</Link>
</Dropdown.Item>
</Container>
}
</Dropdown.Menu>
</Dropdown>
}
</Nav>
<CartButton />
</Navbar.Collapse>
</Container>
</Navbar>

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

@ -243,14 +243,13 @@ a {
margin-bottom: 10px;
background-color: rgba(245, 245, 220, 0.75);
display: inline-block;
height: 300px;
height: 375px;
width: 30%;
}
.item-img {
/* box-shadow: 2px 5px rgba(0, 0, 0, 0.608); */
border-radius: 2px;
margin-top: 5px;
margin-top: 15px;
display: block;
margin-right: auto;
margin-left: auto;
@ -485,28 +484,28 @@ a {
}
/* width */
::-webkit-scrollbar {
/* width */
::-webkit-scrollbar {
width: 10px;
}
}
/* Track */
::-webkit-scrollbar-track {
/* Track */
::-webkit-scrollbar-track {
background: beige;
}
}
/* Handle */
::-webkit-scrollbar-thumb {
/* Handle */
::-webkit-scrollbar-thumb {
background: plum;
}
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: purple;
}
}
.morceaux-container{
padding-top:10px;
.morceaux-container {
padding-top: 10px;
height: 620px;
overflow-y: scroll;
border: purple 2px solid;
@ -514,24 +513,24 @@ a {
background-color: rgba(245, 245, 220, 0.25);
}
.filters-btn-container{
width:100%;
display:flex;
.filters-btn-container {
width: 100%;
display: flex;
}
.filters-btn{
margin:auto;
width:90% !important;
.filters-btn {
margin: auto;
width: 90% !important;
}
.filters-dropdown button{
.filters-dropdown button {
width: 100%;
}
.filters-menu{
width:fit-content;
display:flex;
margin:5px 15px 10px 15px;
.filters-menu {
width: fit-content;
display: flex;
margin: 5px 15px 10px 15px;
}
.filters-container {
@ -539,32 +538,32 @@ a {
margin-left: 25px;
}
.filters-price-container{
.filters-price-container {
white-space: nowrap;
padding:0px 10px 0px 10px;
padding: 0px 10px 0px 10px;
}
.filters-state-container{
.filters-state-container {
white-space: nowrap;
padding:0px 10px 0px 10px;
padding: 0px 10px 0px 10px;
}
.filters-info{
width:fit-content;
height:fit-content;
.filters-info {
width: fit-content;
height: fit-content;
background-color: beige;
margin-top: 5px;
padding: 5px 10px 5px 10px;
border-radius: 5px;
}
.img-preview-container{
.img-preview-container {
margin-top: 15px;
display:flex;
display: flex;
}
.img-preview{
margin:auto;
.img-preview {
margin: auto;
max-width: 90%;
max-height: 200px;
}
@ -572,7 +571,7 @@ a {
.sorting-container {
width: 20%;
height: fit-content;
margin:auto;
margin: auto;
margin-right: 25px;
}
@ -656,6 +655,17 @@ a {
}
#cart-button {
background-color: transparent;
border: none;
color: purple;
}
#cart-count {
color:green;
}
/* -------------------------------------------------------- */
/* specification pour les moyennes écrans
/* -------------------------------------------------------- */
@ -720,7 +730,7 @@ a {
}
.sorting-container {
margin:auto;
margin: auto;
width: 90%;
float: none;
}
@ -736,43 +746,43 @@ a {
border: 2px white solid;
}
.filters-dropdown button{
height:60px;
.filters-dropdown button {
height: 60px;
}
.filters-container{
width:90%;
margin:auto;
.filters-container {
width: 90%;
margin: auto;
margin-bottom: 16px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 10px;
padding-bottom: 16px;
}
.filters-info{
margin:auto;
margin-top:16px;
.filters-info {
margin: auto;
margin-top: 16px;
}
.filters-menu{
padding:0px;
margin:10px;
.filters-menu {
padding: 0px;
margin: 10px;
}
.filters-menu .form-check-label{
margin-left:5px;
.filters-menu .form-check-label {
margin-left: 5px;
}
.filters-menu .form-check{
margin-bottom:20px;
.filters-menu .form-check {
margin-bottom: 20px;
}
.filters-menu input[type='radio']{
.filters-menu input[type='radio'] {
transform: scale(2);
}
.morceaux-options-container{
display:block;
.morceaux-options-container {
display: block;
}
}
@ -783,7 +793,7 @@ a {
@media (max-width:450px) {
.morceaux-container{
.morceaux-container {
height: 450px;
}