Disables tag recommendations in TagFilterAutoComplete UI component (#3357)

* Disables tag recommendations in TagFilterAutoComplete UI component

* Adds a filter for the tag discoverable column

Author: mvilanova

src/dispatch/static/dispatch/src/tag/DeleteDialog.vue

@@ -6,7 +6,7 @@
       </v-card-title>
       <v-card-text>
         <v-container grid-list-md>
-          <v-layout wrap> Are you sure you would like to delete this tag? </v-layout>
+          <v-layout wrap> Are you sure you want to delete this tag? </v-layout>
         </v-container>
       </v-card-text>
       <v-card-actions>
@@ -21,11 +21,14 @@
 <script>
 import { mapActions } from "vuex"
 import { mapFields } from "vuex-map-fields"
+
 export default {
   name: "TagDeleteDialog",
+
   data() {
     return {}
   },
+
   computed: {
     ...mapFields("tag", ["dialogs.showRemove"]),
   },

src/dispatch/static/dispatch/src/tag/List.vue

@@ -4,7 +4,7 @@
     <v-divider />
     <v-list>
       <v-list-group prepend-icon="label" no-action color="info">
-        <template v-slot:activator>
+        <template #activator>
           <v-list-item>
             <v-list-item-content>
               <v-list-item-title>Tags ({{ items.length }})</v-list-item-title>
@@ -29,6 +29,7 @@
 import { mapActions } from "vuex"
 
 import NewEditSheet from "@/tag/NewEditSheet.vue"
+
 export default {
   name: "TagList",
 

src/dispatch/static/dispatch/src/tag/NewEditSheet.vue

@@ -1,7 +1,7 @@
 <template>
   <ValidationObserver v-slot="{ invalid, validated }">
     <v-navigation-drawer v-model="showCreateEdit" app clipped right width="500">
-      <template v-slot:prepend>
+      <template #prepend>
         <v-list-item two-line>
           <v-list-item-content>
             <v-list-item-title v-if="id" class="title"> Edit </v-list-item-title>
@@ -117,10 +117,11 @@
 </template>
 
 <script>
-import { mapFields } from "vuex-map-fields"
-import { mapActions } from "vuex"
 import { ValidationObserver, ValidationProvider, extend } from "vee-validate"
+import { mapActions } from "vuex"
+import { mapFields } from "vuex-map-fields"
 import { required } from "vee-validate/dist/rules"
+
 import TagTypeSelect from "@/tag_type/TagTypeSelect.vue"
 
 extend("required", {

src/dispatch/static/dispatch/src/tag/Table.vue

@@ -44,7 +44,7 @@
             </template>
             <template v-slot:item.data-table-actions="{ item }">
               <v-menu bottom left>
-                <template v-slot:activator="{ on }">
+                <template #activator="{ on }">
                   <v-btn icon v-on="on">
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
@@ -70,9 +70,9 @@
 import { mapFields } from "vuex-map-fields"
 import { mapActions } from "vuex"
 
-import SettingsBreadcrumbs from "@/components/SettingsBreadcrumbs.vue"
 import DeleteDialog from "@/tag/DeleteDialog.vue"
 import NewEditSheet from "@/tag/NewEditSheet.vue"
+import SettingsBreadcrumbs from "@/components/SettingsBreadcrumbs.vue"
 
 export default {
   name: "TagTable",

src/dispatch/static/dispatch/src/tag/TagFilterAutoComplete.vue

@@ -14,7 +14,7 @@
     no-filter
     v-model="tags"
   >
-    <template v-slot:no-data>
+    <template #no-data>
       <v-list-item>
         <v-list-item-content>
           <v-list-item-title>
@@ -47,7 +47,7 @@
         </v-list-item-subtitle>
       </v-list-item-content>
     </template>
-    <template v-slot:append-item>
+    <template #append-item>
       <v-list-item v-if="more" @click="loadMore()">
         <v-list-item-content>
           <v-list-item-subtitle> Load More </v-list-item-subtitle>
@@ -65,6 +65,7 @@ import TagApi from "@/tag/api"
 
 export default {
   name: "TagAutoComplete",
+
   props: {
     value: {
       type: Array,
@@ -89,6 +90,7 @@ export default {
       default: null,
     },
   },
+
   data() {
     return {
       loading: false,
@@ -136,47 +138,54 @@ export default {
       this.error = null
       this.loading = "error"
 
-      // fetch recommendations model and ID are provided
-      if (!this.search) {
-        if (this.model && this.modelId) {
-          TagApi.getRecommendations(this.model, this.modelId).then((response) => {
-            this.items = response.data.items
-            this.total = response.data.total
-            // we don't support more for suggestions (limited)
-            this.more = false
-            this.loading = false
-          })
-          return
-        }
-      }
+      // NOTE: Disabled until loading more is supported
+      //
+      // Fetch recommendations model and ID are provided
+      // if (!this.search) {
+      //   if (this.model && this.modelId) {
+      //     TagApi.getRecommendations(this.model, this.modelId).then((response) => {
+      //       this.items = response.data.items
+      //       this.total = response.data.total
+      //       // we don't support more for suggestions (limited)
+      //       this.more = false
+      //       this.loading = false
+      //     })
+      //     return
+      //   }
+      // }
 
       let filterOptions = {
         q: this.search,
         itemsPerPage: this.numItems,
+        sortBy: ["tag_type.name"],
+        descending: [false],
       }
 
+      let filters = {}
+
       if (this.project) {
-        filterOptions = {
-          ...filterOptions,
-          filters: {
-            project: [this.project],
-          },
-        }
+        // we add a project filter
+        filters["project"] = [this.project]
       }
 
-      let tagTypeFilter = {}
+      // we add a filter to only retrun discoverable tags
+      filters["tagFilter"] = [{ model: "Tag", field: "discoverable", op: "==", value: "true" }]
+
       if (filterOptions.q) {
         if (filterOptions.q.indexOf("/") != -1) {
+          // we modify the query and add a tag type filter
           let [tagType, query] = filterOptions.q.split("/")
           filterOptions.q = query
-          tagTypeFilter = [{ model: "TagType", field: "name", op: "==", value: tagType }]
+          filters["tagTypeFilter"] = [{ model: "TagType", field: "name", op: "==", value: tagType }]
         }
       }
 
-      filterOptions = SearchUtils.createParametersFromTableOptions(
-        { ...filterOptions },
-        tagTypeFilter
-      )
+      filterOptions = {
+        ...filterOptions,
+        filters: filters,
+      }
+
+      filterOptions = SearchUtils.createParametersFromTableOptions({ ...filterOptions })
 
       TagApi.getAll(filterOptions).then((response) => {
         this.items = response.data.items

src/dispatch/static/dispatch/src/tag/TagSummaryTable.vue

@@ -37,12 +37,14 @@
 <script>
 import { mapActions } from "vuex"
 import NewEditSheet from "@/tag/NewEditSheet.vue"
+
 export default {
   name: "TagSummaryTable",
 
   components: {
     NewEditSheet,
   },
+
   data() {
     return {
       headers: [