feature-show-shopping-list

backend/src/main/java/springweb/backend/ClientController.java

@@ -41,6 +41,10 @@ public Client addClient(@RequestBody Client client) {
     public Client updateTask(@PathVariable String id, @RequestBody Client clientDto) {
         return clientService.updateClient(id, clientDto);
     }
+    @PutMapping("{idClient}/shoppingList/{idProduct}")
+    public void changeProductCountByIdFromClientById(@PathVariable String idClient, @PathVariable String idProduct) {
+        clientService.changeProductByIdFromClientById(idClient,idProduct);
+    }
 
     @DeleteMapping({"{id}"})
     public void deleteClientById(@PathVariable String id) {

backend/src/main/java/springweb/backend/ClientService.java

@@ -35,8 +35,7 @@ public Client addGroceryProductToClient(GroceryProduct groceryProduct, String id
     }
 
     public Client addClient(Client clientDto) {
-        Client client = new Client(clientDto.id(), clientDto.shoppingList());
-        return clientRepository.save(client);
+        return null;
     }
 
     public Client updateClient(String id, Client clientDto) {
@@ -90,4 +89,8 @@ public void deleteProductByIdFromClientById(String idClient, String idProduct) {
             throw new NoSuchElementException("No Client found with Id:" + idClient);
         }
     }
+
+
+    public void changeProductByIdFromClientById(String idClient, String idProduct) {
+    }
 }

backend/src/main/java/springweb/backend/GroceryController.java

@@ -1,9 +1,7 @@
 package springweb.backend;
 
 
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
 
@@ -23,5 +21,9 @@ public List<GroceryProduct> getAllGroceryProducts() {
         return groceryService.getAllGroceryProducts();
     }
 
+    @PutMapping("/{idProduct}")
+    public GroceryProduct updateProduct(@PathVariable String id, @RequestBody GroceryProduct productDto) {
+        return groceryService.updateProduct(id, productDto);
+    }
 
 }

backend/src/main/java/springweb/backend/GroceryProduct.java

@@ -8,6 +8,8 @@ public record GroceryProduct(
         String category,
         String name,
         double price,
+        Integer count,
+        String status,
         String image
         ) {
 }

backend/src/main/java/springweb/backend/GroceryService.java

@@ -3,6 +3,7 @@
 import org.springframework.stereotype.Service;
 
 import java.util.List;
+import java.util.NoSuchElementException;
 
 @Service
 public class GroceryService {
@@ -18,4 +19,12 @@ public List<GroceryProduct> getAllGroceryProducts() {
     }
 
 
+    public GroceryProduct updateProduct(String id, GroceryProduct productDto) {
+        if (groceryRepository.existsById(id)) {
+            GroceryProduct updatedProduct = new GroceryProduct(id, productDto.category(),productDto.name(),productDto.price(),productDto.count(),productDto.status(),productDto.image());
+            return groceryRepository.save(updatedProduct);
+        } else {
+            throw new NoSuchElementException("No Product found with Id:" + id);
+        }
+    }
 }

backend/src/main/resources/application.properties

@@ -1,3 +1,3 @@
 spring.application.name=backend
-# spring.data.mongodb.uri=${MONGO_DB_URI}
-spring.data.mongodb.uri=${MONGO_DB_URI_LOCAL}
+spring.data.mongodb.uri=${MONGO_DB_URI}
+#spring.data.mongodb.uri=${MONGO_DB_URI_LOCAL}

frontend/public/_GroceryDB.clients.json

@@ -7,13 +7,17 @@
         "category": "fruit",
         "name": "apple",
         "price": 1.5,
+        "count": 1,
+        "status": "sold",
         "image": "apple.jpg"
       },
       {
         "_id": "2",
         "category": "fruit",
         "name": "banana",
         "price": 1,
+        "count": 1,
+        "status": "sold",
         "image": "banane.jpg"
       }
     ]
@@ -26,13 +30,17 @@
         "category": "fruit",
         "name": "apple",
         "price": 1.5,
+        "count": 1,
+        "status": "sold",
         "image": "apple.jpg"
       },
       {
         "_id": "2",
         "category": "fruit",
         "name": "banana",
         "price": 1,
+        "count": 1,
+        "status": "sold",
         "image": "banane.jpg"
       }
     ]

frontend/public/_GroceryDB.products.json

@@ -3,61 +3,79 @@
   "category": "fruit",
   "name": "apple",
   "price": 1.5,
