Add autocomplete to collection project logic tag dropdown

- Added autocomplete to collection project logic's tag dropdown to make it consistent as existing tags dropdown

Contributes to: #1147

Signed-off-by: Ja Young Lee <[email protected]>

Author: jayolee

src/views/portfolio/projects/ProjectCreateProjectModal.vue

@@ -83,6 +83,7 @@
             :tags="collectionTags"
             :add-on-key="addOnKeys"
             :placeholder="$t('message.project_add_collection_tag')"
+            :autocomplete-items="tagsAutoCompleteItems"
             @tags-changed="
               (newCollectionTags) => (this.collectionTags = newCollectionTags)
             "
@@ -315,7 +316,12 @@ export default {
   },
   computed: {},
   watch: {
-    tag: 'searchTags',
+    tag(input) {
+      this.searchTags(input);
+    },
+    collectionTagTyping(input) {
+      this.searchTags(input);
+    },
   },
   methods: {
     async getACLEnabled() {
@@ -465,14 +471,14 @@ export default {
         });
       }
     },
-    searchTags: function () {
-      if (!this.tag) {
+    searchTags: function (input) {
+      if (!input) {
         return;
       }
 
       clearTimeout(this.tagsAutoCompleteDebounce);
       this.tagsAutoCompleteDebounce = setTimeout(() => {
-        const url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}?searchText=${encodeURIComponent(this.tag)}&pageNumber=1&pageSize=6`;
+        const url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}?searchText=${encodeURIComponent(input)}&pageNumber=1&pageSize=6`;
         this.axios.get(url).then((response) => {
           this.tagsAutoCompleteItems = response.data.map((tag) => {
             return { text: tag.name };

src/views/portfolio/projects/ProjectDetailsModal.vue

@@ -85,6 +85,7 @@
             :tags="collectionTags"
             :add-on-key="addOnKeys"
             :placeholder="$t('message.project_add_collection_tag')"
+            :autocomplete-items="tagsAutoCompleteItems"
             @tags-changed="
               (newCollectionTags) => (this.collectionTags = newCollectionTags)
             "
@@ -674,7 +675,12 @@ export default {
     });
   },
   watch: {
-    tag: 'searchTags',
+    tag(input) {
+      this.searchTags(input);
+    },
+    collectionTagTyping(input) {
+      this.searchTags(input);
+    },
   },
   methods: {
     initializeTags: function () {
@@ -797,14 +803,14 @@ export default {
         });
       }
     },
-    searchTags: function () {
-      if (!this.tag) {
+    searchTags: function (input) {
+      if (!input) {
         return;
       }
 
       clearTimeout(this.tagsAutoCompleteDebounce);
       this.tagsAutoCompleteDebounce = setTimeout(() => {
-        const url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}?searchText=${encodeURIComponent(this.tag)}&pageNumber=1&pageSize=6`;
+        const url = `${this.$api.BASE_URL}/${this.$api.URL_TAG}?searchText=${encodeURIComponent(input)}&pageNumber=1&pageSize=6`;
         this.axios.get(url).then((response) => {
           this.tagsAutoCompleteItems = response.data.map((tag) => {
             return { text: tag.name };