reviews to backbone

mounirlamouri · Mar 10, 2012 · c06b1bc · c06b1bc
1 parent 1559225
commit c06b1bc
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 49 deletions.
diff --git a/app/bzhome.js b/app/bzhome.js
@@ -2,9 +2,7 @@ $(document).ready(function() {
    try {
       bzhome.templates = {
          bugEvents: Handlebars.compile($("#bug-events").html()),
-         timelineBug: Handlebars.compile($("#timeline-bug").html()),
-         reviewItem: Handlebars.compile($("#review-item").html()),
-         searchItem: Handlebars.compile($("#search-item").html())
+         timelineBug: Handlebars.compile($("#timeline-bug").html())
       }
    } catch(e) {
       console.error(e);
@@ -102,6 +100,7 @@ $(document).ready(function() {
 
    // initalize the searches section
    var searchlist = new SearchList;
+   var reviewlist = new ReviewList;
 });
 
 var bzhome = {
@@ -197,7 +196,6 @@ var bzhome = {
    populate : function() {
       bzhome.populateAutocomplete();
 
-      bzhome.populateReviews();
       bzhome.populateSections();
    },
 
@@ -360,23 +358,6 @@ var bzhome = {
       });
    },
 
-   populateReviews : function() {
-      var section = $("#reviews .content");
-      bzhome.spinner(section);
-
-      bzhome.user.requests(function(err, requests) {
-         section.empty();
-         $("#reviews .count").html(requests.reviews.length);
-
-         var html = "";
-         requests.reviews.forEach(function(request) {
-            html += bzhome.templates.reviewItem(request);
-         })
-         section.append(html);
-         $(".timeago").timeago();
-      });
-   },
-
    populateAutocomplete : function() {
       var input = $(".component-search, .new-component");
       bzhome.user.client.getConfiguration({

diff --git a/app/reviews.js b/app/reviews.js
@@ -0,0 +1,71 @@
+$(function() {
+   window.Review = Backbone.Model.extend({      
+      attachment: null,
+      bug: null,
+      time: ''
+   });
+
+   window.Reviews = Backbone.Collection.extend({
+      model: Review,
+      localStorage: new Store("bzhome-reviews"),
+
+      initialize: function() {
+         this.bind("reset", this.resetStore, this);
+      },
+
+      resetStore: function() {
+         Backbone.sync("clear", this);
+         Backbone.sync("create", this);
+      }
+   });
+
+   window.ReviewRow = Backbone.View.extend({
+      tagName: "div",
+
+      className: "review-item",
+
+      template: Handlebars.compile($("#review-item").html()),
+
+      render: function() {
+         $(this.el).html(this.template(this.model.toJSON()));
+         return this;
+      }
+   });
+
+   window.reviews = new Reviews;
+
+   window.ReviewList = Backbone.View.extend({
+      el: $("#reviews"),
+
+      list: $("#reviews-list"),
+
+      initialize: function() {
+         reviews.bind("add", this.addReview, this);
+         reviews.bind("reset", this.render, this);
+
+         // get cached list from localStorage
+         reviews.fetch();
+
+         // but fetch from the server and update
+         bzhome.user.requests(function(err, requests) {
+            reviews.reset(requests.reviews);
+         });
+      },
+
+      render: function(reviews) {
+         this.list.empty();
+         reviews.each(_(this.addReview).bind(this));
+         if (reviews.length) {
+            $("#reviews .count").html(reviews.length);
+            $(".timeago").timeago();            
+         }
+      },
+
+      addReview: function(review) {
+         var view = new ReviewRow({
+            model: review
+         });
+         this.list.append(view.render().el);
+      }
+   });
+});
diff --git a/app/searches.js b/app/searches.js
@@ -1,7 +1,9 @@
 $(function() {
    window.Search = Backbone.Model.extend({      
       name: '',
-      query: {}
+      query: {},
+      open: null,
+      closed: null
    });
 
    window.Searches = Backbone.Collection.extend({
@@ -80,8 +82,7 @@ $(function() {
 
       addSearch: function(search) {
          var view = new SearchRow({
-            model: search,
-            id: "search-" + utils.idify(search.get("name"))
+            model: search
          });
          $("#searches-list").append(view.render().el);
 
@@ -98,7 +99,7 @@ $(function() {
             search.set({
                closed: count
             });
-         })
+         });
       },
 
       submit: function(event) {

diff --git a/index.html b/index.html
@@ -22,22 +22,22 @@
   <script src="app/user.js"></script>
   <script src="app/handlers.js"></script>
   <script src="app/utils.js"></script>
+
   <script src="app/searches.js"></script>
+  <script src="app/reviews.js"></script>
   <script src="app/bzhome.js"></script>
 
   <script id="timeline-bug" type="text/html">
-    <div class="bug-{{bug.id}} timeline-item">
-      <div class="timeline-bug bug">
-        <a class="bug-title" href="{{show_bug bug.id}}" target=_blank title="{{> bug_tooltip}}">
-          <img id="bug-icon" hidden=true src="lib/bugzilla.png"/>
-          <span class="bug-id">{{bug.id}}</span>
-          <span class="bug-summary">{{bug.summary}}</span>
-        </a>
-      </div>
+    <div class="timeline-bug bug">
+      <a class="bug-title" href="{{show_bug bug.id}}" target=_blank title="{{> bug_tooltip}}">
+        <img id="bug-icon" hidden=true src="lib/bugzilla.png"/>
+        <span class="bug-id">{{bug.id}}</span>
+        <span class="bug-summary">{{bug.summary}}</span>
+      </a>
     </div>
   </script>
 
-  <script id="bug-events">
+  <script id="bug-events" type="text/html">
     <div class="timeline-events">
       {{#format_events}}
       {{#each events}}
@@ -155,19 +155,17 @@
   </script>
 
   <script id="review-item" type="text/html">
-    <div class="review-item">
-      <div class="review-attachment">
-        <a class="review-link" href={{show_attach attachment.id "edit"}} target=_blank>
-          {{attachment.description}}
-        </a>
-      </div>
-      <div class="suffix">
-        by {{flag.setter.name}}
-        on <a href={{show_bug bug.id}} target=_blank title="{{> bug_tooltip}}">
-          bug {{bug.id}}
-        </a>
-        <span class="timeago" title="{{attachment.last_change_time}}"></span>
-      </div>
+    <div class="review-attachment">
+      <a class="review-link" href={{show_attach attachment.id "edit"}} target=_blank>
+        {{attachment.description}}
+      </a>
+    </div>
+    <div class="suffix">
+      by {{flag.setter.name}}
+      on <a href={{show_bug bug.id}} target=_blank title="{{> bug_tooltip}}">
+        bug {{bug.id}}
+      </a>
+      <span class="timeago" title="{{attachment.last_change_time}}"></span>
     </div>
   </script>
 
@@ -286,6 +284,9 @@
        <section id="reviews">
          <div class="header">Reviews <span class="count"></span></div>
          <div class="content">
+           <div id="reviews-list">
+
+           </div>
          </div>
        </section>
 

diff --git a/index.less b/index.less
@@ -420,7 +420,7 @@ section {
       color: #606060;
    }
 
-   .timeline-item {
+   .timeline-bug {
       padding-bottom: 1em;
       padding-top: 1em;
       border-bottom: 1px solid #CCC;

diff --git a/lib/backbone-localstorage.js b/lib/backbone-localstorage.js
@@ -30,10 +30,21 @@ _.extend(Store.prototype, {
   // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
   // have an id of it's own.
   create: function(model) {
+    if (model.models)
+      return this.createAll(model.models);
+
     if (!model.id) model.id = model.attributes.id = guid();
     this.data[model.id] = model;
     this.save();
     return model;
+  }, 
+
+  // Add a bunch of models
+  createAll: function(models) {
+    models.forEach(function(model) {
+      this.create(model);       
+    }, this);
+    return true;
   },
 
   // Update a model by replacing its copy in `this.data`.
@@ -58,14 +69,23 @@ _.extend(Store.prototype, {
     delete this.data[model.id];
     this.save();
     return model;
+  },
+
+  clear: function() {
+     this.data = {};
+     this.save();
+     return true;
   }
 
 });
 
 // Override `Backbone.sync` to use delegate to the model or collection's
 // *localStorage* property, which should be an instance of `Store`.
 Backbone.sync = function(method, model, options) {
-
+  options = options || {
+     success: function() {},
+     error: function(err) {throw err;}
+  };
   var resp;
   var store = model.localStorage || model.collection.localStorage;
 
@@ -74,6 +94,7 @@ Backbone.sync = function(method, model, options) {
     case "create":  resp = store.create(model);                            break;
     case "update":  resp = store.update(model);                            break;
     case "delete":  resp = store.destroy(model);                           break;
+    case "clear":   resp = store.clear();                           break;
   }
 
   if (resp) {