From 617cd7d1f8a83a81dbb679005b60926efe80e33a Mon Sep 17 00:00:00 2001 From: FloatingGhost Date: Tue, 5 Jul 2022 14:28:23 +0100 Subject: [PATCH 1/2] refactor list search --- src/components/list_edit/list_edit.js | 30 +++--------- src/components/list_edit/list_edit.vue | 30 ++++++------ src/components/list_new/list_new.js | 30 +++--------- src/components/list_new/list_new.vue | 41 +++++++---------- .../list_user_search/list_user_search.js | 46 +++++++++++++++++++ .../list_user_search/list_user_search.vue | 44 ++++++++++++++++++ src/i18n/en.json | 3 +- src/modules/statuses.js | 4 +- src/services/api/api.service.js | 6 ++- 9 files changed, 143 insertions(+), 91 deletions(-) create mode 100644 src/components/list_user_search/list_user_search.js create mode 100644 src/components/list_user_search/list_user_search.vue diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js index f982f4d4..9d828506 100644 --- a/src/components/list_edit/list_edit.js +++ b/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 }) diff --git a/src/components/list_edit/list_edit.vue b/src/components/list_edit/list_edit.vue index 98704062..af46c4b8 100644 --- a/src/components/list_edit/list_edit.vue +++ b/src/components/list_edit/list_edit.vue @@ -21,23 +21,23 @@ :placeholder="$t('lists.title')" > -
- - -
+ +
+
+ +
+
diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js index e3e4aef0..07ababe5 100644 --- a/src/components/list_new/list_new.js +++ b/src/components/list_new/list_new.js @@ -1,6 +1,7 @@ import { mapState, mapGetters } from 'vuex' import BasicUserCard from '../basic_user_card/basic_user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' +import ListUserSearch from '../list_user_search/list_user_search.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faSearch, @@ -15,15 +16,14 @@ library.add( const ListNew = { components: { BasicUserCard, - UserAvatar + UserAvatar, + ListUserSearch }, data () { return { title: '', userIds: [], - selectedUserIds: [], - loading: false, - query: '' + selectedUserIds: [] } }, computed: { @@ -33,13 +33,6 @@ const ListNew = { selectedUsers () { return this.selectedUserIds.map(userId => this.findUser(userId)) }, - availableUsers () { - if (this.query.length !== 0) { - return this.users - } else { - return this.selectedUsers - } - }, ...mapState({ currentUser: state => state.users.currentUser }), @@ -68,19 +61,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 }, createList () { // the API has two different endpoints for "creating a list with a name" diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue index 9bd7c5a5..a713b852 100644 --- a/src/components/list_new/list_new.vue +++ b/src/components/list_new/list_new.vue @@ -21,23 +21,10 @@ :placeholder="$t('lists.title')" >
-
- - -
+
@@ -48,6 +35,21 @@ />
+ +
+ +
+