DataViews: Update the view actions menu to be independent from curren…

…t view APIs
WordPress · Oct 12, 2023 · 43b8b10 · 43b8b10
1 parent 8db382f
commit 43b8b10
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 63 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -195,7 +195,11 @@ export default function DataViews( {
 			<VStack spacing={ 4 }>
 				<HStack justify="space-between">
 					<TextFilter onChange={ dataView.setGlobalFilter } />
-					<ViewActions dataView={ dataView } />
+					<ViewActions
+						fields={ fields }
+						view={ view }
+						onChangeView={ onChangeView }
+					/>
 				</HStack>
 				{ /* This component will be selected based on viewConfigs. Now we only have the list view. */ }
 				<ListView dataView={ dataView } isLoading={ isLoading } />

diff --git a/packages/edit-site/src/components/dataviews/list-view.js b/packages/edit-site/src/components/dataviews/list-view.js
@@ -8,7 +8,14 @@ import { flexRender } from '@tanstack/react-table';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp, unseen } from '@wordpress/icons';
+import {
+	chevronDown,
+	chevronUp,
+	unseen,
+	check,
+	arrowUp,
+	arrowDown,
+} from '@wordpress/icons';
 import {
 	Button,
 	Icon,
@@ -20,7 +27,6 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { FieldSortingItems } from './view-actions';
 
 const {
 	DropdownMenuV2,
@@ -29,6 +35,10 @@ const {
 	DropdownMenuSeparatorV2,
 } = unlock( componentsPrivateApis );
 
+const sortingItemsInfo = {
+	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
+	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
+};
 const sortIcons = { asc: chevronUp, desc: chevronDown };
 function HeaderMenu( { dataView, header } ) {
 	if ( header.isPlaceholder ) {
@@ -43,6 +53,7 @@ function HeaderMenu( { dataView, header } ) {
 	if ( ! isSortable && ! isHidable ) {
 		return text;
 	}
+	const sortedDirection = header.column.getIsSorted();
 	return (
 		<DropdownMenuV2
 			align="start"
@@ -57,10 +68,34 @@ function HeaderMenu( { dataView, header } ) {
 		>
 			{ isSortable && (
 				<DropdownMenuGroupV2>
-					<FieldSortingItems
-						field={ header.column }
-						dataView={ dataView }
-					/>
+					{ Object.entries( sortingItemsInfo ).map(
+						( [ direction, info ] ) => (
+							<DropdownMenuItemV2
+								key={ direction }
+								prefix={ <Icon icon={ info.icon } /> }
+								suffix={
+									sortedDirection === direction && (
+										<Icon icon={ check } />
+									)
+								}
+								onSelect={ ( event ) => {
+									event.preventDefault();
+									if ( sortedDirection === direction ) {
+										dataView.resetSorting();
+									} else {
+										dataView.setSorting( [
+											{
+												id: header.column.id,
+												desc: direction === 'desc',
+											},
+										] );
+									}
+								} }
+							>
+								{ info.label }
+							</DropdownMenuItemV2>
+						)
+					) }
 				</DropdownMenuGroupV2>
 			) }
 			{ isSortable && isHidable && <DropdownMenuSeparatorV2 /> }

diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js
@@ -60,15 +60,14 @@ export function PageSizeControl( { dataView } ) {
 	);
 }
 
-function PageSizeMenu( { dataView } ) {
-	const currenPageSize = dataView.getState().pagination.pageSize;
+function PageSizeMenu( { view, onChangeView } ) {
 	return (
 		<DropdownSubMenuV2
 			trigger={
 				<DropdownSubMenuTriggerV2
 					suffix={
 						<>
-							{ currenPageSize }
+							{ view.perPage }
 							<Icon icon={ chevronRightSmall } />
 						</>
 					}
@@ -83,12 +82,12 @@ function PageSizeMenu( { dataView } ) {
 					<DropdownMenuItemV2
 						key={ size }
 						prefix={
-							currenPageSize === size && <Icon icon={ check } />
+							view.perPage === size && <Icon icon={ check } />
 						}
 						onSelect={ ( event ) => {
 							// We need to handle this on DropDown component probably..
 							event.preventDefault();
-							dataView.setPageSize( size );
+							onChangeView( { ...view, perPage: size, page: 0 } );
 						} }
 						// TODO: check about role and a11y.
 						role="menuitemcheckbox"
@@ -101,10 +100,10 @@ function PageSizeMenu( { dataView } ) {
 	);
 }
 
-function FieldsVisibilityMenu( { dataView } ) {
-	const hidableFields = dataView
-		.getAllColumns()
-		.filter( ( columnn ) => columnn.getCanHide() );
+function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
+	const hidableFields = fields.filter(
+		( field ) => field.enableHiding !== false
+	);
 	if ( ! hidableFields?.length ) {
 		return null;
 	}
@@ -123,15 +122,26 @@ function FieldsVisibilityMenu( { dataView } ) {
 					<DropdownMenuItemV2
 						key={ field.id }
 						prefix={
-							field.getIsVisible() && <Icon icon={ check } />
+							! view.hiddenFields?.includes( field.id ) && (
+								<Icon icon={ check } />
+							)
 						}
 						onSelect={ ( event ) => {
 							event.preventDefault();
-							field.getToggleVisibilityHandler()( event );
+							onChangeView( {
+								...view,
+								hiddenFields: view.hiddenFields?.includes(
+									field.id
+								)
+									? view.hiddenFields.filter(
+											( id ) => id !== field.id
+									  )
+									: [ ...view.hiddenFields, field.id ],
+							} );
 						} }
 						role="menuitemcheckbox"
 					>
-						{ field.columnDef.header }
+						{ field.header }
 					</DropdownMenuItemV2>
 				);
 			} ) }
@@ -144,48 +154,23 @@ const sortingItemsInfo = {
 	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
 	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
 };
-export function FieldSortingItems( { field, dataView } ) {
-	const sortedDirection = field.getIsSorted();
-	return Object.entries( sortingItemsInfo ).map( ( [ direction, info ] ) => (
-		<DropdownMenuItemV2
-			key={ direction }
-			prefix={ <Icon icon={ info.icon } /> }
-			suffix={ sortedDirection === direction && <Icon icon={ check } /> }
-			onSelect={ ( event ) => {
-				event.preventDefault();
-				if ( sortedDirection === direction ) {
-					dataView.resetSorting();
-				} else {
-					dataView.setSorting( [
-						{
-							id: field.id,
-							desc: direction === 'desc',
-						},
-					] );
-				}
-			} }
-		>
-			{ info.label }
-		</DropdownMenuItemV2>
-	) );
-}
-function SortMenu( { dataView } ) {
-	const sortableFields = dataView
-		.getAllColumns()
-		.filter( ( columnn ) => columnn.getCanSort() );
+function SortMenu( { fields, view, onChangeView } ) {
+	const sortableFields = fields.filter(
+		( field ) => field.enableSorting !== false
+	);
 	if ( ! sortableFields?.length ) {
 		return null;
 	}
-	const currentSortedField = sortableFields.find( ( field ) =>
-		field.getIsSorted()
+	const currentSortedField = fields.find(
+		( field ) => field.id === view.sort?.field
 	);
 	return (
 		<DropdownSubMenuV2
 			trigger={
 				<DropdownSubMenuTriggerV2
 					suffix={
 						<>
-							{ currentSortedField?.columnDef.header }
+							{ currentSortedField?.header }
 							<Icon icon={ chevronRightSmall } />
 						</>
 					}
@@ -195,34 +180,68 @@ function SortMenu( { dataView } ) {
 			}
 		>
 			{ sortableFields?.map( ( field ) => {
+				const sortedDirection = view.sort?.direction;
 				return (
 					<DropdownSubMenuV2
 						key={ field.id }
 						trigger={
 							<DropdownSubMenuTriggerV2
 								suffix={ <Icon icon={ chevronRightSmall } /> }
 							>
-								{ field.columnDef.header }
+								{ field.header }
 							</DropdownSubMenuTriggerV2>
 						}
 						side="left"
 					>
-						<FieldSortingItems
-							field={ field }
-							dataView={ dataView }
-						/>
+						{ Object.entries( sortingItemsInfo ).map(
+							( [ direction, info ] ) => {
+								const isActive =
+									currentSortedField &&
+									sortedDirection === direction &&
+									field.id === currentSortedField.id;
+								return (
+									<DropdownMenuItemV2
+										key={ direction }
+										prefix={ <Icon icon={ info.icon } /> }
+										suffix={
+											isActive && <Icon icon={ check } />
+										}
+										onSelect={ ( event ) => {
+											event.preventDefault();
+											if (
+												sortedDirection === direction
+											) {
+												onChangeView( {
+													...view,
+													sort: undefined,
+												} );
+											} else {
+												onChangeView( {
+													...view,
+													sort: {
+														field: field.id,
+														direction,
+													},
+												} );
+											}
+										} }
+									>
+										{ info.label }
+									</DropdownMenuItemV2>
+								);
+							}
+						) }
 					</DropdownSubMenuV2>
 				);
 			} ) }
 		</DropdownSubMenuV2>
 	);
 }
 
-export default function ViewActions( { dataView, className } ) {
+export default function ViewActions( { fields, view, onChangeView } ) {
 	return (
 		<DropdownMenuV2
 			label={ __( 'Actions' ) }
-			className={ className }
 			trigger={
 				<Button variant="tertiary" icon={ blockTable }>
 					{ __( 'View' ) }
@@ -231,9 +250,17 @@ export default function ViewActions( { dataView, className } ) {
 			}
 		>
 			<DropdownMenuGroupV2>
-				<SortMenu dataView={ dataView } />
-				<FieldsVisibilityMenu dataView={ dataView } />
-				<PageSizeMenu dataView={ dataView } />
+				<SortMenu
+					fields={ fields }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+				<FieldsVisibilityMenu
+					fields={ fields }
+					view={ view }
+					onChangeView={ onChangeView }
+				/>
+				<PageSizeMenu view={ view } onChangeView={ onChangeView } />
 			</DropdownMenuGroupV2>
 		</DropdownMenuV2>
 	);

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -52,8 +52,8 @@ export default function PagePages() {
 			per_page: view.perPage,
 			page: view.page + 1, // tanstack starts from zero.
 			_embed: 'author',
-			order: view.sort.direction,
-			orderby: view.sort.field,
+			order: view.sort?.direction,
+			orderby: view.sort?.field,
 			search: view.search,
 			status: [ 'publish', 'draft' ],
 		} ),