diff --git a/src/components/GrampsjsChildren.js b/src/components/GrampsjsChildren.js index 0bf283a9..14634013 100644 --- a/src/components/GrampsjsChildren.js +++ b/src/components/GrampsjsChildren.js @@ -38,7 +38,7 @@ export class GrampsjsChildren extends GrampsjsEditableTable { row (obj, i, arr) { return html` this._handleClick(obj.gramps_id)} + @click=${() => this._handleClick(this.profile[i].gramps_id)} class="${obj.gramps_id === this.highlightId ? 'highlight' : ''}" > ${genderIcon(this.profile[i]?.sex)} diff --git a/src/components/GrampsjsObject.js b/src/components/GrampsjsObject.js index 6dd28fe3..5ad573ab 100644 --- a/src/components/GrampsjsObject.js +++ b/src/components/GrampsjsObject.js @@ -257,7 +257,8 @@ export class GrampsjsObject extends LitElement { grampsId="${this.data.gramps_id}" .strings=${this.strings} ?edit=${this.edit} - .familyList=${this.data?.extended?.family_list || []} + .familyList=${this.data?.extended?.families || []} + .parentFamilyList=${this.data?.extended?.parent_families || []} .families=${this.data?.profile?.families || []} .primaryParentFamily=${this.data?.profile?.primary_parent_family || {}} .otherParentFamilies=${this.data?.profile?.other_parent_families || []} diff --git a/src/components/GrampsjsRelationships.js b/src/components/GrampsjsRelationships.js index 79513c37..87031507 100644 --- a/src/components/GrampsjsRelationships.js +++ b/src/components/GrampsjsRelationships.js @@ -7,8 +7,7 @@ import {renderPerson} from '../util.js' import './GrampsjsChildren.js' export class GrampsjsRelationships extends LitElement { - - static get styles() { + static get styles () { return [ sharedStyles, css` @@ -24,28 +23,30 @@ export class GrampsjsRelationships extends LitElement { ] } - static get properties() { + static get properties () { return { grampsId: {type: String}, familyList: {type: Array}, families: {type: Array}, + parentFamilies: {type: Array}, primaryParentFamily: {type: Object}, otherParentFamilies: {type: Array}, strings: {type: Object} } } - constructor() { + constructor () { super() this.grampsId = '' this.familyList = [] + this.parentFamilyList = [] this.families = [] this.otherParentFamilies = [] this.primaryParentFamily = {} this.strings = {} } - render() { + render () { return html` ${this._renderFamily(this.primaryParentFamily, this._('Parents'), this._('Siblings'))} ${this.otherParentFamilies.map((familyProfile, i) => { @@ -57,23 +58,27 @@ export class GrampsjsRelationships extends LitElement { ` } - _renderFamily(familyProfile, parentTitle, childrenTitle) { + _renderFamily (familyProfile, parentTitle, childrenTitle) { if (Object.keys(familyProfile).length === 0) { return html`` } return html`

${parentTitle} ${this._renderFamilyBtn(familyProfile.gramps_id)}

- ${familyProfile?.father?.gramps_id === this.grampsId || Object.keys(familyProfile?.father || {}).length === 0 ? '' : html` + ${familyProfile?.father?.gramps_id === this.grampsId || Object.keys(familyProfile?.father || {}).length === 0 + ? '' + : html`

${renderPerson(familyProfile.father)}

`} - ${familyProfile?.mother?.gramps_id === this.grampsId || Object.keys(familyProfile?.mother || {}).length === 0 ? '' : html` + ${familyProfile?.mother?.gramps_id === this.grampsId || Object.keys(familyProfile?.mother || {}).length === 0 + ? '' + : html`

${renderPerson(familyProfile.mother)}

`} ${this._renderChildren(familyProfile, childrenTitle)} ` } - _renderFamilyBtn(grampsId) { + _renderFamilyBtn (grampsId) { return html` ` } - _handleButtonClick(grampsId) { + _handleButtonClick (grampsId) { this.dispatchEvent(new CustomEvent('nav', { - bubbles: true, composed: true, detail: { + bubbles: true, + composed: true, + detail: { path: `family/${grampsId}` } })) } - _renderChildren(obj, childrenTitle) { + _renderChildren (profile, childrenTitle) { + const allFamilies = [...this.familyList, ...this.parentFamilyList] + const [family] = allFamilies.filter(obj => obj.handle === profile.handle) return html` - ${obj?.children?.length ? html` + ${profile?.children?.length + ? html`

${childrenTitle}

- ` : ''} + ` + : ''} ` } - _(s) { + _ (s) { if (s in this.strings) { return this.strings[s] }