add: frontend cart logic

frontend/src/components/Navbar.vue

@@ -10,7 +10,7 @@
                 <slot></slot>
             </template>
             <template #right>
-                <va-dropdown :close-on-content-click="false" :modelValue="true" placement="bottom-end" prevent-overflow>
+                <va-dropdown :close-on-content-click="false" placement="bottom-end" prevent-overflow>
                     <template #anchor>
                         <va-navbar-item class="top-icon">
                             <va-popover message="Корзина">
@@ -19,15 +19,33 @@
                         </va-navbar-item>
                     </template>
                     <va-dropdown-content>
-                        <va-card>
+                        <va-card class="flex">
                             <va-card-title>Корзина</va-card-title>
-                            <va-card-content class="cart-inner">
+                            <va-card-content v-if="!itemsInCart.length" class="cart-inner cart-empty">
-                                <p class="cart-empty">Корзина пуста</p>
+                                <p class="cart-empty__text">Корзина пуста</p>
-                                <p class="cart-empty">Попробуйте перейти на страницу образца</p>
+                                <p class="cart-empty__text">Попробуйте перейти на страницу образца</p>
-                                <p v-if="isItemPath" class="cart-empty">
+                                <p v-if="isItemPath" class="cart-empty__text">
                                     и <va-button @click="addToCart">Добавить в корзину</va-button>
                                 </p>
                             </va-card-content>
+                            <template v-else>
+                                <va-card-actions align="between">
+                                    <template v-if="isItemPath">
+                                        <va-button v-if="!isPathInCart" @click="addToCart">Добавить в корзину
+                                        </va-button>
+                                        <va-button v-else @click="removeFromCart">Убрать из корзины</va-button>
+                                    </template>
+
+                                    <va-button color="warning" @click="emptyCart">Очистить корзину</va-button>
+
+                                </va-card-actions>
+                                <va-card-content class="cart-inner">
+                                    <va-data-table :items="itemsInCart" :columns="filteredColumns" :hoverable="true"
+                                        :clickable="true" select-mode="single" @row:click="(e) => handleClick(e)"
+                                        class="similar-items-table" />
+                                </va-card-content>
+                            </template>
+
                         </va-card>
                     </va-dropdown-content>
                 </va-dropdown>
@@ -45,26 +63,81 @@
 <script>
 export default {
     name: "navbar",
+    data() {
+        return {
+            columnHeaders: [],
+            showColumns: [
+                "description",
+                "deposit",
+                "category",
+            ],
+            itemsInCart: [],
+        }
+    },
     methods: {
         addToCart() {
-            fetch(`/api/v1/item/${this.$route.params.id}`)
+            if (!this.isPathInCart) {
+                fetch(`/api/v1/item/${this.$route.params.id}`)
+                    .then(res => res.json())
+                    .then(data => {
+                        this.itemsInCart.push(data);
+                        localStorage.setItem("cart", JSON.stringify(this.itemsInCart));
+                    })
+                    .catch((e) => console.log(e));
+            }
+        },
+        removeFromCart() {
+            const routeId = Number.parseInt(this.$route.params.id);
+            this.itemsInCart = this.itemsInCart.filter(item => item.id !== routeId)
+            localStorage.setItem("cart", JSON.stringify(this.itemsInCart));
+        },
+        emptyCart() {
+            this.itemsInCart = [];
+            localStorage.removeItem("cart");
+        },
+        restoreCart() {
+            if (localStorage.getItem("cart")) {
+                this.itemsInCart = JSON.parse(localStorage.getItem("cart"))
+            }
+        },
+        async fetchColumnHeaders() {
+            fetch(`/api/v1/headers/`)
                 .then(res => res.json())
-                .then(data => localStorage.setItem("cart", JSON.stringify(
+                .then(data => this.columnHeaders = data)
-                    // check if we have anything in this.itemsInCart or create empty
-                    // then create new array with newly fetched data in it
-                    [...this.itemsInCart ? this.itemsInCart : [], data]
-                )))
                 .catch((e) => console.log(e));
-
+        },
+        handleClick(e) {
+            if (String(e.item.id) !== this.$route.params.id) {
+                window.open(`/items/${e.item.id}`, '_blank')
+            }
         }
     },
+    mounted() {
+        this.fetchColumnHeaders();
+        this.restoreCart()
+    },
     computed: {
         isItemPath() {
             return this.$route.name === "item-details";
         },
-        itemsInCart() {
+        filteredColumns() {
-            return JSON.parse(localStorage.getItem("cart"))
+            return this.columnHeaders
-        }
+                .filter(header => this.showColumns.includes(header.database))
+                .sort((header1, header2) => {
+                    return this.showColumns.indexOf(header1.database) - this.showColumns.indexOf(header2.database)
+                })
+                .map(header => {
+                    return {
+                        key: header.database,
+                        label: header.spreadsheet,
+                        sortable: true,
+                    }
+                })
+        },
+        isPathInCart() {
+            const routeId = Number.parseInt(this.$route.params.id);
+            return this.itemsInCart.some(item => item.id === routeId)
+        },
     },
 }
 </script>
@@ -78,12 +151,15 @@ export default {
 .cart-inner {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     min-width: 30rem;
-    min-height: 40rem;
+    min-height: 30rem;
 }
 
 .cart-empty {
+    justify-content: center;
+}
+
+.cart-empty__text {
     margin: 1rem auto;
 }
 </style>

frontend/src/main.js

@@ -22,6 +22,7 @@ import {
     VaCard,
     VaCardTitle,
     VaCardContent,
+    VaCardActions,
     VaImage,
     VaSelect,
     VaPagination,
@@ -69,6 +70,7 @@ app.use(createVuesticEssential({
         VaCard,
         VaCardTitle,
         VaCardContent,
+        VaCardActions,
         VaImage,
         VaSelect,
         VaPagination,