#5445: Fixed form field binding issues.

This fixes two issues:
1. Adding a Form element (and selecting the content type to create using the submitted values) and then adding a form element would not cause the Bindings tab to appear.
2. Adding nested containers (such as Grid, Row and Column) to a Form element would prevent the Bindings tab from appearing when adding a form field element such as TextField to a nested container.

Work Item: #5445

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/LayoutEditor.min.js

@@ -1 +1 @@
-var LayoutEditor;!function(e,t){t.Fieldset=function(n,i,o,r,l,a,c,d,s,m,h){t.Element.call(this,"Fieldset",n,i,o,r,l),t.Container.call(this,["Grid","Content"],h);var u=this;this.isContainable=!0,this.dropTargetClass="layout-common-holder",this.contentType=c,this.contentTypeLabel=d,this.contentTypeClass=s,this.legend=a||"",this.hasEditor=m,this.toObject=function(){var e=this.elementToObject();return e.legend=this.legend,e.children=this.childrenToObject(),e};var p=this.getEditorObject;this.getEditorObject=function(){var t=p();return e.extend(t,{Legend:this.legend})},this.setChildren=function(e){this.children=e,_(this.children).each(function(e){e.parent=u})},this.setChildren(h)},t.Fieldset.from=function(e){return new t.Fieldset(e.data,e.htmlId,e.htmlClass,e.htmlStyle,e.isTemplated,e.legend,e.contentType,e.contentTypeLabel,e.contentTypeClass,e.hasEditor,t.childrenFrom(e.children))},t.registerFactory("Fieldset",function(e){return t.Fieldset.from(e)})}(jQuery,LayoutEditor||(LayoutEditor={}));var LayoutEditor;!function(e,t){t.Form=function(n,i,o,r,l,a,c,d,s,m,h,u){t.Element.call(this,"Form",n,i,o,r,l),t.Container.call(this,["Grid","Content"],u);var p=this;this.isContainable=!0,this.dropTargetClass="layout-common-holder",this.contentType=d,this.contentTypeLabel=s,this.contentTypeClass=m,this.name=a||"Untitled",this.formBindingContentType=c,this.hasEditor=h,this.toObject=function(){var e=this.elementToObject();return e.name=this.name,e.formBindingContentType=this.formBindingContentType,e.children=this.childrenToObject(),e};var f=this.getEditorObject;this.getEditorObject=function(){var t=f();return e.extend(t,{FormName:this.name,FormBindingContentType:this.formBindingContentType})},this.setChildren=function(e){this.children=e,_(this.children).each(function(e){e.parent=p,p.linkChild(e)})},this.linkChild=function(t){var n=t.getEditorObject;t.getEditorObject=function(){var t=n();return e.extend(t,{FormBindingContentType:p.formBindingContentType})}},this.setChildren(u)},t.Form.from=function(e){return new t.Form(e.data,e.htmlId,e.htmlClass,e.htmlStyle,e.isTemplated,e.name,e.formBindingContentType,e.contentType,e.contentTypeLabel,e.contentTypeClass,e.hasEditor,t.childrenFrom(e.children))},t.registerFactory("Form",function(e){return t.Form.from(e)})}(jQuery,LayoutEditor||(LayoutEditor={})),angular.module("LayoutEditor").directive("orcLayoutFieldset",["$compile","scopeConfigurator","environment",function(e,t,n){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(e,n){t.configureForElement(e,n),t.configureForContainer(e,n),e.sortableOptions.axis="y",e.edit=function(){e.$root.editElement(e.element).then(function(t){t.cancel||(e.element.data=decodeURIComponent(t.element.data),e.element.legend=t.elementEditorModel.legend,e.$apply())})}}],templateUrl:n.templateUrl("Fieldset"),replace:!0}}]),angular.module("LayoutEditor").directive("orcLayoutForm",["$compile","scopeConfigurator","environment",function(e,t,n){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(e,n){t.configureForElement(e,n),t.configureForContainer(e,n),e.sortableOptions.axis="y",e.edit=function(){e.$root.editElement(e.element).then(function(t){t.cancel||(e.element.data=decodeURIComponent(t.element.data),e.element.name=t.elementEditorModel.name,e.element.formBindingContentType=t.elementEditorModel.formBindingContentType,e.$apply())})}}],templateUrl:n.templateUrl("Form"),replace:!0}}]);
+var LayoutEditor;!function(e,t){t.Fieldset=function(n,i,o,r,l,d,a,c,s,h,m){t.Element.call(this,"Fieldset",n,i,o,r,l),t.Container.call(this,["Grid","Content"],m);var u=this;this.isContainable=!0,this.dropTargetClass="layout-common-holder",this.contentType=a,this.contentTypeLabel=c,this.contentTypeClass=s,this.legend=d||"",this.hasEditor=h,this.toObject=function(){var e=this.elementToObject();return e.legend=this.legend,e.children=this.childrenToObject(),e};var p=this.getEditorObject;this.getEditorObject=function(){var t=p();return e.extend(t,{Legend:this.legend})},this.setChildren=function(e){this.children=e,_(this.children).each(function(e){e.parent=u})},this.applyElementEditorModel=function(e){this.legend=e.legend},this.setChildren(m)},t.Fieldset.from=function(e){return new t.Fieldset(e.data,e.htmlId,e.htmlClass,e.htmlStyle,e.isTemplated,e.legend,e.contentType,e.contentTypeLabel,e.contentTypeClass,e.hasEditor,t.childrenFrom(e.children))},t.registerFactory("Fieldset",function(e){return t.Fieldset.from(e)})}(jQuery,LayoutEditor||(LayoutEditor={}));var LayoutEditor;!function(e,t){t.Form=function(n,i,o,r,l,d,a,c,s,h,m,u){t.Element.call(this,"Form",n,i,o,r,l),t.Container.call(this,["Grid","Content"],u);var p=this;this.isContainable=!0,this.dropTargetClass="layout-common-holder",this.contentType=c,this.contentTypeLabel=s,this.contentTypeClass=h,this.name=d||"Untitled",this.formBindingContentType=a,this.hasEditor=m,this.toObject=function(){var e=this.elementToObject();return e.name=this.name,e.formBindingContentType=this.formBindingContentType,e.children=this.childrenToObject(),e};var f=this.getEditorObject;this.getEditorObject=function(){var t=f();return e.extend(t,{FormName:this.name,FormBindingContentType:this.formBindingContentType})},this.setChildren=function(e){this.children=e,_(this.children).each(function(e){e.setParent(p)})},this.onDescendantAdded=function(t){var n=t.getEditorObject;t.getEditorObject=function(){var t=n();return e.extend(t,{FormBindingContentType:p.formBindingContentType})}},this.applyElementEditorModel=function(e){this.name=e.name,this.formBindingContentType=e.formBindingContentType},this.setChildren(u)},t.Form.from=function(e){return new t.Form(e.data,e.htmlId,e.htmlClass,e.htmlStyle,e.isTemplated,e.name,e.formBindingContentType,e.contentType,e.contentTypeLabel,e.contentTypeClass,e.hasEditor,t.childrenFrom(e.children))},t.registerFactory("Form",function(e){return t.Form.from(e)})}(jQuery,LayoutEditor||(LayoutEditor={})),angular.module("LayoutEditor").directive("orcLayoutFieldset",["$compile","scopeConfigurator","environment",function(e,t,n){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(e,n){t.configureForElement(e,n),t.configureForContainer(e,n),e.sortableOptions.axis="y",e.edit=function(){e.$root.editElement(e.element).then(function(t){t.cancel||e.$apply(function(){e.element.data=decodeURIComponent(t.element.data),e.element.applyElementEditorModel(t.elementEditorModel)})})}}],templateUrl:n.templateUrl("Fieldset"),replace:!0}}]),angular.module("LayoutEditor").directive("orcLayoutForm",["$compile","scopeConfigurator","environment",function(e,t,n){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(e,n){t.configureForElement(e,n),t.configureForContainer(e,n),e.sortableOptions.axis="y",e.edit=function(){e.$root.editElement(e.element).then(function(t){t.cancel||e.apply(function(){e.element.data=decodeURIComponent(t.element.data),e.element.applyElementEditorModel(t.elementEditorModel)})})}}],templateUrl:n.templateUrl("Form"),replace:!0}}]);

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/LayoutEditor/Directives/Fieldset.js

