Merge pull request doccano#176 from CatalystCode/enhancement/remove-d…

…jango-template-inheritance-from-admin

Enhancement/Remove Django template inheritance in admin pages

app/server/models.py

@@ -36,10 +36,10 @@ def image(self):
     def get_bundle_name(self):
         raise NotImplementedError()
 
-    def get_upload_template(self):
+    def get_bundle_name_upload(self):
         raise NotImplementedError()
 
-    def get_download_template(self):
+    def get_bundle_name_download(self):
         raise NotImplementedError()
 
     def get_annotation_serializer(self):
@@ -64,11 +64,11 @@ def image(self):
     def get_bundle_name(self):
         return 'document_classification'
 
-    def get_upload_template(self):
-        return 'admin/upload/text_classification.html'
+    def get_bundle_name_upload(self):
+        return 'upload_text_classification'
 
-    def get_download_template(self):
-        return 'admin/download/text_classification.html'
+    def get_bundle_name_download(self):
+        return 'download_text_classification'
 
     def get_annotation_serializer(self):
         from .serializers import DocumentAnnotationSerializer
@@ -91,11 +91,11 @@ def image(self):
     def get_bundle_name(self):
         return 'sequence_labeling'
 
-    def get_upload_template(self):
-        return 'admin/upload/sequence_labeling.html'
+    def get_bundle_name_upload(self):
+        return 'upload_sequence_labeling'
 
-    def get_download_template(self):
-        return 'admin/download/sequence_labeling.html'
+    def get_bundle_name_download(self):
+        return 'download_sequence_labeling'
 
     def get_annotation_serializer(self):
         from .serializers import SequenceAnnotationSerializer
@@ -118,11 +118,11 @@ def image(self):
     def get_bundle_name(self):
         return 'seq2seq'
 
-    def get_upload_template(self):
-        return 'admin/upload/seq2seq.html'
+    def get_bundle_name_upload(self):
+        return 'upload_seq2seq'
 
-    def get_download_template(self):
-        return 'admin/download/seq2seq.html'
+    def get_bundle_name_download(self):
+        return 'download_seq2seq'
 
     def get_annotation_serializer(self):
         from .serializers import Seq2seqAnnotationSerializer

app/server/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "chart.js": "^2.7.2",
+    "highlight.js": "^9.12.0",
     "marked": "^0.3.19",
     "swiper": "^4.3.3",
     "vue": "^2.5.16",

app/server/static/js/document_classification.vue

