diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/mute_card/mute_card.js | 37 | ||||
| -rw-r--r-- | src/components/mute_card/mute_card.vue | 24 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.js | 13 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 4 |
4 files changed, 76 insertions, 2 deletions
diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js new file mode 100644 index 00000000..5dd0a9e5 --- /dev/null +++ b/src/components/mute_card/mute_card.js @@ -0,0 +1,37 @@ +import BasicUserCard from '../basic_user_card/basic_user_card.vue' + +const MuteCard = { + props: ['userId'], + data () { + return { + progress: false + } + }, + computed: { + user () { + return this.$store.getters.userById(this.userId) + }, + muted () { + return this.user.muted + } + }, + components: { + BasicUserCard + }, + methods: { + unmuteUser () { + this.progress = true + this.$store.dispatch('unmuteUser', this.user.id).then(() => { + this.progress = false + }) + }, + muteUser () { + this.progress = true + this.$store.dispatch('muteUser', this.user.id).then(() => { + this.progress = false + }) + } + } +} + +export default MuteCard diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue new file mode 100644 index 00000000..e1bfe20b --- /dev/null +++ b/src/components/mute_card/mute_card.vue @@ -0,0 +1,24 @@ +<template> + <basic-user-card :user="user"> + <template slot="secondary-area"> + <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted"> + <template v-if="progress"> + {{ $t('user_card.unmute_progress') }} + </template> + <template v-else> + {{ $t('user_card.unmute') }} + </template> + </button> + <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else> + <template v-if="progress"> + {{ $t('user_card.mute_progress') }} + </template> + <template v-else> + {{ $t('user_card.mute') }} + </template> + </button> + </template> + </basic-user-card> +</template> + +<script src="./mute_card.js"></script>
\ No newline at end of file diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 8eade382..8114d5e2 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -6,7 +6,7 @@ import ImageCropper from '../image_cropper/image_cropper.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import BlockCard from '../block_card/block_card.vue' -import withLoadMore from '../../hocs/with_load_more/with_load_more' +import MuteCard from '../mute_card/mute_card.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' import withList from '../../hocs/with_list/with_list' @@ -18,6 +18,14 @@ const BlockListWithSubscription = withSubscription( 'entries' ) +const MuteList = withList(MuteCard, userId => ({ userId })) +const MuteListWithSubscription = withSubscription( + MuteList, + (props, $store) => $store.dispatch('fetchMutes'), + (props, $store) => get($store.state.users.currentUser, 'muteIds', []), + 'entries' +) + const UserSettings = { data () { return { @@ -55,7 +63,8 @@ const UserSettings = { StyleSwitcher, TabSwitcher, ImageCropper, - 'block-list': BlockListWithSubscription + 'block-list': BlockListWithSubscription, + 'mute-list': MuteListWithSubscription }, computed: { user () { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 5bae583c..27f3e7cb 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -166,6 +166,10 @@ <div :label="$t('settings.blocks_tab')"> <block-list :refresh="true" /> </div> + + <div :label="$t('settings.mutes_tab')"> + <mute-list :refresh="true" /> + </div> </tab-switcher> </div> </div> |