1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-25 16:19:47 +02:00

Project managers, board members, auto-update after reconnection, refactoring

This commit is contained in:
Maksim Eltyshev 2021-06-24 01:05:22 +05:00
parent d6cb1f6683
commit b39119ace4
478 changed files with 21226 additions and 19495 deletions

View file

@ -1,5 +1,6 @@
import React from 'react';
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { Icon, Menu } from 'semantic-ui-react';
@ -11,52 +12,98 @@ import styles from './Header.module.scss';
const Header = React.memo(
({
project,
user,
notifications,
isEditable,
onUsers,
canEditProject,
canEditUsers,
onProjectSettingsClick,
onUsersClick,
onNotificationDelete,
onUserSettings,
onUserSettingsClick,
onLogout,
}) => (
<div className={styles.wrapper}>
<Link to={Paths.ROOT} className={styles.logo}>
Planka
</Link>
<Menu inverted size="large" className={styles.menu}>
<Menu.Menu position="right">
{isEditable && (
<Menu.Item className={styles.item} onClick={onUsers}>
<Icon fitted name="users" />
</Menu.Item>
}) => {
const handleProjectSettingsClick = useCallback(() => {
if (canEditProject) {
onProjectSettingsClick();
}
}, [canEditProject, onProjectSettingsClick]);
return (
<div className={styles.wrapper}>
{!project && (
<Link to={Paths.ROOT} className={classNames(styles.logo, styles.title)}>
Planka
</Link>
)}
<Menu inverted size="large" className={styles.menu}>
{project && (
<Menu.Menu position="left">
<Menu.Item
as={Link}
to={Paths.ROOT}
className={classNames(styles.item, styles.itemHoverable)}
>
<Icon fitted name="arrow left" />
</Menu.Item>
<Menu.Item
className={classNames(
styles.item,
canEditProject && styles.itemHoverable,
styles.title,
)}
onClick={handleProjectSettingsClick}
>
{project.name}
</Menu.Item>
</Menu.Menu>
)}
<NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
<Menu.Item className={styles.item}>
<Icon fitted name="bell" />
{notifications.length > 0 && (
<span className={styles.notification}>{notifications.length}</span>
)}
</Menu.Item>
</NotificationsPopup>
<UserPopup onSettings={onUserSettings} onLogout={onLogout}>
<Menu.Item className={styles.item}>{user.name}</Menu.Item>
</UserPopup>
</Menu.Menu>
</Menu>
</div>
),
<Menu.Menu position="right">
{canEditUsers && (
<Menu.Item
className={classNames(styles.item, styles.itemHoverable)}
onClick={onUsersClick}
>
<Icon fitted name="users" />
</Menu.Item>
)}
<NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
<Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
<Icon fitted name="bell" />
{notifications.length > 0 && (
<span className={styles.notification}>{notifications.length}</span>
)}
</Menu.Item>
</NotificationsPopup>
<UserPopup onSettingsClick={onUserSettingsClick} onLogout={onLogout}>
<Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
{user.name}
</Menu.Item>
</UserPopup>
</Menu.Menu>
</Menu>
</div>
);
},
);
Header.propTypes = {
/* eslint-disable react/forbid-prop-types */
project: PropTypes.object,
user: PropTypes.object.isRequired,
notifications: PropTypes.array.isRequired,
/* eslint-enable react/forbid-prop-types */
isEditable: PropTypes.bool.isRequired,
onUsers: PropTypes.func.isRequired,
canEditProject: PropTypes.bool.isRequired,
canEditUsers: PropTypes.bool.isRequired,
onProjectSettingsClick: PropTypes.func.isRequired,
onUsersClick: PropTypes.func.isRequired,
onNotificationDelete: PropTypes.func.isRequired,
onUserSettings: PropTypes.func.isRequired,
onUserSettingsClick: PropTypes.func.isRequired,
onLogout: PropTypes.func.isRequired,
};
Header.defaultProps = {
project: undefined,
};
export default Header;