[#145,widget/fields][m]: add new fields widget view which lists all fields with field info and replace facet widget in multiview with it.

* widget is very incomplete and does not yet show anything of great value (plan is to have summary info).

app/index.html

@@ -67,7 +67,7 @@
   <script type="text/javascript" src="../src/widget.pager.js"></script>
   <script type="text/javascript" src="../src/widget.queryeditor.js"></script>
   <script type="text/javascript" src="../src/widget.filtereditor.js"></script>
-  <script type="text/javascript" src="../src/widget.facetviewer.js"></script>
+  <script type="text/javascript" src="../src/widget.fields.js"></script>
   <script type="text/javascript" src="../src/view.multiview.js"></script>
 
   <!-- non-library javascript specific to this demo -->

css/multiview.css

@@ -94,6 +94,19 @@
   display: inline;
 }
 
+/**********************************************************
+  * Fields Widget
+  *********************************************************/
+
+.recline-fields-view .fields-list .accordion-heading a,
+.recline-fields-view .fields-list .accordion-heading h3 {
+  display: inline;
+}
+
+.recline-fields-view .fields-list .accordion-heading h3 {
+  margin-left: 10px;
+}
+
 /**********************************************************
   * Notifications
   *********************************************************/

src/view.multiview.js

@@ -88,7 +88,7 @@ my.MultiView = Backbone.View.extend({
       <div class="menu-right"> \
         <div class="btn-group" data-toggle="buttons-checkbox"> \
           <a href="#" class="btn" data-action="filters">Filters</a> \
-          <a href="#" class="btn" data-action="facets">Facets</a> \
+          <a href="#" class="btn" data-action="fields">Fields</a> \
         </div> \
       </div> \
       <div class="query-editor-here" style="display:inline;"></div> \
@@ -216,11 +216,11 @@ my.MultiView = Backbone.View.extend({
     });
     this.$filterEditor = filterEditor.el;
     this.el.find('.header').append(filterEditor.el);
-    var facetViewer = new recline.View.FacetViewer({
+    var fieldsView = new recline.View.Fields({
       model: this.model
     });
-    this.$facetViewer = facetViewer.el;
-    this.el.find('.header').append(facetViewer.el);
+    this.$fieldsView = fieldsView.el;
+    this.el.find('.header').append(fieldsView.el);
   },
 
   updateNav: function(pageName) {
@@ -244,8 +244,8 @@ my.MultiView = Backbone.View.extend({
     var action = $(e.target).attr('data-action');
     if (action === 'filters') {
       this.$filterEditor.toggle();
-    } else if (action === 'facets') {
-      this.$facetViewer.toggle();
+    } else if (action === 'fields') {
+      this.$fieldsView.toggle();
     }
   },
 

src/widget.fields.js

@@ -0,0 +1,70 @@
+/*jshint multistr:true */
+
+// Field Info
+//
+// For each field
+//
+// Id / Label / type / format
+
+// Editor -- to change type (and possibly format)
+// Editor for show/hide ...
+
+// Summaries of fields
+//
+// Top values / number empty
+// If number: max, min average ...
+
+// Box to boot transform editor ...
+
+this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
+
+(function($, my) {
+
+my.Fields = Backbone.View.extend({
+  className: 'recline-fields-view well', 
+  template: ' \
+    <div class="accordion fields-list"> \
+    {{#fields}} \
+      <div class="accordion-group"> \
+        <div class="accordion-heading"> \
+          <h3> \
+            {{label}} ({{id}}) \
+            <small> \
+              <i class="icon-file" title="Field type"></i> {{type}} \
+              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> More information &raquo; \
+              </a> \
+            </small> \
+          </h3> \
+        </div> \
+        <div id="collapse{{id}}" class="accordion-body collapse in"> \
+          <div class="accordion-inner"> \
+            <i class="icon-file"></i> {{type}} \
+          </div> \
+        </div> \
+      </div> \
+    {{/fields}} \
+    </div> \
+  ',
+
+  events: {
+  },
+  initialize: function(model) {
+    _.bindAll(this, 'render');
+    this.el = $(this.el);
+    this.model.fields.bind('all', this.render);
+    this.render();
+  },
+  render: function() {
+    var tmplData = {
+      fields: this.model.fields.toJSON()
+    };
+    var templated = Mustache.render(this.template, tmplData);
+    this.el.html(templated);
+    // this.el.hide();
+    this.el.find('.collapse').collapse()
+  }
+});
+
+})(jQuery, recline.View);
+

test/index.html

@@ -49,7 +49,7 @@
   <script type="text/javascript" src="../src/widget.pager.js"></script>
   <script type="text/javascript" src="../src/widget.queryeditor.js"></script>
   <script type="text/javascript" src="../src/widget.filtereditor.js"></script>
-  <script type="text/javascript" src="../src/widget.facetviewer.js"></script>
+  <script type="text/javascript" src="../src/widget.fields.js"></script>
   <script type="text/javascript" src="../src/view.multiview.js"></script>
 
   <script type="text/javascript" src="view-grid.test.js"></script>