Display name suffix (fixes #284)

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>

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() {

src/components/GrampsjsPerson.js

@@ -47,6 +47,7 @@ export class GrampsjsPerson extends GrampsjsObject {
       return ''
     }
     const surname = this.data.profile.name_surname || html`…`
+    const suffix = this.data.profile.name_suffix || ''
     let given = this.data.profile.name_given || html`…`
     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() {

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`…`}
-      ${obj?.profile?.name_surname ||
-      obj?.primary_name?.surname_list?.[0]?.surname ||
-      html`…`}`
+      return personDisplayName(obj)
     case 'family':
       return html`${familyTitleFromProfile(obj.profile || {}) || type}`
     case 'event':