feat: improve group adding

Signed-off-by: Grigory Vodyanov <[email protected]>

src/components/AppNavigation/GroupNavigationItem.vue

@@ -5,6 +5,7 @@
 <template>
 	<div class="group-drop-area"
 		data-testid="group-drop-area"
+		v-if="!isEmpty"
 		@drop="onDrop($event, group)"
 		@dragenter.prevent
 		@dragover="onDragOver($event)"
@@ -119,6 +120,10 @@ export default {
 		contacts() {
 			return this.$store.getters.getContacts
 		},
+
+		isEmpty() {
+			return this.group.contacts.length === 0
+		},
 	},
 
 	methods: {

src/components/AppNavigation/RootNavigation.vue

@@ -87,14 +87,15 @@
 					<IconAdd :size="20" />
 				</template>
 				<template #actions>
-					<ActionText>
+					<ActionText v-show="isNewGroupMenuOpen">
 						<template #icon>
 							<IconError v-if="createGroupError" :size="20" />
 							<IconContact v-else-if="!createGroupError" :size="20" />
 						</template>
 						{{ createGroupError ? createGroupError : t('contacts', 'Create a new contact group') }}
 					</ActionText>
 					<ActionInput icon=""
+						v-show="isNewGroupMenuOpen"
 						:placeholder="t('contacts','Contact group name')"
 						@submit.prevent.stop="createNewGroup" />
 				</template>
@@ -203,6 +204,7 @@ import IconError from 'vue-material-design-icons/AlertCircle.vue'
 
 import RouterMixin from '../../mixins/RouterMixin.js'
 import { showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
 
 export default {
 	name: 'RootNavigation',
@@ -390,22 +392,16 @@ export default {
 			// Check if already exists
 			if (this.groups.find(group => group.name === groupName)) {
 				this.createGroupError = t('contacts', 'This group already exists')
+				emit('contacts:group:append', this.groups.find(group => group.name === groupName).name)
 				return
 			}
 
 			this.createGroupError = null
-
 			this.logger.debug('Created new local group', { groupName })
 			this.$store.dispatch('addGroup', groupName)
 			this.isNewGroupMenuOpen = false
 
-			// Select group
-			this.$router.push({
-				name: 'group',
-				params: {
-					selectedGroup: groupName,
-				},
-			})
+			emit('contacts:group:append', groupName)
 		},
 
 		// Ellipsis item toggles

src/components/EntityPicker/ContactsPicker.vue

@@ -61,6 +61,7 @@ export default {
 				total: 0,
 				name: '',
 			},
+			passedGroupName: '',
 		}
 	},
 	computed: {
@@ -85,6 +86,7 @@ export default {
 		addContactsToGroup(group) {
 			console.debug('Contacts picker opened for group', group)
 
+			this.passedGroupName = group.name ? group.name : group
 			// Get the full group if we provided the group name only
 			if (typeof group === 'string') {
 				group = this.groups.find(a => a.name === group)
@@ -164,6 +166,14 @@ export default {
 				this.isProcessDone = true
 				this.showPicker = false
 
+				// Select group
+				this.$router.push({
+					name: 'group',
+					params: {
+						selectedGroup: typeof this.passedGroupName === 'string' ? this.passedGroupName : this.passedGroupName.name,
+					},
+				})
+
 				// Auto close after 3 seconds if no errors
 				if (this.processStatus.failed === 0) {
 					setTimeout(this.closeProcess, 3000)
@@ -181,6 +191,17 @@ export default {
 			this.processStatus.progress = 0
 			this.processStatus.success = 0
 			this.processStatus.total = 0
+
+			if (this.passedGroupName === '' || this.passedGroupName === undefined) {
+				return
+			}
+			// Select group
+			this.$router.push({
+				name: 'group',
+				params: {
+					selectedGroup: typeof this.passedGroupName === 'string' ? this.passedGroupName : this.passedGroupName.name,
+				},
+			})
 		},
 	},
 }

src/components/EntityPicker/EntityPicker.vue

@@ -392,6 +392,7 @@ $icon-margin: math.div($clickable-area - $icon-size, 2);
 		position: relative;
 		display: flex;
 		align-items: center;
+		width: 95%;
 		&-input {
 			width: 100%;
 			height: $clickable-area - $entity-spacing !important;
@@ -460,6 +461,10 @@ it back */
 	border-radius: var(--border-radius-large) !important;
 }
 
+:deep(.modal-container__close) {
+	margin-top: 19px;
+}
+
 </style>
 
 <style lang="scss" scoped>