@@ -14,9 +14,10 @@
                             $scope.$root.editElement($scope.element).then(function (args) {
                                 if (args.cancel)
                                     return;
-                                $scope.element.data = decodeURIComponent(args.element.data);
-                                $scope.element.legend = args.elementEditorModel.legend;
-                                $scope.$apply();
+                                $scope.$apply(function() {
+                                    $scope.element.data = decodeURIComponent(args.element.data);
+                                    $scope.element.applyElementEditorModel(args.elementEditorModel);
+                                });
                             });
                         };
                     }

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/LayoutEditor/Directives/Form.js

@@ -14,10 +14,11 @@
                             $scope.$root.editElement($scope.element).then(function (args) {
                                 if (args.cancel)
                                     return;
-                                $scope.element.data = decodeURIComponent(args.element.data);
-                                $scope.element.name = args.elementEditorModel.name;
-                                $scope.element.formBindingContentType = args.elementEditorModel.formBindingContentType;
-                                $scope.$apply();
+
+                                $scope.apply(function() {
+                                    $scope.element.data = decodeURIComponent(args.element.data);
+                                    $scope.element.applyElementEditorModel(args.elementEditorModel);
+                                });
                             });
                         };
                     }

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/LayoutEditor/Models/Fieldset.js

@@ -37,6 +37,10 @@
             });
         };
 
