diff options
Diffstat (limited to 'src/components/AppContent/ContactsContent.vue')
| -rw-r--r-- | src/components/AppContent/ContactsContent.vue | 95 |
1 files changed, 58 insertions, 37 deletions
diff --git a/src/components/AppContent/ContactsContent.vue b/src/components/AppContent/ContactsContent.vue index 779f84cf..2f1f23a9 100644 --- a/src/components/AppContent/ContactsContent.vue +++ b/src/components/AppContent/ContactsContent.vue @@ -21,48 +21,48 @@ --> <template> - <AppContent> - <div v-if="loading"> - <EmptyContent icon="icon-loading"> - {{ t('contacts', 'Loading contacts …') }} - </EmptyContent> - </div> - - <div v-else-if="isEmptyGroup && !isRealGroup"> - <EmptyContent icon="icon-contacts-dark"> - {{ t('contacts', 'There are no contacts yet') }} - <template #desc> - <button class="primary" @click="newContact"> - {{ t('contacts', 'Create contact') }} - </button> - </template> - </EmptyContent> - </div> - - <div v-else-if="isEmptyGroup && isRealGroup"> - <EmptyContent icon="icon-contacts-dark"> - {{ t('contacts', 'There are no contacts in this group') }} - <template #desc> - <button v-if="contacts.length === 0" class="primary" @click="addContactsToGroup(selectedGroup)"> - {{ t('contacts', 'Create contacts') }} - </button> - <button v-else class="primary" @click="addContactsToGroup(selectedGroup)"> - {{ t('contacts', 'Add contacts') }} - </button> - </template> - </EmptyContent> - </div> - - <div v-else id="app-content-wrapper"> - <!-- contacts list --> + <AppContent v-if="loading"> + <EmptyContent icon="icon-loading"> + {{ t('contacts', 'Loading contacts …') }} + </EmptyContent> + </AppContent> + + <AppContent v-else-if="isEmptyGroup && !isRealGroup"> + <EmptyContent icon="icon-contacts-dark"> + {{ t('contacts', 'There are no contacts yet') }} + <template #desc> + <button class="primary" @click="newContact"> + {{ t('contacts', 'Create contact') }} + </button> + </template> + </EmptyContent> + </AppContent> + + <AppContent v-else-if="isEmptyGroup && isRealGroup"> + <EmptyContent icon="icon-contacts-dark"> + {{ t('contacts', 'There are no contacts in this group') }} + <template #desc> + <button v-if="contacts.length === 0" class="primary" @click="addContactsToGroup(selectedGroup)"> + {{ t('contacts', 'Create contacts') }} + </button> + <button v-else class="primary" @click="addContactsToGroup(selectedGroup)"> + {{ t('contacts', 'Add contacts') }} + </button> + </template> + </EmptyContent> + </AppContent> + + <AppContent v-else :show-details="showDetails" @update:showDetails="hideDetails"> + <!-- contacts list --> + <template #list> <ContactsList :list="contactsList" :contacts="contacts" :search-query="searchQuery" /> + </template> - <!-- main contacts details --> - <ContactDetails :contact-key="selectedContact" /> - </div> + <!-- main contacts details --> + <ContactDetails :contact-key="selectedContact" /> </AppContent> </template> <script> @@ -116,6 +116,10 @@ export default { return this.$store.getters.getSortedContacts }, + selectedContact() { + return this.$route.params.selectedContact + }, + /** * Is this a real group ? * Aka not a dynamically generated one like `All contacts` @@ -131,6 +135,10 @@ export default { isEmptyGroup() { return this.contactsList.length === 0 }, + + showDetails() { + return !!this.selectedContact + }, }, methods: { @@ -148,6 +156,19 @@ export default { newContact() { this.$emit('newContact') }, + + /** + * Show the list and deselect contact + */ + hideDetails() { + // Reset the selected contact + this.$router.push({ + name: 'group', + params: { + selectedGroup: this.selectedGroup + }, + }) + }, }, } </script> |