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

convert PaginatedDataList to function

Browse Source
This commit is contained in:
Alex Corey
2020-11-19 15:28:34 -05:00
parent 7daa1fe786
commit 766b2f774d
1 changed files with 129 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,10 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { DataList } from '@patternfly/react-core'; import { DataList } from '@patternfly/react-core';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withRouter } from 'react-router-dom'; import { withRouter, useHistory, useLocation } from 'react-router-dom';
import ListHeader from '../ListHeader'; import ListHeader from '../ListHeader';
import ContentEmpty from '../ContentEmpty'; import ContentEmpty from '../ContentEmpty';
@@ -22,166 +23,150 @@ import { QSConfig, SearchColumns, SortColumns } from '../../types';
import PaginatedDataListItem from './PaginatedDataListItem'; import PaginatedDataListItem from './PaginatedDataListItem';
class PaginatedDataList extends React.Component { function PaginatedDataList({
constructor(props) { items,
super(props); onRowClick,
this.handleSetPage = this.handleSetPage.bind(this); contentError,
this.handleSetPageSize = this.handleSetPageSize.bind(this); hasContentLoading,
this.handleListItemSelect = this.handleListItemSelect.bind(this); emptyStateControls,
} itemCount,
qsConfig,
handleListItemSelect = (id = 0) => { renderItem,
const { items, onRowClick } = this.props; toolbarSearchColumns,
toolbarSearchableKeys,
toolbarRelatedSearchableKeys,
toolbarSortColumns,
pluralizedItemName,
showPageSizeOptions,
location,
i18n,
renderToolbar,
}) {
const { search, pathname } = useLocation();
const history = useHistory();
const handleListItemSelect = (id = 0) => {
const match = items.find(item => item.id === Number(id)); const match = items.find(item => item.id === Number(id));
onRowClick(match); onRowClick(match);
}; };
handleSetPage(event, pageNumber) { const handleSetPage = (event, pageNumber) => {
const { history, qsConfig } = this.props;
const { search } = history.location;
const oldParams = parseQueryString(qsConfig, search); const oldParams = parseQueryString(qsConfig, search);
this.pushHistoryState(replaceParams(oldParams, { page: pageNumber })); pushHistoryState(replaceParams(oldParams, { page: pageNumber }));
} };
handleSetPageSize(event, pageSize, page) { const handleSetPageSize = (event, pageSize, page) => {
const { history, qsConfig } = this.props;
const { search } = history.location;
const oldParams = parseQueryString(qsConfig, search); const oldParams = parseQueryString(qsConfig, search);
this.pushHistoryState( pushHistoryState(replaceParams(oldParams, { page_size: pageSize, page }));
replaceParams(oldParams, { page_size: pageSize, page }) };
);
}
pushHistoryState(params) { const pushHistoryState = params => {
const { history, qsConfig } = this.props;
const { pathname } = history.location;
const encodedParams = encodeNonDefaultQueryString(qsConfig, params); const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname); history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
};
const searchColumns = toolbarSearchColumns.length
? toolbarSearchColumns
: [
{
name: i18n._(t`Name`),
key: 'name',
isDefault: true,
},
];
const sortColumns = toolbarSortColumns.length
? toolbarSortColumns
: [
{
name: i18n._(t`Name`),
key: 'name',
},
];
const queryParams = parseQueryString(qsConfig, location.search);
const dataListLabel = i18n._(t`${pluralizedItemName} List`);
const emptyContentMessage = i18n._(
t`Please add ${pluralizedItemName} to populate this list `
);
const emptyContentTitle = i18n._(t`No ${pluralizedItemName} Found `);
let Content;
if (hasContentLoading && items.length <= 0) {
Content = <ContentLoading />;
} else if (contentError) {
Content = <ContentError error={contentError} />;
} else if (items.length <= 0) {
Content = (
<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />
);
} else {
Content = (
<DataList
aria-label={dataListLabel}
onSelectDataListItem={id => handleListItemSelect(id)}
>
{items.map(renderItem)}
</DataList>
);
} }
render() { const ToolbarPagination = (
const { <Pagination
contentError, isCompact
hasContentLoading, dropDirection="down"
emptyStateControls, itemCount={itemCount}
items, page={queryParams.page || 1}
itemCount, perPage={queryParams.page_size}
qsConfig, perPageOptions={
renderItem, showPageSizeOptions
toolbarSearchColumns, ? [
toolbarSearchableKeys, { title: '5', value: 5 },
toolbarRelatedSearchableKeys, { title: '10', value: 10 },
toolbarSortColumns, { title: '20', value: 20 },
pluralizedItemName, { title: '50', value: 50 },
showPageSizeOptions, ]
location, : []
i18n, }
renderToolbar, onSetPage={handleSetPage}
} = this.props; onPerPageSelect={handleSetPageSize}
const searchColumns = toolbarSearchColumns.length />
? toolbarSearchColumns );
: [
{
name: i18n._(t`Name`),
key: 'name',
isDefault: true,
},
];
const sortColumns = toolbarSortColumns.length
? toolbarSortColumns
: [
{
name: i18n._(t`Name`),
key: 'name',
},
];
const queryParams = parseQueryString(qsConfig, location.search);
const dataListLabel = i18n._(t`${pluralizedItemName} List`); return (
const emptyContentMessage = i18n._( <Fragment>
t`Please add ${pluralizedItemName} to populate this list ` <ListHeader
);
const emptyContentTitle = i18n._(t`No ${pluralizedItemName} Found `);
let Content;
if (hasContentLoading && items.length <= 0) {
Content = <ContentLoading />;
} else if (contentError) {
Content = <ContentError error={contentError} />;
} else if (items.length <= 0) {
Content = (
<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />
);
} else {
Content = (
<DataList
aria-label={dataListLabel}
onSelectDataListItem={id => this.handleListItemSelect(id)}
>
{items.map(renderItem)}
</DataList>
);
}
const ToolbarPagination = (
<Pagination
isCompact
dropDirection="down"
itemCount={itemCount} itemCount={itemCount}
page={queryParams.page || 1} renderToolbar={renderToolbar}
perPage={queryParams.page_size} emptyStateControls={emptyStateControls}
perPageOptions={ searchColumns={searchColumns}
showPageSizeOptions sortColumns={sortColumns}
? [ searchableKeys={toolbarSearchableKeys}
{ title: '5', value: 5 }, relatedSearchableKeys={toolbarRelatedSearchableKeys}
{ title: '10', value: 10 }, qsConfig={qsConfig}
{ title: '20', value: 20 }, pagination={ToolbarPagination}
{ title: '50', value: 50 },
]
: []
}
onSetPage={this.handleSetPage}
onPerPageSelect={this.handleSetPageSize}
/> />
); {Content}
{items.length ? (
return ( <Pagination
<Fragment> variant="bottom"
<ListHeader
itemCount={itemCount} itemCount={itemCount}
renderToolbar={renderToolbar} page={queryParams.page || 1}
emptyStateControls={emptyStateControls} perPage={queryParams.page_size}
searchColumns={searchColumns} perPageOptions={
sortColumns={sortColumns} showPageSizeOptions
searchableKeys={toolbarSearchableKeys} ? [
relatedSearchableKeys={toolbarRelatedSearchableKeys} { title: '5', value: 5 },
qsConfig={qsConfig} { title: '10', value: 10 },
pagination={ToolbarPagination} { title: '20', value: 20 },
{ title: '50', value: 50 },
]
: []
}
onSetPage={handleSetPage}
onPerPageSelect={handleSetPageSize}
/> />
{Content} ) : null}
{items.length ? ( </Fragment>
<Pagination );
variant="bottom"
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}
/>
) : null}
</Fragment>
);
}
} }
const Item = PropTypes.shape({ const Item = PropTypes.shape({