refactor list search

src/components/list_edit/list_edit.js

@@ -1,5 +1,6 @@
 import { mapState, mapGetters } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import ListUserSearch from '../list_user_search/list_user_search.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -15,15 +16,14 @@ library.add(
 const ListNew = {
   components: {
     BasicUserCard,
-    UserAvatar
+    UserAvatar,
+    ListUserSearch
   },
   data () {
     return {
       title: '',
       userIds: [],
-      selectedUserIds: [],
-      loading: false,
-      query: ''
+      selectedUserIds: []
     }
   },
   created () {
@@ -47,13 +47,6 @@ const ListNew = {
     selectedUsers () {
       return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
     },
-    availableUsers () {
-      if (this.query.length !== 0) {
-        return this.users
-      } else {
-        return this.selectedUsers
-      }
-    },
     ...mapState({
       currentUser: state => state.users.currentUser
     }),
@@ -79,19 +72,8 @@ const ListNew = {
     removeUser (userId) {
       this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
     },
-    search (query) {
-      if (!query) {
-        this.loading = false
-        return
-      }
-
-      this.loading = true
-      this.userIds = []
-      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: true })
-        .then(data => {
-          this.loading = false
-          this.userIds = data.accounts.map(a => a.id)
-        })
+    onResults (results) {
+      this.userIds = results
     },
     updateList () {
       this.$store.dispatch('setList', { id: this.id, title: this.title })

src/components/list_edit/list_edit.vue

@@ -21,23 +21,23 @@
         :placeholder="$t('lists.title')"
       >
     </div>
-    <div class="input-wrap">
-      <div class="input-search">
-        <FAIcon
-          class="search-icon fa-scale-110 fa-old-padding"
-          icon="search"
-        />
-      </div>
-      <input
-        ref="search"
-        v-model="query"
-        :placeholder="$t('lists.search')"
-        @input="onInput"
-      >
-    </div>
     <div class="member-list">
       <div
-        v-for="user in availableUsers"
+        v-for="user in selectedUsers"
+        :key="user.id"
+        class="member"
+      >
+        <BasicUserCard
+          :user="user"
+          :class="isSelected(user) ? 'selected' : ''"
+          @click.capture.prevent="selectUser(user)"
+        />
+      </div>
+    </div>
+    <ListUserSearch @results="onResults" />
+    <div class="member-list">
+      <div
+        v-for="user in users"
         :key="user.id"
         class="member"
       >