From 80be8d2d8842ccca3363135eca41686208966a7f Mon Sep 17 00:00:00 2001 From: eraden Date: Sat, 16 Jul 2022 17:20:05 +0200 Subject: [PATCH] Delete contact, start edit --- assets/templates/businesses/editor.html | 2 +- client/src/app.js | 2 + client/src/contacts/contact-info-editor.js | 28 ++-------- client/src/contacts/contact-info.js | 50 ++++++++++++++++-- client/src/contacts/contact-type-icon.js | 48 ++++++++++++++++++ client/src/contacts/edit-contact-info.js | 59 ++++++++++++++++++++-- client/src/shared.js | 9 +++- src/routes/restricted/contacts.rs | 2 +- 8 files changed, 163 insertions(+), 37 deletions(-) create mode 100644 client/src/contacts/contact-type-icon.js diff --git a/assets/templates/businesses/editor.html b/assets/templates/businesses/editor.html index 917dbfa..f5d9d23 100644 --- a/assets/templates/businesses/editor.html +++ b/assets/templates/businesses/editor.html @@ -4,7 +4,7 @@ {% for contact in contacts %} - +
@@ -46,15 +34,7 @@ customElements.define('contact-info-editor', class extends Component {
- - - - - - - - - +
@@ -81,6 +61,8 @@ customElements.define('contact-info-editor', class extends Component { set type(v) { this.setAttribute('type', v); + const icon = this.shadowRoot.querySelector('contact-type-icon'); + icon.setAttribute('contact-type', v); this.shadowRoot.querySelector('#content').setAttribute('type', v === 'email' ? 'email' : 'text'); } diff --git a/client/src/contacts/contact-info.js b/client/src/contacts/contact-info.js index 0b84400..fb9782a 100644 --- a/client/src/contacts/contact-info.js +++ b/client/src/contacts/contact-info.js @@ -1,12 +1,52 @@ import { Component } from "../shared"; -customElements.define('contact-info', class extends Component { - constructor() { - super(` +customElements.define('contact-info', + class extends Component { + static get observedAttributes() { + return ['contact-type', 'content', 'contact-id']; + } + + constructor() { + super(` +
+ +
+
`); - } -}); + } + + set contact_type(v) { + if (!v) return; + this.setAttribute('contact-type', v); + this.shadowRoot.querySelector('contact-type-icon').setAttribute('contact-type', v); + } + + set content(v) { + this.setAttribute('content', v); + this.shadowRoot.querySelector('#content').textContent = v; + } + + get content() { + return this.getAttribute('content') + } + + get contact_id() { + return this.getAttribute('contact-id') + } + + set contact_id(v) { + this.setAttribute('contact-id', v); + } + }); diff --git a/client/src/contacts/contact-type-icon.js b/client/src/contacts/contact-type-icon.js new file mode 100644 index 0000000..8ce4496 --- /dev/null +++ b/client/src/contacts/contact-type-icon.js @@ -0,0 +1,48 @@ +import { Component } from "../shared"; + +customElements.define('contact-type-icon', + class extends Component { + static get observedAttributes() { + return ['contact-type']; + } + + constructor() { + super(` + + + + + + + + + + + + `); + } + + set contact_type(v) { + this.contactType = v; + } + + set contactType(v) { + this.setAttribute('contact-type', v || 'email'); + } + + get contact_type() { + return this.getAttribute('contact-type') + } + }); diff --git a/client/src/contacts/edit-contact-info.js b/client/src/contacts/edit-contact-info.js index 7987bdf..3b5d4f5 100644 --- a/client/src/contacts/edit-contact-info.js +++ b/client/src/contacts/edit-contact-info.js @@ -1,8 +1,8 @@ -import { Component } from "../shared"; +import { Component, BUTTON_STYLE } from "../shared"; customElements.define('edit-contact-info', class extends Component { static get observedAttributes() { - return ['contact-id']; + return ['contact-id', "mode"]; } constructor() { @@ -13,18 +13,54 @@ customElements.define('edit-contact-info', class extends Component { display: flex; justify-content: space-between; } + #actions { + display: flex; + justify-content: start; + } + #actions > *:not(:last-child) { + margin-right: 8px; + } + :host([mode = 'view']) contact-info-editor { + display: none; + } + :host([mode = 'edit']) contact-info-editor { + display: block; + } + :host([mode = 'view']) ::slotted(contact-info) { + display: block; + } + :host([mode = 'edit']) ::slotted(contact-info) { + display: none; + } + ${ BUTTON_STYLE }
-
+
+ -
+ - +
`); + + const form = this.shadowRoot.querySelector('contact-info-editor'); + this.shadowRoot.querySelector('#edit').addEventListener('click', ev => { + ev.preventDefault(); + ev.stopPropagation(); + + const info = this.querySelector('contact-info'); + if (!info) return; + + form.contact_id = info.contact_id; + form.contact_type = info.contact_type; + form.context = info.context; + + this.mode = 'edit'; + }); } get contact_id() { @@ -35,4 +71,17 @@ customElements.define('edit-contact-info', class extends Component { this.setAttribute('contact-id', v); this.shadowRoot.querySelector('#remove-id').value = v; } + + get mode() { + return this.getAttribute('mode'); + } + + set mode(v) { + if (v !== 'edit' && v !== 'view') { + console.warn('wrong edit contact info mode', v); + this.setAttribute('mode', 'view'); + return + } + this.setAttribute('mode', v); + } }); diff --git a/client/src/shared.js b/client/src/shared.js index bb1813c..ad99762 100644 --- a/client/src/shared.js +++ b/client/src/shared.js @@ -139,7 +139,7 @@ export class Component extends HTMLElement { for (const name of observed) { const field = this.constructor.attr2Field(name); if (!field) continue; - this[field] = this[field]; + this.#setFieldValue(field, this[field]); } } @@ -154,7 +154,7 @@ export class Component extends HTMLElement { const field = this.constructor.attr2Field(name); if (!field) return; - this[field] = newV; + this.#setFieldValue(field, newV); } static attr2Field(name) { @@ -166,6 +166,11 @@ export class Component extends HTMLElement { static get attr2FieldBlacklist() { return [] } + + #setFieldValue(name, value) { + if (value === undefined || value === null) return; + this[name] = value; + } } export class PseudoForm extends Component { diff --git a/src/routes/restricted/contacts.rs b/src/routes/restricted/contacts.rs index 2ecb80d..d6f4edd 100644 --- a/src/routes/restricted/contacts.rs +++ b/src/routes/restricted/contacts.rs @@ -83,7 +83,7 @@ async fn update_contact( } } -#[post("/update")] +#[post("/delete")] async fn delete_contact( id: Identity, db: Data,