implement "new contact" modal view, extending from common base view

davidsulc · Oct 22, 2013 · e77ac15 · e77ac15
1 parent d84e930
commit e77ac15
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 55 deletions.
diff --git a/assets/js/apps/contacts/common/views.js b/assets/js/apps/contacts/common/views.js
@@ -0,0 +1,55 @@
+ContactManager.module("ContactsApp.Common.Views", function(Views, ContactManager, Backbone, Marionette, $, _){
+  Views.Form = Marionette.ItemView.extend({
+    template: "#contact-form",
+
+    events: {
+      "click button.js-submit": "submitClicked"
+    },
+
+    submitClicked: function(e){
+      e.preventDefault();
+      var data = Backbone.Syphon.serialize(this);
+      this.trigger("form:submit", data);
+    },
+
+    onRender: function(){
+      if( ! this.options.asModal){
+        var $title = $("<h1>", { text: this.title });
+        this.$el.prepend($title);
+      }
+    },
+
+    onShow: function(){
+      if(this.options.asModal){
+        this.$el.dialog({
+          modal: true,
+          title: this.title,
+          width: "auto"
+        });
+      }
+    },
+
+    onFormDataInvalid: function(errors){
+      var $view = this.$el;
+
+      var clearFormErrors = function(){
+        var $form = $view.find("form");
+        $form.find(".help-inline.error").each(function(){
+          $(this).remove();
+        });
+        $form.find(".control-group.error").each(function(){
+          $(this).removeClass("error");
+        });
+      }
+
+      var markErrors = function(value, key){
+        var $controlGroup = $view.find("#contact-" + key).parent();
+        var $errorEl = $("<span>", { class: "help-inline error", text: value });
+        $controlGroup.append($errorEl).addClass("error");
+      }
+
+      clearFormErrors();
+      _.each(errors, markErrors);
+    }
+  });
+});
diff --git a/assets/js/apps/contacts/edit/edit_view.js b/assets/js/apps/contacts/edit/edit_view.js
@@ -1,59 +1,7 @@
 ContactManager.module("ContactsApp.Edit", function(Edit, ContactManager, Backbone, Marionette, $, _){
-  Edit.Contact = Marionette.ItemView.extend({
-    template: "#contact-form",
-
+  Edit.Contact = ContactManager.ContactsApp.Common.Views.Form.extend({
     initialize: function(){
       this.title = "Edit " + this.model.get("firstName") + " " + this.model.get("lastName");
-    },
-
-    events: {
-      "click button.js-submit": "submitClicked"
-    },
-
-    submitClicked: function(e){
-      e.preventDefault();
-      var data = Backbone.Syphon.serialize(this);
-      this.trigger("form:submit", data);
-    },
-
-    onRender: function(){
-      if( ! this.options.asModal){
-        var $title = $("<h1>", { text: this.title });
-        this.$el.prepend($title);
-      }
-    },
-
-    onShow: function(){
-      if(this.options.asModal){
-        this.$el.dialog({
-          modal: true,
-          title: this.title,
-          width: "auto"
-        });
-      }
-    },
-
-    onFormDataInvalid: function(errors){
-      var $view = this.$el;
-
-      var clearFormErrors = function(){
-        var $form = $view.find("form");
-        $form.find(".help-inline.error").each(function(){
-          $(this).remove();
-        });
-        $form.find(".control-group.error").each(function(){
-          $(this).removeClass("error");
-        });
-      }
-
-      var markErrors = function(value, key){
-        var $controlGroup = $view.find("#contact-" + key).parent();
-        var $errorEl = $("<span>", { class: "help-inline error", text: value });
-        $controlGroup.append($errorEl).addClass("error");
-      }
-
-      clearFormErrors();
-      _.each(errors, markErrors);
     }
   });
 });
diff --git a/assets/js/apps/contacts/list/list_controller.js b/assets/js/apps/contacts/list/list_controller.js
@@ -19,6 +19,30 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
           contactsListLayout.contactsRegion.show(contactsListView);
         });
 
