merged upstream and pulled from our fork in preparation for PR to Vue branch in upstream

8 files changed, 101 insertions, 18 deletions

diff --git a/src/components/contentDetails.vue b/src/components/contentDetails.vue
index 9e5c6bec..f49a184a 100644
--- a/src/components/contentDetails.vue
+++ b/src/components/contentDetails.vue
@@ -71,7 +71,7 @@
 
 				<!-- actions -->
 				<div id="contact-header-actions">
-					<div v-click-outside="closeMenu" class="icon-more" @click="toggleMenu" />
+					<div v-click-outside="closeMenu" class="menu-icon icon-more-white" @click="toggleMenu" />
 					<div :class="{ 'open': openedMenu }" class="popovermenu">
 						<popover-menu :menu="contactActions" />
 					</div>
@@ -80,7 +80,7 @@
 
 			<!-- contact details -->
 			<section>
-				<input v-model="contact.uid" type="text">
+				<property v-for="(property, index) in contact.properties" :key="index" :property="property" />
 			</section>
 		</template>
 	</div>
@@ -90,6 +90,7 @@
 import Contact from '../models/contact'
 import ICAL from 'ical.js'
 import popoverMenu from './popoverMenu'
+import property from './contentDetails/property'
 import ClickOutside from 'vue-click-outside'
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
@@ -99,7 +100,8 @@ Vue.use(VTooltip)
 export default {
 	name: 'ContentDetails',
 	components: {
-		popoverMenu
+		popoverMenu,
+		property
 	},
 	directives: {
 		ClickOutside
diff --git a/src/components/contentDetails/property.vue b/src/components/contentDetails/property.vue
new file mode 100644
index 00000000..910abd99
--- /dev/null
+++ b/src/components/contentDetails/property.vue
@@ -0,0 +1,56 @@
+<!--
+  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<input v-model="prop" type="text">
+</template>
+
+<script>
+import { Property } from 'ical.js'
+
+export default {
+	name: 'Property',
+	props: {
+		property: {
+			type: Property,
+			default: true
+		}
+	},
+	computed: {
+		prop: {
+			get() {
+				if (this.property.isMultiValue) {
+					return this.property.getValues()
+				}
+				return this.property.getFirstValue()
+			},
+			set(data) {
+				if (this.property.isMultiValue) {
+					return this.property.setValues(data)
+				}
+				return this.property.setValue(data)
+			}
+		}
+	}
+
+}
+</script>
diff --git a/src/components/contentList/contentListItem.vue b/src/components/contentList/contentListItem.vue
index 00b8d9ab..16f182a2 100644
--- a/src/components/contentList/contentListItem.vue
+++ b/src/components/contentList/contentListItem.vue
@@ -1,14 +1,18 @@
 <template>
-	<a :class="{active: selectedContact === contact.key}" href="" class="app-content-list-item"
-		@click.prevent.stop="selectContact">
-		<input ref="selected" :id="contact.uid" type="checkbox"
-			class="app-content-list-item-checkbox checkbox">
-		<label :for="contact.uid" @click.prevent.stop="toggleSelect" />
+	<div :class="{active: selectedContact === contact.key}" tabindex="0" class="app-content-list-item"
+		@click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact">
+		<!-- keyboard accessibility will focus the input and not the label -->
+		<!--
+		<input ref="selected" :id="contact.key" type="checkbox"
+			class="app-content-list-item-checkbox checkbox" @keypress.enter.space.prevent.stop="toggleSelect">
+		<label :for="contact.key" @click.prevent.stop="toggleSelect" @keypress.enter.space.prevent.stop="toggleSelect" />
+		-->
 		<div :style="{ 'backgroundColor': colorAvatar }" class="app-content-list-item-icon">{{ contact.displayName | firstLetter }}</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.enabled" class="icon-delete" @click.prevent.stop="deleteContact" />
-	</a>
+		<div v-if="contact.addressbook.enabled" class="icon-delete" tabindex="0"
+			@click.prevent.stop="deleteContact" @keypress.enter.prevent.stop="deleteContact" />
+	</div>
 </template>
 
 <script>
diff --git a/src/models/contact.js b/src/models/contact.js
index a517f751..a4bbad99 100644
--- a/src/models/contact.js
+++ b/src/models/contact.js
@@ -208,4 +208,15 @@ export default class Contact {
 		return this.displayName
 	}
 
+	/**
+	 * Return all the properties as Property objects
+	 *
+	 * @readonly
+	 * @memberof Contact
+	 * @returns {Property[]} http://mozilla-comm.github.io/ical.js/api/ICAL.Property.html
+	 */
+	get properties() {
+		return this.vCard.getAllProperties()
+	}
+
 }
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index 2e690a99..dc749268 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -20,5 +20,8 @@
  *
  */
 
-export default {
-}
+const properties = [
+
+]
+
+export default { properties }
diff --git a/src/store/addressbooks.js b/src/store/addressbooks.js
index 3693c9db..0012f961 100644
--- a/src/store/addressbooks.js
+++ b/src/store/addressbooks.js
@@ -28,6 +28,7 @@ import Vue from 'vue'
 const state = {
 	addressbooks: []
 }
+
 const mutations = {
 	/**
 	 * Store addressbooks into state
@@ -125,11 +126,11 @@ const mutations = {
 	}
 
 }
+
 const getters = {
-	getAddressbooks(state) {
-		return state.addressbooks
-	}
+	getAddressbooks: state => state.addressbooks
 }
+
 const actions = {
 	/**
 	 * Retrieve and commit addressbooks
diff --git a/src/store/contacts.js b/src/store/contacts.js
index 72b5f821..40914cc9 100644
--- a/src/store/contacts.js
+++ b/src/store/contacts.js
@@ -120,6 +120,13 @@ const getters = {
 }
 
 const actions = {
+
+	/**
+	 * Delete a contact from the list and from the associated addressbook
+	 *
+	 * @param {Object} state
+	 * @param {Contact} contact the contact to delete
+	 */
 	deleteContact(context, contact) {
 		context.commit('deleteContact', contact)
 		context.commit('deleteContactFromAddressbook', contact)
diff --git a/src/store/groups.js b/src/store/groups.js
index a273f616..f00cb828 100644
--- a/src/store/groups.js
+++ b/src/store/groups.js
@@ -23,6 +23,7 @@
 const state = {
 	groups: []
 }
+
 const mutations = {
 	/**
 	 * Extract all the groups from the provided contacts
@@ -56,9 +57,7 @@ const mutations = {
 }
 
 const getters = {
-	getGroups(state) {
-		return state.groups
-	}
+	getGroups: state => state.groups
 }
 
 const actions = {}