fixed nested views

frontend/src/main.js

@@ -20,7 +20,6 @@ router.beforeEach((to, from, next) => {
   let isProjectView = to.matched.some(record => record.meta.projectView);
 
   let currentProject = null;
-  console.log(to.path, isProjectView)
   if (isProjectView)
     currentProject = to.params.id;
 

frontend/src/routes.js

@@ -4,7 +4,11 @@ import Index from './views/Index'
 // import Projects from './views/Projects'
 import ListProjects from './views/project/List'
 import CreateProject from './views/project/Create'
+import BaseProject from './views/project/Base'
 import ShowProject from './views/project/Detail'
+import Data from './views/project/Data'
+import Labels from './views/project/Labels'
+import Annotations from './views/project/Annotations'
 import Login from './views/Login'
 import Logout from './views/Logout'
 
@@ -45,28 +49,31 @@ export default new VueRouter({
         },
         {
             path: '/project/:id',
-            name: 'project',
-            component: ShowProject,
+            component: BaseProject,
             meta: {
               projectView: true,
             },
 
             children: [
+              {
+                path: 'info',
+                name: 'project',
+                component: ShowProject
+              },
               {
                 path: 'labels',
                 name: 'labels',
-                component: ShowProject
-
+                component: Labels
               },
               {
                 path: 'data',
                 name: 'data',
-                component: ShowProject
+                component: Data
               },
               {
                 path: 'annotations',
                 name: 'annotations',
-                component: ShowProject
+                component: Annotations
               },
             ]
         },

frontend/src/store/data.module.js

@@ -9,6 +9,12 @@ export const data = {
     projects: [],
   },
 
+  getters: {
+    getProjects: state => {
+      return state.projects;
+    }
+  },
+
   actions : {
     getModels({ commit }) {
       DataService.getModels().then(

frontend/src/views/project/Annotations.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col :cols=10>
+        <h1>Annotations</h1>
+      </v-col>
+      <v-col :cols=2 >
+        <v-btn :to = "{ name: 'projects' }" block color="error">
+          <v-icon>mdi-reply</v-icon> Back
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

frontend/src/views/project/Base.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

frontend/src/views/project/Data.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col :cols=10>
+        <h1>Data</h1>
+      </v-col>
+      <v-col :cols=2 >
+        <v-btn :to = "{ name: 'projects' }" block color="error">
+          <v-icon>mdi-reply</v-icon> Back
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

frontend/src/views/project/Labels.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col :cols=10>
+        <h1>Labels</h1>
+      </v-col>
+      <v-col :cols=2 >
+        <v-btn :to = "{ name: 'projects' }" block color="error">
+          <v-icon>mdi-reply</v-icon> Back
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

frontend/src/views/project/List.vue

@@ -13,7 +13,7 @@
     </v-row>
     <v-row dense>
       <v-col
-        v-for="project in data.projects"
+        v-for="project in projects"
         :key="project.id"
         :cols=4
       >
@@ -35,11 +35,15 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import { mapGetters } from 'vuex'
 
   export default {
     name: 'Projects',
-    computed: mapState(['data']),
+
+    computed: mapGetters('data', {
+      projects: 'getProjects'
+    }),
+
     created () {
       this.$store.dispatch('data/getProjects')
     },