Animate and fix major structure conflict amongst addressbooks

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

5 files changed, 21 insertions, 7 deletions

diff --git a/css/animations.scss b/css/animations.scss
index ab49c84e..575b5557 100644
--- a/css/animations.scss
+++ b/css/animations.scss
@@ -13,4 +13,13 @@
 [class*='--pulse '],
 [class$='--pulse'] {
 	animation: pulse 1.5s infinite;
+}
+
+.list-enter-active, .list-leave-active {
+	transition: all 500ms ease-in-out;
+}
+
+.list-enter,
+.list-leave-to {
+	opacity: 0;
 }
\ No newline at end of file
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 6bc24567..91fa18b7 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -217,7 +217,7 @@ export default {
 					href: this.contact.url
 				}
 			]
-			if (this.contact.addressbook.readOnly) {
+			if (!this.contact.addressbook.readOnly) {
 				actions.push({
 					icon: 'icon-delete',
 					text: t('contacts', 'Delete'),
diff --git a/src/components/ContentList.vue b/src/components/ContentList.vue
index 578da452..ebf6f87b 100644
--- a/src/components/ContentList.vue
+++ b/src/components/ContentList.vue
@@ -21,12 +21,13 @@
   -->
 
 <template>
-	<div id="contacts-list" :class="{'icon-loading': loading}" class="app-content-list">
+	<transition-group id="contacts-list" :class="{'icon-loading': loading}" class="app-content-list"
+		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" />
-	</div>
+	</transition-group>
 </template>
 
 <script>
diff --git a/src/components/ContentList/ContentListItem.vue b/src/components/ContentList/ContentListItem.vue
index 78bb4be9..8c7a853d 100644
--- a/src/components/ContentList/ContentListItem.vue
+++ b/src/components/ContentList/ContentListItem.vue
@@ -15,7 +15,7 @@
 		</div>
 		<div class="app-content-list-item-line-one">{{ contact.displayName }}</div>
 		<div v-if="contact.email" class="app-content-list-item-line-two">{{ contact.email }}</div>
-		<div v-if="contact.addressbook.readOnly" class="icon-delete" tabindex="0"
+		<div v-if="!contact.addressbook.readOnly" class="icon-delete" tabindex="0"
 			@click.prevent.stop="deleteContact" @keypress.enter.prevent.stop="deleteContact" />
 	</div>
 </template>
diff --git a/src/store/addressbooks.js b/src/store/addressbooks.js
index 84a0d79b..0a4b04a2 100644
--- a/src/store/addressbooks.js
+++ b/src/store/addressbooks.js
@@ -73,7 +73,11 @@ const mutations = {
 	 */
 	addAddressbook(state, addressbook) {
 		// extend the addressbook to the default model
-		state.addressbooks.push(Object.assign({}, addressbookModel, addressbook))
+		addressbook = Object.assign({}, addressbookModel, addressbook)
+		// force reinit of the contacts object to prevent
+		// data passed as references
+		addressbook.contacts = {}
+		state.addressbooks.push(addressbook)
 	},
 
 	/**
@@ -118,7 +122,7 @@ const mutations = {
 	 * @param {Contact[]} data.contacts array of contacts to append
 	 */
 	appendContactsToAddressbook(state, { addressbook, contacts }) {
-		addressbook = state.addressbooks.find(search => search === addressbook)
+		addressbook = state.addressbooks.find(search => search.id === addressbook.id)
 
 		// convert list into an array and remove duplicate
 		addressbook.contacts = contacts.reduce((list, contact) => {
@@ -317,7 +321,7 @@ const actions = {
 			.then((response) => {
 				// We don't want to lose the url information
 				// so we need to parse one by one
-				const contacts = response.map(item => {
+				let contacts = response.map(item => {
 					let contact = new Contact(item.data, addressbook)
 					Vue.set(contact, 'dav', item)
 					return contact