Move ModeratorToolsModal to separate file

src/components/dropdown.js

@@ -9,12 +9,6 @@ const u = converse.env.utils;
 
 export class BaseDropdown extends CustomElement {
 
-    static get properties () {
-        return {
-            '': { type: Array }
-        }
-    }
-
     firstUpdated () {
         this.menu = this.querySelector('.dropdown-menu');
         this.dropdown = this.firstElementChild;

src/converse-muc-views.js

@@ -4,15 +4,9 @@
  * @description XEP-0045 Multi-User Chat Views
  * @license Mozilla Public License (MPLv2)
  */
-import "converse-modal";
 import "@converse/headless/utils/muc";
-import { BootstrapModal } from "./converse-modal.js";
-import { Model } from 'skeletor.js/src/model.js';
-import { View } from 'skeletor.js/src/view.js';
-import { __ } from '@converse/headless/i18n';
-import { api, converse } from "@converse/headless/converse-core";
-import { debounce, head, isString, isUndefined } from "lodash";
-import { render } from "lit-html";
+import "converse-modal";
+import ModeratorToolsModal from "./modals/moderator-tools.js";
 import RoomDetailsModal from 'modals/muc-details.js';
 import log from "@converse/headless/log";
 import st from "@converse/headless/utils/stanza";
@@ -25,7 +19,6 @@ import tpl_chatroom_head from "templates/chatroom_head.js";
 import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html";
 import tpl_info from "templates/info.html";
 import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
-import tpl_moderator_tools_modal from "templates/moderator_tools_modal.js";
 import tpl_muc_config_form from "templates/muc_config_form.js";
 import tpl_muc_invite_modal from "templates/muc_invite_modal.js";
 import tpl_muc_password_form from "templates/muc_password_form.js";
@@ -33,12 +26,17 @@ import tpl_muc_sidebar from "templates/muc_sidebar.js";
 import tpl_room_description from "templates/room_description.html";
 import tpl_room_panel from "templates/room_panel.html";
 import tpl_spinner from "templates/spinner.html";
+import { BootstrapModal } from "./converse-modal.js";
+import { Model } from 'skeletor.js/src/model.js';
+import { View } from 'skeletor.js/src/view.js';
+import { __ } from '@converse/headless/i18n';
+import { api, converse } from "@converse/headless/converse-core";
+import { debounce, head, isString, isUndefined } from "lodash";
+import { render } from "lit-html";
 
 const { Strophe, sizzle, $iq, $pres } = converse.env;
 const u = converse.env.utils;
 
-const ROLES = ['moderator', 'participant', 'visitor'];
-const AFFILIATIONS = ['owner', 'admin', 'member', 'outcast', 'none'];
 const OWNER_COMMANDS = ['owner'];
 const ADMIN_COMMANDS = ['admin', 'ban', 'deop', 'destroy', 'member', 'op', 'revoke'];
 const MODERATOR_COMMANDS = ['kick', 'mute', 'voice', 'modtools'];
@@ -219,189 +217,6 @@ converse.plugins.add('converse-muc-views', {
         }
 
 
-        _converse.ModeratorToolsModal = BootstrapModal.extend({
-            id: "converse-modtools-modal",
-
-            initialize (attrs) {
-                this.chatroomview = attrs.chatroomview;
-                BootstrapModal.prototype.initialize.apply(this, arguments);
-
-                this.affiliations_filter = '';
-                this.roles_filter = '';
-
-                this.listenTo(this.model, 'change:role', () => {
-                    this.users_with_role = this.chatroomview.model.getOccupantsWithRole(this.model.get('role'));
-                    this.render();
-                });
-                this.listenTo(this.model, 'change:affiliation', async () => {
-                    this.loading_users_with_affiliation = true;
-                    this.users_with_affiliation = null;
-                    this.render();
-                    const chatroom = this.chatroomview.model;
-                    const affiliation = this.model.get('affiliation');
-                    if (this.shouldFetchAffiliationsList()) {
-                        this.users_with_affiliation = await chatroom.getAffiliationList(affiliation);
-                    } else {
-                        this.users_with_affiliation = chatroom.getOccupantsWithAffiliation(affiliation);
-                    }
-                    this.loading_users_with_affiliation = false;
-                    this.render();
-                });
-            },
-
-            toHTML () {
-                const occupant = this.chatroomview.model.occupants.findWhere({'jid': _converse.bare_jid});
-                return tpl_moderator_tools_modal(Object.assign(this.model.toJSON(), {
-                    'affiliations_filter': this.affiliations_filter,
-                    'assignAffiliation': ev => this.assignAffiliation(ev),
-                    'assignRole': ev => this.assignRole(ev),
-                    'assignable_affiliations': this.getAssignableAffiliations(occupant),
-                    'assignable_roles': this.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),
-                    'queryable_affiliations': AFFILIATIONS.filter(a => !_converse.modtools_disable_query.includes(a)),
-                    'queryable_roles': ROLES.filter(a => !_converse.modtools_disable_query.includes(a)),
-                    'roles_filter': this.roles_filter,
-                    'switchTab': ev => this.switchTab(ev),
-                    'toggleForm': ev => this.toggleForm(ev),
-                    'users_with_affiliation': this.users_with_affiliation,
-                    'users_with_role': this.users_with_role
-                }));
-            },
-
-            getAssignableAffiliations (occupant) {
-                const disabled = _converse.modtools_disable_assign;
-                if (!Array.isArray(disabled)) {
-                    return disabled ? [] : AFFILIATIONS;
-                } else if (occupant.get('affiliation') === 'owner') {
-                    return AFFILIATIONS.filter(a => !disabled.includes(a));
-                } else if (occupant.get('affiliation') === 'admin') {
-                    return AFFILIATIONS.filter(a => !['owner', ...disabled].includes(a));
-                } else {
-                    return [];
-                }
-            },
-
-            getAssignableRoles (occupant) {
-                const disabled = _converse.modtools_disable_assign;
-                if (!Array.isArray(disabled)) {
-                    return disabled ? [] : ROLES;
-                } else if (occupant.get('role') === 'moderator') {
-                    return ROLES.filter(r => !disabled.includes(r));
-                } else {
-                    return [];
-                }
-            },
-
-            shouldFetchAffiliationsList () {
-                const affiliation = this.model.get('affiliation');
-                if (affiliation === 'none') {
-                    return false;
-                }
-                const chatroom = this.chatroomview.model;
-                const auto_fetched_affs = chatroom.occupants.getAutoFetchedAffiliationLists();
-                if (auto_fetched_affs.includes(affiliation)) {
-                    return false;
-                } else {
-                    return true;
-                }
-            },
-
-            toggleForm (ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
-                const form_class = ev.target.getAttribute('data-form');
-                const form = u.ancestor(ev.target, '.list-group-item').querySelector(`.${form_class}`);
-                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;
-                this.render();
-            },
-
-            queryRole (ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
-                const data = new FormData(ev.target);
-                const role = data.get('role');
-                this.model.set({'role': null}, {'silent': true});
-                this.model.set({'role': role});
-            },
-
-            queryAffiliation (ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
-                const data = new FormData(ev.target);
-                const affiliation = data.get('affiliation');
-                this.model.set({'affiliation': null}, {'silent': true});
-                this.model.set({'affiliation': affiliation});
-            },
-
-            assignAffiliation (ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
-                const data = new FormData(ev.target);
-                const affiliation = data.get('affiliation');
-                const attrs = {
-                    'jid': data.get('jid'),
-                    'reason': data.get('reason')
-                }
-                const current_affiliation = this.model.get('affiliation');
-                this.chatroomview.model.setAffiliation(affiliation, [attrs])
-                    .then(async () => {
-                        this.alert(__('Affiliation changed'), 'primary');
-                        await this.chatroomview.model.occupants.fetchMembers()
-                        this.model.set({'affiliation': null}, {'silent': true});
-                        this.model.set({'affiliation': current_affiliation});
-                    })
-                    .catch(err => {
-                        this.alert(__('Sorry, something went wrong while trying to set the affiliation'), 'danger');
-                        log.error(err);
-                    });
-            },
-
-            assignRole (ev) {
-                ev.stopPropagation();
-                ev.preventDefault();
-                const data = new FormData(ev.target);
-                const occupant = this.chatroomview.model.getOccupant(data.get('jid') || data.get('nick'));
-                const role = data.get('role');
-                const reason = data.get('reason');
-                const current_role = this.model.get('role');
-                this.chatroomview.model.setRole(occupant, role, reason,
-                    () => {
-                        this.alert(__('Role changed'), 'primary');
-                        this.model.set({'role': null}, {'silent': true});
-                        this.model.set({'role': current_role});
-                    },
-                    (e) => {
-                        if (sizzle(`not-allowed[xmlns="${Strophe.NS.STANZAS}"]`, e).length) {
-                            this.alert(__('You\'re not allowed to make that change'), 'danger');
-                        } else {
-                            this.alert(__('Sorry, something went wrong while trying to set the role'), 'danger');
-                            if (u.isErrorObject(e)) {
-                                log.error(e);
-                            }
-                        }
-                    }
-                );
-            }
-        });
-
-
         _converse.ListChatRoomsModal = BootstrapModal.extend({
             id: "list-chatrooms-modal",
 
@@ -1057,7 +872,7 @@ converse.plugins.add('converse-muc-views', {
                 }
                 if (isUndefined(this.model.modtools_modal)) {
                     const model = new Model({'affiliation': affiliation});
-                    this.modtools_modal = new _converse.ModeratorToolsModal({'model': model, 'chatroomview': this});
+                    this.modtools_modal = new ModeratorToolsModal({model, _converse, 'chatroomview': this});
                 } else {
                     this.modtools_modal.set('affiliation', affiliation);
                 }

src/headless/converse-muc.js

@@ -16,6 +16,9 @@ import muc_utils from "./utils/muc";
 import st from "./utils/stanza";
 import u from "./utils/form";
 
+export const ROLES = ['moderator', 'participant', 'visitor'];
+export const AFFILIATIONS = ['owner', 'admin', 'member', 'outcast', 'none'];
+
 converse.MUC_TRAFFIC_STATES = ['entered', 'exited'];
 converse.MUC_ROLE_CHANGES = ['op', 'deop', 'voice', 'mute'];
 

src/modals/moderator-tools.js

@@ -0,0 +1,195 @@
+import log from "@converse/headless/log";
+import sizzle from "sizzle";
+import tpl_moderator_tools_modal from "../templates/moderator_tools_modal.js";
+import { AFFILIATIONS, ROLES } from "@converse/headless/converse-muc.js";
+import { BootstrapModal } from "../converse-modal.js";
+import { __ } from '@converse/headless/i18n';
+import { converse } from "@converse/headless/converse-core";
+
+const { Strophe } = converse.env;
+const u = converse.env.utils;
+let _converse;
+
+
+export default BootstrapModal.extend({
+    id: "converse-modtools-modal",
+
+    initialize (attrs) {
+        _converse  = attrs._converse;
+        this.chatroomview = attrs.chatroomview;
+        BootstrapModal.prototype.initialize.apply(this, arguments);
+
+        this.affiliations_filter = '';
+        this.roles_filter = '';
+
+        this.listenTo(this.model, 'change:role', () => {
+            this.users_with_role = this.chatroomview.model.getOccupantsWithRole(this.model.get('role'));
+            this.render();
+        });
+        this.listenTo(this.model, 'change:affiliation', async () => {
+            this.loading_users_with_affiliation = true;
+            this.users_with_affiliation = null;
+            this.render();
+            const chatroom = this.chatroomview.model;
+            const affiliation = this.model.get('affiliation');
+            if (this.shouldFetchAffiliationsList()) {
+                this.users_with_affiliation = await chatroom.getAffiliationList(affiliation);
+            } else {
+                this.users_with_affiliation = chatroom.getOccupantsWithAffiliation(affiliation);
+            }
+            this.loading_users_with_affiliation = false;
+            this.render();
+        });
+    },
+
+    toHTML () {
+        const occupant = this.chatroomview.model.occupants.findWhere({'jid': _converse.bare_jid});
+        return tpl_moderator_tools_modal(Object.assign(this.model.toJSON(), {
+            'affiliations_filter': this.affiliations_filter,
+            'assignAffiliation': ev => this.assignAffiliation(ev),
+            'assignRole': ev => this.assignRole(ev),
+            'assignable_affiliations': this.getAssignableAffiliations(occupant),
+            'assignable_roles': this.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),
+            'queryable_affiliations': AFFILIATIONS.filter(a => !_converse.modtools_disable_query.includes(a)),
+            'queryable_roles': ROLES.filter(a => !_converse.modtools_disable_query.includes(a)),
+            'roles_filter': this.roles_filter,
+            'switchTab': ev => this.switchTab(ev),
+            'toggleForm': ev => this.toggleForm(ev),
+            'users_with_affiliation': this.users_with_affiliation,
+            'users_with_role': this.users_with_role
+        }));
+    },
+
+    getAssignableAffiliations (occupant) {
+        const disabled = _converse.modtools_disable_assign;
+        if (!Array.isArray(disabled)) {
+            return disabled ? [] : AFFILIATIONS;
+        } else if (occupant.get('affiliation') === 'owner') {
+            return AFFILIATIONS.filter(a => !disabled.includes(a));
+        } else if (occupant.get('affiliation') === 'admin') {
+            return AFFILIATIONS.filter(a => !['owner', ...disabled].includes(a));
+        } else {
+            return [];
+        }
+    },
+
+    getAssignableRoles (occupant) {
+        const disabled = _converse.modtools_disable_assign;
+        if (!Array.isArray(disabled)) {
+            return disabled ? [] : ROLES;
+        } else if (occupant.get('role') === 'moderator') {
+            return ROLES.filter(r => !disabled.includes(r));
+        } else {
+            return [];
+        }
+    },
+
+    shouldFetchAffiliationsList () {
+        const affiliation = this.model.get('affiliation');
+        if (affiliation === 'none') {
+            return false;
+        }
+        const chatroom = this.chatroomview.model;
+        const auto_fetched_affs = chatroom.occupants.getAutoFetchedAffiliationLists();
+        if (auto_fetched_affs.includes(affiliation)) {
+            return false;
+        } else {
+            return true;
+        }
+    },
+
+    toggleForm (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const form_class = ev.target.getAttribute('data-form');
+        const form = u.ancestor(ev.target, '.list-group-item').querySelector(`.${form_class}`);
+        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;
+        this.render();
+    },
+
+    queryRole (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const data = new FormData(ev.target);
+        const role = data.get('role');
+        this.model.set({'role': null}, {'silent': true});
+        this.model.set({'role': role});
+    },
+
+    queryAffiliation (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const data = new FormData(ev.target);
+        const affiliation = data.get('affiliation');
+        this.model.set({'affiliation': null}, {'silent': true});
+        this.model.set({'affiliation': affiliation});
+    },
+
+    assignAffiliation (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const data = new FormData(ev.target);
+        const affiliation = data.get('affiliation');
+        const attrs = {
+            'jid': data.get('jid'),
+            'reason': data.get('reason')
+        }
+        const current_affiliation = this.model.get('affiliation');
+        this.chatroomview.model.setAffiliation(affiliation, [attrs])
+            .then(async () => {
+                this.alert(__('Affiliation changed'), 'primary');
+                await this.chatroomview.model.occupants.fetchMembers()
+                this.model.set({'affiliation': null}, {'silent': true});
+                this.model.set({'affiliation': current_affiliation});
+            })
+            .catch(err => {
+                this.alert(__('Sorry, something went wrong while trying to set the affiliation'), 'danger');
+                log.error(err);
+            });
+    },
+
+    assignRole (ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const data = new FormData(ev.target);
+        const occupant = this.chatroomview.model.getOccupant(data.get('jid') || data.get('nick'));
+        const role = data.get('role');
+        const reason = data.get('reason');
+        const current_role = this.model.get('role');
+        this.chatroomview.model.setRole(occupant, role, reason,
+            () => {
+                this.alert(__('Role changed'), 'primary');
+                this.model.set({'role': null}, {'silent': true});
+                this.model.set({'role': current_role});
+            },
+            (e) => {
+                if (sizzle(`not-allowed[xmlns="${Strophe.NS.STANZAS}"]`, e).length) {
+                    this.alert(__('You\'re not allowed to make that change'), 'danger');
+                } else {
+                    this.alert(__('Sorry, something went wrong while trying to set the role'), 'danger');
+                    if (u.isErrorObject(e)) {
+                        log.error(e);
+                    }
+                }
+            }
+        );
+    }
+});