From 7570a1ad5c3902ee1c8c3e43f448334eeae5a4f3 Mon Sep 17 00:00:00 2001
From: Bastien PROMPSY <bastienprompsy@gmail.com>
Date: Tue, 24 May 2022 10:45:46 +0200
Subject: [PATCH 1/4] Allow to delete multiple contacts

Add checkbox on hover and add a button to delete the selected contacts
Signed-off-by: Bastien PROMPSY <bastienprompsy@gmail.com>
---
 src/components/ContactsList.vue               | 42 ++++++++-
 .../ContactsList/ContactsListItem.vue         | 87 ++++++++++++++-----
 2 files changed, 108 insertions(+), 21 deletions(-)

diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index 76d31d917..b7160f8ca 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -26,13 +26,24 @@
 			<div class="search-contacts-field">
 				<input v-model="query" type="text" :placeholder="t('contacts', 'Search contacts …')">
 			</div>
+			<Actions
+				class="merge-button"
+				menu-align="right">
+				<slot v-if="selected.length >= 1">
+					<ActionButton icon="icon-delete" @click="deleteMultipleContact">
+						{{ t('contacts', 'Delete') }}
+					</ActionButton>
+				</slot>
+			</Actions>
 		</div>
 		<VirtualList ref="scroller"
 			class="contacts-list"
 			data-key="key"
 			:data-sources="filteredList"
 			:data-component="ContactsListItem"
-			:estimate-size="68" />
+			:estimate-size="68"
+			:extra-props={selected}
+			@update-check-selected="selectionChanged" />
 	</AppContentList>
 </template>
 
@@ -40,6 +51,8 @@
 import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
 import ContactsListItem from './ContactsList/ContactsListItem'
 import VirtualList from 'vue-virtual-scroll-list'
+import Actions from '@nextcloud/vue/dist/Components/Actions'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 
 export default {
 	name: 'ContactsList',
@@ -47,6 +60,8 @@ export default {
 	components: {
 		AppContentList,
 		VirtualList,
+		Actions,
+		ActionButton,
 	},
 
 	props: {
@@ -68,6 +83,7 @@ export default {
 		return {
 			ContactsListItem,
 			query: '',
+			selected: [],
 		}
 	},
 
@@ -157,6 +173,27 @@ export default {
 			}
 			return true
 		},
+		selectionChanged(newValue) {
+			if (this.selected.includes(newValue)) {
+				this.selected.splice(this.selected.indexOf(newValue), 1)
+			} else {
+				this.selected.push(newValue)
+			}
+		},
+		deleteMultipleContact() {
+			const temp = []
+			this.selected.forEach(element => {
+				if (this.contacts[element]) {
+					// delete contact
+					this.$store.dispatch('deleteContact', { contact: this.contacts[element] })
+					temp.push(this.selected.indexOf(element), 1)
+				}
+			})
+			// delete the uid in selected of the contact deleted
+			temp.forEach(el => {
+				this.selected.splice(temp, 1)
+			})
+		},
 	},
 }
 </script>
@@ -187,4 +224,7 @@ export default {
 	padding: 0 4px;
 }
 
+.merge-button {
+	float: right;
+}
 </style>
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index 9252e4bc6..b4631b5a3 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -1,28 +1,42 @@
 <template>
-	<ListItem
-		:id="id"
-		:key="source.key"
-		class="list-item-style envelope"
-		:title="source.displayName"
-		:to="{ name: 'contact', params: { selectedGroup: selectedGroup, selectedContact: source.key } }">
-		<!-- @slot Icon slot -->
+	<div class="contacts-list__item"
+		:class="{'contacts-list__item--active': selectedContact === source.key}"
+		@mouseover="hover = true"
+		@mouseleave="hover = false">
+		<ActionCheckbox v-if="hover || ischecked"
+			:checked="ischecked"
+			@check="isSelected"
+			@uncheck="isUnselected" />
+		<BaseAvatar v-else-if="!hover && !ischecked"
+			:display-name="source.displayName"
+			:url="avatarUrl"
+			:size="40" />
+		<ListItem
+			:id="id"
+			:key="source.key"
+			class="list-item-style envelope"
+			:title="source.displayName"
+			:to="{ name: 'contact', params: { selectedGroup: selectedGroup, selectedContact: source.key } }">
+			<!-- @slot Icon slot -->
 
-		<template #icon>
-			<div class="app-content-list-item-icon">
-				<BaseAvatar :display-name="source.displayName" :url="avatarUrl" :size="40" />
-			</div>
-		</template>
-		<template #subtitle>
-			<div class="envelope__subtitle">
-				<span class="envelope__subtitle__subject">
-					{{ source.email }}
-				</span>
-			</div>
-		</template>
-	</ListItem>
+			<template #icon>
+				<div class="app-content-list-item-icon">
+					<BaseAvatar :display-name="source.displayName" :url="avatarUrl" :size="40" />
+				</div>
+			</template>
+			<template #subtitle>
+				<div class="envelope__subtitle">
+					<span class="envelope__subtitle__subject">
+						{{ source.email }}
+					</span>
+				</div>
+			</template>
+		</ListItem>
+	</div>
 </template>
 
 <script>
