Fix tags autocomplete

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/TagInput.vue

@@ -29,19 +29,28 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import get from "lodash/get";
 import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
+import { FILTER_TAGS } from "@/graphql/tags";
 
-@Component
+@Component({
+  apollo: {
+    tags: {
+      query: FILTER_TAGS,
+      variables() {
+        return {
+          filter: this.text,
+        };
+      },
+    },
+  },
+})
 export default class TagInput extends Vue {
-  @Prop({ required: false, default: () => [] }) data!: ITag[];
-
-  @Prop({ required: true, default: "value" }) path!: string;
-
   @Prop({ required: true }) value!: ITag[];
 
-  filteredTags: ITag[] = [];
+  tags!: ITag[];
+
+  text = "";
 
   private static componentId = 0;
 
@@ -53,13 +62,20 @@ export default class TagInput extends Vue {
     return `tag-input-${TagInput.componentId}`;
   }
 
-  getFilteredTags(text: string): void {
-    this.filteredTags = differenceBy(this.data, this.value, "id").filter(
+  async getFilteredTags(text: string): Promise<void> {
+    this.text = text;
+    await this.$apollo.queries.tags.refetch();
+  }
+
+  get filteredTags(): ITag[] {
+    return differenceBy(this.tags, this.value, "id").filter(
       (option) =>
-        get(option, this.path)
+        option.title
           .toString()
           .toLowerCase()
-          .indexOf(text.toLowerCase()) >= 0
+          .indexOf(this.text.toLowerCase()) >= 0 ||
+        option.slug.toString().toLowerCase().indexOf(this.text.toLowerCase()) >=
+          0
     );
   }
 

js/src/graphql/tags.ts

@@ -9,16 +9,22 @@ export const TAG_FRAGMENT = gql`
 `;
 
 export const TAGS = gql`
-  query {
+  query Tags {
     tags {
-      id
       related {
-        id
-        slug
-        title
+        ...TagFragment
       }
-      slug
-      title
+      ...TagFragment
     }
   }
+  ${TAG_FRAGMENT}
+`;
+
+export const FILTER_TAGS = gql`
+  query FilterTags($filter: String) {
+    tags(filter: $filter) {
+      ...TagFragment
+    }
+  }
+  ${TAG_FRAGMENT}
 `;

js/src/views/Event/Edit.vue

@@ -31,7 +31,7 @@
           />
         </b-field>
 
-        <tag-input v-model="event.tags" :data="tags" path="title" />
+        <tag-input v-model="event.tags" />
 
         <b-field
           horizontal
@@ -556,8 +556,6 @@ import {
   IPerson,
   usernameWithDomain,
 } from "../../types/actor";
-import { TAGS } from "../../graphql/tags";
-import { ITag } from "../../types/tag.model";
 import {
   buildFileFromIMedia,
   buildFileVariable,
@@ -590,7 +588,6 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
   },
   apollo: {
     currentActor: CURRENT_ACTOR_CLIENT,
-    tags: TAGS,
     config: CONFIG,
     identities: IDENTITIES,
     event: {
@@ -643,8 +640,6 @@ export default class EditEvent extends Vue {
 
   currentActor!: IActor;
 
-  tags: ITag[] = [];
-
   event: IEvent = new EventModel();
 
   unmodifiedEvent: IEvent = new EventModel();

js/src/views/Posts/Edit.vue

@@ -67,7 +67,7 @@
           />
         </b-field>
 
-        <tag-input v-model="editablePost.tags" :data="tags" path="title" />
+        <tag-input v-model="editablePost.tags" />
 
         <div class="field">
           <label class="label">{{ $t("Post") }}</label>
@@ -166,7 +166,6 @@ import {
 } from "@/utils/image";
 import GroupMixin from "@/mixins/group";
 import { PostVisibility } from "@/types/enums";
-import { TAGS } from "../../graphql/tags";
 import { CONFIG } from "../../graphql/config";
 import {
   FETCH_POST,
@@ -187,7 +186,6 @@ import { FETCH_GROUP } from "@/graphql/group";
 
 @Component({
   apollo: {
-    tags: TAGS,
     config: CONFIG,
     group: {
       query: FETCH_GROUP,