Enable to list all labels

frontend/components/tasks/sequenceLabeling/EntityEditor.vue

@@ -29,6 +29,34 @@
         max-height="400"
         class="overflow-y-auto"
       >
+        <v-list-item>
+          <v-autocomplete
+            :value="currentLabel"
+            :items="entityLabels"
+            autofocus
+            chips
+            dense
+            deletable-chips
+            hide-details
+            item-text="text"
+            item-value="id"
+            label="Label List"
+            small-chips
+            @input="addOrUpdateEntity"
+          >
+            <template #selection="data">
+              <v-chip
+                v-bind="data.attrs"
+                :input-value="data.selected"
+                close
+                @click="data.select"
+                @click:close="deleteEntity(entity)"
+              >
+                {{ data.item.text }}
+              </v-chip>
+            </template>
+          </v-autocomplete>
+        </v-list-item>
         <v-list-item
           v-for="(label, i) in entityLabels"
           :key="i"
@@ -117,13 +145,22 @@ export default Vue.extend({
       y: 0,
       startOffset: 0,
       endOffset: 0,
-      entityId: -1,
+      entity: null as any,
+      value: false
     };
   },
 
   computed: {
     hasAnySuffixKey(): boolean {
       return this.entityLabels.some((label: any) => label.suffixKey !== null)
+    },
+    currentLabel(): any {
+      if (this.entity) {
+        const label = this.entityLabels.find((label: any) => label.id === this.entity!.label)
+        return label
+      } else {
+        return null
+      }
     }
   },
 
@@ -134,7 +171,7 @@ export default Vue.extend({
     },
 
     setEntity(entityId: number) {
-      this.entityId = entityId
+      this.entity = this.entities.find((entity: any) => entity.id === entityId)
     },
 
     showEntityLabelMenu(e: any) {
@@ -158,7 +195,7 @@ export default Vue.extend({
     },
 
     addOrUpdateEntity(labelId: number) {
-      if (this.entityId !== -1) {
+      if (this.entity) {
         this.updateEntity(labelId)
       } else {
         this.addEntity(labelId)
@@ -166,7 +203,7 @@ export default Vue.extend({
       this.showMenu = false
       this.startOffset = 0
       this.endOffset = 0
-      this.entityId = -1
+      this.entity = null
     },
 
     addEntity(labelId: number) {
@@ -174,11 +211,13 @@ export default Vue.extend({
     },
 
     updateEntity(labelId: number) {
-      this.$emit('click:entity', this.entityId, labelId)
+      this.$emit('click:entity', this.entity!.id, labelId)
     },
 
     deleteEntity(entity: any) {
       this.$emit('contextmenu:entity', entity.id)
+      this.entity = null
+      this.showMenu = false
     },
 
     updateRelation() {