+import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import { NcListItem as ListItem } from '@nextcloud/vue'
 import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
 
@@ -32,6 +46,7 @@ export default {
 	components: {
 		ListItem,
 		BaseAvatar,
+		ActionCheckbox,
 	},
 
 	props: {
@@ -43,10 +58,22 @@ export default {
 			type: Object,
 			required: true,
 		},
+		selected: {
+			type: Array,
+			required: false
+		}
 	},
 	data() {
 		return {
 			avatarUrl: undefined,
+			hover: false,
+			ischecked: false,
+		}
+	},
+	beforeMount() {
+		// check the checkbox who is already selected
+		if (this.selected.includes(this.source.key)) {
+			this.ischecked = true
 		}
 	},
 	computed: {
@@ -85,6 +112,26 @@ export default {
 				this.avatarUrl = `${this.source.url}?photo`
 			}
 		},
+
+		isSelected() {
+			this.ischecked = true
+			// update the selected
+			this.$parent.$parent.$emit('update-check-selected', this.source.key)
+		},
+
+		isUnselected() {
+			this.ischecked = false
+			// update the selected
+			this.$parent.$parent.$emit('update-check-selected', this.source.key)
+		},
+
+		/**
+		 * Select this contact within the list
+		 */
+		selectContact() {
+			// change url with router
+			this.$router.push({ name: 'contact', params: { selectedGroup: this.selectedGroup, selectedContact: this.source.key } })
+		},
 	},
 }
 </script>

From 5ec4f59031d7044d2ce7e9dcb95de06fc1a347fc Mon Sep 17 00:00:00 2001
From: Bastien PROMPSY <bastienprompsy@gmail.com>
Date: Tue, 24 May 2022 10:50:57 +0200
Subject: [PATCH 2/4] Allow to merge the selected contacts

Add a button to merge the selected contacts

Signed-off-by: Bastien PROMPSY <bastienprompsy@gmail.com>
---
 src/components/ContactsList.vue | 67 +++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index b7160f8ca..7074becf2 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -29,6 +29,11 @@
 			<Actions
 				class="merge-button"
 				menu-align="right">
+				<slot v-if="selected.length >= 2">
+					<ActionButton icon="icon-clone" @click="mergeContact">
+						{{ t('contacts', 'Merge') }}
+					</ActionButton>
+				</slot>
 				<slot v-if="selected.length >= 1">
 					<ActionButton icon="icon-delete" @click="deleteMultipleContact">
 						{{ t('contacts', 'Delete') }}
@@ -194,6 +199,68 @@ export default {
 				this.selected.splice(temp, 1)
 			})
 		},
+		cleanContactValue(contact, value) {
+			contact.jCal[1].forEach(element => {
+				if (element[0] === value[0] && element[3] === '' && !Array.isArray(element[3])) {
+					contact.jCal[1].splice(contact.jCal[1].indexOf(element), 1)
+				} else if (element[0] === value[0] && Array.isArray(element[3])) {
+					let isempty = true
+					value[3].forEach(arr => {
+						if (arr !== '') {
+							isempty = false
+						}
+					})
+					if (isempty === false) {
+						contact.jCal[1].splice(contact.jCal[1].indexOf(element), 1)
+					}
+				}
+			})
+		},
+		addValue(contact, jcalvalue) {
+			jcalvalue.filter(element => {
+				// exclude the unique field we don't want to add
+				return !['uid', 'version', 'fn', 'prodid', 'gender', 'rev'].includes(element[0])
+			}).forEach(value => {
+				if (Array.isArray(value[3])) {
+					let isempty = true
+					value[3].forEach(arr => {
+						if (arr !== '') {
+							isempty = false
+						}
+					})
+					if (isempty === false) {
+						// delete blank field of the same type and push the new field
+						this.cleanContactValue(contact, value)
+						contact.jCal[1].push(value)
+					}
+				} else if (value[3] !== '') {
+					let include = false
+					contact.jCal[1].forEach(element => {
+						if (element[0] === value[0] && element[3] === value[3]) {
+							include = true
+						}
+					})
+					if (!include) {
+						// delete blank field of the same type and push the new field
+						this.cleanContactValue(contact, value)
+						contact.jCal[1].push(value)
+					}
+				}
+			})
+			return contact
+		},
+		mergeContact() {
+			const firstContact = this.contacts[this.selected[0]]
+			this.selected.slice(1).forEach((element) => {
+				if (this.contacts[element]) {
+					const contactjcal = this.contacts[element].jCal[1]
+					this.addValue(firstContact, contactjcal)
+					// delete the contact merged and the uid in the selected
+					this.$store.dispatch('deleteContact', { contact: this.contacts[element] }) && this.selected.splice(this.selected.indexOf(element), 1)
+				}
+			})
+			this.$store.dispatch('updateContact', firstContact)
+		},
 	},
 }
 </script>

