Browse Source

[search] Edit and remove facet attached to the layout

Romain Rigaux 11 years ago
parent
commit
f5f0201
2 changed files with 40 additions and 51 deletions
  1. 10 41
      apps/search/src/search/templates/search2.mako
  2. 30 10
      apps/search/static/js/search.ko.js

+ 10 - 41
apps/search/src/search/templates/search2.mako

@@ -296,18 +296,15 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
 </script>
 </script>
 
 
 <script type="text/html" id="facet-widget">
 <script type="text/html" id="facet-widget">
+  <!-- ko if: $root.getFacet() -->
+  <div class="row-fluid" data-bind="with: $root.getFacet">
+    <div data-bind="visible: $root.isEditing, with: $root.collection.getSingleFacet()" style="margin-bottom: 20px">
+      ##${_('Add field')}
+      ##&nbsp;<a data-bind="click: showAddFacetModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
+      ${ _('Label') }: <input type="text" data-bind="value: label" />
+      ${ _('Field') }: <input type="text" data-bind="value: field" />
+    </div>  
 
 
-  <div data-bind="visible: $root.isEditing" style="margin-bottom: 20px">
-    ${_('Add field')}
-    &nbsp;<a data-bind="click: showAddFacetModal" class="btn" href="javascript:void(0)"><i class="fa fa-plus"></i></a>
-  </div>
-
-  ## Need to pick the facet ID from norm_facets instead of looping on all
-  <div class="row-fluid" data-bind="foreach: $root.norm_facets">
-    <span class="pull-right">
-      <a href="javascript:void(0)" data-bind="click: editFacet"><i class="fa fa-pencil"></i></a>
-      <a href="javascript:void(0)" data-bind="click: $root.removeFacet"><i class="fa fa-times"></i></a>
-    </span>
     <div data-bind="text: label" style="font-weight: bold"></div>
     <div data-bind="text: label" style="font-weight: bold"></div>
     <div data-bind="foreach: counts">
     <div data-bind="foreach: counts">
       <div>
       <div>
@@ -323,10 +320,10 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
+  <!-- /ko -->
 </script>
 </script>
 
 
 <script type="text/html" id="resultset-widget">
 <script type="text/html" id="resultset-widget">
-
   <div data-bind="visible: $root.isEditing" style="margin-bottom: 20px">
   <div data-bind="visible: $root.isEditing" style="margin-bottom: 20px">
       ${_('Results type')}
       ${_('Results type')}
       &nbsp;<a href="javascript: void(0)" data-bind="css:{'btn': true, 'btn-inverse': $root.collection.template.isGridLayout()}, click: function(){$root.collection.template.isGridLayout(true)}"><i class="fa fa-th"></i></a>
       &nbsp;<a href="javascript: void(0)" data-bind="css:{'btn': true, 'btn-inverse': $root.collection.template.isGridLayout()}, click: function(){$root.collection.template.isGridLayout(true)}"><i class="fa fa-th"></i></a>
@@ -452,29 +449,6 @@ ${ commonheader(_('Search'), "search", user, "60px") | n,unicode }
 </div>
 </div>
 
 
 
 
-<div id="editFacetModal" class="modal hide fade">
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>${_('Edit Facet')}</h3>
-  </div>
-  <div class="modal-body">
-    <p>
-      <div class="clearfix"></div>
-      <div style="margin-top: 20px">        
-        <!-- ko if: selectedFacet() -->
-        <p>
-          ${ _('Label') }: <input type="text" data-bind="value: selectedFacet().label" />
-        </p>
-        <!-- /ko -->
-      </div>
-    </p>
-  </div>
-  <div class="modal-footer">
-    <a href="#" data-dismiss="modal" class="btn" data-bind="click: search">${_('Ok')}</a>
-  </div>
-</div>
-
-
 <script src="/static/ext/js/knockout-min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/knockout-min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/knockout.mapping-2.3.2.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/knockout.mapping-2.3.2.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/mustache.js"></script>
 <script src="/static/ext/js/mustache.js"></script>
@@ -547,7 +521,7 @@ $(document).ready(function () {
   viewModel = new SearchViewModel(${ collection.get_c(user) | n,unicode }, ${ query | n,unicode });
   viewModel = new SearchViewModel(${ collection.get_c(user) | n,unicode }, ${ query | n,unicode });
   ko.applyBindings(viewModel);
   ko.applyBindings(viewModel);
 
 
-  //viewModel.isEditing(true);
+  viewModel.isEditing(true);
   viewModel.search();
   viewModel.search();
 });
 });
 
 
@@ -568,11 +542,6 @@ $(document).ready(function () {
     $('#addFacetModal').modal("hide");
     $('#addFacetModal').modal("hide");
     viewModel.search();
     viewModel.search();
   };
   };
-
-  function editFacet(facet) {
-    viewModel.selectSingleFacet(facet);
-    $("#editFacetModal").modal("show");
-  };
 </script>
 </script>
 
 
 ${ commonfooter(messages) | n,unicode }
 ${ commonfooter(messages) | n,unicode }

+ 30 - 10
apps/search/static/js/search.ko.js

@@ -102,7 +102,7 @@ var Widget = function (size, name, widgetType, properties, offset) {
   }
   }
 
 
   self.remove = function (row, widget) {
   self.remove = function (row, widget) {
-    // widget.remove() --> callback to removeFacet() or other depending on type of widget
+	viewModel.removeWidget(widget);
     row.widgets.remove(widget);
     row.widgets.remove(widget);
   }
   }
 };
 };
