UI for editing event date & place (#52)

gramps-project · Nov 4, 2021 · cac38b9 · cac38b9
1 parent 5d7ae5c
commit cac38b9
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 51 deletions.
diff --git a/src/components/GrampsjsEvent.js b/src/components/GrampsjsEvent.js
@@ -3,11 +3,13 @@ import {html, css} from 'lit'
 import '@material/mwc-icon'
 
 import {GrampsjsObject} from './GrampsjsObject.js'
+import './GrampsjsFormEditEventDetails.js'
+import {fireEvent} from '../util.js'
 
 const BASE_DIR = ''
 
 export class GrampsjsEvent extends GrampsjsObject {
-  static get styles() {
+  static get styles () {
     return [
       super.styles,
       css`
@@ -16,50 +18,65 @@ export class GrampsjsEvent extends GrampsjsObject {
     `]
   }
 
-  constructor() {
+  constructor () {
     super()
     this._showReferences = false
   }
 
-  renderProfile() {
+  renderProfile () {
     return html`
     <h2><mwc-icon class="person">event</mwc-icon> ${this._renderTitle()}</h2>
     ${this.data.description ? html`<p>${this.data.description}</p>` : ''}
+
+
     <dl>
-      ${this.data?.profile?.date ? html`
-      <div>
-        <dt>${this._('Date')}</dt>
-        <dd>${this.data.profile.date}</dd>
+    ${this.data?.profile?.date || this.edit
+    ? html`
+    <div>
+      <dt>
+        ${this._('Date')}
+      </dt>
+      <dd>
+      ${this.data.profile.date}
+      </dd>
       </div>
-      ` : ''}
-      ${this.data?.profile?.place ? html`
+      `
+    : ''}
+      ${this.data?.profile?.place || this.edit
+    ? html`
       <div>
         <dt>${this._('Place')}</dt>
         <dd><a href="${BASE_DIR}/place/${this.data.extended.place.gramps_id}">${this.data.profile.place}</a></dd>
       </div>
-      ` : ''}
+      `
+    : ''}
     </dl>
+    ${this.edit
+    ? html`
+      <mwc-icon-button icon="edit" class="edit" @click="${this._handleEditDetails}"></mwc-icon-button>
+      `
+    : ''}
+
     `
   }
 
   // eslint-disable-next-line class-methods-use-this
-  _renderPerson(obj) {
+  _renderPerson (obj) {
     if (obj === undefined) {
       return ''
     }
     return `${obj?.name_given || '…'} ${obj?.name_surname || '…'}`
   }
 
   // eslint-disable-next-line class-methods-use-this
-  _renderFamily(obj) {
+  _renderFamily (obj) {
     if (obj === undefined) {
       return ''
     }
     return `${this._renderPerson(obj.family?.father)} & ${this._renderPerson(obj.family?.mother)}`
   }
 
-
-  _renderPrimaryPeople() {
+  _renderPrimaryPeople () {
     const primary = this._('Primary')
     const family = this._('Family')
     const people = this.data?.profile?.participants?.people.filter((obj) => obj.role === primary) || []
@@ -68,11 +85,34 @@ export class GrampsjsEvent extends GrampsjsObject {
             ${families.map((obj) => this._renderFamily(obj), this).join(', ')}`
   }
 
-
-  _renderTitle() {
+  _renderTitle () {
     return html`${this.data.profile.type}: ${this._renderPrimaryPeople()}`
   }
-}
 
+  _handleEditDetails () {
+    const data = {date: this.data.date}
+    if (this.data.place) {
+      data.place = this.data.place
+    }
+    const place = this.data?.extended?.place
+    this.dialogContent = html`
+    <grampsjs-form-edit-event-details
+      @object:save="${this._handleSaveDetails}"
+      @object:cancel="${this._handleCancelDialog}"
+      .strings=${this.strings}
+      .data=${data}
+      .place=${place}
+    >
+    </grampsjs-form-edit-event-details>
+    `
+  }
+
+  _handleSaveDetails (e) {
+    fireEvent(this, 'edit:action', {action: 'updateProp', data: e.detail.data})
+    e.preventDefault()
+    e.stopPropagation()
+    this.dialogContent = ''
+  }
+}
 
 window.customElements.define('grampsjs-event', GrampsjsEvent)
diff --git a/src/components/GrampsjsFormEditEventDetails.js b/src/components/GrampsjsFormEditEventDetails.js
@@ -0,0 +1,56 @@
+/*
+Form for adding a new event reference
+*/
+
+import {html} from 'lit'
+
+import './GrampsjsFormSelectDate.js'
+import './GrampsjsFormSelectObjectList.js'
+
+import {GrampsjsObjectForm} from './GrampsjsObjectForm.js'
+
+class GrampsjsFormEditEventDetails extends GrampsjsObjectForm {
+  static get properties () {
+    return {
+      place: {type: Object}
+    }
+  }
+
+  constructor () {
+    super()
+    this.place = {}
+  }
+
+  renderForm () {
+    return html`
+    <h4 class="label">${this._('Date')}</h4>
+    <p>
+      <grampsjs-form-select-date
+        @formdata:changed="${this._handleFormData}"
+        fullwidth
+        id="date"
+        label="${this._('Date')}"
+        .data="${this.data.date}"
+        .strings="${this.strings}"
+      >
+      </grampsjs-form-select-date>
+    </p>
+    <h4 class="label">${this._('Place')}</h4>
+    <p>
+      <grampsjs-form-select-object-list
+        fixedMenuPosition
+        style="min-height: 300px;"
+        objectType="place"
+        .strings="${this.strings}"
+        id="place"
+        label="${this._('Select')}"
+        .objectsInitial="${this.data.place ? [{object_type: 'place', object: this.place, handle: this.data.place}] : []}"
+        class="edit"
+      ></grampsjs-form-select-object-list>
+    </p>
+    <pre>${JSON.stringify(this.data, null, 2)}</pre>
+`
+  }
+}
+
+window.customElements.define('grampsjs-form-edit-event-details', GrampsjsFormEditEventDetails)
diff --git a/src/components/GrampsjsFormObjectList.js b/src/components/GrampsjsFormObjectList.js
@@ -16,9 +16,8 @@ import './GrampsjsSearchResultList.js'
 import {sharedStyles} from '../SharedStyles.js'
 import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
 
-
 class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
-  static get styles() {
+  static get styles () {
     return [
       sharedStyles,
       css`
@@ -31,7 +30,7 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
     ]
   }
 
-  static get properties() {
+  static get properties () {
     return {
       objects: {type: Array},
       selectedIndex: {type: Number},
@@ -40,8 +39,7 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
     }
   }
 
-
-  constructor() {
+  constructor () {
     super()
     this.objectType = false
     this.objects = []
@@ -50,7 +48,7 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
     this.deletable = false
   }
 
-  render() {
+  render () {
     const empty = this.objects.length === 0
     const one = this.objects.length === 1
     const unselected = this.selectedIndex < 0
@@ -59,14 +57,17 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
     }
     return html`
       <div class="buttons">
-      ${this.deletable ? html`
+      ${this.deletable
+    ? html`
         <mwc-icon-button
           icon="delete"
           ?disabled="${unselected}"
           @click="${this._handleDelete}"
         ></mwc-icon-button>
-        ` : ''}
-        ${this.reorder ? html`<mwc-icon-button
+        `
+    : ''}
+        ${this.reorder
+    ? html`<mwc-icon-button
           icon="arrow_upward"
           ?disabled="${unselected || one || this.selectedIndex === 0}"
           @click="${this._handleUp}"
@@ -75,7 +76,8 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
           icon="arrow_downward"
           ?disabled="${unselected || one || this.selectedIndex === this.objects.length - 1}"
           @click="${this._handleDown}"
-        ></mwc-icon-button>` : ''}
+        ></mwc-icon-button>`
+    : ''}
       </div>
       <grampsjs-search-result-list
         ?activatable="${this.deletable || this.reorder}"
@@ -87,28 +89,27 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
       `
   }
 
-  _handleSelected(e) {
+  _handleSelected (e) {
     this.selectedIndex = e.detail.index
   }
 
-  _handleDelete() {
+  _handleDelete () {
     this.objects = [...this.objects].filter((obj, i) => i !== this.selectedIndex)
     if (this.selectedIndex + 1 > this.objects.length) {
       this.selectedIndex = -1
     }
     this._handleChange()
   }
 
-  _handleUp() {
+  _handleUp () {
     const i = this.selectedIndex
     if (i === 1) {
       this.objects = [
         this.objects[1],
         this.objects[0],
         ...this.objects.slice(2)
       ]
-    }
-    else if (i > 1) {
+    } else if (i > 1) {
       this.objects = [
         ...this.objects.slice(0, i - 1),
         this.objects[i],
@@ -119,7 +120,7 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
     this._handleChange()
   }
 
-  _handleDown() {
+  _handleDown () {
     const L = this.objects.length
     const i = this.selectedIndex
     if (i === 0) {
@@ -128,31 +129,29 @@ class GrampsjsFormObjectList extends GrampsjsTranslateMixin(LitElement) {
         this.objects[0],
         ...this.objects.slice(2)
       ]
-    }
-    else if (i < L - 1) {
+    } else if (i < L - 1) {
       this.objects = [
         ...this.objects.slice(0, i),
         this.objects[i + 1],
         this.objects[i],
         ...this.objects.slice(i + 2)
       ]
     }
-
   }
 
-  _handleChange() {
+  _handleChange () {
     fireEvent(this, 'object-list:changed', {objects: this.objects})
   }
 
-  reset() {
+  reset () {
     this.objects = []
   }
 
-  _handleList() {
+  _handleList () {
     return this.objects.map(_obj => _obj.handle)
   }
 
-  update(changed) {
+  update (changed) {
     super.update(changed)
     if (changed.has('objects')) {
       fireEvent(this, 'formdata:changed', {data: this._handleList()})