DataViews: Add a utility to share filtering, sorting and pagination l…

…ogic (#59897)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: mcsf <mcsf@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>

packages/dataviews/CHANGELOG.md

@@ -9,6 +9,10 @@
 - Two new operators have been added: `isAll` and `isNotAll`. These are meant to represent `AND` operations. For example, `Category is all: Book, Review, Science Fiction` would represent all items that have all three categories selected.
 - DataViews now supports multi-selection. A new set of filter operators has been introduced: `is`, `isNot`, `isAny`, `isNone`. Single-selection operators are `is` and `isNot`, and multi-selection operators are `isAny` and `isNone`. If no operators are declared for a filter, it will support multi-selection. Additionally, the old filter operators `in` and `notIn` operators have been deprecated and will work as `is` and `isNot` respectively. Please, migrate to the new operators as they'll be removed soon.
 
+### Breaking changes
+
+- Removed the `getPaginationResults` and `sortByTextFields` utils and replaced them with a unique `filterSortAndPaginate` function.
+
 ## 0.7.0 (2024-03-06)
 
 ## 0.6.0 (2024-02-21)

packages/dataviews/src/dataviews.js

@@ -13,6 +13,7 @@ import Filters from './filters';
 import Search from './search';
 import { VIEW_LAYOUTS, LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import BulkActions from './bulk-actions';
+import { normalizeFields } from './normalize-fields';
 
 const defaultGetItemId = ( item ) => item.id;
 const defaultOnSelectionChange = () => {};
@@ -76,18 +77,7 @@ export default function DataViews( {
  const ViewComponent = VIEW_LAYOUTS.find(
  ( v ) => v.type === view.type
  ).component;
- const _fields = useMemo( () => {
- return fields.map( ( field ) => {
- const getValue =
- field.getValue || ( ( { item } ) => item[ field.id ] );
-
- return {
- ...field,
- getValue,
- render: field.render || getValue,
- };
- } );
- }, [ fields ] );
+ const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
 
  const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(
  actions,

packages/dataviews/src/filter-and-sort-data-view.js

@@ -0,0 +1,154 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Internal dependencies
+ */
+import {
+ OPERATOR_IS,
+ OPERATOR_IS_NOT,
+ OPERATOR_IS_NONE,
+ OPERATOR_IS_ANY,
+ OPERATOR_IS_ALL,
+ OPERATOR_IS_NOT_ALL,
+} from './constants';
+import { normalizeFields } from './normalize-fields';
+
+function normalizeSearchInput( input = '' ) {
+ return removeAccents( input.trim().toLowerCase() );
+}
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
+ *
+ * @param {any[]} data Raw data.
+ * @param {Object} view View config.
+ * @param {Object[]} fields Fields config.
+ *
+ * @return {Object} { data: any[], paginationInfo: { totalItems: number, totalPages: number } }
+ */
+export function filterSortAndPaginate( data, view, fields ) {
+ if ( ! data ) {
+ return {
+ data: EMPTY_ARRAY,
+ paginationInfo: { totalItems: 0, totalPages: 0 },
+ };
+ }
+ const _fields = normalizeFields( fields );
+ let filteredData = [ ...data ];
+ // Handle global search.
+ if ( view.search ) {
+ const normalizedSearch = normalizeSearchInput( view.search );
+ filteredData = filteredData.filter( ( item ) => {
+ return _fields
+ .filter( ( field ) => field.enableGlobalSearch )
+ .map( ( field ) => {
+ return normalizeSearchInput( field.getValue( { item } ) );
+ } )
+ .some( ( field ) => field.includes( normalizedSearch ) );
+ } );
+ }
+
+ if ( view.filters.length > 0 ) {
+ view.filters.forEach( ( filter ) => {
+ const field = _fields.find(
+ ( _field ) => _field.id === filter.field
+ );
+ if (
+ filter.operator === OPERATOR_IS_ANY &&
+ filter?.value?.length > 0
+ ) {
+ filteredData = filteredData.filter( ( item ) => {
+ const fieldValue = field.getValue( { item } );
+ if ( Array.isArray( fieldValue ) ) {
+ return filter.value.some( ( filterValue ) =>
+ fieldValue.includes( filterValue )
+ );
+ } else if ( typeof fieldValue === 'string' ) {
+ return filter.value.includes( fieldValue );
+ }
+ return false;
+ } );
+ } else if (
+ filter.operator === OPERATOR_IS_NONE &&
+ filter?.value?.length > 0
+ ) {
+ filteredData = filteredData.filter( ( item ) => {
+ const fieldValue = field.getValue( { item } );
+ if ( Array.isArray( fieldValue ) ) {
+ return ! filter.value.some( ( filterValue ) =>
+ fieldValue.includes( filterValue )
+ );
+ } else if ( typeof fieldValue === 'string' ) {
+ return ! filter.value.includes( fieldValue );
+ }
+ return false;
+ } );
+ } else if (
+ filter.operator === OPERATOR_IS_ALL &&
+ filter?.value?.length > 0
+ ) {
+ filteredData = filteredData.filter( ( item ) => {
+ return filter.value.every( ( value ) => {
+ return field.getValue( { item } ).includes( value );
+ } );
+ } );
+ } else if (
+ filter.operator === OPERATOR_IS_NOT_ALL &&
+ filter?.value?.length > 0
+ ) {
+ filteredData = filteredData.filter( ( item ) => {
+ return filter.value.every( ( value ) => {
+ return ! field.getValue( { item } ).includes( value );
+ } );
+ } );
+ } else if ( filter.operator === OPERATOR_IS ) {
+ filteredData = filteredData.filter( ( item ) => {
+ return filter.value === field.getValue( { item } );
+ } );
+ } else if ( filter.operator === OPERATOR_IS_NOT ) {
+ filteredData = filteredData.filter( ( item ) => {
+ return filter.value !== field.getValue( { item } );
+ } );
+ }
+ } );
+ }
+
+ // Handle sorting.
+ if ( view.sort ) {
+ const fieldId = view.sort.field;
+ const fieldToSort = _fields.find( ( field ) => {
+ return field.id === fieldId;
+ } );
+ filteredData.sort( ( a, b ) => {
+ const valueA = fieldToSort.getValue( { item: a } ) ?? '';
+ const valueB = fieldToSort.getValue( { item: b } ) ?? '';
+ return view.sort.direction === 'asc'
+ ? valueA.localeCompare( valueB )
+ : valueB.localeCompare( valueA );
+ } );
+ }
+
+ // Handle pagination.
+ const hasPagination = view.page && view.perPage;
+ const start = hasPagination ? ( view.page - 1 ) * view.perPage : 0;
+ const totalItems = filteredData?.length || 0;
+ const totalPages = hasPagination
+ ? Math.ceil( totalItems / view.perPage )
+ : 1;
+ filteredData = hasPagination
+ ? filteredData?.slice( start, start + view.perPage )
+ : filteredData;
+
+ return {
+ data: filteredData,
+ paginationInfo: {
+ totalItems,
+ totalPages,
+ },
+ };
+}

packages/dataviews/src/index.js

@@ -1,3 +1,3 @@
 export { default as DataViews } from './dataviews';
-export { sortByTextFields, getPaginationResults } from './utils';
 export { VIEW_LAYOUTS } from './constants';
+export { filterSortAndPaginate } from './filter-and-sort-data-view';

packages/dataviews/src/normalize-fields.js

@@ -0,0 +1,17 @@
+/**
+ * Apply default values and normalize the fields config.
+ *
+ * @param {Object[]} fields Raw Fields.
+ * @return {Object[]} Normalized fields.
+ */
+export function normalizeFields( fields ) {
+ return fields.map( ( field ) => {
+ const getValue = field.getValue || ( ( { item } ) => item[ field.id ] );
+
+ return {
+ ...field,
+ getValue,
+ render: field.render || getValue,
+ };
+ } );
+}

packages/dataviews/src/stories/fixtures.js

@@ -21,76 +21,87 @@ export const data = [
  description: 'Apollo description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Not a planet',
+ categories: [ 'Space', 'NASA' ],
  },
  {
  id: 2,
  title: 'Space',
  description: 'Space description',
  image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
  type: 'Not a planet',
+ categories: [ 'Space' ],
  },
  {
  id: 3,
  title: 'NASA',
  description: 'NASA photo',
  image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
  type: 'Not a planet',
+ categories: [ 'NASA' ],
  },
  {
  id: 4,
  title: 'Neptune',
  description: 'Neptune description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Ice giant',
+ categories: [ 'Space', 'Planet', 'Solar system' ],
  },
  {
  id: 5,
  title: 'Mercury',
  description: 'Mercury description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
+ categories: [ 'Space', 'Planet', 'Solar system' ],
  },
  {
  id: 6,
  title: 'Venus',
- description: 'Venus description',
+ description: 'La planète Vénus',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
+ categories: [ 'Space', 'Planet', 'Solar system' ],
  },
  {
  id: 7,
  title: 'Earth',
  description: 'Earth description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
+ categories: [ 'Space', 'Planet', 'Solar system' ],
  },
  {
  id: 8,
  title: 'Mars',
  description: 'Mars description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
+ categories: [ 'Space', 'Planet', 'Solar system' ],
  },
  {
  id: 9,
  title: 'Jupiter',
  description: 'Jupiter description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Gas giant',
+ categories: [ 'Space', 'Planet', 'Solar system' ],
  },
  {
  id: 10,
  title: 'Saturn',
  description: 'Saturn description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Gas giant',
+ categories: [ 'Space', 'Planet', 'Solar system' ],
  },
  {
  id: 11,
  title: 'Uranus',
  description: 'Uranus description',
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Ice giant',
+ categories: [ 'Space', 'Ice giant', 'Solar system' ],
  },
 ];
 
@@ -135,3 +146,66 @@ export const actions = [
  callback() {},
  },
 ];
+
+export const fields = [
+ {
+ header: 'Image',
+ id: 'image',
+ render: ( { item } ) => {
+ return (
+ <img src={ item.image } alt="" style={ { width: '100%' } } />
+ );
+ },
+ width: 50,
+ enableSorting: false,
+ },
+ {
+ header: 'Title',
+ id: 'title',
+ maxWidth: 400,
+ enableHiding: false,
+ enableGlobalSearch: true,
+ },
+ {
+ header: 'Type',
+ id: 'type',
+ maxWidth: 400,
+ enableHiding: false,
+ type: 'enumeration',
+ elements: [
+ { value: 'Not a planet', label: 'Not a planet' },
+ { value: 'Ice giant', label: 'Ice giant' },
+ { value: 'Terrestrial', label: 'Terrestrial' },
+ { value: 'Gas giant', label: 'Gas giant' },
+ ],
+ },
+ {
+ header: 'Description',
+ id: 'description',
+ maxWidth: 200,
+ enableSorting: false,
+ enableGlobalSearch: true,
+ },
+ {
+ header: 'Categories',
+ id: 'categories',
+ type: 'enumeration',
+ elements: [
+ { value: 'Space', label: 'Space' },
+ { value: 'NASA', label: 'NASA' },
+ { value: 'Planet', label: 'Planet' },
+ { value: 'Solar system', label: 'Solar system' },
+ { value: 'Ice giant', label: 'Ice giant' },
+ ],
+ filterBy: {
+ operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
+ },
+ getValue: ( { item } ) => {
+ return item.categories;
+ },
+ render: ( { item } ) => {
+ return item.categories.join( ',' );
+ },
+ enableSorting: false,
+ },
+];