Enable to show metadata

frontend/components/organisms/MetadataBox.vue

@@ -1,15 +1,12 @@
 <template>
-  <v-card>
-    <v-data-table
-      :headers="headers"
-      :items="metaArray"
-      item-key="key"
-      hide-default-footer
-      disable-pagination
-      class="elevation-1"
-    >
-    </v-data-table>
-  </v-card>
+  <v-data-table
+    :headers="headers"
+    :items="metaArray"
+    item-key="key"
+    hide-default-footer
+    disable-pagination
+    class="elevation-1"
+  />
 </template>
 
 <script>
@@ -28,12 +25,14 @@ export default {
         {
           text: 'Key',
           align: 'left',
-          value: 'key'
+          value: 'key',
+          sortable: false
         },
         {
           text: 'Value',
           align: 'left',
-          value: 'value'
+          value: 'value',
+          sortable: false
         }
       ]
     }

frontend/pages/projects/_id/annotation/index.vue

@@ -1,86 +1,57 @@
 <template>
-  <div>
-    <side-bar-labeling
-      :labels="labels"
-      :progress="progress"
-      :metadata="metadata"
-    />
-    <v-content>
-      <v-container fluid fill-height>
-        <v-layout justify-center>
-          <v-flex>
-            <v-card color="transparent elevation-0">
-              <v-card-title>
-                <guideline-button />
-                <v-spacer />
-                <paginator />
-              </v-card-title>
-            </v-card>
-            <v-card>
-              <v-card-text class="title">
-                <entity-item-box />
-              </v-card-text>
-            </v-card>
-          </v-flex>
-        </v-layout>
-      </v-container>
-    </v-content>
-  </div>
+  <v-content>
+    <v-container fluid grid-list-md>
+      <v-layout justify-center row wrap>
+        <!--
+        <v-flex d-flex xs12 sm12 md12>
+          <v-card color="transparent elevation-0">
+            <v-card-title>
+              <guideline-button />
+              <v-spacer />
+              <paginator />
+            </v-card-title>
+          </v-card>
+        </v-flex>
+        -->
+        <v-flex d-flex xs12 sm6 md9>
+          <v-card width="100%">
+            <v-card-title>
+              <guideline-button />
+              <v-spacer />
+              <paginator />
+            </v-card-title>
+            <v-card-text class="title">
+              <entity-item-box />
+            </v-card-text>
+          </v-card>
+        </v-flex>
+        <v-flex d-flex xs12 sm6 md3>
+          <metadata-box :metadata="JSON.parse(metadata)" style="width:100%" />
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </v-content>
 </template>
 
 <script>
 import EntityItemBox from '~/components/containers/EntityItemBox'
-import SideBarLabeling from '~/components/organisms/SideBarLabeling'
 import Paginator from '~/components/containers/Paginator'
 import GuidelineButton from '@/components/containers/GuidelineButton'
+import MetadataBox from '@/components/organisms/MetadataBox'
 
 export default {
   layout: 'annotation',
 
   components: {
     EntityItemBox,
-    SideBarLabeling,
     Paginator,
-    GuidelineButton
+    GuidelineButton,
+    MetadataBox
   },
 
   data() {
     return {
-      progress: 30,
-      metadata: '{"wikiPageId":2}',
-      page: 1,
-      labels: [
-        {
-          id: 1,
-          name: 'Location',
-          color: '#E91E63',
-          shortcut: 'l'
-        },
-        {
-          id: 2,
-          name: 'Organization',
-          color: '#03A9F4',
-          shortcut: 'o'
-        },
-        {
-          id: 3,
-          name: 'Person',
-          color: '#009688',
-          shortcut: 'p'
-        },
-        {
-          id: 4,
-          name: 'Date',
-          color: '#FF6F00',
-          shortcut: 'd'
-        },
-        {
-          id: 5,
-          name: 'Other',
-          color: '#333333',
-          shortcut: 't'
-        }
-      ]
+      metadata: '{"wikiPageId":2}'
     }
   },