External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-20 06:01:25 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7614 from vjanssens/5626-add-item-count

Browse Source 
Add pagination/item count to DataListToolbar

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-07-31 14:58:29 +00:00 committed by GitHub
commit ec8725d54f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@ -20,6 +20,7 @@ import { SearchColumns, SortColumns, QSConfig } from '../../types';
class DataListToolbar extends React.Component {
render() {
const {
itemCount,
clearAllFilters,
searchColumns,
sortColumns,
@ -36,6 +37,7 @@ class DataListToolbar extends React.Component {
additionalControls,
i18n,
qsConfig,
pagination,
} = this.props;
const showExpandCollapse = onCompact && onExpand;
@ -90,6 +92,9 @@ class DataListToolbar extends React.Component {
<ToolbarItem key={control.key}>{control}</ToolbarItem>
))}
</ToolbarGroup>
{pagination && itemCount > 0 && (
<ToolbarItem variant="pagination">{pagination}</ToolbarItem>
)}
</ToolbarContent>
</Toolbar>
);
@ -97,6 +102,7 @@ class DataListToolbar extends React.Component {
}
DataListToolbar.propTypes = {
itemCount: PropTypes.number,
clearAllFilters: PropTypes.func,
qsConfig: QSConfig.isRequired,
searchColumns: SearchColumns.isRequired,
@ -114,6 +120,7 @@ DataListToolbar.propTypes = {
};
DataListToolbar.defaultProps = {
itemCount: 0,
clearAllFilters: null,
showSelectAll: false,
isAllSelected: false,

3
awx/ui_next/src/components/ListHeader/ListHeader.jsx
View File

@ -98,6 +98,7 @@ class ListHeader extends React.Component {
renderToolbar,
qsConfig,
location,
pagination,
} = this.props;
const params = parseQueryString(qsConfig, location.search);
const isEmpty = itemCount === 0 && Object.keys(params).length === 0;
@ -118,6 +119,7 @@ class ListHeader extends React.Component {
) : (
<Fragment>
{renderToolbar({
itemCount,
searchColumns,
sortColumns,
onSearch: this.handleSearch,
@ -126,6 +128,7 @@ class ListHeader extends React.Component {
onRemove: this.handleRemove,
clearAllFilters: this.handleRemoveAll,
qsConfig,
pagination,
})}
</Fragment>
)}

23
awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx
View File

@ -121,6 +121,28 @@ class PaginatedDataList extends React.Component {
);
}
const ToolbarPagination = (
<Pagination
isCompact
dropDirection="down"
itemCount={itemCount}
page={queryParams.page || 1}
perPage={queryParams.page_size}
perPageOptions={
showPageSizeOptions
? [
{ title: '5', value: 5 },
{ title: '10', value: 10 },
{ title: '20', value: 20 },
{ title: '50', value: 50 },
]
: []
}
onSetPage={this.handleSetPage}
onPerPageSelect={this.handleSetPageSize}
/>
);
return (
<Fragment>
<ListHeader
@ -130,6 +152,7 @@ class PaginatedDataList extends React.Component {
searchColumns={searchColumns}
sortColumns={sortColumns}
qsConfig={qsConfig}
pagination={ToolbarPagination}
/>
{Content}
{items.length ? (

4
awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx
View File

@ -55,7 +55,7 @@ describe('<PaginatedDataList />', () => {
{ context: { router: { history } } }
);
const pagination = wrapper.find('Pagination');
const pagination = wrapper.find('Pagination').at(1);
pagination.prop('onSetPage')(null, 2);
expect(history.location.search).toEqual('?item.page=2');
wrapper.update();
@ -82,7 +82,7 @@ describe('<PaginatedDataList />', () => {
{ context: { router: { history } } }
);
const pagination = wrapper.find('Pagination');
const pagination = wrapper.find('Pagination').at(1);
pagination.prop('onPerPageSelect')(null, 25, 2);
expect(history.location.search).toEqual('?item.page=2&item.page_size=25');
wrapper.update();