Add ability to specify group when adding contact

src/modals/add-contact.js

@@ -12,9 +12,6 @@ const u = converse.env.utils;
 
 const AddContactModal = BootstrapModal.extend({
     id: "add-contact-modal",
-    events: {
-        'submit form': 'addContactFromForm'
-    },
 
     initialize () {
         BootstrapModal.prototype.initialize.apply(this, arguments);
@@ -22,8 +19,7 @@ const AddContactModal = BootstrapModal.extend({
     },
 
     toHTML () {
-        const label_nickname = api.settings.get('xhr_user_search_url') ? __('Contact name') : __('Optional nickname');
-        return tpl_add_contact_modal(Object.assign(this.model.toJSON(), { _converse, label_nickname }));
+        return tpl_add_contact_modal(this);
     },
 
     afterRender () {
@@ -36,6 +32,11 @@ const AddContactModal = BootstrapModal.extend({
         this.el.addEventListener('shown.bs.modal', () => jid_input.focus(), false);
     },
 
+    getGroupsAutoCompleteList () {
+        return ['apple', 'pear', 'banana'];
+        // return [...new Set(_converse.roster.map(i => i.get('gruop')).filter(i => i))];
+    },
+
     initJIDAutoComplete () {
         if (!api.settings.get('autocomplete_add_contact')) {
             return;
@@ -48,6 +49,18 @@ const AddContactModal = BootstrapModal.extend({
         });
     },
 
+    initGroupAutoComplete () {
+        if (!api.settings.get('autocomplete_add_contact')) {
+            return;
+        }
+        const el = this.el.querySelector('.suggestion-box__jid').parentElement;
+        this.jid_auto_complete = new _converse.AutoComplete(el, {
+            'data': (text, input) => `${input.slice(0, input.indexOf("@"))}@${text}`,
+            'filter': _converse.FILTER_STARTSWITH,
+            'list': [...new Set(_converse.roster.map(item => Strophe.getDomainFromJid(item.get('jid'))))]
+        });
+    },
+
     initXHRAutoComplete () {
         if (!api.settings.get('autocomplete_add_contact')) {
             return this.initXHRFetch();
@@ -94,7 +107,7 @@ const AddContactModal = BootstrapModal.extend({
                 const jid = list[0].value;
                 if (this.validateSubmission(jid)) {
                     const form = this.el.querySelector('form');
-                        const name = list[0].label;
+                    const name = list[0].label;
                     this.afterSubmission(form, jid, name);
                 }
             }
@@ -116,16 +129,19 @@ const AddContactModal = BootstrapModal.extend({
         return true;
     },
 
-    afterSubmission (form, jid, name) {
-        _converse.roster.addAndSubscribe(jid, name);
+    afterSubmission (form, jid, name, group) {
+        if (group && !Array.isArray(group)) {
+            group = [group];
+        }
+        _converse.roster.addAndSubscribe(jid, name, group);
         this.model.clear();
         this.modal.hide();
     },
 
     addContactFromForm (ev) {
         ev.preventDefault();
-        const data = new FormData(ev.target),
-                jid = (data.get('jid') || '').trim();
+        const data = new FormData(ev.target);
+        const jid = (data.get('jid') || '').trim();
 
         if (!jid && typeof api.settings.get('xhr_user_search_url') === 'string') {
             const input_el = this.el.querySelector('input[name="name"]');
@@ -134,7 +150,7 @@ const AddContactModal = BootstrapModal.extend({
             return;
         }
         if (this.validateSubmission(jid)) {
-            this.afterSubmission(ev.target, jid, data.get('name'));
+            this.afterSubmission(ev.target, jid, data.get('name'), data.get('group'));
         }
     }
 });

src/modals/templates/add-contact.js

@@ -4,13 +4,14 @@ import { html } from "lit";
 import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 
 
-export default (o) => {
-    const i18n_contact_placeholder = __('name@example.org');
+export default (el) => {
     const i18n_add = __('Add');
+    const i18n_contact_placeholder = __('name@example.org');
     const i18n_error_message = __('Please enter a valid XMPP address');
+    const i18n_group = __('Group');
     const i18n_new_contact = __('Add a Contact');
+    const i18n_nickname = __('Name');
     const i18n_xmpp_address = __('XMPP Address');
-    const i18n_nickname = __('Nickname');
     return html`
         <div class="modal-dialog" role="document">
             <div class="modal-content">
@@ -18,33 +19,33 @@ export default (o) => {
                     <h5 class="modal-title" id="addContactModalLabel">${i18n_new_contact}</h5>
                     ${modal_header_close_button}
                 </div>
-                <form class="converse-form add-xmpp-contact">
+                <form class="converse-form add-xmpp-contact" @submit=${ev => el.addContactFromForm(ev)}>
                     <div class="modal-body">
                         <span class="modal-alert"></span>
                         <div class="form-group add-xmpp-contact__jid">
                             <label class="clearfix" for="jid">${i18n_xmpp_address}:</label>
                             <div class="suggestion-box suggestion-box__jid">
-                                <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
+                                <ul class="suggestion-box__results suggestion-box__results--below" hidden=""></ul>
                                 <input type="text" name="jid" ?required=${(!api.settings.get('xhr_user_search_url'))}
-                                    value="${o.jid || ''}"
+                                    value="${el.model.get('jid') || ''}"
                                     class="form-control suggestion-box__input"
                                     placeholder="${i18n_contact_placeholder}"/>
                                 <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
                             </div>
                         </div>
+
                         <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="${o.nickname || ''}"
-                                    class="form-control suggestion-box__input"
-                                    placeholder="${i18n_nickname}"/>
-                                <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
-                            </div>
+                            <input type="text" name="name" value="${el.model.get('nickname') || ''}"
+                                class="form-control suggestion-box__input"/>
                         </div>
-                        <div class="form-group">
-                            <div class="invalid-feedback">${i18n_error_message}</div>
+
+                        <div class="form-group add-xmpp-contact__group">
+                            <label class="clearfix" for="name">${i18n_group}:</label>
+                            <converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"/>
                         </div>
+
+                        <div class="form-group"><div class="invalid-feedback">${i18n_error_message}</div></div>
                         <button type="submit" class="btn btn-primary">${i18n_add}</button>
                     </div>
                 </form>