Merge pull request #4521 from nextcloud/feat/merging-duplicate-contacts

Add merging duplicate contacts

Author: GVodyanov

src/components/ContactsList.vue

@@ -25,6 +25,13 @@
 					{ number: readOnlyMultiSelectedCount })" />
 		</NcDialog>
 
+		<NcModal v-if="isMerging"
+			:name="t('contacts', 'Merge contacts')"
+			size="large"
+			@close="isMerging = false">
+			<Merging :contacts="multiSelectedContacts" @finished="finishContactMerging" />
+		</NcModal>
+
 		<div class="contacts-list__header">
 			<div class="search-contacts-field">
 				<input v-model="query" type="text" :placeholder="t('contacts', 'Search contacts …')">
@@ -45,6 +52,15 @@
 					@click.prevent="attemptDeleteAllMultiSelected">
 					<IconDelete :size="16" />
 				</NcButton>
+				<NcButton v-if="!isMergingLoading"
+					type="tertiary"
+					:disabled="!areTwoEditable"
+					:title="mergeActionTitle"
+					:close-after-click="true"
+					@click.prevent="initiateContactMerging">
+					<IconSetMerge :size="20" />
+				</NcButton>
+				<NcLoadingIcon v-else :size="20" />
 			</div>
 		</transition>
 
@@ -59,11 +75,14 @@
 </template>
 
 <script>
-import { NcAppContentList as AppContentList, NcButton, NcDialog, NcNoteCard } from '@nextcloud/vue'
+import { NcAppContentList as AppContentList, NcButton, NcDialog, NcNoteCard, NcModal, NcLoadingIcon } from '@nextcloud/vue'
 import ContactsListItem from './ContactsList/ContactsListItem.vue'
 import VirtualList from 'vue-virtual-scroll-list'
 import IconSelect from 'vue-material-design-icons/CloseThick.vue'
 import IconDelete from 'vue-material-design-icons/DeleteOutline.vue'
+import IconSetMerge from 'vue-material-design-icons/SetMerge.vue'
+import Merging from './ContactsList/Merging.vue'
+
 // eslint-disable-next-line import/no-unresolved
 import IconCancelRaw from '@mdi/svg/svg/cancel.svg?raw'
 // eslint-disable-next-line import/no-unresolved
@@ -79,7 +98,11 @@ export default {
 		NcButton,
 		IconSelect,
 		IconDelete,
+		IconSetMerge,
 		NcDialog,
+		NcModal,
+		Merging,
+		NcLoadingIcon,
 	},
 
 	props: {
@@ -106,6 +129,7 @@ export default {
 			ContactsListItem,
 			query: '',
 			multiSelectedContacts: new Map(),
+			refreshKey: 0, // used to force re-render of the list when search query changes, can be removed in vue3
 			showDeleteConfirmationDialog: false,
 			buttons: [
 				{
@@ -121,6 +145,8 @@ export default {
 				},
 			],
 			lastToggledIndex: undefined,
+			isMerging: false,
+			isMergingLoading: false,
 		}
 	},
 
@@ -159,11 +185,19 @@ export default {
 		isAtLeastOneEditable() {
 			return this.readOnlyMultiSelectedCount !== this.multiSelectedContacts.size
 		},
+		areTwoEditable() {
+			return this.multiSelectedContacts.size - this.readOnlyMultiSelectedCount === 2
+		},
 		deleteActionTitle() {
 			return this.isAtLeastOneEditable
 				? n('contacts', 'Delete {number} contact', 'Delete {number} contacts', this.multiSelectedContacts.size, { number: this.multiSelectedContacts.size })
 				: t('contacts', 'Please select at least one editable contact to delete')
 		},
+		mergeActionTitle() {
+			return this.areTwoEditable
+				? t('contacts', 'Merge contacts')
+				: t('contacts', 'Please select two editable contacts to merge')
+		},
 	},
 
 	watch: {
@@ -302,6 +336,30 @@ export default {
 			this.unselectAllMultiSelected()
 			this.showDeleteConfirmationDialog = false
 		},
+
+		async initiateContactMerging() {
+			// For every contact in the multiSelectedContacts, we need to dispatch the load contact action
+			this.isMergingLoading = true
+			const contacts = Array.from(this.multiSelectedContacts.values())
+			for (const contact of contacts) {
+				await this.$store.dispatch('fetchFullContact', { contact })
+			}
+
+			this.isMergingLoading = false
+			this.isMerging = true
+		},
+
+		async finishContactMerging(mergedContact) {
+			// After merging, we need to update the contact in the store
+			await this.$store.dispatch('fetchFullContact', { contact: mergedContact, forceReFetch: true })
+
+			this.unselectAllMultiSelected()
+			this.isMerging = false
+
+			await this.$router.push({
+				name: 'root',
+			})
+		},
 	},
 }
 </script>