Add new props

src/components/ContactDetails.vue

@@ -83,13 +83,16 @@
 
 				<!-- properties iteration -->
 				<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
-				<contact-details-property v-for="(property, index) in sortedProperties" :key="index+contact.key" :index="index"
+				<contact-property v-for="(property, index) in sortedProperties" :key="index+contact.key" :index="index"
 					:sorted-properties="sortedProperties" :property="property" :contact="contact"
 					@updatedcontact="updateContact" />
 
 				<!-- addressbook change select - no last property because class is not applied here-->
 				<property-select :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true"
 					:is-last-property="false" :options="addressbooksOptions" class="property--addressbooks" />
+
+				<!-- new property select -->
+				<add-new-prop :contact="contact" />
 			</section>
 		</template>
 	</div>
@@ -105,7 +108,8 @@ import Contact from '../models/contact'
 import rfcProps from '../models/rfcProps.js'
 
 import PopoverMenu from './core/popoverMenu'
-import ContactDetailsProperty from './ContactDetails/ContactDetailsProperty'
+import ContactProperty from './ContactDetails/ContactDetailsProperty'
+import AddNewProp from './ContactDetails/ContactDetailsAddNewProp'
 import PropertySelect from './Properties/PropertySelect'
 import PropertyGroups from './Properties/PropertyGroups'
 
@@ -116,9 +120,10 @@ export default {
 
 	components: {
 		PopoverMenu,
-		ContactDetailsProperty,
+		ContactProperty,
 		PropertySelect,
-		PropertyGroups
+		PropertyGroups,
+		AddNewProp
 	},
 
 	directives: {

src/components/ContactDetails/ContactDetailsAddNewProp.vue

@@ -0,0 +1,82 @@
+<!--
+  - @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>
+	<div class="grid-span-2 property">
+
+		<!-- title -->
+		<property-title :icon="'icon-add'" :readable-name="t('contacts', 'Add new property')" />
+
+		<div class="property__row">
+			<div class="property__label" />
+
+			<!-- type selector -->
+			<multiselect :options="availableProperties" :placeholder="t('contacts', 'Choose property type')" class="multiselect-vue property__value"
+				track-by="id" label="name" @input="addProp" />
+		</div>
+	</div>
+</template>
+
+<script>
+import rfcProps from '../../models/rfcProps.js'
+import Contact from '../../models/contact'
+import propertyTitle from '../Properties/PropertyTitle'
+
+import Multiselect from 'vue-multiselect'
+
+export default {
+	name: 'ContactDetailsAddNewProp',
+
+	components: {
+		propertyTitle,
+		Multiselect
+	},
+
+	props: {
+		contact: {
+			type: Contact,
+			default: null
+		}
+	},
+
+	computed: {
+		availableProperties() {
+			return Object.keys(rfcProps.properties).map(key => {
+				return {
+					id: key,
+					name: rfcProps.properties[key].readableName
+				}
+			})
+		}
+	},
+
+	methods: {
+		addProp({ id }) {
+			let defaultData = rfcProps.properties[id].defaultValue
+			let property = this.contact.vCard.addPropertyWithValue(id, defaultData ? defaultData.value : '')
+			if (defaultData && defaultData.type) {
+				property.setParameter('type', defaultData.type)
+			}
+		}
+	}
+}
+</script>

src/models/contact.js

@@ -120,9 +120,9 @@ export default class Contact {
 	 * @memberof Contact
 	 */
 	get groups() {
-		let prop = this.vCard.getFirstProperty('categories')
-		if (prop) {
-			return this.vCard.getFirstProperty('categories').getValues()
+		let groupsProp = this.vCard.getFirstProperty('categories')
+		if (groupsProp) {
+			return groupsProp.getValues()
 		}
 		return []
 	}

src/services/parseVcf.js

@@ -35,17 +35,19 @@ export default function parseVcf(data = '', addressbook) {
 
 	importState.total = vCards.length
 
-	return vCards.map(vCard => {
+	// Not using map because we want to only push valid contacts
+	// map force to return at least undefined
+	return vCards.reduce((contacts, vCard) => {
 		try {
 			// console.log(vCards.indexOf(vCard))
 			let contact = new Contact(vCard, addressbook)
 			importState.accepted++
-			return contact
+			contacts.push(contact)
 		} catch (e) {
 			// Parse error! Do not stop here...
 			importState.denied++
-			// eslint-disable-next-line
 			console.error(e)
 		}
-	})
+		return contacts
+	}, [])
 }

src/store/FakeName.vcf

@@ -8,6 +8,18 @@ MEMBER:urn:uuid:cd314b39-b71a-41cf-b4eb-5cb61dd6fa24
 REV:2017-07-27T05:56:33Z
 UID:5acf667e-1cbf-48a8-87fe-546ee31a0b23
 END:VCARD
+
+BEGIN:VCARD
+VERSION:2.1
+FN:Jean Dupont
+N:Dupont;Jean
+ADR;WORK;PREF;QUOTED-PRINTABLE:;Bruxelles 1200=Belgique;6A Rue Th. Decuyper
+LABEL;QUOTED-PRINTABLE;WORK;PREF:Rue Th. Decuyper 6A=Bruxelles 1200=Belgique
+TEL;CELL:+1234 56789
+EMAIL;INTERNET:jean.dupont@example.com
+UID:dfs541fds15
+END:VCARD
+
 BEGIN:VCARD
 VERSION:4.0
 KIND:org
@@ -18,7 +30,7 @@ BEGIN:VCARD
 VERSION:3.0
 N:Cunningham;Liam;;Mr.;
 FN:Liam Cunningham
-NICKNAME:Begivaing81
+NICKNAME;TYPE=work:Begivaing81
 BDAY;VALUE=text:5/26/1981
 GENDER:male
 ORG:Central Hardware;
@@ -28,6 +40,16 @@ CATEGORIES:Tech,University
 TEL;TYPE=VOICE,HOME;VALUE=text:06-22957835
 ADR;TYPE=HOME:;;Beilen;DR;9413 BA;Netherlands
 END:VCARD
+
+BEGIN:VCARD
+VERSION:4.0
+FN:Simon Perreault
+N:Perreault;Simon;;;ing. jr,M.Sc.
+BDAY:--0203
+ANNIVERSARY:20090808T1430-0500
+GENDER:M
+END:VCARD
+
 BEGIN:VCARD
 VERSION:3.0
 N:Kamiński;Przemysł;;Mr.;

src/store/groups.js

@@ -35,18 +35,22 @@ const mutations = {
 	appendGroupsFromContacts(state, contacts) {
 		// init groups list
 		let groups = Object.values(contacts)
-			.map(contact => contact.groups.map(group => {
-				// extend group to model
-				return {
-					name: group,
-					contacts: []
-				}
-			})[0])
-		// ensure we only have one group of each
-		state.groups = state.groups.concat(groups)
-			.filter(function(group, index, self) {
-				return group && self.findIndex(search => search && search.name === group.name) === index
-			})
+			// iterate on every contacts
+			.reduce((groups, contact) => {
+				// transform group names into Object
+				contact.groups.map(groupName => {
+					// overriding existing groups: remove duplicates
+					groups[groupName] = {
+						name: groupName,
+						contacts: []
+					}
+				})
+				return groups
+			}, {})
+
+		// store in state
+		state.groups = Object.values(groups)
+
 		// append keys to groups
 		Object.values(contacts)
 			.forEach(contact => {