PermissionDropdown.tsx

import app from '../../admin/app';
import Dropdown, { IDropdownAttrs } from '../../common/components/Dropdown';
import Button from '../../common/components/Button';
import Separator from '../../common/components/Separator';
import Group from '../../common/models/Group';
import Badge from '../../common/components/Badge';
import GroupBadge from '../../common/components/GroupBadge';
import Mithril from 'mithril';

function badgeForId(id: string) {
  const group = app.store.getById('groups', id);

  return group ? GroupBadge.component({ group, label: null }) : '';
}

function filterByRequiredPermissions(groupIds: string[], permission: string) {
  app.getRequiredPermissions(permission).forEach((required) => {
    const restrictToGroupIds = app.data.permissions[required] || [];

    if (restrictToGroupIds.indexOf(Group.GUEST_ID) !== -1) {
      // do nothing
    } else if (restrictToGroupIds.indexOf(Group.MEMBER_ID) !== -1) {
      groupIds = groupIds.filter((id) => id !== Group.GUEST_ID);
    } else if (groupIds.indexOf(Group.MEMBER_ID) !== -1) {
      groupIds = restrictToGroupIds;
    } else {
      groupIds = restrictToGroupIds.filter((id) => groupIds.indexOf(id) !== -1);
    }

    groupIds = filterByRequiredPermissions(groupIds, required);
  });

  return groupIds;
}

export interface IPermissionDropdownAttrs extends IDropdownAttrs {
  permission: string;
}

export default class PermissionDropdown<CustomAttrs extends IPermissionDropdownAttrs = IPermissionDropdownAttrs> extends Dropdown<CustomAttrs> {
  static initAttrs(attrs: IPermissionDropdownAttrs) {
    super.initAttrs(attrs);

    attrs.className = 'PermissionDropdown';
    attrs.buttonClassName = 'Button Button--text';
  }

  view(vnode: Mithril.Vnode<CustomAttrs, this>) {
    const children = [];

    let groupIds = app.data.permissions[this.attrs.permission] || [];

    groupIds = filterByRequiredPermissions(groupIds, this.attrs.permission);

    const everyone = groupIds.includes(Group.GUEST_ID);
    const members = groupIds.includes(Group.MEMBER_ID);
    const adminGroup = app.store.getById<Group>('groups', Group.ADMINISTRATOR_ID)!;

    if (everyone) {
      this.attrs.label = Badge.component({ icon: 'fas fa-globe' });
    } else if (members) {
      this.attrs.label = Badge.component({ icon: 'fas fa-user' });
    } else {
      this.attrs.label = [badgeForId(Group.ADMINISTRATOR_ID), groupIds.map(badgeForId)];
    }

    if (this.showing) {
      if (this.attrs.allowGuest) {
        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')]
          )
        );
      }

      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(
          {
            icon: !everyone && !members ? 'fas fa-check' : true,
            disabled: !everyone && !members,
            onclick: (e: MouseEvent) => {
              if (e.shiftKey) e.stopPropagation();
              this.save([]);
            },
          },
          [badgeForId(adminGroup.id()!), ' ', adminGroup.namePlural()]
        )
      );

      // These groups are defined above, appearing first in the list.
      const excludedGroups = [Group.ADMINISTRATOR_ID, Group.GUEST_ID, Group.MEMBER_ID];

      const groupButtons = app.store
        .all<Group>('groups')
        .filter((group) => !excludedGroups.includes(group.id()!))
        .map((group) =>
          Button.component(
            {
              icon: groupIds.includes(group.id()!) ? 'fas fa-check' : true,
              onclick: (e: MouseEvent) => {
                if (e.shiftKey) e.stopPropagation();
                this.toggle(group.id()!);
              },
              disabled: this.isGroupDisabled(group.id()!) && this.isGroupDisabled(Group.MEMBER_ID) && this.isGroupDisabled(Group.GUEST_ID),
            },
            [badgeForId(group.id()!), ' ', group.namePlural()]
          )
        );

      children.push(...groupButtons);
    }

    return super.view({ ...vnode, children });
  }

  save(groupIds: string[]) {
    const permission = this.attrs.permission;

    app.data.permissions[permission] = groupIds;

    app.request({
      method: 'POST',
      url: app.forum.attribute('apiUrl') + '/permission',
      body: { permission, groupIds },
    });
  }

  toggle(groupId: string) {
    const permission = this.attrs.permission;

    let groupIds = app.data.permissions[permission] || [];

    const index = groupIds.indexOf(groupId);

    if (index !== -1) {
      groupIds.splice(index, 1);
    } else {
      groupIds.push(groupId);
      groupIds = groupIds.filter((id) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(id) === -1);
    }

    this.save(groupIds);
  }

  isGroupDisabled(id: string) {
    return !filterByRequiredPermissions([id], this.attrs.permission).includes(id);
  }
}