@@ -124,7 +124,7 @@ function oneThirdRightLayout() {
 }
 }
 
 
 function setLayout(colSizes) {
 function setLayout(colSizes) {
-  // save previous widgets
+  // Save previous widgets
   var _allRows = [];
   var _allRows = [];
   $(viewModel.columns()).each(function (cnt, col) {
   $(viewModel.columns()).each(function (cnt, col) {
     var _tRows = [];
     var _tRows = [];
@@ -228,6 +228,17 @@ var Collection = function (vm, collection) {
     }));
     }));
   }
   }
 
 
+  self.getSingleFacet = function (normalized_facet_json) {
+	normalized_facet_json = 'user_location';
+	var _facet = null;
+    $.each(self.facets(), function (index, facet) {
+      if (facet.field() == normalized_facet_json) {
+    	  _facet = facet;
+      }      
+    });
+    return _facet;
+  }  
+  
   self.addDynamicFields = function () {
   self.addDynamicFields = function () {
     $.post("/search/index/" + self.id + "/fields/dynamic", {
     $.post("/search/index/" + self.id + "/fields/dynamic", {
     },function (data) {
     },function (data) {
@@ -238,9 +249,7 @@ var Collection = function (vm, collection) {
           }
           }
         });
         });
       }
       }
-    }).fail(function (xhr, textStatus, errorThrown) {
-      }
-    );
+    }).fail(function (xhr, textStatus, errorThrown) {});
   }
   }
 
 
   self.addDynamicFields();
   self.addDynamicFields();
@@ -260,14 +269,22 @@ var SearchViewModel = function (collection_json, query_json) {
   self.norm_facets = ko.computed(function () {
   self.norm_facets = ko.computed(function () {
     return self.response().normalized_facets;
     return self.response().normalized_facets;
   });
   });
+  self.getFacet = function (name) { // todo
+	return self.norm_facets() !== undefined ? self.norm_facets()[0] : false;
+  };
 
 
-  self.selectedFacet = ko.observable();
+  self.selectedFacet = ko.observable(); //deprecated
 
 
   self.previewColumns = ko.observable("");
   self.previewColumns = ko.observable("");
   self.columns = ko.observable({});
   self.columns = ko.observable({});
   loadLayout(self, collection_json.layout);
   loadLayout(self, collection_json.layout);
   
   
   self.isEditing = ko.observable(false);
   self.isEditing = ko.observable(false);
+  self.toggleEditing = function () {
+    self.isEditing(!self.isEditing());
+  };
+  self.isRetrievingResults = ko.observable(false);
+	  
   self.draggableFacet = ko.observable(new Widget(12, "Facet", "facet-widget"));
   self.draggableFacet = ko.observable(new Widget(12, "Facet", "facet-widget"));
   self.draggableResultset = ko.observable(new Widget(12, "Results", "resultset-widget"));
   self.draggableResultset = ko.observable(new Widget(12, "Results", "resultset-widget"));
   self.draggableBar = ko.observable(new Widget(12, "Bar Chart", "bar-widget"));
   self.draggableBar = ko.observable(new Widget(12, "Bar Chart", "bar-widget"));
@@ -275,11 +292,8 @@ var SearchViewModel = function (collection_json, query_json) {
   self.draggableMap = ko.observable(new Widget(12, "Map", "map-widget"));
   self.draggableMap = ko.observable(new Widget(12, "Map", "map-widget"));
   self.draggableLine = ko.observable(new Widget(12, "Line Chart", "line-widget"));
   self.draggableLine = ko.observable(new Widget(12, "Line Chart", "line-widget"));
   self.draggablePie = ko.observable(new Widget(12, "Pie Chart", "pie-widget"));
   self.draggablePie = ko.observable(new Widget(12, "Pie Chart", "pie-widget"));
-  self.toggleEditing = function () {
-    self.isEditing(!self.isEditing());
-  };
-  self.isRetrievingResults = ko.observable(false);
 
 
+  
 
 
   self.search = function () {
   self.search = function () {
     self.isRetrievingResults(true);
     self.isRetrievingResults(true);
@@ -326,6 +340,7 @@ var SearchViewModel = function (collection_json, query_json) {
     });
     });
   };
   };
 
 
+  // deprecated
   // To move to collection
   // To move to collection
   self.selectSingleFacet = function (normalized_facet_json) {
   self.selectSingleFacet = function (normalized_facet_json) {
     $.each(self.collection.facets(), function (index, facet) {
     $.each(self.collection.facets(), function (index, facet) {
@@ -335,6 +350,11 @@ var SearchViewModel = function (collection_json, query_json) {
     });
     });
   }
   }
 
 
+  // widget.remove() --> callback to removeFacet() or other depending on type of widget  
+  self.removeWidget = function (facet_json) {
+	self.removeFacet({'field': 'user_location'}); 
+  }  
+  
   self.removeFacet = function (facet_json) {
   self.removeFacet = function (facet_json) {
     $.each(self.collection.facets(), function (index, item) {
     $.each(self.collection.facets(), function (index, item) {
       if (item.field() == facet_json.field) {
       if (item.field() == facet_json.field) {