removed "form name" property, router dependency, property renaming

Author: ThomasPe

app/app-controller.es6

@@ -11,13 +11,20 @@ angular.module('schemaFormBuilderApp').controller('FormBuilderController',functi
 
 
   $scope.$watch(function () {
-    return $scope.form;
+    return $scope.schema;
   }, function (update) {
-    window.console.log(update);
+    window.console.log("schema udpated");
+    //window.console.log("Schema Update: " + JSON.stringify(update));
+    //window.console.log("Form Update: " + JSON.stringify($scope.form));
   }, true);
+  
+  $scope.newForm = function () {
+    $scope.model = {
+        fields: []
+      };
+  }
 
   $scope.model = {
-            name: 'Sample Form',
             type: 'schema-form',
             fields: [
               {

app/app-routes.es6

@@ -1,27 +1,24 @@
 (function () {
-    'use strict';    
-    
+  'use strict';  
 
   angular.module('schemaFormBuilder').directive('sfbSchema',['Converter', function(Converter){
     return {
       restrict: 'A',
       scope: {
-        schema: '=sfbSchema',
-        form: '=sfbForm',
-        model: '=sfbModel'
+        sfbSchema: '=sfbSchema',
+        sfbForm: '=sfbForm',
+        builderModel: '=sfbModel'
       },
-      //template: '<h1>Test</h1>'
       templateUrl: 'builder/builder.tpl.html',
       link: function (scope, element, attrs) {
 
     var vm = scope;
 
     // sample form
-    vm.sampleForm = scope.model;
-    window.console.log(JSON.stringify(vm.sampleForm));
+    scope.sampleForm = scope.builderModel;
 
     // describing properties of each form field
-    vm.schema = {
+    scope.builderSchema = {
       type: 'object',
       title: 'Comment',
       properties: {
@@ -159,21 +156,10 @@
     };
 
     // holding properties of each form field
-    vm.model = {};
+    scope.model = {};
 
     // describing the layout of the builder fields
-    vm.form = [{
-      type: 'section',
-      htmlClass: 'row main-info',
-      items: [{
-        key: 'name',
-        htmlClass: 'col-sm-6',
-        placeholder: 'name of the form',
-        notitle: true,
-        fieldHtmlClass: 'field-name',
-        labelHtmlClass: 'field-name-label'
-      }]
-    }, {
+    scope.builderForm = [{
       type: 'section',
       htmlClass: 'my-field row',
       items: [{
@@ -183,17 +169,6 @@
           type: 'help',
           helpvalue: '<h4>My Fields:</h4>'
         }]
-      }, {
-        type: 'section',
-        htmlClass: 'col-sm-6',
-        items: [{
-          type: 'button',
-          onClick: function onClick() {
-            vm.instructionsVisible = true;
-          },
-          style: 'btn-success btn-sm pull-right',
-          title: 'Generate Schema'
-        }]
       }]
     }, {
       key: 'fields',
@@ -319,27 +294,20 @@
     }];
 
     // the resulting schema and form definitions
-    vm.output = { schema: {}, form: [] };
-
-    vm.newForm = function () {
-      vm.model = {
-        fields: []
-      };
-      console.log(vm.model);
-    };
-
-    if (!vm.model.name) {
-      vm.model = vm.sampleForm;
-    }
+    scope.output = { schema: {}, form: [] };
 
     function generateOutput(update) {
-      vm.output = Converter.generateFields(update);
-      console.log(vm.output);
-      vm.display = angular.copy(vm.output);
+      scope.output = Converter.generateFields(update);
+      //console.log(JSON.stringify(scope.output));
+      scope.sfbSchema = angular.copy(scope.output.schema);
+      console.log("sfbSchema: " + JSON.stringify(scope.sfbSchema));
+      scope.sfbForm = angular.copy(scope.output.form);
+      console.log("sfbForm: " + JSON.stringify(scope.sfbForm));
+      window.console.log("generate output");
     }
 
     scope.$watch(function () {
-      return vm.model;
+      return scope.builderModel;  
     }, function (update) {
       generateOutput(update);
     }, true);

app/builder/builder-directive.es6

@@ -10,7 +10,6 @@
     .module('schemaFormBuilder', [
       'schemaForm',
       'ui.bootstrap',
-      'ui.router',
       'ui.sortable'
     ]);
 

app/builder/builder-module.es6

@@ -4,15 +4,14 @@
         <div class="row">
             <div class="col-sm-6 schemaFormBuilder">
                 <form name="builderForm">
-                    <div sf-schema="schema" sf-form="form" sf-model="model"
+                    <div sf-schema="builderSchema" sf-form="builderForm" sf-model="builderModel"
                          sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"></div>
                 </form>
-                <a class="btn btn-sm btn-primary pull-right" ng-click="builder.newForm()">New Form</a>
             </div>
             <div class="col-sm-6 preview">
                 <h4>preview</h4>
-                <div sf-schema="display.schema" sf-form="display.form"
-                     sf-model="display.model"></div>
+                <div sf-schema="sfbSchema" sf-form="sfbForm"
+                     sf-model="sfbModel"></div>
             </div>
         </div>
     </div>

app/builder/builder.tpl.html

@@ -13,10 +13,11 @@
     <!-- endinject -->
   </head>
   <body>
+  
   <div ng-controller="FormBuilderController">
-      <div sfb-schema="schema" sfb-form="form" sfb-model="model"></form>
-  </div>
-
+    <a class="btn btn-sm btn-primary pull-right" ng-click="newForm()">New Form</a>
+    <div sfb-schema="schema" sfb-form="form" sfb-model="model"></form>
+    </div>
   </div>
 
     <!-- bower:js -->

app/index.html

@@ -15,7 +15,7 @@ body{
       text-transform: uppercase;
     }
     .schemaFormBuilder{
-      height:calc(100vh - 80px);
+      height:calc(100%);
       border-right:1px solid #ccc;
       overflow-y:auto;
       .my-field{
@@ -99,27 +99,13 @@ body{
     }
     .preview{
       background: #eee;
-      height:calc(100vh - 80px);
+      height:calc(100%);
       overflow-y:auto;
       input, textarea{
         background:none;
       }
     }
   }
-  .instructions{
-    display:none;
-    width:100%;
-    height:calc(100vh - 80px);
-    background:#eee;
-    position: absolute;
-    top:80px;
-    left:0;
-    overflow-y:auto;
-    z-index:2;
-  }
-  .instructions.visible{
-    display: block;
-  }
 }
 
 .hide-label{