Fix groups auto-complete for add-contact modal

src/headless/plugins/roster/utils.js

@@ -182,7 +182,6 @@ export function onRosterContactsFetched () {
     });
 }
 
-
 /**
  * Reject or cancel another user's subscription to our presence updates.
  * @function rejectPresenceSubscription
@@ -195,7 +194,6 @@ export function rejectPresenceSubscription (jid, message) {
     api.send(pres);
 }
 
-
 export function contactsComparator (contact1, contact2) {
     const status1 = contact1.presence.get('show') || 'offline';
     const status2 = contact2.presence.get('show') || 'offline';
@@ -208,7 +206,6 @@ export function contactsComparator (contact1, contact2) {
     }
 }
 
-
 export function groupsComparator (a, b) {
     const HEADER_WEIGHTS = {};
     HEADER_WEIGHTS[_converse.HEADER_UNREAD] = 0;
@@ -233,3 +230,9 @@ export function groupsComparator (a, b) {
         return WEIGHTS[a] < WEIGHTS[b_header] ? -1 : (WEIGHTS[a] > WEIGHTS[b_header] ? 1 : 0);
     }
 }
+
+export function getGroupsAutoCompleteList () {
+    const { roster } = _converse;
+    const groups = roster.reduce((groups, contact) => groups.concat(contact.get('groups')), []);
+    return [...new Set(groups.filter(i => i))];
+}

src/plugins/rosterview/modals/add-contact.js

@@ -32,11 +32,6 @@ 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;

src/plugins/rosterview/modals/templates/add-contact.js

@@ -1,5 +1,6 @@
 import { __ } from 'i18n';
 import { api } from '@converse/headless/core.js';
+import { getGroupsAutoCompleteList } from '@converse/headless/plugins/roster/utils.js';
 import { html } from "lit";
 import { modal_header_close_button } from "plugins/modal/templates/buttons.js"
 
@@ -46,7 +47,7 @@ export default (el) => {
 
                         <div class="form-group add-xmpp-contact__group">
                             <label class="clearfix" for="name">${i18n_group}:</label>
-                            <converse-autocomplete .getAutoCompleteList="${() => el.getGroupsAutoCompleteList()}" name="group"></converse-autocomplete>
+                            <converse-autocomplete .list=${getGroupsAutoCompleteList()} name="group"></converse-autocomplete>
                         </div>
 
                         <div class="form-group"><div class="invalid-feedback">${i18n_error_message}</div></div>