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:
parent
d6cb1f6683
commit
b39119ace4
478 changed files with 21226 additions and 19495 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue