commit: efa93d0829dc703c560115cf5c7d15985bce915e
parent: 936eb23bdfeaf40c4844b9e75e083d21bdd9b4d1
Author: Shpuld Shpludson <shp@cock.li>
Date: Mon, 15 Apr 2019 18:21:52 +0000
Merge branch '227-quick-add' into 'develop'
Support user searching to mute/block directly in the mutes/blocks tab
See merge request pleroma/pleroma-fe!727
Diffstat:
9 files changed, 166 insertions(+), 3 deletions(-)
diff --git 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
@@ -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
@@ -0,0 +1,45 @@
+<template>
+ <div class="autosuggest" v-click-outside="onClickOutside">
+ <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="autosuggest-input" />
+ <div class="autosuggest-results" v-if="resultsVisible && filtered.length > 0">
+ <slot v-for="item in filtered" :item="item" />
+ </div>
+ </div>
+</template>
+
+<script src="./autosuggest.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.autosuggest {
+ position: relative;
+
+ &-input {
+ display: block;
+ width: 100%;
+ }
+
+ &-results {
+ position: absolute;
+ left: 0;
+ top: 100%;
+ right: 0;
+ max-height: 400px;
+ background-color: $fallback--lightBg;
+ background-color: var(--lightBg, $fallback--lightBg);
+ border-style: solid;
+ border-width: 1px;
+ border-color: $fallback--border;
+ border-color: var(--border, $fallback--border);
+ border-radius: $fallback--inputRadius;
+ border-radius: var(--inputRadius, $fallback--inputRadius);
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+ box-shadow: var(--panelShadow);
+ overflow-y: auto;
+ z-index: 1;
+ }
+}
+</style>
diff --git 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
@@ -22,7 +22,7 @@
<div class="setting-item" >
<h2>{{$t('settings.name_bio')}}</h2>
<p>{{$t('settings.name')}}</p>
- <EmojiInput
+ <EmojiInput
type="text"
v-model="newName"
id="username"
@@ -195,12 +195,22 @@
</div>
<div :label="$t('settings.blocks_tab')">
+ <div class="profile-edit-usersearch-wrapper">
+ <Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_block')">
+ <BlockCard slot-scope="row" :userId="row.item"/>
+ </Autosuggest>
+ </div>
<block-list :refresh="true">
<template slot="empty">{{$t('settings.no_blocks')}}</template>
</block-list>
</div>
<div :label="$t('settings.mutes_tab')">
+ <div class="profile-edit-usersearch-wrapper">
+ <Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_mute')">
+ <MuteCard slot-scope="row" :userId="row.item"/>
+ </Autosuggest>
+ </div>
<mute-list :refresh="true">
<template slot="empty">{{$t('settings.no_mutes')}}</template>
</mute-list>
@@ -262,5 +272,9 @@
text-align: right;
}
}
+
+ &-usersearch-wrapper {
+ padding: 1em;
+ }
}
</style>
diff --git 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
@@ -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
@@ -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
@@ -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"
