From 6bd0f8e4090d124418437dfed8350c1cfcd8b9a8 Mon Sep 17 00:00:00 2001
From: David Straub <straub@protonmail.com>
Date: Sun, 15 Oct 2023 17:59:28 +0200
Subject: [PATCH] Display name suffix (fixes #284)

---
 src/components/GrampsjsAssociations.js      | 11 ++--------
 src/components/GrampsjsChromosomeBrowser.js |  5 ++---
 src/components/GrampsjsPerson.js            |  3 ++-
 src/util.js                                 | 23 ++++++++++++++-------
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/GrampsjsAssociations.js b/src/components/GrampsjsAssociations.js
index ce3a26ba..5e6b947f 100644
--- a/src/components/GrampsjsAssociations.js
+++ b/src/components/GrampsjsAssociations.js
@@ -3,18 +3,11 @@ import {html} from 'lit'
 import {GrampsjsEditableList} from './GrampsjsEditableList.js'
 import './GrampsjsFormEditAssociation.js'
 
-import {fireEvent} from '../util.js'
+import {personDisplayName, fireEvent} from '../util.js'
 
 import '@material/mwc-icon'
 import '@material/mwc-list/mwc-list-item'
 
-function _formatName(person) {
-  const first = person?.primary_name?.first_name || ''
-  const surnameList = person?.primary_name?.surname_list || []
-  const last = surnameList.length === 0 ? '' : surnameList[0]?.surname || ''
-  return `${first} ${last}`
-}
-
 export class GrampsjsAssociations extends GrampsjsEditableList {
   static get properties() {
     return {
@@ -29,7 +22,7 @@ export class GrampsjsAssociations extends GrampsjsEditableList {
         graphic="avatar"
         ?hasMeta="${this.edit}"
         @click="${() => this._handleClick(this.extended[i])}"
-        >${_formatName(this.extended[i])}
+        >${personDisplayName(this.extended[i])}
         <span slot="secondary">${this._(obj.rel)}</span>
         <mwc-icon slot="graphic">group</mwc-icon>
       </mwc-list-item>
diff --git a/src/components/GrampsjsChromosomeBrowser.js b/src/components/GrampsjsChromosomeBrowser.js
index 542727ca..efe7b8eb 100644
--- a/src/components/GrampsjsChromosomeBrowser.js
+++ b/src/components/GrampsjsChromosomeBrowser.js
@@ -10,7 +10,7 @@ import {schemeSet1} from 'd3-scale-chromatic'
 import {sharedStyles} from '../SharedStyles.js'
 import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
 import {ChromosomeBrowser} from '../charts/ChromosomeBrowser.js'
-import {clickKeyHandler} from '../util.js'
+import {clickKeyHandler, personDisplayName} from '../util.js'
 
 class GrampsjsChromosomeBrowser extends GrampsjsTranslateMixin(LitElement) {
   static get styles() {
@@ -127,8 +127,7 @@ class GrampsjsChromosomeBrowser extends GrampsjsTranslateMixin(LitElement) {
     }
     // eslint-disable-next-line prefer-destructuring
     person = person[0]
-    return `${person?.primary_name?.first_name || '...'}
-    ${person?.primary_name?.surname_list?.[0]?.surname || '...'}`
+    return personDisplayName(person)
   }
 
   renderLegend() {
diff --git a/src/components/GrampsjsPerson.js b/src/components/GrampsjsPerson.js
index 9e9a4746..b8a9b2ed 100644
--- a/src/components/GrampsjsPerson.js
+++ b/src/components/GrampsjsPerson.js
@@ -47,6 +47,7 @@ export class GrampsjsPerson extends GrampsjsObject {
       return ''
     }
     const surname = this.data.profile.name_surname || html`&hellip;`
+    const suffix = this.data.profile.name_suffix || ''
     let given = this.data.profile.name_given || html`&hellip;`
     const call = this.data?.primary_name?.call
     const callIndex = call ? given.search(call) : -1
@@ -56,7 +57,7 @@ export class GrampsjsPerson extends GrampsjsObject {
               >${given.substr(callIndex, call.length)}</span
             >${given.substr(callIndex + call.length)}`
         : given
-    return html`${given} ${surname}`
+    return html`${given} ${surname} ${suffix}`
   }
 
   _renderBirth() {
diff --git a/src/util.js b/src/util.js
index 3d3663f5..db0836ec 100644
--- a/src/util.js
+++ b/src/util.js
@@ -25,7 +25,21 @@ export function translate(strings, s) {
 export function personTitleFromProfile(personProfile) {
   return `${personProfile.name_given || '…'} ${
     personProfile.name_surname || '…'
-  }`
+  } ${personProfile.name_suffix || ''}`.trim()
+}
+
+function displaySurname(surname) {
+  return `${surname.prefix} ${surname.surname} ${surname.connector}`.trim()
+}
+
+export function personDisplayName(person, options = {givenfirst: true}) {
+  const suffix = person.primary_name?.suffix ?? ''
+  const given = person.primary_name?.first_name ?? '…'
+  const surname =
+    person.primary_name.surname_list?.map(displaySurname)?.join(' ') ?? '…'
+  return options.givenfirst
+    ? `${given} ${surname} ${suffix}`.trim()
+    : `${surname}, ${given} ${suffix}`.trim()
 }
 
 export function familyTitleFromProfile(familyProfile) {
@@ -216,12 +230,7 @@ export const objectTypeToEndpoint = {
 export function objectDescription(type, obj, strings) {
   switch (type) {
     case 'person':
-      return html`${obj?.profile?.name_given ||
-      obj?.primary_name?.first_name ||
-      html`&hellip;`}
-      ${obj?.profile?.name_surname ||
-      obj?.primary_name?.surname_list?.[0]?.surname ||
-      html`&hellip;`}`
+      return personDisplayName(obj)
     case 'family':
       return html`${familyTitleFromProfile(obj.profile || {}) || type}`
     case 'event':