From 436b950822225da1d0434bd7c142c9321780332b Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Thu, 3 Nov 2016 13:36:44 +0530 Subject: [PATCH 1/2] Github issue #320 [Search] - when filters are hide don't take them into consideration -- Added visual indicator to show the number of filters currently applied on the project listing --- src/components/TopBar/TopBar.jsx | 4 +++- src/components/TopBar/TopBar.scss | 20 +++++++++++++++++--- src/projects/reducers/projectSearch.js | 2 +- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx index 7890bdc98..af72b140e 100644 --- a/src/components/TopBar/TopBar.jsx +++ b/src/components/TopBar/TopBar.jsx @@ -3,6 +3,7 @@ require('./TopBar.scss') import React, {PropTypes, Component} from 'react' import { Link } from 'react-router' import cn from 'classnames' +import _ from 'lodash' import { UserDropdown, Icons } from 'appirio-tech-react-components' const { ConnectLogoBeta } = Icons @@ -94,6 +95,7 @@ class TopBar extends Component { if (isProjectDetails) { return } + const noOfFilters = _.keys(criteria).length - 1 return ( // @@ -116,7 +118,7 @@ class TopBar extends Component { href="javascript:" className={cn('tc-btn tc-btn-sm', {active: isFilterVisible})} onClick={this.props.onToggleFilter} - >Filters + >Filters { noOfFilters > 0 && { noOfFilters } } } {avatar} diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss index fa2a5f2a7..e682900ec 100644 --- a/src/components/TopBar/TopBar.scss +++ b/src/components/TopBar/TopBar.scss @@ -76,7 +76,7 @@ $tc-body-large : 20px; .search-bar{ margin: 0 auto; - width: 585px; + width: 605px; padding-top: 15px; display: flex; justify-content:space-between; @@ -88,9 +88,11 @@ $tc-body-large : 20px; height: 30px; } .search-filter{ - width: 77px; + width: 97px; .tc-btn{ - display: block; + display: flex; + align-items: center; + justfiy-content: center; padding: 5px 0 5px 34px; text-align: left; color: $tc-gray-40; @@ -118,6 +120,18 @@ $tc-body-large : 20px; } } } + + .filter-indicator { + width: 15px; + height: 15px; + margin-left: $base-unit; + background-color: $tc-dark-blue-90; + border-radius: 26px; + color: $tc-white; + display: flex; + justify-content: center; + align-items: center; + } } } .welcome-info{ diff --git a/src/projects/reducers/projectSearch.js b/src/projects/reducers/projectSearch.js index 90a3558ef..0540e5c25 100644 --- a/src/projects/reducers/projectSearch.js +++ b/src/projects/reducers/projectSearch.js @@ -28,7 +28,7 @@ export default function(state = initialState, action) { }) case GET_PROJECTS_SEARCH_CRITERIA: return Object.assign({}, state, { - criteria: action.criteria, + criteria: Object.assign({}, action.criteria ), pageNum: action.pageNum }) case CLEAR_PROJECT_SEARCH: From 3f9f197c82129458154fc767689b581a13f9c67d Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Thu, 3 Nov 2016 13:42:28 +0530 Subject: [PATCH 2/2] Github issue #320 [Search] - when filters are hide don't take them into consideration -- Better way to handle the criteria change. Earlier it was modifying the criteria from the props which was causing no change in state even if we are dispatching and handling GET_PROJECTS_SEARCH_CRITERIA action. --- src/components/TopBar/TopBar.jsx | 2 +- src/projects/list/components/Projects/Projects.jsx | 13 +++++++------ src/projects/reducers/projectSearch.js | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx index af72b140e..184739ccf 100644 --- a/src/components/TopBar/TopBar.jsx +++ b/src/components/TopBar/TopBar.jsx @@ -95,7 +95,7 @@ class TopBar extends Component { if (isProjectDetails) { return } - const noOfFilters = _.keys(criteria).length - 1 + const noOfFilters = _.keys(criteria).length - 1 // -1 for default sort criteria return ( // diff --git a/src/projects/list/components/Projects/Projects.jsx b/src/projects/list/components/Projects/Projects.jsx index c2d8334ab..24d00aafe 100644 --- a/src/projects/list/components/Projects/Projects.jsx +++ b/src/projects/list/components/Projects/Projects.jsx @@ -22,13 +22,14 @@ class Projects extends Component { // check for criteria specified in URL. const queryParams = _.get(this.props, 'location.query', null) if (!_.isEmpty(queryParams)) { - if (queryParams.sort) criteria.sort = queryParams.sort - if (queryParams.name) criteria.name = decodeURIComponent(queryParams.name) - if (queryParams.status) criteria.status = queryParams.status - if (queryParams.type) criteria.type = queryParams.type - if (queryParams.memberOnly) criteria.memberOnly = queryParams.memberOnly + const initialCriteria = {} + if (queryParams.sort) initialCriteria.sort = queryParams.sort + if (queryParams.name) initialCriteria.name = decodeURIComponent(queryParams.name) + if (queryParams.status) initialCriteria.status = queryParams.status + if (queryParams.type) initialCriteria.type = queryParams.type + if (queryParams.memberOnly) initialCriteria.memberOnly = queryParams.memberOnly if (queryParams.page) pageNum = parseInt(queryParams.page) - loadProjects(criteria, pageNum) + loadProjects(initialCriteria, pageNum) } else { this.routeWithParams(criteria, pageNum) } diff --git a/src/projects/reducers/projectSearch.js b/src/projects/reducers/projectSearch.js index 0540e5c25..90a3558ef 100644 --- a/src/projects/reducers/projectSearch.js +++ b/src/projects/reducers/projectSearch.js @@ -28,7 +28,7 @@ export default function(state = initialState, action) { }) case GET_PROJECTS_SEARCH_CRITERIA: return Object.assign({}, state, { - criteria: Object.assign({}, action.criteria ), + criteria: action.criteria, pageNum: action.pageNum }) case CLEAR_PROJECT_SEARCH: