From 292f8d9066bee683c8661284b0ba58879ab255d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Tue, 3 Dec 2024 11:34:03 +0100 Subject: [PATCH] Add view config control to switch on/off hierarchical vizualization --- .../dataviews-view-config/index.tsx | 9 ++- .../dataviews/src/dataviews-layouts/index.ts | 5 +- .../table/sort-hierarchical.tsx | 55 +++++++++++++++++++ packages/dataviews/src/types.ts | 5 ++ .../src/components/post-list/index.js | 4 ++ .../sidebar-dataviews/default-views.js | 3 + 6 files changed, 76 insertions(+), 5 deletions(-) create mode 100644 packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx index f13670f27cdab7..ce24009f9b9302 100644 --- a/packages/dataviews/src/components/dataviews-view-config/index.tsx +++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx @@ -545,9 +545,12 @@ function DataviewsViewConfigDropdown() { - { !! activeLayout?.viewConfigOptions && ( - - ) } + { !! activeLayout?.viewConfigOptions && + activeLayout.viewConfigOptions.map( + ( Control, index ) => ( + + ) + ) } diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts index 7abdd1eb459328..fdfd3da9c98f91 100644 --- a/packages/dataviews/src/dataviews-layouts/index.ts +++ b/packages/dataviews/src/dataviews-layouts/index.ts @@ -19,6 +19,7 @@ import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants'; import type { View, Field } from '../types'; import PreviewSizePicker from './grid/preview-size-picker'; import DensityPicker from './table/density-picker'; +import SortHierarchical from './table/sort-hierarchical'; export const VIEW_LAYOUTS = [ { @@ -26,14 +27,14 @@ export const VIEW_LAYOUTS = [ label: __( 'Table' ), component: ViewTable, icon: blockTable, - viewConfigOptions: DensityPicker, + viewConfigOptions: [ SortHierarchical, DensityPicker ], }, { type: LAYOUT_GRID, label: __( 'Grid' ), component: ViewGrid, icon: category, - viewConfigOptions: PreviewSizePicker, + viewConfigOptions: [ PreviewSizePicker ], }, { type: LAYOUT_LIST, diff --git a/packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx b/packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx new file mode 100644 index 00000000000000..9d73c735a75671 --- /dev/null +++ b/packages/dataviews/src/dataviews-layouts/table/sort-hierarchical.tsx @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useContext } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import DataViewsContext from '../../components/dataviews-context'; +import type { ViewTable } from '../../types'; + +function SortHierarchicalControl() { + const context = useContext( DataViewsContext ); + const view = context.view as ViewTable; + const onChangeView = context.onChangeView; + + return ( + { + onChangeView( { + ...view, + layout: { + ...view.layout, + hierarchicalSort: value === 'enabled', + }, + } ); + } } + > + + + + ); +} + +export default SortHierarchicalControl; diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index e4a66d8d0acc7a..83e8d17899e1d6 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -359,6 +359,11 @@ export interface ViewTable extends ViewBase { * The field to visualize hierarchical data. */ hierarchical?: string; + + /** + * Switch on/off hierarchical sorting. + */ + hierarchicalSort?: boolean; }; } diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js index 200aa60ee17977..9fb0442abdac0c 100644 --- a/packages/edit-site/src/components/post-list/index.js +++ b/packages/edit-site/src/components/post-list/index.js @@ -290,6 +290,10 @@ export default function PostList( { postType } ) { _embed: 'author', order: view.sort?.direction, orderby: view.sort?.field, + orderby_hierarchy: + view.type === 'table' && !! view.layout?.hierarchicalSort + ? true + : false, search: view.search, ...filters, }; diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js index 847550ef7c6751..d4780cfb755fb7 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js +++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js @@ -31,6 +31,7 @@ export const defaultLayouts = { layout: { primaryField: 'title', hierarchical: 'parent', + hierarchicalSort: true, styles: { title: { maxWidth: 300, @@ -43,6 +44,7 @@ export const defaultLayouts = { mediaField: 'featured_media', primaryField: 'title', hierarchical: 'parent', // TODO: remove this + hierarchicalSort: true, // TODO: remove this }, }, [ LAYOUT_LIST ]: { @@ -50,6 +52,7 @@ export const defaultLayouts = { primaryField: 'title', mediaField: 'featured_media', hierarchical: 'parent', // TODO: remove this + hierarchicalSort: true, // TODO: remove this }, }, };