feat(contacts): add add-prop button direct in prop

Signed-off-by: Johannes Merkel <mail@johannesgge.de>

8 files changed, 83 insertions, 9 deletions

diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index b6f8c5c1..8ff2df2d 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -41,7 +41,7 @@
 						:key="option.id"
 						class="action--primary"
 						:close-after-click="true"
-						@click.prevent="addProp({id: option.id})">
+						@click.prevent="addProp(option.id)">
 						<template #icon>
 							<PropertyTitleIcon :icon="option.icon" />
 						</template>
@@ -69,7 +69,7 @@
 						:key="option.id"
 						class="action--primary"
 						:close-after-click="true"
-						@click.prevent="addProp({id: option.id})">
+						@click.prevent="addProp(option.id)">
 						<template #icon>
 							<PropertyTitleIcon :icon="option.icon" />
 						</template>
@@ -190,14 +190,22 @@ export default {
 				}).sort((a, b) => a.name.localeCompare(b.name))
 		},
 	},
+
+	created() {
+		this.bus.$on('add-prop', this.addProp)
+	},
+
+	destroyed() {
+		this.bus.$off('add-prop', this.addProp)
+	},
+
 	methods: {
 		/**
 		 * Add a new prop to the contact
 		 *
-		 * @param {object} data destructuring object
-		 * @param {string} data.id the id of the property. e.g fn
+		 * @param {string} id the id of the property. e.g fn
 		 */
-		async addProp({ id }) {
+		async addProp(id) {
 			if (this.usedProperties.includes(id) && !this.properties[id].multiple) {
 				this.bus.$emit('focus-prop', id)
 				return
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index a3052532..e9282ddf 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -39,6 +39,8 @@
 		:prop-type="propType"
 		:options="sortedModelOptions"
 		:is-read-only="isReadOnly"
+		:bus="bus"
+		:is-multiple="isMultiple"
 		@delete="onDelete"
 		@resize="onResize"
 		@update="updateContact" />
@@ -129,8 +131,14 @@ export default {
 		properties() {
 			return rfcProps.properties
 		},
-		fieldOrder() {
-			return rfcProps.fieldOrder
+
+		/**
+		 * Return if property is multiple
+		 *
+		 * @return {boolean}
+		 */
+		isMultiple() {
+			return this.properties[this.property.name].multiple
 		},
 		isReadOnly() {
 			if (this.contact.addressbook) {
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index 3f2dec1a..6ca0b148 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -24,6 +24,9 @@
 	<div v-if="propModel" class="property">
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:property="property"
+			:is-multiple="isMultiple"
+			:bus="bus"
 			:icon="propModel.icon"
 			:readable-name="propModel.readableName" />
 
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index a4f498a8..ff230cfd 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -25,6 +25,9 @@
 	<div v-if="propModel" class="property property--multiple-text">
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:property="property"
+			:is-multiple="isMultiple"
+			:bus="bus"
 			:icon="propModel.icon"
 			:readable-name="propModel.readableName">
 			<template #actions>
@@ -164,7 +167,7 @@ export default {
 			return !!this.propModel.options
 				|| !!this.selectType
 				|| !this.property.isStructuredValue
-		}
+		},
 	},
 }
 
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index a2bff67a..afcea622 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -25,6 +25,9 @@
 	<div v-if="propModel" class="property">
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:property="property"
+			:is-multiple="isMultiple"
+			:bus="bus"
 			:icon="propModel.icon"
 			:readable-name="propModel.readableName" />
 
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index a531319c..14358887 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -25,6 +25,9 @@
 	<div v-if="propModel" class="property">
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
+			:property="property"
+			:is-multiple="isMultiple"
+			:bus="bus"
 			:icon="propModel.icon"
 			:readable-name="propModel.readableName" />
 
diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue
index 3fcf1e14..9a3b9e9d 100644
--- a/src/components/Properties/PropertyTitle.vue
+++ b/src/components/Properties/PropertyTitle.vue
@@ -31,8 +31,17 @@
 		</h3>
 		<div class="property__actions">
 			<slot name="actions">
+				<Actions v-if="isMultiple" class="property__actions">
+					<ActionButton @click="onAddProp(property.name)">
+						<template #icon>
+							<IconPlus :size="20" />
+						</template>
+						{{ t('contacts', 'Add property of this type') }}
+					</ActionButton>
+				</Actions>
+
 				<!-- empty placeholder to keep the layout -->
-				<div class="property__actions__empty" />
+				<div v-else class="property__actions__empty" />
 			</slot>
 		</div>
 	</div>
@@ -40,9 +49,15 @@
 
 <script>
 import PropertyTitleIcon from './PropertyTitleIcon.vue'
+import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import Actions from '@nextcloud/vue/dist/Components/NcActions.js'
+import IconPlus from 'vue-material-design-icons/Plus.vue'
 export default {
 	name: 'PropertyTitle',
 	components: {
+		IconPlus,
+		Actions,
+		ActionButton,
 		PropertyTitleIcon,
 	},
 	props: {
@@ -56,6 +71,29 @@ export default {
 			default: '',
 			required: true,
 		},
+		property: {
+			type: Object,
+			default: () => {},
+			required: true,
+		},
+		isMultiple: {
+			type: Boolean,
+			default: false,
+		},
+		bus: {
+			type: Object,
+			required: false,
+		},
+	},
+	methods: {
+		/**
+		 * Add prop of type id
+		 *
+		 * @param {string} id type of prop
+		 */
+		onAddProp(id) {
+			this.bus.$emit('add-prop', id)
+		},
 	},
 }
 </script>
diff --git a/src/mixins/PropertyMixin.js b/src/mixins/PropertyMixin.js
index abd06bed..7fc40a06 100644
--- a/src/mixins/PropertyMixin.js
+++ b/src/mixins/PropertyMixin.js
@@ -73,6 +73,14 @@ export default {
 			type: Contact,
 			default: null,
 		},
+		isMultiple: {
+			type: Boolean,
+			default: false,
+		},
+		bus: {
+			type: Object,
+			required: false,
+		},
 	},
 
 	data() {