109 lines
2.8 KiB
JavaScript
109 lines
2.8 KiB
JavaScript
// @flow
|
|
import { observable } from "mobx";
|
|
import { inject, observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { withTranslation, type TFunction } from "react-i18next";
|
|
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 } from "components/DropdownMenu";
|
|
import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
|
|
import Modal from "components/Modal";
|
|
|
|
type Props = {
|
|
ui: UiStore,
|
|
policies: PoliciesStore,
|
|
group: Group,
|
|
history: RouterHistory,
|
|
onMembers: () => void,
|
|
onOpen?: () => void,
|
|
onClose?: () => void,
|
|
t: TFunction,
|
|
};
|
|
|
|
@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, t } = this.props;
|
|
const can = policies.abilities(group.id);
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
title={t("Edit group")}
|
|
onRequestClose={this.handleEditModalClose}
|
|
isOpen={this.editModalOpen}
|
|
>
|
|
<GroupEdit
|
|
group={this.props.group}
|
|
onSubmit={this.handleEditModalClose}
|
|
/>
|
|
</Modal>
|
|
|
|
<Modal
|
|
title={t("Delete group")}
|
|
onRequestClose={this.handleDeleteModalClose}
|
|
isOpen={this.deleteModalOpen}
|
|
>
|
|
<GroupDelete
|
|
group={this.props.group}
|
|
onSubmit={this.handleDeleteModalClose}
|
|
/>
|
|
</Modal>
|
|
<DropdownMenu onOpen={onOpen} onClose={onClose}>
|
|
<DropdownMenuItems
|
|
items={[
|
|
{
|
|
title: t("Members…"),
|
|
onClick: this.props.onMembers,
|
|
visible: !!(group && can.read),
|
|
},
|
|
{
|
|
type: "separator",
|
|
},
|
|
{
|
|
title: t("Edit…"),
|
|
onClick: this.onEdit,
|
|
visible: !!(group && can.update),
|
|
},
|
|
{
|
|
title: t("Delete…"),
|
|
onClick: this.onDelete,
|
|
visible: !!(group && can.delete),
|
|
},
|
|
]}
|
|
/>
|
|
</DropdownMenu>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withTranslation()<GroupMenu>(
|
|
inject("policies")(withRouter(GroupMenu))
|
|
);
|