Add edit user details modal

CHANGES.md

@@ -2,6 +2,7 @@
 
 ## 10.1.3 (Unreleased)
 
+- Add the ability to edit the name and group of a roster contact throught the edit user details modal
 - Add the ability to set roles and affiliations via the MUC occupant modal
 - Fix `isOnlyEmojis is not a function` when using only `@converse/headless`
 - Fix `autojoin` checkbox state in MUC bookmark form

src/shared/modals/edit-user-details.js

@@ -0,0 +1,61 @@
+import BaseModal from 'plugins/modal/modal.js';
+import log from '@converse/headless/log';
+import { tplUserDetailsModal, tplFooter } from './templates/edit-user-details.js';
+import { __ } from 'i18n';
+import { api, converse } from '@converse/headless/core';
+
+const u = converse.env.utils;
+
+export default class EditUserDetailsModal extends BaseModal {
+    initialize() {
+        super.initialize();
+        this.model.rosterContactAdded.then(() => this.registerContactEventHandlers());
+        this.listenTo(this.model, 'change', this.render);
+        this.registerContactEventHandlers();
+        /**
+         * Triggered once the UserDetailsModal has been initialized
+         * @event _converse#userDetailsModalInitialized
+         * @type { _converse.ChatBox }
+         * @example _converse.api.listen.on('userDetailsModalInitialized', (chatbox) => { ... });
+         */
+        api.trigger('userDetailsModalInitialized', this.model);
+    }
+
+    renderModal() {
+        return tplUserDetailsModal(this);
+    }
+
+    renderModalFooter() {
+        return tplFooter(this);
+    }
+
+    getModalTitle() {
+        return this.model.getDisplayName();
+    }
+
+    registerContactEventHandlers() {
+        if (this.model.contact !== undefined) {
+            this.listenTo(this.model.contact, 'change', this.render);
+            this.listenTo(this.model.contact.vcard, 'change', this.render);
+            this.model.contact.on('destroy', () => {
+                delete this.model.contact;
+                this.render();
+            });
+        }
+    }
+
+    afterSubmission(_form, jid, name, group) {
+        if (group && !Array.isArray(group)) {
+            group = [group];
+        }
+        _converse.roster.sendContactAddIQ(jid, name, group);
+        this.modal.hide();
+    }
+
+    applyContactChanges(ev) {
+        ev.preventDefault();
+        const data = new FormData(ev.target);
+        this.afterSubmission(ev.target, this.model.contact.vcard.attributes.jid, data.get('name'), data.get('group'));
+    }
+}
+api.elements.define('converse-edit-user-details-modal', EditUserDetailsModal);

src/shared/modals/templates/edit-user-details.js

@@ -0,0 +1,66 @@
+import { __ } from 'i18n';
+import { api } from '@converse/headless/core';
+import { html } from 'lit';
+import { modal_close_button } from 'plugins/modal/templates/buttons.js';
+import { getGroupsAutoCompleteList } from '@converse/headless/plugins/roster/utils.js';
+
+export const tplFooter = (el) => {
+    const is_roster_contact = el.model.contact !== undefined;
+    const i18n_refresh = __('Refresh');
+    const allow_contact_removal = api.settings.get('allow_contact_removal');
+    return html` <div class="modal-footer">${modal_close_button}</div> `;
+};
+
+export const tplUserDetailsModal = (el) => {
+    const i18n_save = __('Save');
+    const i18n_group = __('Group');
+    const i18n_nickname = __('Name');
+
+    return html` <form class="converse-form add-xmpp-contact" @submit=${(ev) => el.applyContactChanges(ev)}>
+        <div class="modal-body">
+            <span class="modal-alert"></span>
+            <div class="form-group add-xmpp-contact__name">
+                <label class="clearfix" for="name">${i18n_nickname}:</label>
+                <div class="suggestion-box suggestion-box__name">
+                    <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
+                    <input
+                        type="text"
+                        name="name"
+                        value="${el.model.get('nickname') || ''}"
+                        class="form-control suggestion-box__input"
+                    />
+                    <span
+                        class="suggestion-box__additions visually-hidden"
+                        role="status"
+                        aria-live="assertive"
+                        aria-relevant="additions"
+                    ></span>
+                </div>
+            </div>
+
+            <label class="clearfix" for="name">${i18n_group}:</label>
+            <div class="suggestion-box suggestion-box__name">
+                <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
+                <input
+                    type="text"
+                    name="group"
+                    value="${el.model.get('groups') || ''}"
+                    class="form-control suggestion-box__input"
+                />
+                <span
+                    class="suggestion-box__additions visually-hidden"
+                    role="status"
+                    aria-live="assertive"
+                    aria-relevant="additions"
+                ></span>
+
+                <!--<converse-autocomplete
+                    .list=${[getGroupsAutoCompleteList()]}
+                    name="group"
+                ></converse-autocomplete>-->
+            </div>
+
+            <button type="submit" class="btn btn-primary">${i18n_save}</button>
+        </div>
+    </form>`;
+};

src/shared/modals/templates/user-details.js

@@ -21,6 +21,7 @@ const remove_button = (el) => {
 export const tplFooter = (el) => {
     const is_roster_contact = el.model.contact !== undefined;
     const i18n_refresh = __('Refresh');
+    const i18n_edit = __('Edit');
     const allow_contact_removal = api.settings.get('allow_contact_removal');
     return html`
         <div class="modal-footer">
@@ -33,6 +34,9 @@ export const tplFooter = (el) => {
                 ></converse-icon>
                 ${i18n_refresh}</button>
             ${ (allow_contact_removal && is_roster_contact) ? remove_button(el) : '' }
+            <button type="button" class="btn btn-info" data-dismiss="modal" @click=${(ev) => el.editContact(ev)}>
+                ${i18n_edit}
+            </button>
         </div>
     `;
 }

src/shared/modals/user-details.js

@@ -4,6 +4,7 @@ import { tplUserDetailsModal, tplFooter } from "./templates/user-details.js";
 import { __ } from 'i18n';
 import { api, converse } from "@converse/headless/core";
 import { removeContact } from 'plugins/rosterview/utils.js';
+import './edit-user-details.js';
 
 const u = converse.env.utils;
 
@@ -72,6 +73,11 @@ export default class UserDetailsModal extends BaseModal {
             this.modal.hide();
         }
     }
+
+    async editContact(ev) {
+        ev?.preventDefault?.();
+        api.modal.show('converse-edit-user-details-modal', { model: this.model });
+    }
 }
 
 api.elements.define('converse-user-details-modal', UserDetailsModal);