Add limit to autocomplete member's dropdown

frontend/src/modules/member/components/member-dropdown.vue

@@ -324,6 +324,7 @@ export default {
           { username: {}, attributes: {} }
         ]
         this.isMergeDialogOpen = true
+        this.memberToMerge = null
       } else if (command.action === 'memberEnrich') {
         this.doEnrich(command.member.id)
       } else {

frontend/src/modules/member/components/member-selection-dropdown.vue

@@ -6,13 +6,14 @@
     <div class="text-gray-900 text-sm">
       Select the member you want to merge with
     </div>
-    <app-member-autocomplete-input
-      v-model="computedMemberToMerge"
-      :fetch-fn="fetchFn"
-      placeholder="Type to search member"
-      input-class="w-full"
-      mode="single"
-    />
+    <div class="flex w-3/5">
+      <app-autocomplete-one-input
+        v-model="computedMemberToMerge"
+        :fetch-fn="fetchFn"
+        placeholder="Type to search members"
+        input-class="w-full"
+      ></app-autocomplete-one-input>
+    </div>
   </div>
 </template>
 
@@ -56,9 +57,18 @@ const fetchFn = async (query, limit) => {
     query,
     limit
   )
-  return options.filter((m) => {
+
+  // Remove primary member from members that can be merged with
+  const filteredOptions = options.filter((m) => {
     return m.id !== props.id
   })
+
+  // If the primary member was removed, add an empty object in replacement
+  if (options.length !== filteredOptions.length) {
+    filteredOptions.push({})
+  }
+
+  return filteredOptions
 }
 </script>
 

frontend/src/modules/member/member-module.js

@@ -1,11 +1,7 @@
 import routes from '@/modules/member/member-routes'
 import store from '@/modules/member/store'
-import MemberAutocompleteInput from '@/modules/member/components/member-autocomplete-input.vue'
 
 export default {
-  components: {
-    'app-member-autocomplete-input': MemberAutocompleteInput
-  },
   routes,
   store
 }

frontend/src/modules/tag/components/tag-autocomplete-input.vue

@@ -1,24 +1,13 @@
 <template>
   <div class="app-tags-input" style="display: flex">
     <app-autocomplete-many-input
-      v-if="multiple"
       v-model="model"
       :fetch-fn="fetchFn"
       :create-fn="createTag"
       :mapper-fn="mapperFn"
       :placeholder="placeholder"
       :create-if-not-found="canCreate"
-      :in-memory-filter="false"
     ></app-autocomplete-many-input>
-    <app-autocomplete-one-input
-      v-else
-      v-model="model"
-      :fetch-fn="fetchFn"
-      :create-fn="createTag"
-      :mapper-fn="mapperFn"
-      :placeholder="placeholder"
-      :create-if-not-found="canCreate"
-    ></app-autocomplete-one-input>
   </div>
 </template>
 
@@ -48,10 +37,6 @@ export default {
     placeholder: {
       type: String,
       default: null
-    },
-    multiple: {
-      type: Boolean,
-      default: true
     }
   },
   emits: ['update:modelValue'],

frontend/src/shared/form/autocomplete-one-input.vue

@@ -12,6 +12,7 @@
     :remote="true"
     :reserve-keyword="false"
     :allow-create="allowCreate"
+    fit-input-width
     value-key="id"
     :class="inputClass"
     @change="onChange"
@@ -25,22 +26,41 @@
       <span class="prefix">{{ createPrefix }}</span>
       <span>{{ currentQuery }}</span>
     </el-option>
-    <el-option
+    <Fragment
       v-for="record in localOptions"
       :key="record.id"
-      :label="record.label"
-      :value="record"
-      @mouseleave="onSelectMouseLeave"
     >
-    </el-option>
+      <el-option
+        v-if="record.id"
+        :value="record"
+        class="!px-5"
+        @mouseleave="onSelectMouseLeave"
+      >
+        <span class="text-ellipsis overflow-hidden">
+          {{ record.label }}
+        </span>
+      </el-option>
+    </Fragment>
+    <div
+      v-if="!loading && localOptions.length === limit"
+      class="px-5 text-gray-400 text-2xs w-full h-8 flex items-center"
+    >
+      Type to search for more results
+    </div>
+    <div
+      v-else-if="showEmptyMessage"
+      class="px-5 text-gray-400 text-xs w-full h-10 flex items-center justify-center"
+    >
+      No matches found
+    </div>
   </el-select>
 </template>
 
 <script>
 import isString from 'lodash/isString'
 import { onSelectMouseLeave } from '@/utils/select'
 
-const AUTOCOMPLETE_SERVER_FETCH_SIZE = 100
+const AUTOCOMPLETE_SERVER_FETCH_SIZE = 20
 
 export default {
   name: 'AppAutocompleteOneInput',
@@ -58,10 +78,6 @@ export default {
       type: Function,
       default: () => {}
     },
-    mapperFn: {
-      type: Function,
-      default: () => {}
-    },
     createFn: {
       type: Function,
       default: () => {}
@@ -96,7 +112,8 @@ export default {
     return {
       loading: false,
       localOptions: this.options ? this.options : [],
-      currentQuery: ''
+      currentQuery: '',
+      limit: AUTOCOMPLETE_SERVER_FETCH_SIZE
     }
   },
 
@@ -111,6 +128,16 @@ export default {
             o === this.currentQuery
         )
       )
+    },
+    showEmptyMessage() {
+      // Show empty message if request is not loading,
+      // there are options or the only option is empty
+      return (
+        !this.loading &&
+        (!this.localOptions.length ||
+          (this.localOptions.length === 1 &&
+            !this.localOptions[0].id))
+      )
     }
   },
 
@@ -153,7 +180,10 @@ export default {
       this.loading = true
 
       try {
-        this.localOptions = await this.fetchFn()
+        this.localOptions = await this.fetchFn(
+          this.currentQuery,
+          AUTOCOMPLETE_SERVER_FETCH_SIZE
+        )
         this.loading = false
       } catch (error) {
         console.error(error)
@@ -187,5 +217,3 @@ export default {
   }
 }
 </script>
-
-<style></style>