Add author and status filters to the page list (#55270)

WordPress · Oct 17, 2023 · d590c5e · d590c5e
1 parent 8dfa175
commit d590c5e
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 17 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -13,7 +13,7 @@ import { useMemo } from '@wordpress/element';
 import ViewList from './view-list';
 import Pagination from './pagination';
 import ViewActions from './view-actions';
-import TextFilter from './text-filter';
+import Filters from './filters';
 import { ViewGrid } from './view-grid';
 
 export default function DataViews( {
@@ -35,13 +35,21 @@ export default function DataViews( {
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 }>
-				<HStack justify="space-between">
-					<TextFilter view={ view } onChangeView={ onChangeView } />
-					<ViewActions
-						fields={ fields }
-						view={ view }
-						onChangeView={ onChangeView }
-					/>
+				<HStack>
+					<HStack justify="start">
+						<Filters
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					</HStack>
+					<HStack justify="end">
+						<ViewActions
+							fields={ fields }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					</HStack>
 				</HStack>
 				<ViewComponent
 					fields={ _fields }

diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import TextFilter from './text-filter';
+import InFilter from './in-filter';
+
+export default function Filters( { fields, view, onChangeView } ) {
+	const filters = {};
+	fields.forEach( ( field ) => {
+		if ( ! field.filters ) {
+			return;
+		}
+
+		field.filters.forEach( ( f ) => {
+			filters[ f.id ] = { type: f.type };
+		} );
+	} );
+
+	return (
+		view.visibleFilters?.map( ( filterName ) => {
+			const filter = filters[ filterName ];
+
+			if ( ! filter ) {
+				return null;
+			}
+
+			if ( filter.type === 'search' ) {
+				return (
+					<TextFilter
+						key={ filterName }
+						id={ filterName }
+						view={ view }
+						onChangeView={ onChangeView }
+					/>
+				);
+			}
+			if ( filter.type === 'enumeration' ) {
+				return (
+					<InFilter
+						key={ filterName }
+						id={ filterName }
+						fields={ fields }
+						view={ view }
+						onChangeView={ onChangeView }
+					/>
+				);
+			}
+
+			return null;
+		} ) || __( 'No filters available' )
+	);
+}
diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	SelectControl,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+
+export default ( { id, fields, view, onChangeView } ) => {
+	const field = fields.find( ( f ) => f.id === id );
+
+	return (
+		<SelectControl
+			value={ view.filters[ id ] }
+			prefix={
+				<InputControlPrefixWrapper
+					as="span"
+					className="dataviews__select-control-prefix"
+				>
+					{ field.header + ':' }
+				</InputControlPrefixWrapper>
+			}
+			options={ field?.elements || [] }
+			onChange={ ( value ) => {
+				if ( value === '' ) {
+					value = undefined;
+				}
+
+				onChangeView( ( currentView ) => ( {
+					...currentView,
+					filters: cleanEmptyObject( {
+						...currentView.filters,
+						[ id ]: value,
+					} ),
+				} ) );
+			} }
+		/>
+	);
+};
diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js
@@ -25,7 +25,7 @@ function PageSizeControl( { view, onChangeView } ) {
 			prefix={
 				<InputControlPrefixWrapper
 					as="span"
-					className="dataviews__per-page-control-prefix"
+					className="dataviews__select-control-prefix"
 				>
 					{ label }
 				</InputControlPrefixWrapper>

diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
@@ -30,7 +30,7 @@
 	}
 }
 
-.dataviews__per-page-control-prefix {
+.dataviews__select-control-prefix {
 	color: $gray-700;
 	text-wrap: nowrap;
 }

diff --git a/packages/edit-site/src/components/dataviews/text-filter.js b/packages/edit-site/src/components/dataviews/text-filter.js
@@ -10,9 +10,9 @@ import { SearchControl } from '@wordpress/components';
  */
 import useDebouncedInput from '../../utils/use-debounced-input';
 
-export default function TextFilter( { view, onChangeView } ) {
+export default function TextFilter( { id, view, onChangeView } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
-		view.search
+		view.filters[ id ]
 	);
 	const onChangeViewRef = useRef( onChangeView );
 	useEffect( () => {
@@ -21,8 +21,11 @@ export default function TextFilter( { view, onChangeView } ) {
 	useEffect( () => {
 		onChangeViewRef.current( ( currentView ) => ( {
 			...currentView,
-			search: debouncedSearch,
 			page: 1,
+			filters: {
+				...currentView.filters,
+				[ id ]: debouncedSearch,
+			},
 		} ) );
 	}, [ debouncedSearch ] );
 	const searchLabel = __( 'Filter list' );

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -32,13 +32,17 @@ const defaultConfigPerViewType = {
 export default function PagePages() {
 	const [ view, setView ] = useState( {
 		type: 'list',
-		search: '',
+		filters: {
+			search: '',
+			status: 'publish, draft',
+		},
 		page: 1,
 		perPage: 5,
 		sort: {
 			field: 'date',
 			direction: 'desc',
 		},
+		visibleFilters: [ 'search', 'author', 'status' ],
 		// All fields are visible by default, so it's
 		// better to keep track of the hidden ones.
 		hiddenFields: [ 'date', 'featured-image' ],
@@ -63,8 +67,7 @@ export default function PagePages() {
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
-			search: view.search,
-			status: [ 'publish', 'draft' ],
+			...view.filters,
 		} ),
 		[ view ]
 	);
@@ -75,6 +78,10 @@ export default function PagePages() {
 		totalPages,
 	} = useEntityRecords( 'postType', 'page', queryArgs );
 
+	const { records: authors } = useEntityRecords( 'root', 'user', {
+		who: 'authors',
+	} );
+
 	const paginationInfo = useMemo(
 		() => ( {
 			totalItems,
@@ -126,6 +133,7 @@ export default function PagePages() {
 						</VStack>
 					);
 				},
+				filters: [ { id: 'search', type: 'search' } ],
 				maxWidth: 400,
 				sortingFn: 'alphanumeric',
 				enableHiding: false,
@@ -142,12 +150,37 @@ export default function PagePages() {
 						</a>
 					);
 				},
+				filters: [ { id: 'author', type: 'enumeration' } ],
+				elements: [
+					{
+						value: '',
+						label: __( 'All' ),
+					},
+					...( authors?.map( ( { id, name } ) => ( {
+						value: id,
+						label: name,
+					} ) ) || [] ),
+				],
 			},
 			{
 				header: __( 'Status' ),
 				id: 'status',
 				accessorFn: ( page ) =>
 					postStatuses[ page.status ] ?? page.status,
+				filters: [ { type: 'enumeration', id: 'status' } ],
+				elements: [
+					{ label: __( 'All' ), value: 'publish,draft' },
+					...( ( postStatuses &&
+						Object.entries( postStatuses )
+							.filter( ( [ slug ] ) =>
+								[ 'publish', 'draft' ].includes( slug )
+							)
+							.map( ( [ slug, name ] ) => ( {
+								value: slug,
+								label: name,
+							} ) ) ) ||
+						[] ),
+				],
 				enableSorting: false,
 			},
 			{
@@ -163,7 +196,7 @@ export default function PagePages() {
 				enableSorting: false,
 			},
 		],
-		[ postStatuses ]
+		[ postStatuses, authors ]
 	);
 
 	const trashPostAction = useTrashPostAction();