diff options
Diffstat (limited to 'src/components/user_settings')
| -rw-r--r-- | src/components/user_settings/user_settings.js | 48 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 44 |
2 files changed, 69 insertions, 23 deletions
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index dd931e67..e88ee612 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -1,4 +1,3 @@ -import { compose } from 'vue-compose' import unescape from 'lodash/unescape' import get from 'lodash/get' import map from 'lodash/map' @@ -10,29 +9,24 @@ import ScopeSelector from '../scope_selector/scope_selector.vue' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import BlockCard from '../block_card/block_card.vue' import MuteCard from '../mute_card/mute_card.vue' +import SelectableList from '../selectable_list/selectable_list.vue' +import ProgressButton from '../progress_button/progress_button.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({ - fetch: (props, $store) => $store.dispatch('fetchBlocks'), - select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), - childPropName: 'entries' - }), - withList({ getEntryProps: userId => ({ userId }) }) -)(BlockCard) +const BlockList = withSubscription({ + fetch: (props, $store) => $store.dispatch('fetchBlocks'), + select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), + childPropName: 'items' +})(SelectableList) -const MuteList = compose( - withSubscription({ - fetch: (props, $store) => $store.dispatch('fetchMutes'), - select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), - childPropName: 'entries' - }), - withList({ getEntryProps: userId => ({ userId }) }) -)(MuteCard) +const MuteList = withSubscription({ + fetch: (props, $store) => $store.dispatch('fetchMutes'), + select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), + childPropName: 'items' +})(SelectableList) const UserSettings = { data () { @@ -80,7 +74,8 @@ const UserSettings = { EmojiInput, Autosuggest, BlockCard, - MuteCard + MuteCard, + ProgressButton }, computed: { user () { @@ -360,6 +355,21 @@ const UserSettings = { this.$store.dispatch('addNewUsers', users) return map(users, 'id') }) + }, + blockUsers (ids) { + return this.$store.dispatch('blockUsers', ids) + }, + unblockUsers (ids) { + return this.$store.dispatch('unblockUsers', ids) + }, + muteUsers (ids) { + return this.$store.dispatch('muteUsers', ids) + }, + unmuteUsers (ids) { + return this.$store.dispatch('unmuteUsers', ids) + }, + identity (value) { + return value } } } diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 9d37ffc4..d68e68fa 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -200,9 +200,22 @@ <BlockCard slot-scope="row" :userId="row.item"/> </Autosuggest> </div> - <block-list :refresh="true"> + <BlockList :refresh="true" :getKey="identity"> + <template slot="header" slot-scope="{selected}"> + <div class="profile-edit-bulk-actions"> + <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)"> + {{ $t('user_card.block') }} + <template slot="progress">{{ $t('user_card.block_progress') }}</template> + </ProgressButton> + <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unblockUsers(selected)"> + {{ $t('user_card.unblock') }} + <template slot="progress">{{ $t('user_card.unblock_progress') }}</template> + </ProgressButton> + </div> + </template> + <template slot="item" slot-scope="{item}"><BlockCard :userId="item" /></template> <template slot="empty">{{$t('settings.no_blocks')}}</template> - </block-list> + </BlockList> </div> <div :label="$t('settings.mutes_tab')"> @@ -211,9 +224,22 @@ <MuteCard slot-scope="row" :userId="row.item"/> </Autosuggest> </div> - <mute-list :refresh="true"> + <MuteList :refresh="true" :getKey="identity"> + <template slot="header" slot-scope="{selected}"> + <div class="profile-edit-bulk-actions"> + <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)"> + {{ $t('user_card.mute') }} + <template slot="progress">{{ $t('user_card.mute_progress') }}</template> + </ProgressButton> + <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unmuteUsers(selected)"> + {{ $t('user_card.unmute') }} + <template slot="progress">{{ $t('user_card.unmute_progress') }}</template> + </ProgressButton> + </div> + </template> + <template slot="item" slot-scope="{item}"><MuteCard :userId="item" /></template> <template slot="empty">{{$t('settings.no_mutes')}}</template> - </mute-list> + </MuteList> </div> </tab-switcher> </div> @@ -276,5 +302,15 @@ &-usersearch-wrapper { padding: 1em; } + + &-bulk-actions { + text-align: right; + padding: 0 1em; + min-height: 28px; + + button { + width: 10em; + } + } } </style> |