add: item details routing

frontend/src/components/AdminSidebarMenu.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <template v-for="item in sidebarItems" :key="item.title">
+            <va-sidebar-item :active="item.active" :to="{ name: `${item.route}` }">
+                <va-sidebar-item-content class="sidebar-item">
+                    <va-icon class="sidebar-icon" size="2rem" :name="item.icon" />
+                    <va-sidebar-item-title class="sidebar-title">{{ item.title }}</va-sidebar-item-title>
+                </va-sidebar-item-content>
+            </va-sidebar-item>
+        </template>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: 'sidebar-menu',
+    props: {
+        sidebarItems: {
+            type: Array,
+            required: true,
+        }
+    },
+    mounted() {
+        console.log(this.sidebarItems)
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>

frontend/src/components/ItemDetails.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <va-card id="preview" class="content-container"></va-card>
+        <va-card id="description" class="content-container"></va-card>
+        <va-card id="details" class="content-container"></va-card>
+        <va-card id="map" class="content-container"></va-card>
+        <va-card id="contact" class="content-container"></va-card>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "item-details",
+}
+</script>
+
+
+<style lang="css">
+</style>

frontend/src/components/ItemSidebarMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <template v-for="item in sidebarItems" :key="item.title">
-            <va-sidebar-item :active="item.active" @click="$router.push({ name: `${item.route}` })">
+            <va-sidebar-item :active="item.active" :href="`${item.hash}`">
                 <va-sidebar-item-content class="sidebar-item">
                     <va-icon class="sidebar-icon" size="2rem" :name="item.icon" />
                     <va-sidebar-item-title class="sidebar-title">{{ item.title }}</va-sidebar-item-title>
@@ -21,6 +21,7 @@ export default {
             required: true,
         }
     },
+
 }
 </script>
 

frontend/src/components/NotFound.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <navbar />
+        <h1>404 not found</h1>
+    </div>
+</template>
+
+
+<script>
+import Navbar from "./Navbar.vue";
+export default {
+    components: { Navbar }
+}
+</script>
+
+
+<style lang="css">
+</style>

frontend/src/components/OverviewScreen.vue

@@ -4,7 +4,12 @@
             <map-component @mapClick="$emit('mapClick', $event)" />
         </va-card>
         <va-card class="content-container">
-            <va-data-table :items="items" :hoverable="true" />
+            <va-data-table
+                :items="items"
+                :hoverable="true"
+                :clickable="true"
+                @row:click="(e) => $router.push(`/items/${e.item.id}`)"
+            />
         </va-card>
     </div>
 </template>

frontend/src/router/index.js

@@ -1,8 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import FrontView from "@/views/FrontView";
 import AdminView from "@/views/AdminView";
+import ItemView from "@/views/ItemView";
 import ActiveSchemaScreen from "@/components/ActiveSchemaScreen";
 import UploadScreen from "@/components/UploadScreen";
+import NotFound from "@/components/NotFound";
 
 
 
@@ -19,6 +21,16 @@ const routes = [
             { path: '', component: UploadScreen, name: "upload" }
         ]
     },
+    {
+        path: '/items/:id',
+        component: ItemView,
+        name: 'item-details',
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        component: NotFound,
+        name: 'not-found',
+    },
 
 ]
 

frontend/src/views/AdminView.vue

@@ -4,7 +4,7 @@
 
         <div class="central-view">
             <sidebar>
-                <sidebar-menu :sidebarItems="sidebarItems" />
+                <admin-sidebar-menu :sidebarItems="sidebarItems" />
             </sidebar>
 
             <div class="main-view">
@@ -20,10 +20,10 @@ import UploadScreen from '@/components/UploadScreen.vue'
 import ActiveSchemaScreen from '@/components/ActiveSchemaScreen.vue'
 import Navbar from '@/components/Navbar.vue'
 import Sidebar from '@/components/Sidebar.vue'
-import SidebarMenu from '@/components/filters/SidebarMenu.vue'
+import AdminSidebarMenu from '@/components/AdminSidebarMenu.vue'
 export default {
     name: "admin-view",
-    components: { UploadScreen, ActiveSchemaScreen, Navbar, Sidebar, SidebarMenu },
+    components: { UploadScreen, ActiveSchemaScreen, Navbar, Sidebar, AdminSidebarMenu },
     data() {
         return {
             sidebarItems: [
@@ -36,6 +36,7 @@ export default {
                 {
                     title: "Review Data",
                     icon: "dashboard",
+                    route: "not-found"
                 },
                 {
                     title: "Upload",

frontend/src/views/ItemView.vue

@@ -0,0 +1,64 @@
+<template>
+    <navbar />
+    <div class="central-view">
+        <sidebar>
+            <item-sidebar-menu :sidebarItems="sidebarItems" />
+        </sidebar>
+        <div class="main-view">
+            <item-details />
+        </div>
+    </div>
+</template>
+
+
+<script>
+import Navbar from "@/components/Navbar.vue";
+import ItemDetails from "@/components/ItemDetails.vue";
+import Sidebar from "@/components/Sidebar.vue";
+import ItemSidebarMenu from "@/components/ItemSidebarMenu.vue";
+export default {
+    components: { Navbar, ItemDetails, Sidebar, ItemSidebarMenu },
+    data() {
+        return {
+            sidebarItems: [
+                {
+                    title: "Preview",
+                    icon: "fact_check",
+                    route: "item-details",
+                    hash: "#preview",
+                },
+                {
+                    title: "Description",
+                    icon: "dashboard",
+                    route: "item-details",
+                    hash: "#description",
+                },
+                {
+                    title: "Details",
+                    icon: "file_upload",
+                    route: "item-details",
+                    hash: "#details",
+                },
+                {
+                    title: "Map",
+                    icon: "file_upload",
+                    route: "item-details",
+                    hash: "#map",
+                },
+                {
+                    title: "Contact",
+                    icon: "file_upload",
+                    route: "item-details",
+                    hash: "#contact",
+                },
+
+            ],
+            itemDetails: {},
+        }
+    },
+}
+</script>
+
+
+<style lang="css">
+</style>