projects search params are saved in url query params and remain in browser history

app/assets/javascripts/controllers/projects.coffee.erb

@@ -144,8 +144,8 @@ class ProjectsController
 ##
 #  Controller used on projects listing page
 ##
-Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'Project', 'machinesPromise', 'themesPromise', 'componentsPromise', 'paginationService', 'OpenlabProject', '$window', 'growl', '_t'
+Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'Project', 'machinesPromise', 'themesPromise', 'componentsPromise', 'paginationService', 'OpenlabProject', '$window', 'growl', '_t', '$location', '$timeout'
-, ($scope, $state, Project, machinesPromise, themesPromise, componentsPromise, paginationService, OpenlabProject, $window, growl, _t) ->
+, ($scope, $state, Project, machinesPromise, themesPromise, componentsPromise, paginationService, OpenlabProject, $window, growl, _t, $location, $timeout) ->
 
   ### PRIVATE STATIC CONSTANTS ###
 
@@ -153,7 +153,7 @@ Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'P
   PROJECTS_PER_PAGE = 12
 
   ### PUBLIC SCOPE ###
-  $scope.search = { q: "", from: undefined, machine_id: undefined, component_id: undefined, theme_id: undefined }
+  $scope.search = { q: ($location.$$search.q || ""), from: ($location.$$search.from || undefined), machine_id: ($location.$$search.machine_id || undefined), component_id: ($location.$$search.component_id || undefined), theme_id: ($location.$$search.theme_id || undefined) }
 
   ## list of projects to display
   $scope.projects = []
@@ -169,6 +169,10 @@ Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'P
 
   $scope.openlab = {}
   $scope.openlab.projectsActive = Fablab.openlabProjectsActive
+
+  if $location.$$search.whole_network is 'f'
+    $scope.openlab.searchOverWholeNetwork = false
+  else
     $scope.openlab.searchOverWholeNetwork = $scope.openlab.projectsActive || false
 
   normalizeProjectsAttrs = (projects)->
@@ -179,15 +183,16 @@ Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'P
 
   $scope.searchOverWholeNetworkChanged = ->
     setTimeout ->
-      $scope.triggerSearch()
+      $scope.resetFiltersAndTriggerSearch()
     , 150
 
   loadMoreCallback = (projectsPromise)->
     $scope.projects = $scope.projects.concat(projectsPromise.projects)
+    updateUrlParam('page', $scope.projectsPagination.currentPage)
 
   loadMoreOpenlabCallback = (projectsPromise)->
     $scope.projects = $scope.projects.concat(normalizeProjectsAttrs(projectsPromise.projects))
-
+    updateUrlParam('page', $scope.projectsPagination.currentPage)
 
   $scope.loadMore = ->
     if $scope.openlab.searchOverWholeNetwork is true
@@ -196,18 +201,20 @@ Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'P
       $scope.projectsPagination.loadMore(search: $scope.search)
 
 
-  $scope.resetFilters = ->
+  $scope.resetFiltersAndTriggerSearch = ->
     $scope.search.q = ""
     $scope.search.from = undefined
     $scope.search.machine_id = undefined
     $scope.search.component_id = undefined
     $scope.search.theme_id = undefined
+    $scope.setUrlQueryParams($scope.search)
     $scope.triggerSearch()
 
   $scope.triggerSearch = ->
+    currentPage = parseInt($location.$$search.page) || 1
     if $scope.openlab.searchOverWholeNetwork is true
-      $scope.projectsPagination = new paginationService.Instance(OpenlabProject, 1, PROJECTS_PER_PAGE, null, { }, loadMoreOpenlabCallback)
+      $scope.projectsPagination = new paginationService.Instance(OpenlabProject, currentPage, PROJECTS_PER_PAGE, null, { }, loadMoreOpenlabCallback)
-      OpenlabProject.query { q: $scope.search.q, page: 1, per_page: PROJECTS_PER_PAGE }, (projectsPromise)->
+      OpenlabProject.query { q: $scope.search.q, page: currentPage, per_page: PROJECTS_PER_PAGE }, (projectsPromise)->
         if projectsPromise.errors?
           growl.error(_t('openlab_search_not_available_at_the_moment'))
           $scope.openlab.searchOverWholeNetwork = false
@@ -217,8 +224,9 @@ Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'P
           $scope.projects = normalizeProjectsAttrs(projectsPromise.projects)
 
     else
-      $scope.projectsPagination = new paginationService.Instance(Project, 1, PROJECTS_PER_PAGE, null, { }, loadMoreCallback, 'search')
+      updateUrlParam('whole_network', 'f')
-      Project.search { search: $scope.search, page: 1, per_page: PROJECTS_PER_PAGE }, (projectsPromise)->
+      $scope.projectsPagination = new paginationService.Instance(Project, currentPage, PROJECTS_PER_PAGE, null, { }, loadMoreCallback, 'search')
+      Project.search { search: $scope.search, page: currentPage, per_page: PROJECTS_PER_PAGE }, (projectsPromise)->
         $scope.projectsPagination.totalCount = projectsPromise.meta.total
         $scope.projects = projectsPromise.projects
 
@@ -234,6 +242,26 @@ Application.Controllers.controller "ProjectsController", ["$scope", "$state", 'P
     else
       $state.go('app.public.projects_show', {id: project.slug})
 
+  ##
+  # function to set all url query search parameters from search object
+  ##
+  $scope.setUrlQueryParams = (search)->
+    updateUrlParam('page', 1)
+    updateUrlParam('q', search.q)
+    updateUrlParam('from', search.from)
+    updateUrlParam('theme_id', search.theme_id)
+    updateUrlParam('component_id', search.component_id)
+    updateUrlParam('machine_id', search.machine_id)
+
+  ##
+  # function to update url query param, little hack to turn off reloadOnSearch and re-enable it after setting the params
+  # params example: 'q' , 'presse-purée'
+  ##
+  updateUrlParam = (name, value) ->
+    $state.current.reloadOnSearch = false
+    $location.search(name, value)
+    $timeout ->
+      $state.current.reloadOnSearch = undefined
 
   ## initialization
   $scope.triggerSearch()

app/assets/javascripts/router.coffee.erb

@@ -219,7 +219,7 @@ angular.module('application.router', ['ui.router']).
 
       # projects
       .state 'app.public.projects_list',
-        url: '/projects'
+        url: '/projects?q&page&theme_id&component_id&machine_id&from&whole_network'
         views:
           'main@':
             templateUrl: '<%= asset_path "projects/index.html" %>'

app/assets/templates/projects/index.html.erb

@@ -23,7 +23,7 @@
 <section class="m-lg">
   <div class="row m-b-md">
     <div class="col-md-12"><h3 class="m-t-xs">{{ 'filter_projects' | translate }}
-      <a href="javascript:void(0);" class="text-sm pull-right" name="button" ng-click="resetFilters()" ng-show="!openlab.searchOverWholeNetwork"><i class="fa fa-refresh"></i> {{ 'reset_all_filters' | translate }}</a></h3>
+      <a href="javascript:void(0);" class="text-sm pull-right" name="button" ng-click="resetFiltersAndTriggerSearch()" ng-show="!openlab.searchOverWholeNetwork"><i class="fa fa-refresh"></i> {{ 'reset_all_filters' | translate }}</a></h3>
     </div>
     <div class="col-md-12 m-b">
       <span ng-if="openlab.projectsActive">
@@ -39,22 +39,21 @@
                />
         {{ searchOverWholeNetwork }}
       </span>
-      <form class="form-inline">
+      <form class="form-inline" role="form" ng-submit="setUrlQueryParams(search) && triggerSearch()">
         <div class="form-group">
           <div class="input-group">
             <div class="input-group-addon"><i class="fa fa-search"></i></div>
             <input type="search" class="form-control" placeholder="Mots-clés" ng-model="search.q"/>
             <div class="input-group-btn">
-              <button ng-click="triggerSearch()" type="button" class="btn btn-warning" translate>{{ 'search' }}</button>
+              <button type="submit" class="btn btn-warning" translate>{{ 'search' }}</button>
             </div>
           </div>
-
         </div>
       </form>
     </div>
     <span ng-if="!openlab.searchOverWholeNetwork">
       <div class="col-md-3 m-b" ng-show="isAuthenticated()">
-        <select ng-model="search.from" ng-change="triggerSearch()" class="form-control">
+        <select ng-model="search.from" ng-change="setUrlQueryParams(search) && triggerSearch()" class="form-control">
           <option value="" translate>{{ 'all_projects' }}</option>
           <option value="mine" translate>{{ 'my_projects' }}</option>
           <option value="collaboration" translate>{{ 'projects_to_whom_i_take_part_in' }}</option>
@@ -62,19 +61,19 @@
       </div>
 
       <div class="col-md-3 m-b">
-        <select ng-model="search.machine_id" ng-change="triggerSearch()" class="form-control" ng-options="m.id as m.name for m in machines">
+        <select ng-model="search.machine_id" ng-change="setUrlQueryParams(search) && triggerSearch()" class="form-control" ng-options="m.id as m.name for m in machines">
           <option value="" translate>{{ 'all_machines' }}</option>
         </select>
       </div>
 
       <div class="col-md-3 m-b">
-        <select ng-model="search.theme_id" ng-change="triggerSearch()" class="form-control" ng-options="t.id as t.name for t in themes">
+        <select ng-model="search.theme_id" ng-change="setUrlQueryParams(search) && triggerSearch()" class="form-control" ng-options="t.id as t.name for t in themes">
           <option value="" translate>{{ 'all_themes' }}</option>
         </select>
       </div>
 
       <div class="col-md-3 m-b">
-        <select ng-model="search.component_id" ng-change="triggerSearch()" class="form-control" ng-options="t.id as t.name for t in components">
+        <select ng-model="search.component_id" ng-change="setUrlQueryParams(search) && triggerSearch()" class="form-control" ng-options="t.id as t.name for t in components">
           <option value="" translate>{{ 'all_materials' }}</option>
         </select>
       </div>
@@ -83,6 +82,7 @@
 
 
   <div class="row">
+    <span class="col-md-12" ng-show="projects && (projects.length == 0)"> {{ 'project_search_result_is_empty' | translate }} </span>
     <div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="project in projects" ng-click="showProject(project)">
       <div class="box-thumb box-thumb-project" style="background-image: url({{project.project_image}});">
 

config/locales/app.public.en.yml

@@ -120,6 +120,7 @@ en:
         the_fablab_projects: "The Fab Lab projects"
         search_over_the_whole_network: "Search over the whole network"
         openlab_search_not_available_at_the_moment: "Search over the whole network is not available at the moment. You still can search over the projects of this platform."
+        project_search_result_is_empty: "Sorry, we found no results matching your search criteria."
         add_a_project: "Add a project"
         filter_projects: "Filter projects:"
         reset_all_filters: "Reset all filters"

config/locales/app.public.fr.yml

@@ -120,6 +120,7 @@ fr:
         the_fablab_projects: "Les projets du FabLab"
         search_over_the_whole_network: "Chercher sur tout le réseau"
         openlab_search_not_available_at_the_moment: "La recherche sur tout le réseau n'est pas disponible pour le moment. Vous ne pouvez cependant effectuer une recherche parmis les projets de cette plateforme."
+        project_search_result_is_empty: "Il n'y a pas de projets correspondant à vos critères de recherche."
         add_a_project: "Ajouter un projet"
         filter_projects: "Filtrer les projets :"
         reset_all_filters: "Réinitialiser tous les filtres"