diff options
Diffstat (limited to 'src/components/ContactsList.vue')
| -rw-r--r-- | src/components/ContactsList.vue | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue index f2200693..222b4f1e 100644 --- a/src/components/ContactsList.vue +++ b/src/components/ContactsList.vue @@ -24,6 +24,7 @@ <!-- same uid can coexists between different addressbooks so we need to use the addressbook id as key as well --> <RecycleScroller + v-if="haveContact" id="contacts-list" ref="scroller" :class="{'icon-loading': loading, showdetails: selectedContact}" @@ -40,10 +41,22 @@ @deleted="selectContact" /> </template> </RecycleScroller> + + <div v-else class="app-content-list"> + <EmptyContent> + {{ t('contacts', 'No contacts in this group') }} + <template #action> + <button class="primary" @click="onAddContactsToGroup"> + {{ t('forms', 'Add some') }} + </button> + </template> + </EmptyContent> + </div> </template> <script> import ContactsListItem from './ContactsList/ContactsListItem' +import EmptyContent from './EmptyContent' import { RecycleScroller } from 'vue-virtual-scroller/dist/vue-virtual-scroller.umd.js' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' @@ -52,6 +65,7 @@ export default { components: { ContactsListItem, + EmptyContent, RecycleScroller, }, @@ -90,6 +104,9 @@ export default { filteredList() { return this.list.filter(contact => this.matchSearch(this.contacts[contact.key])) }, + haveContact() { + return this.selectedGroup && this.filteredList.length > 0 + }, }, watch: { @@ -160,6 +177,26 @@ export default { } return true }, + + onAddContactsToGroup() { + // TODO: add popup + } }, } </script> + +<style lang="scss" scoped> +// Virtual scroller overrides +.vue-recycle-scroller { + position: sticky !important; +} + +.vue-recycle-scroller__item-view { + // TODO: find better solution? + // https://github.com/Akryum/vue-virtual-scroller/issues/70 + // hack to not show the transition + overflow: hidden; + // same as app-content-list-item + height: 68px; +} +</style>
\ No newline at end of file |