From d70bfc230b6633c41d6939384560f2c2f3e2d4c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 Nov 2023 13:03:09 +0100 Subject: [PATCH 1/6] Add field type and remove filters --- packages/edit-site/src/components/page-pages/index.js | 4 ++-- 1 file changed, 2 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 c2461adc34f8d0..d6c295dc72ff0f 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -227,7 +227,7 @@ export default function PagePages() { ); }, - filters: [ 'in' ], + type: 'enumeration', elements: authors?.map( ( { id, name } ) => ( { value: id, @@ -240,7 +240,7 @@ export default function PagePages() { getValue: ( { item } ) => STATUSES.find( ( { value } ) => value === item.status ) ?.label ?? item.status, - filters: [ 'in' ], + type: 'enumeration', elements: STATUSES, enableSorting: false, }, From 9d2e6371d0e0bd8affccde8bd5f5ac26511fdc59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 Nov 2023 13:29:06 +0100 Subject: [PATCH 2/6] Update column filters --- packages/edit-site/src/components/dataviews/view-list.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index 2fec3286314231..f4e0f3b55e4212 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -68,12 +68,7 @@ function HeaderMenu( { dataView, header } ) { const sortedDirection = header.column.getIsSorted(); let filter; - if ( - header.column.columnDef.filters?.length > 0 && - header.column.columnDef.filters.some( - ( f ) => 'string' === typeof f && f === 'in' - ) - ) { + if ( header.column.columnDef.type === 'enumeration' ) { filter = { field: header.column.columnDef.id, elements: [ From f981a95f219edaa2b41e681d093deb9afaece084 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 Nov 2023 13:29:22 +0100 Subject: [PATCH 3/6] Update top-level filters --- .../edit-site/src/components/dataviews/filters.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index 9c37a7501a155d..8a5823b70add56 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -10,21 +10,22 @@ import { default as InFilter, OPERATOR_IN } from './in-filter'; import AddFilter from './add-filter'; import ResetFilters from './reset-filters'; -const VALID_OPERATORS = [ OPERATOR_IN ]; +const ENUMERATION_TYPE = 'enumeration'; export default function Filters( { fields, view, onChangeView } ) { const filters = []; fields.forEach( ( field ) => { - if ( ! field.filters ) { + if ( ! field.type ) { return; } - field.filters.forEach( ( filter ) => { - if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) { + switch ( field.type ) { + case ENUMERATION_TYPE: filters.push( { field: field.id, + operator: OPERATOR_IN, name: field.header, - operator: filter, + type: field.type, elements: [ { value: '', @@ -36,8 +37,7 @@ export default function Filters( { fields, view, onChangeView } ) { ( f ) => f.field === field.id && f.operator === filter ), } ); - } - } ); + } } ); const filterComponents = filters?.map( ( filter ) => { From ec469c9cc042990c6896abafa95538a74e7629f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 9 Nov 2023 13:29:31 +0100 Subject: [PATCH 4/6] Update docs --- packages/edit-site/src/components/dataviews/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/README.md b/packages/edit-site/src/components/dataviews/README.md index 8f1349044d6cf5..0645f22821cb9e 100644 --- a/packages/edit-site/src/components/dataviews/README.md +++ b/packages/edit-site/src/components/dataviews/README.md @@ -154,11 +154,11 @@ Example: { item.author } ); }, + type: 'enumeration', elements: [ { value: 1, label: 'Admin' } { value: 2, label: 'User' } ] - filters: [ 'in' ], enableSorting: false } ] @@ -169,7 +169,7 @@ Example: - `getValue`: function that returns the value of the field. - `render`: function that renders the field. - `elements`: the set of valid values for the field's value. -- `filters`: what filter operators are available for the user to use over this field. Only `in` available at the moment. +- `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment. - `enableSorting`: whether the data can be sorted by the given field. True by default. - `enableHiding`: whether the field can be hidden. True by default. From f1fe556fe983028c0b6b7b46d958233927f45401 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 17 Nov 2023 12:45:18 +0100 Subject: [PATCH 5/6] Update from latest changes --- .../src/components/dataviews/add-filter.js | 17 ++++++------ .../src/components/dataviews/filters.js | 27 ++++++++----------- 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 2cc0051f0f2d49..723700fae8857d 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -22,28 +22,27 @@ const { DropdownMenuItemV2, } = unlock( componentsPrivateApis ); -const VALID_OPERATORS = [ OPERATOR_IN ]; +const ENUMERATION_TYPE = 'enumeration'; // TODO: merge with the one in filters.js export default function AddFilter( { fields, view, onChangeView } ) { const filters = []; fields.forEach( ( field ) => { - if ( ! field.filters ) { + if ( ! field.type ) { return; } - field.filters.forEach( ( filter ) => { - if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) { + switch ( field.type ) { + case ENUMERATION_TYPE: filters.push( { field: field.id, name: field.header, - operator: filter, elements: field.elements || [], isVisible: view.filters.some( - ( f ) => f.field === field.id && f.operator === filter + ( f ) => + f.field === field.id && f.operator === OPERATOR_IN ), } ); - } - } ); + } } ); if ( filters.length === 0 ) { @@ -92,7 +91,7 @@ export default function AddFilter( { fields, view, onChangeView } ) { ...currentView.filters, { field: filter.field, - operator: 'in', + operator: OPERATOR_IN, value: element.value, }, ], diff --git a/packages/edit-site/src/components/dataviews/filters.js b/packages/edit-site/src/components/dataviews/filters.js index 8a5823b70add56..72ba28fd063263 100644 --- a/packages/edit-site/src/components/dataviews/filters.js +++ b/packages/edit-site/src/components/dataviews/filters.js @@ -23,9 +23,7 @@ export default function Filters( { fields, view, onChangeView } ) { case ENUMERATION_TYPE: filters.push( { field: field.id, - operator: OPERATOR_IN, name: field.header, - type: field.type, elements: [ { value: '', @@ -34,29 +32,26 @@ export default function Filters( { fields, view, onChangeView } ) { ...( field.elements || [] ), ], isVisible: view.filters.some( - ( f ) => f.field === field.id && f.operator === filter + ( f ) => + f.field === field.id && f.operator === OPERATOR_IN ), } ); } } ); - const filterComponents = filters?.map( ( filter ) => { + const filterComponents = filters.map( ( filter ) => { if ( ! filter.isVisible ) { return null; } - if ( OPERATOR_IN === filter.operator ) { - return ( - - ); - } - - return null; + return ( + + ); } ); filterComponents.push( From 8ed8ff8c1365ab8e02b7ee861c5c7bc0d9bc048b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Fri, 17 Nov 2023 12:48:13 +0100 Subject: [PATCH 6/6] Update comment for constants --- .../edit-site/src/components/dataviews/add-filter.js | 3 ++- .../edit-site/src/components/dataviews/in-filter.js | 1 + .../edit-site/src/components/dataviews/view-list.js | 10 ++++++++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js index 723700fae8857d..374a90eab9df03 100644 --- a/packages/edit-site/src/components/dataviews/add-filter.js +++ b/packages/edit-site/src/components/dataviews/add-filter.js @@ -22,7 +22,8 @@ const { DropdownMenuItemV2, } = unlock( componentsPrivateApis ); -const ENUMERATION_TYPE = 'enumeration'; // TODO: merge with the one in filters.js +// TODO: find a place where these constants can be shared across components. +const ENUMERATION_TYPE = 'enumeration'; export default function AddFilter( { fields, view, onChangeView } ) { const filters = []; diff --git a/packages/edit-site/src/components/dataviews/in-filter.js b/packages/edit-site/src/components/dataviews/in-filter.js index 4154e0576101c1..cb76bab0f870a9 100644 --- a/packages/edit-site/src/components/dataviews/in-filter.js +++ b/packages/edit-site/src/components/dataviews/in-filter.js @@ -7,6 +7,7 @@ import { } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; +// TODO: find a place where these constants can be shared across components. export const OPERATOR_IN = 'in'; export default ( { filter, view, onChangeView } ) => { diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js index f4e0f3b55e4212..fc8b4075025792 100644 --- a/packages/edit-site/src/components/dataviews/view-list.js +++ b/packages/edit-site/src/components/dataviews/view-list.js @@ -52,6 +52,11 @@ const sortingItemsInfo = { desc: { icon: arrowDown, label: __( 'Sort descending' ) }, }; const sortIcons = { asc: chevronUp, desc: chevronDown }; + +// TODO: find a place where these constants can be shared across components. +const ENUMERATION_TYPE = 'enumeration'; +const OPERATOR_IN = 'in'; + function HeaderMenu( { dataView, header } ) { if ( header.isPlaceholder ) { return null; @@ -68,7 +73,7 @@ function HeaderMenu( { dataView, header } ) { const sortedDirection = header.column.getIsSorted(); let filter; - if ( header.column.columnDef.type === 'enumeration' ) { + if ( header.column.columnDef.type === ENUMERATION_TYPE ) { filter = { field: header.column.columnDef.id, elements: [ @@ -197,7 +202,8 @@ function HeaderMenu( { dataView, header } ) { return ( field !== filter.field || - operator !== 'in' + operator !== + OPERATOR_IN ); } );