Combine bday and deathdate

src/components/ContactDetails.vue

@@ -48,7 +48,7 @@
 				<!-- org, title -->
 				<template #subtitle>
 					<template v-if="isReadOnly">
 						<span v-html="formattedSubtitle" />
 					</template>
 					<template v-else>
 						<input id="contact-title"
@@ -88,7 +88,7 @@
 									<IconAccount :size="20" />
 								</template>
 							</ActionButton>
 							<ActionLink v-for="emailAddress in emailAddressList"
 								:key="emailAddress"
 								class="quick-action"
 								:href="'mailto:' + emailAddress">
@@ -252,6 +252,20 @@
 					<!-- properties iteration -->
 					<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
 
+					<!-- Special handling for lifeEvents -->
+					<div v-if="name === 'lifeEvents'" class="life-events-group">
+						<ContactDetailsProperty v-for="(property, index) in properties"
+							:key="`${index}-${contact.key}-${property.name}`"
+							:is-first-property="index===0"
+							:is-last-property="index === properties.length - 1"
+							:property="property"
+							:contact="contact"
+							:local-contact="localContact"
+							:contacts="contacts"
+							:bus="bus"
+							:is-read-only="isReadOnly" />
+					</div>
+
 					<div v-for="(properties, name) in groupedProperties"
 						:key="name">
 						<ContactDetailsProperty v-for="(property, index) in properties"
@@ -356,18 +370,18 @@
 import { getSVG } from '@shortcm/qr-image/lib/svg'
 import mitt from 'mitt'
 import {
-	NcActions as Actions,
+	isMobile,
 	NcActionButton as ActionButton,
 	NcActionLink as ActionLink,
+	NcActions as Actions,
 	NcAppContentDetails as AppContentDetails,
+	NcButton,
 	NcEmptyContent as EmptyContent,
-	NcModal as Modal,
-	NcSelect,
+	NcEmptyContent,
 	NcLoadingIcon as IconLoading,
-	NcButton,
+	NcModal as Modal,
 	NcRelatedResourcesPanel,
-	isMobile,
-	NcEmptyContent,
+	NcSelect,
 } from '@nextcloud/vue'
 import IconContact from 'vue-material-design-icons/AccountMultiple.vue'
 import IconDownload from 'vue-material-design-icons/Download.vue'
@@ -575,6 +589,15 @@
 						return list
 					}
 
+					// Group bday and deathdate together under 'lifeEvents'
+					if (property.name === 'bday' || property.name === 'deathdate' || property.name === 'anniversary') {
+						if (!list.lifeEvents) {
+							list.lifeEvents = []
+						}
+						list.lifeEvents.push(property)
+						return list
+					}
+
 					// Init if needed
 					if (!list[property.name]) {
 						list[property.name] = []
@@ -954,7 +977,7 @@
 		/**
 		 *  Update this.localContact and set this.fixed
 		 *
 		 * @param {Contact} contact the contact to clone
 		 */
 		async updateLocalContact(contact) {
 			// create empty contact and copy inner data
@@ -1005,7 +1028,7 @@
 		/**
 		 * Should display the property
 		 *
 		 * @param {Property} property the property to check
 		 * @return {boolean}
 		 */
 		canDisplay(property) {

src/components/Properties/PropertyTitle.vue

@@ -10,7 +10,7 @@
 		</div>
 
 		<h3 class="property__value">
-			{{ readableName }}
+			{{ displayName }}
 		</h3>
 
 		<div class="property__actions">
@@ -71,6 +71,15 @@
 			required: false,
 		},
 	},
+	computed: {
+		displayName() {
+			if (this.property.name === 'bday' || this.property.name === 'deathdate' || this.property.name === 'anniversary') {
+				return this.t('contacts', 'Personal dates')
+			}
+
+			return this.readableName
+		},
+	},
 	methods: {
 		/**
 		 * Add prop of type id