New property component

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

src/components/ContactDetails.vue

@@ -82,13 +82,15 @@
 			<section class="contact-details">
 
 				<!-- properties iteration -->
-				<contact-details-property v-for="(property, index) in sortedProperties" :key="index" :index="index"
+				<contact-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" />
+				
+				<add-new-prop :contact="contact" />
 			</section>
 		</template>
 	</div>
@@ -104,7 +106,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'
 
@@ -115,9 +118,10 @@ export default {
 
 	components: {
 		PopoverMenu,
-		ContactDetailsProperty,
+		ContactProperty,
 		PropertySelect,
-		PropertyGroups
+		PropertyGroups,
+		AddNewProp
 	},
 
 	directives: {

src/components/ContactDetails/ContactDetailsAddNewProp.vue

@@ -0,0 +1,68 @@
+<!--
+  - @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-1 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" />
+		</div>
+	</div>
+</template>
+
+<script>
+import rfcProps from '../../models/rfcProps.js'
+import Contact from '../../models/contact'
+
+import Multiselect from 'vue-multiselect'
+
+export default {
+	name: 'ContactDetailsAddNewProp',
+
+	components: {
+		Multiselect
+	},
+
+	props: {
+		contact: {
+			type: Contact,
+			default: null
+		}
+	},
+
+	computed: {
+		availableProperties() {
+			return Object.keys(rfcProps.properties)
+		}
+	},
+
+	methods: {
+		addProp(name) {
+			console.log(name);
+		}
+	}
+}
+</script>