diff --git a/packages/components-faraday/src/components/Dashboard/AssignEditor.js b/packages/components-faraday/src/components/Dashboard/AssignEditor.js index 1e05fedce2f298012d07b38e776cbb560f68395e..31ab862c34f299f9d5f926ffb588351968e0e334 100644 --- a/packages/components-faraday/src/components/Dashboard/AssignEditor.js +++ b/packages/components-faraday/src/components/Dashboard/AssignEditor.js @@ -1,10 +1,14 @@ import React from 'react' +import styled, { css } from 'styled-components' +import { Button, th } from '@pubsweet/ui' import { compose, withHandlers } from 'recompose' import { withModal } from 'pubsweet-component-modal/src/components' import HEModal from './AssignHEModal' -const AssignEditor = ({ assign }) => <button onClick={assign}>ASSIGN</button> +const AssignEditor = ({ assign }) => ( + <ActionButtons onClick={assign}>ASSIGN</ActionButtons> +) export default compose( withModal({ @@ -18,3 +22,20 @@ export default compose( }, }), )(AssignEditor) + +// #region styled-components +const defaultText = css` + color: ${th('colorText')}; + font-family: ${th('fontReading')}; + font-size: ${th('fontSizeBaseSmall')}; +` + +const ActionButtons = styled(Button)` + ${defaultText}; + align-items: center; + background-color: ${th('colorPrimary')}; + color: ${th('colorTextReverse')}; + text-align: center; + height: calc(${th('subGridUnit')}*5); +` +// #endregion diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js index bae7748ed01f563f387accd0d2a319ad104d1651..6945dbc1de252a9bf328d38051f97f032b2d39fa 100644 --- a/packages/components-faraday/src/components/Dashboard/Dashboard.js +++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js @@ -1,5 +1,4 @@ import React from 'react' -import { get } from 'lodash' import { Button } from '@pubsweet/ui' import styled from 'styled-components' import { compose, withHandlers } from 'recompose' @@ -60,16 +59,11 @@ export default compose( currentUser, dashboard, filterItems, - }) => () => { - const userItems = get(currentUser, 'admin') - ? dashboard.all - : dashboard.owner - - return filterItems(userItems).sort((a, b) => { + }) => () => + filterItems(dashboard.all).sort((a, b) => { if (sortOrder === 'newest') return a.created - b.created < 0 return a.created - b.created > 0 - }) - }, + }), }), )(Dashboard) diff --git a/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js b/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js index c0af68ece3a0843c1faab318e5c40f7ecf061db7..c9a60e77aee3acdcdf1bd9ebbd390a808121c61b 100644 --- a/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js +++ b/packages/components-faraday/src/components/Dashboard/HandlingEditorActions.js @@ -1,23 +1,50 @@ import React from 'react' -import PropTypes from 'prop-types' +import { get, head } from 'lodash' import { Icon, th } from '@pubsweet/ui' import styled, { css, withTheme } from 'styled-components' -import { compose, getContext } from 'recompose' +import { compose, withHandlers } from 'recompose' import AssignEditor from './AssignEditor' -const HandlingEditorActions = ({ project, theme }) => ( - <Root> - <HEActions> - <Icon color={theme.colorPrimary}>refresh-cw</Icon> - <Icon color={theme.colorPrimary}>x-circle</Icon> - <AssignEditor collectionId={project.id} /> - </HEActions> - </Root> -) +const HandlingEditorActions = ({ project, theme, getHandlingEditor }) => { + const handlingEditor = getHandlingEditor() + return ( + <Root> + <HEActions> + {handlingEditor ? ( + <HEActions> + <HEName>{get(handlingEditor, 'name')}</HEName> + {!handlingEditor.hasAnswer && ( + <HEActions> + <Icon color={theme.colorPrimary}>refresh-cw</Icon> + <Icon color={theme.colorPrimary}>x-circle</Icon> + </HEActions> + )} + </HEActions> + ) : ( + <AssignEditor collectionId={project.id} /> + )} + </HEActions> + </Root> + ) +} -export default compose(getContext({ journal: PropTypes.object }), withTheme)( - HandlingEditorActions, -) +export default compose( + withTheme, + withHandlers({ + getHandlingEditor: ({ project }) => () => { + const assignedEditors = get(project, 'assignedPeople') + if (assignedEditors && assignedEditors.length) { + return head( + assignedEditors.filter( + editor => + !editor.hasAnswer || (editor.hasAnswer && editor.isAccepted), + ), + ) + } + return null + }, + }), +)(HandlingEditorActions) // #region styled-components const defaultText = css` @@ -26,11 +53,17 @@ const defaultText = css` font-size: ${th('fontSizeBaseSmall')}; ` -const Root = styled.div`` +const Root = styled.div` + margin-left: ${th('gridUnit')}; +` + +const HEName = styled.div`` const HEActions = styled.div` ${defaultText}; text-transform: uppercase; + display: flex; + align-items: center; cursor: pointer; margin-left: ${th('subGridUnit')}; span {