diff options
| -rw-r--r-- | src/components/list/list.vue | 28 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.js | 27 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 14 |
3 files changed, 49 insertions, 20 deletions
diff --git a/src/components/list/list.vue b/src/components/list/list.vue new file mode 100644 index 00000000..f361e3b1 --- /dev/null +++ b/src/components/list/list.vue @@ -0,0 +1,28 @@ +<template> + <div class="list"> + <slot name="item" v-for="item in items" :item="item" /> + <div class="list-empty-content faint" v-if="items.length === 0"> + <slot name="empty" /> + </div> + </div> +</template> + +<script> +export default { + props: { + items: { + type: Array, + default: () => [] + } + } +} +</script> + +<style lang="scss"> +.list { + &-empty-content { + text-align: center; + padding: 10px; + } +} +</style> diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index dd931e67..057d1cec 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -10,29 +10,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 List from '../list/list.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' +})(List) -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' +})(List) const UserSettings = { data () { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 9d37ffc4..741fbe3f 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -200,9 +200,12 @@ <BlockCard slot-scope="row" :userId="row.item"/> </Autosuggest> </div> - <block-list :refresh="true"> + <BlockList :refresh="true"> + <template slot="item" scope="p"> + <BlockCard :key="p.item" :userId="p.item" /> + </template> <template slot="empty">{{$t('settings.no_blocks')}}</template> - </block-list> + </BlockList> </div> <div :label="$t('settings.mutes_tab')"> @@ -211,9 +214,12 @@ <MuteCard slot-scope="row" :userId="row.item"/> </Autosuggest> </div> - <mute-list :refresh="true"> + <MuteList :refresh="true"> + <template slot="item" scope="p"> + <MuteCard :key="p.item" :userId="p.item" /> + </template> <template slot="empty">{{$t('settings.no_mutes')}}</template> - </mute-list> + </MuteList> </div> </tab-switcher> </div> |