Merge pull request #1581 from doccano/enhancement/deleteEntity

[Enhancement] Add an autocomplete in annotation menu

frontend/components/tasks/sequenceLabeling/EntityEditor.vue

@@ -22,6 +22,7 @@
       :position-y="y"
       absolute
       offset-y
+      @input="cleanUp"
     >
       <v-list
         dense
@@ -29,6 +30,22 @@
         max-height="400"
         class="overflow-y-auto"
       >
+        <v-list-item>
+          <v-autocomplete
+            ref="autocomplete"
+            :value="currentLabel"
+            :items="entityLabels"
+            autofocus
+            dense
+            deletable-chips
+            hide-details
+            item-text="text"
+            item-value="id"
+            label="Label List"
+            small-chips
+            @input="addOrUpdateEntity"
+          />
+        </v-list-item>
         <v-list-item
           v-for="(label, i) in entityLabels"
           :key="i"
@@ -117,13 +134,22 @@ export default Vue.extend({
       y: 0,
       startOffset: 0,
       endOffset: 0,
-      entityId: -1,
+      entity: null as any,
     };
   },
 
   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 +160,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,15 +184,16 @@ export default Vue.extend({
     },
 
     addOrUpdateEntity(labelId: number) {
-      if (this.entityId !== -1) {
-        this.updateEntity(labelId)
+      if (labelId) {
+        if (this.entity) {
+          this.updateEntity(labelId)
+        } else {
+          this.addEntity(labelId)
+        }
       } else {
-        this.addEntity(labelId)
+        this.deleteEntity(this.entity)
       }
-      this.showMenu = false
-      this.startOffset = 0
-      this.endOffset = 0
-      this.entityId = -1
+      this.cleanUp()
     },
 
     addEntity(labelId: number) {
@@ -174,11 +201,25 @@ 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.cleanUp()
+    },
+
+    cleanUp() {
+      this.showMenu = false
+      this.entity = null
+      this.startOffset = 0
+      this.endOffset = 0
+      // Todo: a bit hacky. I want to fix this problem.
+      // https://github.com/vuetifyjs/vuetify/issues/10765
+      this.$nextTick(() => {
+        // @ts-ignore
+        this.$refs.autocomplete!.selectedItems = []
+      })
     },
 
     updateRelation() {

frontend/yarn.lock

@@ -2011,15 +2011,15 @@
     http-proxy-middleware "^1.0.6"
 
 "@nuxtjs/vuetify@^1.*":
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/vuetify/-/vuetify-1.12.1.tgz#87dd1e1517b0120c660f4a43a22627c9fe124189"
-  integrity sha512-oNwNhR6LY7l9ETsNyPkmCxgzbOYuAf27m+6E9mjQzHSu8PPI0vJ3xnGLgo87XnTcnWr9nYxqjwRN8xqMuuyoxQ==
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/vuetify/-/vuetify-1.12.2.tgz#c5ed452d7acd41cb68d7552f684e022ce1878bf2"
+  integrity sha512-S6RKTAHxvtA8ViZQObiV7JYoJmykZ4gNzOQTcn0D+gFL4chuM9ma+XCuXVLcNm48w6CxVFBtjYiorAp2Km5JOw==
   dependencies:
     deepmerge "^4.2.2"
     sass "~1.32.13"
-    sass-loader "^10.2.0"
-    vuetify "^2.5.3"
-    vuetify-loader "^1.7.2"
+    sass-loader "^12.3.0"
+    vuetify "^2.6"
+    vuetify-loader "^1.7.3"
 
 "@nuxtjs/youch@^4.2.3":
   version "4.2.3"
@@ -6966,13 +6966,20 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
+is-glob@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
   integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
   dependencies:
     is-extglob "^2.1.1"
 
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-https@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-https/-/is-https-4.0.0.tgz#9ee725a334fb517b988278d2674efc96e4f348ed"
@@ -7912,9 +7919,9 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4
     json5 "^1.0.1"
 
 loader-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
-  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
+  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"
@@ -10592,16 +10599,13 @@ sass-loader@10.1.1:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-sass-loader@^10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716"
-  integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw==
+sass-loader@^12.3.0:
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.3.0.tgz#93278981c189c36a58cbfc37d4b9cef0cdc02871"
+  integrity sha512-6l9qwhdOb7qSrtOu96QQ81LVl8v6Dp9j1w3akOm0aWHyrTYtagDt5+kS32N4yq4hHk3M+rdqoRMH+lIdqvW6HA==
   dependencies:
     klona "^2.0.4"
-    loader-utils "^2.0.0"
     neo-async "^2.6.2"
-    schema-utils "^3.0.0"
-    semver "^7.3.2"
 
 sass@~1.32.13:
   version "1.32.13"
@@ -12237,19 +12241,19 @@ vue@^2.6.11, vue@^2.6.12, vue@^2.6.14:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
-vuetify-loader@^1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.7.2.tgz#5cdc45309496cf3a5fe431fd7611706ffa4aa8c8"
-  integrity sha512-2GSo4KvRAOThBsj8mvtIEeIoyBAZx38GDfh8D90e/or7Hzx4813krJKvcQAllyLO/Ln0eQWrq2IuvBXnZ55cSA==
+vuetify-loader@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/vuetify-loader/-/vuetify-loader-1.7.3.tgz#404657f4925c828f400fe3269003421d586835c6"
+  integrity sha512-1Kt6Rfvuw3i9BBlxC9WTMnU3WEU7IBWQmDX+fYGAVGpzWCX7oHythUIwPCZGShHSYcPMKSDbXTPP8UvT5RNw8Q==
   dependencies:
     decache "^4.6.0"
     file-loader "^6.2.0"
     loader-utils "^2.0.0"
 
-vuetify@^2.*, vuetify@^2.5.3:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.5.7.tgz#0c7cfa143bffa6a14ef3ca5cfd8f2135713f4360"
-  integrity sha512-3Hn7X6FFtQetc6qy8GcMDKbZRKbiBMDBsYuUjDS4EdpDvHBDTMySpzBWqBNuPjPHRaT3XSrQfoYN84vGDg87Ug==
+vuetify@^2.*, vuetify@^2.6:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.6.1.tgz#5cdd26c51980618b0b92625a2829cd4956813eaa"
+  integrity sha512-WtqarqEIJlhiwl1TShtkq58xtfbHpn4BjkuQtsL7mAs2eHCo7QjA3tUm7Dx/NmDc4wa2ghUUth36jTdG+CCWRg==
 
 vuex@^3.6.2:
   version "3.6.2"