+        this.applyElementEditorModel = function(model) {
+            this.legend = model.legend;
+        };
+
         this.setChildren(children);
     };
 

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/LayoutEditor/Models/Form.js

@@ -36,12 +36,11 @@
         this.setChildren = function (children) {
             this.children = children;
             _(this.children).each(function (child) {
-                child.parent = self;
-                self.linkChild(child);
+                child.setParent(self);
             });
         };
 
-        this.linkChild = function(element) {
+        this.onDescendantAdded = function(element) {
             var getEditorObject = element.getEditorObject;
             element.getEditorObject = function () {
                 var dto = getEditorObject();
@@ -51,6 +50,11 @@
             };
         };
 
+        this.applyElementEditorModel = function(model) {
+            this.name = model.name;
+            this.formBindingContentType = model.formBindingContentType;
+        };
+
         this.setChildren(children);
     };
 

src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor/Services/ScopeConfigurator.js

@@ -236,12 +236,14 @@
                                         // Because of this, we need to invoke "setParent" so that specific container types can perform element speficic initialization.
                                         receivedElement.setEditor(element.editor);
                                         receivedElement.setParent(element);
+
                                         if (!!receivedElement.hasEditor) {
                                             $scope.$root.editElement(receivedElement).then(function (args) {
                                                 if (!args.cancel) {
                                                     receivedElement.data = args.element.data;
+                                                    receivedElement.applyElementEditorModel(args.elementEditorModel);
 
-                                                    if (receivedElement.setHtml)
+                                                    if (!!receivedElement.setHtml)
                                                         receivedElement.setHtml(args.element.html);
                                                 }
                                                 $timeout(function () {

src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Container.js

@@ -7,12 +7,15 @@
         this.children = children;
         this.isContainer = true;
 
-        var _self = this;
+        var self = this;
+
+        this.onChildAdded = function (element) { /* Virtual */ };
+        this.onDescendantAdded = function (element, parentElement) { /* Virtual */ };
 
         this.setChildren = function (children) {
             this.children = children;
             _(this.children).each(function (child) {
-                child.parent = _self;
+                child.setParent(self);
             });
         };
 
@@ -29,7 +32,7 @@
                 this.children.push(child);
             child.setEditor(this.editor);
             child.setIsTemplated(false);
-            child.parent = this;
+            child.setParent(this);
         };
 
         this.deleteChild = function (child) {

src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models/Element.js

@@ -27,9 +27,13 @@
 
         this.setParent = function(parentElement) {
             this.parent = parentElement;
+            this.parent.onChildAdded(this);
 
-            if (!!this.parent.linkChild)
-                this.parent.linkChild(this);
+            var currentAncestor = parentElement;
+            while (!!currentAncestor) {
+                currentAncestor.onDescendantAdded(this, parentElement);
+                currentAncestor = currentAncestor.parent;
+            }
         };
 
         this.setIsTemplated = function (value) {
@@ -41,6 +45,8 @@
             }
         };
 
+        this.applyElementEditorModel = function() { /* Virtual */ };
+
         this.getIsActive = function () {
             if (!this.editor)
                 return false;