shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

add empty list functionality to org list

Browse Source
This commit is contained in:
John Mitchell 2019-01-30 14:48:54 -05:00
parent 98cb8c6f6e
commit 4ce19a4b42
No known key found for this signature in database
GPG Key ID: FE6A9B5BD4EB5C94
1 changed files with 83 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,17 @@ import {
withRouter
} from 'react-router-dom';
import { I18n, i18nMark } from '@lingui/react';
import { t } from '@lingui/macro';
import { Trans, t } from '@lingui/macro';
import {
Card,
EmptyState,
EmptyStateIcon,
EmptyStateBody,
PageSection,
PageSectionVariants,
Title
} from '@patternfly/react-core';
import { CubesIcon } from '@patternfly/react-icons';
import DataListToolbar from '../../../components/DataListToolbar';
import OrganizationListItem from '../components/OrganizationListItem';
import Pagination from '../../../components/Pagination';
@ -157,7 +161,7 @@ class OrganizationsList extends Component {
const pageCount = Math.ceil(count / page_size);
this.setState({
const stateToUpdate = {
count,
page,
pageCount,
@ -166,7 +170,17 @@ class OrganizationsList extends Component {
sortedColumnKey,
results,
selected: [],
});
};
// This is in place to track whether or not the initial request
// return any results. If it did not, we show the empty state.
// This will become problematic once search is in play because
// the first load may have query params (think bookmarked search)
if (typeof noInitialResults === 'undefined') {
stateToUpdate.noInitialResults = results.length === 0;
}
this.setState(stateToUpdate);
this.updateUrl(queryParams);
} catch (err) {
this.setState({ error: true });
@ -183,6 +197,7 @@ class OrganizationsList extends Component {
count,
error,
loading,
noInitialResults,
page,
pageCount,
page_size,
@ -194,52 +209,70 @@ class OrganizationsList extends Component {
const { match } = this.props;
return (
<Fragment>
<PageSection variant={medium}>
<Card>
<DataListToolbar
addUrl={`${match.url}/add`}
isAllSelected={selected.length === results.length}
sortedColumnKey={sortedColumnKey}
sortOrder={sortOrder}
columns={this.columns}
onSearch={this.onSearch}
onSort={this.onSort}
onSelectAll={this.onSelectAll}
showDelete
showSelectAll
/>
<I18n>
{({ i18n }) => (
<ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
{ results.map(o => (
<OrganizationListItem
key={o.id}
itemId={o.id}
name={o.name}
detailUrl={`${match.url}/${o.id}`}
userCount={o.summary_fields.related_field_counts.users}
teamCount={o.summary_fields.related_field_counts.teams}
isSelected={selected.includes(o.id)}
onSelect={() => this.onSelect(o.id)}
/>
))}
</ul>
)}
</I18n>
<Pagination
count={count}
page={page}
pageCount={pageCount}
page_size={page_size}
pageSizeOptions={this.pageSizeOptions}
onSetPage={this.onSetPage}
/>
{ loading ? <div>loading...</div> : '' }
{ error ? <div>error</div> : '' }
</Card>
</PageSection>
</Fragment>
<PageSection variant={medium}>
<Card>
{noInitialResults && (
<EmptyState>
<EmptyStateIcon icon={CubesIcon} />
<Title size="lg">
<Trans>No Organizations Found</Trans>
</Title>
<EmptyStateBody>
<Trans>Please add an organization to populate this list</Trans>
</EmptyStateBody>
</EmptyState>
)}
{(
typeof noInitialResults !== 'undefined'
&& !noInitialResults
&& !loading
&& !error
) && (
<Fragment>
<DataListToolbar
addUrl={`${match.url}/add`}
isAllSelected={selected.length === results.length}
sortedColumnKey={sortedColumnKey}
sortOrder={sortOrder}
columns={this.columns}
onSearch={this.onSearch}
onSort={this.onSort}
onSelectAll={this.onSelectAll}
showDelete
showSelectAll
/>
<I18n>
{({ i18n }) => (
<ul className="pf-c-data-list" aria-label={i18n._(t`Organizations List`)}>
{ results.map(o => (
<OrganizationListItem
key={o.id}
itemId={o.id}
name={o.name}
detailUrl={`${match.url}/${o.id}`}
userCount={o.summary_fields.related_field_counts.users}
teamCount={o.summary_fields.related_field_counts.teams}
isSelected={selected.includes(o.id)}
onSelect={() => this.onSelect(o.id)}
/>
))}
</ul>
)}
</I18n>
<Pagination
count={count}
page={page}
pageCount={pageCount}
page_size={page_size}
pageSizeOptions={this.pageSizeOptions}
onSetPage={this.onSetPage}
/>
{ loading ? <div>loading...</div> : '' }
{ error ? <div>error</div> : '' }
</Fragment>
)}
</Card>
</PageSection>
);
}
}