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

update organizations structure and add unstyled sub routes and breadcrumbs

Browse Source
This commit is contained in:
John Mitchell
2018-11-29 14:12:33 -05:00
parent 1e7ab9deed
commit 12c8267b12
14 changed files with 594 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -6,8 +6,6 @@ import {
DropdownPosition,
DropdownToggle,
DropdownItem,
FormGroup,
KebabToggle,
Level,
LevelItem,
TextInput,
@@ -24,11 +22,14 @@ import {
SortNumericUpIcon,
TrashAltIcon,
} from '@patternfly/react-icons';
import {
Link
} from 'react-router-dom';
import Tooltip from '../Tooltip';
class DataListToolbar extends React.Component {
constructor(props) {
constructor (props) {
super(props);
const { sortedColumnKey } = this.props;
@@ -72,15 +73,15 @@ class DataListToolbar extends React.Component {
this.setState({ isSearchDropdownOpen: false, searchKey: key });
};
onActionToggle = isActionDropdownOpen => {
this.setState({ isActionDropdownOpen });
};
// onActionToggle = isActionDropdownOpen => {
// this.setState({ isActionDropdownOpen });
// };
onActionSelect = ({ target }) => {
this.setState({ isActionDropdownOpen: false });
};
// onActionSelect = () => {
// this.setState({ isActionDropdownOpen: false });
// };
render() {
render () {
const { up } = DropdownPosition;
const {
columns,
@@ -90,9 +91,10 @@ class DataListToolbar extends React.Component {
onSort,
sortedColumnKey,
sortOrder,
addUrl
} = this.props;
const {
isActionDropdownOpen,
// isActionDropdownOpen,
isSearchDropdownOpen,
isSortDropdownOpen,
searchKey,
@@ -107,19 +109,29 @@ class DataListToolbar extends React.Component {
.filter(({ key }) => key === sortedColumnKey);
const sortedColumnName = sortedColumn.name;
const isSortNumeric = sortedColumn.isNumeric;
const displayedSortIcon = () => {
let icon;
if (sortOrder === 'ascending') {
icon = isSortNumeric ? (<SortNumericUpIcon />) : (<SortAlphaUpIcon />);
} else {
icon = isSortNumeric ? (<SortNumericDownIcon />) : (<SortAlphaDownIcon />);
}
return icon;
};
return (
<div className="awx-toolbar">
<Level>
<LevelItem>
<Toolbar style={{ marginLeft: "20px" }}>
<Toolbar style={{ marginLeft: '20px' }}>
<ToolbarGroup>
<ToolbarItem>
<Checkbox
checked={isAllSelected}
onChange={onSelectAll}
aria-label="Select all"
id="select-all"/>
id="select-all"
/>
</ToolbarItem>
</ToolbarGroup>
<ToolbarGroup>
@@ -132,10 +144,12 @@ class DataListToolbar extends React.Component {
isOpen={isSearchDropdownOpen}
toggle={(
<DropdownToggle
onToggle={this.onSearchDropdownToggle}>
onToggle={this.onSearchDropdownToggle}
>
{ searchColumnName }
</DropdownToggle>
)}>
)}
>
{columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
<DropdownItem key={key} component="button">
{ name }
@@ -146,12 +160,14 @@ class DataListToolbar extends React.Component {
type="search"
aria-label="search text input"
value={searchValue}
onChange={this.handleSearchInputChange}/>
onChange={this.handleSearchInputChange}
/>
<Button
variant="tertiary"
aria-label="Search"
onClick={() => onSearch(searchValue)}>
<i className="fas fa-search" aria-hidden="true"></i>
onClick={() => onSearch(searchValue)}
>
<i className="fas fa-search" aria-hidden="true" />
</Button>
</div>
</ToolbarItem>
@@ -165,31 +181,28 @@ class DataListToolbar extends React.Component {
isOpen={isSortDropdownOpen}
toggle={(
<DropdownToggle
onToggle={this.onSortDropdownToggle}>
onToggle={this.onSortDropdownToggle}
>
{ sortedColumnName }
</DropdownToggle>
)}>
)}
>
{columns
.filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
.map(({ key, name }) => (
<DropdownItem key={key} component="button">
{ name }
</DropdownItem>
))}
<DropdownItem key={key} component="button">
{ name }
</DropdownItem>
))}
</Dropdown>
</ToolbarItem>
<ToolbarItem>
<Button
onClick={() => onSort(sortedColumnKey, sortOrder === "ascending" ? "descending" : "ascending")}
onClick={() => onSort(sortedColumnKey, sortOrder === 'ascending' ? 'descending' : 'ascending')}
variant="plain"
aria-label="Sort">
{
isSortNumeric ? (
sortOrder === "ascending" ? <SortNumericUpIcon /> : <SortNumericDownIcon />
) : (
sortOrder === "ascending" ? <SortAlphaUpIcon /> : <SortAlphaDownIcon />
)
}
aria-label="Sort"
>
{displayedSortIcon()}
</Button>
</ToolbarItem>
</ToolbarGroup>
@@ -210,12 +223,16 @@ class DataListToolbar extends React.Component {
<LevelItem>
<Tooltip message="Delete" position="top">
<Button variant="plain" aria-label="Delete">
<TrashAltIcon/>
<TrashAltIcon />
</Button>
</Tooltip>
<Button variant="primary" aria-label="Add">
Add
</Button>
{addUrl && (
<Link to={addUrl}>
<Button variant="primary" aria-label="Add">
Add
</Button>
</Link>
)}
</LevelItem>
</Level>
</div>
@@ -223,4 +240,4 @@ class DataListToolbar extends React.Component {
}
}
export default DataListToolbar;
export default DataListToolbar;

44
src/components/OrganizationListItem.jsx
View File

@@ -1,44 +0,0 @@
import React from 'react';
import {
Badge,
Checkbox,
} from '@patternfly/react-core';
export default ({ itemId, name, userCount, teamCount, adminCount, isSelected, onSelect }) => (
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
<div className="pf-c-data-list__check">
<Checkbox
checked={isSelected}
onChange={onSelect}
aria-label={`select organization ${itemId}`}
id={`select-organization-${itemId}`}
/>
</div>
<div className="pf-c-data-list__cell">
<span id="check-action-item1">
<a href={`#/organizations/${itemId}`}>{ name }</a>
</span>
</div>
<div className="pf-c-data-list__cell">
<a href="#/dashboard"> Users </a>
<Badge isRead>
{' '}
{userCount}
{' '}
</Badge>
<a href="#/dashboard"> Teams </a>
<Badge isRead>
{' '}
{teamCount}
{' '}
</Badge>
<a href="#/dashboard"> Admins </a>
<Badge isRead>
{' '}
{adminCount}
{' '}
</Badge>
</div>
<div className="pf-c-data-list__cell" />
</li>
);