Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto merge #2764

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
+231 −17
Draft

Auto merge #2764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22e5689
Allow to delete multiple contacts
MrPompom May 24, 2022
c498ef2
Allow to merge the selected contacts
MrPompom May 24, 2022
2528eb8
Allow to merge all the possible duplicated contacts
MrPompom May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 174 additions & 2 deletions src/components/ContactsList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,53 @@

<template>
<AppContentList>
<div class="contacts-list__header" />
<div class="contacts-list__header">
<Actions
class="merge-button"
menu-align="right">
<slot>
<ActionButton icon="icon-qrcode" @click="autoMergeContact">
{{ t('contacts', 'Auto Merge') }}
</ActionButton>
</slot>
<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') }}
</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>

<script>
import AppContentList from '@nextcloud/vue/dist/Components/AppContentList'
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',

components: {
AppContentList,
VirtualList,
Actions,
ActionButton,
},

props: {
Expand All @@ -63,6 +89,7 @@ export default {
data() {
return {
ContactsListItem,
selected: [],
}
},

Expand Down Expand Up @@ -148,6 +175,147 @@ 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)
})
},
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
element[3].forEach(arr => {
if (arr !== '') {
isempty = false
}
})
if (isempty === true) {
contact.jCal[1].splice(contact.jCal[1].indexOf(element), 1)
}
}
})
},
addValue(firstContact, 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 (value[0] === 'categories') {
value.slice(3).forEach(element => {
const data = firstContact.groups
if (!firstContact.groups.includes(element)) {
data.push(element)
this.$store.dispatch('addContactToGroup', {
contact: firstContact,
groupName: element,
})
firstContact.groups = data
}
})
} else 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(firstContact, value)
firstContact.jCal[1].push(value)
}
} else if (value[3] !== '') {
let include = false
firstContact.jCal[1].forEach(element => {
if (element[0] === value[0] && element[3] === value[3]) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where do the magic indeces 0 and 3 come from?

include = true
}
})
if (!include) {
// delete blank field of the same type and push the new field
this.cleanContactValue(firstContact, value)
firstContact.jCal[1].push(value)
}
}
})
return firstContact
},
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.$store.dispatch('updateContact', firstContact)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updateContact doesn't send the change to the server

this.selected = []
},
getKey(contact, index) {
if (!this.selected.includes(contact[index].key)) {
this.selected.push(contact[index].key)
}
},
Comment on lines +274 to +278
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this method is very confusing. why doesn't it return a value? please rename or restructure to make it an actual getter

verifyContact(contactOne, contactTwo) {
let isOk = false
contactOne.forEach(element => {
contactTwo.forEach(el => {
if (el[3] === element[3] && el[3] !== '' && element[3] !== '') {
isOk = true
}
})
})
return isOk
},
deleteTempContact(contact) {
contact.forEach(element => {
this.selected.forEach(el => {
if (element.key === el) {
contact.splice(contact.indexOf(element), 1)
}
})
})
return contact
},
autoMergeContact() {
const contact = this.list.filter(item => this.matchSearch(this.contacts[item.key]))
for (let i = 0; i < contact.length; i++) {
const val = contact.map(item => this.contacts[item.key].jCal[1].filter(el => { return !['uid', 'version', 'prodid', 'rev', 'adr'].includes(el[0]) }))
this.getKey(contact, i)
for (let n = 0; n < val.length; n++) {
if (n !== i) {
if (this.verifyContact(val[i], val[n])) {
this.getKey(contact, n)
}
}
}
this.deleteTempContact(contact)
if (this.selected.length > 1) {
this.mergeContact()
}
this.selected = []
}
},
},
}
</script>
Expand All @@ -163,4 +331,8 @@ export default {
.contacts-list__header {
min-height: 48px;
}

.merge-button {
float: right;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please use flexbox instead of floats

}
</style>
72 changes: 57 additions & 15 deletions src/components/ContactsList/ContactsListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,42 @@
<template>
<ListItemIcon
:id="id"
:key="source.key"
:avatar-size="44"
<div class="contacts-list__item"
:class="{'contacts-list__item--active': selectedContact === source.key}"
:display-name="source.displayName"
:is-no-user="true"
:subtitle="source.email"
:title="source.displayName"
:url="avatarUrl"
class="contacts-list__item"
tabindex="0"
@click.prevent.stop="selectContact"
@keypress.enter.prevent.stop="selectContact" />
@mouseover="hover = true"
@mouseleave="hover = false">
<ActionCheckbox v-if="hover || ischecked"
:checked="ischecked"
@check="isSelected"
@uncheck="isUnselected" />
<Avatar v-else-if="!hover && !ischecked"
:size="44"
:user="source.displayName"
:display-name="source.displayName"
:is-no-user="true" />
<ListItem
style="height=100%"
:id="id"
:key="source.key"
:display-name="source.displayName"
:subtitle="source.email"
:title="source.displayName"
@click.prevent.stop="selectContact"
@keypress.enter.prevent.stop="selectContact">
</ListItem>
</div>
</template>

<script>
import ListItemIcon from '@nextcloud/vue/dist/Components/ListItemIcon'
import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import ListItem from '@nextcloud/vue/dist/Components/ListItem'

export default {
name: 'ContactsListItem',

components: {
ListItemIcon,
ActionCheckbox,
ListItem,
Avatar,
},

props: {
Expand All @@ -34,10 +48,16 @@ export default {
type: Object,
required: true,
},
selected: {
type: Array,
required: false
}
},
data() {
return {
avatarUrl: undefined,
hover: false,
ischecked: false,
}
},
computed: {
Expand All @@ -57,6 +77,10 @@ export default {
async source() {
await this.loadAvatarUrl()
},
selected() {
this.ischecked = false
this.loadSelectedContact()
}
},
async mounted() {
await this.loadAvatarUrl()
Expand All @@ -76,6 +100,22 @@ export default {
this.avatarUrl = `${this.source.url}?photo`
}
},
loadSelectedContact() {
if (this.selected.includes(this.source.key)) {
this.ischecked = true
}
},
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
Expand All @@ -90,6 +130,8 @@ export default {
<style lang="scss" scoped>
.contacts-list__item {
padding: 8px;
display: flex;
list-style-type: none;

&--active,
&:focus,
Expand Down