From 3a9d1359817ca35151513008d962cd299a4612d7 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 20 May 2021 14:35:35 +0900
Subject: [PATCH] Add composition api for label list

---
 frontend/composables/useLabelList.ts          | 60 +++++++++++++++++++
 .../_id/image-classification/index.vue        | 24 +++++---
 .../projects/_id/sequence-labeling/index.vue  | 20 +++++--
 .../_id/text-classification/index.vue         | 24 +++++---
 4 files changed, 106 insertions(+), 22 deletions(-)
 create mode 100644 frontend/composables/useLabelList.ts

diff --git a/frontend/composables/useLabelList.ts b/frontend/composables/useLabelList.ts
new file mode 100644
index 00000000..b6c770c9
--- /dev/null
+++ b/frontend/composables/useLabelList.ts
@@ -0,0 +1,60 @@
+import { computed, reactive, ref, useContext } from '@nuxtjs/composition-api'
+import { LabelDTO } from '@/services/application/label/labelData'
+import { CreateLabelCommand , UpdateLabelCommand } from '@/services/application/label/labelCommand'
+
+
+export const useLabelList = () => {
+  const state = reactive({
+    labels: [] as LabelDTO[]
+  })
+
+  const { app } = useContext()
+  const $services = app.$services
+
+  const getLabelList = async(
+    projectId: string
+  ) => {
+    state.labels = await $services.label.list(projectId)
+  }
+
+  const createLabel = async(
+    projectId: string,
+    command: CreateLabelCommand
+  ) => {
+    await $services.label.create(projectId, command)
+    await getLabelList(projectId)
+  }
+
+  const updateLabel = async(
+    projectId: string,
+    command: UpdateLabelCommand
+  ) => {
+    await $services.label.update(projectId, command)
+  }
+
+  const deleteLabelList = async(
+    projectId: string,
+    items: LabelDTO[]
+  ) => {
+    await $services.label.bulkDelete(projectId, items)
+    await getLabelList(projectId)
+  }
+
+  const findLabelById = (labelId: number) => {
+    return state.labels.find(item => item.id === labelId)
+  }
+
+  const shortKeys = computed(() => {
+    return Object.fromEntries(state.labels.map(item => [item.id, [item.suffixKey]]))
+  })
+
+  return {
+    state,
+    getLabelList,
+    findLabelById,
+    createLabel,
+    updateLabel,
+    deleteLabelList,
+    shortKeys,
+  }
+}
diff --git a/frontend/pages/projects/_id/image-classification/index.vue b/frontend/pages/projects/_id/image-classification/index.vue
index c34047c5..400e5f43 100644
--- a/frontend/pages/projects/_id/image-classification/index.vue
+++ b/frontend/pages/projects/_id/image-classification/index.vue
@@ -70,12 +70,14 @@
 
 <script>
 import _ from 'lodash'
+import { toRefs } from '@nuxtjs/composition-api'
 import LabelGroup from '@/components/tasks/textClassification/LabelGroup'
 import LabelSelect from '@/components/tasks/textClassification/LabelSelect'
 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'
