feat(instances): instance list pagination
|
@ -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",
|
||||||
|
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.3 KiB |
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.3 KiB |
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,8 +159,17 @@ export default ({
|
||||||
toggleSelectAll = () => null,
|
toggleSelectAll = () => null,
|
||||||
onSortBy = () => null,
|
onSortBy = () => null,
|
||||||
children,
|
children,
|
||||||
noInstances
|
noInstances,
|
||||||
}) => (
|
limit = 0,
|
||||||
|
offset = 0,
|
||||||
|
total = 0
|
||||||
|
}) => {
|
||||||
|
const numPages = Math.ceil(total / limit);
|
||||||
|
const currPage = Math.ceil((offset + limit) / limit);
|
||||||
|
const isLast = currPage === numPages;
|
||||||
|
const isFirst = currPage === 1;
|
||||||
|
|
||||||
|
return (
|
||||||
<form>
|
<form>
|
||||||
<Table>
|
<Table>
|
||||||
<TableThead>
|
<TableThead>
|
||||||
|
@ -213,6 +233,94 @@ export default ({
|
||||||
</TableTr>
|
</TableTr>
|
||||||
</TableThead>
|
</TableThead>
|
||||||
<TableTbody>{children}</TableTbody>
|
<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>
|
</Table>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -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
|
||||||
|
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.8 KiB |
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.8 KiB |
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |