Merge pull request GeoNode#55 from simod/hierarchical-tags

make autocomplete to work with Hierarchical keywords
simod · Dec 17, 2015 · da7bc6d · da7bc6d
2 parents 28cb224 + 4ed2d90
commit da7bc6d
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 14 deletions.
diff --git a/geonode/base/admin.py b/geonode/base/admin.py
@@ -116,4 +116,4 @@ class HierarchicalKeywordAdmin(TreeAdmin):
 admin.site.register(HierarchicalKeyword, HierarchicalKeywordAdmin)
 
 class ResourceBaseAdminForm(autocomplete_light.ModelForm):
-    keywords = TaggitField(widget=TaggitWidget('TagAutocomplete'), required=False)
+    keywords = TaggitField(widget=TaggitWidget('HierarchicalKeywordAutocomplete'), required=False)
diff --git a/geonode/base/autocomplete_light_registry.py b/geonode/base/autocomplete_light_registry.py
@@ -1,7 +1,7 @@
 import autocomplete_light
 
 from taggit.models import Tag
-from models import ResourceBase, Region
+from models import ResourceBase, Region, HierarchicalKeyword
 
 
 autocomplete_light.register(Region,
@@ -12,7 +12,7 @@
                             search_fields=['title'],
                             autocomplete_js_attributes={'placeholder': 'Resource name..', },)
 
-autocomplete_light.register(Tag,
+autocomplete_light.register(HierarchicalKeyword,
                             search_fields=['name', 'slug'],
                             autocomplete_js_attributes={'placeholder':
                                                         'A space or comma-separated list of keywords', },)
diff --git a/geonode/static/bower.json b/geonode/static/bower.json
@@ -28,6 +28,6 @@
     "leaflet-fullscreen": "https://github.com/Leaflet/Leaflet.fullscreen.git",
     "eonasdan-bootstrap-datetimepicker": "~3.1.3",
     "bootstrap-treeview": "1.2.0",
-    "bower-tokenfield": "0.12.0"
+    "bootstrap-tokenfield": "0.12.0"
   }
 }
diff --git a/geonode/static/geonode/js/search/search.js b/geonode/static/geonode/js/search/search.js
@@ -64,15 +64,19 @@
   module.load_h_keywords = function($http, $rootScope, $location){
     var params = typeof FILTER_TYPE == 'undefined' ? {} : {'type': FILTER_TYPE};
     $http.get(H_KEYWORDS_ENDPOINT, {params: params}).success(function(data){
-        $('#treeview').treeview({
-          data: data,
-          levels: 1,
-          onNodeSelected: function($event, $data) {
-            console.log($data.text);
-          }
-        });
+      $('#treeview').treeview({
+        data: data,
+        levels: 1,
+        multiSelect: true,
+        onNodeSelected: function($event, $data) {
+          $rootScope.$broadcast('select_h_keyword', $data);
+        },
+        onNodeUnselected: function($event, $data){
+          $rootScope.$broadcast('unselect_h_keyword', $data);
+        }
+      });
     });
-  }
+  };
 
   module.load_regions = function ($http, $rootScope, $location){
         var params = typeof FILTER_TYPE == 'undefined' ? {} : {'type': FILTER_TYPE};
@@ -300,6 +304,61 @@
         }, true);
     }
 
+    // Hyerarchical keywords listeners
+    $scope.$on('select_h_keyword', function($event, element){
+      var data_filter = 'keywords__slug__in';
+      var query_entry = [];
+      var value = element.text;
+      // If the query object has the record then grab it
+      if ($scope.query.hasOwnProperty(data_filter)){
+
+        // When in the location are passed two filters of the same
+        // type then they are put in an array otherwise is a single string
+        if ($scope.query[data_filter] instanceof Array){
+          query_entry = $scope.query[data_filter];
+        }else{
+          query_entry.push($scope.query[data_filter]);
+        }
+      }
+
+      // Add the entry in the correct query
+      if (query_entry.indexOf(value) == -1){
+        query_entry.push(value);
+      }
+
+      //save back the new query entry to the scope query
+      $scope.query[data_filter] = query_entry;
+
+      query_api($scope.query);
+    });
+
+    $scope.$on('unselect_h_keyword', function($event, element){
+      var data_filter = 'keywords__slug__in';
+      var query_entry = [];
+      var value = element.text;
+      // If the query object has the record then grab it
+      if ($scope.query.hasOwnProperty(data_filter)){
+
+        // When in the location are passed two filters of the same
+        // type then they are put in an array otherwise is a single string
+        if ($scope.query[data_filter] instanceof Array){
+          query_entry = $scope.query[data_filter];
+        }else{
+          query_entry.push($scope.query[data_filter]);
+        }
+      }
+
+      query_entry.splice(query_entry.indexOf(value), 1);
+
+      //save back the new query entry to the scope query
+      $scope.query[data_filter] = query_entry;
+
+      //if the entry is empty then delete the property from the query
+      if(query_entry.length == 0){
+        delete($scope.query[data_filter]);
+      }
+      query_api($scope.query);
+    });
 
     /*
     * Add the selection behavior to the element, it adds/removes the 'active' class

diff --git a/geonode/templates/search/search_scripts.html b/geonode/templates/search/search_scripts.html
@@ -1,9 +1,8 @@
 {% if DEBUG_STATIC %}
 
-<script src="{{ STATIC_URL }}lib/js/bootstrap-datepicker.js?v={{ VERSION }}" type="text/javascript"></script>
 <script src="{{ STATIC_URL }}lib/js/angular.js?v={{ VERSION }}"></script>
 <script src="{{ STATIC_URL }}lib/js/angular-leaflet-directive.min.js?v={{ VERSION }}"></script>
-<script src="{{ STATIC_URL }}lib/js/bootstrap-treeview.js?v={{ VERSION }}"></script>
+<script src="{{ STATIC_URL }}lib/js/bootstrap-treeview.min.js?v={{ VERSION }}"></script>
 {% endif %}
 
 {% if include_spatial == 'true' %}