Add layout for text tasks

frontend/components/tasks/layout/LayoutText.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-container fluid>
+    <slot name="header" />
+    <v-row justify="center">
+      <v-col cols="12" md="9">
+        <slot name="content" />
+      </v-col>
+      <v-col cols="12" md="3">
+        <slot name="sidebar" />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

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

@@ -1,44 +1,45 @@
 <template>
-  <v-container v-if="doc.id" fluid>
-    <toolbar-laptop
-      :doc-id="doc.id"
-      :enable-auto-labeling.sync="enableAutoLabeling"
-      :guideline-text="project.guideline"
-      :is-reviewd="doc.isApproved"
-      :show-approve-button="project.permitApprove"
-      :total="docs.count"
-      class="d-none d-sm-block"
-      @click:clear-label="clear"
-      @click:review="approve"
-    />
-    <toolbar-mobile
-      :total="docs.count"
-      class="d-flex d-sm-none"
-    />
-    <v-row justify="center">
-      <v-col cols="12" md="9">
-        <v-card>
-          <v-card-text class="title">
-            <entity-item-box
-              :labels="labels"
-              :text="doc.text"
-              :entities="annotations"
-              :delete-annotation="remove"
-              :update-entity="update"
-              :add-entity="add"
-            />
-          </v-card-text>
-        </v-card>
-      </v-col>
-      <v-col cols="12" md="3">
-        <list-metadata :metadata="JSON.parse(doc.meta)" />
-      </v-col>
-    </v-row>
-  </v-container>
+  <layout-text v-if="doc.id">
+    <template v-slot:header>
+      <toolbar-laptop
+        :doc-id="doc.id"
+        :enable-auto-labeling.sync="enableAutoLabeling"
+        :guideline-text="project.guideline"
+        :is-reviewd="doc.isApproved"
+        :show-approve-button="project.permitApprove"
+        :total="docs.count"
+        class="d-none d-sm-block"
+        @click:clear-label="clear"
+        @click:review="approve"
+      />
+      <toolbar-mobile
+        :total="docs.count"
+        class="d-flex d-sm-none"
+      />
+    </template>
+    <template v-slot:content>
+      <v-card>
+        <v-card-text class="title">
+          <entity-item-box
+            :labels="labels"
+            :text="doc.text"
+            :entities="annotations"
+            :delete-annotation="remove"
+            :update-entity="update"
+            :add-entity="add"
+          />
+        </v-card-text>
+      </v-card>
+    </template>
+    <template v-slot:sidebar>
+      <list-metadata :metadata="JSON.parse(doc.meta)" />
+    </template>
+  </layout-text>
 </template>
 
 <script>
 import _ from 'lodash'
