Custom props update and details layout first init

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

8 files changed, 103 insertions, 12 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 6f9ca56c..abb7ddfe 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -79,7 +79,7 @@
 			</header>
 
 			<!-- contact details -->
-			<section>
+			<section class="contact-details">
 				<contact-details-property v-for="(property, index) in contact.properties" :key="index" :property="property" />
 			</section>
 		</template>
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index a315ab99..a9800fe0 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -31,6 +31,7 @@ import { Property } from 'ical.js'
 import rfcProps from '../../models/rfcProps.js'
 import PropertyText from '../properties/PropertyText'
 import PropertyMultipleText from '../properties/PropertyMultipleText'
+import PropertyDateTime from '../properties/PropertyDateTime'
 // import PropertySelect from '../properties/PropertyMultipleText'
 
 export default {
@@ -48,6 +49,8 @@ export default {
 		componentInstance() {
 			if (this.property.isMultiValue && this.propType === 'text') {
 				return PropertyMultipleText
+			} else if (this.propType && ['date-and-or-time', 'date-time', 'time', 'date'].indexOf(this.propType) > -1) {
+				return PropertyDateTime
 			} else if (this.propType && this.propType !== 'unknown') {
 				return PropertyText
 			}
@@ -111,7 +114,7 @@ export default {
 		value: {
 			get() {
 				if (this.property.isMultiValue) {
-					return this.property.getValues()
+					return this.property.getValues().flatten()
 				}
 				return this.property.getFirstValue()
 			},
diff --git a/src/components/SettingsSection.vue b/src/components/SettingsSection.vue
index 4743e6ae..df4bdf92 100644
--- a/src/components/SettingsSection.vue
+++ b/src/components/SettingsSection.vue
@@ -39,7 +39,7 @@ import importContacts from '../components/Settings/SettingsImportContacts'
 import sortContacts from '../components/Settings/SettingsSortContacts'
 
 export default {
-	name: 'ContentList',
+	name: 'SettingsSection',
 	components: {
 		addressBook,
 		addAddressBook,
diff --git a/src/components/properties/PropertyDateTime.vue b/src/components/properties/PropertyDateTime.vue
new file mode 100644
index 00000000..fb53372b
--- /dev/null
+++ b/src/components/properties/PropertyDateTime.vue
@@ -0,0 +1,73 @@
+<!--
+  - @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 v-if="propModel" class="contact-details-property grid-span-1">
+		<!-- type selector -->
+		<multiselect v-if="propModel.options" v-model="selectType"
+			:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
+			class="multiselect-vue contact-details-label" track-by="id" label="name" />
+
+		<!-- if we do not support any type on our model but one is set anyway -->
+		<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
+
+		<!-- delete the prop -->
+		<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
+
+		<input v-model="value" type="text">
+	</div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+import { VCardTime } from 'ical.js'
+
+export default {
+	name: 'PropertyDateTime',
+
+	components: {
+		Multiselect
+	},
+
+	props: {
+		selectType: {
+			type: Object,
+			default: () => {}
+		},
+		propModel: {
+			type: Object,
+			default: () => {}
+		},
+		value: {
+			type: [String],
+			default: ''
+		}
+	},
+
+	methods: {
+		deleteProperty() {
+			alert('deleted')
+		}
+	}
+}
+
+</script>
diff --git a/src/components/properties/PropertyMultipleText.vue b/src/components/properties/PropertyMultipleText.vue
index 49d2c67c..5ed6f32e 100644
--- a/src/components/properties/PropertyMultipleText.vue
+++ b/src/components/properties/PropertyMultipleText.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="propModel" class="contact-details-property">
+	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="contact-details-property">
 		<!-- type selector -->
 		<multiselect v-if="propModel.options" v-model="selectType"
 			:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
@@ -33,7 +33,7 @@
 		<!-- delete the prop -->
 		<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
 
-		<div v-for="(data, index) in value" :key="index">
+		<div v-for="index in propModel.displayOrder" :key="index" class="contact-details-property-row">
 			<div class="contact-details-label">{{ propModel.readableValues[index] }}</div>
 			<input v-model="value[index]" type="text">
 		</div>
@@ -60,11 +60,17 @@ export default {
 			default: () => {}
 		},
 		value: {
-			type: [Array, String],
+			type: [Array, String, Object],
 			default: ''
 		}
 	},
 
+	computed: {
+		gridLength() {
+			return this.propModel.displayOrder ? this.propModel.displayOrder.length : this.value.length
+		}
+	},
+
 	methods: {
 		deleteProperty() {
 			alert('deleted')
diff --git a/src/components/properties/PropertyText.vue b/src/components/properties/PropertyText.vue
index cc58a68b..78baa7a8 100644
--- a/src/components/properties/PropertyText.vue
+++ b/src/components/properties/PropertyText.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="propModel" class="contact-details-property">
+	<div v-if="propModel" class="contact-details-property grid-span-1">
 		<!-- type selector -->
 		<multiselect v-if="propModel.options" v-model="selectType"
 			:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
@@ -57,7 +57,7 @@ export default {
 			default: () => {}
 		},
 		value: {
-			type: [Array, String],
+			type: [String],
 			default: ''
 		}
 	},
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index b8deb924..d1243cfc 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -28,12 +28,13 @@ const properties = {
 	n: {
 		readableName: t('contacts', 'Detailed name'),
 		readableValues: [
-			t('contacts', 'Prefix'),
+			t('contacts', 'Last name'),
 			t('contacts', 'First name'),
 			t('contacts', 'Additional names'),
-			t('contacts', 'Last name'),
+			t('contacts', 'Prefix'),
 			t('contacts', 'Suffix')
 		],
+		displayOrder: [3, 1, 2, 0, 4],
 		defaultValue: {
 			value: ['', '', '', '', '']
 		},
@@ -66,12 +67,14 @@ const properties = {
 		readableName: t('contacts', 'Address'),
 		readableValues: [
 			t('contacts', 'Post office box'),
+			t('contacts', 'Extended address'),
 			t('contacts', 'Address'),
-			t('contacts', 'Postal code'),
 			t('contacts', 'City'),
 			t('contacts', 'State or province'),
+			t('contacts', 'Postal code'),
 			t('contacts', 'Country')
 		],
+		displayOrder: [0, 2, 1, 5, 3, 4, 6],
 		icon: 'icon-address',
 		defaultValue: {
 			value: ['', '', '', '', '', '', ''],
diff --git a/src/store/FakeName.vcf b/src/store/FakeName.vcf
index f446cd64..747a1f2d 100644
--- a/src/store/FakeName.vcf
+++ b/src/store/FakeName.vcf
@@ -1457,6 +1457,7 @@ VERSION:3.0
 N:Snorrason;Aðalbjörn;;Mr.;
 URL:http://google.com
 FN:Aðalbjörn Snorrason
+UID:1vvc54ds156vv1fv156fd16
 NICKNAME:Shaltarea
 BDAY;VALUE=text:7/31/1950
 GENDER;TYPE=HOME:male
@@ -1469,6 +1470,9 @@ EMAIL;TYPE=HOME,pref:AalbjornSnorrason@einrot.com
 CATEGORIES:Family
 TEL;TYPE=VOICE,HOME;PREF=1;VALUE=text:021 511 81 18
 ADR;TYPE=home:;;Sédeilles;;1554;Switzerland
+ADR;GEO="geo:12.3457,78.910";LABEL="Mr. John Q. Public, Esq.
+ Mail Drop: TNE QB\n123 Main Street\nAny Town, CA  91921-1234
+ U.S.A.":;;123 Main Street;Any Town;CA;91921-1234;U.S.A.
 END:VCARD
 BEGIN:VCARD
 VERSION:3.0
@@ -2703,11 +2707,13 @@ TEL;TYPE=VOICE,HOME;VALUE=text:94 32 06
 ADR;TYPE=HOME:;;Ilulissat;QA;3952;Greenland
 END:VCARD
 BEGIN:VCARD
-VERSION:3.0
+VERSION:4.0
 N:McIntosh;Abdul;;Mr.;
 FN:Abdul McIntosh
 NICKNAME:Lifen1934
 BDAY;VALUE=text:7/31/1934
+ANNIVERSARY:19960415
+REV:19951031T222710Z
 GENDER:male
 ORG:Penn Fruit;
 TITLE:Medical social worker