diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ContactDetails/ContactDetailsProperty.vue | 7 | ||||
| -rw-r--r-- | src/components/Properties/PropertyGroups.vue | 5 | ||||
| -rw-r--r-- | src/components/Properties/PropertyMultipleText.vue | 36 | ||||
| -rw-r--r-- | src/store/FakeName.vcf | 3 |
4 files changed, 39 insertions, 12 deletions
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue index fa547d40..dd352517 100644 --- a/src/components/ContactDetails/ContactDetailsProperty.vue +++ b/src/components/ContactDetails/ContactDetailsProperty.vue @@ -24,8 +24,8 @@ <!-- If not in the rfcProps then we don't want to display it --> <component v-if="propModel && propType !== 'unknown'" :is="componentInstance" :select-type.sync="selectType" :prop-model="propModel" :value.sync="value" :is-first-property="isFirstProperty" - :is-last-property="isLastProperty" :class="{'property--last': isLastProperty}" :contact="contact" - @delete="deleteProp" /> + :property="property" :is-last-property="isLastProperty" :class="{'property--last': isLastProperty}" + :contact="contact" @delete="deleteProp" /> </template> <script> @@ -185,8 +185,9 @@ export default { this.property.isStructuredValue ? this.property.setValues([data]) : this.property.setValues(data) + } else { + this.property.setValue(data) } - this.property.setValue(data) this.$emit('updatedcontact') } }, diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue index 9979733e..be871175 100644 --- a/src/components/Properties/PropertyGroups.vue +++ b/src/components/Properties/PropertyGroups.vue @@ -25,11 +25,14 @@ <div class="property__row"> <div class="property__label">{{ propModel.readableName }}</div> + <!-- 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="multiselect-vue property__value" - @tag="validateGroup" @select="addContactToGroup" @remove="removeContactToGroup"> + @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> <span slot="noResult">{{ t('settings', 'No results') }}</span> diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue index 90d2afde..dcbf080f 100644 --- a/src/components/Properties/PropertyMultipleText.vue +++ b/src/components/Properties/PropertyMultipleText.vue @@ -38,15 +38,32 @@ <!-- no options, empty space --> <div v-else class="property__label">{{ propModel.readableName }}</div> + <!-- show the first input if not --> + <input v-if="!property.isStructuredValue" v-model.trim="localValue[0]" class="property__value" + type="text" @input="updateValue"> + <!-- delete the prop --> <button :title="t('contacts', 'Delete')" class="property__delete icon-delete" @click="deleteProperty" /> </div> - <div v-for="index in propModel.displayOrder" :key="index" class="property__row"> - <div class="property__label">{{ propModel.readableValues[index] }}</div> - <input v-model.trim="localValue[index]" class="property__value" type="text" - @input="updateValue"> - </div> + <!-- force order based on model --> + <template v-if="propModel.displayOrder && propModel.readableValues"> + <div v-for="index in propModel.displayOrder" :key="index" class="property__row"> + <div class="property__label">{{ propModel.readableValues[index] }}</div> + <input v-model.trim="localValue[index]" class="property__value" type="text" + @input="updateValue"> + </div> + </template> + + <!-- no order enforced: just iterate on all the values --> + <template v-else> + <div v-for="(value, index) in localValue" v-if="index > 0" :key="index" + class="property__row"> + <div class="property__label" /> + <input v-model.trim="localValue[index]" class="property__value" type="text" + @input="updateValue"> + </div> + </template> </div> </template> @@ -78,6 +95,11 @@ export default { default: () => [], required: true }, + property: { + type: Object, + default: () => {}, + required: true + }, isFirstProperty: { type: Boolean, default: true @@ -99,9 +121,9 @@ export default { gridLength() { let hasTitle = this.isFirstProperty && this.propModel.icon ? 1 : 0 let isLast = this.isLastProperty + let hasValueNames = this.propModel.readableValues ? 1 : 0 let length = this.propModel.displayOrder ? this.propModel.displayOrder.length : this.value.length - // always have a property__label + one extra space at the end - return 1 + hasTitle + length + isLast + return hasValueNames + hasTitle + length + isLast } }, diff --git a/src/store/FakeName.vcf b/src/store/FakeName.vcf index 0d0fe1a8..98a1ee92 100644 --- a/src/store/FakeName.vcf +++ b/src/store/FakeName.vcf @@ -30,7 +30,8 @@ BEGIN:VCARD VERSION:3.0 N:Cunningham;Liam;;Mr.; FN:Liam Cunningham -NICKNAME;TYPE=work:Begivaing81 +NICKNAME;TYPE=work:Begivaing81,Test +NICKNAME:Pwet BDAY;VALUE=text:5/26/1981 GENDER:male ORG:Central Hardware; |