Skip to content
Snippets Groups Projects
Commit e8f0cde7 authored by Bogdan Cochior's avatar Bogdan Cochior
Browse files

Merge branch 'faraday-master' of gitlab.coko.foundation:xpub/xpub into faraday-master

parents 90d61688 46a7cbe8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/components-faraday/src/components/Admin/AdminUsers.js
+ 85
− 75
View file @ e8f0cde7
...@@ -59,82 +59,90 @@ const Users = ({ ...@@ -59,82 +59,90 @@ const Users = ({
itemsPerPage, itemsPerPage,
history, history,
journal, journal,
}) => ( }) => {
<div> const slicedUsers = users.slice(
<Header> page * itemsPerPage,
<BreadCrumbs> itemsPerPage * (page + 1),
<span>Admin Dashboard</span> )
<span>Users</span> return (
</BreadCrumbs> <div>
<AddButton onClick={() => history.push('/admin/users/add')}> <Header>
<Icon color="#667080">plus-circle</Icon> <BreadCrumbs>
&nbsp; Add User <span>Admin Dashboard</span>
</AddButton> <span>Users</span>
</Header> </BreadCrumbs>
<SubHeader> <AddButton onClick={() => history.push('/admin/users/add')}>
<div> <Icon color="#667080">plus-circle</Icon>
<span>Bulk actions: </span> &nbsp; Add User
<Menu </AddButton>
onChange={value => value} </Header>
options={[ <SubHeader>
{ value: 'deactivate', label: 'Deactivate' }, <div>
{ value: 'activate', label: 'Activate' }, <span>Bulk actions: </span>
]} <Menu
value="activate" onChange={value => value}
/> options={[
{ value: 'deactivate', label: 'Deactivate' },
{ value: 'activate', label: 'Activate' },
]}
value="activate"
/>
<Menu <Menu
onChange={value => value} onChange={value => value}
options={[ options={[
{ value: 'sort', label: 'SORT' }, { value: 'sort', label: 'SORT' },
{ value: 'unsort', label: 'UNSORT' }, { value: 'unsort', label: 'UNSORT' },
]} ]}
value="sort" value="sort"
/> />
<Icon color="#667080" size={24}> <Icon color="#667080" size={24}>
search search
</Icon> </Icon>
</div> </div>
<Pagination <Pagination
decrementPage={decrementPage} decrementPage={decrementPage}
incrementPage={incrementPage} hasMore={itemsPerPage * (page + 1) < users.length}
itemsPerPage={itemsPerPage} incrementPage={incrementPage}
page={page} itemsPerPage={itemsPerPage}
/> maxLength={users.length}
</SubHeader> page={page}
/>
</SubHeader>
<Table> <Table>
<thead> <thead>
<tr> <tr>
<td> <td>
<Input <Input
checked={users.every(u => u.selected)} checked={users.every(u => u.selected)}
onClick={toggleAllUsers} onClick={toggleAllUsers}
type="checkbox" type="checkbox"
/>
</td>
<td>Email</td>
<td>Full name</td>
<td>Affiliation</td>
<td width="200">Roles</td>
<td>Status</td>
<td width="50" />
</tr>
</thead>
<tbody>
{slicedUsers.map(u => (
<TableRow
key={u.id}
{...u}
roleOptions={journal.roles}
toggleUser={toggleUser(u)}
/> />
</td> ))}
<td>Email</td> </tbody>
<td>Full name</td> </Table>
<td>Affiliation</td> </div>
<td width="200">Roles</td> )
<td>Status</td> }
<td width="50" />
</tr>
</thead>
<tbody>
{users.map(u => (
<TableRow
key={u.id}
{...u}
roleOptions={journal.roles}
toggleUser={toggleUser(u)}
/>
))}
</tbody>
</Table>
</div>
)
export default compose( export default compose(
ConnectPage(() => [actions.getUsers()]), ConnectPage(() => [actions.getUsers()]),
...@@ -144,11 +152,13 @@ export default compose( ...@@ -144,11 +152,13 @@ export default compose(
withState('users', 'setUsers', props => withState('users', 'setUsers', props =>
props.currentUsers.map(u => ({ ...u, selected: false })), props.currentUsers.map(u => ({ ...u, selected: false })),
), ),
withState('itemsPerPage', 'setItemsPerPage', 50), withState('itemsPerPage', 'setItemsPerPage', 20),
withState('page', 'setPage', 0), withState('page', 'setPage', 0),
withHandlers({ withHandlers({
incrementPage: ({ setPage }) => () => { incrementPage: ({ setPage, page, itemsPerPage, users }) => () => {
setPage(p => p + 1) if (page * itemsPerPage + itemsPerPage < users.length) {
setPage(p => p + 1)
}
}, },
decrementPage: ({ setPage }) => () => { decrementPage: ({ setPage }) => () => {
setPage(p => (p > 0 ? p - 1 : p)) setPage(p => (p > 0 ? p - 1 : p))
......
packages/components-faraday/src/components/Admin/Pagination.js
+ 38
− 26
View file @ e8f0cde7
import React from 'react' import React from 'react'
import styled from 'styled-components'
import { Icon } from '@pubsweet/ui' import { Icon } from '@pubsweet/ui'
import styled from 'styled-components'
const Pagination = ({
page,
itemsPerPage,
incrementPage,
decrementPage,
hasMore,
maxLength,
}) => (
<Root>
<Showing>
<span>Showing:</span>
<span>{itemsPerPage}</span>
</Showing>
<Chevrons>
<IconButton hide={page === 0} onClick={decrementPage}>
<Icon color="#667080" size={18}>
chevron-left
</Icon>
</IconButton>
<span>
{`${page * itemsPerPage + 1} to ${
hasMore ? itemsPerPage * (page + 1) : maxLength
}`}
</span>
<IconButton hide={!hasMore} onClick={incrementPage}>
<Icon color="#667080" size={18}>
chevron-right
</Icon>
</IconButton>
</Chevrons>
</Root>
)
export default Pagination
const Root = styled.div` const Root = styled.div`
display: flex; display: flex;
...@@ -15,12 +50,13 @@ const Chevrons = styled.div` ...@@ -15,12 +50,13 @@ const Chevrons = styled.div`
const IconButton = styled.button` const IconButton = styled.button`
align-items: center; align-items: center;
border: none; border: none;
cursor: pointer; cursor: ${({ hide }) => (hide ? 'auto' : 'pointer')};
display: flex; display: flex;
font-family: Helvetica; font-family: Helvetica;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
color: #667080; color: #667080;
opacity: ${({ hide }) => (hide ? 0 : 1)};
&:active, &:active,
&:focus { &:focus {
...@@ -44,27 +80,3 @@ const Showing = styled.div` ...@@ -44,27 +80,3 @@ const Showing = styled.div`
padding: 2px 10px; padding: 2px 10px;
} }
` `
const Pagination = ({ page, itemsPerPage, incrementPage, decrementPage }) => (
<Root>
<Showing>
<span>Showing:</span>
<span>50</span>
</Showing>
<Chevrons>
<IconButton onClick={decrementPage}>
<Icon color="#667080" size={18}>
chevron-left
</Icon>
</IconButton>
<span>{`${page * itemsPerPage + 1} to ${page * itemsPerPage + 50}`}</span>
<IconButton onClick={incrementPage}>
<Icon color="#667080" size={18}>
chevron-right
</Icon>
</IconButton>
</Chevrons>
</Root>
)
export default Pagination
packages/components-faraday/src/components/Dashboard/AbstractModal.js
+ 28
− 28
View file @ e8f0cde7
...@@ -31,6 +31,34 @@ const customStyles = { ...@@ -31,6 +31,34 @@ const customStyles = {
}, },
} }
const AbstractModal = ({ abstractModal, onClose }) => {
const isOpen = !!abstractModal
return (
<Modal
ariaHideApp={false}
isOpen={isOpen}
onRequestClose={onClose}
shouldCloseOnOverlayClick
style={customStyles}
>
<Root>
<CloseIcon onClick={onClose}>
<Icon color="#667080">x</Icon>
</CloseIcon>
<Title
dangerouslySetInnerHTML={{ __html: get(abstractModal, 'title') }}
/>
<Subtitle>Abstract</Subtitle>
<Content
dangerouslySetInnerHTML={{ __html: get(abstractModal, 'abstract') }}
/>
</Root>
</Modal>
)
}
export default AbstractModal
// #region styled-components // #region styled-components
const Root = styled.div` const Root = styled.div`
background-color: #fff; background-color: #fff;
...@@ -72,31 +100,3 @@ const CloseIcon = styled.div` ...@@ -72,31 +100,3 @@ const CloseIcon = styled.div`
right: 5px; right: 5px;
` `
// #endregion // #endregion
const AbstractModal = ({ abstractModal, onClose }) => {
const isOpen = !!abstractModal
return (
<Modal
ariaHideApp={false}
isOpen={isOpen}
onRequestClose={onClose}
shouldCloseOnOverlayClick
style={customStyles}
>
<Root>
<CloseIcon onClick={onClose}>
<Icon color="#667080">x</Icon>
</CloseIcon>
<Title
dangerouslySetInnerHTML={{ __html: get(abstractModal, 'title') }}
/>
<Subtitle>Abstract</Subtitle>
<Content
dangerouslySetInnerHTML={{ __html: get(abstractModal, 'abstract') }}
/>
</Root>
</Modal>
)
}
export default AbstractModal
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment