2023-02-15 14:19:48 +01:00
|
|
|
import tplModeratorTools from './templates/moderator-tools.js';
|
2022-08-17 12:53:41 +02:00
|
|
|
import { AFFILIATIONS, ROLES } from '@converse/headless/plugins/muc/constants.js';
|
2021-07-27 12:01:12 +02:00
|
|
|
import { CustomElement } from 'shared/components/element.js';
|
|
|
|
import { __ } from 'i18n';
|
2023-02-21 10:48:05 +01:00
|
|
|
import { api, converse } from '@converse/headless/core.js';
|
|
|
|
import { getAffiliationList, getAssignableAffiliations } from '@converse/headless/plugins/muc/affiliations/utils.js';
|
2022-04-26 14:25:19 +02:00
|
|
|
import { getAssignableRoles, getAutoFetchedAffiliationLists } from '@converse/headless/plugins/muc/utils.js';
|
2021-07-27 16:38:51 +02:00
|
|
|
import { getOpenPromise } from '@converse/openpromise';
|
2021-07-27 12:01:12 +02:00
|
|
|
|
2023-02-21 09:30:29 +01:00
|
|
|
import './styles/moderator-tools.scss';
|
|
|
|
|
2023-02-21 22:53:42 +01:00
|
|
|
const { u } = converse.env;
|
2021-07-27 12:01:12 +02:00
|
|
|
|
|
|
|
export default class ModeratorTools extends CustomElement {
|
|
|
|
static get properties () {
|
|
|
|
return {
|
2021-07-27 16:38:51 +02:00
|
|
|
affiliation: { type: String },
|
2021-07-27 12:01:12 +02:00
|
|
|
affiliations_filter: { type: String, attribute: false },
|
|
|
|
alert_message: { type: String, attribute: false },
|
|
|
|
alert_type: { type: String, attribute: false },
|
2021-07-27 16:38:51 +02:00
|
|
|
jid: { type: String },
|
|
|
|
muc: { type: Object, attribute: false },
|
|
|
|
role: { type: String },
|
2021-07-27 12:01:12 +02:00
|
|
|
roles_filter: { type: String, attribute: false },
|
2022-08-21 13:03:32 +02:00
|
|
|
tab: { type: String },
|
2021-07-27 12:01:12 +02:00
|
|
|
users_with_affiliation: { type: Array, attribute: false },
|
|
|
|
users_with_role: { type: Array, attribute: false },
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
constructor () {
|
|
|
|
super();
|
2022-08-21 13:03:32 +02:00
|
|
|
this.tab = 'affiliations';
|
2021-07-27 16:38:51 +02:00
|
|
|
this.affiliation = '';
|
2021-07-27 12:01:12 +02:00
|
|
|
this.affiliations_filter = '';
|
2021-07-27 16:38:51 +02:00
|
|
|
this.role = '';
|
2021-07-27 12:01:12 +02:00
|
|
|
this.roles_filter = '';
|
2023-02-21 10:48:05 +01:00
|
|
|
|
|
|
|
this.addEventListener("affiliationChanged", () => {
|
|
|
|
this.alert(__('Affiliation changed'), 'primary');
|
|
|
|
this.onSearchAffiliationChange();
|
|
|
|
this.requestUpdate()
|
|
|
|
});
|
2023-02-21 22:53:42 +01:00
|
|
|
|
|
|
|
this.addEventListener("roleChanged", () => {
|
|
|
|
this.alert(__('Role changed'), 'primary');
|
|
|
|
this.requestUpdate()
|
|
|
|
});
|
2021-07-27 12:01:12 +02:00
|
|
|
}
|
|
|
|
|
2021-07-27 16:38:51 +02:00
|
|
|
updated (changed) {
|
|
|
|
changed.has('role') && this.onSearchRoleChange();
|
|
|
|
changed.has('affiliation') && this.onSearchAffiliationChange();
|
|
|
|
changed.has('jid') && changed.get('jid') && this.initialize();
|
|
|
|
}
|
|
|
|
|
|
|
|
async initialize () {
|
|
|
|
this.initialized = getOpenPromise();
|
|
|
|
const muc = await api.rooms.get(this.jid);
|
|
|
|
await muc.initialized;
|
|
|
|
this.muc = muc;
|
|
|
|
this.initialized.resolve();
|
2021-07-27 12:01:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2021-07-27 16:38:51 +02:00
|
|
|
if (this.muc?.occupants) {
|
2023-02-21 10:48:05 +01:00
|
|
|
const occupant = this.muc.occupants.getOwnOccupant();
|
|
|
|
return tplModeratorTools(this, {
|
2021-07-27 12:01:12 +02:00
|
|
|
'affiliations_filter': this.affiliations_filter,
|
|
|
|
'alert_message': this.alert_message,
|
|
|
|
'alert_type': this.alert_type,
|
|
|
|
'assignRole': ev => this.assignRole(ev),
|
|
|
|
'assignable_affiliations': getAssignableAffiliations(occupant),
|
|
|
|
'assignable_roles': getAssignableRoles(occupant),
|
|
|
|
'filterAffiliationResults': ev => this.filterAffiliationResults(ev),
|
|
|
|
'filterRoleResults': ev => this.filterRoleResults(ev),
|
|
|
|
'loading_users_with_affiliation': this.loading_users_with_affiliation,
|
|
|
|
'queryAffiliation': ev => this.queryAffiliation(ev),
|
|
|
|
'queryRole': ev => this.queryRole(ev),
|
2023-02-21 10:48:05 +01:00
|
|
|
'queryable_affiliations': AFFILIATIONS.filter(
|
|
|
|
a => !api.settings.get('modtools_disable_query').includes(a)
|
|
|
|
),
|
2021-07-27 12:01:12 +02:00
|
|
|
'queryable_roles': ROLES.filter(a => !api.settings.get('modtools_disable_query').includes(a)),
|
|
|
|
'roles_filter': this.roles_filter,
|
|
|
|
'switchTab': ev => this.switchTab(ev),
|
2022-08-21 13:03:32 +02:00
|
|
|
'tab': this.tab,
|
2021-07-27 12:01:12 +02:00
|
|
|
'toggleForm': ev => this.toggleForm(ev),
|
|
|
|
'users_with_affiliation': this.users_with_affiliation,
|
|
|
|
'users_with_role': this.users_with_role,
|
2023-02-21 10:48:05 +01:00
|
|
|
});
|
2021-07-27 16:38:51 +02:00
|
|
|
} else {
|
|
|
|
return '';
|
|
|
|
}
|
2021-07-27 12:01:12 +02:00
|
|
|
}
|
|
|
|
|
2022-08-21 13:03:32 +02:00
|
|
|
switchTab (ev) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
this.tab = ev.target.getAttribute('data-name');
|
|
|
|
this.requestUpdate();
|
|
|
|
}
|
|
|
|
|
2021-07-27 12:01:12 +02:00
|
|
|
async onSearchAffiliationChange () {
|
2023-02-21 10:48:05 +01:00
|
|
|
if (!this.affiliation) return;
|
|
|
|
|
2021-07-27 16:38:51 +02:00
|
|
|
await this.initialized;
|
2021-07-27 12:01:12 +02:00
|
|
|
this.clearAlert();
|
|
|
|
this.loading_users_with_affiliation = true;
|
|
|
|
this.users_with_affiliation = null;
|
|
|
|
|
|
|
|
if (this.shouldFetchAffiliationsList()) {
|
2021-07-27 16:38:51 +02:00
|
|
|
const result = await getAffiliationList(this.affiliation, this.jid);
|
2021-07-27 12:01:12 +02:00
|
|
|
if (result instanceof Error) {
|
|
|
|
this.alert(result.message, 'danger');
|
|
|
|
this.users_with_affiliation = [];
|
|
|
|
} else {
|
|
|
|
this.users_with_affiliation = result;
|
|
|
|
}
|
|
|
|
} else {
|
2021-07-27 16:38:51 +02:00
|
|
|
this.users_with_affiliation = this.muc.getOccupantsWithAffiliation(this.affiliation);
|
2021-07-27 12:01:12 +02:00
|
|
|
}
|
|
|
|
this.loading_users_with_affiliation = false;
|
|
|
|
}
|
|
|
|
|
2021-07-27 16:38:51 +02:00
|
|
|
async onSearchRoleChange () {
|
|
|
|
if (!this.role) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
await this.initialized;
|
2021-07-27 12:01:12 +02:00
|
|
|
this.clearAlert();
|
2021-07-27 16:38:51 +02:00
|
|
|
this.users_with_role = this.muc.getOccupantsWithRole(this.role);
|
2021-07-27 12:01:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
shouldFetchAffiliationsList () {
|
2021-07-27 16:38:51 +02:00
|
|
|
const affiliation = this.affiliation;
|
2021-07-27 12:01:12 +02:00
|
|
|
if (affiliation === 'none') {
|
|
|
|
return false;
|
|
|
|
}
|
2022-04-26 14:25:19 +02:00
|
|
|
const auto_fetched_affs = getAutoFetchedAffiliationLists();
|
2021-07-27 12:01:12 +02:00
|
|
|
if (auto_fetched_affs.includes(affiliation)) {
|
|
|
|
return false;
|
|
|
|
} else {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-02-21 10:48:05 +01:00
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
|
|
toggleForm (ev) {
|
2021-07-27 12:01:12 +02:00
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
2021-08-06 13:38:12 +02:00
|
|
|
const toggle = u.ancestor(ev.target, '.toggle-form');
|
2023-02-21 10:48:05 +01:00
|
|
|
const sel = toggle.getAttribute('data-form');
|
|
|
|
const form = u.ancestor(toggle, '.list-group-item').querySelector(sel);
|
2021-07-27 12:01:12 +02:00
|
|
|
if (u.hasClass('hidden', form)) {
|
|
|
|
u.removeClass('hidden', form);
|
|
|
|
} else {
|
|
|
|
u.addClass('hidden', form);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
filterRoleResults (ev) {
|
|
|
|
this.roles_filter = ev.target.value;
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
|
|
|
|
filterAffiliationResults (ev) {
|
|
|
|
this.affiliations_filter = ev.target.value;
|
|
|
|
}
|
|
|
|
|
|
|
|
queryRole (ev) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
const data = new FormData(ev.target);
|
|
|
|
const role = data.get('role');
|
2021-07-27 16:38:51 +02:00
|
|
|
this.role = null;
|
|
|
|
this.role = role;
|
2021-07-27 12:01:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
queryAffiliation (ev) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
const data = new FormData(ev.target);
|
|
|
|
const affiliation = data.get('affiliation');
|
2021-07-27 16:38:51 +02:00
|
|
|
this.affiliation = null;
|
|
|
|
this.affiliation = affiliation;
|
2021-07-27 12:01:12 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
alert (message, type) {
|
|
|
|
this.alert_message = message;
|
|
|
|
this.alert_type = type;
|
|
|
|
}
|
|
|
|
|
|
|
|
clearAlert () {
|
|
|
|
this.alert_message = undefined;
|
|
|
|
this.alert_type = undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
api.elements.define('converse-modtools', ModeratorTools);
|