selectively add icontains to only text-based searches

This commit is contained in:
John Mitchell
2019-09-13 12:42:56 -04:00
parent ec3edb07e8
commit 86029934ad
7 changed files with 26 additions and 4 deletions

View File

@@ -15,6 +15,8 @@ import Search from '../Search';
import Sort from '../Sort'; import Sort from '../Sort';
import VerticalSeparator from '../VerticalSeparator'; import VerticalSeparator from '../VerticalSeparator';
import { QSConfig } from '@types';
const AWXToolbar = styled.div` const AWXToolbar = styled.div`
--awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); --awx-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
--awx-toolbar--BorderColor: #ebebeb; --awx-toolbar--BorderColor: #ebebeb;
@@ -98,6 +100,7 @@ class DataListToolbar extends React.Component {
sortedColumnKey, sortedColumnKey,
additionalControls, additionalControls,
i18n, i18n,
qsConfig,
} = this.props; } = this.props;
const showExpandCollapse = onCompact && onExpand; const showExpandCollapse = onCompact && onExpand;
@@ -120,6 +123,7 @@ class DataListToolbar extends React.Component {
)} )}
<ToolbarItem css="flex-grow: 1;"> <ToolbarItem css="flex-grow: 1;">
<Search <Search
qsConfig={qsConfig}
columns={columns} columns={columns}
onSearch={onSearch} onSearch={onSearch}
sortedColumnKey={sortedColumnKey} sortedColumnKey={sortedColumnKey}
@@ -160,6 +164,7 @@ class DataListToolbar extends React.Component {
} }
DataListToolbar.propTypes = { DataListToolbar.propTypes = {
qsConfig: QSConfig.isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired, columns: PropTypes.arrayOf(PropTypes.object).isRequired,
showSelectAll: PropTypes.bool, showSelectAll: PropTypes.bool,
isAllSelected: PropTypes.bool, isAllSelected: PropTypes.bool,

View File

@@ -14,6 +14,8 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons'; import { SearchIcon } from '@patternfly/react-icons';
import { QSConfig } from '@types';
import styled from 'styled-components'; import styled from 'styled-components';
const TextInput = styled(PFTextInput)` const TextInput = styled(PFTextInput)`
@@ -110,10 +112,18 @@ class Search extends React.Component {
e.preventDefault(); e.preventDefault();
const { searchKey, searchValue } = this.state; const { searchKey, searchValue } = this.state;
const { onSearch } = this.props; const { onSearch, qsConfig } = this.props;
// TODO: probably not _always_ add icontains. I don't think icontains works for numbers. const isNonStringField = key => qsConfig
onSearch(`${searchKey}__icontains`, searchValue); .integerFields
.filter(field => field === key).length || qsConfig.dateFields
.filter(field => field === key).length;
// TODO: this will probably become more sophisticated, where date
// fields and string fields are passed to a formatter
const actualSearchKey = isNonStringField(searchKey) ? searchKey : `${searchKey}__icontains`;
onSearch(actualSearchKey, searchValue);
this.setState({ searchValue: '' }); this.setState({ searchValue: '' });
} }
@@ -202,6 +212,7 @@ class Search extends React.Component {
} }
Search.propTypes = { Search.propTypes = {
qsConfig: QSConfig.isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired, columns: PropTypes.arrayOf(PropTypes.object).isRequired,
onSearch: PropTypes.func, onSearch: PropTypes.func,
sortedColumnKey: PropTypes.string, sortedColumnKey: PropTypes.string,

View File

@@ -183,6 +183,7 @@ class JobList extends Component {
showExpandCollapse showExpandCollapse
isAllSelected={isAllSelected} isAllSelected={isAllSelected}
onSelectAll={this.handleSelectAll} onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[ additionalControls={[
<ToolbarDeleteButton <ToolbarDeleteButton
key="delete" key="delete"

View File

@@ -190,6 +190,7 @@ class OrganizationAccess extends React.Component {
renderToolbar={props => ( renderToolbar={props => (
<DataListToolbar <DataListToolbar
{...props} {...props}
qsConfig={QS_CONFIG}
additionalControls={ additionalControls={
canEdit canEdit
? [ ? [

View File

@@ -181,6 +181,7 @@ class OrganizationsList extends Component {
showSelectAll showSelectAll
isAllSelected={isAllSelected} isAllSelected={isAllSelected}
onSelectAll={this.handleSelectAll} onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[ additionalControls={[
<ToolbarDeleteButton <ToolbarDeleteButton
key="delete" key="delete"

View File

@@ -207,6 +207,7 @@ class TemplatesList extends Component {
showExpandCollapse showExpandCollapse
isAllSelected={isAllSelected} isAllSelected={isAllSelected}
onSelectAll={this.handleSelectAll} onSelectAll={this.handleSelectAll}
qsConfig={QS_CONFIG}
additionalControls={[ additionalControls={[
<ToolbarDeleteButton <ToolbarDeleteButton
key="delete" key="delete"

View File

@@ -161,7 +161,8 @@ export const encodeNonDefaultQueryString = (config, params) => {
export function getQSConfig( export function getQSConfig(
namespace, namespace,
defaultParams = { page: 1, page_size: 5, order_by: 'name' }, defaultParams = { page: 1, page_size: 5, order_by: 'name' },
integerFields = ['page', 'page_size'] integerFields = ['page', 'page_size'],
dateFields = ['modified', 'created']
) { ) {
if (!namespace) { if (!namespace) {
throw new Error('a QS namespace is required'); throw new Error('a QS namespace is required');
@@ -170,6 +171,7 @@ export function getQSConfig(
namespace, namespace,
defaultParams, defaultParams,
integerFields, integerFields,
dateFields
}; };
} }