diff --git a/packages/component-faraday-ui/src/IconButton.js b/packages/component-faraday-ui/src/IconButton.js
index 6d160baddcc7c2273d92d33a4d7be980af78b0b7..5e4b4acfc0f531676ed49913b60bd8b960e871ee 100644
--- a/packages/component-faraday-ui/src/IconButton.js
+++ b/packages/component-faraday-ui/src/IconButton.js
@@ -2,7 +2,7 @@ import React from 'react'
import { Icon } from '@pubsweet/ui'
import styled from 'styled-components'
-import { positionHelper, marginHelper } from './styledHelpers'
+import { positionHelper, marginHelper, paddingHelper } from './styledHelpers'
const IconButton = styled.div`
align-items: center;
@@ -20,6 +20,7 @@ const IconButton = styled.div`
}
${marginHelper};
+ ${paddingHelper};
${positionHelper};
`
diff --git a/packages/component-faraday-ui/src/WizardAuthors.js b/packages/component-faraday-ui/src/WizardAuthors.js
index d9309bddeaeacf448ea5ecc90548502dbae73eeb..3d951ec7aa7f910d3332e7584172e340a76b4e8e 100644
--- a/packages/component-faraday-ui/src/WizardAuthors.js
+++ b/packages/component-faraday-ui/src/WizardAuthors.js
@@ -106,17 +106,24 @@ export default compose(
withFetching,
withState('authors', 'setAuthors', ({ authors }) => authors),
withHandlers({
- setFormAuthors: ({ changeForm, setAuthors, setFetching }) => authors => {
+ setFormAuthors: ({
+ changeForm,
+ setAuthors,
+ setFetching,
+ onAuthorEdit,
+ }) => authors => {
setAuthors(authors)
setFetching(false)
+ onAuthorEdit(null)
changeForm('submission', 'authors', authors)
},
}),
withHandlers({
- addNewAuthor: ({ authors = [], setAuthors }) => () => {
+ addNewAuthor: ({ authors = [], setAuthors, onAuthorEdit }) => () => {
if (authors.some(a => a.id === 'newAuthor')) {
return
}
+ onAuthorEdit(0)
setAuthors([
...authors,
{ id: 'newAuthor', isCorresponding: false, isSubmitting: false },
diff --git a/packages/component-faraday-ui/src/modals/FormModal.js b/packages/component-faraday-ui/src/modals/FormModal.js
index 7c03e118d7d0d9383972d139c0545dcfc816b7f2..e9adb3b78c837287a61182aefc121b1851bbad5d 100644
--- a/packages/component-faraday-ui/src/modals/FormModal.js
+++ b/packages/component-faraday-ui/src/modals/FormModal.js
@@ -26,7 +26,7 @@ import {
const AddUserForm = ({ roles, countries, titles }) => (
<Fragment>
- <Row alignItems="center" mb={2}>
+ <Row alignItems="baseline" mb={1} mt={1}>
<Item mr={1} vertical>
<Label required>Email</Label>
<ValidatedField
@@ -133,18 +133,18 @@ const EditForm = ({ titles, countries }) => (
<Label>Roles</Label>
</Item>
</Row>
- <RowOverrideAlert mb={2} mt={1}>
+ <RowOverrideAlert mb={3} mt={1}>
<Item>
<ValidatedField
component={({ value, onChange }) => (
<Checkbox
checked={value}
- label="Author"
+ label="Editor in Chief"
onChange={onChange}
value={value}
/>
)}
- name="author"
+ name="editorInChief"
/>
</Item>
<Item>
@@ -174,21 +174,6 @@ const EditForm = ({ titles, countries }) => (
/>
</Item>
</RowOverrideAlert>
- <RowOverrideAlert mb={3}>
- <Item>
- <ValidatedField
- component={({ value, onChange }) => (
- <Checkbox
- checked={value}
- label="Editor in Chief"
- onChange={onChange}
- value={value}
- />
- )}
- name="editorInChief"
- />
- </Item>
- </RowOverrideAlert>
</Fragment>
)
diff --git a/packages/components-faraday/src/components/Admin/AddUser.js b/packages/components-faraday/src/components/Admin/AddUser.js
index f2b1e1f8402b1f2b8cc8387fff6b1d03d04a9d81..572e42f0755c5f0ae873b190c0d6864b1889139e 100644
--- a/packages/components-faraday/src/components/Admin/AddUser.js
+++ b/packages/components-faraday/src/components/Admin/AddUser.js
@@ -22,7 +22,7 @@ const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
>
{showModal =>
edit ? (
- <IconButton icon="edit-2" iconSize={2} onClick={showModal} />
+ <IconButton icon="edit-2" iconSize={2} onClick={showModal} pt={1 / 2} />
) : (
<ActionLink icon="plus" onClick={showModal}>
ADD USER
diff --git a/packages/components-faraday/src/components/Admin/AdminUsers.js b/packages/components-faraday/src/components/Admin/AdminUsers.js
index e1be63f85f08210d8865466d349e64737aa8bed3..38feb450946165d46cf31ff81b966018eb016634 100644
--- a/packages/components-faraday/src/components/Admin/AdminUsers.js
+++ b/packages/components-faraday/src/components/Admin/AdminUsers.js
@@ -41,7 +41,7 @@ const Users = ({
...rest
}) => (
<Fragment>
- <Row alignItems="center" justify="space-between" mb={3}>
+ <Row alignItems="center" justify="space-between" mb={1}>
<Item alignItems="center">
<ActionLink icon="arrow-left" mr={2} onClick={history.goBack}>
Admin Dashboard
@@ -57,74 +57,85 @@ const Users = ({
<Pagination {...rest} itemsPerPage={itemsPerPage} page={page} />
</Row>
- <Row alignItems="center" mb={1} pl={2}>
- <Item flex={2}>
- <Label>Full name</Label>
- </Item>
- <Item flex={4}>
- <Label>Email</Label>
- </Item>
- <Item flex={2}>
- <Label>Affiliation</Label>
- </Item>
- <Item flex={2}>
- <Label>Roles</Label>
- </Item>
- <Item flex={1}>
- <Label>Status</Label>
- </Item>
- <Item />
- <Item />
- </Row>
- {paginatedItems.map(user => (
- <UserRow alignItems="center" key={user.id} pb={1 / 2} pl={2} pt={1 / 2}>
- <Item flex={2}>
- <Text>{`${get(user, 'firstName', '')} ${get(
- user,
- 'lastName',
- '',
- )}`}</Text>
- </Item>
- <Item flex={4}>
- <Text>{user.email}</Text>
- </Item>
- <Item flex={2}>
- <Text>{user.affiliation}</Text>
- </Item>
- <Item flex={2}>
- <Text customId>{getUserRoles(user)}</Text>
- </Item>
- <Item flex={1} secondary>
- <Text>{getStatusLabel(user)}</Text>
- </Item>
- <HiddenItem justify="center">
- <AddUser
- edit
- getUsers={getUsers}
- modalKey={`edit-${user.id}`}
- onSubmit={onSubmit}
- user={user}
- />
- </HiddenItem>
- <HiddenItem justify="justify" pl={1} pr={1}>
- {!user.admin && (
- <OpenModal
- isFetching={isFetching}
- modalKey={`deactivate-${user.id}`}
- onConfirm={deactivateUser(user)}
- subtitle={`${user.firstName} ${user.lastName}`}
- title="Are you sure to deactivate user?"
- >
- {showModal => (
- <Button onClick={showModal} size="small">
- {user.isActive ? 'DEACTIVATE' : 'ACTIVATE'}
- </Button>
- )}
- </OpenModal>
- )}
- </HiddenItem>
- </UserRow>
- ))}
+ <Table>
+ <thead>
+ <tr>
+ <th>
+ <Label>Full Name</Label>
+ </th>
+ <th colSpan={2}>
+ <Label>Email</Label>
+ </th>
+ <th>
+ <Label>Affiliation</Label>
+ </th>
+ <th>
+ <Label>Roles</Label>
+ </th>
+ <th>
+ <Label>Status</Label>
+ </th>
+ <th> </th>
+ </tr>
+ </thead>
+ <tbody>
+ {paginatedItems.map(user => (
+ <UserRow key={user.id}>
+ <td>
+ <Text pl={1}>{`${get(user, 'firstName', '')} ${get(
+ user,
+ 'lastName',
+ '',
+ )}`}</Text>
+ </td>
+ <td colSpan={2}>
+ <Text>{user.email}</Text>
+ </td>
+ <td>
+ <Text>{user.affiliation}</Text>
+ </td>
+ <td>
+ <Text customId>{getUserRoles(user)}</Text>
+ </td>
+ <td>
+ <Text secondary>{getStatusLabel(user)}</Text>
+ </td>
+
+ <HiddenCell>
+ <Item alignItems="center" justify="flex-end">
+ <AddUser
+ edit
+ getUsers={getUsers}
+ modalKey={`edit-${user.id}`}
+ onSubmit={onSubmit}
+ user={user}
+ />
+ <OpenModal
+ isFetching={isFetching}
+ modalKey={`deactivate-${user.id}`}
+ onConfirm={deactivateUser(user)}
+ subtitle={`${user.firstName} ${user.lastName}`}
+ title={`Are you sure to ${
+ !user.isActive ? 'activate' : 'deactivate'
+ } user?`}
+ >
+ {showModal => (
+ <ActivateButton
+ ml={1}
+ mr={1}
+ onClick={showModal}
+ size="small"
+ >
+ {!user.isActive ? 'ACTIVATE' : 'DEACTIVATE'}
+ </ActivateButton>
+ )}
+ </OpenModal>
+ </Item>
+ </HiddenCell>
+ </UserRow>
+ ))}
+ </tbody>
+ </Table>
</Fragment>
)
@@ -162,27 +173,46 @@ export default compose(
setModalError('Something went wrong...')
})
},
- getUserRoles: ({ journal: { roles = {} } }) => user =>
- Object.entries(roles)
+ getUserRoles: ({ journal: { roles = {} } }) => user => {
+ const parsedRoles = Object.entries(roles)
.reduce((acc, role) => (user[role[0]] ? [...acc, role[1]] : acc), [])
- .join(', '),
+ .join(', ')
+
+ return parsedRoles || 'Author'
+ },
}),
)(Users)
// #region styled-components
-const HiddenItem = styled(Item)`
+const Table = styled.table`
+ border-collapse: collapse;
+
+ & th,
+ & td {
+ border: none;
+ text-align: start;
+ vertical-align: middle;
+ height: calc(${th('gridUnit')} * 5);
+ }
+`
+
+const HiddenCell = styled.td`
opacity: 0;
`
-const UserRow = styled(Row)`
+const UserRow = styled.tr`
background-color: ${th('colorBackgroundHue2')};
+ border-bottom: 1px solid ${th('colorBorder')};
&:hover {
background-color: #eeeeee;
- ${HiddenItem} {
+ ${HiddenCell} {
opacity: 1;
}
}
`
+const ActivateButton = styled(Button)`
+ width: 90px;
+`
// #endregion
diff --git a/packages/xpub-faraday/config/validations.js b/packages/xpub-faraday/config/validations.js
index 187de26e47ebe25b056898df01856117c0551566..8b2dc4aae313169d35555b934fba2ae4fc2d4428 100644
--- a/packages/xpub-faraday/config/validations.js
+++ b/packages/xpub-faraday/config/validations.js
@@ -140,7 +140,6 @@ module.exports = {
country: Joi.string().allow(''),
title: Joi.string().allow(''),
teams: Joi.array(),
- author: Joi.boolean(),
editorInChief: Joi.boolean(),
handlingEditor: Joi.boolean(),
invitationToken: Joi.string().allow(''),