From da5844205c5e2ead4da42f89f1f9586683af693e Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 2 Apr 2019 06:12:31 -0400 Subject: [PATCH] add user autosuggest component --- .../user_autosuggest/user_autosuggest.js | 41 ++++++++ .../user_autosuggest/user_autosuggest.vue | 93 +++++++++++++++++++ src/components/user_settings/user_settings.js | 4 +- .../user_settings/user_settings.vue | 3 +- 4 files changed, 139 insertions(+), 2 deletions(-) create mode 100644 src/components/user_autosuggest/user_autosuggest.js create mode 100644 src/components/user_autosuggest/user_autosuggest.vue diff --git a/src/components/user_autosuggest/user_autosuggest.js b/src/components/user_autosuggest/user_autosuggest.js new file mode 100644 index 00000000..6612c2f3 --- /dev/null +++ b/src/components/user_autosuggest/user_autosuggest.js @@ -0,0 +1,41 @@ +import { VueAutosuggest } from 'vue-autosuggest' +import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import userSearchApi from '../../services/new_api/user_search.js' + +export default { + components: { + VueAutosuggest, + BasicUserCard + }, + data () { + return { + results: [], + timeout: null, + selected: null, + debounceMilliseconds: 500, + inputProps: { + id: 'autosuggest__input', + onInputChange: this.fetchResults, + placeholder: 'Search...', + class: 'form-control' + }, + suggestions: [] + } + }, + methods: { + fetchResults (query) { + clearTimeout(this.timeout) + this.timeout = setTimeout(() => { + userSearchApi.search({query, store: this.$store}) + .then((data) => { this.suggestions = [{ data }] }) + }, this.debounceMilliseconds) + }, + clickHandler (item) { + return false + }, + clickUserHandler () { + console.log('clickUserHandler') + return false + } + } +} diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue new file mode 100644 index 00000000..48fe350d --- /dev/null +++ b/src/components/user_autosuggest/user_autosuggest.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index b6a0479d..d5772082 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -9,6 +9,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for import BlockCard from '../block_card/block_card.vue' import MuteCard from '../mute_card/mute_card.vue' import EmojiInput from '../emoji-input/emoji-input.vue' +import UserAutoSuggest from '../user_autosuggest/user_autosuggest.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' import withList from '../../hocs/with_list/with_list' @@ -73,7 +74,8 @@ const UserSettings = { ImageCropper, BlockList, MuteList, - EmojiInput + EmojiInput, + UserAutoSuggest }, computed: { user () { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c08698dc..d98a8eba 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -22,7 +22,7 @@

{{$t('settings.name_bio')}}

{{$t('settings.name')}}

-
+