Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Product Collection: fix "Reset All" button in Editor filters (#46226) 

* Add deselect callabck to attribute filter

* Add deselect callabck to created filter

* Add deselect callabck to featured filter

* Add deselect callabck to handpicked filter

* Cleanup deselect callabck to keyword filter

* Add deselect callabck to on salefilter

* Add deselect callabck to order by option

* Add deselect callabck to stock status filter

* Add deselect callabck to price range filter

* Add deselect callabck to price taxonomies filter

* Call all the reset filer callbacks on reset

* Add changelog

* Remove unused variable

* Replace hardcoded default filter values with the DEFAULT_FILTERS constant
This commit is contained in:
Karol Manijak 2024-04-05 13:16:00 +02:00 committed by GitHub
parent 66ac06e9fc
commit 1c4b793f06
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 113 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts
View File

@ -94,15 +94,25 @@ export const getDefaultSettings = (
query: getDefaultQuery( currentAttributes.query ),
} );
export const DEFAULT_FILTERS: Partial< ProductCollectionQuery > = {
export const DEFAULT_FILTERS: Pick<
ProductCollectionQuery,
| 'woocommerceOnSale'
| 'woocommerceStockStatus'
| 'woocommerceAttributes'
| 'woocommerceHandPickedProducts'
| 'taxQuery'
| 'featured'
| 'timeFrame'
| 'priceRange'
> = {
woocommerceOnSale: DEFAULT_QUERY.woocommerceOnSale,
woocommerceStockStatus: getDefaultStockStatuses(),
woocommerceAttributes: [],
woocommerceStockStatus: DEFAULT_QUERY.woocommerceStockStatus,
woocommerceAttributes: DEFAULT_QUERY.woocommerceAttributes,
woocommerceHandPickedProducts: DEFAULT_QUERY.woocommerceHandPickedProducts,
taxQuery: DEFAULT_QUERY.taxQuery,
woocommerceHandPickedProducts: [],
featured: DEFAULT_QUERY.featured,
timeFrame: undefined,
priceRange: undefined,
timeFrame: DEFAULT_QUERY.timeFrame,
priceRange: DEFAULT_QUERY.priceRange,
};
/**

9
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/attributes-control.tsx
View File

@ -16,6 +16,7 @@ import {
* Internal dependencies
*/
import { QueryControlProps } from '../../types';
import { DEFAULT_FILTERS } from '../../constants';
const EDIT_ATTRIBUTES_URL = `${ ADMIN_URL }edit.php?post_type=product&page=product_attributes`;
@ -30,10 +31,18 @@ const AttributesControl = ( {
} )
);
const deselectCallback = () => {
setQueryAttribute( {
woocommerceAttributes: DEFAULT_FILTERS.woocommerceAttributes,
} );
};
return (
<ToolsPanelItem
label={ __( 'Product Attributes', 'woocommerce' ) }
hasValue={ () => !! woocommerceAttributes?.length }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
<ProductAttributeTermControl
messages={ {

14
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/created-control.tsx
View File

@ -23,20 +23,24 @@ import {
* Internal dependencies
*/
import { ETimeFrameOperator, QueryControlProps } from '../../types';
import { DEFAULT_FILTERS } from '../../constants';
const CreatedControl = ( props: QueryControlProps ) => {
const { query, setQueryAttribute } = props;
const { timeFrame } = query;
const deselectCallback = () => {
setQueryAttribute( {
timeFrame: DEFAULT_FILTERS.timeFrame,
} );
};
return (
<ToolsPanelItem
label={ __( 'Created', 'woocommerce' ) }
hasValue={ () => timeFrame?.operator && timeFrame?.value }
onDeselect={ () => {
setQueryAttribute( {
timeFrame: undefined,
} );
} }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
<Flex direction="column" gap={ 3 }>
<FlexItem>

14
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/featured-products-control.tsx
View File

@ -14,19 +14,23 @@ import {
* Internal dependencies
*/
import { QueryControlProps } from '../../types';
import { DEFAULT_FILTERS } from '../../constants';
const FeaturedProductsControl = ( props: QueryControlProps ) => {
const { query, setQueryAttribute } = props;
const deselectCallback = () => {
setQueryAttribute( {
featured: DEFAULT_FILTERS.featured,
} );
};
return (
<ToolsPanelItem
label={ __( 'Featured', 'woocommerce' ) }
hasValue={ () => query.featured === true }
onDeselect={ () => {
setQueryAttribute( {
featured: false,
} );
} }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
<BaseControl
id="product-collection-featured-products-control"

15
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/hand-picked-products-control.tsx
View File

@ -17,6 +17,7 @@ import {
* Internal dependencies
*/
import { QueryControlProps } from '../../types';
import { DEFAULT_FILTERS } from '../../constants';
/**
* Returns:
@ -115,15 +116,19 @@ const HandPickedProductsControl = ( {
return decodeEntities( product?.name ) || '';
};
const deselectCallback = () => {
setQueryAttribute( {
woocommerceHandPickedProducts:
DEFAULT_FILTERS.woocommerceHandPickedProducts,
} );
};
return (
<ToolsPanelItem
label={ __( 'Hand-picked Products', 'woocommerce' ) }
hasValue={ () => !! selectedProductIds?.length }
onDeselect={ () => {
setQueryAttribute( {
woocommerceHandPickedProducts: [],
} );
} }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
<FormTokenField
disabled={ ! productsMap.size }

9
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/index.tsx
View File

@ -31,7 +31,7 @@ import {
FilterName,
} from '../../types';
import { setQueryAttribute } from '../../utils';
import { DEFAULT_FILTERS, getDefaultSettings } from '../../constants';
import { getDefaultSettings } from '../../constants';
import UpgradeNotice from './upgrade-notice';
import ColumnsControl from './columns-control';
import InheritQueryControl from './inherit-query-control';
@ -107,10 +107,9 @@ const ProductCollectionInspectorControls = (
<ToolsPanel
label={ __( 'Filters', 'woocommerce' ) }
resetAll={ ( resetAllFilters: ( () => void )[] ) => {
setQueryAttribute( props, DEFAULT_FILTERS );
resetAllFilters.forEach( ( resetFilter ) =>
resetFilter()
);
resetAllFilters.forEach( ( resetFilter ) => {
resetFilter();
} );
} }
className="wc-block-editor-product-collection-inspector-toolspanel__filters"
>

8
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/keyword-control.tsx
View File

@ -33,12 +33,16 @@ const KeywordControl = ( props: QueryControlProps ) => {
return onChangeDebounced.cancel;
}, [ querySearch, onChangeDebounced ] );
const deselectCallback = () => {
setQuerySearch( '' );
};
return (
<ToolsPanelItem
hasValue={ () => !! querySearch }
label={ __( 'Keyword', 'woocommerce' ) }
onDeselect={ () => setQuerySearch( '' ) }
resetAllFilter={ () => setQuerySearch( '' ) }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
<TextControl
label={ __( 'Keyword', 'woocommerce' ) }

14
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/on-sale-control.tsx
View File

@ -13,20 +13,24 @@ import {
* Internal dependencies
*/
import { QueryControlProps } from '../../types';
import { DEFAULT_FILTERS } from '../../constants';
const OnSaleControl = ( props: QueryControlProps ) => {
const { query, setQueryAttribute } = props;
const deselectCallback = () => {
setQueryAttribute( {
woocommerceOnSale: DEFAULT_FILTERS.woocommerceOnSale,
} );
};
return (
<ToolsPanelItem
label={ __( 'On Sale', 'woocommerce' ) }
hasValue={ () => query.woocommerceOnSale === true }
isShownByDefault
onDeselect={ () => {
setQueryAttribute( {
woocommerceOnSale: false,
} );
} }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
<ToggleControl
label={ __( 'Show only products on sale', 'woocommerce' ) }

9
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/order-by-control.tsx
View File

@ -51,6 +51,10 @@ const OrderByControl = ( props: QueryControlProps ) => {
const { order, orderBy } = query;
const defaultQuery = getDefaultQuery( query );
const deselectCallback = () => {
setQueryAttribute( { orderBy: defaultQuery.orderBy } );
};
return (
<ToolsPanelItem
label={ __( 'Order by', 'woocommerce' ) }
@ -59,9 +63,8 @@ const OrderByControl = ( props: QueryControlProps ) => {
orderBy !== defaultQuery?.orderBy
}
isShownByDefault
onDeselect={ () => {
setQueryAttribute( defaultQuery );
} }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
<SelectControl
value={ `${ orderBy }/${ order }` }

10
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/price-range-control/index.tsx
View File

@ -15,6 +15,7 @@ import {
* Internal dependencies
*/
import { QueryControlProps } from '../../../types';
import { DEFAULT_FILTERS } from '../../../constants';
import PriceTextField from './PriceTextField';
const PriceRangeControl = ( props: QueryControlProps ) => {
@ -22,15 +23,18 @@ const PriceRangeControl = ( props: QueryControlProps ) => {
const value = query.priceRange;
const deselectCallback = () => {
setQueryAttribute( { priceRange: DEFAULT_FILTERS.priceRange } );
};
return (
<ToolsPanelItem
label={ __( 'Price Range', 'woocommerce' ) }
hasValue={ () => {
return value?.min !== undefined || value?.max !== undefined;
} }
onDeselect={ () => {
setQueryAttribute( { priceRange: undefined } );
} }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
className="wc-block-product-price-range-control"
>
<BaseControl.VisualLabel>

19
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/stock-status-control.tsx
View File

@ -14,7 +14,11 @@ import {
* Internal dependencies
*/
import { QueryControlProps } from '../../types';
import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../../constants';
import {
STOCK_STATUS_OPTIONS,
DEFAULT_FILTERS,
getDefaultStockStatuses,
} from '../../constants';
/**
* Gets the id of a specific stock status from its text label
@ -36,6 +40,12 @@ function getStockStatusIdByLabel( statusLabel: FormTokenField.Value ) {
const StockStatusControl = ( props: QueryControlProps ) => {
const { query, setQueryAttribute } = props;
const deselectCallback = () => {
setQueryAttribute( {
woocommerceStockStatus: DEFAULT_FILTERS.woocommerceStockStatus,
} );
};
return (
<ToolsPanelItem
label={ __( 'Stock status', 'woocommerce' ) }
@ -45,11 +55,8 @@ const StockStatusControl = ( props: QueryControlProps ) => {
getDefaultStockStatuses()
)
}
onDeselect={ () => {
setQueryAttribute( {
woocommerceStockStatus: getDefaultStockStatuses(),
} );
} }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
isShownByDefault
>
<FormTokenField

7
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/index.tsx
View File

@ -17,6 +17,7 @@ import {
*/
import TaxonomyItem from './taxonomy-item';
import { ProductCollectionQuery } from '../../../types';
import { DEFAULT_FILTERS } from '../../../constants';
interface TaxonomyControlProps {
query: ProductCollectionQuery;
@ -53,6 +54,9 @@ function TaxonomyControls( {
return null;
}
const deselectCallback = () =>
setQueryAttribute( { taxQuery: DEFAULT_FILTERS.taxQuery } );
return (
<ToolsPanelItem
label={ __( 'Taxonomies', 'woocommerce' ) }
@ -61,7 +65,8 @@ function TaxonomyControls( {
( terms ) => !! terms.length
)
}
onDeselect={ () => setQueryAttribute( { taxQuery: {} } ) }
onDeselect={ deselectCallback }
resetAllFilter={ deselectCallback }
>
{ taxonomies.map( ( taxonomy: Taxonomy ) => {
const termIds = taxQuery?.[ taxonomy.slug ] || [];

10
plugins/woocommerce-blocks/assets/js/blocks/product-collection/types.ts
View File

@ -81,11 +81,11 @@ export interface ProductCollectionQuery {
* ),
* ```
*/
woocommerceStockStatus?: string[];
woocommerceAttributes?: AttributeMetadata[];
isProductCollectionBlock?: boolean;
woocommerceHandPickedProducts?: string[];
priceRange?: undefined | PriceRange;
woocommerceStockStatus: string[];
woocommerceAttributes: AttributeMetadata[];
isProductCollectionBlock: boolean;
woocommerceHandPickedProducts: string[];
priceRange: undefined | PriceRange;
}
export type ProductCollectionEditComponentProps =

4
plugins/woocommerce/changelog/46156-product-collection-reset-all-resets-also-the-collection-filters Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Product Collection: Fix the "Reset All" funtionality in Editor filters