Merge pull request #2811 from appirio-tech/feature/filter-projects-by-columns

Filter project table by columns

Author: RishiRajSahu

src/components/Grid/GridView.jsx

@@ -35,20 +35,17 @@ const GridView = props => {
       <LoadingIndicator />
     ) : (
       <div className="container">
-        {resultSet.length ? (
-          <div className="flex-area">
-            <div className="flex-data">
-              <ListHeader {...headerProps} />
-              {resultSet.map(renderItem)}
-            </div>
-            <PaginationBar {...paginationProps} />
-          </div>
-        ) : (
-          <div className="flex-area">
-            {/* TODO replace this with proper style */}
-            <div style={{textAlign: 'center'}}><br/><br/><h3> No results </h3><br/><br/></div>
+        <div className="flex-area">
+          <div className="flex-data">
+            <ListHeader {...headerProps} />
+            {resultSet.length ? (
+              resultSet.map(renderItem)
+            ) : (
+              <div style={{textAlign: 'center'}}><br/><br/><h3> No results </h3><br/><br/></div>
+            )}
           </div>
-        )}
+          <PaginationBar {...paginationProps} />
+        </div>
       </div>
     )
   )
@@ -77,6 +74,15 @@ const GridView = props => {
               >
                 {[...resultSet, ...placeholders].map(renderItem)}
               </InfiniteScroll>
+              {totalCount === 0 && <section className="content gridview-content">
+                <div key="end" className="gridview-no-project">
+                  No results found based on current search criteria. <br /> Please modify your search criteria and/or search across all projects by selecting the "
+                  <a href="javascript:" onClick={() => { applyFilters({status: null }) }} className="tc-btn-all-projects" >
+                    All Projects
+                  </a>
+                  " filter.
+                </div>
+              </section>}
             </div>
           </div>
         </div>
@@ -94,20 +100,6 @@ const GridView = props => {
     )
   }
 
-  if (totalCount === 0) {
-    return (
-      <section className="content gridview-content">
-        <div key="end" className="gridview-no-project">
-          No results found based on current search criteria. <br /> Please modify your search criteria and/or search across all projects by selecting the "
-          <a href="javascript:" onClick={() => { applyFilters({status: null }) }} className="tc-btn-all-projects" >
-            All Projects
-          </a>
-          " filter.
-        </div>
-      </section>
-    )
-  }
-
   return (
     <section className="content gridview-content">
       {infiniteScroll ? renderGridWithInfiniteScroll() : renderGridWithPagination()}

src/components/TopBar/Filters.js

@@ -5,17 +5,13 @@ import PropTypes from 'prop-types'
 import querystring from 'query-string'
 import { withRouter, Prompt } from 'react-router-dom'
 import { connect } from 'react-redux'
-import cn from 'classnames'
 import _ from 'lodash'
 import SearchBar from 'appirio-tech-react-components/components/SearchBar/SearchBar'
 import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
-import Filters from './Filters'
 import NotificationsDropdown from '../NotificationsDropdown/NotificationsDropdownContainer'
 import NewProjectNavLink from './NewProjectNavLink'
 import MobileMenu from '../MobileMenu/MobileMenu'
 import MobileMenuToggle from '../MobileMenu/MobileMenuToggle'
-import SearchFilter from '../../assets/icons/ui-filters.svg'
-import SearchIcon from '../../assets/icons/ui-16px-1_zoom.svg'
 import { projectSuggestions, loadProjects, setInfiniteAutoload } from '../../projects/actions/loadProjects'
 import { loadProjectsMetadata } from '../../actions/templates'
 import { getNewProjectLink } from '../../helpers/projectHelper'
@@ -26,17 +22,13 @@ class ProjectsToolBar extends Component {
     super(props)
     this.state = {
       errorCreatingProject: false,
-      isFilterVisible: false,
       isMobileMenuOpen: false,
       isMobileSearchVisible: false
     }
-    this.state.isFilterVisible = sessionStorage.getItem('isFilterVisible') === 'true'
     this.applyFilters = this.applyFilters.bind(this)
-    this.toggleFilter = this.toggleFilter.bind(this)
     this.handleTermChange = this.handleTermChange.bind(this)
     this.handleSearch = this.handleSearch.bind(this)
     this.toggleMobileMenu = this.toggleMobileMenu.bind(this)
-    this.toggleMobileSearch = this.toggleMobileSearch.bind(this)
     this.onLeave = this.onLeave.bind(this)
   }
 
@@ -74,10 +66,6 @@ class ProjectsToolBar extends Component {
   }
 
   componentDidMount() {
-    const contentDiv = document.getElementById('wrapper-main')
-    if (this.state.isFilterVisible) {
-      contentDiv.classList.add('with-filters')
-    }
     // sets window unload hook to show unsaved changes alert and persist incomplete project
     window.addEventListener('beforeunload', this.onLeave)
   }
@@ -125,38 +113,10 @@ class ProjectsToolBar extends Component {
     this.routeWithParams(criteria)
   }
 
-  toggleFilter() {
-    const {isFilterVisible, isMobileSearchVisible} = this.state
-    const contentDiv = document.getElementById('wrapper-main')
-    this.setState({isFilterVisible: !isFilterVisible}, () => {
-      sessionStorage.setItem('isFilterVisible', (!isFilterVisible).toString())
-      if (this.state.isFilterVisible) {
-        contentDiv.classList.add('with-filters')
-      } else {
-        contentDiv.classList.remove('with-filters')
-      }
-    })
-    // if open filters, close search panel on mobile
-    if (!isFilterVisible && isMobileSearchVisible) {
-      this.toggleMobileSearch()
-    }
-  }
-
   toggleMobileMenu() {
     this.setState({ isMobileMenuOpen: !this.state.isMobileMenuOpen })
   }
 
-  toggleMobileSearch() {
-    const { isFilterVisible, isMobileSearchVisible } = this.state
-
-    // if open mobile search and filter is visible, then close filter
-    if (!isMobileSearchVisible && isFilterVisible) {
-      this.toggleFilter()
-    }
-
-    this.setState({ isMobileSearchVisible: !isMobileSearchVisible })
-  }
-
   routeWithParams(criteria) {
     // because criteria is changed disable infinite autoload
     this.props.setInfiniteAutoload(false)
@@ -171,7 +131,7 @@ class ProjectsToolBar extends Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     const { user, criteria, creatingProject, projectCreationError, searchTermTag, projectTypes } = this.props
-    const { errorCreatingProject, isFilterVisible, isMobileMenuOpen, isMobileSearchVisible } = this.state
+    const { errorCreatingProject, isMobileMenuOpen, isMobileSearchVisible } = this.state
     return (nextProps.user || {}).handle !== (user || {}).handle
     || (nextProps.user || {}).photoURL !== (this.props.user || {}).photoURL
     || JSON.stringify(nextProps.criteria) !== JSON.stringify(criteria)
@@ -180,24 +140,15 @@ class ProjectsToolBar extends Component {
     || nextProps.searchTermTag !== searchTermTag
     || !!nextProps.projectTypes && !projectTypes
     || nextState.errorCreatingProject !== errorCreatingProject
-    || nextState.isFilterVisible !== isFilterVisible
     || nextState.isMobileMenuOpen !== isMobileMenuOpen
     || nextState.isMobileSearchVisible !== isMobileSearchVisible
   }
 
   render() {
-    const { renderLogoSection, userMenu, userRoles, criteria, isPowerUser, user, mobileMenu, location, projectTypes, orgConfig } = this.props
-    const { isFilterVisible, isMobileMenuOpen, isMobileSearchVisible } = this.state
+    const { renderLogoSection, userMenu, userRoles, isPowerUser, user, mobileMenu, location, orgConfig } = this.props
+    const { isMobileMenuOpen, isMobileSearchVisible } = this.state
     const isLoggedIn = !!(userRoles && userRoles.length)
 
-    let excludedFiltersCount = 1 // 1 for default sort criteria
-    if (criteria.memberOnly) {
-      // https://github.com/appirio-tech/connect-app/issues/1319
-      // The switch should not count as a filter in the menu!
-      excludedFiltersCount++
-    }
-    // Ignore status from filters count
-    const noOfFilters = _.keys(_.omit(criteria, ['status', 'keyword'])).length - excludedFiltersCount
     const onLeaveMessage = this.onLeave() || ''
 
     const primaryNavigationItems = [
@@ -240,20 +191,6 @@ class ProjectsToolBar extends Component {
                 onSearch={ this.handleSearch }
                 onClearSearch={ this.handleSearch }
               />
-              <div className="search-filter">
-                <a
-                  href="javascript:"
-                  className={cn('tc-btn tc-btn-sm mobile-search-toggle', {active: isMobileSearchVisible})}
-                  onClick={ this.toggleMobileSearch }
-                ><SearchIcon /></a>
-                { !!projectTypes &&
-                <a
-                  href="javascript:"
-                  className={cn('tc-btn tc-btn-sm', {active: isFilterVisible})}
-                  onClick={ this.toggleFilter }
-                ><SearchFilter className="icon-search-filter" /><span className="filter-text">Filters</span> { noOfFilters > 0 && <span className="filter-indicator">{ noOfFilters }</span> }</a>
-                }
-              </div>
             </div>
           }
           <div className="actions">
@@ -277,15 +214,6 @@ class ProjectsToolBar extends Component {
             />
           </div>
         }
-        { !!projectTypes && isFilterVisible && isLoggedIn &&
-          <div className="secondary-toolbar">
-            <Filters
-              applyFilters={ this.applyFilters }
-              criteria={ criteria }
-              projectTypes={ projectTypes }
-            />
-          </div>
-        }
         {isMobileMenuOpen && <MobileMenu user={user} onClose={this.toggleMobileMenu} menu={mobileMenu} />}
       </div>
     )