Add composition api for label list

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,
+  }
+}

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)
       }
     },
 

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)
   },
 

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)
       }
     },