From c0c7cf4cfa4e636fe6f66d712e3452914988af1b Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 15 Mar 2021 14:04:17 +0900
Subject: [PATCH] Add layout for text tasks

---
 .../components/tasks/layout/LayoutText.vue    | 13 ++++
 .../projects/_id/sequence-labeling/index.vue  | 74 ++++++++++---------
 .../_id/sequence-to-sequence/index.vue        | 72 +++++++++---------
 .../_id/text-classification/index.vue         | 74 +++++++++----------
 4 files changed, 125 insertions(+), 108 deletions(-)
 create mode 100644 frontend/components/tasks/layout/LayoutText.vue

diff --git a/frontend/components/tasks/layout/LayoutText.vue b/frontend/components/tasks/layout/LayoutText.vue
new file mode 100644
index 00000000..400f7d26
--- /dev/null
+++ b/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>
diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue
index 33353c96..4c73e59c 100644
--- a/frontend/pages/projects/_id/sequence-labeling/index.vue
+++ b/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
diff --git a/frontend/pages/projects/_id/sequence-to-sequence/index.vue b/frontend/pages/projects/_id/sequence-to-sequence/index.vue
index a8cbc1b2..1479ba81 100644
--- a/frontend/pages/projects/_id/sequence-to-sequence/index.vue
+++ b/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
   },
diff --git a/frontend/pages/projects/_id/text-classification/index.vue b/frontend/pages/projects/_id/text-classification/index.vue
index c7b6a56c..740ca12c 100644
--- a/frontend/pages/projects/_id/text-classification/index.vue
+++ b/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,