diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-31 11:55:57 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-31 11:55:57 +0200 |
commit | 33d002b2d98fa4267d53b189bc3a4b957e8bbe38 (patch) | |
tree | 20bede4aecd03481b4c151bf162a99cbc2016408 /src | |
parent | 06f4956f5e6f850ac77e20e4bbda4c77858cbadf (diff) |
New property component
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContactDetails.vue | 12 | ||||
-rw-r--r-- | src/components/ContactDetails/ContactDetailsAddNewProp.vue | 68 |
2 files changed, 76 insertions, 4 deletions
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index cae7cd9c..1d975c14 100644 --- a/src/components/ContactDetails.vue +++ b/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: { diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue new file mode 100644 index 00000000..86eb4b77 --- /dev/null +++ b/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> |