From 9725d38f4cef4a41c01f23db70e3f8eced274a91 Mon Sep 17 00:00:00 2001
From: Bastien PROMPSY <bastienprompsy@gmail.com>
Date: Mon, 30 May 2022 15:57:36 +0200
Subject: [PATCH 3/4] Allow to add the selected contacts to a group

When the button 'add to group' is clicked, a multiselect appears who allow to select the group or type it

Signed-off-by: Bastien PROMPSY <bastienprompsy@gmail.com>
---
 src/components/ContactsList.vue | 66 ++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index 7074becf2..d7fec53a4 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -29,16 +29,31 @@
 			<Actions
 				class="merge-button"
 				menu-align="right">
-				<slot v-if="selected.length >= 2">
-					<ActionButton icon="icon-clone" @click="mergeContact">
-						{{ t('contacts', 'Merge') }}
+				<template v-if="selected.length >= 1">
+					<ActionButton v-if="showAddToGroup"
+						icon="icon-clone"
+						@click="OpenMultiselect">
+						{{ t('contacts', 'Add to group') }}
 					</ActionButton>
-				</slot>
-				<slot v-if="selected.length >= 1">
-					<ActionButton icon="icon-delete" @click="deleteMultipleContact">
-						{{ t('contacts', 'Delete') }}
-					</ActionButton>
-				</slot>
+					<Multiselect v-if="showSelectGroup"
+						:options="groups"
+						:taggable="true"
+						@input="addSelectedContactsToGroup"
+						@tag="addSelectedContactsToGroup"
+						@close="closeMultiselect" />
+				</template>
+				<ActionButton v-if="selected.length >= 2"
+					:close-after-click="true"
+					icon="icon-clone"
+					@click="mergeContact">
+					{{ t('contacts', 'Merge') }}
+				</ActionButton>
+				<ActionButton v-if="selected.length >= 1"
+					:close-after-click="true"
+					icon="icon-delete"
+					@click="deleteMultipleContact">
+					{{ t('contacts', 'Delete') }}
+				</ActionButton>
 			</Actions>
 		</div>
 		<VirtualList ref="scroller"
@@ -58,6 +73,8 @@ import ContactsListItem from './ContactsList/ContactsListItem'
 import VirtualList from 'vue-virtual-scroll-list'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import naturalCompare from 'string-natural-compare'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 
 export default {
 	name: 'ContactsList',
@@ -67,6 +84,7 @@ export default {
 		VirtualList,
 		Actions,
 		ActionButton,
+		Multiselect
 	},
 
 	props: {
@@ -89,10 +107,17 @@ export default {
 			ContactsListItem,
 			query: '',
 			selected: [],
+			showGroups: false,
+			showAddToGroup: true,
+			showSelectGroup: false,
 		}
 	},
 
 	computed: {
+		groups() {
+			return this.$store.getters.getGroups.slice(0).map(group => group.name)
+				.sort((a, b) => naturalCompare(a, b, { caseInsensitive: true }))
+		},
 		selectedContact() {
 			return this.$route.params.selectedContact
 		},
@@ -261,6 +286,29 @@ export default {
 			})
 			this.$store.dispatch('updateContact', firstContact)
 		},
+		OpenMultiselect() {
+			this.showAddToGroup = false
+			this.showSelectGroup = true
+		},
+		closeMultiselect() {
+			this.showAddToGroup = true
+			this.showSelectGroup = false
+		},
+		addSelectedContactsToGroup(value) {
+			this.selected.forEach(element => {
+				const selectedContact = this.contacts[element]
+				const data = selectedContact.groups
+				if (!data.includes(value)) {
+					this.$store.dispatch('addContactToGroup', {
+						contact: selectedContact,
+						groupName: value,
+					})
+					data.push(value)
+					selectedContact.groups = data
+					this.$store.dispatch('updateContact', selectedContact)
+				}
+			})
+		},
 	},
 }
 </script>

From 15e64b571770ce06594b4648fa80095cc89099f1 Mon Sep 17 00:00:00 2001
From: szaimen <szaimen@e.mail.de>
Date: Mon, 17 Oct 2022 21:42:18 +0200
Subject: [PATCH 4/4] fix imports

Signed-off-by: szaimen <szaimen@e.mail.de>
---
 src/components/ContactsList.vue                  | 6 +++---
 src/components/ContactsList/ContactsListItem.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index d7fec53a4..613830a16 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -71,10 +71,10 @@
 import AppContentList from '@nextcloud/vue/dist/Components/NcAppContentList'
 import ContactsListItem from './ContactsList/ContactsListItem'
 import VirtualList from 'vue-virtual-scroll-list'
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import Actions from '@nextcloud/vue/dist/Components/NcActions'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import naturalCompare from 'string-natural-compare'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Multiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
 
 export default {
 	name: 'ContactsList',
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index b4631b5a3..d220c28b5 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
 import { NcListItem as ListItem } from '@nextcloud/vue'
 import BaseAvatar from '@nextcloud/vue/dist/Components/NcAvatar'