Add the role form to the occupant modal

CHANGES.md

@@ -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

src/plugins/muc-views/modals/occupant.js

@@ -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();
     }
 }

src/plugins/muc-views/modals/templates/occupant.js

@@ -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>` : '' }