@@ -48,7 +48,7 @@ hr {
 </style>
 
 <script>
-import annotationMixin from './mixin';
+import { annotationMixin } from './mixin';
 import HTTP from './http';
 import { simpleShortcut } from './filter';
 

app/server/static/js/download.pug

@@ -0,0 +1,22 @@
+div.columns(v-cloak="")
+  div.column.is-12
+    messages(v-bind:messages="messages")
+
+    div.card
+
+      header.card-header
+        p.card-header-title File Downloader
+
+      div.card-content
+        h2.subtitle Download labeled data
+
+        div.control(style="margin-bottom: 1em;")
+          block select-format-area
+
+        block example-format-area
+
+        button.button.is-primary(
+          style="margin-top: 1em;"
+          type="submit"
+          v-on:click="download()"
+        ) Download

app/server/static/js/download_seq2seq.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import DownloadSeq2Seq from './download_seq2seq.vue';
+
+new Vue({
+  el: '#mail-app',
+
+  components: { DownloadSeq2Seq },
+
+  template: '<DownloadSeq2Seq />',
+});

app/server/static/js/download_seq2seq.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+extends ./download.pug
+
+block select-format-area
+  label.radio
+    input(
+      type="radio"
+      name="format"
+      value="csv"
+      v-bind:checked="format == 'csv'"
+      v-model="format"
+    )
+    | CSV
+
+  label.radio
+    input(
+      type="radio"
+      name="format"
+      value="json"
+      v-bind:checked="format == 'json'"
+      v-model="format"
+    )
+    | JSONL
+
+block example-format-area
+  pre.code-block(v-show="format == 'csv'")
+    code.csv
+      include ./examples/download_seq2seq.csv
+      | ...
+
+  pre.code-block(v-show="format == 'json'")
+    code.json
+      include ./examples/download_seq2seq.jsonl
+      | ...
+</template>
+
+<script>
+import { uploadMixin } from './mixin';
+
+export default uploadMixin;
+</script>

app/server/static/js/download_sequence_labeling.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import DownloadSequenceLabeling from './download_sequence_labeling.vue';
+
+new Vue({
+  el: '#mail-app',
+
+  components: { DownloadSequenceLabeling },
+
+  template: '<DownloadSequenceLabeling />',
+});

app/server/static/js/download_sequence_labeling.vue

@@ -0,0 +1,26 @@
+<template lang="pug">
+extends ./download.pug
+
+block select-format-area
+  label.radio
+    input(
+      type="radio"
+      name="format"
+      value="json"
+      v-bind:checked="format == 'json'"
+      v-model="format"
+    )
+    | JSONL
+
+block example-format-area
+  pre.code-block(v-show="format == 'json'")
+    code.json
+      include ./examples/download_sequence_labeling.jsonl
+      | ...
+</template>
+
+<script>
+import { uploadMixin } from './mixin';
+
+export default uploadMixin;
+</script>

app/server/static/js/download_text_classification.js

@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import DownloadTextClassification from './download_text_classification.vue';
+
+new Vue({
+  el: '#mail-app',
+
+  components: { DownloadTextClassification },
+
+  template: '<DownloadTextClassification />',
+});

app/server/static/js/download_text_classification.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+extends ./download.pug
+
+block select-format-area
+  label.radio
+    input(
+      type="radio"
+      name="format"
+      value="csv"
+      v-bind:checked="format == 'csv'"
+      v-model="format"
+    )
+    | CSV
+
+  label.radio
+    input(
+      type="radio"
+      name="format"
+      value="json"
+      v-bind:checked="format == 'json'"
+      v-model="format"
+    )
+    | JSONL
+
+block example-format-area
+  pre.code-block(v-show="format == 'csv'")
+    code.csv
+      include ./examples/download_text_classification.csv
+      | ...
+
+  pre.code-block(v-show="format == 'json'")
+    code.json
+      include ./examples/download_text_classification.jsonl
+      | ...
+</template>
+
+<script>
+import { uploadMixin } from './mixin';
+
+export default uploadMixin;
+</script>

app/server/static/js/examples/download_seq2seq.csv

@@ -0,0 +1,4 @@
+id,text,label,user
+1,"Hello!","こんにちは！",1
+2,"Good morning.","おはようございます。",1
+3,"See you.","さようなら。",1

app/server/static/js/examples/download_seq2seq.jsonl

@@ -0,0 +1,3 @@
+{"id": 1, "text": "Hello!", "annotations": [{"id": 1, "label": "こんにちは！", "user": 1}]}
+{"id": 2, "text": "Good morning.", "annotations": [{"id": 2, "label": "おはようございます。", "user": 1}]}
+{"id": 3, "text": "See you.", "annotations": [{"id": 3, "label": "さようなら。", "user": 1}]}

app/server/static/js/examples/download_sequence_labeling.jsonl

@@ -0,0 +1,3 @@
+{"id": 1, "text": "EU rejects ...", "annotations": [{"id": 1, "label": 2, "start_offset": 0, "end_offset": 2, "user": 1}]}
+{"id": 2, "text": "Peter Blackburn", "annotations": [{"id": 2, "label": 1, "start_offset": 0, "end_offset": 15, "user": 1}]}
+{"id": 3, "text": "President Obama", "annotations": [{"id": 3, "label": 1, "start_offset": 10, "end_offset": 15, "user": 1}]}

app/server/static/js/examples/download_text_classification.csv

@@ -0,0 +1,4 @@
+id,text,label,user
+1,"Terrible customer service.",1,1
+2,"Really great transaction.",2,1
+3,"Great price.",2,1

app/server/static/js/examples/download_text_classification.jsonl

@@ -0,0 +1,3 @@
+{"id": 1, "text": "Terrible customer service.", "annotations": [{"id": 1, "label": 1, "user": 1}]}
+{"id": 2, "text": "Really great transaction.", "annotations": [{"id": 2, "label": 2, "user": 1}]}
+{"id": 3, "text": "Great price.", "annotations": [{"id": 3, "label": 2, "user": 1}]}

app/server/static/js/examples/upload_seq2seq.csv

@@ -0,0 +1,4 @@
+text,label
+"Hello!","こんにちは！"
+"Good morning.","おはようございます。"
+"See you.","さようなら。"

app/server/static/js/examples/upload_seq2seq.jsonl

@@ -0,0 +1,3 @@
+{"text": "Hello!", "labels": ["こんにちは！"]}
+{"text": "Good morning.", "labels": ["おはようございます。"]}
+{"text": "See you.", "labels": ["さようなら。"]}

app/server/static/js/examples/upload_seq2seq.txt

@@ -0,0 +1,3 @@
+Hello!
+Good morning.
+See you.

app/server/static/js/examples/upload_sequence_labeling.conll

@@ -0,0 +1,12 @@
+EU	B-ORG
+rejects	O
+German	B-MISC
+call	O
+to	O
+boycott	O
+British	B-MISC
+lamb	O
+.	O
+
+Peter	B-PER
+Blackburn	I-PER

app/server/static/js/examples/upload_sequence_labeling.jsonl

@@ -0,0 +1,3 @@
+{"text": "EU rejects German call to boycott British lamb.", "labels": [ [0, 2, "ORG"], [11, 17, "MISC"], ... ]}
+{"text": "Peter Blackburn", "labels": [ [0, 15, "PERSON"] ]}
+{"text": "President Obama", "labels": [ [10, 15, "PERSON"] ]}

app/server/static/js/examples/upload_sequence_labeling.txt

@@ -0,0 +1,3 @@
+EU rejects German call to boycott British lamb.
+Peter Blackburn
+President Obama

app/server/static/js/examples/upload_text_classification.csv

@@ -0,0 +1,4 @@
+text,label
+"Terrible customer service.","negative"
+"Really great transaction.","positive"
+"Great price.","positive"

app/server/static/js/examples/upload_text_classification.jsonl

@@ -0,0 +1,3 @@
+{"text": "Terrible customer service.", "labels": ["negative"]}
+{"text": "Really great transaction.", "labels": ["positive"]}
+{"text": "Great price.", "labels": ["positive"]}

app/server/static/js/examples/upload_text_classification.txt

@@ -0,0 +1,3 @@
+Terrible customer service.
+Really great transaction.
+Great price.

app/server/static/js/guideline.js

@@ -1,43 +1,13 @@
-import * as marked from 'marked';
 import Vue from 'vue';
 import vueDebounce from 'vue-debounce';
-import HTTP from './http';
+import Guideline from './guideline.vue';
 
 Vue.use(vueDebounce);
 
-const vm = new Vue({ // eslint-disable-line no-unused-vars
+new Vue({
   el: '#mail-app',
-  data: {
-    input: '',
-    project: Object,
-    messages: [],
-  },
 
-  computed: {
-    compiledMarkdown() {
-      return marked(this.input, {
-        sanitize: true,
-      });
-    },
-  },
-
-  created() {
-    HTTP.get().then((response) => {
-      this.input = response.data.guideline;
-      this.project = response.data;
-    });
-  },
-
-  methods: {
-    update(value) {
-      this.input = value;
-      const payload = {
-        guideline: this.input,
-      };
-      HTTP.patch('', payload).then((response) => {
-        this.project = response.data;
-      });
-    },
-  },
+  components: { Guideline },
 
+  template: '<Guideline />',
 });