浏览代码

[search] Enable or disable available widgets

Romain Rigaux 11 年之前
父节点
当前提交
c3887a1aa6
共有 2 个文件被更改,包括 126 次插入17 次删除
  1. 110 12
      apps/search/src/search/templates/search2.mako
  2. 16 5
      apps/search/static/js/search.ko.js

+ 110 - 12
apps/search/src/search/templates/search2.mako

@@ -97,16 +97,116 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
 
   <div style="float: left; margin-left: 20px" data-bind="visible: columns().length > 0">
     <div class="toolbar-label">${_('WIDGETS')}</div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggableResultset(), isEnabled: availableDraggableResultset, options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast'); $root.collection.template.isGridLayout(true); }}}" title="${_('Grid Results')}" rel="tooltip" data-placement="top"><a href=""><i class="fa fa-table"></i></a></div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggableHtmlResultset(), isEnabled: availableDraggableResultset, options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast'); $root.collection.template.isGridLayout(false); }}}" title="${_('HTML Results')}" rel="tooltip" data-placement="top"><a href="#"><i class="fa fa-code"></i></a></div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggableFacet(), options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Text Facet')}" rel="tooltip" data-placement="top"><a href="#"><i class="fa fa-sort-amount-asc"></i></a></div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggablePie(), options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Pie Chart')}" rel="tooltip" data-placement="top"><a href="#"><i class="hcha hcha-pie-chart"></i></a></div>
