diff options
Diffstat (limited to 'src/views/Contacts.vue')
| -rw-r--r-- | src/views/Contacts.vue | 38 |
1 files changed, 37 insertions, 1 deletions
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue index 13c5dc16..60784a97 100644 --- a/src/views/Contacts.vue +++ b/src/views/Contacts.vue @@ -52,6 +52,20 @@ {{ item.utils.counter }} </AppNavigationCounter> </AppNavigationItem> + + <AppNavigationItem + :force-menu="true" + :menu-open.sync="isNewGroupMenuOpen" + :title="t('contacts', '+ New group')" + menu-icon="icon-add" + @click.prevent.stop="toggleNewGroupMenu"> + <template slot="actions"> + <ActionInput + icon="icon-contacts-dark" + :placeholder="t('contacts','Group name')" + @submit.prevent.stop="createNewGroup" /> + </template> + </AppNavigationItem> </ul> <!-- settings --> @@ -70,7 +84,9 @@ <div id="app-content-wrapper"> <!-- contacts list --> - <ContactsList :list="contactsList" + <ContactsList + v-if="!loading" + :list="contactsList" :contacts="contacts" :loading="loading" :search-query="searchQuery" /> @@ -96,6 +112,7 @@ import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCo import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew' import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings' import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' +import ActionInput from '@nextcloud/vue/dist/Components/ActionInput' import Content from '@nextcloud/vue/dist/Components/Content' import Modal from '@nextcloud/vue/dist/Components/Modal' import isMobile from '@nextcloud/vue/dist/Mixins/isMobile' @@ -128,6 +145,7 @@ export default { AppNavigationNew, AppNavigationSettings, ActionButton, + ActionInput, ContactDetails, ContactsList, Content, @@ -155,6 +173,8 @@ export default { data() { return { + isNewGroupMenuOpen: false, + isCreatingGroup: false, loading: true, searchQuery: '', } @@ -510,6 +530,22 @@ export default { this.$store.dispatch('changeStage', 'default') } }, + + toggleNewGroupMenu() { + this.isNewGroupMenuOpen = !this.isNewGroupMenuOpen + }, + createNewGroup(e) { + const input = e.target.querySelector('input[type=text]') + const groupName = input.value.trim() + this.$store.dispatch('addGroup', groupName) + this.isNewGroupMenuOpen = false + }, }, } </script> + +<style lang="scss" scoped> +#app-content-wrapper { + display: flex; +} +</style> |