+  "count": 1,
+  "status": "sold",
   "image": "apple.jpg"
 },
 {
   "_id": "2",
   "category": "fruit",
   "name": "banana",
   "price": 1,
+  "count": 1,
+  "status": "sold",
   "image": "banane.jpg"
 },
 {
   "_id": "3",
   "category": "spices",
   "name": "salt (500g)",
   "price": 3.49,
+  "count": 1,
+  "status": "sold",
   "image": "salt.jpg"
 },
 {
   "_id": "4",
   "category": "spices",
   "name": "chili (100g)",
   "price": 4.5,
+  "count": 1,
+  "status": "sold",
   "image": "chili.jpg"
 },
 {
   "_id": "5",
   "category": "cutlery",
   "name": "fork",
   "price": 5,
+  "count": 1,
+  "status": "sold",
   "image": "fork.jpg"
 },
 {
   "_id": "6",
   "category": "cutlery",
   "name": "spoon",
   "price": 5.5,
+  "count": 1,
+  "status": "sold",
   "image": "spoon.jpg"
 },
 {
   "_id": "7",
   "category": "meat",
   "name": "zebra",
   "price": 599.99,
+  "count": 1,
+  "status": "sold",
   "image": "zebra.jpg"
 },
 {
   "_id": "8",
   "category": "meat",
   "name": "hippopotamus",
   "price": 699.99,
+  "count": 1,
+  "status": "sold",
   "image": "hippo.jpg"
 },
 {
   "_id": "9",
   "category": "electronics",
   "name": "playstation 5",
   "price": 299.99,
+  "count": 1,
+  "status": "sold",
   "image": "ps5.jpg"
 }]

frontend/src/App.css

@@ -5,4 +5,7 @@ h1{
     padding: 20px;
     color: hsl(0,0%,20%);
     text-align: center;
+}
+.marketContainer{
+    display: flex;
 }

frontend/src/App.tsx

@@ -6,11 +6,14 @@ import ShoppingListView from "./components/ShoppingListView.tsx";
 export default function App() {
 
   return (
-    <>
-        <h1>Grocery</h1>
-        <ProductView/>
-        <ShoppingListView/>
-    </>
+      <>
+          <h1>Grocery</h1>
+          <div className="marketContainer">
+              <ProductView/>
+              <ShoppingListView/>
+          </div>
+
+      </>
   )
 }
 

frontend/src/Product.ts

@@ -1,9 +1,12 @@
 import {Category} from "./Category.ts";
+import {Status} from "./Status.ts";
 
 export type Product = {
     id: number,
     name: string,
     category: Category,
     price: number,
+    count: number,
+    status: Status,
     image: string
 }

frontend/src/Status.ts

@@ -1 +1 @@
-export type Status = "available" | "not_available"
+export type Status = "sold" | "available"

frontend/src/components/ProductCard.css

@@ -6,12 +6,15 @@
     margin: 10px;
     text-align: center;
     background-color: hsla(50,0%,0%,0.4);
-    width: 300px;
-    height: 300px;
+    width: 250px;
+    height: 250px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    cursor: pointer;
+    transition: background-color 0.5s ease;
 }
 
 .productCard-container img {
@@ -25,4 +28,11 @@ h3{
     font-family: Arial, sans-serif;
     color: hsl(0,0%,20%);
     text-transform: capitalize;
+}
+.addProductButton{
+
+}
+
+.productCard-container:hover {
+    background-color: hsla(50,0%,0%,0.3);
 }

frontend/src/components/ProductCard.tsx

@@ -6,13 +6,21 @@ type Props = {
 }
 
 export default function ProductCard(props : Props) {
+
+    function addProductToCart() {
+        console.log(props.product.name + " added")
+
+
+    }
+
     return (
-        <div className="productCard-container">
+        <div className="productCard-container" onClick={addProductToCart}>
 
 
             <h3>{props.product.name}</h3>
             <p>Category: {props.product.category}</p>
             <p>Price: {props.product.price} euro</p>
+            <p>Count: {props.product.count} </p>
             <img src={`/${props.product.image}`} alt="image of product"/>
 
 

frontend/src/components/ProductView.css

@@ -3,7 +3,9 @@
     border: 10px solid hsl(100,10%, 80%);
     border-radius: 50px;
     background-color: pink;
-    width: 55%
+    width: 55%;
+    min-width: 700px;
+    max-width: 1000px;
 }
 
 .productView-container h2 {

frontend/src/components/ShoppingListCard.css

@@ -0,0 +1,46 @@
+
+h3 {
+    align-content: center;
+    font-family: Arial, sans-serif;
+    color: hsl(0, 0%, 20%);
+    text-transform: capitalize;
+}
+
+.shoppingListCard-container {
+
+    border: 5px solid hsl(0,0%, 80%);
+    border-radius: 20px;
+    box-shadow: 5px 5px 5px hsla(0,0%,0%,0.1);
+    padding: 10px;
+    margin: 10px;
+    text-align: center;
+    background-color: hsla(70,40%,60%,0.2);
+    width: 50%;
+    min-width: 800px;
+    /*
+    width: 800px;
+    */
+    height: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+
+    cursor: pointer;
+    transition: background-color 0.5s ease;
+}
+
+.shoppingListCard-container:hover {
+    background-color: hsla(50, 0%, 0%, 0.1);
+}
+
+.shoppingListCard-container img {
+    border-radius: 50%;
+    width: auto;
+    height: 100%;
+}
+
+.deleteButton{
+    border-radius: 20%;
+    background-color: hsla(70,40%,60%,0.3);
+}