Simplify each annotation page

frontend/layouts/annotation.vue

@@ -18,7 +18,36 @@
       />
     </v-navigation-drawer>
 
-    <nuxt />
+    <v-content>
+      <v-container fluid>
+        <v-row
+          no-gutters
+          class="d-none d-sm-flex"
+        >
+          <v-col v-if="currentDoc">
+            <approve-button :approved="approved" />
+            <filter-button />
+            <guideline-button />
+          </v-col>
+          <v-spacer />
+          <v-col>
+            <paginator />
+          </v-col>
+        </v-row>
+        <v-row justify="center">
+          <v-col cols="12" md="9">
+            <nuxt />
+          </v-col>
+          <v-col cols="12" md="3">
+            <metadata-box
+              v-if="currentDoc"
+              :metadata="JSON.parse(currentDoc.meta)"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
+
     <bottom-navigator class="d-flex d-sm-none" />
   </v-app>
 </template>
@@ -28,12 +57,24 @@ import { mapActions, mapGetters } from 'vuex'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
 import TheHeader from '~/components/organisms/layout/TheHeader'
 import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
+import Paginator from '~/components/containers/annotation/Paginator'
+import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
+import MetadataBox from '@/components/organisms/annotation/MetadataBox'
+import FilterButton from '@/components/containers/annotation/FilterButton'
+import ApproveButton from '@/components/containers/annotation/ApproveButton'
 
 export default {
+  middleware: ['check-auth', 'auth'],
+
   components: {
     TheSideBar,
     TheHeader,
-    BottomNavigator
+    BottomNavigator,
+    Paginator,
+    GuidelineButton,
+    FilterButton,
+    ApproveButton,
+    MetadataBox
   },
   data() {
     return {
@@ -42,7 +83,8 @@ export default {
   },
 
   computed: {
-    ...mapGetters('projects', ['getLink', 'getCurrentUserRole'])
+    ...mapGetters('projects', ['getLink', 'getCurrentUserRole']),
+    ...mapGetters('documents', ['currentDoc', 'approved'])
   },
 
   created() {
@@ -51,6 +93,10 @@ export default {
 
   methods: {
     ...mapActions('projects', ['setCurrentProject'])
+  },
+
+  validate({ params }) {
+    return /^\d+$/.test(params.id)
   }
 }
 </script>

frontend/pages/projects/_id/sequence-labeling/index.vue

@@ -1,68 +1,19 @@
 <template>
-  <v-content>
-    <v-container fluid>
-      <v-row
-        no-gutters
-        class="d-none d-sm-flex"
-      >
-        <v-col v-if="currentDoc">
-          <approve-button :approved="approved" />
-          <filter-button />
-          <guideline-button />
-        </v-col>
-        <v-spacer />
-        <v-col>
-          <paginator />
-        </v-col>
-      </v-row>
-      <v-row justify="center">
-        <v-col cols="12" md="9">
-          <v-card>
-            <v-card-text class="title">
-              <entity-item-box />
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col cols="12" md="3">
-          <metadata-box
-            v-if="currentDoc"
-            :metadata="JSON.parse(currentDoc.meta)"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-content>
+  <v-card>
+    <v-card-text class="title">
+      <entity-item-box />
+    </v-card-text>
+  </v-card>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import EntityItemBox from '~/components/containers/annotation/EntityItemBox'
-import Paginator from '~/components/containers/annotation/Paginator'
-import ApproveButton from '@/components/containers/annotation/ApproveButton'
-import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
-import FilterButton from '@/components/containers/annotation/FilterButton'
-import MetadataBox from '@/components/organisms/annotation/MetadataBox'
 
 export default {
   layout: 'annotation',
 
-  middleware: ['check-auth', 'auth'],
-
   components: {
-    ApproveButton,
-    EntityItemBox,
-    FilterButton,
-    Paginator,
-    GuidelineButton,
-    MetadataBox
-  },
-
-  computed: {
-    ...mapGetters('documents', ['currentDoc', 'approved'])
-  },
-
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
+    EntityItemBox
   }
 }
 </script>

frontend/pages/projects/_id/sequence-to-sequence/index.vue

@@ -1,64 +1,15 @@
 <template>
-  <v-content>
-    <v-container fluid>
-      <v-row
-        no-gutters
-        class="d-none d-sm-flex"
-      >
-        <v-col v-if="currentDoc">
-          <approve-button :approved="approved" />
-          <filter-button />
-          <guideline-button />
-        </v-col>
-        <v-spacer />
-        <v-col>
-          <paginator />
-        </v-col>
-      </v-row>
-      <v-row justify="center">
-        <v-col cols="12" md="9">
-          <seq2seq-container />
-        </v-col>
-        <v-col cols="12" md="3">
-          <metadata-box
-            v-if="currentDoc"
-            :metadata="JSON.parse(currentDoc.meta)"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-content>
+  <seq2seq-container />
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import Seq2seqContainer from '~/components/containers/annotation/Seq2seqContainer'
-import Paginator from '~/components/containers/annotation/Paginator'
-import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
-import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import FilterButton from '@/components/containers/annotation/FilterButton'
-import ApproveButton from '@/components/containers/annotation/ApproveButton'
 
 export default {
   layout: 'annotation',
 
-  middleware: ['check-auth', 'auth'],
-
   components: {
-    ApproveButton,
-    FilterButton,
-    Seq2seqContainer,
-    Paginator,
-    GuidelineButton,
-    MetadataBox
-  },
-
-  computed: {
-    ...mapGetters('documents', ['currentDoc', 'approved'])
-  },
-
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
+    Seq2seqContainer
   }
 }
 </script>

frontend/pages/projects/_id/text-classification/index.vue

@@ -1,64 +1,15 @@
 <template>
-  <v-content>
-    <v-container fluid>
-      <v-row
-        no-gutters
-        class="d-none d-sm-flex"
-      >
-        <v-col v-if="currentDoc">
-          <approve-button :approved="approved" />
-          <filter-button />
-          <guideline-button />
-        </v-col>
-        <v-spacer />
-        <v-col>
-          <paginator />
-        </v-col>
-      </v-row>
-      <v-row justify="center">
-        <v-col cols="12" md="9">
-          <text-classification />
-        </v-col>
-        <v-col cols="12" md="3">
-          <metadata-box
-            v-if="currentDoc"
-            :metadata="JSON.parse(currentDoc.meta)"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-content>
+  <text-classification />
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import TextClassification from '~/components/containers/annotation/TextClassification'
-import Paginator from '~/components/containers/annotation/Paginator'
-import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
-import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import FilterButton from '@/components/containers/annotation/FilterButton'
-import ApproveButton from '@/components/containers/annotation/ApproveButton'
 
 export default {
   layout: 'annotation',
 
-  middleware: ['check-auth', 'auth'],
-
   components: {
-    ApproveButton,
-    FilterButton,
-    TextClassification,
-    Paginator,
-    GuidelineButton,
-    MetadataBox
-  },
-
-  computed: {
-    ...mapGetters('documents', ['currentDoc', 'approved'])
-  },
-
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
+    TextClassification
   }
 }
 </script>