From 43b8b1089353644774e1a7616ccd3f30287959b2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 12 Oct 2023 10:35:09 +0100 Subject: [PATCH] DataViews: Update the view actions menu to be independent from current view APIs --- .../src/components/dataviews/dataviews.js | 6 +- .../src/components/dataviews/list-view.js | 47 +++++- .../src/components/dataviews/view-actions.js | 135 +++++++++++------- .../src/components/page-pages/index.js | 4 +- 4 files changed, 129 insertions(+), 63 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 0131040bf83af7..a0973a82a291ca 100644 --- 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( { - + { /* This component will be selected based on viewConfigs. Now we only have the list view. */ } diff --git a/packages/edit-site/src/components/dataviews/list-view.js b/packages/edit-site/src/components/dataviews/list-view.js index df417d75f32915..3b1b18c7ae38ae 100644 --- 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 ( { isSortable && ( - + { Object.entries( sortingItemsInfo ).map( + ( [ direction, info ] ) => ( + } + suffix={ + sortedDirection === direction && ( + + ) + } + onSelect={ ( event ) => { + event.preventDefault(); + if ( sortedDirection === direction ) { + dataView.resetSorting(); + } else { + dataView.setSorting( [ + { + id: header.column.id, + desc: direction === 'desc', + }, + ] ); + } + } } + > + { info.label } + + ) + ) } ) } { isSortable && isHidable && } diff --git a/packages/edit-site/src/components/dataviews/view-actions.js b/packages/edit-site/src/components/dataviews/view-actions.js index 1f90ce1402a143..77a31c09a92075 100644 --- 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 ( - { currenPageSize } + { view.perPage } } @@ -83,12 +82,12 @@ function PageSizeMenu( { dataView } ) { + view.perPage === size && } 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 } ) { + ! view.hiddenFields?.includes( field.id ) && ( + + ) } 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 } ); } ) } @@ -144,40 +154,15 @@ 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 ] ) => ( - } - suffix={ sortedDirection === direction && } - onSelect={ ( event ) => { - event.preventDefault(); - if ( sortedDirection === direction ) { - dataView.resetSorting(); - } else { - dataView.setSorting( [ - { - id: field.id, - desc: direction === 'desc', - }, - ] ); - } - } } - > - { info.label } - - ) ); -} -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 ( - { currentSortedField?.columnDef.header } + { currentSortedField?.header } } @@ -195,6 +180,7 @@ function SortMenu( { dataView } ) { } > { sortableFields?.map( ( field ) => { + const sortedDirection = view.sort?.direction; return ( } > - { field.columnDef.header } + { field.header } } side="left" > - + { Object.entries( sortingItemsInfo ).map( + ( [ direction, info ] ) => { + const isActive = + currentSortedField && + sortedDirection === direction && + field.id === currentSortedField.id; + return ( + } + suffix={ + isActive && + } + onSelect={ ( event ) => { + event.preventDefault(); + if ( + sortedDirection === direction + ) { + onChangeView( { + ...view, + sort: undefined, + } ); + } else { + onChangeView( { + ...view, + sort: { + field: field.id, + direction, + }, + } ); + } + } } + > + { info.label } + + ); + } + ) } ); } ) } @@ -218,11 +238,10 @@ function SortMenu( { dataView } ) { ); } -export default function ViewActions( { dataView, className } ) { +export default function ViewActions( { fields, view, onChangeView } ) { return ( { __( 'View' ) } @@ -231,9 +250,17 @@ export default function ViewActions( { dataView, className } ) { } > - - - + + + ); diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index e34e4cbac5be30..a616ea617feb91 100644 --- 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' ], } ),