Change Seq2seqBox.vue to use prop/emit

frontend/components/tasks/Seq2Seq/Seq2seqBox.vue → frontend/components/tasks/seq2seq/Seq2seqBox.vue

@@ -42,7 +42,7 @@
       <template v-slot:[`item.action`]="{ item }">
         <v-icon
           small
-          @click="deleteAnnotation(item.id)"
+          @click="remove(item.id)"
         >
           mdi-delete-outline
         </v-icon>
@@ -51,28 +51,15 @@
   </v-card>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   props: {
     annotations: {
       type: Array,
       default: () => ([]),
       required: true
-    },
-    deleteAnnotation: {
-      type: Function,
-      default: () => ([]),
-      required: true
-    },
-    updateAnnotation: {
-      type: Function,
-      default: () => ([]),
-      required: true
-    },
-    createAnnotation: {
-      type: Function,
-      default: () => ([]),
-      required: true
     }
   },
 
@@ -97,11 +84,11 @@ export default {
   },
 
   methods: {
-    update(annotationId, text) {
+    update(annotationId: number, text: string) {
       if (text.length > 0) {
-        this.updateAnnotation(annotationId, text)
+        this.$emit('update:annotation', annotationId, text)
       } else {
-        this.deleteAnnotation(annotationId)
+        this.remove(annotationId)
       }
     },
     create() {
@@ -110,10 +97,13 @@ export default {
         return
       }
       if (this.newText.length > 0) {
-        this.createAnnotation(this.newText)
+        this.$emit('create:annotation', this.newText)
         this.newText = ''
       }
     },
+    remove(annotationId: number) {
+      this.$emit('delete:annotation', annotationId)
+    },
     compositionStart() {
       this.isComposing = true
     },
@@ -122,5 +112,5 @@ export default {
       this.hasCompositionJustEnded = true
     }
   }
-}
+})
 </script>

frontend/pages/demo/text-to-sql/index.vue

@@ -13,9 +13,9 @@
           <seq2seq-box
             :text="currentDoc.text"
             :annotations="currentDoc.annotations"
-            :delete-annotation="_deleteAnnotation"
-            :update-annotation="_updateAnnotation"
-            :create-annotation="_createAnnotation"
+            @delete:annotation="_deleteAnnotation"
+            @update:annotation="_updateAnnotation"
+            @create:annotation="_createAnnotation"
           />
         </v-col>
         <v-col cols="12" md="3">

frontend/pages/demo/translation/index.vue

@@ -13,9 +13,9 @@
           <seq2seq-box
             :text="currentDoc.text"
             :annotations="currentDoc.annotations"
-            :delete-annotation="_deleteAnnotation"
-            :update-annotation="_updateAnnotation"
-            :create-annotation="_createAnnotation"
+            @delete:annotation="_deleteAnnotation"
+            @update:annotation="_updateAnnotation"
+            @create:annotation="_createAnnotation"
           />
         </v-col>
         <v-col cols="12" md="3">

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

@@ -23,9 +23,9 @@
         <seq2seq-box
           :text="doc.text"
           :annotations="annotations"
-          :delete-annotation="remove"
-          :update-annotation="update"
-          :create-annotation="add"
+          @delete:annotation="remove"
+          @update:annotation="update"
+          @create:annotation="add"
         />
       </v-col>
       <v-col cols="12" md="3">