Select nearest contact on deletion

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

5 files changed, 35 insertions, 10 deletions

diff --git a/css/ContentListItem.scss b/css/ContactsListItem.scss
index e8bc8bdf..e8bc8bdf 100644
--- a/css/ContentListItem.scss
+++ b/css/ContactsListItem.scss
diff --git a/css/contacts.scss b/css/contacts.scss
index 5b34bb35..886787e2 100644
--- a/css/contacts.scss
+++ b/css/contacts.scss
@@ -44,7 +44,7 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
 @import 'Settings/SettingsAddressbookSharee';
 @import 'ContactDetails';
 @import 'ContactDetailsAvatar';
-@import 'ContentListItem';
+@import 'ContactsListItem';
 @import 'Properties/Properties';
 @import 'Properties/PropertyTitle';
 @import 'ImportScreen';
diff --git a/src/components/ContentList.vue b/src/components/ContactsList.vue
index 92941911..d0af8c13 100644
--- a/src/components/ContentList.vue
+++ b/src/components/ContactsList.vue
@@ -25,19 +25,20 @@
 		name="list" tag="div">
 		<!-- same uid can coexists between different addressbooks
 			so we need to use the addressbook id as key as well -->
-		<content-list-item v-for="contact in list" :key="contact.key" :contact="contacts[contact.key]"
-			:search-query="searchQuery" />
+		<contacts-list-item v-for="(contact, index) in list" :key="contact.key" :contact="contacts[contact.key]"
+			:search-query="searchQuery" :list="list" :index="index"
+			@deleted="selectContact" />
 	</transition-group>
 </template>
 
 <script>
-import ContentListItem from './ContentList/ContentListItem'
+import ContactsListItem from './ContactsList/ContactsListItem'
 
 export default {
-	name: 'ContentList',
+	name: 'ContactsList',
 
 	components: {
-		ContentListItem
+		ContactsListItem
 	},
 
 	props: {
@@ -57,6 +58,25 @@ export default {
 			type: String,
 			default: ''
 		}
+	},
+
+	computed: {
+		selectedGroup() {
+			return this.$route.params.selectedGroup
+		}
+	},
+
+	methods: {
+		// Select closest contact on deletion
+		selectContact(oldIndex) {
+			if (this.list.length > 0 && oldIndex < this.list.length) {
+				// priority to the one above then the one after
+				const newContact = oldIndex === 0 ? this.list[oldIndex + 1] : this.list[oldIndex - 1]
+				if (newContact) {
+					this.$router.push({ name: 'contact', params: { selectedGroup: this.selectedGroup, selectedContact: newContact.key } })
+				}
+			}
+		}
 	}
 }
 </script>
diff --git a/src/components/ContentList/ContentListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index 8c7a853d..8bda16a7 100644
--- a/src/components/ContentList/ContentListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -22,13 +22,17 @@
 
 <script>
 export default {
-	name: 'ContentListItem',
+	name: 'ContactsListItem',
 	filters: {
 		firstLetter(value) {
 			return value.charAt(0)
 		}
 	},
 	props: {
+		index: {
+			type: Number,
+			required: true
+		},
 		contact: {
 			type: Object,
 			required: true
@@ -94,6 +98,7 @@ export default {
 		 */
 		deleteContact() {
 			this.$store.dispatch('deleteContact', { contact: this.contact })
+			this.$emit('deleted', this.index)
 		},
 
 		/**
diff --git a/src/views/Contacts.vue b/src/views/Contacts.vue
index dd95f4c2..0facdf61 100644
--- a/src/views/Contacts.vue
+++ b/src/views/Contacts.vue
@@ -36,7 +36,7 @@
 				<import-screen v-if="importState.stage !== 'default'" />
 				<template v-else>
 					<!-- contacts list -->
-					<content-list :list="contactsList" :contacts="contacts" :loading="loading"
+					<contacts-list :list="contactsList" :contacts="contacts" :loading="loading"
 						:search-query="searchQuery" />
 					<!-- main contacts details -->
 					<contact-details :loading="loading" :contact-key="selectedContact" />
@@ -49,7 +49,7 @@
 
 <script>
 import SettingsSection from 'Components/SettingsSection'
-import ContentList from 'Components/ContentList'
+import ContactsList from 'Components/ContactsList'
 import ContactDetails from 'Components/ContactDetails'
 import ImportScreen from 'Components/ImportScreen'
 
@@ -63,7 +63,7 @@ export default {
 
 	components: {
 		SettingsSection,
-		ContentList,
+		ContactsList,
 		ContactDetails,
 		ImportScreen
 	},