feat(instances): instance list pagination

This commit is contained in:
Sérgio Ramos 2018-03-16 19:49:10 +00:00 committed by Sérgio Ramos
parent 5f63a54ba5
commit 63e7b31a4b
169 changed files with 2951 additions and 1166 deletions

View File

@ -47,6 +47,7 @@
"lodash.isfinite": "^3.3.2", "lodash.isfinite": "^3.3.2",
"lodash.isfunction": "^3.0.9", "lodash.isfunction": "^3.0.9",
"lodash.isinteger": "^4.0.4", "lodash.isinteger": "^4.0.4",
"lodash.isnan": "^3.0.2",
"lodash.omit": "^4.5.0", "lodash.omit": "^4.5.0",
"lodash.reduce": "^4.6.0", "lodash.reduce": "^4.6.0",
"lodash.reverse": "^4.0.1", "lodash.reverse": "^4.0.1",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

View File

@ -81,7 +81,9 @@ exports[`renders <Images expanded /> without throwing 1`] = `
</form> </form>
`; `;
exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without throwing 1`] = ` exports[
`renders <Images images=[{name: stuff, imageName: stuff}] /> without throwing 1`
] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;

View File

@ -2912,7 +2912,9 @@ exports[`renders <Packages loading /> without throwing 1`] = `
</form> </form>
`; `;
exports[`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`] = ` exports[
`renders <Packages packages=[{name: stuff, imageName: stuff}] /> without throwing 1`
] = `
.c4 { .c4 {
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
margin-left: 0.5625rem; margin-left: 0.5625rem;

View File

@ -259,7 +259,9 @@ exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
</div> </div>
`; `;
exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = ` exports[
`renders <Title icon="Test" label="Instance name"/> without throwing 1`
] = `
.c3 { .c3 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.7 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -983,24 +983,6 @@ exports[`renders <Item /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c13 {
cursor: pointer;
height: 100%;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c2 { .c2 {
border-width: 0.0625rem; border-width: 0.0625rem;
border-style: solid; border-style: solid;
@ -1084,6 +1066,24 @@ exports[`renders <Item /> without throwing 1`] = `
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
.c13 {
cursor: pointer;
height: 100%;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:47.9375rem) {
.c10 { .c10 {
width: 10rem; width: 10rem;
@ -1362,24 +1362,6 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c13 {
cursor: pointer;
height: 100%;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c2 { .c2 {
border-width: 0.0625rem; border-width: 0.0625rem;
border-style: solid; border-style: solid;
@ -1463,6 +1445,24 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
border-bottom-width: 0.0625rem; border-bottom-width: 0.0625rem;
} }
.c13 {
cursor: pointer;
height: 100%;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (min-width:47.9375rem) { @media only screen and (min-width:47.9375rem) {
.c10 { .c10 {
width: 10rem; width: 10rem;

View File

@ -6712,7 +6712,9 @@ exports[`renders <Summary instance /> without throwing 2`] = `
</div> </div>
`; `;
exports[`renders <Summary starting stopping rebooting removing /> without throwing 1`] = ` exports[
`renders <Summary starting stopping rebooting removing /> without throwing 1`
] = `
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;

View File

@ -331,6 +331,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
href="" href=""
icon={true} icon={true}
onClick={undefined} onClick={undefined}
to={undefined}
type="submit" type="submit"
> >
Create Create
@ -670,6 +671,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
href="" href=""
icon={true} icon={true}
onClick={undefined} onClick={undefined}
to={undefined}
type="submit" type="submit"
> >
Action label Action label
@ -1031,6 +1033,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
href="" href=""
icon={true} icon={true}
onClick={undefined} onClick={undefined}
to={undefined}
type="submit" type="submit"
> >
Create Create
@ -1370,6 +1373,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
href="" href=""
icon={true} icon={true}
onClick={[Function]} onClick={[Function]}
to={undefined}
type="button" type="button"
> >
Create Create
@ -1709,6 +1713,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
href="" href=""
icon={true} icon={true}
onClick={undefined} onClick={undefined}
to={undefined}
type="submit" type="submit"
> >
Create Create
@ -2048,6 +2053,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
href="" href=""
icon={true} icon={true}
onClick={undefined} onClick={undefined}
to={undefined}
type="submit" type="submit"
> >
Create Create
@ -2402,6 +2408,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
href="" href=""
icon={true} icon={true}
onClick={undefined} onClick={undefined}
to={undefined}
type="submit" type="submit"
> >
Create Create

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'; import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import styled from 'styled-components'; import styled from 'styled-components';
@ -6,6 +6,7 @@ import titleCase from 'title-case';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import Flex from 'styled-flex-component'; import Flex from 'styled-flex-component';
import queryString from 'query-string';
import { import {
Anchor, Anchor,
@ -17,6 +18,8 @@ import {
TableTh, TableTh,
TableTd, TableTd,
TableTbody, TableTbody,
PaginationTableFoot,
PaginationItem,
StatusLoader, StatusLoader,
Popover, Popover,
PopoverContainer, PopoverContainer,
@ -27,7 +30,7 @@ import {
ActionsIcon ActionsIcon
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import GLOBAL from '@state/global'; import GLOBAL, { Global } from '@state/global';
const stateColor = { const stateColor = {
PROVISIONING: 'primary', PROVISIONING: 'primary',
@ -56,6 +59,14 @@ const Actions = styled(Flex)`
min-width: ${remcalc(48)}; min-width: ${remcalc(48)};
`; `;
export const FetchingItem = () => (
<TableTr colSpan="6">
<TableTd colSpan="6" middle center>
<StatusLoader />
</TableTd>
</TableTr>
);
export const Item = ({ export const Item = ({
id = '', id = '',
name, name,
@ -148,71 +159,168 @@ export default ({
toggleSelectAll = () => null, toggleSelectAll = () => null,
onSortBy = () => null, onSortBy = () => null,
children, children,
noInstances noInstances,
}) => ( limit = 0,
<form> offset = 0,
<Table> total = 0
<TableThead> }) => {
<TableTr> const numPages = Math.ceil(total / limit);
<TableTh xs="32" padding="0" paddingLeft={remcalc(12)} middle left> const currPage = Math.ceil((offset + limit) / limit);
<FormGroup paddingTop={remcalc(4)}> const isLast = currPage === numPages;
<Checkbox const isFirst = currPage === 1;
checked={allSelected}
disabled={submitting || noInstances} return (
onChange={toggleSelectAll} <form>
noMargin <Table>
/> <TableThead>
</FormGroup> <TableTr>
</TableTh> <TableTh xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<TableTh <FormGroup paddingTop={remcalc(4)}>
onClick={() => onSortBy('name')} <Checkbox
sortOrder={sortOrder} checked={allSelected}
showSort={sortBy === 'name'} disabled={submitting || noInstances}
left onChange={toggleSelectAll}
middle noMargin
actionable />
> </FormGroup>
<span>Name </span> </TableTh>
</TableTh> <TableTh
<TableTh onClick={() => onSortBy('name')}
xs="150" sortOrder={sortOrder}
onClick={() => onSortBy('state')} showSort={sortBy === 'name'}
sortOrder={sortOrder} left
showSort={sortBy === 'state'} middle
left actionable
middle >
actionable <span>Name </span>
> </TableTh>
<span>Status </span> <TableTh
</TableTh> xs="150"
<TableTh onClick={() => onSortBy('state')}
xs="0" sortOrder={sortOrder}
sm="160" showSort={sortBy === 'state'}
onClick={() => onSortBy('created')} left
sortOrder={sortOrder} middle
showSort={sortBy === 'created'} actionable
left >
middle <span>Status </span>
actionable </TableTh>
> <TableTh
<span>Created </span> xs="0"
</TableTh> sm="160"
<TableTh onClick={() => onSortBy('created')}
xs="0" sortOrder={sortOrder}
sm="130" showSort={sortBy === 'created'}
onClick={() => onSortBy('id')} left
sortOrder={sortOrder} middle
showSort={sortBy === 'id'} actionable
left >
middle <span>Created </span>
actionable </TableTh>
> <TableTh
<span>Short ID </span> xs="0"
</TableTh> sm="130"
<TableTh xs="60" padding="0" /> onClick={() => onSortBy('id')}
</TableTr> sortOrder={sortOrder}
</TableThead> showSort={sortBy === 'id'}
<TableTbody>{children}</TableTbody> left
</Table> middle
</form> actionable
); >
<span>Short ID </span>
</TableTh>
<TableTh xs="60" padding="0" />
</TableTr>
</TableThead>
<TableTbody>{children}</TableTbody>
{!noInstances ? (
<PaginationTableFoot colSpan="6">
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset - limit
})}`}
component={Link}
disabled={isFirst}
prev
>
Prev
</PaginationItem>
{currPage - 2 > 0 ? (
<Fragment>
{currPage - 2 > 1 ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: 0
})}`}
component={Link}
>
1
</PaginationItem>
) : null}
<PaginationItem disabled>...</PaginationItem>
</Fragment>
) : null}
{currPage > 1 ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset - limit
})}`}
component={Link}
>
{currPage - 1}
</PaginationItem>
) : null}
<PaginationItem active>{currPage}</PaginationItem>
{numPages > currPage ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset + limit
})}`}
component={Link}
>
{currPage + 1}
</PaginationItem>
) : null}
{currPage + 2 <= numPages ? (
<Fragment>
<PaginationItem disabled>...</PaginationItem>
{numPages - currPage > 2 ? (
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: total - limit
})}`}
component={Link}
>
{numPages}
</PaginationItem>
) : null}
</Fragment>
) : null}
<PaginationItem
to={`${Global().pathname}?${queryString.stringify({
...Global().query,
limit,
offset: offset + limit
})}`}
component={Link}
disabled={isLast}
next
>
Next
</PaginationItem>
</PaginationTableFoot>
) : null}
</Table>
</form>
);
};

View File

@ -2,6 +2,7 @@ import React from 'react';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import Flex from 'styled-flex-component'; import Flex from 'styled-flex-component';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import { Link } from 'react-router-dom';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { import {
@ -18,7 +19,8 @@ export const Toolbar = ({
searchable = true, searchable = true,
actionLabel = 'Create', actionLabel = 'Create',
actionable = true, actionable = true,
onActionClick onActionClick,
actionTo
}) => ( }) => (
<Flex justifyBetween> <Flex justifyBetween>
<FormGroup name="filter" field={Field}> <FormGroup name="filter" field={Field}>
@ -30,8 +32,10 @@ export const Toolbar = ({
<FormGroup right> <FormGroup right>
<Divider height={remcalc(21)} transparent /> <Divider height={remcalc(21)} transparent />
<Button <Button
type={onActionClick ? 'button' : 'submit'} type={actionTo || onActionClick ? 'button' : 'submit'}
disabled={!actionable} disabled={!actionable}
component={actionTo ? Link : undefined}
to={actionTo}
onClick={onActionClick} onClick={onActionClick}
icon icon
fluid fluid

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Some files were not shown because too many files have changed in this diff Show More