From ec83c6461c72c9bc499e90ceeeb2f56ff7998b83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 8 Nov 2023 18:20:32 +0100 Subject: [PATCH 01/35] Show/Hide filters based on ViewActions menu --- .../src/components/dataviews/view-actions.js | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js index e1e85a3e56d09f..db7bfc058a6a50 100644 --- a/packages/edit-site/src/components/dataviews/view-actions.js +++ b/packages/edit-site/src/components/dataviews/view-actions.js @@ -185,6 +185,57 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { ); } +function FiltersVisibilityMenu( { view, onChangeView, fields } ) { + const filtersRegistered = fields + .filter( ( f ) => f?.filters && f.filters.length > 0 ) + .map( ( f ) => ( { id: f.id, name: f.header } ) ); + + if ( filtersRegistered.length === 0 ) { + return null; + } + + return ( + } + > + { __( 'Filters' ) } + + } + > + { filtersRegistered?.map( ( { id, name } ) => { + return ( + + ) + } + onSelect={ ( event ) => { + event.preventDefault(); + onChangeView( { + ...view, + visibleFilters: view.visibleFilters?.includes( + id + ) + ? view.visibleFilters.filter( + ( filter ) => filter !== id + ) + : [ ...view.visibleFilters, id ], + } ); + } } + role="menuitemcheckbox" + > + { name } + + ); + } ) } + + ); +} + // This object is used to construct the sorting options per sortable field. const sortingItemsInfo = { asc: { icon: arrowUp, label: __( 'Sort ascending' ) }, @@ -306,6 +357,11 @@ export default function ViewActions( { view={ view } onChangeView={ onChangeView } /> + From 24228c252077280bd3e174cfce414a0dd8c3dcfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 Nov 2023 11:42:09 +0100 Subject: [PATCH 02/35] Make author & status filters not hidable --- .../src/components/dataviews/view-actions.js | 14 ++++++++++---- .../edit-site/src/components/page-pages/index.js | 2 ++ 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js index db7bfc058a6a50..10923c916292e8 100644 --- a/packages/edit-site/src/components/dataviews/view-actions.js +++ b/packages/edit-site/src/components/dataviews/view-actions.js @@ -186,11 +186,17 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { } function FiltersVisibilityMenu( { view, onChangeView, fields } ) { - const filtersRegistered = fields - .filter( ( f ) => f?.filters && f.filters.length > 0 ) + const filtersHidable = fields + .filter( + ( f ) => + f.filters && + f.filters.length > 0 && + ( ! f.hasOwnProperty( 'enableFilterHiding' ) || + f.enableFilterHiding ) + ) .map( ( f ) => ( { id: f.id, name: f.header } ) ); - if ( filtersRegistered.length === 0 ) { + if ( filtersHidable.length === 0 ) { return null; } @@ -204,7 +210,7 @@ function FiltersVisibilityMenu( { view, onChangeView, fields } ) { } > - { filtersRegistered?.map( ( { id, name } ) => { + { filtersHidable?.map( ( { id, name } ) => { return ( Date: Thu, 9 Nov 2023 11:53:24 +0100 Subject: [PATCH 03/35] Allow existing filters to be removable per demo purposes --- packages/edit-site/src/components/page-pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 39952beef59ae4..00edfbba862abf 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -233,7 +233,7 @@ export default function PagePages() { value: id, label: name, } ) ) || [], - enableFilterHiding: false, + // enableFilterHiding: false, }, { header: __( 'Status' ), @@ -244,7 +244,7 @@ export default function PagePages() { filters: [ 'in' ], elements: STATUSES, enableSorting: false, - enableFilterHiding: false, + // enableFilterHiding: false, }, { header: __( 'Date' ), From cdaba9645697ac337f1c748317b1c0ea3b2d1859 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 Nov 2023 17:42:32 +0100 Subject: [PATCH 04/35] Remove enableFiltering prop --- .../edit-site/src/components/dataviews/view-actions.js | 8 +------- packages/edit-site/src/components/page-pages/index.js | 2 -- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js index 10923c916292e8..44e2c375fec119 100644 --- a/packages/edit-site/src/components/dataviews/view-actions.js +++ b/packages/edit-site/src/components/dataviews/view-actions.js @@ -187,13 +187,7 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { function FiltersVisibilityMenu( { view, onChangeView, fields } ) { const filtersHidable = fields - .filter( - ( f ) => - f.filters && - f.filters.length > 0 && - ( ! f.hasOwnProperty( 'enableFilterHiding' ) || - f.enableFilterHiding ) - ) + .filter( ( f ) => f.filters && f.filters.length > 0 ) .map( ( f ) => ( { id: f.id, name: f.header } ) ); if ( filtersHidable.length === 0 ) { diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 00edfbba862abf..c2461adc34f8d0 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -233,7 +233,6 @@ export default function PagePages() { value: id, label: name, } ) ) || [], - // enableFilterHiding: false, }, { header: __( 'Status' ), @@ -244,7 +243,6 @@ export default function PagePages() { filters: [ 'in' ], elements: STATUSES, enableSorting: false, - // enableFilterHiding: false, }, { header: __( 'Date' ), From b988d547be88e87e49f9e4b8de43ab562266bb9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:17:52 +0100 Subject: [PATCH 05/35] Add/Remove filters from the new affordance --- .../src/components/dataviews/add-filter.js | 63 +++++++++++++++++++ .../src/components/dataviews/filters.js | 11 ++++ 2 files changed, 74 insertions(+) create mode 100644 packages/edit-site/src/components/dataviews/add-filter.js diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js new file mode 100644 index 00000000000000..2a2d3055087ac9 --- /dev/null +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -0,0 +1,63 @@ +/** + * WordPress dependencies + */ +import { + privateApis as componentsPrivateApis, + Button, + BaseControl, + Icon, +} from '@wordpress/components'; +import { check } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); + +export default function AddFilter( { filters, view, onChangeView } ) { + return ( + + { __( '+ Add filter' ) } + } + > + { filters.map( ( filter ) => ( + + ) + } + onSelect={ ( event ) => { + event.preventDefault(); + onChangeView( ( currentView ) => ( { + ...currentView, + visibleFilters: + currentView.visibleFilters.includes( + filter.field + ) + ? currentView.visibleFilters.filter( + ( field ) => + field !== filter.field + ) + : [ + ...currentView.visibleFilters, + filter.field, + ], + } ) ); + } } + role="menuitemcheckbox" + > + { filter.name } + + ) ) } + + + ); +} diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index e34ba84040a95d..39ed1e9ff0d50f 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n'; */ import { default as InFilter, OPERATOR_IN } from './in-filter'; import ResetFilters from './reset-filters'; +import AddFilter from './add-filter'; const VALID_OPERATORS = [ OPERATOR_IN ]; @@ -62,6 +63,16 @@ export default function Filters( { fields, view, onChangeView } ) { } ) .filter( Boolean ); + // TODO: disable when no more filters to add. + visibleFilters.push( + + ); + if ( visibleFilters?.length > 0 ) { visibleFilters.push( Date: Fri, 10 Nov 2023 10:18:21 +0100 Subject: [PATCH 06/35] Remove FiltersVisibility menu --- .../src/components/dataviews/view-actions.js | 56 ------------------- 1 file changed, 56 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js index 44e2c375fec119..e1e85a3e56d09f 100644 --- a/packages/edit-site/src/components/dataviews/view-actions.js +++ b/packages/edit-site/src/components/dataviews/view-actions.js @@ -185,57 +185,6 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) { ); } -function FiltersVisibilityMenu( { view, onChangeView, fields } ) { - const filtersHidable = fields - .filter( ( f ) => f.filters && f.filters.length > 0 ) - .map( ( f ) => ( { id: f.id, name: f.header } ) ); - - if ( filtersHidable.length === 0 ) { - return null; - } - - return ( - } - > - { __( 'Filters' ) } - - } - > - { filtersHidable?.map( ( { id, name } ) => { - return ( - - ) - } - onSelect={ ( event ) => { - event.preventDefault(); - onChangeView( { - ...view, - visibleFilters: view.visibleFilters?.includes( - id - ) - ? view.visibleFilters.filter( - ( filter ) => filter !== id - ) - : [ ...view.visibleFilters, id ], - } ); - } } - role="menuitemcheckbox" - > - { name } - - ); - } ) } - - ); -} - // This object is used to construct the sorting options per sortable field. const sortingItemsInfo = { asc: { icon: arrowUp, label: __( 'Sort ascending' ) }, @@ -357,11 +306,6 @@ export default function ViewActions( { view={ view } onChangeView={ onChangeView } /> - From 130c916e4247ea5d48667c67b103412727d8d6a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:19:52 +0100 Subject: [PATCH 07/35] No filters visible by default --- .../edit-site/src/components/sidebar-dataviews/default-views.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index a1f5375635d377..669e1baa3e1244 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -14,7 +14,7 @@ const DEFAULT_PAGE_BASE = { field: 'date', direction: 'desc', }, - visibleFilters: [ 'author', 'status' ], + visibleFilters: [], // All fields are visible by default, so it's // better to keep track of the hidden ones. hiddenFields: [ 'date', 'featured-image' ], From 5935df8444873c2fb19d70bd3b474e8edc83005f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:42:01 +0100 Subject: [PATCH 08/35] Add filter value directly from AddFilter affordance --- .../src/components/dataviews/add-filter.js | 76 ++++++++++++------- .../src/components/dataviews/filters.js | 1 + 2 files changed, 48 insertions(+), 29 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 2a2d3055087ac9..dac4055afc7fad 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -7,7 +7,7 @@ import { BaseControl, Icon, } from '@wordpress/components'; -import { check } from '@wordpress/icons'; +import { chevronRightSmall } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; /** @@ -15,9 +15,14 @@ import { __ } from '@wordpress/i18n'; */ import { unlock } from '../../lock-unlock'; -const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); +const { + DropdownMenuV2, + DropdownSubMenuV2, + DropdownSubMenuTriggerV2, + DropdownMenuItemV2, +} = unlock( componentsPrivateApis ); -export default function AddFilter( { filters, view, onChangeView } ) { +export default function AddFilter( { filters, onChangeView } ) { return ( { filters.map( ( filter ) => ( - - ) + trigger={ + } + > + { filter.name } + } - onSelect={ ( event ) => { - event.preventDefault(); - onChangeView( ( currentView ) => ( { - ...currentView, - visibleFilters: - currentView.visibleFilters.includes( - filter.field - ) - ? currentView.visibleFilters.filter( - ( field ) => - field !== filter.field - ) - : [ - ...currentView.visibleFilters, - filter.field, - ], - } ) ); - } } - role="menuitemcheckbox" > - { filter.name } - + { filter.elements.map( ( element ) => ( + { + onChangeView( ( currentView ) => ( { + ...currentView, + // TODO: set filter as well + visibleFilters: + currentView.visibleFilters.includes( + filter.field + ) + ? currentView.visibleFilters + : [ + ...currentView.visibleFilters, + filter.field, + ], + filters: [ + ...currentView.filters, + { + field: filter.field, + operator: 'in', + value: element.value, + }, + ], + } ) ); + } } + role="menuitemcheckbox" + > + { element.label } + + ) ) } + ) ) } diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index 39ed1e9ff0d50f..bb86162a1e5165 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -74,6 +74,7 @@ export default function Filters( { fields, view, onChangeView } ) { ); if ( visibleFilters?.length > 0 ) { + // TODO: fix visibility. visibleFilters.push( Date: Fri, 10 Nov 2023 10:47:28 +0100 Subject: [PATCH 09/35] AddFilter only lists the hidden filters --- .../src/components/dataviews/add-filter.js | 4 +- .../src/components/dataviews/filters.js | 45 +++++++++---------- 2 files changed, 23 insertions(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index dac4055afc7fad..a0a7455a00d9fa 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -28,7 +28,9 @@ export default function AddFilter( { filters, onChangeView } ) { { __( '+ Add filter' ) } + } > { filters.map( ( filter ) => ( diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index bb86162a1e5165..4ac686d435f150 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -37,44 +37,39 @@ export default function Filters( { fields, view, onChangeView } ) { } ); } ); - const visibleFilters = view.visibleFilters - ?.map( ( fieldName ) => { - const visibleFiltersForField = filtersRegistered.filter( - ( f ) => f.field === fieldName - ); + const visibleFiltersList = filtersRegistered.filter( ( filter ) => + view.visibleFilters.includes( filter.field ) + ); + const hiddenFiltersList = filtersRegistered.filter( + ( filter ) => ! view.visibleFilters.includes( filter.field ) + ); - if ( visibleFiltersForField.length === 0 ) { - return null; + const visibleFilters = visibleFiltersList + ?.map( ( filter ) => { + if ( OPERATOR_IN === filter.operator ) { + return ( + + ); } - - return visibleFiltersForField.map( ( filter ) => { - if ( OPERATOR_IN === filter.operator ) { - return ( - - ); - } - return null; - } ); + return null; } ) .filter( Boolean ); - // TODO: disable when no more filters to add. visibleFilters.push( ); - if ( visibleFilters?.length > 0 ) { - // TODO: fix visibility. + if ( visibleFilters?.length > 1 ) { visibleFilters.push( Date: Fri, 10 Nov 2023 10:56:24 +0100 Subject: [PATCH 10/35] Add new filters from columns if no present --- .../edit-site/src/components/dataviews/view-list.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index 2fec3286314231..ec8b542d65eaa1 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -427,9 +427,17 @@ function ViewList( { onChangeView( { ...view, search: value, page: 1 } ); }, onColumnFiltersChange: ( columnFiltersUpdater ) => { + const filters = fromTanStackColumnFilters( columnFiltersUpdater() ); + const visibleFilters = [ ...view.visibleFilters ]; + filters.forEach( ( filter ) => { + if ( ! view.visibleFilters?.includes( filter.field ) ) { + visibleFilters.push( filter.field ); + } + } ); onChangeView( { ...view, - filters: fromTanStackColumnFilters( columnFiltersUpdater() ), + visibleFilters, + filters, page: 1, } ); }, From e78c8543624de1e63059820a1fec442c2132e4c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 10 Nov 2023 11:07:32 +0100 Subject: [PATCH 11/35] Reset filters also hides them back --- packages/edit-site/src/components/dataviews/reset-filters.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/edit-site/src/components/dataviews/reset-filters.js index 68b5c17590c977..ff6a4f44cf93e6 100644 --- a/packages/edit-site/src/components/dataviews/reset-filters.js +++ b/packages/edit-site/src/components/dataviews/reset-filters.js @@ -16,6 +16,7 @@ export default ( { view, onChangeView } ) => { page: 1, search: '', filters: [], + visibleFilters: [], } ) ); } } > From 7271f0a0a5c4b7b16a912e8b2be37bfc445da3eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 10 Nov 2023 11:10:00 +0100 Subject: [PATCH 12/35] Fix dropdown opening when trigger disabled --- .../src/components/dataviews/add-filter.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index a0a7455a00d9fa..eb6f6c96de78e3 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -23,14 +23,22 @@ const { } = unlock( componentsPrivateApis ); export default function AddFilter( { filters, onChangeView } ) { + if ( ! filters.length ) { + return ( + + + + ); + } + return ( - { __( '+ Add filter' ) } - + } > { filters.map( ( filter ) => ( From f3a6a9b6013bf56b40259212dc5f88c97aef90c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 13 Nov 2023 09:31:51 +0100 Subject: [PATCH 13/35] Set visibleFilters from sidebar views --- .../edit-site/src/components/sidebar-dataviews/default-views.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index 669e1baa3e1244..89963779fb0870 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -36,6 +36,7 @@ const DEFAULT_VIEWS = { filters: [ { field: 'status', operator: 'in', value: 'draft' }, ], + visibleFilters: [ 'status' ], }, }, { @@ -47,6 +48,7 @@ const DEFAULT_VIEWS = { filters: [ { field: 'status', operator: 'in', value: 'trash' }, ], + visibleFilters: [ 'status' ], }, }, ], From 9254fd924604bece390930340577c00bb96c5796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 13 Nov 2023 09:37:36 +0100 Subject: [PATCH 14/35] Remove visibleFilters and render those that are set --- packages/edit-site/src/components/dataviews/README.md | 5 +---- .../edit-site/src/components/dataviews/add-filter.js | 10 ---------- packages/edit-site/src/components/dataviews/filters.js | 9 +++++++-- .../src/components/dataviews/reset-filters.js | 1 - .../edit-site/src/components/dataviews/view-list.js | 7 ------- .../src/components/sidebar-dataviews/default-views.js | 3 --- 6 files changed, 8 insertions(+), 27 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md index 5502165f0cfdc5..8f1349044d6cf5 100644 --- a/packages/edit-site/src/components/dataviews/README.md +++ b/packages/edit-site/src/components/dataviews/README.md @@ -47,7 +47,6 @@ Example: { field: 'author', operator: 'in', value: 2 }, { field: 'status', operator: 'in', value: 'publish,draft' } ], - visibleFilters: [ 'author', 'status' ], hiddenFields: [ 'date', 'featured-image' ], layout: {}, } @@ -62,8 +61,7 @@ Example: - `filters`: the filters applied to the dataset. Each item describes: - `field`: which field this filter is bound to. - `operator`: which type of filter it is. Only `in` available at the moment. - - `vaule`: the actual value selected by the user. -- `visibleFilters`: the `id` of the filters that are visible in the UI. + - `value`: the actual value selected by the user. - `hiddenFields`: the `id` of the fields that are hidden in the UI. - `layout`: ... @@ -88,7 +86,6 @@ function MyCustomPageList() { { field: 'author', operator: 'in', value: 2 }, { field: 'status', operator: 'in', value: 'publish,draft' } ], - visibleFilters: [ 'author', 'status' ], hiddenFields: [ 'date', 'featured-image' ], layout: {}, } ); diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index eb6f6c96de78e3..6ec4ebcff227a5 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -58,16 +58,6 @@ export default function AddFilter( { filters, onChangeView } ) { onSelect={ () => { onChangeView( ( currentView ) => ( { ...currentView, - // TODO: set filter as well - visibleFilters: - currentView.visibleFilters.includes( - filter.field - ) - ? currentView.visibleFilters - : [ - ...currentView.visibleFilters, - filter.field, - ], filters: [ ...currentView.filters, { diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index 4ac686d435f150..caaa39f2e32e9a 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -38,10 +38,15 @@ export default function Filters( { fields, view, onChangeView } ) { } ); const visibleFiltersList = filtersRegistered.filter( ( filter ) => - view.visibleFilters.includes( filter.field ) + view.filters.some( + ( filterInView ) => filterInView.field === filter.field + ) ); const hiddenFiltersList = filtersRegistered.filter( - ( filter ) => ! view.visibleFilters.includes( filter.field ) + ( filter ) => + ! view.filters.some( + ( filterInView ) => filterInView.field === filter.field + ) ); const visibleFilters = visibleFiltersList diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/edit-site/src/components/dataviews/reset-filters.js index ff6a4f44cf93e6..68b5c17590c977 100644 --- a/packages/edit-site/src/components/dataviews/reset-filters.js +++ b/packages/edit-site/src/components/dataviews/reset-filters.js @@ -16,7 +16,6 @@ export default ( { view, onChangeView } ) => { page: 1, search: '', filters: [], - visibleFilters: [], } ) ); } } > diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index ec8b542d65eaa1..58f6898a6c748b 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -428,15 +428,8 @@ function ViewList( { }, onColumnFiltersChange: ( columnFiltersUpdater ) => { const filters = fromTanStackColumnFilters( columnFiltersUpdater() ); - const visibleFilters = [ ...view.visibleFilters ]; - filters.forEach( ( filter ) => { - if ( ! view.visibleFilters?.includes( filter.field ) ) { - visibleFilters.push( filter.field ); - } - } ); onChangeView( { ...view, - visibleFilters, filters, page: 1, } ); diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index 89963779fb0870..a1557e3b8a3445 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -14,7 +14,6 @@ const DEFAULT_PAGE_BASE = { field: 'date', direction: 'desc', }, - visibleFilters: [], // All fields are visible by default, so it's // better to keep track of the hidden ones. hiddenFields: [ 'date', 'featured-image' ], @@ -36,7 +35,6 @@ const DEFAULT_VIEWS = { filters: [ { field: 'status', operator: 'in', value: 'draft' }, ], - visibleFilters: [ 'status' ], }, }, { @@ -48,7 +46,6 @@ const DEFAULT_VIEWS = { filters: [ { field: 'status', operator: 'in', value: 'trash' }, ], - visibleFilters: [ 'status' ], }, }, ], From 6ea1af696a8dd239ec182eb74d5b866625931ebd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Mon, 13 Nov 2023 09:46:35 +0100 Subject: [PATCH 15/35] Fix rebase --- packages/edit-site/src/components/dataviews/view-list.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index 58f6898a6c748b..2fec3286314231 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -427,10 +427,9 @@ function ViewList( { onChangeView( { ...view, search: value, page: 1 } ); }, onColumnFiltersChange: ( columnFiltersUpdater ) => { - const filters = fromTanStackColumnFilters( columnFiltersUpdater() ); onChangeView( { ...view, - filters, + filters: fromTanStackColumnFilters( columnFiltersUpdater() ), page: 1, } ); }, From c7fd8c07a519436deae8e3c56bb4dc236997705e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 08:28:31 +0100 Subject: [PATCH 16/35] Use icon --- .../edit-site/src/components/dataviews/add-filter.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 6ec4ebcff227a5..5ba78b8800be1d 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -7,7 +7,7 @@ import { BaseControl, Icon, } from '@wordpress/components'; -import { chevronRightSmall } from '@wordpress/icons'; +import { chevronRightSmall, plus } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; /** @@ -26,8 +26,12 @@ export default function AddFilter( { filters, onChangeView } ) { if ( ! filters.length ) { return ( - ); From e57ffa3c2da8ca1d733d36bc92f260d1c61e6b18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 10:04:33 +0100 Subject: [PATCH 17/35] Do not remove filter when all is selected --- .../edit-site/src/components/dataviews/in-filter.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js index 9642169335aafa..20898a8f2083e3 100644 --- a/packages/edit-site/src/components/dataviews/in-filter.js +++ b/packages/edit-site/src/components/dataviews/in-filter.js @@ -44,13 +44,12 @@ export default ( { filter, view, onChangeView } ) => { ( f ) => f.field !== filter.field || f.operator !== OPERATOR_IN ); - if ( value !== '' ) { - filters.push( { - field: filter.field, - operator: OPERATOR_IN, - value, - } ); - } + + filters.push( { + field: filter.field, + operator: OPERATOR_IN, + value, + } ); onChangeView( ( currentView ) => ( { ...currentView, From cae587944128e6d95fa93c358b1e29c99f4eebc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 10:34:31 +0100 Subject: [PATCH 18/35] Fix focus loss on adding the last filter --- .../src/components/dataviews/add-filter.js | 128 +++++++++++------- .../src/components/dataviews/filters.js | 8 +- 2 files changed, 83 insertions(+), 53 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 5ba78b8800be1d..6bb11861015838 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; +import { OPERATOR_IN } from './in-filter'; const { DropdownMenuV2, @@ -22,63 +23,98 @@ const { DropdownMenuItemV2, } = unlock( componentsPrivateApis ); -export default function AddFilter( { filters, onChangeView } ) { - if ( ! filters.length ) { - return ( - - - - ); - } +const VALID_OPERATORS = [ OPERATOR_IN ]; + +export default function AddFilter( { fields, view, onChangeView } ) { + const filters = []; + fields.forEach( ( field ) => { + if ( ! field.filters ) { + return; + } + + field.filters.forEach( ( filter ) => { + if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) { + filters.push( { + field: field.id, + name: field.header, + operator: filter, + elements: [ + { + value: '', + label: __( 'All' ), + }, + ...( field.elements || [] ), + ], + isVisible: view.filters.some( + ( f ) => f.field === field.id && f.operator === filter + ), + } ); + } + } ); + } ); return ( { __( '+ Add filter' ) } + } > - { filters.map( ( filter ) => ( - } - > - { filter.name } - - } - > - { filter.elements.map( ( element ) => ( + { filters.map( ( filter ) => { + if ( filter.isVisible ) { + return ( { - onChangeView( ( currentView ) => ( { - ...currentView, - filters: [ - ...currentView.filters, - { - field: filter.field, - operator: 'in', - value: element.value, - }, - ], - } ) ); - } } - role="menuitemcheckbox" + key={ filter.field } + disabled={ true } > - { element.label } + { filter.name } - ) ) } - - ) ) } + ); + } + + return ( + + } + > + { filter.name } + + } + > + { filter.elements.map( ( element ) => ( + { + onChangeView( ( currentView ) => ( { + ...currentView, + filters: [ + ...currentView.filters, + { + field: filter.field, + operator: 'in', + value: element.value, + }, + ], + } ) ); + } } + role="menuitemcheckbox" + > + { element.label } + + ) ) } + + ); + } ) } ); diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index caaa39f2e32e9a..a35e56d844c518 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -42,12 +42,6 @@ export default function Filters( { fields, view, onChangeView } ) { ( filterInView ) => filterInView.field === filter.field ) ); - const hiddenFiltersList = filtersRegistered.filter( - ( filter ) => - ! view.filters.some( - ( filterInView ) => filterInView.field === filter.field - ) - ); const visibleFilters = visibleFiltersList ?.map( ( filter ) => { @@ -68,7 +62,7 @@ export default function Filters( { fields, view, onChangeView } ) { visibleFilters.push( From 9005dd6f0f8dbc34826e07b28f9605b6714a161e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 10:54:34 +0100 Subject: [PATCH 19/35] Absorb reset filters as part of the AddFilter button --- .../src/components/dataviews/add-filter.js | 16 ++++++++++++ .../src/components/dataviews/filters.js | 11 -------- .../src/components/dataviews/reset-filters.js | 26 ------------------- 3 files changed, 16 insertions(+), 37 deletions(-) delete mode 100644 packages/edit-site/src/components/dataviews/reset-filters.js diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 6bb11861015838..c010a1bc17298d 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -21,6 +21,7 @@ const { DropdownSubMenuV2, DropdownSubMenuTriggerV2, DropdownMenuItemV2, + DropdownMenuSeparatorV2, } = unlock( componentsPrivateApis ); const VALID_OPERATORS = [ OPERATOR_IN ]; @@ -115,6 +116,21 @@ export default function AddFilter( { fields, view, onChangeView } ) { ); } ) } + + { + onChangeView( ( currentView ) => ( { + ...currentView, + page: 1, + filters: [], + } ) ); + } } + role="menuitemcheckbox" + > + { __( 'Reset filters' ) } + ); diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index a35e56d844c518..faf508dd21f81a 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { default as InFilter, OPERATOR_IN } from './in-filter'; -import ResetFilters from './reset-filters'; import AddFilter from './add-filter'; const VALID_OPERATORS = [ OPERATOR_IN ]; @@ -68,15 +67,5 @@ export default function Filters( { fields, view, onChangeView } ) { /> ); - if ( visibleFilters?.length > 1 ) { - visibleFilters.push( - - ); - } - return visibleFilters; } diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/edit-site/src/components/dataviews/reset-filters.js deleted file mode 100644 index 68b5c17590c977..00000000000000 --- a/packages/edit-site/src/components/dataviews/reset-filters.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * WordPress dependencies - */ -import { BaseControl, Button } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -export default ( { view, onChangeView } ) => { - return ( - - - - ); -}; From e357584b4e1fd28e88acb6fcc60468b48472b4ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 11:11:12 +0100 Subject: [PATCH 20/35] Do not render AddFilter if no filters available --- packages/edit-site/src/components/dataviews/add-filter.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index c010a1bc17298d..252d72ce182b4a 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -54,6 +54,10 @@ export default function AddFilter( { fields, view, onChangeView } ) { } ); } ); + if ( filters.length === 0 ) { + return null; + } + return ( Date: Tue, 14 Nov 2023 11:11:36 +0100 Subject: [PATCH 21/35] Simplify Filters --- .../src/components/dataviews/filters.js | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index faf508dd21f81a..bb6d86b287d015 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -12,7 +12,7 @@ import AddFilter from './add-filter'; const VALID_OPERATORS = [ OPERATOR_IN ]; export default function Filters( { fields, view, onChangeView } ) { - const filtersRegistered = []; + const filters = []; fields.forEach( ( field ) => { if ( ! field.filters ) { return; @@ -20,7 +20,7 @@ export default function Filters( { fields, view, onChangeView } ) { field.filters.forEach( ( filter ) => { if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) { - filtersRegistered.push( { + filters.push( { field: field.id, name: field.header, operator: filter, @@ -31,34 +31,34 @@ export default function Filters( { fields, view, onChangeView } ) { }, ...( field.elements || [] ), ], + isVisible: view.filters.some( + ( f ) => f.field === field.id && f.operator === filter + ), } ); } } ); } ); - const visibleFiltersList = filtersRegistered.filter( ( filter ) => - view.filters.some( - ( filterInView ) => filterInView.field === filter.field - ) - ); - - const visibleFilters = visibleFiltersList - ?.map( ( filter ) => { - if ( OPERATOR_IN === filter.operator ) { - return ( - - ); - } + const filterComponents = filters?.map( ( filter ) => { + if ( ! filter.isVisible ) { return null; - } ) - .filter( Boolean ); + } + + if ( OPERATOR_IN === filter.operator ) { + return ( + + ); + } + + return null; + } ); - visibleFilters.push( + filterComponents.push( ); - return visibleFilters; + return filterComponents.filter( Boolean ); } From 16f53151c0b82c31c3981bdffb04520967a0d3d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 11:25:49 +0100 Subject: [PATCH 22/35] Fix + icon --- packages/edit-site/src/components/dataviews/add-filter.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 252d72ce182b4a..f8492357154238 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -63,10 +63,7 @@ export default function AddFilter( { fields, view, onChangeView } ) { } - variant="tertiary" - > + } From e3777f2e1f5eedbc73d9a9d0f694360cfa7716c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 12:03:25 +0100 Subject: [PATCH 23/35] Reset page upon selecting a filter --- packages/edit-site/src/components/dataviews/add-filter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index f8492357154238..bfc88626a48e8f 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -99,6 +99,7 @@ export default function AddFilter( { fields, view, onChangeView } ) { onSelect={ () => { onChangeView( ( currentView ) => ( { ...currentView, + page: 1, filters: [ ...currentView.filters, { From 1e99ee9f0ebad74269c62ace233377521c3cf3d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 17:13:33 +0100 Subject: [PATCH 24/35] Fix alignment for Search & AddFilters --- .../src/components/dataviews/add-filter.js | 145 +++++++++--------- .../src/components/dataviews/search.js | 1 + .../src/components/dataviews/style.scss | 3 + 3 files changed, 76 insertions(+), 73 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index bfc88626a48e8f..edcdb2098015d9 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -4,7 +4,6 @@ import { privateApis as componentsPrivateApis, Button, - BaseControl, Icon, } from '@wordpress/components'; import { chevronRightSmall, plus } from '@wordpress/icons'; @@ -59,81 +58,81 @@ export default function AddFilter( { fields, view, onChangeView } ) { } return ( - - - { __( 'Add filter' ) } - - } - > - { filters.map( ( filter ) => { - if ( filter.isVisible ) { - return ( - - { filter.name } - - ); - } - + + { __( 'Add filter' ) } + + } + > + { filters.map( ( filter ) => { + if ( filter.isVisible ) { return ( - - } - > - { filter.name } - - } + disabled={ true } > - { filter.elements.map( ( element ) => ( - { - onChangeView( ( currentView ) => ( { - ...currentView, - page: 1, - filters: [ - ...currentView.filters, - { - field: filter.field, - operator: 'in', - value: element.value, - }, - ], - } ) ); - } } - role="menuitemcheckbox" - > - { element.label } - - ) ) } - + { filter.name } + ); - } ) } - - { - onChangeView( ( currentView ) => ( { - ...currentView, - page: 1, - filters: [], - } ) ); - } } - role="menuitemcheckbox" - > - { __( 'Reset filters' ) } - - - + } + + return ( + } + > + { filter.name } + + } + > + { filter.elements.map( ( element ) => ( + { + onChangeView( ( currentView ) => ( { + ...currentView, + page: 1, + filters: [ + ...currentView.filters, + { + field: filter.field, + operator: 'in', + value: element.value, + }, + ], + } ) ); + } } + role="menuitemcheckbox" + > + { element.label } + + ) ) } + + ); + } ) } + + { + onChangeView( ( currentView ) => ( { + ...currentView, + page: 1, + filters: [], + } ) ); + } } + role="menuitemcheckbox" + > + { __( 'Reset filters' ) } + + ); } diff --git a/packages/edit-site/src/components/dataviews/search.js b/packages/edit-site/src/components/dataviews/search.js index 3ade147922ac99..b75b19537283a3 100644 --- a/packages/edit-site/src/components/dataviews/search.js +++ b/packages/edit-site/src/components/dataviews/search.js @@ -35,6 +35,7 @@ export default function Search( { label, view, onChangeView } ) { value={ search } label={ searchLabel } placeholder={ searchLabel } + className="dataviews-control" size="compact" /> ); diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss index 76e6fca78de67d..44930f45e137ba 100644 --- a/packages/edit-site/src/components/dataviews/style.scss +++ b/packages/edit-site/src/components/dataviews/style.scss @@ -8,6 +8,9 @@ min-height: 100%; } } +.dataviews-control > .components-base-control__field { + margin-bottom: 0; +} .dataviews-pagination { margin-top: auto; From 6daf5f2fc7bc59f343e19e22ca3fb51b5c05108c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 14 Nov 2023 17:26:26 +0100 Subject: [PATCH 25/35] Fix for SelectControl as well --- packages/edit-site/src/components/dataviews/search.js | 1 - packages/edit-site/src/components/dataviews/style.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/search.js b/packages/edit-site/src/components/dataviews/search.js index b75b19537283a3..3ade147922ac99 100644 --- a/packages/edit-site/src/components/dataviews/search.js +++ b/packages/edit-site/src/components/dataviews/search.js @@ -35,7 +35,6 @@ export default function Search( { label, view, onChangeView } ) { value={ search } label={ searchLabel } placeholder={ searchLabel } - className="dataviews-control" size="compact" /> ); diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss index 44930f45e137ba..84fe1deda6d6b1 100644 --- a/packages/edit-site/src/components/dataviews/style.scss +++ b/packages/edit-site/src/components/dataviews/style.scss @@ -8,7 +8,7 @@ min-height: 100%; } } -.dataviews-control > .components-base-control__field { +.components-base-control > .components-base-control__field { margin-bottom: 0; } From 353ca409f4f5c6d16d9877570bce07c77162b108 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 15 Nov 2023 11:01:07 +0100 Subject: [PATCH 26/35] Use __nextHasNoMarginBottom --- packages/edit-site/src/components/dataviews/in-filter.js | 1 + packages/edit-site/src/components/dataviews/search.js | 1 + packages/edit-site/src/components/dataviews/style.scss | 3 --- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js index 20898a8f2083e3..eb048c834e38c7 100644 --- a/packages/edit-site/src/components/dataviews/in-filter.js +++ b/packages/edit-site/src/components/dataviews/in-filter.js @@ -24,6 +24,7 @@ export default ( { filter, view, onChangeView } ) => { return ( .components-base-control__field { - margin-bottom: 0; -} .dataviews-pagination { margin-top: auto; From d4d80044384b8f7fed5d53239522ab960bb3673b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 15 Nov 2023 11:12:57 +0100 Subject: [PATCH 27/35] Extract ResetButton to where it was --- .../src/components/dataviews/add-filter.js | 16 ------------ .../src/components/dataviews/filters.js | 5 ++++ .../src/components/dataviews/reset-filters.js | 25 +++++++++++++++++++ 3 files changed, 30 insertions(+), 16 deletions(-) create mode 100644 packages/edit-site/src/components/dataviews/reset-filters.js diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index edcdb2098015d9..2a92a29c1c039d 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -20,7 +20,6 @@ const { DropdownSubMenuV2, DropdownSubMenuTriggerV2, DropdownMenuItemV2, - DropdownMenuSeparatorV2, } = unlock( componentsPrivateApis ); const VALID_OPERATORS = [ OPERATOR_IN ]; @@ -118,21 +117,6 @@ export default function AddFilter( { fields, view, onChangeView } ) { ); } ) } - - { - onChangeView( ( currentView ) => ( { - ...currentView, - page: 1, - filters: [], - } ) ); - } } - role="menuitemcheckbox" - > - { __( 'Reset filters' ) } - ); } diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index bb6d86b287d015..9f873a07543ad5 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n'; */ import { default as InFilter, OPERATOR_IN } from './in-filter'; import AddFilter from './add-filter'; +import ResetFilters from './reset-filters'; const VALID_OPERATORS = [ OPERATOR_IN ]; @@ -67,5 +68,9 @@ export default function Filters( { fields, view, onChangeView } ) { /> ); + filterComponents.push( + + ); + return filterComponents.filter( Boolean ); } diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/edit-site/src/components/dataviews/reset-filters.js new file mode 100644 index 00000000000000..f9758a9f3ecf4f --- /dev/null +++ b/packages/edit-site/src/components/dataviews/reset-filters.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +export default ( { view, onChangeView } ) => { + return ( + + ); +}; From 0a655bea22381bb5eebcfe212fd7fa529ecaf363 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 15 Nov 2023 11:15:22 +0100 Subject: [PATCH 28/35] Disable AddFilter when no more filters to add --- packages/edit-site/src/components/dataviews/add-filter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 2a92a29c1c039d..e8ff32784f9d54 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -61,6 +61,7 @@ export default function AddFilter( { fields, view, onChangeView } ) { label={ __( 'Add filter' ) } trigger={ diff --git a/packages/edit-site/src/components/dataviews/reset-filters.js b/packages/edit-site/src/components/dataviews/reset-filters.js index 5032057b90453e..fbf8af7086de1b 100644 --- a/packages/edit-site/src/components/dataviews/reset-filters.js +++ b/packages/edit-site/src/components/dataviews/reset-filters.js @@ -10,6 +10,7 @@ export default ( { view, onChangeView } ) => { disabled={ view.search === '' && view.filters?.length === 0 } __experimentalIsFocusable __next40pxDefaultSize + size="compact" variant="tertiary" onClick={ () => { onChangeView( ( currentView ) => ( { From b61ae1875e3e20c9a48cbca979c0567edf55c609 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 15 Nov 2023 12:02:25 +0100 Subject: [PATCH 34/35] Remove unnecessary __next40pxDefaultSize prop in buttons --- packages/edit-site/src/components/dataviews/add-filter.js | 1 - packages/edit-site/src/components/dataviews/reset-filters.js | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 8ba438f9235f07..2cc0051f0f2d49 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -57,7 +57,6 @@ export default function AddFilter( { fields, view, onChangeView } ) {