Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataViews: make filters footprint more condensed #56983

Merged
merged 21 commits into from
Dec 13, 2023
Merged

DataViews: make filters footprint more condensed #56983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2e8549a
AddFilter: update position
oandregal Dec 12, 2023
a449282
AddFilter: use icon
oandregal Dec 12, 2023
eb1cf7c
AddFilter: always visible and list all filters
oandregal Dec 12, 2023
fa6eb1a
AddFilter: update filter value for existing filters
oandregal Dec 12, 2023
d64084f
AddFilter: show which element is checked
oandregal Dec 12, 2023
8237008
AddFilter: drop fields in favor of filters prop
oandregal Dec 12, 2023
f24b029
AddFilter: set operator & value properly
oandregal Dec 12, 2023
302519a
AddFilter: add conditions if filter has support
oandregal Dec 12, 2023
822bcb0
AddFilter: show active element and operator
oandregal Dec 12, 2023
ff7c32b
AddFilter: add item to reset filters
oandregal Dec 12, 2023
8f27095
Use icon prop so button is 32x32
oandregal Dec 12, 2023
77d7ec4
Prevent the menu from being closed when clicking
oandregal Dec 12, 2023
65e0f02
Allow resetting the own filter
oandregal Dec 12, 2023
1a8c1c1
Update e2e tests
oandregal Dec 12, 2023
dd0aafb
Set width for page pages when list view
oandregal Dec 13, 2023
5847082
Hide reset and filter summaries in list view
oandregal Dec 13, 2023
93b2bc3
Add a filter counter in the list view
oandregal Dec 13, 2023
9dc6977
Count styling
jameskoster Dec 13, 2023
975c2ae
Search input
jameskoster Dec 13, 2023
cd2b253
Hide counter if 0
oandregal Dec 13, 2023
8482576
Filter counter: only count filters that actually have a value applied
oandregal Dec 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
328 changes: 263 additions & 65 deletions packages/dataviews/src/add-filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,101 +6,299 @@ import {
Button,
Icon,
} from '@wordpress/components';
import { chevronRightSmall, plus } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { chevronRightSmall, funnel, check } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { Children, Fragment } from '@wordpress/element';

/**
* Internal dependencies
*/
import { unlock } from './lock-unlock';
import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
import { LAYOUT_LIST, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';

const {
DropdownMenuV2: DropdownMenu,
DropdownMenuGroupV2: DropdownMenuGroup,
DropdownSubMenuV2: DropdownSubMenu,
DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
DropdownMenuItemV2: DropdownMenuItem,
DropdownMenuSeparatorV2: DropdownMenuSeparator,
} = unlock( componentsPrivateApis );

export default function AddFilter( { fields, view, onChangeView } ) {
const filters = [];
fields.forEach( ( field ) => {
if ( ! field.type ) {
return;
}

switch ( field.type ) {
case ENUMERATION_TYPE:
filters.push( {
field: field.id,
name: field.header,
elements: field.elements || [],
isVisible: view.filters.some(
( f ) => f.field === field.id
),
} );
}
} );
function WithSeparators( { children } ) {
return Children.toArray( children )
.filter( Boolean )
.map( ( child, i ) => (
<Fragment key={ i }>
{ i > 0 && <DropdownMenuSeparator /> }
{ child }
</Fragment>
) );
}

export default function AddFilter( { filters, view, onChangeView } ) {
if ( filters.length === 0 ) {
return null;
}

const filterCount = view.filters.reduce( ( acc, filter ) => {
if ( filter.value !== undefined ) {
return acc + 1;
}
return acc;
}, 0 );

return (
<DropdownMenu
label={ __( 'Add filter' ) }
label={ __( 'Filters' ) }
trigger={
<Button
disabled={ filters.length === view.filters?.length }
__experimentalIsFocusable
label={ __( 'Filters' ) }
variant="tertiary"
size="compact"
icon={ funnel }
className="dataviews-filters-button"
>
<Icon icon={ plus } style={ { flexShrink: 0 } } />
{ __( 'Add filter' ) }
{ view.type === LAYOUT_LIST && filterCount > 0 ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like it's better as a prop like showFilterCount.

<span className="dataviews-filters-count">
{ filterCount }
</span>
) : null }
</Button>
}
>
{ filters.map( ( filter ) => {
if ( filter.isVisible ) {
return null;
}

return (
<DropdownSubMenu
key={ filter.field }
trigger={
<DropdownSubMenuTrigger
suffix={ <Icon icon={ chevronRightSmall } /> }
<WithSeparators>
<DropdownMenuGroup>
{ filters.map( ( filter ) => {
const filterInView = view.filters.find(
( f ) => f.field === filter.field
);
const activeElement = filter.elements.find(
( element ) => element.value === filterInView?.value
);
const activeOperator =
filterInView?.operator || filter.operators[ 0 ];
return (
<DropdownSubMenu
key={ filter.field }
trigger={
<DropdownSubMenuTrigger
suffix={
<>
{ activeElement &&
activeOperator ===
OPERATOR_IN &&
__( 'Is' ) }
{ activeElement &&
activeOperator ===
OPERATOR_NOT_IN &&
__( 'Is not' ) }
{ activeElement && ' ' }
{ activeElement?.label }
<Icon
icon={ chevronRightSmall }
/>
</>
}
>
{ filter.name }
</DropdownSubMenuTrigger>
}
>
{ filter.name }
</DropdownSubMenuTrigger>
}
>
{ filter.elements.map( ( element ) => (
<DropdownMenuItem
key={ element.value }
onSelect={ () => {
onChangeView( ( currentView ) => ( {
...currentView,
page: 1,
filters: [
...currentView.filters,
{
field: filter.field,
operator: OPERATOR_IN,
value: element.value,
},
],
} ) );
} }
>
{ element.label }
</DropdownMenuItem>
) ) }
</DropdownSubMenu>
);
} ) }
<WithSeparators>
<DropdownMenuGroup>
{ filter.elements.map( ( element ) => (
<DropdownMenuItem
key={ element.value }
role="menuitemradio"
aria-checked={
activeElement?.value ===
element.value
}
prefix={
activeElement?.value ===
element.value && (
<Icon icon={ check } />
)
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView(
( currentView ) => ( {
...currentView,
page: 1,
filters: [
...currentView.filters.filter(
( f ) =>
f.field !==
filter.field
),
{
field: filter.field,
operator:
activeOperator,
value:
activeElement?.value ===
element.value
? undefined
: element.value,
},
],
} )
);
} }
>
{ element.label }
</DropdownMenuItem>
) ) }
</DropdownMenuGroup>
{ filter.operators.length > 1 && (
<DropdownSubMenu
trigger={
<DropdownSubMenuTrigger
suffix={
<>
{ activeOperator ===
OPERATOR_IN &&
__( 'Is' ) }
{ activeOperator ===
OPERATOR_NOT_IN &&
__( 'Is not' ) }
<Icon
icon={
chevronRightSmall
}
/>{ ' ' }
</>
}
>
{ __( 'Conditions' ) }
</DropdownSubMenuTrigger>
}
>
<DropdownMenuItem
key="in-filter"
role="menuitemradio"
aria-checked={
activeOperator ===
OPERATOR_IN
}
prefix={
activeOperator ===
OPERATOR_IN && (
<Icon icon={ check } />
)
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView(
( currentView ) => ( {
...currentView,
page: 1,
filters: [
...view.filters.filter(
( f ) =>
f.field !==
filter.field
),
{
field: filter.field,
operator:
OPERATOR_IN,
value: filterInView?.value,
},
],
} )
);
} }
>
{ __( 'Is' ) }
</DropdownMenuItem>
<DropdownMenuItem
key="not-in-filter"
role="menuitemradio"
aria-checked={
activeOperator ===
OPERATOR_NOT_IN
}
prefix={
activeOperator ===
OPERATOR_NOT_IN && (
<Icon icon={ check } />
)
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView(
( currentView ) => ( {
...currentView,
page: 1,
filters: [
...view.filters.filter(
( f ) =>
f.field !==
filter.field
),
{
field: filter.field,
operator:
OPERATOR_NOT_IN,
value: filterInView?.value,
},
],
} )
);
} }
>
{ __( 'Is not' ) }
</DropdownMenuItem>
</DropdownSubMenu>
) }
<DropdownMenuItem
key={ 'reset-filter-' + filter.name }
disabled={ ! activeElement }
onSelect={ ( event ) => {
event.preventDefault();
onChangeView( ( currentView ) => ( {
...currentView,
page: 1,
filters:
currentView.filters.filter(
( f ) =>
f.field !==
filter.field
),
} ) );
} }
>
{ sprintf(
/* translators: 1: Filter name. e.g.: "Reset Author". */
__( 'Reset %1$s' ),
filter.name.toLowerCase()
) }
</DropdownMenuItem>
</WithSeparators>
</DropdownSubMenu>
);
} ) }
</DropdownMenuGroup>
<DropdownMenuItem
disabled={
view.search === '' && view.filters?.length === 0
}
onSelect={ ( event ) => {
event.preventDefault();
onChangeView( ( currentView ) => ( {
...currentView,
page: 1,
filters: [],
} ) );
} }
>
{ __( 'Reset filters' ) }
</DropdownMenuItem>
</WithSeparators>
</DropdownMenu>
);
}
6 changes: 5 additions & 1 deletion packages/dataviews/src/filter-summary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Children, Fragment } from '@wordpress/element';
/**
* Internal dependencies
*/
import { OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
import { OPERATOR_IN, OPERATOR_NOT_IN, LAYOUT_LIST } from './constants';
import { unlock } from './lock-unlock';

const {
Expand Down Expand Up @@ -73,6 +73,10 @@ function WithSeparators( { children } ) {
}

export default function FilterSummary( { filter, view, onChangeView } ) {
if ( view.type === LAYOUT_LIST ) {
Copy link
Contributor

@ntsekouras ntsekouras Dec 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar with the above comment. it feels to me we should not make such explicit checks. Maybe this are kind of a config of a layout(showFilterSummary, etc..)? 🤔 This also applies to resetFilter.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you suggest making it a prop, are you thinking of lifting it up all the way to the DataViews component for consumers to configure?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if it's what you were looking for, but since you mentioned it, I revisited this code and prepared a follow-up to lift the visibility control to the parent #57056

return null;
}

const filterInView = view.filters.find( ( f ) => f.field === filter.field );
const activeElement = filter.elements.find(
( element ) => element.value === filterInView?.value
Expand Down
Loading
Loading