Fix actor auto-complete

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

js/src/components/Account/ActorAutoComplete.vue

@@ -1,118 +0,0 @@
-<template>
-  <b-autocomplete
-    :data="baseData"
-    :placeholder="$t('Actor')"
-    v-model="name"
-    field="preferredUsername"
-    :loading="$apollo.loading"
-    check-infinite-scroll
-    @typing="getAsyncData"
-    @select="handleSelect"
-    @infinite-scroll="getAsyncData"
-  >
-    <template #default="props">
-      <div class="media">
-        <div class="media-left">
-          <img
-            width="32"
-            :src="props.option.avatar.url"
-            v-if="props.option.avatar"
-            alt=""
-          />
-          <b-icon v-else icon="account-circle" />
-        </div>
-        <div class="media-content">
-          <span v-if="props.option.name">
-            {{ props.option.name }}
-            <br />
-            <small>{{ `@${props.option.preferredUsername}` }}</small>
-            <small v-if="props.option.domain">{{
-              `@${props.option.domain}`
-            }}</small>
-          </span>
-          <span v-else>
-            {{ `@${props.option.preferredUsername}` }}
-          </span>
-        </div>
-      </div>
-    </template>
-    <template slot="footer">
-      <span class="has-text-grey" v-show="page > totalPages">
-        Thats it! No more movies found.
-      </span>
-    </template>
-  </b-autocomplete>
-</template>
-<script lang="ts">
-import { Component, Model, Vue, Watch } from "vue-property-decorator";
-import debounce from "lodash/debounce";
-import { IPerson } from "@/types/actor";
-import { SEARCH_PERSONS } from "@/graphql/search";
-import { Paginate } from "@/types/paginate";
-
-const SEARCH_PERSON_LIMIT = 10;
-
-@Component
-export default class ActorAutoComplete extends Vue {
-  @Model("change", { type: Object }) readonly defaultSelected!: IPerson | null;
-
-  baseData: IPerson[] = [];
-
-  selected: IPerson | null = this.defaultSelected;
-
-  name: string = this.defaultSelected
-    ? this.defaultSelected.preferredUsername
-    : "";
-
-  page = 1;
-
-  totalPages = 1;
-
-  mounted(): void {
-    this.selected = this.defaultSelected;
-  }
-
-  data(): Record<string, unknown> {
-    return {
-      getAsyncData: debounce(this.doGetAsyncData, 500),
-    };
-  }
-
-  @Watch("defaultSelected")
-  updateDefaultSelected(defaultSelected: IPerson): void {
-    console.log("update defaultSelected", defaultSelected);
-    this.selected = defaultSelected;
-    this.name = defaultSelected.preferredUsername;
-  }
-
-  handleSelect(selected: IPerson): void {
-    this.selected = selected;
-    this.$emit("change", selected);
-  }
-
-  async doGetAsyncData(name: string): Promise<void> {
-    this.baseData = [];
-    if (this.name !== name) {
-      this.name = name;
-      this.page = 1;
-    }
-    if (!name.length) {
-      this.page = 1;
-      this.totalPages = 1;
-      return;
-    }
-    const {
-      data: { searchPersons },
-    } = await this.$apollo.query<{ searchPersons: Paginate<IPerson> }>({
-      query: SEARCH_PERSONS,
-      variables: {
-        searchText: this.name,
-        page: this.page,
-        limit: SEARCH_PERSON_LIMIT,
-      },
-    });
-    this.totalPages = Math.ceil(searchPersons.total / SEARCH_PERSON_LIMIT);
-    this.baseData.push(...searchPersons.elements);
-  }
-}
-</script>

js/src/components/Account/ActorInline.vue

@@ -9,20 +9,22 @@
 
     <div class="actor-name">
       <p>
-        {{ actor.name || `@${usernameWithDomain(actor)}` }}
+        {{ displayName(actor) }}
       </p>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { IActor, usernameWithDomain } from "../../types/actor";
+import { displayName, IActor, usernameWithDomain } from "../../types/actor";
 
 @Component
 export default class ActorInline extends Vue {
   @Prop({ required: true, type: Object }) actor!: IActor;
 
   usernameWithDomain = usernameWithDomain;
+
+  displayName = displayName;
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Editor/Mention.ts

@@ -7,6 +7,8 @@ import apolloProvider from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
 import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
+import { MentionOptions } from "@tiptap/extension-mention";
+import { Editor } from "@tiptap/core";
 
 const client =
   apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
@@ -24,13 +26,21 @@ const fetchItems = async (query: string): Promise<IPerson[]> => {
 
 const debouncedFetchItems = pDebounce(fetchItems, 200);
 
-const mentionOptions: Partial<any> = {
+const mentionOptions: MentionOptions = {
   HTMLAttributes: {
     class: "mention",
     dir: "ltr",
   },
+  renderLabel({ options, node }) {
+    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+  },
   suggestion: {
-    items: async (query: string): Promise<IPerson[]> => {
+    items: async ({
+      query,
+    }: {
+      query: string;
+      editor: Editor;
+    }): Promise<IPerson[]> => {
       if (query === "") {
         return [];
       }
@@ -70,8 +80,12 @@ const mentionOptions: Partial<any> = {
           return component.ref?.onKeyDown(props);
         },
         onExit() {
-          popup[0].destroy();
-          component.destroy();
+          if (popup && popup[0]) {
+            popup[0].destroy();
+          }
+          if (component) {
+            component.destroy();
+          }
         },
       };
     },

js/src/components/Editor/MentionList.vue

@@ -7,7 +7,7 @@
       :key="index"
       @click="selectItem(index)"
     >
-      <actor-card :actor="item" />
+      <actor-inline :actor="item" />
     </button>
   </div>
 </template>
@@ -16,11 +16,11 @@
 import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
 import { IPerson } from "@/types/actor";
-import ActorCard from "../../components/Account/ActorCard.vue";
+import ActorInline from "../../components/Account/ActorInline.vue";
 
 @Component({
   components: {
-    ActorCard,
+    ActorInline,
   },
 })
 export default class MentionList extends Vue {

js/src/components/Todo/FullTodo.vue

@@ -7,9 +7,7 @@
       <b-field :label="$t('Title')">
         <b-input v-model="title" />
       </b-field>
-      <b-field :label="$t('Assigned to')">
-        <actor-auto-complete v-model="assignedTo" />
-      </b-field>
+      <b-field :label="$t('Assigned to')"> </b-field>
       <b-field :label="$t('Due on')">
         <b-datepicker v-model="dueDate" :first-day-of-week="firstDayOfWeek" />
       </b-field>
@@ -17,19 +15,15 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Prop, Vue } from "vue-property-decorator";
 import debounce from "lodash/debounce";
 import { DebouncedFunc } from "lodash";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { ITodo } from "../../types/todos";
 import RouteName from "../../router/name";
 import { UPDATE_TODO } from "../../graphql/todos";
-import ActorAutoComplete from "../Account/ActorAutoComplete.vue";
 import { IPerson } from "../../types/actor";
 
-@Component({
-  components: { ActorAutoComplete },
-})
 export default class Todo extends Vue {
   @Prop({ required: true, type: Object }) todo!: ITodo;