External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-09 05:29:26 -02:30
Code Issues Packages Projects Releases Wiki Activity

add pagination to instance groups lookup modal

Browse Source
This commit is contained in:
John Mitchell
2019-02-11 18:10:27 -05:00
parent 8e194baa66
commit 680d153a14
13 changed files with 369 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Pagination/Pagination.jsx
View File

@@ -105,10 +105,13 @@ class Pagination extends Component {
pageCount,
page_size,
pageSizeOptions,
style
} = this.props;
const { value, isOpen } = this.state;
const opts = pageSizeOptions.slice().reverse().filter(o => o !== page_size);
let opts;
if (pageSizeOptions) {
opts = pageSizeOptions.slice().reverse().filter(o => o !== page_size);
}
const isOnFirst = page === 1;
const isOnLast = page === pageCount;
@@ -119,33 +122,35 @@ class Pagination extends Component {
return (
<I18n>
{({ i18n }) => (
<div className="awx-pagination">
<div className="awx-pagination__page-size-selection">
<Trans>Items Per Page</Trans>
<Dropdown
onToggle={this.onTogglePageSize}
onSelect={this.onSelectPageSize}
direction={up}
isOpen={isOpen}
toggle={(
<DropdownToggle
className="togglePageSize"
onToggle={this.onTogglePageSize}
>
{page_size}
</DropdownToggle>
)}
>
{opts.map(option => (
<DropdownItem
key={option}
component="button"
>
{option}
</DropdownItem>
))}
</Dropdown>
</div>
<div className="awx-pagination" style={style}>
{opts && (
<div className="awx-pagination__page-size-selection">
<Trans>Items Per Page</Trans>
<Dropdown
onToggle={this.onTogglePageSize}
onSelect={this.onSelectPageSize}
direction={up}
isOpen={isOpen}
toggle={(
<DropdownToggle
className="togglePageSize"
onToggle={this.onTogglePageSize}
>
{page_size}
</DropdownToggle>
)}
>
{opts.map(option => (
<DropdownItem
key={option}
component="button"
>
{option}
</DropdownItem>
))}
</Dropdown>
</div>
)}
<div className="awx-pagination__counts">
<div className="awx-pagination__item-count">
<Trans>{`Items ${itemMin} - ${itemMax} of ${count}`}</Trans>

2
src/components/Pagination/styles.scss
View File

@@ -1,6 +1,6 @@
.awx-pagination {
--awx-pagination--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
--awx-pagination--BorderColor: var(--pf-global--BackgroundColor--light-300);
--awx-pagination--BorderColor: #d1d1d1;
--awx-pagination--disabled-BackgroundColor: #f2f2f2;
--awx-pagination--disabled-Color: #C2C2CA;