2.1 vcard, new component layout and methods

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

3 files changed, 32 insertions, 8 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 1d975c14..fdaf521a 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -89,7 +89,7 @@
 				<!-- addressbook change select -->
 				<property-select :prop-model="addressbookModel" :value.sync="addressbook"
 					:options="addressbooksOptions" class="property--addressbooks" />
-				
+
 				<add-new-prop :contact="contact" />
 			</section>
 		</template>
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index 86eb4b77..1efcfb43 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -21,14 +21,17 @@
   -->
 
 <template>
-	<div class="grid-span-1 property">
-		<div class="property__row">
+	<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">{{ t('contacts', 'Add new property') }}</div>
 
 			<!-- type selector -->
-			<multiselect :options="availableProperties" :placeholder="t('contacts', 'Choose property type')"
-				class="multiselect-vue property__value"	@input="addProp" />
+			<multiselect :options="availableProperties" :placeholder="t('contacts', 'Choose property type')" class="multiselect-vue property__value"
+				track-by="id" label="name" @input="addProp" />
 		</div>
 	</div>
 </template>
@@ -36,6 +39,7 @@
 <script>
 import rfcProps from '../../models/rfcProps.js'
 import Contact from '../../models/contact'
+import propertyTitle from '../Properties/PropertyTitle'
 
 import Multiselect from 'vue-multiselect'
 
@@ -43,6 +47,7 @@ export default {
 	name: 'ContactDetailsAddNewProp',
 
 	components: {
+		propertyTitle,
 		Multiselect
 	},
 
@@ -55,13 +60,22 @@ export default {
 
 	computed: {
 		availableProperties() {
-			return Object.keys(rfcProps.properties)
+			return Object.keys(rfcProps.properties).map(key => {
+				return {
+					id: key,
+					name: rfcProps.properties[key].readableName
+				}
+			})
 		}
 	},
 
 	methods: {
-		addProp(name) {
-			console.log(name);
+		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)
+			}
 		}
 	}
 }
diff --git a/src/store/FakeName.vcf b/src/store/FakeName.vcf
index cae71a7b..c21255de 100644
--- a/src/store/FakeName.vcf
+++ b/src/store/FakeName.vcf
@@ -9,6 +9,16 @@ 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:3.0
 N:Cunningham;Liam;;Mr.;
 FN:Liam Cunningham