retain search bar when zero results found

This commit is contained in:
Keith Grant 2019-10-11 12:11:41 -07:00
parent 08df2cad68
commit faffbc3e65
6 changed files with 1847 additions and 73 deletions

View File

@ -46,16 +46,14 @@ class ListHeader extends React.Component {
}
handleSearch(key, value) {
const { history, qsConfig } = this.props;
const { search } = history.location;
const oldParams = parseQueryString(qsConfig, search);
const { location, qsConfig } = this.props;
const oldParams = parseQueryString(qsConfig, location.search);
this.pushHistoryState(mergeParams(oldParams, { [key]: value }));
}
handleRemove(key, value) {
const { history, qsConfig } = this.props;
const { search } = history.location;
const oldParams = parseQueryString(qsConfig, search);
const { location, qsConfig } = this.props;
const oldParams = parseQueryString(qsConfig, location.search);
this.pushHistoryState(removeParams(qsConfig, oldParams, { [key]: value }));
}
@ -64,9 +62,8 @@ class ListHeader extends React.Component {
}
handleSort(key, order) {
const { history, qsConfig } = this.props;
const { search } = history.location;
const oldParams = parseQueryString(qsConfig, search);
const { location, qsConfig } = this.props;
const oldParams = parseQueryString(qsConfig, location.search);
this.pushHistoryState(
replaceParams(oldParams, {
order_by: order === 'ascending' ? key : `-${key}`,
@ -89,11 +86,14 @@ class ListHeader extends React.Component {
columns,
renderToolbar,
qsConfig,
location,
} = this.props;
const [orderBy, sortOrder] = this.getSortOrder();
const params = parseQueryString(qsConfig, location.search);
const isEmpty = itemCount === 0 && Object.keys(params).length === 0;
return (
<Fragment>
{itemCount === 0 ? (
{isEmpty ? (
<Fragment>
<EmptyStateControlsWrapper>
{emptyStateControls}

View File

@ -99,47 +99,36 @@ class PaginatedDataList extends React.Component {
);
}
if (items.length <= 0) {
return (
<Fragment>
<ListHeader
emptyStateControls={emptyStateControls}
itemCount={itemCount}
columns={columns}
qsConfig={qsConfig}
/>
{Content}
</Fragment>
);
}
return (
<Fragment>
<ListHeader
itemCount={itemCount}
renderToolbar={renderToolbar}
emptyStateControls={emptyStateControls}
columns={columns}
qsConfig={qsConfig}
/>
{Content}
<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}
/>
{items.length ? (
<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>
);
}

View File

@ -150,7 +150,8 @@ class JobList extends Component {
selected,
} = this.state;
const { match, i18n } = this.props;
const isAllSelected = selected.length === jobs.length;
const isAllSelected =
selected.length === jobs.length && selected.length > 0;
return (
<PageSection>
<Card>

View File

@ -142,7 +142,8 @@ class OrganizationsList extends Component {
const canAdd =
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
const isAllSelected = selected.length === organizations.length;
const isAllSelected =
selected.length === organizations.length && selected.length > 0;
return (
<Fragment>

View File

@ -184,7 +184,8 @@ class TemplatesList extends Component {
const { match, i18n } = this.props;
const canAdd =
actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
const isAllSelected = selected.length === templates.length;
const isAllSelected =
selected.length === templates.length && selected.length > 0;
return (
<PageSection>
<Card>