Add note for empty state to the lists using slot

This commit is contained in:
taehoon 2019-02-14 03:16:37 -05:00
parent b4a5b5203f
commit a5162bd636
3 changed files with 21 additions and 4 deletions

View File

@ -164,11 +164,15 @@
</div>
<div :label="$t('settings.blocks_tab')">
<block-list :refresh="true" />
<block-list :refresh="true">
<template slot="empty">No blocks</template>
</block-list>
</div>
<div :label="$t('settings.mutes_tab')">
<mute-list :refresh="true" />
<mute-list :refresh="true">
<template slot="empty">No mutes</template>
</mute-list>
</div>
</tab-switcher>
</div>

View File

@ -1,5 +1,7 @@
import Vue from 'vue'
import map from 'lodash/map'
import isEmpty from 'lodash/isEmpty'
import './with_list.scss'
const defaultEntryPropsGetter = entry => ({ entry })
const defaultKeyGetter = entry => entry.id
@ -9,6 +11,11 @@ const withList = ({
getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value
}) => (ItemComponent) => (
Vue.component('withList', {
props: [
'entries', // array of entry
'entryProps', // additional props to be passed into each entry
'entryListeners' // additional event listeners to be passed into each entry
],
render (createElement) {
return (
<div class="with-list">
@ -23,10 +30,10 @@ const withList = ({
}
return <ItemComponent {...props} />
})}
{isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
</div>
)
},
props: ['entries', 'entryProps', 'entryListeners']
}
})
)

View File

@ -0,0 +1,6 @@
.with-list {
&-empty-content {
text-align: center;
padding: 10px;
}
}