diff --git a/package.json b/package.json index c80e0f63..14937673 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "popper.js": "^1.14.7", "sanitize-html": "^1.13.0", "sass-loader": "^4.0.2", + "v-click-outside": "^2.1.1", "vue": "^2.5.13", "vue-chat-scroll": "^1.2.1", "vue-compose": "^0.7.1", diff --git a/src/components/autosuggest/autosuggest.js b/src/components/autosuggest/autosuggest.js new file mode 100644 index 00000000..d4efe912 --- /dev/null +++ b/src/components/autosuggest/autosuggest.js @@ -0,0 +1,52 @@ +const debounceMilliseconds = 500 + +export default { + props: { + query: { // function to query results and return a promise + type: Function, + required: true + }, + filter: { // function to filter results in real time + type: Function + }, + placeholder: { + type: String, + default: 'Search...' + } + }, + data () { + return { + term: '', + timeout: null, + results: [], + resultsVisible: false + } + }, + computed: { + filtered () { + return this.filter ? this.filter(this.results) : this.results + } + }, + watch: { + term (val) { + this.fetchResults(val) + } + }, + methods: { + fetchResults (term) { + clearTimeout(this.timeout) + this.timeout = setTimeout(() => { + this.results = [] + if (term) { + this.query(term).then((results) => { this.results = results }) + } + }, debounceMilliseconds) + }, + onInputClick () { + this.resultsVisible = true + }, + onClickOutside () { + this.resultsVisible = false + } + } +} diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue new file mode 100644 index 00000000..91657a2d --- /dev/null +++ b/src/components/autosuggest/autosuggest.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index b6a0479d..dd931e67 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -1,6 +1,8 @@ import { compose } from 'vue-compose' import unescape from 'lodash/unescape' import get from 'lodash/get' +import map from 'lodash/map' +import reject from 'lodash/reject' import TabSwitcher from '../tab_switcher/tab_switcher.js' import ImageCropper from '../image_cropper/image_cropper.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue' @@ -9,8 +11,10 @@ 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 Autosuggest from '../autosuggest/autosuggest.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' import withList from '../../hocs/with_list/with_list' +import userSearchApi from '../../services/new_api/user_search.js' const BlockList = compose( withSubscription({ @@ -73,7 +77,10 @@ const UserSettings = { ImageCropper, BlockList, MuteList, - EmojiInput + EmojiInput, + Autosuggest, + BlockCard, + MuteCard }, computed: { user () { @@ -334,6 +341,25 @@ const UserSettings = { if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) { this.$store.dispatch('revokeToken', id) } + }, + filterUnblockedUsers (userIds) { + return reject(userIds, (userId) => { + const user = this.$store.getters.findUser(userId) + return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id + }) + }, + filterUnMutedUsers (userIds) { + return reject(userIds, (userId) => { + const user = this.$store.getters.findUser(userId) + return !user || user.muted || user.id === this.$store.state.users.currentUser.id + }) + }, + queryUserIds (query) { + return userSearchApi.search({query, store: this.$store}) + .then((users) => { + this.$store.dispatch('addNewUsers', users) + return map(users, 'id') + }) } } } diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c08698dc..9d37ffc4 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')}}

-
+
+ + + +
+
+ + + +
@@ -262,5 +272,9 @@ text-align: right; } } + + &-usersearch-wrapper { + padding: 1em; + } } diff --git a/src/i18n/en.json b/src/i18n/en.json index 9188c6f7..c71c9036 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -217,6 +217,8 @@ "reply_visibility_self": "Only show replies directed at me", "saving_err": "Error saving settings", "saving_ok": "Settings saved", + "search_user_to_block": "Search whom you want to block", + "search_user_to_mute": "Search whom you want to mute", "security_tab": "Security", "scope_copy": "Copy scope when replying (DMs are always copied)", "minimal_scopes_mode": "Minimize post scope selection options", diff --git a/src/main.js b/src/main.js index c80aea36..725f5806 100644 --- a/src/main.js +++ b/src/main.js @@ -22,6 +22,7 @@ import pushNotifications from './lib/push_notifications_plugin.js' import messages from './i18n/messages.js' import VueChatScroll from 'vue-chat-scroll' +import VueClickOutside from 'v-click-outside' import afterStoreSetup from './boot/after_store.js' @@ -39,6 +40,7 @@ Vue.use(VueTimeago, { }) Vue.use(VueI18n) Vue.use(VueChatScroll) +Vue.use(VueClickOutside) const i18n = new VueI18n({ // By default, use the browser locale, we will update it if neccessary diff --git a/src/modules/users.js b/src/modules/users.js index 6de50b80..b6d8227c 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -132,6 +132,11 @@ export const mutations = { saveBlockIds (state, blockIds) { state.currentUser.blockIds = blockIds }, + addBlockId (state, blockId) { + if (state.currentUser.blockIds.indexOf(blockId) === -1) { + state.currentUser.blockIds.push(blockId) + } + }, updateMutes (state, mutedUsers) { // Reset muted of all fetched users each(state.users, (user) => { user.muted = false }) @@ -140,6 +145,11 @@ export const mutations = { saveMuteIds (state, muteIds) { state.currentUser.muteIds = muteIds }, + addMuteId (state, muteId) { + if (state.currentUser.muteIds.indexOf(muteId) === -1) { + state.currentUser.muteIds.push(muteId) + } + }, setUserForStatus (state, status) { status.user = state.usersObject[status.user.id] }, @@ -215,6 +225,7 @@ const users = { return store.rootState.api.backendInteractor.blockUser(userId) .then((relationship) => { store.commit('updateUserRelationship', [relationship]) + store.commit('addBlockId', userId) store.commit('removeStatus', { timeline: 'friends', userId }) store.commit('removeStatus', { timeline: 'public', userId }) store.commit('removeStatus', { timeline: 'publicAndExternal', userId }) @@ -234,7 +245,10 @@ const users = { }, muteUser (store, id) { return store.rootState.api.backendInteractor.muteUser(id) - .then((relationship) => store.commit('updateUserRelationship', [relationship])) + .then((relationship) => { + store.commit('updateUserRelationship', [relationship]) + store.commit('addMuteId', id) + }) }, unmuteUser (store, id) { return store.rootState.api.backendInteractor.unmuteUser(id) @@ -281,6 +295,9 @@ const users = { unregisterPushNotifications(token) }, + addNewUsers ({ commit }, users) { + commit('addNewUsers', users) + }, addNewStatuses (store, { statuses }) { const users = map(statuses, 'user') const retweetedUsers = compact(map(statuses, 'retweeted_status.user')) diff --git a/yarn.lock b/yarn.lock index 58007622..e463c0d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6389,6 +6389,10 @@ uuid@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131" +v-click-outside@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.1.tgz#5af80b68a1c82eac89c597890434fa3994b42ed1" + validate-npm-package-license@^3.0.1: version "3.0.4" resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"