From 6ace67f9d5a40f6957f3e1bacd3f6d2a5c06b5fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:09:45 +0100 Subject: [PATCH 1/6] Make value in default views an array --- .../components/sidebar-dataviews/default-views.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) 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 d853b6cde112f0..7d9431c440198b 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -38,7 +38,11 @@ const DEFAULT_VIEWS = { view: { ...DEFAULT_PAGE_BASE, filters: [ - { field: 'status', operator: OPERATOR_IN, value: 'draft' }, + { + field: 'status', + operator: OPERATOR_IN, + value: [ 'draft' ], + }, ], }, }, @@ -49,7 +53,11 @@ const DEFAULT_VIEWS = { view: { ...DEFAULT_PAGE_BASE, filters: [ - { field: 'status', operator: OPERATOR_IN, value: 'trash' }, + { + field: 'status', + operator: OPERATOR_IN, + value: [ 'trash' ], + }, ], }, }, From 05dd1123bc425e62e8988da284fc24413a651c79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:10:30 +0100 Subject: [PATCH 2/6] top-level filter: make value an array --- .../src/components/dataviews/in-filter.js | 54 ++++++++++++------- 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js index 9dd85eb1eedb26..04a8b1da0d5439 100644 --- a/packages/edit-site/src/components/dataviews/in-filter.js +++ b/packages/edit-site/src/components/dataviews/in-filter.js @@ -22,23 +22,30 @@ const { export default ( { filter, view, onChangeView } ) => { const filterInView = view.filters.find( ( f ) => f.field === filter.field ); - const activeElement = filter.elements.find( - ( element ) => element.value === filterInView?.value - ); + const activeElementLabels = filter.elements + .filter( ( element ) => filterInView?.value?.includes( element.value ) ) + .map( ( element ) => element.label ); return ( - { activeElement !== undefined - ? sprintf( - /* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */ - __( '%1$s is %2$s' ), - filter.name, - activeElement.label - ) - : filter.name } + { activeElementLabels.length === 0 && filter.name } + { activeElementLabels.length === 1 && + sprintf( + /* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */ + __( '%1$s is %2$s' ), + filter.name, + activeElementLabels[ 0 ] + ) } + { activeElementLabels.length > 1 && + sprintf( + /* translators: 1: Filter name. 2: filter value. e.g.: "Author in Admin, Editor". */ + __( '%1$s in %2$s' ), + filter.name, + activeElementLabels.join( ',' ) + ) } } @@ -48,8 +55,11 @@ export default ( { filter, view, onChangeView } ) => { + checked={ activeElementLabels.includes( + element.label + ) } + onSelect={ ( event ) => { + event.preventDefault(); onChangeView( ( currentView ) => ( { ...currentView, page: 1, @@ -60,15 +70,21 @@ export default ( { filter, view, onChangeView } ) => { { field: filter.field, operator: OPERATOR_IN, - value: - activeElement?.value === + value: filterInView.value.includes( element.value - ? undefined - : element.value, + ) + ? filterInView.value.filter( + ( value ) => + value !== element.value + ) + : [ + ...filterInView.value, + element.value, + ], }, ], - } ) ) - } + } ) ); + } } > { element.label } From 33d0e58a445e308210135a1f9771e90e9094ec38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:10:53 +0100 Subject: [PATCH 3/6] AddFilter: make value an array --- packages/edit-site/src/components/dataviews/add-filter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 7192a507b2afe8..c9a2e75dd24bf9 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -90,7 +90,7 @@ export default function AddFilter( { fields, view, onChangeView } ) { { field: filter.field, operator: OPERATOR_IN, - value: element.value, + value: [ element.value ], }, ], } ) ); From 7c3058c08b4859e062466c09a745429d3f0418f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:11:12 +0100 Subject: [PATCH 4/6] Column filter: make value an array --- .../src/components/dataviews/view-list.js | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index 8e131a350ac7d9..38006f4d257405 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -165,7 +165,11 @@ function HeaderMenu( { dataView, header } ) { Object.values( columnFilter )[ 0 ]; // Intentionally use loose comparison, so it does type conversion. // This covers the case where a top-level filter for the same field converts a number into a string. - isActive = element.value == value; // eslint-disable-line eqeqeq + /* eslint-disable eqeqeq */ + isActive = value.some( + ( v ) => element.value == v + ); + /* eslint-enable eqeqeq */ } return ( @@ -193,14 +197,27 @@ function HeaderMenu( { dataView, header } ) { ); } ); + const currentValues = + ( columnFilter && + Object.values( + columnFilter + )[ 0 ] ) || + []; dataView.setColumnFilters( [ ...otherFilters, { [ filter.field + ':in' ]: isActive - ? undefined - : element.value, + ? currentValues.filter( + ( v ) => + v !== + element.value + ) + : [ + ...currentValues, + element.value, + ], }, ] ); } } From 6c8f1422046f6086735ddd102931544095bb94c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:21:00 +0100 Subject: [PATCH 5/6] Update view.filters to REST API query --- packages/edit-site/src/components/page-pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index b933f1d82500e4..bbcf44be4beaa1 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -125,7 +125,7 @@ export default function PagePages() { filter.field === 'status' && filter.operator === OPERATOR_IN ) { - filters.status = filter.value; + filters.status = filter.value.join( ',' ); } if ( filter.field === 'author' && From ae165ec6a835a12bac8b4bf4a8f277ac85f34965 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:30:00 +0100 Subject: [PATCH 6/6] Add note about disabling multiselection --- packages/edit-site/src/components/dataviews/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md index 9c6725a39ead26..c87097cb7e42b0 100644 --- a/packages/edit-site/src/components/dataviews/README.md +++ b/packages/edit-site/src/components/dataviews/README.md @@ -174,6 +174,8 @@ Example: - `enableSorting`: whether the data can be sorted by the given field. True by default. - `enableHiding`: whether the field can be hidden. True by default. +TODO: how to disable multiselection? + ## Actions Array of operations that can be performed upon each record. Each action is an object with the following properties: