diff options
| -rw-r--r-- | src/components/ContactDetails.vue | 34 | ||||
| -rw-r--r-- | src/components/ContactDetails/ContactDetailsProperty.vue | 6 | ||||
| -rw-r--r-- | src/components/Properties/PropertyGroups.vue | 16 | ||||
| -rw-r--r-- | src/models/contact.js | 1 | ||||
| -rw-r--r-- | src/models/rfcProps.js | 3 |
5 files changed, 44 insertions, 16 deletions
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue index 7ed64639..b08b1abe 100644 --- a/src/components/ContactDetails.vue +++ b/src/components/ContactDetails.vue @@ -109,6 +109,11 @@ <property-select :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true" :is-last-property="true" :property="{}" class="property--addressbooks property--last" /> + <!-- Groups always visible. --> + <property-groups :prop-model="groupsModel" :value.sync="groups" :contact="contact" + :is-read-only="isReadOnly" :is-first-property="true" :is-last-property="true" + class="property--addressbooks property--last" /> + <!-- new property select --> <add-new-prop v-if="!isReadOnly" :contact="contact" /> </section> @@ -283,6 +288,35 @@ export default { } }, + groupsModel() { + return { + readableName: t('contacts', 'Groups') + // icon: 'icon-address-book' + } + }, + + /** + * Usable groups object linked to the local contact + * + * @param {string[]} data An array of groups + * @returns {Array} + */ + groups: { + get: function() { + return this.contact.groups + }, + set: function(data) { + console.log(data); + let property = this.contact.vCard.getFirstProperty('categories') + if (!property) { + // Ical.js store comma separated by an Array of array of string + property = this.contact.vCard.addPropertyWithValue('categories', [data]) + } + property.setValues(data) + this.updateContact() + } + }, + /** * Store getters filtered and mapped to usable object * diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue index 4191ef16..f5de4fd5 100644 --- a/src/components/ContactDetails/ContactDetailsProperty.vue +++ b/src/components/ContactDetails/ContactDetailsProperty.vue @@ -38,7 +38,6 @@ import Contact from 'Models/contact' import PropertyText from 'Components/Properties/PropertyText' import PropertyMultipleText from 'Components/Properties/PropertyMultipleText' import PropertyDateTime from 'Components/Properties/PropertyDateTime' -import propertyGroups from 'Components/Properties/PropertyGroups' import PropertySelect from 'Components/Properties/PropertySelect' export default { @@ -68,11 +67,6 @@ export default { computed: { // dynamically load component based on property type componentInstance() { - // groups - if (this.propName === 'categories') { - return propertyGroups - } - // dynamic matching if (this.property.isMultiValue && this.propType === 'text') { return PropertyMultipleText diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue index 15677320..70407a00 100644 --- a/src/components/Properties/PropertyGroups.vue +++ b/src/components/Properties/PropertyGroups.vue @@ -28,10 +28,11 @@ <!-- multiselect taggable groups with a limit to 3 groups shown --> <multiselect v-model="localValue" :options="groups" :placeholder="t('contacts', 'Add contact in group')" - :limit="3" :multiple="true" :taggable="true" - :close-on-select="false" :readonly="isReadOnly" tag-placeholder="create" - class="property__value" @input="updateValue" @tag="validateGroup" - @select="addContactToGroup" @remove="removeContactToGroup"> + :multiple="true" :taggable="true" :close-on-select="false" + :readonly="isReadOnly" :tag-width="60" + tag-placeholder="create" class="property__value" + @input="updateValue" @tag="validateGroup" @select="addContactToGroup" + @remove="removeContactToGroup"> <!-- show how many groups are hidden and add tooltip --> <span v-tooltip.auto="formatGroupsTitle" slot="limit" class="multiselect__limit">+{{ localValue.length - 3 }}</span> @@ -98,7 +99,7 @@ export default { /** * Debounce and send update event to parent */ - updateValue: debounce(function(e) { + updateValue: debounce(function() { // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier this.$emit('update:value', this.localValue) }, 500), @@ -108,11 +109,12 @@ export default { * * @param {String} groupName the group name */ - addContactToGroup(groupName) { - this.$store.dispatch('addContactToGroup', { + async addContactToGroup(groupName) { + await this.$store.dispatch('addContactToGroup', { contact: this.contact, groupName }) + this.updateValue() }, /** diff --git a/src/models/contact.js b/src/models/contact.js index c2a5bfcc..3f985b90 100644 --- a/src/models/contact.js +++ b/src/models/contact.js @@ -166,6 +166,7 @@ export default class Contact { let groupsProp = this.vCard.getFirstProperty('categories') if (groupsProp) { return groupsProp.getValues() + .filter(group => group !== '') } return [] } diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js index 3f7efe53..3a21b250 100644 --- a/src/models/rfcProps.js +++ b/src/models/rfcProps.js @@ -88,9 +88,6 @@ const properties = { { id: 'OTHER', name: t('contacts', 'Other') } ] }, - categories: { - readableName: t('contacts', 'Groups') - }, bday: { readableName: t('contacts', 'Birthday'), icon: 'icon-calendar-dark', |