From eb63c423467ebc6273836c2f3212116bc33551a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 11 Oct 2023 13:56:41 +0200 Subject: [PATCH 01/41] Add skeleton for filters --- .../src/components/dataviews/add-filter.js | 41 +++++++++++++++++++ .../src/components/dataviews/dataviews.js | 3 ++ 2 files changed, 44 insertions(+) create mode 100644 packages/edit-site/src/components/dataviews/add-filter.js diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js new file mode 100644 index 00000000000000..13f937bcf1ef7b --- /dev/null +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +import { + privateApis as componentsPrivateApis, + Icon, + Button, +} from '@wordpress/components'; +import { chevronDown, check } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); + +export default function AddFilter( {} ) { + return ( + + { __( 'Filters' ) } + + + } + > + } + role="menuitemcheckbox" + > + { 'Filter one' } + + + { 'Filter two' } + + + ); +} diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 755ce8a2ea348d..c7eabaae40554b 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -14,6 +14,8 @@ import Pagination from './pagination'; import ViewActions from './view-actions'; import TextFilter from './text-filter'; import { ViewGrid } from './view-grid'; +import AddFilter from './add-filter'; +import { moreVertical } from '@wordpress/icons'; export default function DataViews( { view, @@ -30,6 +32,7 @@ export default function DataViews( { + Date: Wed, 11 Oct 2023 14:15:30 +0200 Subject: [PATCH 02/41] List filterable fields --- .../src/components/dataviews/add-filter.js | 31 ++++++++++++------- .../src/components/page-pages/index.js | 1 + 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 13f937bcf1ef7b..e25d380b0cba77 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -16,7 +16,14 @@ import { unlock } from '../../lock-unlock'; const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); -export default function AddFilter( {} ) { +export default function AddFilter( { dataView } ) { + const filterableFields = dataView + .getAllColumns() + .filter( ( column ) => column.getCanFilter() ); + if ( ! filterableFields.length ) { + return null; + } + return ( } > - } - role="menuitemcheckbox" - > - { 'Filter one' } - - - { 'Filter two' } - + { filterableFields.map( ( field ) => { + return ( + } + role="menuitemcheckbox" + onSelect={ () => {} } + > + { field.columnDef.header } + + ); + } ) } ); } diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 602d14b8ad2e3b..8bee76e1b6bc40 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -149,6 +149,7 @@ export default function PagePages() { accessorFn: ( page ) => postStatuses[ page.status ] ?? page.status, enableSorting: false, + enableColumnFilter: false, }, { header: 'Date', From 55e2dbb7abecb69cac620cd24e2188a4e6279a51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 11 Oct 2023 16:17:03 +0200 Subject: [PATCH 03/41] Keep track of filters enabled/disabled --- .../src/components/dataviews/add-filter.js | 26 ++++++++++++++++--- .../src/components/dataviews/dataviews.js | 9 ++++++- .../src/components/page-pages/index.js | 1 + 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index e25d380b0cba77..445dcb0e0f8174 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -16,7 +16,7 @@ import { unlock } from '../../lock-unlock'; const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); -export default function AddFilter( { dataView } ) { +export default function AddFilter( { dataView, filters, onChangeFilters } ) { const filterableFields = dataView .getAllColumns() .filter( ( column ) => column.getCanFilter() ); @@ -37,9 +37,29 @@ export default function AddFilter( { dataView } ) { return ( } + prefix={ + filters.hasOwnProperty( field.id ) && ( + + ) + } role="menuitemcheckbox" - onSelect={ () => {} } + onSelect={ ( event ) => { + event.preventDefault(); + onChangeFilters( ( currentView ) => { + if ( filters.hasOwnProperty( field.id ) ) { + delete currentView.filters[ field.id ]; + return { ...currentView }; + } + + return { + ...currentView, + filters: { + ...currentView.filters, + [ field.id ]: undefined, + }, + }; + } ); + } } > { field.columnDef.header } diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index c7eabaae40554b..e316cda0eae00b 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -32,7 +32,14 @@ export default function DataViews( { - + { + // Object.keys( view.filters ).map( ( key ) => key ) + } + Date: Wed, 11 Oct 2023 16:42:52 +0200 Subject: [PATCH 04/41] Render filter author --- .../src/components/dataviews/add-filter.js | 2 +- .../src/components/dataviews/dataviews.js | 19 ++++++-- .../src/components/page-pages/index.js | 43 +++++++++++++++++++ 3 files changed, 59 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 445dcb0e0f8174..04663095968bc2 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -19,7 +19,7 @@ const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); export default function AddFilter( { dataView, filters, onChangeFilters } ) { const filterableFields = dataView .getAllColumns() - .filter( ( column ) => column.getCanFilter() ); + .filter( ( column ) => column.columnDef.renderFilter ); if ( ! filterableFields.length ) { return null; } diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index e316cda0eae00b..1c2b7dd15333df 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -31,10 +31,21 @@ export default function DataViews( {
- - { - // Object.keys( view.filters ).map( ( key ) => key ) - } + + { Object.keys( view.filters ).map( ( key ) => { + const field = dataView + .getAllColumns() + .find( + ( column ) => + column.columnDef.renderFilter && + column.id === key + ); + if ( ! field ) { + return null; + } + + return field.columnDef.renderFilter(); + } ) } ); }, + renderFilter: () => { + // TODO: request them from API. + const authors = [ 'admin-1', 'admin-2' ]; + return ( + + { __( 'Author' ) } + + + } + > + { authors.map( ( author ) => { + return ( + + ) + } + role="menuitemcheckbox" + onSelect={ ( event ) => { + event.preventDefault(); + // TODO: dispatch request to update the view. + } } + > + { author } + + ); + } ) } + + ); + }, }, { header: __( 'Status' ), From 0e0328c5b83e3f8704d9c98959f288c1f2a8e2ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 11 Oct 2023 17:04:50 +0200 Subject: [PATCH 05/41] Filter by author --- .../src/components/page-pages/index.js | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 9f3b88e9a2e9b6..b4022366c2fa8a 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -72,6 +72,7 @@ export default function PagePages() { order: view.sort?.direction, orderby: view.sort?.field, search: view.search, + author: view.filters?.author, status: [ 'publish', 'draft' ], } ), [ view ] @@ -83,6 +84,10 @@ export default function PagePages() { totalPages, } = useEntityRecords( 'postType', 'page', queryArgs ); + const { records: authors } = useEntityRecords( 'root', 'user', { + who: 'authors', + } ); + const paginationInfo = useMemo( () => ( { totalItems, @@ -151,8 +156,10 @@ export default function PagePages() { ); }, renderFilter: () => { - // TODO: request them from API. - const authors = [ 'admin-1', 'admin-2' ]; + if ( ! authors ) { + return null; + } + return ( { return ( { event.preventDefault(); - // TODO: dispatch request to update the view. + setView( ( currentView ) => { + return { + ...currentView, + filters: { + ...currentView.filters, + author: author.id, + }, + }; + } ); } } > - { author } + { author.name } ); } ) } @@ -208,7 +223,7 @@ export default function PagePages() { enableSorting: false, }, ], - [ postStatuses ] + [ postStatuses, authors ] ); const trashPostAction = useTrashPostAction(); From 9fac3a59a4fc7ff598399b1773ccbb2ffe48c032 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 11 Oct 2023 17:15:40 +0200 Subject: [PATCH 06/41] Check author filter --- packages/edit-site/src/components/page-pages/index.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index b4022366c2fa8a..e826c49bbad933 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -175,14 +175,13 @@ export default function PagePages() { ) } role="menuitemcheckbox" - onSelect={ ( event ) => { - event.preventDefault(); + onSelect={ () => { setView( ( currentView ) => { return { ...currentView, @@ -223,7 +222,7 @@ export default function PagePages() { enableSorting: false, }, ], - [ postStatuses, authors ] + [ postStatuses, authors, view ] ); const trashPostAction = useTrashPostAction(); From cd4233857693bdb5ca7ebce101007748ff4da2b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Wed, 11 Oct 2023 17:27:07 +0200 Subject: [PATCH 07/41] Add none to authors --- packages/edit-site/src/components/page-pages/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index e826c49bbad933..28f0fffc404470 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -170,10 +170,13 @@ export default function PagePages() { } > - { authors.map( ( author ) => { + { [ + { id: undefined, name: __( 'None' ) }, + ...authors, + ].map( ( author ) => { return ( Date: Wed, 11 Oct 2023 17:38:43 +0200 Subject: [PATCH 08/41] Better description --- packages/edit-site/src/components/page-pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 28f0fffc404470..29077a656041de 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -171,7 +171,7 @@ export default function PagePages() { } > { [ - { id: undefined, name: __( 'None' ) }, + { id: undefined, name: __( 'All' ) }, ...authors, ].map( ( author ) => { return ( From 8277b89705e94be457edf9acb7a8a7fff2950fc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 10:28:54 +0200 Subject: [PATCH 09/41] Extract field filters to own component --- .../src/components/dataviews/dataviews.js | 17 ++--------------- .../src/components/dataviews/field-filters.js | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 packages/edit-site/src/components/dataviews/field-filters.js diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 1c2b7dd15333df..472ae8ef0898f1 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -15,7 +15,7 @@ import ViewActions from './view-actions'; import TextFilter from './text-filter'; import { ViewGrid } from './view-grid'; import AddFilter from './add-filter'; -import { moreVertical } from '@wordpress/icons'; +import FieldFilters from './field-filters'; export default function DataViews( { view, @@ -32,25 +32,12 @@ export default function DataViews( { - { Object.keys( view.filters ).map( ( key ) => { - const field = dataView - .getAllColumns() - .find( - ( column ) => - column.columnDef.renderFilter && - column.id === key - ); - if ( ! field ) { - return null; - } - - return field.columnDef.renderFilter(); - } ) } + { + const field = dataView + .getAllColumns() + .find( + (column) => + column.columnDef.renderFilter && + column.id === key + ); + if (!field) { + return null; + } + + return field.columnDef.renderFilter(); + }) + ); +} \ No newline at end of file From a23f699c453f3719be09c3691d069c405e174d68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 10:36:00 +0200 Subject: [PATCH 10/41] FieldFilters: refactor to use fields instead of DataView --- .../src/components/dataviews/dataviews.js | 4 ++-- .../src/components/dataviews/field-filters.js | 15 +++++++-------- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 472ae8ef0898f1..1ecdf2d0350f87 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -31,13 +31,13 @@ export default function DataViews( {
- + - + { - const field = dataView - .getAllColumns() + const fieldWithFilter = fields .find( - (column) => - column.columnDef.renderFilter && - column.id === key + ( field ) => + field.renderFilter && + field.id === key ); - if (!field) { + if (!fieldWithFilter) { return null; } - return field.columnDef.renderFilter(); + return fieldWithFilter.renderFilter(); }) ); } \ No newline at end of file From b76394bef210adb4a28e7929c077de5ff399b7c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 10:37:19 +0200 Subject: [PATCH 11/41] AddFilter: refactor to use fields instead of DataView --- packages/edit-site/src/components/dataviews/add-filter.js | 8 +++----- packages/edit-site/src/components/dataviews/dataviews.js | 4 ++-- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 04663095968bc2..32ef463c8c392c 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -16,10 +16,8 @@ import { unlock } from '../../lock-unlock'; const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); -export default function AddFilter( { dataView, filters, onChangeFilters } ) { - const filterableFields = dataView - .getAllColumns() - .filter( ( column ) => column.columnDef.renderFilter ); +export default function AddFilter( { fields, filters, onChangeFilters } ) { + const filterableFields = fields.filter( ( field ) => field.renderFilter ); if ( ! filterableFields.length ) { return null; } @@ -61,7 +59,7 @@ export default function AddFilter( { dataView, filters, onChangeFilters } ) { } ); } } > - { field.columnDef.header } + { field.header } ); } ) } diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 1ecdf2d0350f87..9a6cf2743ee1c4 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -33,11 +33,11 @@ export default function DataViews( { - + Date: Fri, 13 Oct 2023 11:24:50 +0200 Subject: [PATCH 12/41] Generate the set filter based on field props --- .../src/components/dataviews/add-filter.js | 8 +- .../src/components/dataviews/dataviews.js | 8 +- .../src/components/dataviews/field-filters.js | 105 +++++++++++++++--- .../src/components/page-pages/index.js | 60 +--------- 4 files changed, 104 insertions(+), 77 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 32ef463c8c392c..8287c249fed083 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -16,8 +16,10 @@ import { unlock } from '../../lock-unlock'; const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); -export default function AddFilter( { fields, filters, onChangeFilters } ) { - const filterableFields = fields.filter( ( field ) => field.renderFilter ); +export default function AddFilter( { fields, filters, onChangeView } ) { + const filterableFields = fields.filter( + ( field ) => field.enableFiltering + ); if ( ! filterableFields.length ) { return null; } @@ -43,7 +45,7 @@ export default function AddFilter( { fields, filters, onChangeFilters } ) { role="menuitemcheckbox" onSelect={ ( event ) => { event.preventDefault(); - onChangeFilters( ( currentView ) => { + onChangeView( ( currentView ) => { if ( filters.hasOwnProperty( field.id ) ) { delete currentView.filters[ field.id ]; return { ...currentView }; diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 9a6cf2743ee1c4..30f299dbddecd4 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -35,9 +35,13 @@ export default function DataViews( { + - { - const fieldWithFilter = fields - .find( - ( field ) => - field.renderFilter && - field.id === key - ); - if (!fieldWithFilter) { - return null; - } +/** + * WordPress dependencies + */ +import { + privateApis as componentsPrivateApis, + Button, + Icon, +} from '@wordpress/components'; +import { chevronDown, check } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; - return fieldWithFilter.renderFilter(); - }) - ); -} \ No newline at end of file +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); + +function renderFilter( { field, view, onChangeView } ) { + // TODO: implement more filter types. + if ( field.type !== 'set' ) { + return null; + } + + if ( ! field.setList ) { + return null; + } + + return ( + + { field.header } + + + } + > + { [ + { id: undefined, name: __( 'All' ) }, // Should providing the nullable state be the field responsibility? + ...field.setList, + ].map( ( element ) => { + return ( + + ) + } + role="menuitemcheckbox" + onSelect={ () => { + onChangeView( ( currentView ) => { + return { + ...currentView, + filters: { + ...currentView.filters, + [ field.id ]: element.id, + }, + }; + } ); + } } + > + { element.name } + + ); + } ) } + + ); +} + +export default function FieldFilters( { view, fields, onChangeView } ) { + return Object.keys( view.filters ).map( ( key ) => { + const fieldWithFilter = fields.find( + ( field ) => + field.enableFiltering && + field.type && // We could consider lift off this restriction and having a fallback filter (search text, for example). + field.id === key + ); + if ( ! fieldWithFilter ) { + return null; + } + + return renderFilter( { field: fieldWithFilter, view, onChangeView } ); + } ); +} diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 29077a656041de..2d3537d587d7c7 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -2,13 +2,9 @@ * WordPress dependencies */ import { - privateApis as componentsPrivateApis, __experimentalHeading as Heading, __experimentalVStack as VStack, - Button, - Icon, } from '@wordpress/components'; -import { chevronDown, check } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { useEntityRecords } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; @@ -23,9 +19,6 @@ import Link from '../routes/link'; import { DataViews } from '../dataviews'; import useTrashPostAction from '../actions/trash-post'; import Media from '../media'; -import { unlock } from '../../lock-unlock'; - -const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); const EMPTY_ARRAY = []; const EMPTY_OBJECT = {}; @@ -155,54 +148,9 @@ export default function PagePages() { ); }, - renderFilter: () => { - if ( ! authors ) { - return null; - } - - return ( - - { __( 'Author' ) } - - - } - > - { [ - { id: undefined, name: __( 'All' ) }, - ...authors, - ].map( ( author ) => { - return ( - - ) - } - role="menuitemcheckbox" - onSelect={ () => { - setView( ( currentView ) => { - return { - ...currentView, - filters: { - ...currentView.filters, - author: author.id, - }, - }; - } ); - } } - > - { author.name } - - ); - } ) } - - ); - }, + type: 'set', + setList: authors, + enableFiltering: true, }, { header: __( 'Status' ), @@ -225,7 +173,7 @@ export default function PagePages() { enableSorting: false, }, ], - [ postStatuses, authors, view ] + [ postStatuses, authors ] ); const trashPostAction = useTrashPostAction(); From 32e06e409f73e0f2b59db886c7cce242f53070be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 11:33:20 +0200 Subject: [PATCH 13/41] Check for element structure: id, name --- .../src/components/dataviews/field-filters.js | 10 +++++++++- packages/edit-site/src/components/page-pages/index.js | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/field-filters.js b/packages/edit-site/src/components/dataviews/field-filters.js index f38f7643064618..6e4a9fbc058eba 100644 --- a/packages/edit-site/src/components/dataviews/field-filters.js +++ b/packages/edit-site/src/components/dataviews/field-filters.js @@ -37,9 +37,17 @@ function renderFilter( { field, view, onChangeView } ) { } > { [ - { id: undefined, name: __( 'All' ) }, // Should providing the nullable state be the field responsibility? + // Should providing the nullable state be the field responsibility? + { id: undefined, name: __( 'All' ) }, ...field.setList, ].map( ( element ) => { + if ( + ! element.hasOwnProperty( 'id' ) || + ! element.hasOwnProperty( 'name' ) + ) { + return null; + } + return ( Date: Fri, 13 Oct 2023 12:24:37 +0200 Subject: [PATCH 14/41] Bootstrap filter by column --- .../edit-site/src/components/dataviews/add-filter.js | 2 +- .../src/components/dataviews/field-filters.js | 2 +- .../edit-site/src/components/dataviews/view-list.js | 10 +++++++++- packages/edit-site/src/components/page-pages/index.js | 3 ++- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 8287c249fed083..eaa6939c53f53d 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -18,7 +18,7 @@ const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); export default function AddFilter( { fields, filters, onChangeView } ) { const filterableFields = fields.filter( - ( field ) => field.enableFiltering + ( field ) => field.enableColumnFilter ); if ( ! filterableFields.length ) { return null; diff --git a/packages/edit-site/src/components/dataviews/field-filters.js b/packages/edit-site/src/components/dataviews/field-filters.js index 6e4a9fbc058eba..707f05f39564e1 100644 --- a/packages/edit-site/src/components/dataviews/field-filters.js +++ b/packages/edit-site/src/components/dataviews/field-filters.js @@ -85,7 +85,7 @@ export default function FieldFilters( { view, fields, onChangeView } ) { return Object.keys( view.filters ).map( ( key ) => { const fieldWithFilter = fields.find( ( field ) => - field.enableFiltering && + field.enableColumnFilter && field.type && // We could consider lift off this restriction and having a fallback filter (search text, for example). field.id === key ); diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index d675720c86f83f..7dcc66b936a4d3 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -21,6 +21,8 @@ import { check, arrowUp, arrowDown, + moreVertical, + search, } from '@wordpress/icons'; import { Button, @@ -41,6 +43,8 @@ const { DropdownMenuGroupV2, DropdownMenuItemV2, DropdownMenuSeparatorV2, + DropdownSubMenuV2, + DropdownSubMenuTriggerV2, } = unlock( componentsPrivateApis ); const EMPTY_OBJECT = {}; @@ -59,7 +63,11 @@ function HeaderMenu( { dataView, header } ) { ); const isSortable = !! header.column.getCanSort(); const isHidable = !! header.column.getCanHide(); - if ( ! isSortable && ! isHidable ) { + const isFilterable = !! header.column.getCanFilter(); + const isFilterableBySetList = + header.column.columnDef.type === 'set' && + header.column.columnDef.setList; + if ( ! isSortable && ! isHidable && ! isFilterable ) { return text; } const sortedDirection = header.column.getIsSorted(); diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 4df30b76eefe6c..2814935c7d2978 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -108,6 +108,7 @@ export default function PagePages() { /> ) : null, enableSorting: false, + enableColumnFilter: false, }, { header: __( 'Title' ), @@ -150,7 +151,7 @@ export default function PagePages() { }, type: 'set', setList: authors, // Elements should have id and name as properties. They should be unique. - enableFiltering: true, + enableColumnFilter: true, }, { header: __( 'Status' ), From 6fb27a1f96cd7daa1a37dfea0f7c4a0dc382b9de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 12:34:34 +0200 Subject: [PATCH 15/41] Show elements on the list --- packages/edit-site/src/components/dataviews/view-list.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index 7dcc66b936a4d3..d4dcd19a0b1630 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -66,7 +66,8 @@ function HeaderMenu( { dataView, header } ) { const isFilterable = !! header.column.getCanFilter(); const isFilterableBySetList = header.column.columnDef.type === 'set' && - header.column.columnDef.setList; + header.column.columnDef.setList && + header.column.columnDef.setList.length > 0; if ( ! isSortable && ! isHidable && ! isFilterable ) { return text; } From 4804e94665923cee49261bca41f6244d2f7dcb9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:22:02 +0200 Subject: [PATCH 16/41] Set filter working on columns --- .../src/components/dataviews/view-list.js | 42 +++++++++++++++++++ .../src/components/page-pages/index.js | 3 +- 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index d4dcd19a0b1630..c9602165994750 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -210,6 +210,16 @@ function ViewList( { ] : [], globalFilter: view.search, + columnFilters: view.filters + ? [ + ...Object.entries( view.filters ).map( + ( [ id, value ] ) => ( { + id, + value, + } ) + ), + ] + : [], pagination: { pageIndex: view.page, pageSize: view.perPage, @@ -270,6 +280,38 @@ function ViewList( { onGlobalFilterChange: ( value ) => { onChangeView( { ...view, search: value, page: 0 } ); }, + onColumnFiltersChange: ( filteringUpdater ) => { + onChangeView( ( currentView ) => { + const filters = + typeof filteringUpdater === 'function' + ? filteringUpdater( + currentView.filters + ? [ + ...Object.entries( + currentView.filters + ).map( ( [ id, value ] ) => ( { + id, + value, + } ) ), + ] + : [] + ) + : filteringUpdater; + + return { + ...currentView, + filters: { + ...filters.reduce( + ( accumulator, { id, value } ) => ( { + ...accumulator, + [ id ]: value, + } ), + {} + ), + }, + }; + } ); + }, onPaginationChange: ( paginationUpdater ) => { onChangeView( ( currentView ) => { const { pageIndex, pageSize } = paginationUpdater( { diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 2814935c7d2978..98690e52a9d87c 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -108,7 +108,6 @@ export default function PagePages() { /> ) : null, enableSorting: false, - enableColumnFilter: false, }, { header: __( 'Title' ), @@ -151,7 +150,7 @@ export default function PagePages() { }, type: 'set', setList: authors, // Elements should have id and name as properties. They should be unique. - enableColumnFilter: true, + enableColumnFiltering: true, }, { header: __( 'Status' ), From 1e187f4af0951375bbc41d5ee13b8cf6ff7f45e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:31:07 +0200 Subject: [PATCH 17/41] Remove old exploration --- .../src/components/dataviews/add-filter.js | 70 ------------- .../src/components/dataviews/dataviews.js | 12 --- .../src/components/dataviews/field-filters.js | 98 ------------------- 3 files changed, 180 deletions(-) delete mode 100644 packages/edit-site/src/components/dataviews/add-filter.js delete mode 100644 packages/edit-site/src/components/dataviews/field-filters.js diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js deleted file mode 100644 index eaa6939c53f53d..00000000000000 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ /dev/null @@ -1,70 +0,0 @@ -/** - * WordPress dependencies - */ -import { - privateApis as componentsPrivateApis, - Icon, - Button, -} from '@wordpress/components'; -import { chevronDown, check } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; - -const { DropdownMenuV2, DropdownMenuItemV2 } = unlock( componentsPrivateApis ); - -export default function AddFilter( { fields, filters, onChangeView } ) { - const filterableFields = fields.filter( - ( field ) => field.enableColumnFilter - ); - if ( ! filterableFields.length ) { - return null; - } - - return ( - - { __( 'Filters' ) } - - - } - > - { filterableFields.map( ( field ) => { - return ( - - ) - } - role="menuitemcheckbox" - onSelect={ ( event ) => { - event.preventDefault(); - onChangeView( ( currentView ) => { - if ( filters.hasOwnProperty( field.id ) ) { - delete currentView.filters[ field.id ]; - return { ...currentView }; - } - - return { - ...currentView, - filters: { - ...currentView.filters, - [ field.id ]: undefined, - }, - }; - } ); - } } - > - { field.header } - - ); - } ) } - - ); -} diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 30f299dbddecd4..755ce8a2ea348d 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -14,8 +14,6 @@ import Pagination from './pagination'; import ViewActions from './view-actions'; import TextFilter from './text-filter'; import { ViewGrid } from './view-grid'; -import AddFilter from './add-filter'; -import FieldFilters from './field-filters'; export default function DataViews( { view, @@ -32,16 +30,6 @@ export default function DataViews( { - - - { field.header } - - - } - > - { [ - // Should providing the nullable state be the field responsibility? - { id: undefined, name: __( 'All' ) }, - ...field.setList, - ].map( ( element ) => { - if ( - ! element.hasOwnProperty( 'id' ) || - ! element.hasOwnProperty( 'name' ) - ) { - return null; - } - - return ( - - ) - } - role="menuitemcheckbox" - onSelect={ () => { - onChangeView( ( currentView ) => { - return { - ...currentView, - filters: { - ...currentView.filters, - [ field.id ]: element.id, - }, - }; - } ); - } } - > - { element.name } - - ); - } ) } - - ); -} - -export default function FieldFilters( { view, fields, onChangeView } ) { - return Object.keys( view.filters ).map( ( key ) => { - const fieldWithFilter = fields.find( - ( field ) => - field.enableColumnFilter && - field.type && // We could consider lift off this restriction and having a fallback filter (search text, for example). - field.id === key - ); - if ( ! fieldWithFilter ) { - return null; - } - - return renderFilter( { field: fieldWithFilter, view, onChangeView } ); - } ); -} From 6b1b68fd778b01f4b17753cc26709922eb48ad0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:41:06 +0200 Subject: [PATCH 18/41] Clean up --- packages/edit-site/src/components/page-pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 98690e52a9d87c..7bb9f15576d9a5 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -149,7 +149,7 @@ export default function PagePages() { ); }, type: 'set', - setList: authors, // Elements should have id and name as properties. They should be unique. + setList: authors, enableColumnFiltering: true, }, { From 8a85762d39d5c1891b53f4334c22ba6cd714ad81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 16:22:31 +0200 Subject: [PATCH 19/41] Show fields filters --- .../src/components/dataviews/dataviews.js | 26 +++++++++++---- .../components/dataviews/fields-filters.js | 33 +++++++++++++++++++ 2 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 packages/edit-site/src/components/dataviews/fields-filters.js diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js index 755ce8a2ea348d..4829eeaede75ec 100644 --- a/packages/edit-site/src/components/dataviews/dataviews.js +++ b/packages/edit-site/src/components/dataviews/dataviews.js @@ -13,6 +13,7 @@ import ViewList from './view-list'; import Pagination from './pagination'; import ViewActions from './view-actions'; import TextFilter from './text-filter'; +import FieldsFilters from './fields-filters'; import { ViewGrid } from './view-grid'; export default function DataViews( { @@ -28,13 +29,24 @@ export default function DataViews( { return (
- - - + + + + + + + + { + onChangeView( ( currentView ) => { + delete currentView.filters[ label ]; + return { + ...currentView, + }; + } ); + } } + > + { label } + + ); +} + +export default function FieldsFilters( { view, onChangeView } ) { + if ( Object.keys( view.filters ).length === 0 ) { + return null; + } + + return Object.keys( view.filters ).map( ( id ) => ( + + ) ); +} From 60accfd8cfb04e964a514e02ae7ae6426528692f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 13 Oct 2023 16:57:18 +0200 Subject: [PATCH 20/41] Better style for field filter --- .../components/dataviews/fields-filters.js | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/fields-filters.js b/packages/edit-site/src/components/dataviews/fields-filters.js index 0d5a718eadacb1..5a07b01465f42e 100644 --- a/packages/edit-site/src/components/dataviews/fields-filters.js +++ b/packages/edit-site/src/components/dataviews/fields-filters.js @@ -5,20 +5,26 @@ import { closeSmall } from '@wordpress/icons'; import { Button } from '@wordpress/components'; function ActiveFilter( { label, onChangeView } ) { + // TODO. Do not reuse the components-form-token-field classes: + // either make that component public or create a new one. return ( - + + + { label } + +