Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add ability to specify group when adding contact

Browse Source
This commit is contained in:
JC Brand 2022-04-14 22:56:56 +02:00
parent ab7e879261
commit 2a7bfd13b5
2 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/modals/add-contact.js
View File

@ -12,9 +12,6 @@ const u = converse.env.utils;
const AddContactModal = BootstrapModal.extend({ const AddContactModal = BootstrapModal.extend({
id: "add-contact-modal", id: "add-contact-modal",
events: {
'submit form': 'addContactFromForm'
},
initialize () { initialize () {
BootstrapModal.prototype.initialize.apply(this, arguments); BootstrapModal.prototype.initialize.apply(this, arguments);
@ -22,8 +19,7 @@ const AddContactModal = BootstrapModal.extend({
}, },
toHTML () { toHTML () {
const label_nickname = api.settings.get('xhr_user_search_url') ? __('Contact name') : __('Optional nickname'); return tpl_add_contact_modal(this);
return tpl_add_contact_modal(Object.assign(this.model.toJSON(), { _converse, label_nickname }));
}, },
afterRender () { afterRender () {
@ -36,6 +32,11 @@ const AddContactModal = BootstrapModal.extend({
this.el.addEventListener('shown.bs.modal', () => jid_input.focus(), false); 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 () { initJIDAutoComplete () {
if (!api.settings.get('autocomplete_add_contact')) { if (!api.settings.get('autocomplete_add_contact')) {
return; 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 () { initXHRAutoComplete () {
if (!api.settings.get('autocomplete_add_contact')) { if (!api.settings.get('autocomplete_add_contact')) {
return this.initXHRFetch(); return this.initXHRFetch();
@ -94,7 +107,7 @@ const AddContactModal = BootstrapModal.extend({
const jid = list[0].value; const jid = list[0].value;
if (this.validateSubmission(jid)) { if (this.validateSubmission(jid)) {
const form = this.el.querySelector('form'); const form = this.el.querySelector('form');
const name = list[0].label; const name = list[0].label;
this.afterSubmission(form, jid, name); this.afterSubmission(form, jid, name);
} }
} }
@ -116,16 +129,19 @@ const AddContactModal = BootstrapModal.extend({
return true; return true;
}, },
afterSubmission (form, jid, name) { afterSubmission (form, jid, name, group) {
_converse.roster.addAndSubscribe(jid, name); if (group && !Array.isArray(group)) {
group = [group];
}
_converse.roster.addAndSubscribe(jid, name, group);
this.model.clear(); this.model.clear();
this.modal.hide(); this.modal.hide();
}, },
addContactFromForm (ev) { addContactFromForm (ev) {
ev.preventDefault(); ev.preventDefault();
const data = new FormData(ev.target), const data = new FormData(ev.target);
jid = (data.get('jid') || '').trim(); const jid = (data.get('jid') || '').trim();
if (!jid && typeof api.settings.get('xhr_user_search_url') === 'string') { if (!jid && typeof api.settings.get('xhr_user_search_url') === 'string') {
const input_el = this.el.querySelector('input[name="name"]'); const input_el = this.el.querySelector('input[name="name"]');
@ -134,7 +150,7 @@ const AddContactModal = BootstrapModal.extend({
return; return;
} }
if (this.validateSubmission(jid)) { if (this.validateSubmission(jid)) {
this.afterSubmission(ev.target, jid, data.get('name')); this.afterSubmission(ev.target, jid, data.get('name'), data.get('group'));
} }
} }
}); });

31
src/modals/templates/add-contact.js
View File

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