[refactor,search][m]: refactor DatasetSearchView to use dataset-listi…

…ng views developed by aron for search widget rather than DatasetSummaryView. * Overhaul and improve search view test * Fix up layout of html in test/index.html (xs) * Minor tweaks to DatasetListingItem to include some template from DatasetSummaryView not in there yet (e.g. actions)
okfn · Aug 16, 2011 · 671341f · 671341f
1 parent 3761b8c
commit 671341f
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 118 deletions.
diff --git a/app/css/ckanjs.css b/app/css/ckanjs.css
@@ -124,6 +124,18 @@ ul.actions li {
   line-height: 12px;
 }
 
+/****************************************
+  * Search View
+  ***************************************/
+
+.results h3 {
+  margin-top: 1em;
+}
+
+.results > p {
+  margin-bottom: 0;
+}
+
 /****************************************
   * Dataset Edit/Create
   ***************************************/

diff --git a/app/index.html b/app/index.html
@@ -51,6 +51,7 @@
   <script src="../lib/template/resource-form.js"></script>
   <script src="../lib/template/resource-view.js"></script>
   <script src="../lib/view.js"></script>
+  <script src="../lib/view/dataset-listing.js"></script>
   <script src="../lib/view/resource-create.js"></script>
   <script src="../lib/template/resource-upload.js"></script>
   <script src="../lib/view/resource-upload.js"></script>

diff --git a/lib/templates.js b/lib/templates.js
@@ -1,46 +1,6 @@
 var CKAN = CKAN || {};
 
 CKAN.Templates = {
-  datasetSummary: '  \
-  <li class="dataset summary" dataset-id="${dataset.id}"> \
-    <div class="header"> \
-      <span class="title" > \
-        <a href="${dataset.ckan_url}" ckan-attrname="title" class="editable">${dataset.displaytitle}</a> \
-      </span> \
-      <div class="search_meta"> \
-        {{if dataset.resources.length}} \
-        <ul class="dataset-formats"> \
-          {{each dataset.resources}} \
-            <li>${$value.format}</li> \
-          {{/each}} \
-        </ul> \
-        {{/if}} \
-      </div> \
-    </div> \
-    <div class="extract editable-area"> \
-      {{html dataset.snippet}} \
-    </div> \
-    <div class="dataset-tags"> \
-      {{if dataset.tags.length}} \
-      <ul class="dataset-tags"> \
-        {{each dataset.tags}} \
-          <li>${$value}</li> \
-        {{/each}} \
-      </ul> \
-      {{/if}} \
-    </div> \
-    <ul class="actions"> \
-      <li> \
-        <a href="${urls.datasetView}" class="more"> \
-          More &raquo;</a> \
-      </li> \
-      <li> \
-        <a href="${urls.datasetEdit}">Edit &raquo;</a> \
-      </li> \
-    </ul> \
-  </li> \
-  ',
-
   minorNavigationDataset: ' \
     <ul class="tabbed"> \
       <li><a href="#dataset/${dataset.id}/view">View</a></li> \

diff --git a/lib/view.js b/lib/view.js
@@ -146,24 +146,6 @@ CKAN.View = function($) {
 
   });
 
