use SelectableList for blocks/mutes list

This commit is contained in:
taehoon 2019-04-03 22:48:00 -04:00
parent 23b9d1eaa3
commit d9b3f5be47
3 changed files with 23 additions and 12 deletions

View file

@ -4,12 +4,11 @@ const SelectableList = {
components: { components: {
Checkbox Checkbox
}, },
props: ['checked'], props: {
data () { items: {
}, type: Array,
computed: { default: () => []
}, }
methods: {
} }
} }

View file

@ -1,10 +1,22 @@
<template> <template>
<div> <div class="selectable-list">
<div v-for="item in items">
<Checkbox v-model="checked" /> <Checkbox v-model="checked" />
<slot name="item" :item="item" />
</div>
<div class="selectable-list-empty-content faint" v-if="items.length === 0">
<slot name="empty" />
</div>
</div> </div>
</template> </template>
<script src="./selectable_row.js"></script> <script src="./selectable_list.js"></script>
<style lang="scss"> <style lang="scss">
.selectable-list {
&-empty-content {
text-align: center;
padding: 10px;
}
}
</style> </style>

View file

@ -9,7 +9,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
import BlockCard from '../block_card/block_card.vue' import BlockCard from '../block_card/block_card.vue'
import MuteCard from '../mute_card/mute_card.vue' import MuteCard from '../mute_card/mute_card.vue'
import List from '../list/list.vue' import SelectableList from '../selectable_list/selectable_list.vue'
import EmojiInput from '../emoji-input/emoji-input.vue' import EmojiInput from '../emoji-input/emoji-input.vue'
import Autosuggest from '../autosuggest/autosuggest.vue' import Autosuggest from '../autosuggest/autosuggest.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription' import withSubscription from '../../hocs/with_subscription/with_subscription'
@ -19,13 +19,13 @@ const BlockList = withSubscription({
fetch: (props, $store) => $store.dispatch('fetchBlocks'), fetch: (props, $store) => $store.dispatch('fetchBlocks'),
select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
childPropName: 'items' childPropName: 'items'
})(List) })(SelectableList)
const MuteList = withSubscription({ const MuteList = withSubscription({
fetch: (props, $store) => $store.dispatch('fetchMutes'), fetch: (props, $store) => $store.dispatch('fetchMutes'),
select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
childPropName: 'items' childPropName: 'items'
})(List) })(SelectableList)
const UserSettings = { const UserSettings = {
data () { data () {