External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-27 13:55:04 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #97 from jlmitch5/newPagination

Browse Source 
New pagination
This commit is contained in:
John Mitchell
2019-01-30 12:16:21 -05:00
committed by GitHub
parent 65e369c0f3 e4d44efea2
commit 701eb6afa5
4 changed files with 209 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/components/Pagination.test.jsx
View File

@@ -120,8 +120,8 @@ describe('<Pagination />', () => {
}); });
test('submit a new page by typing in input works', () => { test('submit a new page by typing in input works', () => {
const textInputSelector = '.pf-l-split__item.pf-m-main .pf-c-form-control'; const textInputSelector = '.awx-pagination__page-input.pf-c-form-control';
const submitFormSelector = '.pf-l-split__item.pf-m-main form'; const submitFormSelector = '.awx-pagination__page-input-form';
const onSetPage = jest.fn(); const onSetPage = jest.fn();
pagination = mount( pagination = mount(

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

@@ -7,11 +7,7 @@ import {
DropdownDirection, DropdownDirection,
DropdownItem, DropdownItem,
DropdownToggle, DropdownToggle,
Level, TextInput
LevelItem,
TextInput,
Split,
SplitItem,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
class Pagination extends Component { class Pagination extends Component {
@@ -120,120 +116,102 @@ class Pagination extends Component {
const itemMin = ((page - 1) * page_size) + 1; const itemMin = ((page - 1) * page_size) + 1;
const itemMax = itemMin + itemCount - 1; const itemMax = itemMin + itemCount - 1;
const disabledStyle = {
backgroundColor: '#EDEDED',
border: '1px solid #C2C2CA',
borderRadius: '0px',
color: '#C2C2CA',
};
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<div className="awx-pagination"> <div className="awx-pagination">
<Level> <div className="awx-pagination__page-size-selection">
<LevelItem> <Trans>Items Per Page</Trans>
<Dropdown <Dropdown
onToggle={this.onTogglePageSize} onToggle={this.onTogglePageSize}
onSelect={this.onSelectPageSize} onSelect={this.onSelectPageSize}
direction={up} direction={up}
isOpen={isOpen} isOpen={isOpen}
toggle={( toggle={(
<DropdownToggle <DropdownToggle
className="togglePageSize" className="togglePageSize"
onToggle={this.onTogglePageSize} 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>
</div>
{pageCount !== 1 && (
<div className="awx-pagination__page-count">
<div className="pf-c-input-group pf-m-previous">
<Button
className="awx-pagination__page-button"
variant="tertiary"
aria-label={i18n._(t`First`)}
isDisabled={isOnFirst}
onClick={this.onFirst}
> >
{page_size} <i className="fas fa-angle-double-left" />
</DropdownToggle> </Button>
)} <Button
> className="awx-pagination__page-button"
{opts.map(option => ( variant="tertiary"
<DropdownItem aria-label={i18n._(t`Previous`)}
key={option} isDisabled={isOnFirst}
component="button" onClick={this.onPrevious}
> >
{option} <i className="fas fa-angle-left" />
</DropdownItem> </Button>
))} </div>
</Dropdown> <form
<Trans> Per Page</Trans> className="awx-pagination__page-input-form"
</LevelItem> onSubmit={this.onSubmit}
<LevelItem> >
<Split gutter="md" className="pf-u-display-flex pf-u-align-items-center"> <Trans>
<SplitItem> {'Page '}
<Trans>{`${itemMin} - ${itemMax} of ${count}`}</Trans> <TextInput
</SplitItem> className="awx-pagination__page-input"
<SplitItem> aria-label={i18n._(t`Page Number`)}
<div className="pf-c-input-group"> value={value}
<Button type="text"
variant="tertiary" onChange={this.onPageChange}
aria-label={i18n._(t`First`)} />
style={isOnFirst ? disabledStyle : {}} {' of '}
isDisabled={isOnFirst} {pageCount}
onClick={this.onFirst} </Trans>
> </form>
<i className="fas fa-angle-double-left" /> <div className="pf-c-input-group">
</Button> <Button
<Button className="awx-pagination__page-button"
variant="tertiary" variant="tertiary"
aria-label={i18n._(t`Previous`)} aria-label={i18n._(t`Next`)}
style={isOnFirst ? disabledStyle : {}} isDisabled={isOnLast}
isDisabled={isOnFirst} onClick={this.onNext}
onClick={this.onPrevious} >
> <i className="fas fa-angle-right" />
<i className="fas fa-angle-left" /> </Button>
</Button> <Button
</div> className="awx-pagination__page-button"
</SplitItem> variant="tertiary"
<SplitItem isMain> aria-label={i18n._(t`Last`)}
<form onSubmit={this.onSubmit}> isDisabled={isOnLast}
<Trans> onClick={this.onLast}
{'Page '} >
<TextInput <i className="fas fa-angle-double-right" />
isDisabled={pageCount === 1} </Button>
aria-label={i18n._(t`Page Number`)} </div>
style={{ </div>
height: '30px', )}
width: '30px', </div>
textAlign: 'center',
padding: '0',
margin: '0',
...(pageCount === 1 ? disabledStyle : {})
}}
value={value}
type="text"
onChange={this.onPageChange}
/>
{' of '}
{pageCount}
</Trans>
</form>
</SplitItem>
<SplitItem>
<div className="pf-c-input-group">
<Button
variant="tertiary"
aria-label={i18n._(t`Next`)}
style={isOnLast ? disabledStyle : {}}
isDisabled={isOnLast}
onClick={this.onNext}
>
<i className="fas fa-angle-right" />
</Button>
<Button
variant="tertiary"
aria-label={i18n._(t`Last`)}
style={isOnLast ? disabledStyle : {}}
isDisabled={isOnLast}
onClick={this.onLast}
>
<i className="fas fa-angle-double-right" />
</Button>
</div>
</SplitItem>
</Split>
</LevelItem>
</Level>
</div> </div>
)} )}
</I18n> </I18n>

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

@@ -1,39 +1,87 @@
.awx-pagination { .awx-pagination {
--awx-pagination--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --awx-pagination--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
--awx-pagination--BorderColor: var(--pf-global--Color--light-200); --awx-pagination--BorderColor: var(--pf-global--BackgroundColor--light-300);
--awx-pagination--BorderWidth: var(--pf-global--BorderWidth--sm); --awx-pagination--disabled-BackgroundColor: #f2f2f2;
--awx-pagination--disabled-Color: #C2C2CA;
border: var(--awx-pagination--BorderWidth) solid var(--awx-pagination--BorderColor); border-top: 1px solid var(--awx-pagination--BorderColor);
background-color: var(--awx-pagination--BackgroundColor); background-color: var(--awx-pagination--BackgroundColor);
padding-left: 20px; height: 55px;
padding-right: 20px; display: flex;
padding-top: 20px; align-items: center;
height: 70px; justify-content: space-between;
padding: 0 20px;
font-size: 14px;
font-weight: bold;
--pf-global--target-size--MinHeight: 30px; --pf-global--target-size--MinHeight: 30px;
--pf-global--target-size--MinWidth: 30px; --pf-global--target-size--MinWidth: 30px;
--pf-global--FontSize--md: 14px; --pf-global--FontSize--md: 14px;
.pf-c-input-group button { .awx-pagination__page-size-selection .pf-c-dropdown__toggle {
width: 30px; font-weight: bold;
height: 30px; margin-left: 10px;
padding: 0px;
} }
.pf-c-dropdown button { .awx-pagination__counts {
width: 55px; display: flex;
height: 30px; align-items: center;
padding-left: 10px; margin-right: -20px;
padding-right: 10px; }
margin: 0px;
margin-right: 10px;
text-align: left;
.pf-c-dropdown__toggle-icon { .awx-pagination__item-count {
margin: 0px; margin-right: 20px;
margin-top: 2px; }
padding: 0px;
float: right; .awx-pagination__page-count {
} margin-left: -10px;
display: flex;
align-items: center;
}
.awx-pagination__page-input-form {
display: flex;
align-items: center;
margin: 0 10px;
white-space: nowrap;
}
.awx-pagination__page-input {
width: 35px;
margin: 0 10px;
font-weight: bold;
}
.awx-pagination__page-button {
width: 55px;
height: 55px;
}
.pf-c-input-group .awx-pagination__page-button,
.pf-c-input-group .awx-pagination__page-button:after {
border: 0;
border-radius: 0;
}
.pf-c-input-group .pf-c-button {
border-left: 1px solid var(--awx-pagination--BorderColor);
}
.pf-c-input-group {
height: 56px;
}
.pf-c-input-group.pf-m-previous {
border-right: 1px solid var(--awx-pagination--BorderColor);
}
.pf-c-input-group .pf-c-button.pf-m-disabled {
border: 1px solid var(--awx-pagination--BorderColor);
background-color: var(--awx-pagination--disabled-BackgroundColor);
color: var(--awx-pagination--disabled-Color);
}
.pf-c-input-group.pf-m-previous .pf-c-button.pf-m-disabled {
border-right: 0;
} }
} }

83
src/pages/Organizations/screens/OrganizationsList.jsx
View File

@@ -8,6 +8,7 @@ import {
import { I18n, i18nMark } from '@lingui/react'; import { I18n, i18nMark } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Card,
PageSection, PageSection,
PageSectionVariants, PageSectionVariants,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
@@ -195,46 +196,48 @@ class OrganizationsList extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={medium}> <PageSection variant={medium}>
<DataListToolbar <Card>
addUrl={`${match.url}/add`} <DataListToolbar
isAllSelected={selected.length === results.length} addUrl={`${match.url}/add`}
sortedColumnKey={sortedColumnKey} isAllSelected={selected.length === results.length}
sortOrder={sortOrder} sortedColumnKey={sortedColumnKey}
columns={this.columns} sortOrder={sortOrder}
onSearch={this.onSearch} columns={this.columns}
onSort={this.onSort} onSearch={this.onSearch}
onSelectAll={this.onSelectAll} onSort={this.onSort}
showDelete onSelectAll={this.onSelectAll}
showSelectAll showDelete
/> showSelectAll
<I18n> />
{({ i18n }) => ( <I18n>
<ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}> {({ i18n }) => (
{ results.map(o => ( <ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
<OrganizationListItem { results.map(o => (
key={o.id} <OrganizationListItem
itemId={o.id} key={o.id}
name={o.name} itemId={o.id}
detailUrl={`${match.url}/${o.id}`} name={o.name}
userCount={o.summary_fields.related_field_counts.users} detailUrl={`${match.url}/${o.id}`}
teamCount={o.summary_fields.related_field_counts.teams} userCount={o.summary_fields.related_field_counts.users}
isSelected={selected.includes(o.id)} teamCount={o.summary_fields.related_field_counts.teams}
onSelect={() => this.onSelect(o.id)} isSelected={selected.includes(o.id)}
/> onSelect={() => this.onSelect(o.id)}
))} />
</ul> ))}
)} </ul>
</I18n> )}
<Pagination </I18n>
count={count} <Pagination
page={page} count={count}
pageCount={pageCount} page={page}
page_size={page_size} pageCount={pageCount}
pageSizeOptions={this.pageSizeOptions} page_size={page_size}
onSetPage={this.onSetPage} pageSizeOptions={this.pageSizeOptions}
/> onSetPage={this.onSetPage}
{ loading ? <div>loading...</div> : '' } />
{ error ? <div>error</div> : '' } { loading ? <div>loading...</div> : '' }
{ error ? <div>error</div> : '' }
</Card>
</PageSection> </PageSection>
</Fragment> </Fragment>
); );