fix(filters): wrap badges + clear/disable filters on dashboard switch…

… and edit mode (#281) * fix(filters): dimension items selection (#278) Always set the filter items by replacing the existing one. The logic depends on the component where the selection is happening (via checkboxes, selects, ItemSelector...), the components know how to make the list of selected items. (cherry picked from commit 8344c4a) * fix(filters): wrap badges + clear/disable filters on dashboard switch and edit mode (#280) Remove filters when switching dashboard Filters are not removed when the same dashboard is (re)selected. Also disable filters when switching to edit mode and enable them again when returning to view mode. Wrap filter badges instead of text in them. (cherry picked from commit ad3e3c3)
dhis2 · Apr 15, 2019 · 1316aa5 · 1316aa5
1 parent df3d80f
commit 1316aa5
Show file tree

Hide file tree

Showing 14 changed files with 183 additions and 205 deletions.
diff --git a/package.json b/package.json
@@ -6,20 +6,20 @@
     "license": "BSD-3-Clause",
     "dependencies": {
         "@dhis2/d2-i18n": "^1.0.4",
-        "@dhis2/d2-ui-analytics": "0.0.4",
+        "@dhis2/d2-ui-analytics": "^0.0.9",
         "@dhis2/d2-ui-core": "^5.2.9",
         "@dhis2/d2-ui-interpretations": "^5.2.10",
         "@dhis2/d2-ui-mentions-wrapper": "^5.2.9",
         "@dhis2/d2-ui-rich-text": "^5.3.0",
         "@dhis2/d2-ui-sharing-dialog": "^5.2.9",
         "@dhis2/d2-ui-translation-dialog": "^5.2.9",
+        "@dhis2/data-visualizer-plugin": "^32.0.3",
         "@dhis2/ui": "1.0.0-beta.15",
         "@dhis2/ui-core": "^1.1.3",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^3.0.2",
         "d2": "^31.6.0",
         "d2-utilizr": "^0.2.16",
-        "data-visualizer-plugin": "github:d2-ci/data-visualizer-plugin",
         "i18next": "^15.0.6",
         "lodash": "^4.17.11",
         "material-design-icons": "^3.0.1",

diff --git a/src/actions/dashboards.js b/src/actions/dashboards.js
@@ -12,6 +12,11 @@ import {
 } from '../reducers/dashboards';
 import { sGetUserUsername } from '../reducers/user';
 import { tSetSelectedDashboardById, acSetSelectedId } from './selected';
+import { sGetSelectedId } from '../reducers/selected';
+import { sGetIsEditing } from '../reducers/editDashboard';
+import { sGetEditItemFiltersRoot } from '../reducers/editItemFilters';
+import { acSetItemFilters, acClearItemFilters } from './itemFilters';
+import { acClearEditItemFilters } from './editItemFilters';
 import { acClearEditDashboard } from './editDashboard';
 import {
     apiFetchDashboards,
@@ -82,6 +87,20 @@ export const tSelectDashboard = id => async (dispatch, getState) => {
 
         if (dashboardToSelect) {
             dispatch(tSetSelectedDashboardById(dashboardToSelect.id));
+
+            if (dashboardToSelect.id === sGetSelectedId(state)) {
+                if (sGetIsEditing(state)) {
+                    // disable filters when switching to edit mode
+                    dispatch(acClearItemFilters());
+                } else {
+                    // enable filters when switching to view mode
+                    dispatch(acSetItemFilters(sGetEditItemFiltersRoot(state)));
+                }
+            } else {
+                // clear filters when switching dashboard
+                dispatch(acClearEditItemFilters());
+                dispatch(acClearItemFilters());
+            }
         } else {
             dispatch(acSetSelectedId(false));
         }

diff --git a/src/actions/editItemFilters.js b/src/actions/editItemFilters.js
@@ -1,6 +1,7 @@
 import {
     REMOVE_EDIT_ITEM_FILTER,
     SET_EDIT_ITEM_FILTERS,
+    CLEAR_EDIT_ITEM_FILTERS,
 } from '../reducers/editItemFilters';
 
 // actions
@@ -10,6 +11,10 @@ export const acRemoveEditItemFilter = id => ({
     id,
 });
 
+export const acClearEditItemFilters = () => ({
+    type: CLEAR_EDIT_ITEM_FILTERS,
+});
+
 export const acSetEditItemFilters = filters => ({
     type: SET_EDIT_ITEM_FILTERS,
     filters,

diff --git a/src/actions/itemFilters.js b/src/actions/itemFilters.js
@@ -2,6 +2,7 @@ import {
     ADD_ITEM_FILTER,
     REMOVE_ITEM_FILTER,
     SET_ITEM_FILTERS,
+    CLEAR_ITEM_FILTERS,
 } from '../reducers/itemFilters';
 
 export const FILTER_ORG_UNIT = 'ou';
@@ -18,6 +19,10 @@ export const acRemoveItemFilter = id => ({
     id,
 });
 
+export const acClearItemFilters = () => ({
+    type: CLEAR_ITEM_FILTERS,
+});
+
 export const acSetItemFilters = filters => ({
     type: SET_ITEM_FILTERS,
     filters,

diff --git a/src/components/FilterBar/FilterBadge.js b/src/components/FilterBar/FilterBadge.js
@@ -7,7 +7,7 @@ import { colors } from '../../modules/colors';
 
 const styles = {
     badgeContainer: {
-        margin: '0 4px',
+        margin: '2px',
         padding: '0 16px',
         borderRadius: '4px',
         color: colors.white,
@@ -19,6 +19,7 @@ const styles = {
     badge: {
         fontSize: '13px',
         cursor: 'pointer',
+        whiteSpace: 'nowrap',
     },
     badgeRemove: {
         fontSize: '12px',

diff --git a/src/components/FilterBar/FilterBar.js b/src/components/FilterBar/FilterBar.js
@@ -19,6 +19,7 @@ const styles = {
         padding: '8px 0',
         display: 'flex',
         justifyContent: 'center',
+        flexWrap: 'wrap',
     },
 };
 

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import LaunchIcon from '@material-ui/icons/Launch';
-import ChartPlugin from 'data-visualizer-plugin';
+import ChartPlugin from '@dhis2/data-visualizer-plugin';
 
 import i18n from '@dhis2/d2-i18n';
 import uniqueId from 'lodash/uniqueId';

diff --git a/src/components/Item/VisualizationItem/__tests__/Item.spec.js b/src/components/Item/VisualizationItem/__tests__/Item.spec.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ChartPlugin from 'data-visualizer-plugin';
+import ChartPlugin from '@dhis2/data-visualizer-plugin';
 import { CHART, REPORT_TABLE } from '../../../../modules/itemTypes';
 import { Item } from '../Item';
 import DefaultPlugin from '../DefaultPlugin';
 
-jest.mock('data-visualizer-plugin', () => () => <div />);
+jest.mock('@dhis2/data-visualizer-plugin', () => () => <div />);
 jest.mock('../DefaultPlugin', () => () => <div />);
 jest.mock('../ItemFooter', () => () => <div />);
 jest.mock('../plugin', () => {

diff --git a/src/components/ItemFilter/FilterSelector.js b/src/components/ItemFilter/FilterSelector.js
@@ -14,7 +14,7 @@ import { sGetActiveModalDimension } from '../../reducers/activeModalDimension';
 import { sGetDimensions } from '../../reducers/dimensions';
 import { sGetFiltersKeys } from '../../reducers/itemFilters';
 import { sGetEditItemFiltersRoot } from '../../reducers/editItemFilters';
-import { acAddItemFilter, acSetItemFilters } from '../../actions/itemFilters';
+import { acAddItemFilter, acRemoveItemFilter } from '../../actions/itemFilters';
 import {
     acRemoveEditItemFilter,
     acSetEditItemFilters,
@@ -55,22 +55,15 @@ class FilterSelector extends Component {
     };
 
     onSelectItems = ({ dimensionType: dimensionId, value: items }) => {
-        const oldList = this.props.selectedItems[dimensionId] || [];
-        const newList = [
-            ...oldList,
-            ...items.filter(item => !oldList.find(i => i.id === item.id)),
-        ];
-
         this.props.setEditItemFilters({
             ...this.props.selectedItems,
-            [dimensionId]: newList,
+            [dimensionId]: items,
         });
     };
 
     onDeselectItems = ({ dimensionType: dimensionId, value: idsToRemove }) => {
-        const newList = this.props.selectedItems[dimensionId].filter(
-            item => !idsToRemove.includes(item.id)
-        );
+        const oldList = this.props.selectedItems[dimensionId] || [];
+        const newList = oldList.filter(item => !idsToRemove.includes(item.id));
 
         if (newList.length) {
             this.props.setEditItemFilters({
@@ -83,8 +76,10 @@ class FilterSelector extends Component {
     };
 
     onReorderItems = ({ dimensionType: dimensionId, value: ids }) => {
-        const items = this.props.selectedItems[dimensionId];
-        const reorderedList = ids.map(id => items.find(item => item.id === id));
+        const oldList = this.props.selectedItems[dimensionId] || [];
+        const reorderedList = ids.map(id =>
+            oldList.find(item => item.id === id)
+        );
 
         this.props.setEditItemFilters({
             ...this.props.selectedItems,
@@ -93,10 +88,16 @@ class FilterSelector extends Component {
     };
 
     saveFilter = id => {
-        this.props.addItemFilter({
-            id,
-            value: [...this.props.selectedItems[id]],
-        });
+        const filterItems = this.props.selectedItems[id];
+
+        if (filterItems && filterItems.length) {
+            this.props.addItemFilter({
+                id,
+                value: [...filterItems],
+            });
+        } else {
+            this.props.removeItemFilter(id);
+        }
 
         this.closeDialog();
     };
@@ -160,7 +161,7 @@ export default connect(
         clearActiveModalDimension: acClearActiveModalDimension,
         setActiveModalDimension: acSetActiveModalDimension,
         addItemFilter: acAddItemFilter,
-        setItemFilters: acSetItemFilters,
+        removeItemFilter: acRemoveItemFilter,
         removeEditItemFilter: acRemoveEditItemFilter,
         setEditItemFilters: acSetEditItemFilters,
     }

diff --git a/src/reducers/__tests__/editItemFilters.js b/src/reducers/__tests__/editItemFilters.js
@@ -0,0 +1,61 @@
+import reducer, {
+    DEFAULT_STATE_EDIT_ITEM_FILTERS,
+    SET_EDIT_ITEM_FILTERS,
+    REMOVE_EDIT_ITEM_FILTER,
+    CLEAR_EDIT_ITEM_FILTERS,
+} from '../editItemFilters';
+
+const testKey = 'ou';
+const testValue = [{ id: 'ou1', name: 'OU test' }];
+
+const testState = {
+    [testKey]: testValue,
+};
+
+describe('item filter reducer', () => {
+    describe('reducer', () => {
+        it('should return the default state', () => {
+            const actualState = reducer(DEFAULT_STATE_EDIT_ITEM_FILTERS, {});
+
+            expect(actualState).toEqual(DEFAULT_STATE_EDIT_ITEM_FILTERS);
+        });
+
+        it('should set a filter', () => {
+            const action = {
+                type: SET_EDIT_ITEM_FILTERS,
+                filters: testState,
+            };
+
+            const expectedState = testState;
+
+            const actualState = reducer(undefined, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+
+        it('should remove a filter', () => {
+            const action = {
+                type: REMOVE_EDIT_ITEM_FILTER,
+                id: testKey,
+            };
+
+            const expectedState = DEFAULT_STATE_EDIT_ITEM_FILTERS;
+
+            const actualState = reducer(testState, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+
+        it('should clear all filters', () => {
+            const action = {
+                type: CLEAR_EDIT_ITEM_FILTERS,
+            };
+
+            const expectedState = DEFAULT_STATE_EDIT_ITEM_FILTERS;
+
+            const actualState = reducer(testState, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+    });
+});
diff --git a/src/reducers/__tests__/itemFilters.js b/src/reducers/__tests__/itemFilters.js
@@ -1,6 +1,8 @@
 import reducer, {
     DEFAULT_STATE_ITEM_FILTERS,
     SET_ITEM_FILTERS,
+    REMOVE_ITEM_FILTER,
+    CLEAR_ITEM_FILTERS,
 } from '../itemFilters';
 
 const testKey = 'ou';
@@ -33,8 +35,20 @@ describe('item filter reducer', () => {
 
         it('should remove a filter', () => {
             const action = {
-                type: SET_ITEM_FILTERS,
-                filters: {},
+                type: REMOVE_ITEM_FILTER,
+                id: testKey,
+            };
+
+            const expectedState = DEFAULT_STATE_ITEM_FILTERS;
+
+            const actualState = reducer(testState, action);
+
+            expect(actualState).toEqual(expectedState);
+        });
+
+        it('should clear all filters', () => {
+            const action = {
+                type: CLEAR_ITEM_FILTERS,
             };
 
             const expectedState = DEFAULT_STATE_ITEM_FILTERS;

diff --git a/src/reducers/editItemFilters.js b/src/reducers/editItemFilters.js
@@ -1,3 +1,4 @@
+export const CLEAR_EDIT_ITEM_FILTERS = 'CLEAR_EDIT_ITEM_FILTERS';
 export const REMOVE_EDIT_ITEM_FILTER = 'REMOVE_EDIT_ITEM_FILTER';
 export const SET_EDIT_ITEM_FILTERS = 'SET_EDIT_ITEM_FILTERS';
 
@@ -15,6 +16,9 @@ export default (state = DEFAULT_STATE_EDIT_ITEM_FILTERS, action) => {
         case SET_EDIT_ITEM_FILTERS: {
             return action.filters;
         }
+        case CLEAR_EDIT_ITEM_FILTERS: {
+            return DEFAULT_STATE_EDIT_ITEM_FILTERS;
+        }
         default:
             return state;
     }

diff --git a/src/reducers/itemFilters.js b/src/reducers/itemFilters.js
@@ -1,3 +1,4 @@
+export const CLEAR_ITEM_FILTERS = 'CLEAR_ITEM_FILTERS';
 export const SET_ITEM_FILTERS = 'SET_ITEM_FILTERS';
 export const ADD_ITEM_FILTER = 'ADD_ITEM_FILTER';
 export const REMOVE_ITEM_FILTER = 'REMOVE_ITEM_FILTER';
@@ -22,6 +23,9 @@ export default (state = DEFAULT_STATE_ITEM_FILTERS, action) => {
         case SET_ITEM_FILTERS: {
             return action.filters;
         }
+        case CLEAR_ITEM_FILTERS: {
+            return DEFAULT_STATE_ITEM_FILTERS;
+        }
         default:
             return state;
     }