@wordpress/dataviews 0.7.0 → 0.9.0

package/src/test/filter-and-sort-data-view.js

@@ -0,0 +1,276 @@
+/**
+ * Internal dependencies
+ */
+import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import { data, fields } from '../stories/fixtures';
+
+describe( 'filters', () => {
+	it( 'should return empty if the data is empty', () => {
+		expect( filterSortAndPaginate( null, {}, [] ) ).toStrictEqual( {
+			data: [],
+			paginationInfo: { totalItems: 0, totalPages: 0 },
+		} );
+	} );
+
+	it( 'should return the same data if no filters are applied', () => {
+		expect(
+			filterSortAndPaginate(
+				data,
+				{
+					filters: [],
+				},
+				[]
+			)
+		).toStrictEqual( {
+			data,
+			paginationInfo: { totalItems: data.length, totalPages: 1 },
+		} );
+	} );
+
+	it( 'should search using searchable fields (title)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'Neptu',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+	} );
+
+	it( 'should search using searchable fields (description)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'photo',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'NASA photo' );
+	} );
+
+	it( 'should perform case-insensitive and accent-insensitive search', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'nete ven',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'La planète Vénus' );
+	} );
+
+	it( 'should search using IS filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'is',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NOT filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNot',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 9 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+		expect( result[ 3 ].title ).toBe( 'Mercury' );
+		expect( result[ 4 ].title ).toBe( 'Venus' );
+		expect( result[ 5 ].title ).toBe( 'Earth' );
+		expect( result[ 6 ].title ).toBe( 'Mars' );
+		expect( result[ 7 ].title ).toBe( 'Jupiter' );
+		expect( result[ 8 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS ANY filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NONE filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNone',
+						value: [ 'Ice giant', 'Gas giant', 'Terrestrial' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ANY filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAny',
+						value: [ 'NASA' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS NONE filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNone',
+						value: [ 'Space' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 7 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Mercury' );
+		expect( result[ 2 ].title ).toBe( 'Venus' );
+		expect( result[ 3 ].title ).toBe( 'Earth' );
+		expect( result[ 4 ].title ).toBe( 'Mars' );
+		expect( result[ 5 ].title ).toBe( 'Jupiter' );
+		expect( result[ 6 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS NOT ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNotAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+} );
+
+describe( 'sorting', () => {
+	it( 'should sort', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Uranus' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+	} );
+} );
+
+describe( 'pagination', () => {
+	it( 'should paginate', () => {
+		const { data: result, paginationInfo } = filterSortAndPaginate(
+			data,
+			{
+				perPage: 2,
+				page: 2,
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+		expect( paginationInfo ).toStrictEqual( {
+			totalItems: data.length,
+			totalPages: 6,
+		} );
+	} );
+} );

package/src/utils.js

@@ -1,66 +1,48 @@
 /**
  * Internal dependencies
  */
-import { OPERATORS } from './constants';
-
-/**
- * Helper util to sort data by text fields, when sorting is done client side.
- *
- * @param {Object}   params            Function params.
- * @param {Object[]} params.data       Data to sort.
- * @param {Object}   params.view       Current view object.
- * @param {Object[]} params.fields     Array of available fields.
- * @param {string[]} params.textFields Array of the field ids to sort.
- *
- * @return {Object[]} Sorted data.
- */
-export const sortByTextFields = ( { data, view, fields, textFields } ) => {
-	const sortedData = [ ...data ];
-	const fieldId = view.sort.field;
-	if ( textFields.includes( fieldId ) ) {
-		const fieldToSort = fields.find( ( field ) => {
-			return field.id === fieldId;
-		} );
-		sortedData.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 );
-		} );
-	}
-	return sortedData;
-};
-
-/**
- * Helper util to get the paginated data and the paginateInfo needed,
- * when pagination is done client side.
- *
- * @param {Object}   params      Function params.
- * @param {Object[]} params.data Available data.
- * @param {Object}   params.view Current view object.
- *
- * @return {Object} Paginated data and paginationInfo.
- */
-export function getPaginationResults( { data, view } ) {
-	const start = ( view.page - 1 ) * view.perPage;
-	const totalItems = data?.length || 0;
-	data = data?.slice( start, start + view.perPage );
-	return {
-		data,
-		paginationInfo: {
-			totalItems,
-			totalPages: Math.ceil( totalItems / view.perPage ),
-		},
-	};
-}
+import {
+	ALL_OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+} from './constants';
 
 export const sanitizeOperators = ( field ) => {
 	let operators = field.filterBy?.operators;
+
+	// Assign default values.
 	if ( ! operators || ! Array.isArray( operators ) ) {
-		operators = Object.keys( OPERATORS );
+		operators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];
+	}
+
+	// Transform legacy in, notIn operators to is, isNot.
+	// To be removed in the future.
+	if ( operators.includes( 'in' ) ) {
+		operators = operators.filter( ( operator ) => operator !== 'is' );
+		operators.push( 'is' );
+	}
+	if ( operators.includes( 'notIn' ) ) {
+		operators = operators.filter( ( operator ) => operator !== 'notIn' );
+		operators.push( 'isNot' );
 	}
-	return operators.filter( ( operator ) =>
-		Object.keys( OPERATORS ).includes( operator )
+
+	// Make sure only valid operators are used.
+	operators = operators.filter( ( operator ) =>
+		ALL_OPERATORS.includes( operator )
 	);
+
+	// Do not allow mixing single & multiselection operators.
+	// Remove multiselection operators if any of the single selection ones is present.
+	if (
+		operators.includes( OPERATOR_IS ) ||
+		operators.includes( OPERATOR_IS_NOT )
+	) {
+		operators = operators.filter( ( operator ) =>
+			[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )
+		);
+	}
+
+	return operators;
 };

package/src/view-grid.js

@@ -10,8 +10,9 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	Tooltip,
 	Spinner,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
@@ -34,6 +35,7 @@ function GridItem( {
 	mediaField,
 	primaryField,
 	visibleFields,
+	displayAsColumnFields,
 } ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -46,9 +48,12 @@ function GridItem( {
 				'is-selected': hasBulkAction && isSelected,
 			} ) }
 			onClickCapture={ ( event ) => {
-				if ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {
+				if ( event.ctrlKey || event.metaKey ) {
 					event.stopPropagation();
 					event.preventDefault();
+					if ( ! hasBulkAction ) {
+						return;
+					}
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {
@@ -104,17 +109,34 @@ function GridItem( {
 						return null;
 					}
 					return (
-						<VStack
-							className="dataviews-view-grid__field"
+						<Flex
+							className={ classnames(
+								'dataviews-view-grid__field',
+								displayAsColumnFields?.includes( field.id )
+									? 'is-column'
+									: 'is-row'
+							) }
 							key={ field.id }
-							spacing={ 1 }
+							gap={ 1 }
+							justify="flex-start"
+							expanded
+							style={ { height: 'auto' } }
+							direction={
+								displayAsColumnFields?.includes( field.id )
+									? 'column'
+									: 'row'
+							}
 						>
-							<Tooltip text={ field.header } placement="left">
-								<div className="dataviews-view-grid__field-value">
-									{ renderedValue }
-								</div>
-							</Tooltip>
-						</VStack>
+							<FlexItem className="dataviews-view-grid__field-name">
+								{ field.header }
+							</FlexItem>
+							<FlexItem
+								className="dataviews-view-grid__field-value"
+								style={ { maxHeight: 'none' } }
+							>
+								{ renderedValue }
+							</FlexItem>
+						</Flex>
 					);
 				} ) }
 			</VStack>
@@ -172,6 +194,9 @@ export default function ViewGrid( {
 								mediaField={ mediaField }
 								primaryField={ primaryField }
 								visibleFields={ visibleFields }
+								displayAsColumnFields={
+									view.layout.displayAsColumnFields
+								}
 							/>
 						);
 					} ) }