+
+ `
+ }
+
+ _handleNewChildSave(e) {
+ fireEvent(this, 'edit:action', {
+ action: 'newChild',
+ data: e.detail.data,
+ })
+ e.preventDefault()
+ e.stopPropagation()
+ this.dialogContent = ''
+ }
+
_handleChildRefSave(e) {
fireEvent(this, 'edit:action', {action: 'addChildRef', data: e.detail.data})
e.preventDefault()
@@ -89,7 +117,7 @@ export class GrampsjsChildren extends GrampsjsEditableTable {
this.dialogContent = ''
}
- _handleChildRefCancel() {
+ _handleDialogCancel() {
this.dialogContent = ''
}
diff --git a/src/components/GrampsjsFamily.js b/src/components/GrampsjsFamily.js
index 86f32b2..9c99fcc 100644
--- a/src/components/GrampsjsFamily.js
+++ b/src/components/GrampsjsFamily.js
@@ -1,11 +1,13 @@
-import {html, css} from 'lit'
+import {css, html} from 'lit'
import '@material/mwc-icon'
-import {GrampsjsObject} from './GrampsjsObject.js'
import {ringsIcon} from '../icons.js'
-import {renderPerson, fireEvent} from '../util.js'
+import {fireEvent, renderPerson} from '../util.js'
import './GrampsjsFormEditFamily.js'
+import './GrampsjsFormNewPerson.js'
+import './GrampsjsFormPersonRef.js'
+import {GrampsjsObject} from './GrampsjsObject.js'
export class GrampsjsFamily extends GrampsjsObject {
static get styles() {
@@ -13,6 +15,19 @@ export class GrampsjsFamily extends GrampsjsObject {
super.styles,
css`
:host {
+ .items-center {
+ display: flex;
+ align-items: center;
+ }
+
+ .parent {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ }
+
+ .relationship-type {
+ margin-top: 2em;
+ }
}
`,
]
@@ -29,7 +44,11 @@ export class GrampsjsFamily extends GrampsjsObject {
renderProfile() {
return html`
${this._renderTitle()}
- ${this._renderFather()} ${this._renderMother()}
+ ${this._renderParent('father')} ${this._renderParent('mother')}
+
+ ${this._renderRelType()} ${this._renderMarriage()}
+ ${this._renderDivorce()}
+
${this.edit
? html`
`
: ''}
-
- ${this._renderRelType()} ${this._renderMarriage()}
- ${this._renderDivorce()}
-
`
}
@@ -66,12 +81,40 @@ export class GrampsjsFamily extends GrampsjsObject {
`
}
- _renderFather() {
- return html` ${renderPerson(this.data?.profile?.father || {})}
`
- }
+ _renderParent(parent) {
+ const profile = this.data?.profile[parent]
+ const hasProfile = Object.keys(profile ?? {}).length > 0
- _renderMother() {
- return html` ${renderPerson(this.data?.profile?.mother || {})}
`
+ return html`
+
+
+ ${renderPerson(profile || {})}
+ ${this.edit && hasProfile
+ ? html`
+
+ `
+ : ''}
+
+ ${this.edit
+ ? html`
+
+
+ `
+ : ''}
+
${this._('Father')}
-
-
-
- ${this._('Mother')}
-
-
-
+
+
+
+ `
+ }
+}
+
+window.customElements.define('grampsjs-form-new-child', GrampsjsFormNewChild)
diff --git a/src/components/GrampsjsFormNewPerson.js b/src/components/GrampsjsFormNewPerson.js
new file mode 100644
index 0000000..e0cd11f
--- /dev/null
+++ b/src/components/GrampsjsFormNewPerson.js
@@ -0,0 +1,21 @@
+import {GrampsjsNewPersonMixin} from '../mixins/GrampsjsNewPersonMixin.js'
+import {fireEvent} from '../util.js'
+import './GrampsjsFormSelectType.js'
+import {GrampsjsObjectForm} from './GrampsjsObjectForm.js'
+
+export class GrampsjsFormNewPerson extends GrampsjsNewPersonMixin(
+ GrampsjsObjectForm
+) {
+ _handleDialogSave() {
+ const processedData = this._processedData()
+
+ const data = {
+ processedData,
+ }
+
+ fireEvent(this, 'object:save', {data})
+ this._reset()
+ }
+}
+
+window.customElements.define('grampsjs-form-new-person', GrampsjsFormNewPerson)
diff --git a/src/components/GrampsjsFormPersonRef.js b/src/components/GrampsjsFormPersonRef.js
new file mode 100644
index 0000000..07110b9
--- /dev/null
+++ b/src/components/GrampsjsFormPersonRef.js
@@ -0,0 +1,25 @@
+/*
+Form for adding a new person reference
+*/
+
+import {html} from 'lit'
+import './GrampsjsFormSelectObjectList.js'
+import {GrampsjsObjectForm} from './GrampsjsObjectForm.js'
+
+class GrampsjsFormPersonRef extends GrampsjsObjectForm {
+ renderForm() {
+ return html`
+
+ `
+ }
+}
+
+window.customElements.define('grampsjs-form-personref', GrampsjsFormPersonRef)
diff --git a/src/components/GrampsjsFormSelectObject.js b/src/components/GrampsjsFormSelectObject.js
index 39994a4..3457f91 100644
--- a/src/components/GrampsjsFormSelectObject.js
+++ b/src/components/GrampsjsFormSelectObject.js
@@ -20,6 +20,7 @@ import {GrampsjsAppStateMixin} from '../mixins/GrampsjsAppStateMixin.js'
// labels for button
const btnLabel = {
+ person: 'Select an existing person',
place: 'Select an existing place',
source: 'Select an existing source',
media: 'Select an existing media object',
diff --git a/src/mixins/GrampsjsNewPersonMixin.js b/src/mixins/GrampsjsNewPersonMixin.js
index 47071e1..1bf53c1 100644
--- a/src/mixins/GrampsjsNewPersonMixin.js
+++ b/src/mixins/GrampsjsNewPersonMixin.js
@@ -165,11 +165,11 @@ export const GrampsjsNewPersonMixin = superClass =>
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 {birth, death, frel, mrel, ...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]
+ return [{...person, handle: handlePerson}]
}
if (!hasDeath) {
return [
diff --git a/src/strings.js b/src/strings.js
index 36c6663..085b53e 100644
--- a/src/strings.js
+++ b/src/strings.js
@@ -82,6 +82,7 @@ export const grampsStrings = [
'about',
'About',
'Above the name',
+ 'Add a new person',
'Add a new event',
'Add a new media object',
'Add an existing person as a child of the family',
@@ -525,6 +526,7 @@ export const grampsStrings = [
'Select a file',
'Select a person as the father',
'Select a person as the mother',
+ 'Select an existing person',
'Select an existing media object',
'Select an existing note',
'Select an existing place',
diff --git a/src/util.js b/src/util.js
index fb30bbe..098e926 100644
--- a/src/util.js
+++ b/src/util.js
@@ -214,6 +214,7 @@ export const objectIcon = {
}
export const objectTypeToEndpoint = {
+ object: 'objects',
person: 'people',
family: 'families',
event: 'events',
diff --git a/src/views/GrampsjsViewObject.js b/src/views/GrampsjsViewObject.js
index 940d15c..b9382ab 100644
--- a/src/views/GrampsjsViewObject.js
+++ b/src/views/GrampsjsViewObject.js
@@ -1,6 +1,6 @@
/* eslint-disable no-param-reassign */
/* eslint-disable class-methods-use-this */
-import {html, css} from 'lit'
+import {css, html} from 'lit'
import '@material/mwc-fab'
import '@material/mwc-icon'
@@ -304,6 +304,33 @@ export class GrampsjsViewObject extends GrampsjsView {
)
}
})
+ } else if (e.detail.action === 'newParent') {
+ const {processedData, parent} = e.detail.data
+ const {handle} = processedData.filter(obj => obj._class === 'Person')[0]
+ this._postObject(processedData, 'object').then(data => {
+ if ('data' in data) {
+ const updatedFamily = {[`${parent}_handle`]: handle}
+ this.updateProp(this._data, this._className, updatedFamily)
+ }
+ })
+ } else if (e.detail.action === 'newChild') {
+ const {processedData, frel, mrel} = e.detail.data
+ const {handle} = processedData.filter(obj => obj._class === 'Person')[0]
+ this._postObject(processedData, 'object').then(data => {
+ if ('data' in data) {
+ const childRefData = {
+ ref: handle,
+ frel,
+ mrel,
+ }
+ this.addObject(
+ childRefData,
+ this._data,
+ this._className,
+ 'child_ref_list'
+ )
+ }
+ })
} else if (e.detail.action === 'newEvent') {
const {role, ...eventData} = e.detail.data
this._postObject(eventData, 'event').then(data => {