1 files changed, 92 insertions, 31 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 95de110d..cae7cd9c 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -80,26 +80,33 @@
 
 			<!-- contact details -->
 			<section class="contact-details">
+
+				<!-- properties iteration -->
 				<contact-details-property v-for="(property, index) in sortedProperties" :key="index" :index="index"
 					:sorted-properties="sortedProperties" :property="property" :contact="contact"
 					@updatedcontact="updateContact" />
+
+				<!-- addressbook change select -->
+				<property-select :prop-model="addressbookModel" :value.sync="addressbook"
+					:options="addressbooksOptions" class="property--addressbooks" />
 			</section>
 		</template>
 	</div>
 </template>
 
 <script>
-
-import ICAL from 'ical.js'
 import ClickOutside from 'vue-click-outside'
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
 import debounce from 'debounce'
+
 import Contact from '../models/contact'
 import rfcProps from '../models/rfcProps.js'
 
-import popoverMenu from './core/popoverMenu'
-import contactDetailsProperty from './ContactDetails/ContactDetailsProperty'
+import PopoverMenu from './core/popoverMenu'
+import ContactDetailsProperty from './ContactDetails/ContactDetailsProperty'
+import PropertySelect from './Properties/PropertySelect'
+import PropertyGroups from './Properties/PropertyGroups'
 
 Vue.use(VTooltip)
 
@@ -107,8 +114,10 @@ export default {
 	name: 'ContactDetails',
 
 	components: {
-		popoverMenu,
-		contactDetailsProperty
+		PopoverMenu,
+		ContactDetailsProperty,
+		PropertySelect,
+		PropertyGroups
 	},
 
 	directives: {
@@ -128,12 +137,18 @@ export default {
 
 	data() {
 		return {
-			contact: undefined,
-			openedMenu: false
+			openedMenu: false,
+			addressbookModel: {
+				readableName: t('contacts', 'Addressbook'),
+				icon: 'icon-addressbook'
+			}
 		}
 	},
 
 	computed: {
+		/**
+		 * Contact color based on uid
+		 */
 		colorAvatar() {
 			try {
 				let color = this.contact.uid.toRgb()
@@ -170,36 +185,59 @@ export default {
 		 */
 		sortedProperties() {
 			return this.contact.properties.slice(0).sort((a, b) => {
-				return rfcProps.fieldOrder.indexOf(a.name) - rfcProps.fieldOrder.indexOf(b.name)
+				return (
+					rfcProps.fieldOrder.indexOf(a.name) -
+					rfcProps.fieldOrder.indexOf(b.name)
+				)
 			})
-		}
-	},
+		},
+
+		// usable addressbook object linked to the local contact
+		addressbook: {
+			get: function() {
+				return {
+					id: this.contact.addressbook.id,
+					name: this.contact.addressbook.displayName
+				}
+			},
+			set: function(addressbook) {
+				this.moveContactToAddressbook(addressbook)
+			}
+		},
 
-	watch: {
-		// url changed, get and show selected contact
-		uid: function() {
-			this.updateLocalContact()
+		// store getters filtered and mapped to usable object
+		addressbooksOptions() {
+			return this.addressbooks
+				.filter(addressbook => addressbook.enabled)
+				.map(addressbook => {
+					return {
+						id: addressbook.id,
+						name: addressbook.displayName
+					}
+				})
 		},
-		// done loading, check if the provided uid is valid and open details
-		loading: function() {
-			if (this.uid) {
-				this.updateLocalContact()
+
+		// store getter
+		addressbooks() {
+			return this.$store.getters.getAddressbooks
+		},
+
+		// local version of the contact
+		contact() {
+			let contact = this.$store.getters.getContact(this.uid)
+			if (contact) {
+				// create empty contact and copy inner data
+				let localContact = new Contact(
+					'BEGIN:VCARD\nUID:' + contact.uid + '\nEND:VCARD',
+					contact.addressbook
+				)
+				localContact.updateContact(contact.jCal)
+				return localContact
 			}
 		}
 	},
 
 	methods: {
-
-		/**
-		 * Fetch the selected contact from the store
-		 * and store it as a local data for editing
-		 */
-		updateLocalContact() {
-			// create new local instance of this contact
-			let contact = this.$store.getters.getContact(this.uid)
-			this.contact = new Contact(ICAL.stringify(contact.jCal), contact.addressbook)
-		},
-
 		/**
 		 * Executed on the 'updatedcontact' event
 		 * Send the local clone of contact to the store
@@ -221,8 +259,31 @@ export default {
 		},
 		toggleMenu() {
 			this.openedMenu = !this.openedMenu
+		},
+
+		/**
+		 * Move contact to the specified addressbook
+		 *
+		 * @param {Object} addressbook the desired addressbook
+		 */
+		moveContactToAddressbook(addressbook) {
+			addressbook = this.addressbooks.find(
+				search => search.id === addressbook.id
+			)
+			// we need to use the store contact, not the local contact
+			let contact = this.$store.getters.getContact(this.contact.key)
+			// TODO Make sure we do not overwrite contacts
+			if (addressbook) {
+				this.$store
+					.dispatch('moveContactToAddressbook', {
+						contact: contact,
+						addressbook
+					})
+					.then(() => {
+						this.updateContact()
+					})
+			}
 		}
 	}
-
 }
 </script>