Allow creating event from person view (fixes #174)

gramps-project · Feb 6, 2023 · 83183e5 · 83183e5
1 parent a91d50e
commit 83183e5
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 46 deletions.
diff --git a/src/components/GrampsjsEvents.js b/src/components/GrampsjsEvents.js
@@ -1,9 +1,10 @@
 import {html} from 'lit'
 
 import {GrampsjsEditableList} from './GrampsjsEditableList.js'
-import {fireEvent, renderIcon, objectDetail} from '../util.js'
+import {fireEvent, renderIcon, objectDetail, makeHandle} from '../util.js'
 import './GrampsjsFormSelectObject.js'
 import './GrampsjsFormEventRef.js'
+import './GrampsjsFormNewEvent.js'
 import './GrampsjsObjectForm.js'
 import '@material/mwc-icon-button'
 import '@material/mwc-dialog'
@@ -112,7 +113,7 @@ export class GrampsjsEvents extends GrampsjsEditableList {
       <grampsjs-form-eventref
         new
         @object:save="${this._handleEventRefSave}"
-        @object:cancel="${this._handleEventRefCancel}"
+        @object:cancel="${this._handleDialogCancel}"
         .strings="${this.strings}"
         objType="${this.objType}"
         dialogTitle=${this._('Share an existing event')}
@@ -121,14 +122,37 @@ export class GrampsjsEvents extends GrampsjsEditableList {
     `
   }
 
+  _handleAdd() {
+    this.dialogContent = html`
+      <grampsjs-form-new-event
+        @object:save="${this._handleNewEventSave}"
+        @object:cancel="${this._handleDialogCancel}"
+        .strings="${this.strings}"
+        dialogTitle="${this._('Add a new event')}"
+      >
+      </grampsjs-form-new-event>
+    `
+  }
+
+  _handleNewEventSave(e) {
+    const handle = makeHandle()
+    fireEvent(this, 'edit:action', {
+      action: 'newEvent',
+      data: {handle, ...e.detail.data},
+    })
+    e.preventDefault()
+    e.stopPropagation()
+    this.dialogContent = ''
+  }
+
   _handleEventRefSave(e) {
     fireEvent(this, 'edit:action', {action: 'addEventRef', data: e.detail.data})
     e.preventDefault()
     e.stopPropagation()
     this.dialogContent = ''
   }
 
-  _handleEventRefCancel() {
+  _handleDialogCancel() {
     this.dialogContent = ''
   }
 

diff --git a/src/components/GrampsjsFormNewEvent.js b/src/components/GrampsjsFormNewEvent.js
@@ -0,0 +1,50 @@
+import {html} from 'lit'
+
+import './GrampsjsFormSelectType.js'
+import {GrampsjsObjectForm} from './GrampsjsObjectForm.js'
+import {GrampsjsNewEventMixin} from '../mixins/GrampsjsNewEventMixin.js'
+
+export class GrampsjsFormNewEvent extends GrampsjsNewEventMixin(
+  GrampsjsObjectForm
+) {
+  constructor() {
+    super()
+    this.data = {_class: 'Event'}
+  }
+
+  renderForm() {
+    return html`
+      ${super.renderForm()}
+
+      <grampsjs-form-select-type
+        required
+        id="event-role-type"
+        .strings="${this.strings}"
+        typeName="event_role_types"
+        ?loadingTypes=${this.loadingTypes}
+        .types="${this.types}"
+        .typesLocale="${this.typesLocale}"
+      >
+      </grampsjs-form-select-type>
+    `
+  }
+
+  checkFormValidity() {
+    const selectType = this.shadowRoot.querySelector(
+      'grampsjs-form-select-type'
+    )
+    let valid = true
+    if (!selectType !== null && !selectType.isValid()) {
+      valid = false
+    }
+    const selectDate = this.shadowRoot.querySelector(
+      'grampsjs-form-select-date'
+    )
+    if (!selectDate !== null && !selectDate.isValid()) {
+      valid = false
+    }
+    this.isFormValid = valid
+  }
+}
+
+window.customElements.define('grampsjs-form-new-event', GrampsjsFormNewEvent)
diff --git a/src/components/GrampsjsObject.js b/src/components/GrampsjsObject.js
@@ -427,6 +427,8 @@ export class GrampsjsObject extends GrampsjsTranslateMixin(LitElement) {
         }`
       case 'events':
         return html`<grampsjs-events
+          hasShare
+          hasAdd
           .strings=${this.strings}
           .data=${this.data?.extended?.events}
           .profile=${this.data?.profile?.events}

diff --git a/src/components/GrampsjsObjectForm.js b/src/components/GrampsjsObjectForm.js
@@ -263,6 +263,12 @@ export class GrampsjsObjectForm extends GrampsjsTranslateMixin(LitElement) {
         type: {_class: 'NoteType', string: e.detail.data},
       }
     }
+    if (originalTarget.id === 'event-type') {
+      this.data = {
+        ...this.data,
+        type: {_class: 'EventType', string: e.detail.data},
+      }
+    }
     if (originalTarget.id === 'child-frel') {
       this.data = {
         ...this.data,

diff --git a/src/mixins/GrampsjsNewEventMixin.js b/src/mixins/GrampsjsNewEventMixin.js
@@ -0,0 +1,58 @@
+import {html} from 'lit'
+
+import '@material/mwc-textfield'
+
+import '../components/GrampsjsFormSelectDate.js'
+import '../components/GrampsjsFormSelectObjectList.js'
+import '../components/GrampsjsFormSelectType.js'
+import '../components/GrampsjsFormPrivate.js'
+
+export const GrampsjsNewEventMixin = superClass =>
+  class extends superClass {
+    renderForm() {
+      return html`
+        <pre>${JSON.stringify(this.data, null, 2)}</pre>
+        <grampsjs-form-select-type
+          required
+          id="event-type"
+          .strings="${this.strings}"
+          ?loadingTypes="${this.loadingTypes}"
+          typeName="event_types"
+          .types="${this.types}"
+          .typesLocale="${this.typesLocale}"
+        >
+        </grampsjs-form-select-type>
+
+        <h4 class="label">${this._('Date')}</h4>
+        <p>
+          <grampsjs-form-select-date id="date" .strings="${this.strings}">
+          </grampsjs-form-select-date>
+        </p>
+
+        <h4 class="label">${this._('Description')}</h4>
+        <p>
+          <grampsjs-form-string
+            fullwidth
+            id="description"
+            @formdata:changed="${this._handleFormData}"
+            label="${this._('Description')}"
+            .strings="${this.strings}"
+          >
+          </grampsjs-form-string>
+        </p>
+
+        <h4 class="label">${this._('Place')}</h4>
+        <grampsjs-form-select-object-list
+          id="place"
+          objectType="place"
+          .strings="${this.strings}"
+        ></grampsjs-form-select-object-list>
+
+        <div class="spacer"></div>
+        <grampsjs-form-private
+          id="private"
+          .strings="${this.strings}"
+        ></grampsjs-form-private>
+      `
+    }
+  }
diff --git a/src/strings.js b/src/strings.js
@@ -20,6 +20,7 @@ export const grampsStrings = [
   'Add an existing repository',
   'Add existing child to family',
   'Add',
+  'Add a new event',
   'Address Note',
   'Addresses',
   'Adopted people',

diff --git a/src/views/GrampsjsViewNewEvent.js b/src/views/GrampsjsViewNewEvent.js
@@ -8,12 +8,15 @@ import '@material/mwc-button'
 import '@material/mwc-circular-progress'
 
 import {GrampsjsViewNewObject} from './GrampsjsViewNewObject.js'
+import {GrampsjsNewEventMixin} from '../mixins/GrampsjsNewEventMixin.js'
 import '../components/GrampsjsFormSelectDate.js'
 import '../components/GrampsjsFormSelectObjectList.js'
 import '../components/GrampsjsFormSelectType.js'
 import '../components/GrampsjsFormPrivate.js'
 
-export class GrampsjsViewNewEvent extends GrampsjsViewNewObject {
+export class GrampsjsViewNewEvent extends GrampsjsNewEventMixin(
+  GrampsjsViewNewObject
+) {
   constructor() {
     super()
     this.data = {_class: 'Event'}
@@ -26,48 +29,8 @@ export class GrampsjsViewNewEvent extends GrampsjsViewNewObject {
     return html`
       <h2>${this._('New Event')}</h2>
 
-      <grampsjs-form-select-type
-        required
-        id="select-type"
-        .strings="${this.strings}"
-        ?loadingTypes="${this.loadingTypes}"
-        typeName="event_types"
-        .types="${this.types}"
-        .typesLocale="${this.typesLocale}"
-      >
-      </grampsjs-form-select-type>
-
-      <h4 class="label">${this._('Date')}</h4>
-      <p>
-        <grampsjs-form-select-date id="date" .strings="${this.strings}">
-        </grampsjs-form-select-date>
-      </p>
-
-      <h4 class="label">${this._('Description')}</h4>
-      <p>
-        <mwc-textfield
-          style="width:100%;"
-          @input="${this.handleDesc}"
-          id="desc"
-        ></mwc-textfield>
-      </p>
-
-      <h4 class="label">${this._('Place')}</h4>
-      <grampsjs-form-select-object-list
-        id="place"
-        objectType="place"
-        .strings="${this.strings}"
-      ></grampsjs-form-select-object-list>
-
-      <div class="spacer"></div>
-      <grampsjs-form-private
-        id="private"
-        .strings="${this.strings}"
-      ></grampsjs-form-private>
-
-      ${this.renderButtons()}
+      ${this.renderForm()} ${this.renderButtons()}
     `
-    // <pre>${JSON.stringify(this.data, null, 2)}</pre>
   }
 
   handleDesc(e) {
@@ -77,7 +40,7 @@ export class GrampsjsViewNewEvent extends GrampsjsViewNewObject {
   _handleFormData(e) {
     this.checkFormValidity()
     const originalTarget = e.composedPath()[0]
-    if (originalTarget.id === 'select-type') {
+    if (originalTarget.id === 'event-type') {
       this.data = {
         ...this.data,
         type: {_class: 'EventType', string: e.detail.data},

diff --git a/src/views/GrampsjsViewObject.js b/src/views/GrampsjsViewObject.js
@@ -258,6 +258,23 @@ export class GrampsjsViewObject extends GrampsjsView {
           )
         }
       })
+    } else if (e.detail.action === 'newEvent') {
+      const {role, ...eventData} = e.detail.data
+      this._postObject(eventData, 'event').then(data => {
+        if ('data' in data) {
+          const eventRefData = {
+            _class: 'EventRef',
+            ref: e.detail.data.handle,
+            role,
+          }
+          this.addObject(
+            eventRefData,
+            this._data,
+            this._className,
+            'event_ref_list'
+          )
+        }
+      })
     } else if (e.detail.action === 'addCitation') {
       this.addHandle(
         e.detail.data.data[0],