Edit View - Add buttons and calls controller (saves bindings)

2 files changed, 115 insertions, 10 deletions

diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
index d07f4445..604d4871 100644
--- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
@@ -18,7 +18,10 @@
                     "boundObjectField"  : {"@": "boundObjectField" },
                     "sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" },
                     "boundObjectPropertyPathField"  : {"@": "boundObjectPropertyPathField" },
-                    "directionCheckbox"  : {"@": "directionCheckbox" }
+                    "directionCheckbox"  : {"@": "directionCheckbox" },
+                    "saveButton":{ "@": "saveButton" },
+                    "cancelButton":{ "@": "cancelButton" },
+                    "deleteButton":{ "@": "deleteButton" }
                 }
             },
             "sourceObjectField": {
@@ -96,11 +99,40 @@
                     "checked": {"<-": "@owner.oneway"}
                 }
             },
-            "closeButton" : {
+            "cancelButton" : {
                 "prototype": "montage/ui/button.reel",
                 "properties": {
-                    "element": {"#": "close-button" },
-                    "identifier": "closeButton"
+                    "element": {"#": "cancel-button" },
+                    "identifier": "cancelButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
+            },
+            "deleteButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "delete-button" },
+                    "identifier": "deleteButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
+            },
+            "saveButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "save-button" },
+                    "identifier": "saveButton"
+                },
+                "bindings" : {
+                    "enabled": {"<<->": "@owner.dirty"}
                 },
                 "listeners": [
                     {
@@ -139,7 +171,9 @@
         </li>
     </ul>
 
-    <button data-montage-id="close-button" class="nj-skinned">Close</button>
+    <button data-montage-id="delete-button" class="nj-skinned .btn-delete">Delete</button>
+    <button data-montage-id="cancel-button" class="nj-skinned">Cancel</button>
+    <button data-montage-id="save-button" class="nj-skinned">Save</button>
 
 </div>
 </body>
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.js b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js
index c3ef7384..c9f946f5 100644
--- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.js
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js
@@ -83,13 +83,16 @@ exports.EditBindingView = Montage.create(Component, {
             this.sourceObjectField.hints = this.objectIdentifiers;
 
             if(value.sourceObject) {
-                this.sourceObjectIdentifier = value.sourceObject.identifier || '';
+                this.sourceObjectIdentifier = value.sourceObject.identifier || value.sourceObject._montage_metadata.label;
                 this.sourceObjectPropertyPath = value.sourceObjectPropertyPath || '';
             }
 
             if(value.boundObject) {
                 this.boundObjectIdentifier = value.boundObject.identifier || '';
                 this.boundObjectPropertyPath = value.boundObjectPropertyPath || '';
+                this.isNewBinding = false;
+            } else {
+                this.isNewBinding = true;
             }
 
             this.oneway = value.oneway;
@@ -99,14 +102,20 @@ exports.EditBindingView = Montage.create(Component, {
     },
 
     /* -------------------
-     Save/Close button handlers
+     Form properties
      ------------------- */
 
+    dirty: { value: null },
+    isNewBinding : { value: null },
+
     "sourceObjectField"             : {value: null, enumerable: true },
     "boundObjectField"              : {value: null, enumerable: true },
     "sourceObjectPropertyPathField" : {value: null, enumerable: true },
     "boundObjectPropertyPathField"  : {value: null, enumerable: true },
     "directionCheckbox"             : {value: null, enumerable: true },
+    "deleteButton"                  : {value: null },
+    "saveButton"                    : {value: null },
+    "cancelButton"                  : {value: null },
 
     clearForm : {
         value: function() {
@@ -115,24 +124,86 @@ exports.EditBindingView = Montage.create(Component, {
                     field.value = '';
                 }
             }
+            this.dirty = false;
+        }
+    },
+
+    saveForm : {
+        value: function() {
+            var controller = this.application.ninja.objectsController,
+                newBindingArgs = {
+                sourceObject : this.getObjectFromIdentifierValue(this.sourceObjectField.value),
+                sourceObjectPropertyPath : this.sourceObjectPropertyPathField.value,
+                boundObject : this.getObjectFromIdentifierValue(this.boundObjectField.value),
+                boundObjectPropertyPath : this.boundObjectPropertyPathField.value,
+                oneway: this.oneway
+            };
+
+            if(this.isNewBinding) {
+                controller.addBinding(newBindingArgs);
+            } else {
+                controller.editBinding(this.bindingArgs, newBindingArgs);
+            }
+
+            controller.currentObject = controller.currentObject;
+        }
+    },
+
+    getObjectFromIdentifierValue : {
+        value: function(id) {
+            var identifiers = this.getObjectIdentifiers(),
+                objects = this.application.ninja.objectsController.objects;
+
+            return objects[identifiers.indexOf(id)];
         }
     },
 
     /* -------------------
-     Save/Close button handlers
+     Save/Cancel/Delete button handlers
      ------------------- */
 
-    handleCloseButtonAction : {
+    handleCancelButtonAction : {
+        value: function(e) {
+            this.clearForm();
+            this.parentComponent.editing = false;
+        }
+    },
+
+    handleDeleteButtonAction : {
+        value: function(e) {
+            var controller = this.application.ninja.objectsController;
+
+            controller.removeBinding(this.bindingArgs);
+            controller.currentObject = controller.currentObject;
+
+            this.parentComponent.editing = false;
+        }
+    },
+    handleSaveButtonAction : {
         value: function(e) {
+            this.saveForm();
             this.parentComponent.editing = false;
         }