Merge pull request #3422 from nextcloud/enhanc/hide-empty-properties

Hide empty properties in view mode

4 files changed, 32 insertions, 20 deletions

diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 8c0661b4..d9f7a7b1 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -226,6 +226,7 @@
 			<section v-else class="contact-details">
 				<!-- properties iteration -->
 				<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
+
 				<div v-for="(properties, name) in groupedProperties"
 					:key="name">
 					<ContactDetailsProperty v-for="(property, index) in properties"
@@ -569,6 +570,7 @@ export default {
 
 			return ''
 		},
+
 	},
 
 	watch: {
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 3c17e80d..c2f725ba 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -95,16 +95,18 @@
 			<div v-for="index in propModel.displayOrder"
 				:key="index"
 				class="property__row">
-				<div class="property__label">
-					<span>{{ propModel.readableValues[index] }}</span>
-				</div>
-				<div class="property__value">
-					<input v-model.trim="localValue[index]"
-						:readonly="isReadOnly"
-						type="text"
-						@input="updateValue">
-				</div>
-				<div class="property__actions" />
+				<template v-if="(isReadOnly && localValue[index]) || !isReadOnly">
+					<div class="property__label">
+						<span>{{ propModel.readableValues[index] }}</span>
+					</div>
+					<div class="property__value">
+						<input v-model.trim="localValue[index]"
+							:readonly="isReadOnly"
+							type="text"
+							@input="updateValue">
+					</div>
+					<div class="property__actions" />
+				</template>
 			</div>
 		</template>
 
@@ -113,14 +115,16 @@
 			<div v-for="(value, index) in filteredValue"
 				:key="index"
 				class="property__row">
-				<div class="property__label" />
-				<div class="property__value">
-					<input v-model.trim="filteredValue[index]"
-						:readonly="isReadOnly"
-						type="text"
-						@input="updateValue">
-				</div>
-				<div class="property__actions" />
+				<template v-if="(isReadOnly && filteredValue[index]) || !isReadOnly">
+					<div class="property__label" />
+					<div class="property__value">
+						<input v-model.trim="filteredValue[index]"
+							:readonly="isReadOnly"
+							type="text"
+							@input="updateValue">
+					</div>
+					<div class="property__actions" />
+				</template>
 			</div>
 		</template>
 	</div>
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index f5324cfd..b402db49 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -22,7 +22,7 @@
   -->
 
 <template>
-	<div v-if="propModel" class="property">
+	<div v-if="propModel && showProperty" class="property">
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
 			:property="property"
@@ -97,6 +97,9 @@ export default {
 	},
 
 	computed: {
+		showProperty() {
+			return (this.isReadOnly && this.localValue) || !this.isReadOnly
+		},
 		/**
 		 * Store getters filtered and mapped to usable object
 		 * This is the list of addressbooks that are available to write
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index 3951d3ac..c7a85958 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -22,7 +22,7 @@
   -->
 
 <template>
-	<div v-if="propModel" class="property">
+	<div v-if="propModel && showProperty" class="property">
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
 			:property="property"
@@ -139,6 +139,9 @@ export default {
 	},
 
 	computed: {
+		showProperty() {
+			return (this.isReadOnly && this.localValue) || !this.isReadOnly
+		},
 		inputmode() {
 			if (this.propName === 'tel') {
 				return 'tel'