Skip to content
Snippets Groups Projects
Commit 46a7cbe8 authored by Alexandru Munteanu's avatar Alexandru Munteanu
Browse files

users paginations

parent 91e183b5
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 @ 46a7cbe8
...@@ -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 @ 46a7cbe8
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 @ 46a7cbe8
...@@ -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