From 5bd6ea3762f2f3bce116aeacd09afca7d9a6d920 Mon Sep 17 00:00:00 2001 From: Riad Benguella <benguella@gmail.com> Date: Tue, 12 Mar 2024 12:44:54 +0100 Subject: [PATCH] Dataviews: Improve story (#59773) Co-authored-by: ntsekouras <ntsekouras@outlook.com> --- packages/dataviews/src/stories/fixtures.js | 13 +++++- packages/dataviews/src/stories/index.story.js | 46 ++++++++++++++++++- packages/dataviews/src/style.scss | 2 +- 3 files changed, 57 insertions(+), 4 deletions(-) diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js index 6b9073e2cc78d..d9413cef89db5 100644 --- a/packages/dataviews/src/stories/fixtures.js +++ b/packages/dataviews/src/stories/fixtures.js @@ -20,66 +20,77 @@ export const data = [ title: 'Apollo', description: 'Apollo description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Not a planet', }, { id: 2, title: 'Space', description: 'Space description', image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg', + type: 'Not a planet', }, { id: 3, title: 'NASA', description: 'NASA photo', image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg', + type: 'Not a planet', }, { id: 4, title: 'Neptune', description: 'Neptune description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Ice giant', }, { id: 5, title: 'Mercury', description: 'Mercury description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Terrestrial', }, { id: 6, title: 'Venus', description: 'Venus description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Terrestrial', }, { id: 7, title: 'Earth', description: 'Earth description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Terrestrial', }, { id: 8, title: 'Mars', description: 'Mars description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Terrestrial', }, { id: 9, title: 'Jupiter', description: 'Jupiter description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Gas giant', }, { id: 10, title: 'Saturn', description: 'Saturn description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Gas giant', }, { id: 11, title: 'Uranus', description: 'Uranus description', image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg', + type: 'Ice giant', }, ]; @@ -88,7 +99,7 @@ export const DEFAULT_VIEW = { search: '', page: 1, perPage: 10, - hiddenFields: [ 'image' ], + hiddenFields: [ 'image', 'type' ], layout: {}, filters: [], }; diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/stories/index.story.js index e7fbfbbe554b0..042547af84b04 100644 --- a/packages/dataviews/src/stories/index.story.js +++ b/packages/dataviews/src/stories/index.story.js @@ -8,10 +8,15 @@ import { useState, useMemo, useCallback } from '@wordpress/element'; */ import { DataViews } from '../index'; import { DEFAULT_VIEW, actions, data } from './fixtures'; -import { LAYOUT_GRID, LAYOUT_TABLE } from '../constants'; +import { + LAYOUT_GRID, + LAYOUT_TABLE, + OPERATOR_IS_NONE, + OPERATOR_IS_ANY, +} from '../constants'; const meta = { - title: 'DataViews (Experimental)/DataViews', + title: 'DataViews/DataViews', component: DataViews, }; export default meta; @@ -49,6 +54,20 @@ const fields = [ maxWidth: 400, enableHiding: false, }, + { + header: 'Type', + id: 'type', + getValue: ( { item } ) => item.type, + maxWidth: 400, + enableHiding: false, + type: 'enumeration', + elements: [ + { value: 'Not a planet', label: 'Not a planet' }, + { value: 'Ice giant', label: 'Ice giant' }, + { value: 'Terrestrial', label: 'Terrestrial' }, + { value: 'Gas giant', label: 'Gas giant' }, + ], + }, { header: 'Description', id: 'description', @@ -72,6 +91,29 @@ export const Default = ( props ) => { ].some( ( field ) => field.includes( normalizedSearch ) ); } ); } + + if ( view.filters.length > 0 ) { + view.filters.forEach( ( filter ) => { + if ( + filter.field === 'type' && + filter.operator === OPERATOR_IS_ANY && + filter?.value?.length > 0 + ) { + filteredData = filteredData.filter( ( item ) => { + return filter.value.includes( item.type ); + } ); + } else if ( + filter.field === 'type' && + filter.operator === OPERATOR_IS_NONE && + filter?.value?.length > 0 + ) { + filteredData = filteredData.filter( ( item ) => { + return ! filter.value.includes( item.type ); + } ); + } + } ); + } + // Handle sorting. if ( view.sort ) { const stringSortingFields = [ 'title' ]; diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss index 600529479c083..cb57566300b97 100644 --- a/packages/dataviews/src/style.scss +++ b/packages/dataviews/src/style.scss @@ -1,5 +1,4 @@ .dataviews-wrapper { - width: 100%; height: 100%; overflow: auto; box-sizing: border-box; @@ -7,6 +6,7 @@ } .dataviews-filters__view-actions { + box-sizing: border-box; padding: $grid-unit-15 $grid-unit-40 0; margin-bottom: $grid-unit-15; flex-shrink: 0;