add support for all filter operators

WordPress · Mar 20, 2024 · 58a3a63 · 58a3a63
1 parent 9755775
commit 58a3a63
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 24 deletions.
diff --git 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
@@ -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,20 +51,23 @@ export const data = [
  description: 'Mercury description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
+ color: 'red',
  },
  {
  id: 6,
  title: 'Venus',
  description: 'Venus description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
+ color: 'red',
  },
  {
  id: 7,
  title: 'Earth',
  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
@@ -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(