78 lines
3.5 KiB
JavaScript
78 lines
3.5 KiB
JavaScript
import tpl_group from "./group.js";
|
|
import { __ } from 'i18n';
|
|
import { _converse, api } from "@converse/headless/core";
|
|
import { contactsComparator, groupsComparator } from '@converse/headless/plugins/roster/utils.js';
|
|
import { html } from "lit";
|
|
import { repeat } from 'lit/directives/repeat.js';
|
|
import { shouldShowContact, shouldShowGroup } from '../utils.js';
|
|
|
|
|
|
function populateContactsMap (contacts_map, contact) {
|
|
if (contact.get('ask') === 'subscribe') {
|
|
const name = _converse.HEADER_PENDING_CONTACTS;
|
|
contacts_map[name] ? contacts_map[name].push(contact) : (contacts_map[name] = [contact]);
|
|
} else if (contact.get('requesting')) {
|
|
const name = _converse.HEADER_REQUESTING_CONTACTS;
|
|
contacts_map[name] ? contacts_map[name].push(contact) : (contacts_map[name] = [contact]);
|
|
} else {
|
|
let contact_groups;
|
|
if (api.settings.get('roster_groups')) {
|
|
contact_groups = contact.get('groups');
|
|
contact_groups = (contact_groups.length === 0) ? [_converse.HEADER_UNGROUPED] : contact_groups;
|
|
} else {
|
|
contact_groups = [_converse.HEADER_CURRENT_CONTACTS];
|
|
}
|
|
for (const name of contact_groups) {
|
|
contacts_map[name] ? contacts_map[name].push(contact) : (contacts_map[name] = [contact]);
|
|
}
|
|
}
|
|
if (contact.get('num_unread')) {
|
|
const name = _converse.HEADER_UNREAD;
|
|
contacts_map[name] ? contacts_map[name].push(contact) : (contacts_map[name] = [contact]);
|
|
}
|
|
return contacts_map;
|
|
}
|
|
|
|
|
|
export default (el) => {
|
|
const i18n_heading_contacts = __('Contacts');
|
|
const i18n_title_add_contact = __('Add a contact');
|
|
const i18n_title_sync_contacts = __('Re-sync your contacts');
|
|
const roster = _converse.roster || [];
|
|
const contacts_map = roster.reduce((acc, contact) => populateContactsMap(acc, contact), {});
|
|
const groupnames = Object.keys(contacts_map).filter(shouldShowGroup);
|
|
groupnames.sort(groupsComparator);
|
|
|
|
return html`
|
|
<div class="d-flex controlbox-padded">
|
|
<span class="w-100 controlbox-heading controlbox-heading--contacts">${i18n_heading_contacts}</span>
|
|
<a class="controlbox-heading__btn sync-contacts" @click=${ev => el.syncContacts(ev)} title="${i18n_title_sync_contacts}">
|
|
<converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon>
|
|
</a>
|
|
${ api.settings.get('allow_contact_requests') ? html`
|
|
<a class="controlbox-heading__btn add-contact"
|
|
@click=${ev => el.showAddContactModal(ev)}
|
|
title="${i18n_title_add_contact}"
|
|
data-toggle="modal"
|
|
data-target="#add-contact-modal">
|
|
<converse-icon class="fa fa-user-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1.25em"></converse-icon>
|
|
</a>` : '' }
|
|
</div>
|
|
<converse-roster-filter></converse-roster-filter>
|
|
<div class="list-container roster-contacts">
|
|
${ repeat(groupnames, n => n, name => {
|
|
const contacts = contacts_map[name].filter(c => shouldShowContact(c, name));
|
|
contacts.sort(contactsComparator);
|
|
if (contacts.length) {
|
|
return tpl_group({
|
|
'contacts': contacts,
|
|
'name': name,
|
|
});
|
|
} else {
|
|
return '';
|
|
}
|
|
}) }
|
|
</div>
|
|
`;
|
|
}
|