Update text classification components

frontend/components/containers/TextClassification.vue

@@ -2,18 +2,23 @@
   <base-text-area>
     <template #title>
       <multi-class-classification
+        v-if="currentDoc"
         :labels="items"
+        :annotations="currentDoc.annotations"
+        :add-label="addLabel"
+        :delete-label="removeLabel"
       />
     </template>
     <template #content>
-      <div class="title">
-        Text area
+      <div v-if="currentDoc" class="title">
+        {{ currentDoc.text }}<!-- {{currentDoc}}-->
       </div>
     </template>
   </base-text-area>
 </template>
 
 <script>
+import { mapActions, mapGetters, mapState } from 'vuex'
 import BaseTextArea from '@/components/molecules/BaseTextArea'
 import MultiClassClassification from '@/components/organisms/MultiClassClassification'
 
@@ -24,15 +29,41 @@ export default {
   },
 
   computed: {
-    items() {
-      return ['foo', 'bar']
-    }
+    ...mapState('labels', ['items']),
+    ...mapGetters('documents', ['currentDoc'])
   },
 
   created() {
+    this.getLabelList()
+    this.getDocumentList()
   },
 
   methods: {
+    ...mapActions('labels', ['getLabelList']),
+    ...mapActions('documents', ['getDocumentList', 'deleteAnnotation', 'updateAnnotation', 'addAnnotation']),
+    removeLabel(annotationId) {
+      const payload = {
+        annotationId,
+        projectId: this.$route.params.id
+      }
+      this.deleteAnnotation(payload)
+    },
+    updateLabel(labelId, annotationId) {
+      const payload = {
+        annotationId,
+        label: labelId,
+        projectId: this.$route.params.id
+      }
+      this.updateAnnotation(payload)
+    },
+    addLabel(labelId) {
+      alert(labelId)
+      const payload = {
+        label: labelId,
+        projectId: this.$route.params.id
+      }
+      this.addAnnotation(payload)
+    }
   }
 }
 </script>

frontend/components/organisms/MultiClassClassification.vue

@@ -1,21 +1,25 @@
 <template>
   <v-combobox
-    v-model="chips"
+    :value="annotatedLabels"
     :items="labels"
-    chips
-    clearable
+    item-text="text"
     label="Label"
+    hide-selected
+    chips
     multiple
+    @input="add"
   >
     <template v-slot:selection="{ attrs, item, select, selected }">
       <v-chip
         v-bind="attrs"
         :input-value="selected"
+        :color="item.background_color"
+        text-color="white"
         close
         @click="select"
-        @click:close="remove(item)"
+        @click:close="remove(item.id)"
       >
-        {{ item }}
+        {{ item.text }}
       </v-chip>
     </template>
   </v-combobox>
@@ -28,19 +32,46 @@ export default {
       type: Array,
       default: () => [],
       required: true
+    },
+    annotations: {
+      type: Array,
+      default: () => ([]),
+      required: true
+    },
+    addLabel: {
+      type: Function,
+      default: () => ([]),
+      required: true
+    },
+    deleteLabel: {
+      type: Function,
+      default: () => ([]),
+      required: true
     }
   },
 
-  data() {
-    return {
-      chips: []
+  computed: {
+    annotatedLabels() {
+      const labelIds = this.annotations.map(item => item.label)
+      return this.labels.filter(item => labelIds.includes(item.id))
+    },
+    labelObject() {
+      const obj = {}
+      for (const label of this.labels) {
+        obj[label.id] = label
+      }
+      return obj
     }
   },
 
   methods: {
-    remove(item) {
-      this.chips.splice(this.chips.indexOf(item), 1)
-      this.chips = [...this.chips]
+    add(labels) {
+      const label = labels[labels.length - 1]
+      this.addLabel(label.id)
+    },
+    remove(labelId) {
+      const annotation = this.annotations.find(item => item.label === labelId)
+      this.deleteLabel(annotation.id)
     }
   }
 }