From e9e12500dc652e65d57faa41ad91f113176702e9 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 10 Sep 2021 11:29:28 +0200
Subject: [PATCH] Fix tags autocomplete

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Event/TagInput.vue  | 38 ++++++++++++++------
 js/src/graphql/tags.ts                | 20 +++++++----
 js/src/views/Event/Edit.vue           |  7 +---
 js/src/views/Posts/Edit.vue           |  4 +--
 lib/graphql/resolvers/tag.ex          |  5 +--
 test/graphql/resolvers/tag_test.exs   | 52 +++++++++++++++++----------
 test/mobilizon/events/events_test.exs |  6 ++++
 7 files changed, 84 insertions(+), 48 deletions(-)

diff --git a/js/src/components/Event/TagInput.vue b/js/src/components/Event/TagInput.vue
index 6537e50b8..e866819ba 100644
--- a/js/src/components/Event/TagInput.vue
+++ b/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
     );
   }
 
diff --git a/js/src/graphql/tags.ts b/js/src/graphql/tags.ts
index e59b4428c..eadd78ab8 100644
--- a/js/src/graphql/tags.ts
+++ b/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}
 `;
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 8c0f53b7b..0aa02ec65 100644
--- a/js/src/views/Event/Edit.vue
+++ b/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();
diff --git a/js/src/views/Posts/Edit.vue b/js/src/views/Posts/Edit.vue
index f624148aa..682bfa2b8 100644
--- a/js/src/views/Posts/Edit.vue
+++ b/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,
diff --git a/lib/graphql/resolvers/tag.ex b/lib/graphql/resolvers/tag.ex
index e842f81cd..df67eb9cb 100644
--- a/lib/graphql/resolvers/tag.ex
+++ b/lib/graphql/resolvers/tag.ex
@@ -7,8 +7,9 @@ defmodule Mobilizon.GraphQL.Resolvers.Tag do
   alias Mobilizon.Events.{Event, Tag}
   alias Mobilizon.Posts.Post
 
-  def list_tags(_parent, %{page: page, limit: limit}, _resolution) do
-    tags = Mobilizon.Events.list_tags(page, limit)
+  def list_tags(_parent, %{page: page, limit: limit} = args, _resolution) do
+    filter = Map.get(args, :filter)
+    tags = Mobilizon.Events.list_tags(filter, page, limit)
 
     {:ok, tags}
   end
diff --git a/test/graphql/resolvers/tag_test.exs b/test/graphql/resolvers/tag_test.exs
index 271ecbd4c..b8f78970d 100644
--- a/test/graphql/resolvers/tag_test.exs
+++ b/test/graphql/resolvers/tag_test.exs
@@ -6,33 +6,33 @@ defmodule Mobilizon.GraphQL.Resolvers.TagTest do
   alias Mobilizon.GraphQL.AbsintheHelpers
 
   describe "Tag Resolver" do
-    test "list_tags/3 returns the list of tags", context do
+    @tags_query """
+    query Tags($filter: String) {
+      tags(filter: $filter) {
+        id
+        related {
+          id
+          slug
+          title
+        }
+        slug
+        title
+      }
+    }
+    """
+
+    test "list_tags/3 returns the list of tags", %{conn: conn} do
       tag1 = insert(:tag)
       tag2 = insert(:tag)
       tag3 = insert(:tag)
       insert(:tag_relation, tag: tag1, link: tag2)
       insert(:tag_relation, tag: tag3, link: tag1)
 
-      query = """
-      {
-        tags {
-          id,
-          slug,
-          title,
-          related {
-            id,
-            title,
-            slug
-          }
-        }
-      }
-      """
-
       res =
-        context.conn
-        |> get("/api", AbsintheHelpers.query_skeleton(query, "tags"))
+        conn
+        |> AbsintheHelpers.graphql_query(query: @tags_query)
 
-      tags = json_response(res, 200)["data"]["tags"]
+      tags = res["data"]["tags"]
       assert tags |> length == 3
 
       assert tags
@@ -45,5 +45,19 @@ defmodule Mobilizon.GraphQL.Resolvers.TagTest do
                |> Enum.map(fn tag -> tag.slug end)
                |> MapSet.new()
     end
+
+    test "list_tags/3 returns tags for a filter", %{conn: conn} do
+      tag1 = insert(:tag, title: "PineApple", slug: "pineapple")
+      tag2 = insert(:tag, title: "sexy pineapple", slug: "sexy-pineapple")
+      _tag3 = insert(:tag)
+
+      res =
+        conn
+        |> AbsintheHelpers.graphql_query(query: @tags_query, variables: %{filter: "apple"})
+
+      tags = res["data"]["tags"]
+      assert tags |> length == 2
+      assert [tag1.id, tag2.id] == tags |> Enum.map(&String.to_integer(&1["id"]))
+    end
   end
 end
diff --git a/test/mobilizon/events/events_test.exs b/test/mobilizon/events/events_test.exs
index fbda5b00a..9b20a9ea3 100644
--- a/test/mobilizon/events/events_test.exs
+++ b/test/mobilizon/events/events_test.exs
@@ -242,6 +242,12 @@ defmodule Mobilizon.EventsTest do
       assert [tag.id] == Events.list_tags() |> Enum.map(& &1.id)
     end
 
+    test "list_tags/1 filters tags by title or slug" do
+      tag1 = insert(:tag, title: "PineApple", slug: "pineapple")
+      tag2 = insert(:tag, title: "sexy pineapple", slug: "sexy-pineapple")
+      assert [tag1.id, tag2.id] == Events.list_tags("apple") |> Enum.map(& &1.id)
+    end
+
     test "get_tag!/1 returns the tag with given id" do
       tag = insert(:tag)
       assert Events.get_tag!(tag.id).id == tag.id