73 lines
2.2 KiB
React
73 lines
2.2 KiB
React
/*!
|
|
* Copyright (c) 2024 PLANKA Software GmbH
|
|
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
|
|
*/
|
|
|
|
import groupBy from 'lodash/groupBy';
|
|
import React, { useMemo } from 'react';
|
|
import classNames from 'classnames';
|
|
import { useSelector } from 'react-redux';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button } from 'semantic-ui-react';
|
|
import { Tooltip } from '../../../lib/custom-ui';
|
|
import { usePopup } from '../../../lib/popup';
|
|
|
|
import selectors from '../../../selectors';
|
|
import { isUserAdminOrProjectOwner } from '../../../utils/record-helpers';
|
|
import { BoardMembershipRoles } from '../../../constants/Enums';
|
|
import Group from './Group';
|
|
import AddStep from './AddStep';
|
|
|
|
import styles from './BoardMemberships.module.scss';
|
|
|
|
const BoardMemberships = React.memo(() => {
|
|
const boardMemberships = useSelector(selectors.selectMembershipsForCurrentBoard);
|
|
const [t] = useTranslation();
|
|
|
|
const canAdd = useSelector((state) => {
|
|
const user = selectors.selectCurrentUser(state);
|
|
|
|
if (!isUserAdminOrProjectOwner(user)) {
|
|
return !selectors.selectCurrentUserMembershipForCurrentBoard(state);
|
|
}
|
|
|
|
return selectors.selectIsCurrentUserManagerForCurrentProject(state);
|
|
});
|
|
|
|
const boardMembershipsByRole = useMemo(
|
|
() => groupBy(boardMemberships, 'role'),
|
|
[boardMemberships],
|
|
);
|
|
|
|
const AddPopup = usePopup(AddStep);
|
|
|
|
return (
|
|
<>
|
|
{boardMemberships.length > 0 && (
|
|
<div className={classNames(styles.segment, styles.groups)}>
|
|
{[BoardMembershipRoles.EDITOR, BoardMembershipRoles.VIEWER].map(
|
|
(role) =>
|
|
boardMembershipsByRole[role] && (
|
|
<Group
|
|
key={role}
|
|
items={boardMembershipsByRole[role]}
|
|
role={role}
|
|
groupsTotal={Object.keys(boardMembershipsByRole).length}
|
|
/>
|
|
),
|
|
)}
|
|
</div>
|
|
)}
|
|
{canAdd && (
|
|
<AddPopup>
|
|
<Tooltip content={t('action.addMember')}>
|
|
<Button icon="add user" className={classNames(styles.segment, styles.addButton)} />
|
|
</Tooltip>
|
|
</AddPopup>
|
|
)}
|
|
</>
|
|
);
|
|
});
|
|
|
|
export default BoardMemberships;
|