Cleanup code with Property Mixin

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

1 files changed, 8 insertions, 17 deletions

diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index b4de6185..15677320 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -29,9 +29,9 @@
 			<!-- 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" tag-placeholder="create" class="property__value"
-				@input="updateValue" @tag="validateGroup" @select="addContactToGroup"
-				@remove="removeContactToGroup">
+				:close-on-select="false" :readonly="isReadOnly" 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>
@@ -63,6 +63,11 @@ export default {
 			type: Contact,
 			default: null,
 			required: true
+		},
+		// Is it read-only?
+		isReadOnly: {
+			type: Boolean,
+			default: false
 		}
 	},
 
@@ -88,20 +93,6 @@ export default {
 		}
 	},
 
-	watch: {
-		/**
-		 * Since we're updating a local data based on the value prop,
-		 * we need to make sure to update the local data on pop change
-		 * TODO: check if this create performance drop
-		 */
-		value: function() {
-			this.localValue = this.value
-		},
-		selectType: function() {
-			this.localType = this.selectType
-		}
-	},
-
 	methods: {
 
 		/**