modtools: Replace Backbone.View events with lit-html events

src/converse-muc-views.js

@@ -223,14 +223,6 @@ converse.plugins.add('converse-muc-views', {
 
         _converse.ModeratorToolsModal = _converse.BootstrapModal.extend({
             id: "converse-modtools-modal",
-            events: {
-                'submit .affiliation-form': 'assignAffiliation',
-                'submit .role-form': 'assignRole',
-                'submit .query-affiliation': 'queryAffiliation',
-                'submit .query-role': 'queryRole',
-                'click  .nav-item .nav-link': 'switchTab',
-                'click .toggle-form': 'toggleForm',
-            },
 
             initialize (attrs) {
                 this.chatroomview = attrs.chatroomview;
@@ -270,8 +262,14 @@ converse.plugins.add('converse-muc-views', {
                     allowed_affiliations,
                     allowed_roles,
                     'affiliations': [...AFFILIATIONS, 'none'],
+                    'assignAffiliation': ev => this.assignAffiliation(ev),
+                    'assignRole': ev => this.assignRole(ev),
                     'loading_users_with_affiliation': this.loading_users_with_affiliation,
+                    'queryAffiliation': ev => this.queryAffiliation(ev),
+                    'queryRole': ev => this.queryRole(ev),
                     'roles': ROLES,
+                    'switchTab': ev => this.switchTab(ev),
+                    'toggleForm': ev => this.toggleForm(ev),
                     'users_with_affiliation': this.users_with_affiliation,
                     'users_with_role': this.users_with_role
                 }));

src/templates/moderator_tools_modal.js

@@ -74,8 +74,8 @@ const role_list_item = (o) => html`
                 <div><strong>Nickname:</strong> ${o.item.nick}</div>
             </li>
             <li class="list-group-item">
-                <div><strong>Role:</strong> ${o.item.role}<a href="#" data-form="role-form" class="toggle-form right fa fa-wrench"></a></div>
-                <form class="role-form hidden">
+                <div><strong>Role:</strong> ${o.item.role}<a href="#" data-form="role-form" class="toggle-form right fa fa-wrench" @click=${o.toggleForm}></a></div>
+                <form class="role-form hidden" @submit=${o.assignRole}>
                     <div class="form-group">
                         <input type="hidden" name="jid" value="${o.item.jid}"/>
                         <input type="hidden" name="nick" value="${o.item.nick}"/>
@@ -112,8 +112,8 @@ const affiliation_list_item = (o) => html`
                 <div><strong>Nickname:</strong> ${o.item.nick}</div>
             </li>
             <li class="list-group-item">
-                <div><strong>Affiliation:</strong> ${o.item.affiliation} <a href="#" data-form="affiliation-form" class="toggle-form right fa fa-wrench"></a></div>
-                <form class="affiliation-form hidden">
+                <div><strong>Affiliation:</strong> ${o.item.affiliation} <a href="#" data-form="affiliation-form" class="toggle-form right fa fa-wrench" @click=${o.toggleForm}></a></div>
+                <form class="affiliation-form hidden" @submit=${o.assignAffiliation}>
                     <div class="form-group">
                         <input type="hidden" name="jid" value="${o.item.jid}"/>
                         <input type="hidden" name="nick" value="${o.item.nick}"/>
@@ -152,16 +152,16 @@ export default (o) => html`
 
                 <ul class="nav nav-pills justify-content-center">
                     <li role="presentation" class="nav-item">
-                        <a class="nav-link active" id="affiliations-tab" href="#affiliations-tabpanel" aria-controls="affiliations-tabpanel" role="tab" data-toggle="tab">Affiliations</a>
+                        <a class="nav-link active" id="affiliations-tab" href="#affiliations-tabpanel" aria-controls="affiliations-tabpanel" role="tab" data-toggle="tab" @click=${o.switchTab}>Affiliations</a>
                     </li>
                     <li role="presentation" class="nav-item">
-                        <a class="nav-link" id="roles-tab" href="#roles-tabpanel" aria-controls="roles-tabpanel" role="tab" data-toggle="tab">Roles</a>
+                        <a class="nav-link" id="roles-tab" href="#roles-tabpanel" aria-controls="roles-tabpanel" role="tab" data-toggle="tab" @click=${o.switchTab}>Roles</a>
                     </li>
                 </ul>
 
                 <div class="tab-content">
                     <div class="tab-pane tab-pane--columns active" id="affiliations-tabpanel" role="tabpanel" aria-labelledby="affiliations-tab">
-                        <form class="converse-form query-affiliation">
+                        <form class="converse-form query-affiliation" @submit=${o.queryAffiliation}>
                             <p class="helptext pb-3">${i18n_helptext_affiliation}</p>
                             <div class="form-group">
                                 <label for="affiliation">
@@ -194,7 +194,7 @@ export default (o) => html`
                     </div>
 
                     <div class="tab-pane tab-pane--columns" id="roles-tabpanel" role="tabpanel" aria-labelledby="roles-tab">
-                        <form class="converse-form query-role">
+                        <form class="converse-form query-role" @submit=${o.queryRole}>
                             <p class="helptext pb-3">${i18n_helptext_role}</p>
                             <div class="form-group">
                                 <label for="role"><strong>${i18n_role}:</strong></label>