Fixes and display on homeview

frontend/src/assets/style/CSS.css

@@ -6,6 +6,10 @@
     padding: 15px;
 }
 
+.addItemFields {
+    margin-top: 22px;
+  }
+
 #submitButton {
     background-color: #41B883;
     border-color: #41B883;

frontend/src/libs/apis/category.js

@@ -4,7 +4,6 @@ var category = {
   async create({ name, desc, imageUrl }) {
     const dataCategory = JSON.stringify({ name, desc, imageUrl });
     const result = await axios.post('http://localhost:3001/category/create', dataCategory, {withCredentials: true, headers: {"Content-type": "application/json",} });
-    console.log(result);
     return result;
   },
   async all() {

frontend/src/libs/apis/price.js

@@ -9,6 +9,11 @@ var price = {
   async all() {
     const result = await axios.get('http://localhost:3001/price/all', {withCredentials: true, headers: {"Content-type": "application/json",} });
     return result;
+  },
+  async delete({ id }) {
+    const dataCategory = JSON.stringify({ id });
+    const result = await axios.delete('http://localhost:3001/price/delete', dataCategory, {withCredentials: true, headers: {"Content-type": "application/json",} });
+    return result;
   }
 }
 

frontend/src/views/Dashboard/pages/item.vue

@@ -45,7 +45,7 @@ export default {
       <form @submit="onSubmit" method="post">
         <div class="flex flex-row py-2 px-2 space-x-2 bg-gray-100">
           <div>
-            <input v-model="name" type="text" placeholder="Name" required />
+            <input class="addItemFields" v-model="name" type="text" placeholder="Name" required />
           </div>
           <div>
             <label for="category">Choose a category:</label>
@@ -66,6 +66,7 @@ export default {
           </div>
           <div>
             <input
+              class="addItemFields"
               v-model="desc"
               required
               type="text"
@@ -90,9 +91,9 @@ export default {
 
         <tr v-for="item in items" :key="item.name">
           <td>{{ item.name }}</td>
-          <div v-for="category of categories" :key="category._id">
+          <template v-for="category of categories" :key="category._id">
             <td class="box" v-if="category._id == item.category">{{ category.name }}</td>
-          </div>
+          </template>
           <td>{{ item.desc }}</td>
         </tr>
       </table>

frontend/src/views/Dashboard/pages/product.vue

@@ -70,6 +70,9 @@ export default {
       this.price = this.source = this.selectedProduct = "";
     },
   },
+  // computed: {
+
+  // },
   async mounted() {
     const resCategories = await categoryApi.all();
     this.categories = resCategories.data.data;
@@ -79,9 +82,6 @@ export default {
     this.products = resProducts.data.data;
     const resPrices = await priceApi.all();
     this.prices = resPrices.data.data;
-    console.log(this.products)
-    console.log(this.prices)
-    
   },
 };
 </script>
@@ -96,7 +96,7 @@ export default {
       <form @submit="onCreateProduct" method="post">
         <div class="flex flex-row py-2 px-2 space-x-1 bg-gray-100">
           <div>
-            <input required v-model="title" type="text" placeholder="Title" />
+            <input class="addItemFields" required v-model="title" type="text" placeholder="Title" />
           </div>
           <div>
             <label for="item">Choose an item:</label>
@@ -113,6 +113,7 @@ export default {
           </div>
           <div>
             <input
+              class="addItemFields"
               required
               v-model="imageUrl"
               type="text"
@@ -121,6 +122,7 @@ export default {
           </div>
           <div>
             <input
+              class="addItemFields"
               required
               v-model="desc"
               type="text"
@@ -154,17 +156,14 @@ export default {
           <td>
             <ul>
               <li v-for="price in prices" :key="price._id">
-                <!-- <div v-for="price in prices" :key="price._id"> -->
-                 <!-- {{ product._id }} -->
-                  <span v-if="product._id == price.product">{{ price.price }}$</span>
-                  <span v-if="product._id == price.product">({{ price.source }})</span>
-                <!-- </div> -->
+                <span v-if="product._id == price.product">{{ price.price }}$</span>
+                <span v-if="product._id == price.product">({{ price.source }})</span>
               </li>
             </ul>
           </td>
-          <div v-for="item of items" :key="item._id">
+          <template v-for="item of items" :key="item._id">
             <td class="box" v-if="item._id == product.item">{{ item.name }}</td>
-          </div>
+          </template>
           <td>{{ product.imageUrl }}</td>
           <td>{{ product.desc }}</td>
           <td>

frontend/src/views/HomeView.vue

 <script >
 import categoryApi from "@/libs/apis/category";
 import productApi from "@/libs/apis/product";
+import priceApi from "@/libs/apis/price";
 export default {
   components: {},
   data() {
     return {
       categories: [],
       products: [],
+      prices: [],
       categoryClickedId: [],
       itemClickedId: ''
     };
@@ -14,13 +16,15 @@ export default {
   async mounted() {
     const resCategories = await categoryApi.categorizedItems();
     const resProducts = await productApi.all();
+    const resPrices = await priceApi.all();
     this.categories = resCategories.data;
     this.products = resProducts.data.data;
+    this.prices = resPrices.data.data;
   },
   methods: {
     categoryClicked: function (idCategory) {
       if (this.categorySelected(idCategory)) {
-        this.categoryClickedId.pop(idCategory);
+        this.categoryClickedId.splice(this.categoryClickedId.indexOf(idCategory),1);
       } else {
         this.categoryClickedId.push(idCategory);
       }
@@ -75,11 +79,11 @@ export default {
 
       <div class="right">
       <tr v-for="product in products" :key="product._id">
-        <ul v-if="this.itemClickedId == product.item._id">
-          <div class="border"> 
+        <ul v-if="this.itemClickedId == product.item">
+          <div class="border" id="productsStore"> 
             <li>Name : {{ product.title }}</li>
-            <ul v-for="price in product.prices" :key="price._id">
-              <li>{{price.price}}$ in {{price.source}}</li>
+            <ul v-for="price in prices" :key="price._id">
+              <li v-if="price.product == product._id">{{price.price}}$ in {{price.source}}</li>
             </ul>
           </div>
         </ul>
@@ -96,4 +100,8 @@ export default {
   display: flex;
 }
 
+#productsStore {
+  margin: 4px;
+}
+
 </style>
\ No newline at end of file