-    <!-- <div class="draggable-widget" data-bind="draggable: {data: draggableHit(), options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Hit Count')}" rel="tooltip" data-placement="top"><a href="#"><i class="fa fa-tachometer"></i></a></div> -->
-    <div class="draggable-widget" data-bind="draggable: {data: draggableBar(), options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Bar Chart')}" rel="tooltip" data-placement="top"><a href="#"><i class="hcha hcha-bar-chart"></i></a></div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggableLine(), options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Line')}" rel="tooltip" data-placement="top"><a href="#"><i class="hcha hcha-line-chart"></i></a></div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggableHistogram(), isEnabled: availableDraggableHistogram, options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Histogram')}" rel="tooltip" data-placement="top"><a href="#"><i class="fa fa-long-arrow-right"></i></a></div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggableFilter(), isEnabled: availableDraggableFilter, options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Filter Bar')}" rel="tooltip" data-placement="top"><a href="#"><i class="fa fa-filter"></i></a></div>
-    <div class="draggable-widget" data-bind="draggable: {data: draggableMap(), options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Map')}" rel="tooltip" data-placement="top"><a href="#"><i class="hcha hcha-map-chart"></i></a></div>
+    <div class="draggable-widget"
+         data-bind="style: { cursor: availableDraggableResultset() ? 'move' : 'default' },
+                    draggable: {data: draggableResultset(), isEnabled: availableDraggableResultset,
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');},
+                              'stop': function(event, ui){$('.card-body').slideDown('fast'); $root.collection.template.isGridLayout(true); }}}"
+         title="${_('Grid Results')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableResultset()},
+                       css: {'btn-inverse': ! $root.availableDraggableResultset() },
+                       style: { cursor: $root.availableDraggableResultset() ? 'move' : 'default' }">
+                       <i class="fa fa-table"></i>
+         </a>
+    </div>
+    <div class="draggable-widget"
+         data-bind="style: { cursor: availableDraggableResultset() ? 'move' : 'default' },
+                    draggable: {data: draggableHtmlResultset(), 
+                    isEnabled: availableDraggableResultset, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast'); $root.collection.template.isGridLayout(false); }}}" 
+         title="${_('HTML Results')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableResultset()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableResultset() }, 
+                       style: { cursor: $root.availableDraggableResultset() ? 'move' : 'default' }">
+                       <i class="fa fa-code"></i>
+         </a>
+    </div>
+    <div class="draggable-widget" 
+         data-bind="style: { cursor: availableDraggableChart() ? 'move' : 'default' },
+                    draggable: {data: draggableFacet(), isEnabled: availableDraggableChart, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" 
+         title="${_('Text Facet')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableChart()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableChart() }, 
+                       style: { cursor: $root.availableDraggableChart() ? 'move' : 'default' }">
+                       <i class="fa fa-sort-amount-asc"></i>
+         </a>
+    </div>
+    <div class="draggable-widget" 
+         data-bind="style: { cursor: availableDraggableChart() ? 'move' : 'default' },
+                    draggable: {data: draggablePie(), isEnabled: availableDraggableChart, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" 
+         title="${_('Pie Chart')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableChart()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableChart() }, 
+                       style: { cursor: $root.availableDraggableChart() ? 'move' : 'default' }">
+                       <i class="hcha hcha-pie-chart"></i>
+         </a>
+    </div>
+    <!-- <div class="draggable-widget" data-bind="draggable: {data: draggableHit(), options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" title="${_('Hit Count')}" rel="tooltip" data-placement="top"><a data-bind="attr: {href: $root.availableDraggableResultset()}, css: {'btn-inverse': ! $root.availableDraggableResultset() }, style: { cursor: $root.availableDraggableResultset() ? 'move' : 'default' }"><i class="fa fa-tachometer"></i></a></div> -->
+    <div class="draggable-widget" 
+         data-bind="style: { cursor: availableDraggableChart() ? 'move' : 'default' },
+                    draggable: {data: draggableBar(), isEnabled: availableDraggableChart, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" 
+         title="${_('Bar Chart')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableChart()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableChart() }, 
+                       style: { cursor: $root.availableDraggableChart() ? 'move' : 'default' }">
+                       <i class="hcha hcha-bar-chart"></i>
+         </a>
+    </div>
+    <div class="draggable-widget" 
+         data-bind="style: { cursor: availableDraggableChart() ? 'move' : 'default' },
+                    draggable: {data: draggableLine(), isEnabled: availableDraggableChart, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" 
+         title="${_('Line')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableChart()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableChart() }, 
+                       style: { cursor: $root.availableDraggableChart() ? 'move' : 'default' }">
+                       <i class="hcha hcha-line-chart"></i>
+         </a>
+    </div>
+    <div class="draggable-widget" 
+         data-bind="style: { cursor: availableDraggableHistogram() ? 'move' : 'default' }, 
+                    draggable: {data: draggableHistogram(), isEnabled: availableDraggableHistogram, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" 
+         title="${_('Histogram')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableHistogram()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableHistogram() }, 
+                       style: { cursor: $root.availableDraggableHistogram() ? 'move' : 'default' }">
+                       <i class="fa fa-long-arrow-right"></i>
+         </a>
+    </div>
+    <div class="draggable-widget" 
+         data-bind="style: { cursor: availableDraggableFilter() ? 'move' : 'default' }, 
+                    draggable: {data: draggableFilter(), isEnabled: availableDraggableFilter, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" 
+         title="${_('Filter Bar')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableFilter()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableFilter() }, 
+                       style: { cursor: $root.availableDraggableFilter() ? 'move' : 'default' }">
+                       <i class="fa fa-filter"></i>
+         </a>
+    </div>
+    <div class="draggable-widget" 
+         data-bind="style: { cursor: availableDraggableChart() ? 'move' : 'default' }, 
+                    draggable: {data: draggableMap(), isEnabled: availableDraggableChart, 
+                    options: {'start': function(event, ui){$('.card-body').slideUp('fast');}, 
+                              'stop': function(event, ui){$('.card-body').slideDown('fast');}}}" 
+         title="${_('Map')}" rel="tooltip" data-placement="top">
+         <a data-bind="attr: {href: $root.availableDraggableChart()}, 
+                       css: {'btn-inverse': ! $root.availableDraggableChart() }, 
+                       style: { cursor: $root.availableDraggableChart() ? 'move' : 'default' }">
+                       <i class="hcha hcha-map-chart"></i>
+         </a>
+   </div>
   </div>
   <div class="clearfix"></div>
 </div>
@@ -778,13 +878,11 @@ ${ commonheader(_('Search'), "search", user, "80px") | n,unicode }
     border: 1px solid #CCC;
     margin-top: 10px;
     margin-left: 10px;
-    cursor: move;
   }
 
   .draggable-widget a {
     font-size: 58px;
     line-height: 76px;
-    cursor: move;
   }
 
   .layout-container {

+ 16 - 5
apps/search/static/js/search.ko.js

@@ -352,7 +352,14 @@ var Collection = function (vm, collection) {
 
 
   self.fields = ko.mapping.fromJS(collection.fields);
-  //self.availableFacetFields = ko.computed()
+  self.availableFacetFields = ko.computed(function() {
+    var facetFieldNames = $.map(self.facets(), function(facet) {
+	  return facet.field();
+    });
+    return $.grep(self.fields(), function(field) {
+      return facetFieldNames.indexOf(field.name()) == -1;
+    });
+  });
 
   self.addFacet = function (facet_json) {
     $.post("/search/template/new_facet", {
@@ -632,15 +639,19 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
   };
   
   self.availableDraggableResultset = ko.computed(function() {
-	return getWidgets(function(widget){ return ['resultset-widget', 'html-resultset-widget'].indexOf(widget.widgetType()) != -1;}).length == 0;
+	return getWidgets(function(widget){ return ['resultset-widget', 'html-resultset-widget'].indexOf(widget.widgetType()) != -1; }).length == 0;
   });
   self.availableDraggableFilter = ko.computed(function() {
-	return getWidgets(function(widget){ return widget.widgetType() == 'filter-widget';}).length == 0;
+	return getWidgets(function(widget){ return widget.widgetType() == 'filter-widget'; }).length == 0;
   });  
   self.availableDraggableHistogram = ko.computed(function() {
-	return getWidgets(function(widget){ return widget.widgetType() == 'histogram-widget';}).length == 0; // + a date facet
+	return getWidgets(function(widget){ return widget.widgetType() == 'histogram-widget'; }).length == 0 &&
+	  $.map(self.collection.availableFacetFields(), function(field) { return ['date', 'tdate'].indexOf(field.type()) != -1; });
   });
-
+  self.availableDraggableChart = ko.computed(function() {
+    return self.collection.availableFacetFields().length > 0;
+  });
+  
   self.init = function () {
     //self.collection.addDynamicFields();
     self.isEditing(true);