-  my.DatasetSummaryView = Backbone.View.extend({
-
-    render: function() {
-      var tmplData = {
-        domain: this.options.domain,
-        dataset: this.model.toTemplateJSON(),
-        urls: {
-          datasetView: CKAN.UI.workspace.url('dataset', 'view', this.model.id),
-          datasetEdit: CKAN.UI.workspace.url('dataset', 'edit', this.model.id)
-        }
-      };
-      this.el = $.tmpl(CKAN.Templates.datasetSummary, tmplData);
-      // have to redelegate as element set up here ...
-      this.delegateEvents();
-      return this;
-    }
-  });
-
   my.DatasetFullView = Backbone.View.extend({
     initialize: function() {
       _.bindAll(this, 'render');
@@ -234,57 +216,44 @@ CKAN.View = function($) {
     events: {
       'submit #search-form': 'doSearch'
     },
-    // hash of DatasetSummaryView instances organised by cid
-    datasetSummaryViews: {},
 
     initialize: function(options) {
       var view = this;
 
       // Temporarily provide the view with access to the client for searching.
       this.client = options.client;
-      this.collection = new CKAN.Model.SearchCollection();
       this.$results = this.el.find('.results');
+      this.$datasetList = this.$results.find('.datasets');
       this.$dialog = this.el.find('.dialog');
 
-      _.bindAll(this, "onReset", "render", "addOne");
-      this.collection.bind("reset", view.onReset);
-      this.bind('searchComplete', view.render);
+      this.resultView = new CKAN.View.DatasetListing({
+        collection: new Backbone.Collection(),
+        el: this.$datasetList
+      });
+
+      _.bindAll(this, "render");
     },
 
     render: function() {
-      this.$('.count').html(this.collection.total);
+      this.$('.count').html(this.totalResults);
       this.hideSpinner();
       this.$results.show();
       return this;
     },
 
-    onReset: function (collection) {
-      var self = this;
-      collection.each( function( ckanDataset) {
-        self.addOne(ckanDataset);
-      });
-      this.trigger("searchComplete");
-    },
-
-    addOne: function(pkg) {
-      var newView = new CKAN.View.DatasetSummaryView({model: pkg});
-      //this.datasetSummaryViews[pkg.cid] = newView;
-      this.$results.find('.datasets').append(newView.render().el);
-      return this;
-    },
-
     doSearch: function (event) {
       var q = $(this.el).find('input.search').val(),
-          view = this;
+          self = this;
 
       this.showSpinner();
       this.$results.hide();
       this.$results.find('.datasets').empty();
       this.client.searchDatasets({
         query: {q:q},
         success: function (collection) {
-          view.collection.total = collection.total;
-          view.collection.reset(collection.models);
+          self.totalResults = collection.total;
+          self.resultView.setCollection(collection);
+          self.render();
         }
       });
 
@@ -299,10 +268,6 @@ CKAN.View = function($) {
 
     hideSpinner: function() {
       this.$dialog.empty().hide();
-    },
-
-    viewDataset: function (datasetId) {
-
     }
   });
 

diff --git a/lib/view/dataset-listing.js b/lib/view/dataset-listing.js
@@ -62,13 +62,13 @@ this.CKAN.View || (this.CKAN.View = {});
   CKAN.View.DatasetListingItem = Backbone.View.extend({
     tagName: 'li',
 
-    className: 'dataset',
+    className: 'dataset summary',
 
     options: {
       template: '\
         <div class="header"> \
           <span class="title" > \
-            <a href="${domain}${ckan_url}" ckan-attrname="title" class="editable">${displaytitle}</a> \
+            <a href="${ckan_url}" ckan-attrname="title" class="editable">${displaytitle}</a> \
           </span> \
           <div class="search_meta"> \
             {{if formats.length > 0}} \
@@ -91,7 +91,17 @@ this.CKAN.View || (this.CKAN.View = {});
             {{/each}} \
           </ul> \
           {{/if}} \
-        </div>'
+        </div> \
+        <ul class="actions"> \
+          <li> \
+            <a href="${urls.datasetView}" class="more"> \
+              More &raquo;</a> \
+          </li> \
+          <li> \
+            <a href="${urls.datasetEdit}">Edit &raquo;</a> \
+          </li> \
+        </ul> \
+      '
     },
 
     constructor: function DatasetListingItem() {
@@ -103,7 +113,11 @@ this.CKAN.View || (this.CKAN.View = {});
       var data = _.extend(this.model.toTemplateJSON(), {
         dataset: this.model.toTemplateJSON(),
         domain: this.options.domain,
-        formats: this._availableFormats()
+        formats: this._availableFormats(),
+        urls: {
+          datasetView: CKAN.UI.workspace.url('dataset', 'view', this.model.id),
+          datasetEdit: CKAN.UI.workspace.url('dataset', 'edit', this.model.id)
+        }
       });
       this.el.html($.tmpl(this.options.template, data));
       return this;

diff --git a/test/index.html b/test/index.html
@@ -40,15 +40,14 @@ <h3>Results</h3>
         <ul class="datasets">
         </ul>
       </div>
+    </div> <!-- /search-view -->
 
-      <div id="resource-view-test">
-      </div>
-
-      <div id="sidebar">
-        <ul class="widget-list">
-        </ul>
-      </div>
+    <div id="resource-view-test">
+    </div>
 
+    <div id="sidebar">
+      <ul class="widget-list">
+      </ul>
     </div>
   </div>
   <script src="../vendor/jquery/1.6.2/jquery.js"></script>

diff --git a/test/view-test.js b/test/view-test.js
@@ -2,17 +2,6 @@ module("View");
 
 CKAN.UI.initialize()
 
-test("DatasetSummaryView", function () {
-  var pkg = new CKAN.Model.Dataset(datasets[1]);
-  var view = new CKAN.View.DatasetSummaryView({
-    model: pkg
-  });
-  view.render();
-  var tmpl = $(view.el);
-  var title = tmpl.find('.title a').text();
-  equals(title, 'A Novel By Tolstoy');
-});
-
 test("DatasetFullView", function () {
   var pkg = new CKAN.Model.Dataset(datasets[1]);
   var $view = $('<div />').appendTo($('.fixture'));
@@ -61,17 +50,28 @@ test("DatasetEditView", function () {
 });
 
 test("DatasetSearchView", function () {
-  var coll = new CKAN.Model.SearchCollection([]);
-
-  var searchView = new CKAN.View.DatasetSearchView({
+  var client = new CKAN.Client();
+  var view = new CKAN.View.DatasetSearchView({
     el: $('#search-page'),
-    collection: coll
+    client: client
   });
-  var pkg = new CKAN.Model.Dataset(datasets[1]);
-  coll.add(pkg);
-  searchView.addOne(pkg);
-  searchView.render();
-  var title = $('.datasets li .title a').text();
+  var _models = _.map(datasets, function(attributes) {
+      return client.createDataset(attributes);
+  });
+  var _results = new CKAN.Model.SearchCollection(
+    _models
+    , {total: 2}
+  );
+  this.stub(view.client, 'searchDatasets', function(options){
+    options.success(_results);
+  });
+  var _event = {
+    preventDefault: function() {}
+  };
+  view.doSearch(_event);
+  var count = view.el.find('.count').text();
+  equals(count, '2');
+  var title = $('.datasets li .title a').last().text();
   equals(title, 'A Novel By Tolstoy');
 });