Allow editing place type (#146)

gramps-project · Oct 19, 2023 · ef1e0ea · ef1e0ea
1 parent 4d5e3c8
commit ef1e0ea
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 12 deletions.
diff --git a/src/components/GrampsjsFormEditNoteType.js → src/components/GrampsjsFormEditType.js b/src/components/GrampsjsFormEditNoteType.js → src/components/GrampsjsFormEditType.js
@@ -8,14 +8,27 @@ import './GrampsjsFormSelectType.js'
 
 import {GrampsjsObjectForm} from './GrampsjsObjectForm.js'
 
-class GrampsjsFormEditNoteType extends GrampsjsObjectForm {
+class GrampsjsFormEditType extends GrampsjsObjectForm {
+  static get properties() {
+    return {
+      formId: {type: String},
+      typeName: {type: String},
+    }
+  }
+
+  constructor() {
+    super()
+    this.formId = ''
+    this.typeName = ''
+  }
+
   renderForm() {
     return html`
       <grampsjs-form-select-type
-        id="note-type"
+        id="${this.formId}"
         .strings="${this.strings}"
         ?loadingTypes="${this.loadingTypes}"
-        typeName="note_types"
+        typeName="${this.typeName}"
         defaultTypeName="General"
         .types="${this.types}"
         .typesLocale="${this.typesLocale}"
@@ -26,7 +39,4 @@ class GrampsjsFormEditNoteType extends GrampsjsObjectForm {
   }
 }
 
-window.customElements.define(
-  'grampsjs-form-edit-note-type',
-  GrampsjsFormEditNoteType
-)
+window.customElements.define('grampsjs-form-edit-type', GrampsjsFormEditType)
diff --git a/src/components/GrampsjsNote.js b/src/components/GrampsjsNote.js
@@ -5,7 +5,7 @@ import '@material/mwc-icon'
 import {GrampsjsObject} from './GrampsjsObject.js'
 import './GrampsjsNoteContent.js'
 import './GrampsjsEditor.js'
-import './GrampsjsFormEditNoteType.js'
+import './GrampsjsFormEditType.js'
 import {fireEvent} from '../util.js'
 
 export class GrampsjsNote extends GrampsjsObject {
@@ -57,14 +57,16 @@ export class GrampsjsNote extends GrampsjsObject {
 
   _handleEditType() {
     this.dialogContent = html`
-      <grampsjs-form-edit-note-type
+      <grampsjs-form-edit-type
+        formId="note-type"
+        typeName="note_types"
         @object:save="${this._handleSaveType}"
         @object:cancel="${this._handleCancelDialog}"
         .strings=${this.strings}
         .data=${{type: this.data?.type || ''}}
         prop="value"
       >
-      </grampsjs-form-edit-note-type>
+      </grampsjs-form-edit-type>
     `
   }
 

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

diff --git a/src/components/GrampsjsPlace.js b/src/components/GrampsjsPlace.js
@@ -1,4 +1,4 @@
-import {html} from 'lit'
+import {css, html} from 'lit'
 
 import '@material/mwc-icon'
 
@@ -10,6 +10,20 @@ import {fireEvent} from '../util.js'
 const BASE_DIR = ''
 
 export class GrampsjsPlace extends GrampsjsObject {
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+        }
+
+        #btn-edit-type {
+          vertical-align: middle;
+        }
+      `,
+    ]
+  }
+
   constructor() {
     super()
     this._showReferences = false
@@ -33,7 +47,19 @@ export class GrampsjsPlace extends GrampsjsObject {
       </h2>
 
       ${this.data?.profile?.type
-        ? html`<p>${this.data?.profile?.type}</p>`
+        ? html`<p>
+            ${this.data?.profile?.type}
+            ${this.edit
+              ? html`
+                  <mwc-icon-button
+                    id="btn-edit-type"
+                    icon="edit"
+                    class="edit"
+                    @click="${this._handleEditType}"
+                  ></mwc-icon-button>
+                `
+              : ''}
+          </p>`
         : ''}
       ${this.data?.profile?.parent_places.length > 0
         ? html`
@@ -84,6 +110,33 @@ export class GrampsjsPlace extends GrampsjsObject {
     `
   }
 
+  _handleEditType() {
+    this.dialogContent = html`
+      <grampsjs-form-edit-type
+        formId="place-type"
+        typeName="place_types"
+        @object:save="${this._handleSaveType}"
+        @object:cancel="${this._handleCancelDialog}"
+        .strings=${this.strings}
+        .data=${{
+          type: this.data?.place_type?.string || this.data?.place_type || '',
+        }}
+        prop="value"
+      >
+      </grampsjs-form-edit-type>
+    `
+  }
+
+  _handleSaveType(e) {
+    fireEvent(this, 'edit:action', {
+      action: 'updateProp',
+      data: e.detail.data,
+    })
+    e.preventDefault()
+    e.stopPropagation()
+    this.dialogContent = ''
+  }
+
   _handleSaveName(e) {
     fireEvent(this, 'edit:action', {
       action: 'updateProp',