diff --git a/packages/component-faraday-ui/src/ActionLink.js b/packages/component-faraday-ui/src/ActionLink.js
index 53d0fe42696f9a099e3496cf055ec3200b8c98a7..9a9921498ce94da86e5fc23538b61a2c21ccbeb0 100644
--- a/packages/component-faraday-ui/src/ActionLink.js
+++ b/packages/component-faraday-ui/src/ActionLink.js
@@ -19,7 +19,7 @@ const ActionLink = ({
<Root {...rest} to={to}>
{icon &&
iconPosition === 'left' && (
- <Icon secondary={to} size={iconSize} warning={!to}>
+ <Icon onClick={onClick} secondary={to} size={iconSize} warning={!to}>
{icon}
</Icon>
)}
@@ -34,7 +34,7 @@ const ActionLink = ({
)}
{icon &&
iconPosition === 'right' && (
- <Icon secondary={to} size={iconSize} warning={!to}>
+ <Icon onClick={onClick} secondary={to} size={iconSize} warning={!to}>
{icon}
</Icon>
)}
diff --git a/packages/component-faraday-ui/src/AuthorWithTooltip.js b/packages/component-faraday-ui/src/AuthorWithTooltip.js
index 2d273d506c6b98ce20f8f7b48cf80f06f563c7b7..8350f4ea3464e5c308a754f4c5dcd87f9dab7af4 100644
--- a/packages/component-faraday-ui/src/AuthorWithTooltip.js
+++ b/packages/component-faraday-ui/src/AuthorWithTooltip.js
@@ -4,7 +4,7 @@ import { Tooltip } from 'react-tippy'
import { ThemeProvider, withTheme } from 'styled-components'
import { Text, Row, AuthorTag } from 'pubsweet-component-faraday-ui'
-const AuthorTooltip = ({ author = {}, key, theme }) => (
+const AuthorTooltip = ({ author = {}, key, theme = {} }) => (
<ThemeProvider theme={theme}>
<Fragment>
<Row mt={1}>
@@ -20,7 +20,7 @@ const AuthorTooltip = ({ author = {}, key, theme }) => (
</ThemeProvider>
)
-const AuthorWithTooltip = ({ theme, ...rest }) => (
+const AuthorWithTooltip = ({ theme = {}, ...rest }) => (
<Tooltip
arrow
html={<AuthorTooltip theme={theme} {...rest} />}
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
index 74c9f3e4b45b7b7fd6c473c3f143aabdfa4f004f..69060affa4868d517fb19e379c03817650e3bb4f 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.js
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -11,61 +11,82 @@ import {
Tag,
Text,
Row,
+ Item,
IconButton,
+ ActionLink,
AuthorTagList,
ReviewerBreakdown,
} from './'
+import { OpenModal } from './modals'
+
const ManuscriptCard = ({
- fragment,
submitDate,
onCardClick,
+ onDelete,
+ canDelete,
+ fragment = {},
manuscriptType = {},
- fragment: {
- authors = [],
- id: fragmentId,
- metadata: { title = 'No title', journal = '', type = '' },
- },
collection: { visibleStatus = 'Draft', handlingEditor, customId },
-}) => (
- <Root data-test-id={`fragment-${fragmentId}`} onClick={onCardClick}>
- <MainContainer>
- <Row alignItems="center" justify="space-between" mb={1}>
- <H3>{title}</H3>
- <Tag data-test-id="fragment-status" status>
- {visibleStatus}
- </Tag>
- </Row>
- {authors.length > 0 && (
- <Row alignItems="center" justify="flex-start" mb={1}>
- <AuthorTagList authors={authors} tooltip />
+}) => {
+ const { authors = [], id: fragmentId, metadata = {} } = fragment
+ const { title = 'No title', journal = '', type = '' } = metadata
+ return (
+ <Root data-test-id={`fragment-${fragmentId}`} onClick={onCardClick}>
+ <MainContainer>
+ <Row alignItems="center" justify="space-between">
+ <H3>{title}</H3>
+ <Tag data-test-id="fragment-status" status>
+ {visibleStatus}
+ </Tag>
</Row>
- )}
- <Row alignItems="center" justify="flex-start" mb={1}>
- <Text customId mr={1}>{`ID ${customId}`}</Text>
- <Text mr={3} secondary>
- {submitDate}
- </Text>
- <H4>{manuscriptType.label || type}</H4>
- <Text ml={1} secondary>
- {journal}
- </Text>
- </Row>
- <Row alignItems="center" justify="flex-start" mb={1}>
- <H4>Handling editor</H4>
- <Text ml={1} mr={3}>
- {get(handlingEditor, 'name', 'Unassigned')}
- </Text>
- {handlingEditor && (
- <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
+ {authors.length > 0 && (
+ <Row alignItems="center" justify="flex-start" mb={1}>
+ <AuthorTagList authors={authors} tooltip />
+ </Row>
)}
- </Row>
- </MainContainer>
- <SideNavigation>
- <IconButton icon="chevron-right" iconSize={2} />
- </SideNavigation>
- </Root>
-)
+ <Row alignItems="center" justify="flex-start" mb={1}>
+ <Text customId mr={1}>{`ID ${customId}`}</Text>
+ <Text mr={3} secondary>
+ {submitDate}
+ </Text>
+ <H4>{manuscriptType.label || type}</H4>
+ <Text ml={1} secondary>
+ {journal}
+ </Text>
+ </Row>
+ <Row alignItems="center" justify="flex-start" mb={1}>
+ <H4>Handling editor</H4>
+ <Text ml={1} mr={3}>
+ {get(handlingEditor, 'name', 'Unassigned')}
+ </Text>
+ {handlingEditor && (
+ <ReviewerBreakdown fragment={fragment} label="Reviewer Reports" />
+ )}
+ {canDelete && (
+ <Item justify="flex-end" onClick={e => e.stopPropagation()}>
+ <OpenModal
+ confirmAction={onDelete}
+ confirmText="Delete"
+ modalKey={`delete-${customId}`}
+ title="Are you sure you want to delete this submission?"
+ >
+ {onClickEvent => (
+ <ActionLink icon="trash" onClick={onClickEvent}>
+ Delete
+ </ActionLink>
+ )}
+ </OpenModal>
+ </Item>
+ )}
+ </Row>
+ </MainContainer>
+ <SideNavigation>
+ <IconButton icon="chevron-right" iconSize={2} />
+ </SideNavigation>
+ </Root>
+ )
+}
export default compose(
withJournal,
@@ -74,14 +95,21 @@ export default compose(
onClick(collection, fragment)
},
}),
- withProps(({ fragment: { submitted, metadata }, journal = {} }) => ({
- submitDate: submitted
- ? `Submitted on ${moment(submitted).format('DD.MM.YYYY')}`
- : '',
- manuscriptType: get(journal, 'manuscriptTypes', []).find(
- t => t.value === get(metadata, 'type', ''),
- ),
- })),
+ withProps(
+ ({
+ fragment: { submitted, metadata },
+ journal = {},
+ collection: { status = 'draft' },
+ }) => ({
+ submitDate: submitted
+ ? `Submitted on ${moment(submitted).format('DD.MM.YYYY')}`
+ : '',
+ manuscriptType: get(journal, 'manuscriptTypes', []).find(
+ t => t.value === get(metadata, 'type', ''),
+ ),
+ canDelete: status === 'draft',
+ }),
+ ),
setDisplayName('ManuscriptCard'),
)(ManuscriptCard)
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.md b/packages/component-faraday-ui/src/ManuscriptCard.md
index 9d44a5bd5c546db121d1b66ec2b0c958406acfc8..e78f3422c44d759f3863865e859d8b255750452d 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.md
+++ b/packages/component-faraday-ui/src/ManuscriptCard.md
@@ -80,14 +80,14 @@ const authors = [
firstName: 'Barrack 12',
lastName: 'Obama',
},
-];
+]
const collection = {
customId: '55113358',
visibleStatus: 'Pending Approval',
handlingEditor: {
id: 'he-1',
- name: 'Handlington Ignashevici'
+ name: 'Handlington Ignashevici',
},
}
@@ -100,11 +100,12 @@ const fragment = {
title: 'A very ok title with many authors',
type: 'Research article',
},
-};
-
+}
-<ManuscriptCard
+;<ManuscriptCard
collection={collection}
fragment={fragment}
- />
-```
\ No newline at end of file
+ onDelete={() => alert('Deleted')}
+ onClick={() => alert('click on card')}
+/>
+```
diff --git a/packages/component-faraday-ui/src/Tag.js b/packages/component-faraday-ui/src/Tag.js
index d1379dcc5d30ae151a38520a4a4f6678d89bd27e..689cdb7f25fe8ac967a7d1c50c036367374d0373 100644
--- a/packages/component-faraday-ui/src/Tag.js
+++ b/packages/component-faraday-ui/src/Tag.js
@@ -5,8 +5,8 @@ import { marginHelper } from './styledHelpers'
/** @component */
export default styled.div`
- background-color: ${props =>
- props.status ? th('tag.statusBackgroundColor') : th('tag.backgroundColor')};
+ background-color: ${({ status }) =>
+ status ? th('tag.statusBackgroundColor') : th('tag.backgroundColor')};
border-radius: ${th('tag.borderRadius')
? th('tag.borderRadius')
: th('borderRadius')};
@@ -14,7 +14,7 @@ export default styled.div`
font-family: ${th('fontHeading')};
font-size: ${th('tag.fontSize')};
font-weight: ${th('tag.fontWeight')};
- padding: 0 calc(${th('gridUnit')} / 2);
+ padding: calc(${th('gridUnit')} / 4) calc(${th('gridUnit')} / 2);
text-align: center;
vertical-align: baseline;
width: fit-content;
diff --git a/packages/component-faraday-ui/src/modals/MultiAction.js b/packages/component-faraday-ui/src/modals/MultiAction.js
index c87877c520b2a95b911b9744a9d6334873f275ea..9f17382c7320d4f935bdb1c97140dda5caf33316 100644
--- a/packages/component-faraday-ui/src/modals/MultiAction.js
+++ b/packages/component-faraday-ui/src/modals/MultiAction.js
@@ -1,7 +1,7 @@
import React, { Fragment } from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
-import { H2, Button, Spinner } from '@pubsweet/ui'
+import { H2, Button, Spinner, ErrorText } from '@pubsweet/ui'
import { compose, setDisplayName, withHandlers } from 'recompose'
import Text from '../Text'
@@ -22,7 +22,8 @@ const MultiAction = ({
<IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
<H2>{title}</H2>
{subtitle && <Text secondary>{subtitle}</Text>}
- <Text dangerouslySetInnerHTML={{ __html: content }} />
+ <Text dangerouslySetInnerHTML={{ __html: content }} mb={1} />
+ {modalError && <ErrorText>{modalError}</ErrorText>}
<Buttons isFetching={isFetching}>
{isFetching ? (
<Spinner size={3} />
@@ -54,6 +55,7 @@ export default compose(
// #region styles
const Root = styled.div`
align-items: center;
+ background: ${th('colorBackground')};
border: ${th('borderWidth')} ${th('borderStyle')} transparent;
border-radius: ${th('borderRadius')};
box-shadow: ${th('boxShadow')};
@@ -65,6 +67,7 @@ const Root = styled.div`
${H2} {
margin: 0 0 ${th('gridUnit')} 0;
+ text-align: center;
}
${Text} {
diff --git a/packages/component-faraday-ui/src/modals/OpenModal.js b/packages/component-faraday-ui/src/modals/OpenModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..973ce523500c05e52812c75f8f0aa9f9f40d46e9
--- /dev/null
+++ b/packages/component-faraday-ui/src/modals/OpenModal.js
@@ -0,0 +1,47 @@
+import React from 'react'
+import { get } from 'lodash'
+import { compose, withHandlers } from 'recompose'
+import { withModal } from 'pubsweet-component-modal/src/components'
+
+import MultiAction from './MultiAction'
+
+const OpenModal = ({ onClickEvent, children }) => (
+ <div>{children(onClickEvent)}</div>
+)
+
+export default compose(
+ withModal(() => ({
+ modalComponent: MultiAction,
+ })),
+ withHandlers({
+ handleError: () => (fn, err) => e => {
+ if (e.error) {
+ fn(get(e, 'error.message', 'Oops! Something went wrong!'))
+ }
+ if (err) {
+ fn(get(JSON.parse(e.response), 'error', 'Oops! Something went wrong!'))
+ }
+ },
+ }),
+ withHandlers({
+ onClickEvent: ({
+ showModal,
+ hideModal,
+ setModalError,
+ handleError,
+ confirmAction,
+ ...rest
+ }) => e => {
+ e.stopPropagation()
+ showModal({
+ onConfirm: () => {
+ confirmAction().then(
+ handleError(setModalError),
+ handleError(setModalError, true),
+ )
+ },
+ ...rest,
+ })
+ },
+ }),
+)(OpenModal)
diff --git a/packages/component-faraday-ui/src/modals/OpenModal.md b/packages/component-faraday-ui/src/modals/OpenModal.md
new file mode 100644
index 0000000000000000000000000000000000000000..b9bd031aeadb9cef9b4e2f74db6c1f20f56c9f2e
--- /dev/null
+++ b/packages/component-faraday-ui/src/modals/OpenModal.md
@@ -0,0 +1,10 @@
+Open a confirmation modal by clicking on an element
+
+```js
+const ActionLink = require('../ActionLink.js');
+
+
+<OpenModal confirmAction={()=> alert('Confirm')} title="Are you sure?" confirmText="Delete" modalKey='1'>
+ <ActionLink icon="trash">Delete</ActionLink>
+</OpenModal>
+```
diff --git a/packages/component-faraday-ui/src/modals/index.js b/packages/component-faraday-ui/src/modals/index.js
index 54028bc35a1e227ce52b8985d285ee211b894fac..fb4d8875a5d9973606474a543a65321bb1347e26 100644
--- a/packages/component-faraday-ui/src/modals/index.js
+++ b/packages/component-faraday-ui/src/modals/index.js
@@ -1,2 +1,3 @@
+export { default as OpenModal } from './OpenModal'
export { default as MultiAction } from './MultiAction'
export { default as SingleActionModal } from './SingleActionModal'
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
index d6d5e398a592453773dd802bbe459864dd2e5753..28a48894ab6b556655ba7feb34bec25fbaf5b6dd 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
@@ -10,7 +10,7 @@ import withVersion from './withVersion'
const DashboardItem = withVersion(ManuscriptCard)
-const DashboardItems = ({ onClick, list, deleteProject, listView = true }) => (
+const DashboardItems = ({ onClick, list, deleteProject }) => (
<Root>
{!list.length ? (
<Row justify="center" mt={4}>
@@ -22,6 +22,7 @@ const DashboardItems = ({ onClick, list, deleteProject, listView = true }) => (
collection={collection}
key={collection.id}
onClick={onClick}
+ onDelete={() => deleteProject(collection)}
/>
))
)}
diff --git a/packages/components-faraday/src/components/Dashboard/withVersion.js b/packages/components-faraday/src/components/Dashboard/withVersion.js
index 485576476625e8111a365b26b316bc0c9e65cfbf..24729730104466065f3e3de3f88bc81e07a97cb6 100644
--- a/packages/components-faraday/src/components/Dashboard/withVersion.js
+++ b/packages/components-faraday/src/components/Dashboard/withVersion.js
@@ -10,6 +10,6 @@ export default Component =>
actions.getFragments({ id: collection.id }),
]),
connect((state, { collection }) => ({
- fragment: selectCurrentVersion(state, collection),
+ fragment: selectCurrentVersion(state, collection) || {},
})),
)(Component)
diff --git a/packages/styleguide/src/webpack-config.js b/packages/styleguide/src/webpack-config.js
index 145c5eddf0474d20b66d336cadbc31e23161bf17..5b92100e766e6cb19b30a1fbacccef855fa64771 100644
--- a/packages/styleguide/src/webpack-config.js
+++ b/packages/styleguide/src/webpack-config.js
@@ -11,6 +11,7 @@ module.exports = dir => {
path.join(dir, 'src'),
/@pubsweet\/[^/]+\/src/,
/component-faraday-ui\/src/,
+ /component-modal\/src/,
]
return {
devtool: 'cheap-module-source-map',