diff --git a/packages/components-faraday/src/components/Admin/AdminUsers.js b/packages/components-faraday/src/components/Admin/AdminUsers.js index 867e9991e76749bb822f3b2bec91a86400151f5b..8a2a25d98605b2faa6dff7fd165908be19afc829 100644 --- a/packages/components-faraday/src/components/Admin/AdminUsers.js +++ b/packages/components-faraday/src/components/Admin/AdminUsers.js @@ -59,82 +59,90 @@ const Users = ({ itemsPerPage, history, journal, -}) => ( - <div> - <Header> - <BreadCrumbs> - <span>Admin Dashboard</span> - <span>Users</span> - </BreadCrumbs> - <AddButton onClick={() => history.push('/admin/users/add')}> - <Icon color="#667080">plus-circle</Icon> - Add User - </AddButton> - </Header> - <SubHeader> - <div> - <span>Bulk actions: </span> - <Menu - onChange={value => value} - options={[ - { value: 'deactivate', label: 'Deactivate' }, - { value: 'activate', label: 'Activate' }, - ]} - value="activate" - /> +}) => { + const slicedUsers = users.slice( + page * itemsPerPage, + itemsPerPage * (page + 1), + ) + return ( + <div> + <Header> + <BreadCrumbs> + <span>Admin Dashboard</span> + <span>Users</span> + </BreadCrumbs> + <AddButton onClick={() => history.push('/admin/users/add')}> + <Icon color="#667080">plus-circle</Icon> + Add User + </AddButton> + </Header> + <SubHeader> + <div> + <span>Bulk actions: </span> + <Menu + onChange={value => value} + options={[ + { value: 'deactivate', label: 'Deactivate' }, + { value: 'activate', label: 'Activate' }, + ]} + value="activate" + /> - <Menu - onChange={value => value} - options={[ - { value: 'sort', label: 'SORT' }, - { value: 'unsort', label: 'UNSORT' }, - ]} - value="sort" - /> + <Menu + onChange={value => value} + options={[ + { value: 'sort', label: 'SORT' }, + { value: 'unsort', label: 'UNSORT' }, + ]} + value="sort" + /> - <Icon color="#667080" size={24}> - search - </Icon> - </div> - <Pagination - decrementPage={decrementPage} - incrementPage={incrementPage} - itemsPerPage={itemsPerPage} - page={page} - /> - </SubHeader> + <Icon color="#667080" size={24}> + search + </Icon> + </div> + <Pagination + decrementPage={decrementPage} + hasMore={itemsPerPage * (page + 1) < users.length} + incrementPage={incrementPage} + itemsPerPage={itemsPerPage} + maxLength={users.length} + page={page} + /> + </SubHeader> - <Table> - <thead> - <tr> - <td> - <Input - checked={users.every(u => u.selected)} - onClick={toggleAllUsers} - type="checkbox" + <Table> + <thead> + <tr> + <td> + <Input + checked={users.every(u => u.selected)} + onClick={toggleAllUsers} + 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> - <td>Full name</td> - <td>Affiliation</td> - <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> -) + ))} + </tbody> + </Table> + </div> + ) +} export default compose( ConnectPage(() => [actions.getUsers()]), @@ -144,11 +152,13 @@ export default compose( withState('users', 'setUsers', props => props.currentUsers.map(u => ({ ...u, selected: false })), ), - withState('itemsPerPage', 'setItemsPerPage', 50), + withState('itemsPerPage', 'setItemsPerPage', 20), withState('page', 'setPage', 0), withHandlers({ - incrementPage: ({ setPage }) => () => { - setPage(p => p + 1) + incrementPage: ({ setPage, page, itemsPerPage, users }) => () => { + if (page * itemsPerPage + itemsPerPage < users.length) { + setPage(p => p + 1) + } }, decrementPage: ({ setPage }) => () => { setPage(p => (p > 0 ? p - 1 : p)) diff --git a/packages/components-faraday/src/components/Admin/Pagination.js b/packages/components-faraday/src/components/Admin/Pagination.js index df4373a0d4f4fe2e93df637c90e8664c4060bde9..72df9dc2e9bd6cc1d17ac6a43ef042cdbb4463d3 100644 --- a/packages/components-faraday/src/components/Admin/Pagination.js +++ b/packages/components-faraday/src/components/Admin/Pagination.js @@ -1,6 +1,41 @@ import React from 'react' -import styled from 'styled-components' 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` display: flex; @@ -15,12 +50,13 @@ const Chevrons = styled.div` const IconButton = styled.button` align-items: center; border: none; - cursor: pointer; + cursor: ${({ hide }) => (hide ? 'auto' : 'pointer')}; display: flex; font-family: Helvetica; font-size: 12px; text-align: left; color: #667080; + opacity: ${({ hide }) => (hide ? 0 : 1)}; &:active, &:focus { @@ -44,27 +80,3 @@ const Showing = styled.div` 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 diff --git a/packages/components-faraday/src/components/Dashboard/AbstractModal.js b/packages/components-faraday/src/components/Dashboard/AbstractModal.js index 5222f2b116e9afe1dba1efc91bdbaa86f2a5521f..b2e02235a37b8fe7480e5ef4a7a7e1d80a4757f5 100644 --- a/packages/components-faraday/src/components/Dashboard/AbstractModal.js +++ b/packages/components-faraday/src/components/Dashboard/AbstractModal.js @@ -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 const Root = styled.div` background-color: #fff; @@ -72,31 +100,3 @@ const CloseIcon = styled.div` right: 5px; ` // #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