mirror of
https://github.com/ansible/awx.git
synced 2026-03-06 03:01:06 -03:30
wip - pf4 data list and pagination
This commit is contained in:
Jake McDermott
226
src/components/DataListToolbar/DataListToolbar.jsx
Normal file
226
src/components/DataListToolbar/DataListToolbar.jsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Dropdown,
|
||||
DropdownPosition,
|
||||
DropdownToggle,
|
||||
DropdownItem,
|
||||
FormGroup,
|
||||
KebabToggle,
|
||||
Level,
|
||||
LevelItem,
|
||||
TextInput,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
ToolbarItem,
|
||||
} from '@patternfly/react-core';
|
||||
import {
|
||||
BarsIcon,
|
||||
EqualsIcon,
|
||||
SortAlphaDownIcon,
|
||||
SortAlphaUpIcon,
|
||||
SortNumericDownIcon,
|
||||
SortNumericUpIcon,
|
||||
TrashAltIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
|
||||
import Tooltip from '../Tooltip';
|
||||
|
||||
class DataListToolbar extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { sortedColumnKey } = this.props;
|
||||
|
||||
this.state = {
|
||||
isSearchDropdownOpen: false,
|
||||
isSortDropdownOpen: false,
|
||||
searchKey: sortedColumnKey,
|
||||
searchValue: '',
|
||||
};
|
||||
}
|
||||
|
||||
handleSearchInputChange = searchValue => {
|
||||
this.setState({ searchValue });
|
||||
};
|
||||
|
||||
onSortDropdownToggle = isSortDropdownOpen => {
|
||||
this.setState({ isSortDropdownOpen });
|
||||
};
|
||||
|
||||
onSortDropdownSelect = ({ target }) => {
|
||||
const { columns, onSort, sortOrder } = this.props;
|
||||
|
||||
const [{ key }] = columns.filter(({ name }) => name === target.innerText);
|
||||
|
||||
this.setState({ isSortDropdownOpen: false });
|
||||
|
||||
onSort(key, sortOrder);
|
||||
};
|
||||
|
||||
onSearchDropdownToggle = isSearchDropdownOpen => {
|
||||
this.setState({ isSearchDropdownOpen });
|
||||
};
|
||||
|
||||
onSearchDropdownSelect = ({ target }) => {
|
||||
const { columns } = this.props;
|
||||
|
||||
const targetName = target.innerText;
|
||||
const [{ key }] = columns.filter(({ name }) => name === targetName);
|
||||
|
||||
this.setState({ isSearchDropdownOpen: false, searchKey: key });
|
||||
};
|
||||
|
||||
onActionToggle = isActionDropdownOpen => {
|
||||
this.setState({ isActionDropdownOpen });
|
||||
};
|
||||
|
||||
onActionSelect = ({ target }) => {
|
||||
this.setState({ isActionDropdownOpen: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { up } = DropdownPosition;
|
||||
const {
|
||||
columns,
|
||||
isAllSelected,
|
||||
onSearch,
|
||||
onSelectAll,
|
||||
onSort,
|
||||
sortedColumnKey,
|
||||
sortOrder,
|
||||
} = this.props;
|
||||
const {
|
||||
isActionDropdownOpen,
|
||||
isSearchDropdownOpen,
|
||||
isSortDropdownOpen,
|
||||
searchKey,
|
||||
searchValue,
|
||||
} = this.state;
|
||||
|
||||
const [searchColumn] = columns
|
||||
.filter(({ key }) => key === searchKey);
|
||||
const searchColumnName = searchColumn.name;
|
||||
|
||||
const [sortedColumn] = columns
|
||||
.filter(({ key }) => key === sortedColumnKey);
|
||||
const sortedColumnName = sortedColumn.name;
|
||||
const isSortNumeric = sortedColumn.isNumeric;
|
||||
|
||||
return (
|
||||
<div className="awx-toolbar">
|
||||
<Level>
|
||||
<LevelItem>
|
||||
<Toolbar style={{ marginLeft: "20px" }}>
|
||||
<ToolbarGroup>
|
||||
<ToolbarItem>
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onChange={onSelectAll}
|
||||
aria-label="Select all"
|
||||
id="select-all"/>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<ToolbarItem>
|
||||
<div className="pf-c-input-group">
|
||||
<Dropdown
|
||||
onToggle={this.onSearchDropdownToggle}
|
||||
onSelect={this.onSearchDropdownSelect}
|
||||
direction={up}
|
||||
isOpen={isSearchDropdownOpen}
|
||||
toggle={(
|
||||
<DropdownToggle
|
||||
onToggle={this.onSearchDropdownToggle}>
|
||||
{ searchColumnName }
|
||||
</DropdownToggle>
|
||||
)}>
|
||||
{columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
|
||||
<DropdownItem key={key} component="button">
|
||||
{ name }
|
||||
</DropdownItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
<TextInput
|
||||
type="search"
|
||||
aria-label="search text input"
|
||||
value={searchValue}
|
||||
onChange={this.handleSearchInputChange}/>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
aria-label="Search"
|
||||
onClick={() => onSearch(searchValue)}>
|
||||
<i className="fas fa-search" aria-hidden="true"></i>
|
||||
</Button>
|
||||
</div>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
onToggle={this.onSortDropdownToggle}
|
||||
onSelect={this.onSortDropdownSelect}
|
||||
direction={up}
|
||||
isOpen={isSortDropdownOpen}
|
||||
toggle={(
|
||||
<DropdownToggle
|
||||
onToggle={this.onSortDropdownToggle}>
|
||||
{ sortedColumnName }
|
||||
</DropdownToggle>
|
||||
)}>
|
||||
{columns
|
||||
.filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
|
||||
.map(({ key, name }) => (
|
||||
<DropdownItem key={key} component="button">
|
||||
{ name }
|
||||
</DropdownItem>
|
||||
))}
|
||||
</Dropdown>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Button
|
||||
onClick={() => onSort(sortedColumnKey, sortOrder === "ascending" ? "descending" : "ascending")}
|
||||
variant="plain"
|
||||
aria-label="Sort">
|
||||
{
|
||||
isSortNumeric ? (
|
||||
sortOrder === "ascending" ? <SortNumericUpIcon /> : <SortNumericDownIcon />
|
||||
) : (
|
||||
sortOrder === "ascending" ? <SortAlphaUpIcon /> : <SortAlphaDownIcon />
|
||||
)
|
||||
}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<ToolbarItem>
|
||||
<Button variant="plain" aria-label="Expand">
|
||||
<BarsIcon />
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<Button variant="plain" aria-label="Collapse">
|
||||
<EqualsIcon />
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
</LevelItem>
|
||||
<LevelItem>
|
||||
<Tooltip message="Delete" position="top">
|
||||
<Button variant="plain" aria-label="Delete">
|
||||
<TrashAltIcon/>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Button variant="primary" aria-label="Add">
|
||||
Add
|
||||
</Button>
|
||||
</LevelItem>
|
||||
</Level>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DataListToolbar;
|
||||
3
src/components/DataListToolbar/index.js
Normal file
3
src/components/DataListToolbar/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import DataListToolbar from './DataListToolbar';
|
||||
|
||||
export default DataListToolbar;
|
||||
89
src/components/DataListToolbar/styles.scss
Normal file
89
src/components/DataListToolbar/styles.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
.awx-toolbar {
|
||||
--awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
|
||||
--awx-toolbar--BorderColor: var(--pf-global--Color--light-200);
|
||||
--awx-toolbar--BorderWidth: var(--pf-global--BorderWidth--sm);
|
||||
|
||||
border: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
|
||||
background-color: var(--awx-toolbar--BackgroundColor);
|
||||
height: 70px;
|
||||
padding-top: 5px;
|
||||
|
||||
--pf-global--target-size--MinHeight: 0px;
|
||||
--pf-global--target-size--MinWidth: 0px;
|
||||
--pf-global--FontSize--md: 14px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-button.pf-m-plain {
|
||||
--pf-c-button--m-plain--PaddingLeft: 0px;
|
||||
--pf-c-button--m-plain--PaddingRight: 0px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-toolbar__group {
|
||||
--pf-l-toolbar__group--MarginRight: 0px;
|
||||
--pf-l-toolbar__group--MarginLeft: 0px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-toolbar__group:after {
|
||||
content: "";
|
||||
background-color: #d7d7d7;
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.awx-toolbar button {
|
||||
height: 30px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-input-group {
|
||||
min-height: 0px;
|
||||
height: 30px;
|
||||
|
||||
input {
|
||||
padding: 0px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.pf-m-tertiary {
|
||||
width: 34px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-dropdown__toggle {
|
||||
min-height: 30px;
|
||||
min-width: 70px;
|
||||
height: 30px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
.pf-c-dropdown__toggle-icon {
|
||||
margin: 0px;
|
||||
padding-top: 3px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-toolbar__item + .pf-l-toolbar__item button {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-c-button.pf-m-primary {
|
||||
background-color: #5cb85c;
|
||||
min-width: 0px;
|
||||
width: 58px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
|
||||
font-size: 18px;
|
||||
}
|
||||
Reference in New Issue
Block a user