feat(ContactsList): add contact merging action

Signed-off-by: Grigory Vodyanov <scratchx@gmx.com>

# Conflicts:
#	src/components/ContactsList.vue

Author: GVodyanov

src/components/ContactsList.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<AppContentList class="content-list">
+	<AppContentList class="content-list" data-testid="contacts-list">
 		<NcDialog :open="showDeleteConfirmationDialog"
 			:name="n(
 				'contacts',
@@ -19,12 +19,19 @@
 			<NcNoteCard v-if="readOnlyMultiSelectedCount"
 				type="info"
 				:text="n('contacts',
-					'Please note that {number} contact is read only and won\'t be deleted',
-					'Please note that {number} contacts are read only and won\'t be deleted',
+					'Please note that {number} contact is read only and will not be deleted',
+					'Please note that {number} contacts are read only and will not be deleted',
 					readOnlyMultiSelectedCount,
 					{ 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: {
@@ -122,6 +145,8 @@ export default {
 				},
 			],
 			lastToggledIndex: undefined,
+			isMerging: false,
+			isMergingLoading: false,
 		}
 	},
 
@@ -160,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: {
@@ -303,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>