+        contactsListPanel.on("contact:new", function(){
+          var newContact = new ContactManager.Entities.Contact();
+
+          var view = new ContactManager.ContactsApp.New.Contact({
+            model: newContact,
+            asModal: true
+          });
+
+          view.on("form:submit", function(data){
+            var highestId = contacts.max(function(c){ return c.id; }).get("id");
+            data.id = highestId + 1;
+            if(newContact.save(data)){
+              contacts.add(newContact);
+              ContactManager.dialogRegion.close();
+              contactsListView.children.findByModel(newContact).flash("success");
+            }
+            else{
+              view.triggerMethod("form:data:invalid", newContact.validationError);
+            }
+          });
+
+          ContactManager.dialogRegion.show(view);
+        });
+
         contactsListView.on("itemview:contact:show", function(childView, model){
           ContactManager.trigger("contact:show", model.get("id"));
         });

diff --git a/assets/js/apps/contacts/list/list_view.js b/assets/js/apps/contacts/list/list_view.js
@@ -9,7 +9,11 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
   });
 
   List.Panel = Marionette.ItemView.extend({
-    template: "#contact-list-panel"
+    template: "#contact-list-panel",
+
+    triggers: {
+      "click button.js-new": "contact:new"
+    }
   });
 
   List.Contact = Marionette.ItemView.extend({
@@ -66,6 +70,20 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
     className: "table table-hover",
     template: "#contact-list",
     itemView: List.Contact,
-    itemViewContainer: "tbody"
+    itemViewContainer: "tbody",
+
+    initialize: function(){
+      this.listenTo(this.collection, "reset", function(){
+        this.appendHtml = function(collectionView, itemView, index){
+          collectionView.$el.append(itemView.el);
+        }
+      });
+    },
+
+    onCompositeCollectionRendered: function(){
+      this.appendHtml = function(collectionView, itemView, index){
+        collectionView.$el.prepend(itemView.el);
+      }
+    }
   });
 });
diff --git a/assets/js/apps/contacts/new/new_view.js b/assets/js/apps/contacts/new/new_view.js
@@ -0,0 +1,5 @@
+ContactManager.module("ContactsApp.New", function(New, ContactManager, Backbone, Marionette, $, _){
+  New.Contact = ContactManager.ContactsApp.Common.Views.Form.extend({
+    title: "New Contact"
+  });
+});
diff --git a/assets/js/entities/contact.js b/assets/js/entities/contact.js
@@ -2,6 +2,12 @@ ContactManager.module("Entities", function(Entities, ContactManager, Backbone, M
   Entities.Contact = Backbone.Model.extend({
     urlRoot: "contacts",
 
+    defaults: {
+      firstName: "",
+      lastName: "",
+      phoneNumber: ""
+    },
+
     validate: function(attrs, options) {
       var errors = {}
       if (! attrs.firstName) {

diff --git a/index.html b/index.html
@@ -118,12 +118,14 @@ <h1><%= title %></h1>
     <script src="./assets/js/common/views.js"></script>
 
     <script src="./assets/js/apps/contacts/contacts_app.js"></script>
+    <script src="./assets/js/apps/contacts/common/views.js"></script>
     <script src="./assets/js/apps/contacts/list/list_view.js"></script>
     <script src="./assets/js/apps/contacts/list/list_controller.js"></script>
     <script src="./assets/js/apps/contacts/show/show_view.js"></script>
     <script src="./assets/js/apps/contacts/show/show_controller.js"></script>
     <script src="./assets/js/apps/contacts/edit/edit_view.js"></script>
     <script src="./assets/js/apps/contacts/edit/edit_controller.js"></script>
+    <script src="./assets/js/apps/contacts/new/new_view.js"></script>
 
     <script type="text/javascript">
       ContactManager.start();