diff options
author | Daniel <mail@danielkesselberg.de> | 2023-06-01 11:23:38 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-06-01 11:23:38 +0200 |
commit | 830f17933904384a1ec5e78e9a3b2d5fba463cd5 (patch) | |
tree | 450d515cc7a7fef1d8a56149e5a34b6ecae609a6 | |
parent | bf01de83fd643fc16b80d92f220d49ed7915dec0 (diff) | |
parent | b276d2a96fd802de4b3aeba34b093558256ae688 (diff) |
Merge pull request #3422 from nextcloud/enhanc/hide-empty-properties
Hide empty properties in view mode
-rw-r--r-- | src/components/ContactDetails.vue | 2 | ||||
-rw-r--r-- | src/components/Properties/PropertyMultipleText.vue | 40 | ||||
-rw-r--r-- | src/components/Properties/PropertySelect.vue | 5 | ||||
-rw-r--r-- | src/components/Properties/PropertyText.vue | 5 |
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' |