editing a contact from a modal window

davidsulc · Oct 22, 2013 · d785c7b · d785c7b
1 parent d5f1112
commit d785c7b
Show file tree

Hide file tree

Showing 21 changed files with 16,652 additions and 2 deletions.
diff --git a/assets/css/images/ui-bg_flat_0_aaaaaa_40x100.png b/assets/css/images/ui-bg_flat_0_aaaaaa_40x100.png
diff --git a/assets/css/images/ui-bg_glass_55_fbf9ee_1x400.png b/assets/css/images/ui-bg_glass_55_fbf9ee_1x400.png
diff --git a/assets/css/images/ui-bg_glass_65_ffffff_1x400.png b/assets/css/images/ui-bg_glass_65_ffffff_1x400.png
diff --git a/assets/css/images/ui-bg_glass_75_dadada_1x400.png b/assets/css/images/ui-bg_glass_75_dadada_1x400.png
diff --git a/assets/css/images/ui-bg_glass_75_e6e6e6_1x400.png b/assets/css/images/ui-bg_glass_75_e6e6e6_1x400.png
diff --git a/assets/css/images/ui-bg_glass_75_ffffff_1x400.png b/assets/css/images/ui-bg_glass_75_ffffff_1x400.png
diff --git a/assets/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/assets/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png
diff --git a/assets/css/images/ui-bg_inset-soft_95_fef1ec_1x100.png b/assets/css/images/ui-bg_inset-soft_95_fef1ec_1x100.png
diff --git a/assets/css/images/ui-icons_222222_256x240.png b/assets/css/images/ui-icons_222222_256x240.png
diff --git a/assets/css/images/ui-icons_2e83ff_256x240.png b/assets/css/images/ui-icons_2e83ff_256x240.png
diff --git a/assets/css/images/ui-icons_454545_256x240.png b/assets/css/images/ui-icons_454545_256x240.png
diff --git a/assets/css/images/ui-icons_888888_256x240.png b/assets/css/images/ui-icons_888888_256x240.png
diff --git a/assets/css/images/ui-icons_cd0a0a_256x240.png b/assets/css/images/ui-icons_cd0a0a_256x240.png
diff --git a/assets/css/images/ui-icons_f6cf3b_256x240.png b/assets/css/images/ui-icons_f6cf3b_256x240.png
diff --git a/assets/css/jquery-ui-1.10.0.custom.css b/assets/css/jquery-ui-1.10.0.custom.css
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,7 +1,8 @@
 var ContactManager = new Marionette.Application();
 
 ContactManager.addRegions({
-  mainRegion: "#main-region"
+  mainRegion: "#main-region",
+  dialogRegion: "#dialog-region"
 });
 
 ContactManager.navigate = function(route,  options){

diff --git a/assets/js/apps/contacts/edit/edit_view.js b/assets/js/apps/contacts/edit/edit_view.js
@@ -2,6 +2,10 @@ ContactManager.module("ContactsApp.Edit", function(Edit, ContactManager, Backbon
   Edit.Contact = Marionette.ItemView.extend({
     template: "#contact-form",
 
+    initialize: function(){
+      this.title = "Edit " + this.model.get("firstName") + " " + this.model.get("lastName");
+    },
+
     events: {
       "click button.js-submit": "submitClicked"
     },
@@ -12,6 +16,23 @@ ContactManager.module("ContactsApp.Edit", function(Edit, ContactManager, Backbon
       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;
 

diff --git a/assets/js/apps/contacts/list/list_controller.js b/assets/js/apps/contacts/list/list_controller.js
@@ -15,6 +15,26 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
           ContactManager.trigger("contact:show", model.get("id"));
         });
 
+        contactsListView.on("itemview:contact:edit", function(childView, model){
+          var view = new ContactManager.ContactsApp.Edit.Contact({
+            model: model,
+            asModal: true
+          });
+
+          view.on("form:submit", function(data){
+            if(model.save(data)){
+              childView.render();
+              ContactManager.dialogRegion.close();
+              childView.flash("success");
+            }
+            else{
+              view.triggerMethod("form:data:invalid", model.validationError);
+            }
+          });
+
+          ContactManager.dialogRegion.show(view);
+        });
+
         contactsListView.on("itemview:contact:delete", function(childView, model){
           model.destroy();
         });

diff --git a/assets/js/apps/contacts/list/list_view.js b/assets/js/apps/contacts/list/list_view.js
@@ -6,9 +6,19 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
     events: {
       "click": "highlightName",
       "click td a.js-show": "showClicked",
+      "click td a.js-edit": "editClicked",
       "click button.js-delete": "deleteClicked"
     },
 
+    flash: function(cssClass){
+      var $view = this.$el;
+      $view.hide().toggleClass(cssClass).fadeIn(800, function(){
+        setTimeout(function(){
+          $view.toggleClass(cssClass)
+        }, 500);
+      });
+    },
+
     highlightName: function(e){
       this.$el.toggleClass("warning");
     },
@@ -19,6 +29,12 @@ ContactManager.module("ContactsApp.List", function(List, ContactManager, Backbon
       this.trigger("contact:show", this.model);
     },
 
+    editClicked: function(e){
+      e.preventDefault();
+      e.stopPropagation();
+      this.trigger("contact:edit", this.model);
+    },
+
     deleteClicked: function(e){
       e.stopPropagation();
       this.trigger("contact:delete", this.model);