forked from AkkomaGang/akkoma-fe
use SelectableList for blocks/mutes list
This commit is contained in:
parent
23b9d1eaa3
commit
d9b3f5be47
3 changed files with 23 additions and 12 deletions
|
@ -4,12 +4,11 @@ const SelectableList = {
|
||||||
components: {
|
components: {
|
||||||
Checkbox
|
Checkbox
|
||||||
},
|
},
|
||||||
props: ['checked'],
|
props: {
|
||||||
data () {
|
items: {
|
||||||
},
|
type: Array,
|
||||||
computed: {
|
default: () => []
|
||||||
},
|
}
|
||||||
methods: {
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 () {
|
||||||
|
|
Loading…
Reference in a new issue