From 58a3a63b9be6e1983574dc9e62bfdb9ecc95d2d7 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 20 Mar 2024 10:56:55 +0200
Subject: [PATCH] add support for all filter operators

---
 .../src/filter-and-sort-data-view.js          | 34 +++++++++++--------
 packages/dataviews/src/stories/fixtures.js    | 34 ++++++++++++++-----
 packages/dataviews/src/stories/index.story.js |  2 +-
 3 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/packages/dataviews/src/filter-and-sort-data-view.js b/packages/dataviews/src/filter-and-sort-data-view.js
index 3980f517b5417..081c3553c01c9 100644
--- a/packages/dataviews/src/filter-and-sort-data-view.js
+++ b/packages/dataviews/src/filter-and-sort-data-view.js
@@ -6,7 +6,12 @@ import removeAccents from 'remove-accents';
 /**
  * Internal dependencies
  */
-import { OPERATOR_IS_NONE, OPERATOR_IS_ANY } from './constants';
+import {
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+} from './constants';
 import { normalizeFields } from './normalize-fields';
 
 function normalizeSearchInput( input = '' ) {
@@ -48,26 +53,27 @@ export function filterAndSortDataView( data, view, fields ) {
 
 	if ( view.filters.length > 0 ) {
 		view.filters.forEach( ( filter ) => {
+			if ( ! filter?.value || ! filter?.value?.length ) {
+				return;
+			}
 			const field = _fields.find(
 				( _field ) => _field.id === filter.field
 			);
-			if (
-				filter.operator === OPERATOR_IS_ANY &&
-				filter?.value?.length > 0
-			) {
-				filteredData = filteredData.filter( ( item ) => {
+			const filterFn = {
+				[ OPERATOR_IS_ANY ]: ( item ) => {
 					return filter.value.includes( field.getValue( { item } ) );
-				} );
-			} else if (
-				filter.operator === OPERATOR_IS_NONE &&
-				filter?.value?.length > 0
-			) {
-				filteredData = filteredData.filter( ( item ) => {
+				},
+				[ OPERATOR_IS_NONE ]: ( item ) => {
 					return ! filter.value.includes(
 						field.getValue( { item } )
 					);
-				} );
-			}
+				},
+				[ OPERATOR_IS ]: ( item ) =>
+					filter.value === field.getValue( { item } ),
+				[ OPERATOR_IS_NOT ]: ( item ) =>
+					filter.value !== field.getValue( { item } ),
+			};
+			filteredData = filteredData.filter( filterFn[ filter.operator ] );
 		} );
 	}
 
diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js
index f673dcfc3e5a5..64033cc59f580 100644
--- a/packages/dataviews/src/stories/fixtures.js
+++ b/packages/dataviews/src/stories/fixtures.js
@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { LAYOUT_TABLE } from '../constants';
+import { LAYOUT_TABLE, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 export const data = [
 	{
@@ -21,6 +21,7 @@ export const data = [
 		description: 'Apollo description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Not a planet',
+		color: 'green',
 	},
 	{
 		id: 2,
@@ -35,6 +36,7 @@ export const data = [
 		description: 'NASA photo',
 		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
 		type: 'Not a planet',
+		color: 'green',
 	},
 	{
 		id: 4,
@@ -49,6 +51,7 @@ export const data = [
 		description: 'Mercury description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		color: 'red',
 	},
 	{
 		id: 6,
@@ -56,6 +59,7 @@ export const data = [
 		description: 'Venus description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		color: 'red',
 	},
 	{
 		id: 7,
@@ -63,6 +67,7 @@ export const data = [
 		description: 'Earth description',
 		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
 		type: 'Terrestrial',
+		color: 'green',
 	},
 	{
 		id: 8,
@@ -99,7 +104,7 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	hiddenFields: [ 'image', 'type' ],
+	hiddenFields: [ 'image' ],
 	layout: {},
 	filters: [],
 };
@@ -155,11 +160,16 @@ export const fields = [
 		enableHiding: false,
 		isSearchField: true,
 	},
+	{
+		header: 'Description',
+		id: 'description',
+		maxWidth: 200,
+		enableSorting: false,
+		isSearchField: true,
+	},
 	{
 		header: 'Type',
 		id: 'type',
-		maxWidth: 400,
-		enableHiding: false,
 		type: 'enumeration',
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
@@ -169,10 +179,16 @@ export const fields = [
 		],
 	},
 	{
-		header: 'Description',
-		id: 'description',
-		maxWidth: 200,
-		enableSorting: false,
-		isSearchField: true,
+		header: 'Color',
+		id: 'color',
+		type: 'enumeration',
+		render: ( { item } ) => item.color || '-',
+		elements: [
+			{ value: 'red', label: 'Red' },
+			{ value: 'green', label: 'Green' },
+		],
+		filterBy: {
+			operators: [ OPERATOR_IS, OPERATOR_IS_NOT ],
+		},
 	},
 ];
diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/stories/index.story.js
index 4de3cc86c4390..ff2fe2a2c2ca0 100644
--- a/packages/dataviews/src/stories/index.story.js
+++ b/packages/dataviews/src/stories/index.story.js
@@ -29,7 +29,7 @@ const defaultConfigPerViewType = {
 
 export const Default = ( props ) => {
 	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { shownData, paginationInfo } = useMemo( () => {
+	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterAndSortDataView( data, view, fields );
 	}, [ view ] );
 	const onChangeView = useCallback(