From 19703fff36d7aa539fbcb731fa7490673a0ff444 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 1 Nov 2019 10:07:22 +0900
Subject: [PATCH] Add annotation start button to the side bar

---
 .../organisms/layout/TheSideBar.vue           | 24 +++++++++++++++++++
 frontend/layouts/annotation.vue               | 15 +++++++++++-
 frontend/layouts/project.vue                  | 24 +++++++++++++++----
 frontend/store/projects.js                    | 11 +++++++++
 4 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/frontend/components/organisms/layout/TheSideBar.vue b/frontend/components/organisms/layout/TheSideBar.vue
index 082a1a1f..29cf6d75 100644
--- a/frontend/components/organisms/layout/TheSideBar.vue
+++ b/frontend/components/organisms/layout/TheSideBar.vue
@@ -1,5 +1,15 @@
 <template>
   <v-list dense>
+    <v-btn
+      color="ms-4 my-1 mb-2 primary text-capitalize"
+      :to="to"
+      nuxt
+    >
+      <v-icon left>
+        mdi-play-circle-outline
+      </v-icon>
+      Start annotation
+    </v-btn>
     <template v-for="(item, i) in items">
       <v-divider
         v-if="item.divider"
@@ -29,6 +39,14 @@
 
 <script>
 export default {
+  props: {
+    link: {
+      type: String,
+      default: '',
+      required: true
+    }
+  },
+
   data() {
     return {
       items: [
@@ -40,6 +58,12 @@ export default {
         { icon: 'mdi-chart-bar', text: 'Statistics', link: 'statistics' }
       ]
     }
+  },
+
+  computed: {
+    to() {
+      return `/projects/${this.$route.params.id}/${this.link}`
+    }
   }
 }
 </script>
diff --git a/frontend/layouts/annotation.vue b/frontend/layouts/annotation.vue
index 58882b24..7cdd0329 100644
--- a/frontend/layouts/annotation.vue
+++ b/frontend/layouts/annotation.vue
@@ -12,7 +12,7 @@
       clipped
       color=""
     >
-      <the-side-bar />
+      <the-side-bar :link="getLink" />
     </v-navigation-drawer>
 
     <nuxt />
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
 import TheHeader from '~/components/organisms/layout/TheHeader'
 
@@ -32,6 +33,18 @@ export default {
     return {
       drawerLeft: false
     }
+  },
+
+  computed: {
+    ...mapGetters('projects', ['getLink'])
+  },
+
+  created() {
+    this.setCurrentProject(this.$route.params.id)
+  },
+
+  methods: {
+    ...mapActions('projects', ['setCurrentProject'])
   }
 }
 </script>
diff --git a/frontend/layouts/project.vue b/frontend/layouts/project.vue
index c8e6f89d..aff34b4b 100644
--- a/frontend/layouts/project.vue
+++ b/frontend/layouts/project.vue
@@ -12,7 +12,7 @@
       clipped
       color=""
     >
-      <the-side-bar />
+      <the-side-bar :link="getLink" />
     </v-navigation-drawer>
 
     <v-content>
@@ -33,6 +33,7 @@
 </template>
 
 <script>
+import { mapActions, mapGetters } from 'vuex'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
 import TheHeader from '~/components/organisms/layout/TheHeader'
 
@@ -41,8 +42,23 @@ export default {
     TheSideBar,
     TheHeader
   },
-  data: () => ({
-    drawerLeft: false
-  })
+
+  data() {
+    return {
+      drawerLeft: false
+    }
+  },
+
+  computed: {
+    ...mapGetters('projects', ['getLink'])
+  },
+
+  created() {
+    this.setCurrentProject(this.$route.params.id)
+  },
+
+  methods: {
+    ...mapActions('projects', ['setCurrentProject'])
+  }
 }
 </script>
diff --git a/frontend/store/projects.js b/frontend/store/projects.js
index 930523a6..428a65bb 100644
--- a/frontend/store/projects.js
+++ b/frontend/store/projects.js
@@ -31,6 +31,17 @@ export const getters = {
       }
     ]
   },
+  getLink(state) {
+    if (state.current.project_type === 'DocumentClassification') {
+      return 'text-classification'
+    } else if (state.current.project_type === 'SequenceLabeling') {
+      return 'sequence-labeling'
+    } else if (state.current.project_type === 'Seq2seq') {
+      return 'sequence-to-sequence'
+    } else {
+      return ''
+    }
+  },
   getImportFormat(state) {
     const plain = {
       type: 'plain',