+import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
@@ -49,6 +50,7 @@ export default {
 
   components: {
     EntityItemBox,
+    LayoutText,
     ListMetadata,
     ToolbarLaptop,
     ToolbarMobile

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

@@ -1,42 +1,43 @@
 <template>
-  <v-container v-if="doc.id" fluid>
-    <toolbar-laptop
-      :doc-id="doc.id"
-      :enable-auto-labeling.sync="enableAutoLabeling"
-      :guideline-text="project.guideline"
-      :is-reviewd="doc.isApproved"
-      :show-approve-button="project.permitApprove"
-      :total="docs.count"
-      class="d-none d-sm-block"
-      @click:clear-label="clear"
-      @click:review="approve"
-    />
-    <toolbar-mobile
-      :total="docs.count"
-      class="d-flex d-sm-none"
-    />
-    <v-row justify="center">
-      <v-col cols="12" md="9">
-        <v-card class="mb-5">
-          <v-card-text class="title" v-text="doc.text" />
-        </v-card>
-        <seq2seq-box
-          :text="doc.text"
-          :annotations="annotations"
-          @delete:annotation="remove"
-          @update:annotation="update"
-          @create:annotation="add"
-        />
-      </v-col>
-      <v-col cols="12" md="3">
-        <list-metadata :metadata="JSON.parse(doc.meta)" />
-      </v-col>
-    </v-row>
-  </v-container>
+  <layout-text v-if="doc.id">
+    <template v-slot:header>
+      <toolbar-laptop
+        :doc-id="doc.id"
+        :enable-auto-labeling.sync="enableAutoLabeling"
+        :guideline-text="project.guideline"
+        :is-reviewd="doc.isApproved"
+        :show-approve-button="project.permitApprove"
+        :total="docs.count"
+        class="d-none d-sm-block"
+        @click:clear-label="clear"
+        @click:review="approve"
+      />
+      <toolbar-mobile
+        :total="docs.count"
+        class="d-flex d-sm-none"
+      />
+    </template>
+    <template v-slot:content>
+      <v-card class="mb-5">
+        <v-card-text class="title" v-text="doc.text" />
+      </v-card>
+      <seq2seq-box
+        :text="doc.text"
+        :annotations="annotations"
+        @delete:annotation="remove"
+        @update:annotation="update"
+        @create:annotation="add"
+      />
+    </template>
+    <template v-slot:sidebar>
+      <list-metadata :metadata="JSON.parse(doc.meta)" />
+    </template>
+  </layout-text>
 </template>
 
 <script>
 import _ from 'lodash'
+import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
 import ToolbarMobile from '@/components/tasks/toolbar/ToolbarMobile'
@@ -46,8 +47,9 @@ export default {
   layout: 'workspace',
 
   components: {
-    Seq2seqBox,
+    LayoutText,
     ListMetadata,
+    Seq2seqBox,
     ToolbarLaptop,
     ToolbarMobile
   },

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

@@ -1,46 +1,45 @@
 <template>
-  <v-container v-if="doc.id" fluid>
-    <toolbar-laptop
-      :doc-id="doc.id"
-      :enable-auto-labeling.sync="enableAutoLabeling"
-      :guideline-text="project.guideline"
-      :is-reviewd="doc.isApproved"
-      :show-approve-button="project.permitApprove"
-      :total="docs.count"
-      class="d-none d-sm-block"
-      @click:clear-label="clear"
-      @click:review="approve"
-    />
-    <toolbar-mobile
-      :total="docs.count"
-      class="d-flex d-sm-none"
-    />
-    <v-row justify="center">
-      <v-col cols="12" md="9">
-        <v-card
-          @shortkey="addOrRemove"
-        >
-          <v-card-title>
-            <text-classification
-              :labels="labels"
-              :annotations="annotations"
-              @add="add"
-              @remove="remove"
-            />
-          </v-card-title>
-          <v-card-text class="title highlight" v-text="doc.text" />
-        </v-card>
-      </v-col>
-      <v-col cols="12" md="3">
-        <list-metadata :metadata="JSON.parse(doc.meta)" />
-      </v-col>
-    </v-row>
-  </v-container>
+  <layout-text v-if="doc.id">
+    <template v-slot:header>
+      <toolbar-laptop
+        :doc-id="doc.id"
+        :enable-auto-labeling.sync="enableAutoLabeling"
+        :guideline-text="project.guideline"
+        :is-reviewd="doc.isApproved"
+        :show-approve-button="project.permitApprove"
+        :total="docs.count"
+        class="d-none d-sm-block"
+        @click:clear-label="clear"
+        @click:review="approve"
+      />
+      <toolbar-mobile
+        :total="docs.count"
+        class="d-flex d-sm-none"
+      />
+    </template>
+    <template v-slot:content>
+      <v-card @shortkey="addOrRemove">
+        <v-card-title>
+          <text-classification
+            :labels="labels"
+            :annotations="annotations"
+            @add="add"
+            @remove="remove"
+          />
+        </v-card-title>
+        <v-card-text class="title highlight" v-text="doc.text" />
+      </v-card>
+    </template>
+    <template v-slot:sidebar>
+      <list-metadata :metadata="JSON.parse(doc.meta)" />
+    </template>
+  </layout-text>
 </template>
 
 <script>
 import Vue from 'vue'
 import _ from 'lodash'
+import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import TextClassification from '@/components/tasks/textClassification/TextClassification'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
@@ -51,6 +50,7 @@ export default {
   layout: 'workspace',
 
   components: {
+    LayoutText,
     ListMetadata,
     TextClassification,
     ToolbarLaptop,