Always show groups

Fix #727

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

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
 		 *

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

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()
 		},
 
 		/**

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 []
 	}

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',