- | ${obj.value} |
-
- ${dateIsEmpty(obj.date)
- ? ''
- : objProfile?.date_str ?? toDate(obj.date?.dateval)}
+ |
+ ${obj.value}
|
-
- ${false // ${this.edit TODO: implement place name edit
- ? this._renderActionBtns(obj.ref, i === 0, i === arr.length - 1)
- : ''}
+ |
+ ${this.profile[i].date_str ?? ''}
|
+ ${this.edit ? this._renderActionBtns(i, true) : ''} |
`
}
+
+ renderAfterTable() {
+ return html`
+ ${this.edit
+ ? html`
+
+ `
+ : ''}
+ ${this.dialogContent}
+ `
+ }
+
+ _handleAdd() {
+ this.dialogContent = html`
+
+
+ `
+ }
+
+ _handleEditClick(obj) {
+ this.dialogContent = html`
+
+
+ `
+ }
+
+ _handlePlaceNameAdd(e) {
+ fireEvent(this, 'edit:action', {
+ action: 'addPlaceName',
+ data: e.detail.data,
+ })
+ e.preventDefault()
+ e.stopPropagation()
+ this.dialogContent = ''
+ }
+
+ _handlePlaceNameUpdate(e, originalObj) {
+ const updatedData = {...originalObj, ...e.detail.data}
+ fireEvent(this, 'edit:action', {
+ action: 'updatePlaceName',
+ data: updatedData,
+ index: this.data.indexOf(originalObj),
+ })
+ e.preventDefault()
+ e.stopPropagation()
+ this.dialogContent = ''
+ }
+
+ _handleCancelDialog() {
+ this.dialogContent = ''
+ }
+
+ _renderActionBtns(index) {
+ return html`
+
+ `
+ }
+
+ _handleActionClick(e, action, index) {
+ fireEvent(this, 'edit:action', {action, index})
+ e.preventDefault()
+ e.stopPropagation()
+ }
}
window.customElements.define('grampsjs-place-names', GrampsjsPlaceNames)
diff --git a/src/mixins/GrampsjsNewPersonMixin.js b/src/mixins/GrampsjsNewPersonMixin.js
new file mode 100644
index 000000000..47071e1b2
--- /dev/null
+++ b/src/mixins/GrampsjsNewPersonMixin.js
@@ -0,0 +1,239 @@
+import {html} from 'lit'
+
+import {makeHandle, dateIsEmpty, emptyDate} from '../util.js'
+
+import '../components/GrampsjsFormSelectObjectList.js'
+import '../components/GrampsjsFormSelectDate.js'
+import '../components/GrampsjsFormName.js'
+import '../components/GrampsjsFormPrivate.js'
+
+const dataDefault = {_class: 'Person', gender: 2, citation_list: []}
+
+export const GrampsjsNewPersonMixin = superClass =>
+ class extends superClass {
+ constructor() {
+ super()
+ this.data = dataDefault
+ }
+
+ gender = {
+ 2: 'Unknown',
+ 1: 'Male',
+ 0: 'Female',
+ }
+
+ renderForm() {
+ return html`
+ ${this._('Name')}
+
+
+ ${this._('Gender')}
+
+ ${Object.keys(this.gender).map(
+ genderConst => html`
+ ${this._(this.gender[genderConst])}
+ `
+ )}
+
+
+ ${this._('Birth Date')}
+
+
+
+
+
+
+ ${this._('Birth Place')}
+
+
+
+ ${this._('Death Date')}
+
+
+
+
+
+
+ ${this._('Death Place')}
+
+
+
+ ${this._renderCitationForm()}
+
+
+
+ `
+ }
+
+ _renderCitationForm() {
+ return html`
+ ${this._('Citation')}
+
+
+ `
+ }
+
+ handleGender(e) {
+ this.data = {...this.data, gender: parseInt(e.target.value, 10)}
+ }
+
+ _handleFormData(e) {
+ super._handleFormData(e)
+ const originalTarget = e.composedPath()[0]
+ if (originalTarget.id === 'primary-name') {
+ this.data = {...this.data, primary_name: e.detail.data}
+ }
+ if (originalTarget.id === 'birth-date') {
+ this.data = {
+ ...this.data,
+ birth: {...this.data.birth, date: e.detail.data ?? emptyDate},
+ }
+ }
+ if (originalTarget.id === 'birth-place-list') {
+ this.data = {
+ ...this.data,
+ birth: {...this.data.birth, place: e.detail.data[0]},
+ }
+ }
+ if (originalTarget.id === 'death-date') {
+ this.data = {
+ ...this.data,
+ death: {...this.data.death, date: e.detail.data ?? emptyDate},
+ }
+ }
+ if (originalTarget.id === 'death-place-list') {
+ this.data = {
+ ...this.data,
+ death: {...this.data.death, place: e.detail.data[0]},
+ }
+ }
+ this.checkFormValidity()
+ }
+
+ checkFormValidity() {
+ let valid = true
+ this.shadowRoot
+ .querySelectorAll('grampsjs-form-select-date')
+ .forEach(element => {
+ if (!element.isValid()) {
+ valid = false
+ }
+ })
+ this.isFormValid = valid
+ }
+
+ _reset() {
+ super._reset()
+ this.data = dataDefault
+ }
+
+ _processedData() {
+ const handlePerson = makeHandle()
+ const handleBirth = makeHandle()
+ const handleDeath = makeHandle()
+ const birthString = this.translateTypeName(false, 'event_types', 'Birth')
+ const deathString = this.translateTypeName(false, 'event_types', 'Death')
+ const {birth, death, ...person} = this.data
+ const hasBirth = birth.place || (birth?.date && !dateIsEmpty(birth.date))
+ const hasDeath = death.place || (death?.date && !dateIsEmpty(death.date))
+ if (!hasBirth && !hasDeath) {
+ return [person]
+ }
+ if (!hasDeath) {
+ return [
+ {
+ ...person,
+ handle: handlePerson,
+ event_ref_list: [{_class: 'EventRef', ref: handleBirth}],
+ birth_ref_index: 0,
+ },
+ {
+ ...birth,
+ _class: 'Event',
+ handle: handleBirth,
+ type: birthString,
+ citation_list: person.citation_list ?? [],
+ private: person.private ?? false,
+ },
+ ]
+ }
+ if (!hasBirth) {
+ return [
+ {
+ ...person,
+ handle: handlePerson,
+ event_ref_list: [{_class: 'EventRef', ref: handleDeath}],
+ death_ref_index: 0,
+ },
+ {
+ ...death,
+ _class: 'Event',
+ handle: handleDeath,
+ type: deathString,
+ citation_list: person.citation_list ?? [],
+ private: person.private ?? false,
+ },
+ ]
+ }
+ return [
+ {
+ ...person,
+ handle: handlePerson,
+ event_ref_list: [
+ {_class: 'EventRef', ref: handleBirth},
+ {_class: 'EventRef', ref: handleDeath},
+ ],
+ birth_ref_index: 0,
+ death_ref_index: 1,
+ },
+ {
+ ...birth,
+ _class: 'Event',
+ handle: handleBirth,
+ type: birthString,
+ citation_list: person.citation_list ?? [],
+ private: person.private ?? false,
+ },
+ {
+ ...death,
+ _class: 'Event',
+ handle: handleDeath,
+ type: deathString,
+ citation_list: person.citation_list ?? [],
+ private: person.private ?? false,
+ },
+ ]
+ }
+ }
diff --git a/src/util.js b/src/util.js
index 64feef093..1e7645903 100644
--- a/src/util.js
+++ b/src/util.js
@@ -33,9 +33,10 @@ export function translate(strings, s) {
}
export function personTitleFromProfile(personProfile) {
- return `${personProfile.name_given || '…'} ${
- personProfile.name_surname || '…'
- } ${personProfile.name_suffix || ''}`.trim()
+ return (
+ personProfile.name_display ||
+ `${personProfile?.name_given || '…'} ${personProfile?.name_surname || '…'}`
+ ).trim()
}
function displaySurname(surname) {
@@ -85,8 +86,10 @@ export function renderPerson(personProfile) {
>person
${personProfile.name_given || '…'}
- ${personProfile.name_surname || '…'}${personProfile.name_display ??
+ `${personProfile.name_given || '…'} ${
+ personProfile.name_surname || '…'
+ }`}
${personProfile?.birth?.date
diff --git a/src/views/GrampsjsViewFamilies.js b/src/views/GrampsjsViewFamilies.js
index 1e2759786..b87c55a2a 100644
--- a/src/views/GrampsjsViewFamilies.js
+++ b/src/views/GrampsjsViewFamilies.js
@@ -65,12 +65,16 @@ export class GrampsjsViewFamilies extends GrampsjsViewObjectsBase {
_formatRow(row) {
const formattedRow = {
grampsId: row.gramps_id,
- father: `${row?.profile?.father?.name_surname || '…'}, ${
- row?.profile?.father?.name_given || '…'
- }`,
- mother: `${row?.profile?.mother?.name_surname || '…'}, ${
- row?.profile?.mother?.name_given || '…'
- }`,
+ father:
+ row?.profile?.father?.name_display ??
+ `${row?.profile?.father?.name_surname || '…'}, ${
+ row?.profile?.father?.name_given || '…'
+ }`,
+ mother:
+ row?.profile?.mother?.name_display ??
+ `${row?.profile?.mother?.name_surname || '…'}, ${
+ row?.profile?.mother?.name_given || '…'
+ }`,
change: prettyTimeDiffTimestamp(row.change, this.appState.i18n.lang),
}
return formattedRow
diff --git a/src/views/GrampsjsViewNewPerson.js b/src/views/GrampsjsViewNewPerson.js
index 1f6541649..f7ec684fc 100644
--- a/src/views/GrampsjsViewNewPerson.js
+++ b/src/views/GrampsjsViewNewPerson.js
@@ -1,23 +1,13 @@
import {html} from 'lit'
import {GrampsjsViewNewObject} from './GrampsjsViewNewObject.js'
-import '../components/GrampsjsFormName.js'
-import '../components/GrampsjsFormPrivate.js'
-import '../components/GrampsjsFormSelectObjectList.js'
-import {makeHandle, dateIsEmpty, emptyDate} from '../util.js'
+import {GrampsjsNewPersonMixin} from '../mixins/GrampsjsNewPersonMixin.js'
-const gender = {
- 2: 'Unknown',
- 1: 'Male',
- 0: 'Female',
-}
-
-const dataDefault = {_class: 'Person', gender: 2, citation_list: []}
-
-export class GrampsjsViewNewPerson extends GrampsjsViewNewObject {
+export class GrampsjsViewNewPerson extends GrampsjsNewPersonMixin(
+ GrampsjsViewNewObject
+) {
constructor() {
super()
- this.data = dataDefault
this.postUrl = '/api/objects/'
this.itemPath = 'person'
this.objClass = 'Person'
@@ -26,181 +16,8 @@ export class GrampsjsViewNewPerson extends GrampsjsViewNewObject {
renderContent() {
return html`
${this._('New Person')}
-
- ${this._('Name')}
-
-
- ${this._('Gender')}
-
- ${Object.keys(gender).map(
- genderConst => html`
- ${this._(gender[genderConst])}
- `
- )}
-
-
- ${this._('Birth Date')}
-
-
-
-
-
-
- ${this._('Birth Place')}
-
-
-
- ${this._('Death Date')}
-
-
-
-
-
-
- ${this._('Death Place')}
-
-
-
- ${this._renderCitationForm()}
-
-
-
-
- ${this.renderButtons()}
+ ${this.renderForm()} ${this.renderButtons()}
`
- // ${JSON.stringify(this.data, null, 2)}
- }
-
- handleGender(e) {
- this.data = {...this.data, gender: parseInt(e.target.value, 10)}
- }
-
- _handleFormData(e) {
- super._handleFormData(e)
- const originalTarget = e.composedPath()[0]
- if (originalTarget.id === 'primary-name') {
- this.data = {...this.data, primary_name: e.detail.data}
- }
- if (originalTarget.id === 'birth-date') {
- this.data = {
- ...this.data,
- birth: {...this.data.birth, date: e.detail.data ?? emptyDate},
- }
- }
- if (originalTarget.id === 'birth-place-list') {
- this.data = {
- ...this.data,
- birth: {...this.data.birth, place: e.detail.data[0]},
- }
- }
- if (originalTarget.id === 'death-date') {
- this.data = {
- ...this.data,
- death: {...this.data.death, date: e.detail.data ?? emptyDate},
- }
- }
- if (originalTarget.id === 'death-place-list') {
- this.data = {
- ...this.data,
- death: {...this.data.death, place: e.detail.data[0]},
- }
- }
- this.checkFormValidity()
- }
-
- _processedData() {
- const handlePerson = makeHandle()
- const handleBirth = makeHandle()
- const handleDeath = makeHandle()
- const birthString = this.translateTypeName(false, 'event_types', 'Birth')
- const deathString = this.translateTypeName(false, 'event_types', 'Death')
- const {birth, death, ...person} = this.data
- const hasBirth = birth.place || (birth?.date && !dateIsEmpty(birth.date))
- const hasDeath = death.place || (death?.date && !dateIsEmpty(birth.date))
- if (!hasBirth && !hasDeath) {
- return [person]
- }
- if (!hasDeath) {
- return [
- {
- ...person,
- handle: handlePerson,
- event_ref_list: [{_class: 'EventRef', ref: handleBirth}],
- birth_ref_index: 0,
- },
- {
- ...birth,
- _class: 'Event',
- handle: handleBirth,
- type: birthString,
- citation_list: person.citation_list ?? [],
- },
- ]
- }
- if (!hasBirth) {
- return [
- {
- ...person,
- handle: handlePerson,
- event_ref_list: [{_class: 'EventRef', ref: handleDeath}],
- death_ref_index: 0,
- },
- {
- ...death,
- _class: 'Event',
- handle: handleDeath,
- type: deathString,
- citation_list: person.citation_list ?? [],
- },
- ]
- }
- return [
- {
- ...person,
- handle: handlePerson,
- event_ref_list: [
- {_class: 'EventRef', ref: handleBirth},
- {_class: 'EventRef', ref: handleDeath},
- ],
- birth_ref_index: 0,
- death_ref_index: 1,
- },
- {
- ...birth,
- _class: 'Event',
- handle: handleBirth,
- type: birthString,
- citation_list: person.citation_list ?? [],
- },
- {
- ...death,
- _class: 'Event',
- handle: handleDeath,
- type: deathString,
- citation_list: person.citation_list ?? [],
- },
- ]
}
_submit() {
@@ -224,23 +41,6 @@ export class GrampsjsViewNewPerson extends GrampsjsViewNewObject {
}
})
}
-
- checkFormValidity() {
- let valid = true
- this.shadowRoot
- .querySelectorAll('grampsjs-form-select-date')
- .forEach(element => {
- if (!element.isValid()) {
- valid = false
- }
- })
- this.isFormValid = valid
- }
-
- _reset() {
- super._reset()
- this.data = dataDefault
- }
}
window.customElements.define('grampsjs-view-new-person', GrampsjsViewNewPerson)
diff --git a/src/views/GrampsjsViewNewPlace.js b/src/views/GrampsjsViewNewPlace.js
index de7455656..8a18f4e9a 100644
--- a/src/views/GrampsjsViewNewPlace.js
+++ b/src/views/GrampsjsViewNewPlace.js
@@ -41,6 +41,7 @@ export class GrampsjsViewNewPlace extends GrampsjsViewNewObject {
id="select-place-type"
.appState="${this.appState}"
?loadingTypes="${this.loadingTypes}"
+ defaultValue="Unknown"
typeName="place_types"
.types="${this.types}"
.typesLocale="${this.typesLocale}"
@@ -65,7 +66,6 @@ export class GrampsjsViewNewPlace extends GrampsjsViewNewObject {
${this.renderButtons()}
`
- // ${JSON.stringify(this.data, null, 2)}
}
handleName(e) {
diff --git a/src/views/GrampsjsViewObject.js b/src/views/GrampsjsViewObject.js
index 3f2e72711..a02ef118a 100644
--- a/src/views/GrampsjsViewObject.js
+++ b/src/views/GrampsjsViewObject.js
@@ -452,6 +452,23 @@ export class GrampsjsViewObject extends GrampsjsView {
)
} else if (e.detail.action === 'updateName') {
this.updateName(e.detail.data, this._data)
+ } else if (e.detail.action === 'addPlaceName') {
+ this.addObject(e.detail.data, this._data, this._className, 'alt_names')
+ } else if (e.detail.action === 'updatePlaceName') {
+ this.updateObjectByIndex(
+ e.detail.index,
+ e.detail.data,
+ this._data,
+ this._className,
+ 'alt_names'
+ )
+ } else if (e.detail.action === 'delPlaceName') {
+ this.delObjectByIndex(
+ e.detail.index,
+ this._data,
+ this._className,
+ 'alt_names'
+ )
} else if (e.detail.action === 'delChildRef') {
this.delObject(
e.detail.handle,
@@ -633,7 +650,7 @@ export class GrampsjsViewObject extends GrampsjsView {
}
// add an object to a list of objects
- // e.g. an event references to the event_ref_list
+ // e.g. an event reference to the event_ref_list
addObject(data, obj, objType, prop) {
return this._updateObject(obj, objType, _obj => {
_obj[prop] = [..._obj[prop], data]