+import { useLabelList } from '@/composables/useLabelList'
 
 export default {
   layout: 'workspace',
@@ -89,6 +91,16 @@ export default {
     ToolbarMobile
   },
 
+  setup() {
+    const { state, getLabelList, shortKeys } = useLabelList()
+
+    return {
+      ...toRefs(state),
+      getLabelList,
+      shortKeys,
+    }
+  },
+
   async fetch() {
     this.images = await this.$services.example.fetchOne(
       this.projectId,
@@ -109,7 +121,6 @@ export default {
     return {
       annotations: [],
       images: [],
-      labels: [],
       project: {},
       enableAutoLabeling: false,
       labelOption: 0,
@@ -121,9 +132,6 @@ export default {
   },
 
   computed: {
-    shortKeys() {
-      return Object.fromEntries(this.labels.map(item => [item.id, [item.suffixKey]]))
-    },
     projectId() {
       return this.$route.params.id
     },
@@ -146,7 +154,7 @@ export default {
   },
 
   async created() {
-    this.labels = await this.$services.label.list(this.projectId)
+    this.getLabelList(this.projectId)
     this.project = await this.$services.project.findById(this.projectId)
   },
 
@@ -166,12 +174,12 @@ export default {
     },
 
     async addOrRemove(event) {
-      const label = this.labels.find(item => item.id === parseInt(event.srcKey, 10))
-      const annotation = this.annotations.find(item => item.label === label.id)
+      const labelId = parseInt(event.srcKey, 10)
+      const annotation = this.annotations.find(item => item.label === labelId)
       if (annotation) {
         await this.remove(annotation.id)
       } else {
-        await this.add(label.id)
+        await this.add(labelId)
       }
     },
 
diff --git a/frontend/pages/projects/_id/sequence-labeling/index.vue b/frontend/pages/projects/_id/sequence-labeling/index.vue
index 943440bd..ed7a4e4c 100644
--- a/frontend/pages/projects/_id/sequence-labeling/index.vue
+++ b/frontend/pages/projects/_id/sequence-labeling/index.vue
@@ -39,11 +39,13 @@
 
 <script>
 import _ from 'lodash'
+import { toRefs } from '@nuxtjs/composition-api'
 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'
-import EntityItemBox from '~/components/tasks/sequenceLabeling/EntityItemBox'
+import EntityItemBox from '@/components/tasks/sequenceLabeling/EntityItemBox'
+import { useLabelList } from '@/composables/useLabelList'
 
 export default {
   layout: 'workspace',
@@ -56,6 +58,16 @@ export default {
     ToolbarMobile
   },
 
+  setup() {
+    const { state, getLabelList, shortKeys } = useLabelList()
+
+    return {
+      ...toRefs(state),
+      getLabelList,
+      shortKeys,
+    }
+  },
+
   async fetch() {
     this.docs = await this.$services.example.fetchOne(
       this.projectId,
@@ -75,16 +87,12 @@ export default {
     return {
       annotations: [],
       docs: [],
-      labels: [],
       project: {},
       enableAutoLabeling: false
     }
   },
 
   computed: {
-    shortKeys() {
-      return Object.fromEntries(this.labels.map(item => [item.id, [item.suffixKey]]))
-    },
     projectId() {
       return this.$route.params.id
     },
@@ -107,7 +115,7 @@ export default {
   },
 
   async created() {
-    this.labels = await this.$services.label.list(this.projectId)
+    this.getLabelList(this.projectId)
     this.project = await this.$services.project.findById(this.projectId)
   },
 
diff --git a/frontend/pages/projects/_id/text-classification/index.vue b/frontend/pages/projects/_id/text-classification/index.vue
index 39bd15d0..9fb6dc04 100644
--- a/frontend/pages/projects/_id/text-classification/index.vue
+++ b/frontend/pages/projects/_id/text-classification/index.vue
@@ -65,12 +65,14 @@
 
 <script>
 import _ from 'lodash'
+import { toRefs } from '@nuxtjs/composition-api'
 import LabelGroup from '@/components/tasks/textClassification/LabelGroup'
 import LabelSelect from '@/components/tasks/textClassification/LabelSelect'
 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'
+import { useLabelList } from '@/composables/useLabelList'
 
 export default {
   layout: 'workspace',
@@ -84,6 +86,16 @@ export default {
     ToolbarMobile
   },
 
+  setup() {
+    const { state, getLabelList, shortKeys } = useLabelList()
+
+    return {
+      ...toRefs(state),
+      getLabelList,
+      shortKeys,
+    }
+  },
+
   async fetch() {
     this.docs = await this.$services.example.fetchOne(
       this.projectId,
@@ -103,7 +115,6 @@ export default {
     return {
       annotations: [],
       docs: [],
-      labels: [],
       project: {},
       enableAutoLabeling: false,
       labelOption: 0
@@ -111,9 +122,6 @@ export default {
   },
 
   computed: {
-    shortKeys() {
-      return Object.fromEntries(this.labels.map(item => [item.id, [item.suffixKey]]))
-    },
     projectId() {
       return this.$route.params.id
     },
@@ -136,7 +144,7 @@ export default {
   },
 
   async created() {
-    this.labels = await this.$services.label.list(this.projectId)
+    this.getLabelList(this.projectId)
     this.project = await this.$services.project.findById(this.projectId)
   },
 
@@ -156,12 +164,12 @@ export default {
     },
 
     async addOrRemove(event) {
-      const label = this.labels.find(item => item.id === parseInt(event.srcKey, 10))
-      const annotation = this.annotations.find(item => item.label === label.id)
+      const labelId = parseInt(event.srcKey, 10)
+      const annotation = this.annotations.find(item => item.label === labelId)
       if (annotation) {
         await this.remove(annotation.id)
       } else {
-        await this.add(label.id)
+        await this.add(labelId)
       }
     },