added project detail view

frontend/src/routes.js

@@ -4,6 +4,7 @@ import Index from './views/Index'
 // import Projects from './views/Projects'
 import ListProjects from './views/project/List'
 import CreateProject from './views/project/Create'
+import ShowProject from './views/project/Detail'
 import Login from './views/Login'
 import Logout from './views/Logout'
 
@@ -42,6 +43,11 @@ export default new VueRouter({
             name: 'create_project',
             component: CreateProject,
         },
+        {
+            path: '/project/:id',
+            name: 'show_project',
+            component: ShowProject,
+        },
         {
             path: '/logout',
             name: 'logout',

frontend/src/views/project/Detail.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col :cols=10>
+        <h1>Project Information</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-card outlined elevation="2" max-width=80% class="mx-auto">
+      <div v-if="project != null">
+        <v-card-title>
+          <v-container fluid>
+            <v-row>
+              <v-col>{{ project.name }}</v-col>
+              <v-col class="d-flex align-end flex-column">
+                <v-btn @click="deleteProject" fab color="error"><v-icon>mdi-trash-can-outline</v-icon></v-btn>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-title>
+        <v-card-text>
+          <v-container fluid>
+            <v-row>
+              <v-col>Description</v-col>
+              <v-col>{{ project.description }}</v-col>
+            </v-row>
+            <v-row>
+              <v-col>Data Folder</v-col>
+              <v-col>{{ project.data_folder }}</v-col>
+            </v-row>
+            <v-row>
+              <v-col>Model</v-col>
+              <v-col>{{ project.model_id }}</v-col>
+            </v-row>
+            <v-row>
+              <v-col>Label Provider</v-col>
+              <v-col>{{ project.label_provider_id }}</v-col>
+            </v-row>
+          </v-container >
+        </v-card-text>
+      </div>
+
+      <div v-else>
+        <v-card-title>
+          Invalid Project!
+        </v-card-title>
+        <v-card-text>
+          <v-container fluid>
+            Please navigate back to your <router-link :to = "{ name: 'projects' }" >project list</router-link>.
+          </v-container >
+        </v-card-text>
+      </div>
+    </v-card>
+
+
+  </v-container>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+
+  export default {
+    name: 'ShowProject',
+
+
+    computed: {
+      project() {
+          return this.data.projects.find(obj => obj.id == this.$route.params.id)
+      },
+      ...mapState(['data']),
+    },
+
+    created () {
+      this.$store.dispatch('data/getProjects');
+    },
+
+    methods: {
+      deleteProject (){
+        console.log("Delete project!")
+      }
+    }
+
+  }
+</script>
+
+<style scoped></style>

frontend/src/views/project/List.vue

@@ -20,6 +20,7 @@
         <v-card
           outlined elevation="2"
           max-width=450px class="mx-auto"
+          :to="{ name: 'show_project', params: { id: project.id }}"
           >
           <v-card-title>Name: {{project.name}}</v-card-title>
           <v-card-text>