AdvancedFilters: Add request for orders statuses
This commit is contained in:
Paul Sealock
parent
62276fb361
commit
58195911a7
|
|
@ -10,6 +10,8 @@ import { __ } from '@wordpress/i18n';
|
|||
import { getRequestByIdString } from 'lib/async-requests';
|
||||
import { NAMESPACE } from 'store/constants';
|
||||
|
||||
const { orderStatuses } = wcSettings;
|
||||
|
||||
export const filters = [
|
||||
{ label: __( 'All Orders', 'wc-admin' ), value: 'all' },
|
||||
{
|
||||
|
|
@ -42,15 +44,11 @@ export const advancedFilterConfig = {
|
|||
],
|
||||
input: {
|
||||
component: 'SelectControl',
|
||||
options: [
|
||||
{ value: 'pending', label: __( 'Pending', 'wc-admin' ) },
|
||||
{ value: 'processing', label: __( 'Processing', 'wc-admin' ) },
|
||||
{ value: 'on-hold', label: __( 'On Hold', 'wc-admin' ) },
|
||||
{ value: 'completed', label: __( 'Completed', 'wc-admin' ) },
|
||||
{ value: 'refunded', label: __( 'Refunded', 'wc-admin' ) },
|
||||
{ value: 'cancelled', label: __( 'Cancelled', 'wc-admin' ) },
|
||||
{ value: 'failed', label: __( 'Failed', 'wc-admin' ) },
|
||||
],
|
||||
options: Object.keys( orderStatuses ).map( key => ( {
|
||||
value: key,
|
||||
label: orderStatuses[ key ],
|
||||
} ) ),
|
||||
defaultOption: 'wc-cancelled',
|
||||
},
|
||||
},
|
||||
product_id: {
|
||||
|
|
@ -112,6 +110,7 @@ export const advancedFilterConfig = {
|
|||
{ value: 'new', label: __( 'New', 'wc-admin' ) },
|
||||
{ value: 'returning', label: __( 'Returning', 'wc-admin' ) },
|
||||
],
|
||||
defaultOption: 'new',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,11 @@ import Card from 'components/card';
|
|||
import Link from 'components/link';
|
||||
import SelectFilter from './select-filter';
|
||||
import SearchFilter from './search-filter';
|
||||
import { getActiveFiltersFromQuery, getQueryFromActiveFilters } from './utils';
|
||||
import {
|
||||
getActiveFiltersFromQuery,
|
||||
getQueryFromActiveFilters,
|
||||
getDefaultOptionValue,
|
||||
} from './utils';
|
||||
import { getNewPath } from 'lib/nav-utils';
|
||||
import './style.scss';
|
||||
|
||||
|
|
@ -100,7 +104,7 @@ class AdvancedFilters extends Component {
|
|||
newFilter.rule = filterConfig.rules[ 0 ].value;
|
||||
}
|
||||
if ( filterConfig.input && filterConfig.input.options ) {
|
||||
newFilter.value = filterConfig.input.options[ 0 ].value;
|
||||
newFilter.value = getDefaultOptionValue( filterConfig, filterConfig.input.options );
|
||||
}
|
||||
if ( filterConfig.input && 'Search' === filterConfig.input.component ) {
|
||||
newFilter.value = '';
|
||||
|
|
|
|||
|
|
@ -2,44 +2,82 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Fragment } from '@wordpress/element';
|
||||
import { SelectControl } from '@wordpress/components';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import { SelectControl, Spinner } from '@wordpress/components';
|
||||
import { partial } from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withInstanceId } from '@wordpress/compose';
|
||||
|
||||
const SelectFilter = ( { config, filter, instanceId, onFilterChange } ) => {
|
||||
const { key, rule, value } = filter;
|
||||
const { input, labels, rules } = config;
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
id={ `${ key }-${ instanceId }` }
|
||||
className="woocommerce-filters-advanced__fieldset-legend"
|
||||
>
|
||||
{ labels.title }
|
||||
</div>
|
||||
{ rule && (
|
||||
<SelectControl
|
||||
className="woocommerce-filters-advanced__list-specifier"
|
||||
options={ rules }
|
||||
value={ rule }
|
||||
onChange={ partial( onFilterChange, key, 'rule' ) }
|
||||
aria-label={ labels.rule }
|
||||
/>
|
||||
) }
|
||||
<div className="woocommerce-filters-advanced__list-selector">
|
||||
<SelectControl
|
||||
className="woocommerce-filters-advanced__list-select"
|
||||
options={ input.options }
|
||||
value={ value }
|
||||
onChange={ partial( onFilterChange, filter.key, 'value' ) }
|
||||
aria-labelledby={ `${ key }-${ instanceId }` }
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { getDefaultOptionValue } from './utils';
|
||||
|
||||
class SelectFilter extends Component {
|
||||
constructor( { filter, config, onFilterChange } ) {
|
||||
super( ...arguments );
|
||||
|
||||
const options = config.input.options;
|
||||
this.state = { options };
|
||||
|
||||
this.updateOptions = this.updateOptions.bind( this );
|
||||
|
||||
if ( ! options && config.input.getOptions ) {
|
||||
config.input
|
||||
.getOptions()
|
||||
.then( this.updateOptions )
|
||||
.then( returnedOptions => {
|
||||
if ( ! filter.value ) {
|
||||
const value = getDefaultOptionValue( config, returnedOptions );
|
||||
onFilterChange( filter.key, 'value', value );
|
||||
}
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
updateOptions( options ) {
|
||||
this.setState( { options } );
|
||||
return options;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { config, filter, instanceId, onFilterChange } = this.props;
|
||||
const { options } = this.state;
|
||||
const { key, rule, value } = filter;
|
||||
const { labels, rules } = config;
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
id={ `${ key }-${ instanceId }` }
|
||||
className="woocommerce-filters-advanced__fieldset-legend"
|
||||
>
|
||||
{ labels.title }
|
||||
</div>
|
||||
{ rule && (
|
||||
<SelectControl
|
||||
className="woocommerce-filters-advanced__list-specifier"
|
||||
options={ rules }
|
||||
value={ rule }
|
||||
onChange={ partial( onFilterChange, key, 'rule' ) }
|
||||
aria-label={ labels.rule }
|
||||
/>
|
||||
) }
|
||||
<div className="woocommerce-filters-advanced__list-selector">
|
||||
{ ! options && <Spinner /> }
|
||||
{ options && (
|
||||
<SelectControl
|
||||
className="woocommerce-filters-advanced__list-select"
|
||||
options={ options }
|
||||
value={ value }
|
||||
onChange={ partial( onFilterChange, filter.key, 'value' ) }
|
||||
aria-labelledby={ `${ key }-${ instanceId }` }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SelectFilter.propTypes = {
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.components-base-control__field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-filters-advanced__title-select {
|
||||
|
|
@ -157,6 +161,18 @@
|
|||
@include breakpoint( '<782px' ) {
|
||||
padding: $gap-smallest 0;
|
||||
}
|
||||
|
||||
.components-spinner {
|
||||
margin: auto;
|
||||
display: block;
|
||||
float: none;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-filters-advanced__list-specifier {
|
||||
|
|
|
|||
|
|
@ -88,3 +88,23 @@ export const getQueryFromActiveFilters = ( activeFilters, query, config ) => {
|
|||
|
||||
return { ...previousData, ...nextData };
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the url query key from the filter key and rule.
|
||||
*
|
||||
* @param {object} config - a filter config object.
|
||||
* @param {array} options - select options.
|
||||
* @return {string|undefined} - the value of the default option.
|
||||
*/
|
||||
export const getDefaultOptionValue = ( config, options ) => {
|
||||
const { defaultOption } = config.input;
|
||||
if ( config.input.defaultOption ) {
|
||||
const option = find( options, { value: defaultOption } );
|
||||
if ( ! option ) {
|
||||
console.warn( `invalid defaultOption ${ defaultOption } supplied to ${ config.labels.add }` );
|
||||
return undefined;
|
||||
}
|
||||
return option.value;
|
||||
}
|
||||
return options[ 0 ].value;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4563,7 +4563,7 @@
|
|||
},
|
||||
"os-locale": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
|
||||
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -10998,7 +10998,7 @@
|
|||
},
|
||||
"chalk": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
|
||||
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
|
|
@ -11054,7 +11054,7 @@
|
|||
},
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue