Cleanup code with Property Mixin

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

1 files changed, 15 insertions, 60 deletions

diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index b67514f0..7c9fd99e 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -30,8 +30,8 @@
 			<!-- type selector -->
 			<multiselect v-if="propModel.options" v-model="localType"
 				:options="options" :searchable="false" :placeholder="t('contacts', 'Select type')"
-				class="property__label" track-by="id" label="name"
-				@input="updateType" />
+				:disabled="isReadOnly" class="property__label" track-by="id"
+				label="name" @input="updateType" />
 
 			<!-- if we do not support any type on our model but one is set anyway -->
 			<div v-else-if="selectType" class="property__label">{{ selectType.name }}</div>
@@ -40,23 +40,26 @@
 			<div v-else class="property__label">{{ propModel.readableName }}</div>
 
 			<!-- delete the prop -->
-			<button :title="t('contacts', 'Delete')" class="property__delete icon-delete" @click="deleteProperty" />
+			<button v-if="!isReadOnly" :title="t('contacts', 'Delete')" class="property__delete icon-delete"
+				@click="deleteProperty" />
 
 			<!-- textarea for note -->
 			<textarea v-if="propName === 'note'" id="textarea" ref="textarea"
-				v-model.trim="localValue" :type="type" class="property__value"
-				@input="updateValue" @mousemove="resizeGrid" @keypress="resizeGrid" />
+				v-model.trim="localValue" :type="type" :readonly="isReadOnly"
+				class="property__value"
+				@input="updateValueNoDebounce" @mousemove="resizeGrid" @keypress="resizeGrid" />
 
 			<!-- OR default to input -->
 			<input v-else v-model.trim="localValue" :type="type"
-				class="property__value" @input="updateValue">
+				:readonly="isReadOnly" class="property__value" @input="updateValue">
 		</div>
 	</div>
 </template>
 
 <script>
-import PropertyTitle from './PropertyTitle'
 import debounce from 'debounce'
+import PropertyMixin from 'Mixins/PropertyMixin'
+import PropertyTitle from './PropertyTitle'
 
 export default {
 	name: 'PropertyText',
@@ -65,16 +68,9 @@ export default {
 		PropertyTitle
 	},
 
+	mixins: [PropertyMixin],
+
 	props: {
-		selectType: {
-			type: [Object, Boolean],
-			default: () => {}
-		},
-		propModel: {
-			type: Object,
-			default: () => {},
-			required: true
-		},
 		propName: {
 			type: String,
 			default: 'text',
@@ -89,25 +85,11 @@ export default {
 			type: String,
 			default: '',
 			required: true
-		},
-		options: {
-			type: Array,
-			default: () => []
-		},
-		isFirstProperty: {
-			type: Boolean,
-			default: true
-		},
-		isLastProperty: {
-			type: Boolean,
-			default: true
 		}
 	},
 
 	data() {
 		return {
-			localValue: this.value,
-			localType: this.selectType,
 			// the textarea additionnal height compared to the
 			// default input text. Min is 2 grid height
 			noteHeight: 1
@@ -136,20 +118,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
-		}
-	},
-
 	mounted() {
 		this.resizeGrid()
 	},
@@ -181,23 +149,10 @@ export default {
 		 *
 		 * @param {Object} e event
 		 */
-		updateValue(e) {
+		updateValueNoDebounce(e) {
 			this.resizeGrid(e)
-			this.updateValueDebounced(e)
-		},
-
-		/**
-		 * Debounce and send update event to parent
-		 */
-		updateValueDebounced: debounce(function(e) {
-			// https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
-			this.$emit('update:value', this.localValue)
-		}, 500),
-
-		updateType: debounce(function(e) {
-			// https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
-			this.$emit('update:selectType', this.localType)
-		}, 500)
+			this.updateValue(e)
+		}
 	}
 }
 </script>