From f9b1dfe499eb86b1059fe0d574c88c348583e3f4 Mon Sep 17 00:00:00 2001 From: Alexander Skvortsov Date: Mon, 10 Aug 2020 19:56:22 -0400 Subject: [PATCH] update: admin/components/PermissionDropdown --- js/src/admin/components/PermissionDropdown.js | 104 ++++++++++-------- 1 file changed, 56 insertions(+), 48 deletions(-) diff --git a/js/src/admin/components/PermissionDropdown.js b/js/src/admin/components/PermissionDropdown.js index 9a06ee5f1..bd395bb57 100644 --- a/js/src/admin/components/PermissionDropdown.js +++ b/js/src/admin/components/PermissionDropdown.js @@ -32,101 +32,109 @@ function filterByRequiredPermissions(groupIds, permission) { } export default class PermissionDropdown extends Dropdown { - static initProps(props) { - super.initProps(props); + initAttrs(attrs) { + super.initAttrs(attrs); - props.className = 'PermissionDropdown'; - props.buttonClassName = 'Button Button--text'; + attrs.className = 'PermissionDropdown'; + attrs.buttonClassName = 'Button Button--text'; } - view() { - this.props.children = []; + view(vnode) { + vnode.children = []; - let groupIds = app.data.permissions[this.props.permission] || []; + let groupIds = app.data.permissions[this.attrs.permission] || []; - groupIds = filterByRequiredPermissions(groupIds, this.props.permission); + groupIds = filterByRequiredPermissions(groupIds, this.attrs.permission); const everyone = groupIds.indexOf(Group.GUEST_ID) !== -1; const members = groupIds.indexOf(Group.MEMBER_ID) !== -1; const adminGroup = app.store.getById('groups', Group.ADMINISTRATOR_ID); if (everyone) { - this.props.label = Badge.component({ icon: 'fas fa-globe' }); + this.attrs.label = Badge.component({ icon: 'fas fa-globe' }); } else if (members) { - this.props.label = Badge.component({ icon: 'fas fa-user' }); + this.attrs.label = Badge.component({ icon: 'fas fa-user' }); } else { - this.props.label = [badgeForId(Group.ADMINISTRATOR_ID), groupIds.map(badgeForId)]; + this.attrs.label = [badgeForId(Group.ADMINISTRATOR_ID), groupIds.map(badgeForId)]; } if (this.showing) { - if (this.props.allowGuest) { - this.props.children.push( - Button.component({ - children: [Badge.component({ icon: 'fas fa-globe' }), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')], - icon: everyone ? 'fas fa-check' : true, - onclick: () => this.save([Group.GUEST_ID]), - disabled: this.isGroupDisabled(Group.GUEST_ID), - }) + if (this.attrs.allowGuest) { + vnode.children.push( + Button.component( + { + icon: everyone ? 'fas fa-check' : true, + onclick: () => this.save([Group.GUEST_ID]), + disabled: this.isGroupDisabled(Group.GUEST_ID), + }, + [Badge.component({ icon: 'fas fa-globe' }), ' ', app.translator.trans('core.admin.permissions_controls.everyone_button')] + ) ); } - this.props.children.push( - Button.component({ - children: [Badge.component({ icon: 'fas fa-user' }), ' ', app.translator.trans('core.admin.permissions_controls.members_button')], - icon: members ? 'fas fa-check' : true, - onclick: () => this.save([Group.MEMBER_ID]), - disabled: this.isGroupDisabled(Group.MEMBER_ID), - }), + vnode.children.push( + Button.component( + { + icon: members ? 'fas fa-check' : true, + onclick: () => this.save([Group.MEMBER_ID]), + disabled: this.isGroupDisabled(Group.MEMBER_ID), + }, + [Badge.component({ icon: 'fas fa-user' }), ' ', app.translator.trans('core.admin.permissions_controls.members_button')] + ), Separator.component(), - Button.component({ - children: [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()], - icon: !everyone && !members ? 'fas fa-check' : true, - disabled: !everyone && !members, - onclick: (e) => { - if (e.shiftKey) e.stopPropagation(); - this.save([]); + Button.component( + { + icon: !everyone && !members ? 'fas fa-check' : true, + disabled: !everyone && !members, + onclick: (e) => { + if (e.shiftKey) e.stopPropagation(); + this.save([]); + }, }, - }) + [badgeForId(adminGroup.id()), ' ', adminGroup.namePlural()] + ) ); [].push.apply( - this.props.children, + vnode.children, app.store .all('groups') .filter((group) => [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()) === -1) .map((group) => - Button.component({ - children: [badgeForId(group.id()), ' ', group.namePlural()], - icon: groupIds.indexOf(group.id()) !== -1 ? 'fas fa-check' : true, - onclick: (e) => { - if (e.shiftKey) e.stopPropagation(); - this.toggle(group.id()); + Button.component( + { + icon: groupIds.indexOf(group.id()) !== -1 ? 'fas fa-check' : true, + onclick: (e) => { + if (e.shiftKey) e.stopPropagation(); + this.toggle(group.id()); + }, + disabled: this.isGroupDisabled(group.id()) && this.isGroupDisabled(Group.MEMBER_ID) && this.isGroupDisabled(Group.GUEST_ID), }, - disabled: this.isGroupDisabled(group.id()) && this.isGroupDisabled(Group.MEMBER_ID) && this.isGroupDisabled(Group.GUEST_ID), - }) + [badgeForId(group.id()), ' ', group.namePlural()] + ) ) ); } - return super.view(); + return super.view(vnode); } save(groupIds) { - const permission = this.props.permission; + const permission = this.attrs.permission; app.data.permissions[permission] = groupIds; app.request({ method: 'POST', url: app.forum.attribute('apiUrl') + '/permission', - data: { permission, groupIds }, + body: { permission, groupIds }, }); } toggle(groupId) { - const permission = this.props.permission; + const permission = this.attrs.permission; let groupIds = app.data.permissions[permission] || []; @@ -143,6 +151,6 @@ export default class PermissionDropdown extends Dropdown { } isGroupDisabled(id) { - return filterByRequiredPermissions([id], this.props.permission).indexOf(id) === -1; + return filterByRequiredPermissions([id], this.attrs.permission).indexOf(id) === -1; } }