103 lines
2.6 KiB
JavaScript
103 lines
2.6 KiB
JavaScript
// @flow
|
|
import { observable } from "mobx";
|
|
import { inject, observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { withRouter, type RouterHistory } from "react-router-dom";
|
|
import PoliciesStore from "stores/PoliciesStore";
|
|
import UiStore from "stores/UiStore";
|
|
import Group from "models/Group";
|
|
import GroupDelete from "scenes/GroupDelete";
|
|
import GroupEdit from "scenes/GroupEdit";
|
|
|
|
import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
|
|
import Modal from "components/Modal";
|
|
|
|
type Props = {
|
|
ui: UiStore,
|
|
policies: PoliciesStore,
|
|
group: Group,
|
|
history: RouterHistory,
|
|
onMembers: () => void,
|
|
onOpen?: () => void,
|
|
onClose?: () => void,
|
|
};
|
|
|
|
@observer
|
|
class GroupMenu extends React.Component<Props> {
|
|
@observable editModalOpen: boolean = false;
|
|
@observable deleteModalOpen: boolean = false;
|
|
|
|
onEdit = (ev: SyntheticEvent<>) => {
|
|
ev.preventDefault();
|
|
this.editModalOpen = true;
|
|
};
|
|
|
|
onDelete = (ev: SyntheticEvent<>) => {
|
|
ev.preventDefault();
|
|
this.deleteModalOpen = true;
|
|
};
|
|
|
|
handleEditModalClose = () => {
|
|
this.editModalOpen = false;
|
|
};
|
|
|
|
handleDeleteModalClose = () => {
|
|
this.deleteModalOpen = false;
|
|
};
|
|
|
|
render() {
|
|
const { policies, group, onOpen, onClose } = this.props;
|
|
const can = policies.abilities(group.id);
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
title="Edit group"
|
|
onRequestClose={this.handleEditModalClose}
|
|
isOpen={this.editModalOpen}
|
|
>
|
|
<GroupEdit
|
|
group={this.props.group}
|
|
onSubmit={this.handleEditModalClose}
|
|
/>
|
|
</Modal>
|
|
|
|
<Modal
|
|
title="Delete group"
|
|
onRequestClose={this.handleDeleteModalClose}
|
|
isOpen={this.deleteModalOpen}
|
|
>
|
|
<GroupDelete
|
|
group={this.props.group}
|
|
onSubmit={this.handleDeleteModalClose}
|
|
/>
|
|
</Modal>
|
|
|
|
<DropdownMenu onOpen={onOpen} onClose={onClose}>
|
|
{group && (
|
|
<>
|
|
<DropdownMenuItem onClick={this.props.onMembers}>
|
|
Members…
|
|
</DropdownMenuItem>
|
|
|
|
{(can.update || can.delete) && <hr />}
|
|
|
|
{can.update && (
|
|
<DropdownMenuItem onClick={this.onEdit}>Edit…</DropdownMenuItem>
|
|
)}
|
|
|
|
{can.delete && (
|
|
<DropdownMenuItem onClick={this.onDelete}>
|
|
Delete…
|
|
</DropdownMenuItem>
|
|
)}
|
|
</>
|
|
)}
|
|
</DropdownMenu>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default inject("policies")(withRouter(GroupMenu));
|