DataViews: update filters in view config (#55735)

WordPress · Nov 2, 2023 · 5e0ffdb · 5e0ffdb · github-actions · Nov 2, 2023
1 parent 7016c56
commit 5e0ffdb
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 47 deletions.
diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md
@@ -43,10 +43,10 @@ Example:
 		direction: 'desc',
 	},
 	search: '',
-	filters: {
-		author: 2,
-		status: 'publish, draft'
-	},
+	filters: [
+		{ field: 'author', operator: 'in', value: 2 },
+		{ field: 'status', operator: 'in', value: 'publish,draft' }
+	],
 	visibleFilters: [ 'author', 'status' ],
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
@@ -76,17 +76,26 @@ function MyCustomPageList() {
 		"...": "..."
 	} );
 
-	const queryArgs = useMemo(
-		() => ( {
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters.forEach( ( filter ) => {
+			if ( filter.field === 'status' && filter.operator === 'in' ) {
+				filters.status = filter.value;
+			}
+			if ( filter.field === 'author' && filter.operator === 'in' ) {
+				filters.author = filter.value;
+			}
+		} );
+		return {
 			per_page: view.perPage,
 			page: view.page,
+			_embed: 'author',
 			order: view.sort?.direction,
-			orderby: view.sort?.field
+			orderby: view.sort?.field,
 			search: view.search,
-			...view.filters
-		} ),
-		[ view ]
-	);
+			...filters,
+		};
+	}, [ view ] );
 
 	const {
 		records

diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
@@ -16,7 +16,7 @@ export default function Filters( { fields, view, onChangeView } ) {
 		}
 
 		field.filters.forEach( ( filter ) => {
-			let id = field.id;
+			const id = field.id;
 			if ( 'string' === typeof filter ) {
 				filterIndex[ id ] = {
 					id,
@@ -26,7 +26,6 @@ export default function Filters( { fields, view, onChangeView } ) {
 			}
 
 			if ( 'object' === typeof filter ) {
-				id = filter.id || field.id;
 				filterIndex[ id ] = {
 					id,
 					name: filter.name || field.header,

diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -5,19 +5,17 @@ import {
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
 	SelectControl,
 } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+const OPERATOR_IN = 'in';
 
 export default ( { filter, view, onChangeView } ) => {
+	const activeValue = view.filters.find(
+		( f ) => f.field === filter.id && f.operator === OPERATOR_IN
+	)?.value;
+
 	return (
 		<SelectControl
-			value={ view.filters[ filter.id ] }
+			value={ activeValue }
 			prefix={
 				<InputControlPrefixWrapper
 					as="span"
@@ -28,17 +26,21 @@ export default ( { filter, view, onChangeView } ) => {
 			}
 			options={ filter.elements }
 			onChange={ ( value ) => {
-				if ( value === '' ) {
-					value = undefined;
+				const filters = view.filters.filter(
+					( f ) => f.field !== filter.id || f.operator !== OPERATOR_IN
+				);
+				if ( value !== '' ) {
+					filters.push( {
+						field: filter.id,
+						operator: OPERATOR_IN,
+						value,
+					} );
 				}
 
 				onChangeView( ( currentView ) => ( {
 					...currentView,
 					page: 1,
-					filters: cleanEmptyObject( {
-						...currentView.filters,
-						[ filter.id ]: value,
-					} ),
+					filters,
 				} ) );
 			} }
 		/>

diff --git a/packages/edit-site/src/components/page-pages/default-views.js b/packages/edit-site/src/components/page-pages/default-views.js
@@ -12,9 +12,7 @@ export const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All s
 const DEFAULT_PAGE_BASE = {
 	type: 'list',
 	search: '',
-	filters: {
-		status: DEFAULT_STATUSES,
-	},
+	filters: [ { field: 'status', operator: 'in', value: DEFAULT_STATUSES } ],
 	page: 1,
 	perPage: 5,
 	sort: {
@@ -39,9 +37,7 @@ const DEFAULT_VIEWS = [
 		slug: 'drafts',
 		view: {
 			...DEFAULT_PAGE_BASE,
-			filters: {
-				status: 'draft',
-			},
+			filters: [ { field: 'status', operator: 'in', value: 'draft' } ],
 		},
 	},
 	{
@@ -50,9 +46,7 @@ const DEFAULT_VIEWS = [
 		icon: trash,
 		view: {
 			...DEFAULT_PAGE_BASE,
-			filters: {
-				status: 'trash',
-			},
+			filters: [ { field: 'status', operator: 'in', value: 'trash' } ],
 		},
 	},
 ];

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -76,26 +76,36 @@ export default function PagePages() {
 		if ( DEFAULT_STATUSES !== defaultStatuses ) {
 			setView( {
 				...view,
-				filters: {
-					...view.filters,
-					status: defaultStatuses,
-				},
+				filters: [
+					...view.filters.filter(
+						( f ) => f.field !== 'status' || f.operator !== 'in'
+					),
+					{ field: 'status', operator: 'in', value: defaultStatuses },
+				],
 			} );
 		}
 	}, [ defaultStatuses ] );
 
-	const queryArgs = useMemo(
-		() => ( {
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters.forEach( ( filter ) => {
+			if ( filter.field === 'status' && filter.operator === 'in' ) {
+				filters.status = filter.value;
+			}
+			if ( filter.field === 'author' && filter.operator === 'in' ) {
+				filters.author = filter.value;
+			}
+		} );
+		return {
 			per_page: view.perPage,
 			page: view.page,
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
 			search: view.search,
-			...view.filters,
-		} ),
-		[ view ]
-	);
+			...filters,
+		};
+	}, [ view ] );
 	const {
 		records: pages,
 		isResolving: isLoadingPages,
@@ -188,7 +198,6 @@ export default function PagePages() {
 				filters: [
 					{
 						type: 'enumeration',
-						id: 'status',
 						resetValue: defaultStatuses,
 					},
 				],