Support X-PHONETIC-FIRST-NAME and X-PHONETIC-LAST-NAME

css/Properties/Properties.scss

@@ -199,3 +199,8 @@ $property-ext-padding-right: 8px;
 		margin-right: 0;
 	}
 }
+
+.property + .property.property-x-phonetic-first-name,
+.property + .property.property-x-phonetic-last-name {
+	margin-top: -40px;
+}

src/components/Properties/PropertyText.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
+	<div v-if="propModel" :class="`grid-span-${gridLength} property-${propName}`" class="property">
 		<!-- title if first element -->
 		<PropertyTitle v-if="isFirstProperty && propModel.icon"
 			:icon="propModel.icon"

src/components/Settings/SettingsSortContacts.vue

@@ -57,6 +57,14 @@ export default {
 					label: t('contacts', 'Last name'),
 					key: 'lastName',
 				},
+				{
+					label: t('contacts', 'Phonetic first name'),
+					key: 'phoneticFirstName',
+				},
+				{
+					label: t('contacts', 'Phonetic last name'),
+					key: 'phoneticLastName',
+				},
 				{
 					label: t('contacts', 'Display name'),
 					key: 'displayName',

src/models/contact.js

@@ -398,6 +398,7 @@ export default class Contact {
 		if (orderKey && n && !isEmpty(n)) {
 			switch (orderKey) {
 			case 'firstName':
+			case 'phoneticFirstName':
 				// Stevenson;John;Philip,Paul;Dr.;Jr.,M.D.,A.C.P.
 				// -> John Stevenson
 				return n.slice(0, 2).reverse().join(' ')
@@ -459,6 +460,36 @@ export default class Contact {
 		return this.displayName
 	}
 
+	/**
+	 * Return the phonetic first name if exists
+	 * Returns the first name or displayName otherwise
+	 *
+	 * @readonly
+	 * @memberof Contact
+	 * @returns {string} phoneticFirstName|firstName|displayName
+	 */
+	get phoneticFirstName() {
+		if (this.vCard.hasProperty('x-phonetic-first-name')) {
+			return this.vCard.getFirstPropertyValue('x-phonetic-first-name')
+		}
+		return this.firstName
+	}
+
+	/**
+	 * Return the phonetic last name if exists
+	 * Returns the displayName otherwise
+	 *
+	 * @readonly
+	 * @memberof Contact
+	 * @returns {string} lastName|displayName
+	 */
+	get phoneticLastName() {
+		if (this.vCard.hasProperty('x-phonetic-last-name')) {
+			return this.vCard.getFirstPropertyValue('x-phonetic-last-name')
+		}
+		return this.lastName
+	}
+
 	/**
 	 * Return all the properties as Property objects
 	 *

src/models/rfcProps.js

@@ -60,6 +60,14 @@ const properties = {
 			ActionCopyNtoFN,
 		],
 	},
+	'x-phonetic-first-name': {
+		readableName: t('contacts', 'Phonetic first name'),
+		force: 'text',
+	},
+	'x-phonetic-last-name': {
+		readableName: t('contacts', 'Phonetic last name'),
+		force: 'text',
+	},
 	note: {
 		readableName: t('contacts', 'Notes'),
 		icon: 'icon-rename',
@@ -340,6 +348,8 @@ if (locales.length > 0) {
 const fieldOrder = [
 	'org',
 	'title',
+	'x-phonetic-first-name',
+	'x-phonetic-last-name',
 	'tel',
 	'email',
 	'adr',

src/store/addressbooks.js

@@ -345,7 +345,8 @@ const actions = {
 	 */
 	async getContactsFromAddressBook(context, { addressbook }) {
 		return addressbook.dav
-			.findAllAndFilterBySimpleProperties(['EMAIL', 'UID', 'CATEGORIES', 'FN', 'ORG', 'N'])
+			.findAllAndFilterBySimpleProperties(['EMAIL', 'UID', 'CATEGORIES', 'FN', 'ORG', 'N',
+				'X-PHONETIC-FIRST-NAME', 'X-PHONETIC-LAST-NAME'])
 			.then((response) => {
 				// We don't want to lose the url information
 				// so we need to parse one by one