Merge pull request #514 from appirio-tech/feature/topbar-filters-visual-indicator

Feature/topbar filters visual indicator

Author: vikasrohit

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 <ProjectToolBar isPowerUser={isPowerUser} logo={logo} avatar={avatar} project={project} />
     }
+    const noOfFilters = _.keys(criteria).length - 1 // -1 for default sort criteria
 
     return (
       // <Sticky>
@@ -116,7 +118,7 @@ class TopBar extends Component {
                   href="javascript:"
                   className={cn('tc-btn tc-btn-sm', {active: isFilterVisible})}
                   onClick={this.props.onToggleFilter}
-                >Filters</a>
+                >Filters { noOfFilters > 0 && <span className="filter-indicator">{ noOfFilters }</span> }</a>
               </div>}
             </div>
             {avatar}

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{

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)
     }