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

Add the role form to the occupant modal

Browse Source
This commit is contained in:
JC Brand 2023-02-21 23:07:00 +01:00
parent 85181053e6
commit 56259fd22e
3 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGES.md
View File

@ -1,5 +1,9 @@
# Changelog
## 10.1.3 (Unreleased)
- Add the ability to set roles and affiliations via the MUC occupant modal
## 10.1.2 (2023-02-17)
- #1490: Busy-loop when fetching registration form fails

16
src/plugins/muc-views/modals/occupant.js
View File

@ -2,13 +2,16 @@ import BaseModal from "plugins/modal/modal.js";
import tplOccupantModal from "./templates/occupant.js";
import { Model } from '@converse/skeletor/src/model.js';
import { __ } from 'i18n';
import { _converse, api } from "@converse/headless/core";
import { _converse, api, converse } from "@converse/headless/core";
const { u } = converse.env;
export default class OccupantModal extends BaseModal {
constructor () {
super();
this.addEventListener("affiliationChanged", () => this.alert(__('Affiliation changed')));
this.addEventListener("roleChanged", () => this.alert(__('role changed')));
}
initialize () {
@ -48,8 +51,15 @@ export default class OccupantModal extends BaseModal {
if (jid) api.modal.show('converse-add-contact-modal', {'model': new Model({ jid })});
}
toggleForm () {
this.show_affiliation_form = !this.show_affiliation_form;
toggleForm (ev) {
const toggle = u.ancestor(ev.target, '.toggle-form');
const form = toggle.getAttribute('data-form');
if (form === 'row-form') {
this.show_role_form = !this.show_role_form;
} else {
this.show_affiliation_form = !this.show_affiliation_form;
}
this.render();
}
}

16
src/plugins/muc-views/modals/templates/occupant.js
View File

@ -49,15 +49,23 @@ export default (el) => {
data-form="affiliation-form"
class="toggle-form right"
color="var(--subdued-color)"
@click=${() => el.toggleForm()}>
<converse-icon class="fa fa-wrench" size="1em"></converse-icon>
@click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
</a>
${ el.show_affiliation_form ? html`<converse-muc-affiliation-form jid=${jid} .muc=${muc} affiliation=${affiliation}></converse-muc-affiliation-form>` : '' }
</div>
</li>
<li>
${ role ? html`<div class="row"><strong>${__('Role')}:</strong></div><div class="row">${role}</div>` : '' }
<div class="row"><strong>${__('Role')}:</strong></div>
<div class="row">${role}&nbsp;
${ role ? html`
<a href="#"
data-form="row-form"
class="toggle-form right"
color="var(--subdued-color)"
@click=${(ev) => el.toggleForm(ev)}><converse-icon class="fa fa-wrench" size="1em"></converse-icon>
</a>
${ el.show_role_form ? html`<converse-muc-role-form jid=${jid} .muc=${muc} role=${role}></converse-muc-role-form>` : '' }` : '' }
</div>
</li>
<li>
${ hats ? html`<div class="row"><strong>${__('Hats')}:</strong></div><div class="row">${hats}</div>` : '' }