Fix some errors

src/main/scss/main.scss

@@ -112,6 +112,10 @@ $icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/"
   margin-bottom: 0;
 }
 
+.conditional {
+  margin-bottom: 0;
+  padding-top: 7px;
+}
 
 //  /angular-form-gen
 body {

src/main/webapp/scripts/components/wizardEditor/simpleConditional/simpleConditional-directive.js

@@ -5,27 +5,16 @@ angular.module('ddaApp').directive('ddaSimpleConditional', function(Wizard, Step
   function link(scope, element, attr) {
     scope.steps = [];
     scope.elements = [];
-    scope.formdata = {};
+    scope.embeddedForm = {
+      'schema': {},
+      'data' : {}
+    };
 
-    scope.$watch('field.element', function(newVal, oldVal) {
-      if(newVal !== oldVal) {
-        scope.field.value = null;
-      } else {
-        newVal.value = scope.field.value;
-      }
-
-      scope.myForm = {
-        schema: {
-          'fields': [newVal]
-        }
-      };
-    });
-
-    scope.$watch('formdata', function(newVal, oldVal) {
-      if(newVal[scope.field.element.name] && newVal[scope.field.element.name] !== null) {
-        scope.field.value = newVal[scope.field.element.name];
-      }
-    }, true);
+    if (scope.field.element) {
+      scope.embeddedForm.schema.fields = [scope.field.element];
+      scope.embeddedForm.data[scope.field.element.name] = scope.field.value;
+    }
+    console.log(scope.embeddedForm);
 
     Wizard.steps({
       id: $state.params.id
@@ -46,16 +35,34 @@ angular.module('ddaApp').directive('ddaSimpleConditional', function(Wizard, Step
       });
 
       Step.elementsFromSteps(stepIds, function(elements) {
-        scope.elements = elements;
+        scope.elements = elements.filter(function(element) {
+          return element.type !== 'simpleConditional' || element.step.id !== Number($state.params.stepId);
+        });
       });
     });
+
+    scope.$watch('field.element', function(newElement, oldElement) {
+      if(newElement !== oldElement) {
+        scope.embeddedForm.schema.fields = [];
+        scope.embeddedForm.data = {};
+      }
+
+      if (newElement) {
+        scope.embeddedForm.schema.fields = [newElement];
+      }
+    });
+
+    scope.$watch('embeddedForm.data', function(newFormData, oldFormData) {
+      if (scope.field.element && newFormData[scope.field.element.name]) {
+        scope.field.value = newFormData[scope.field.element.name];
+      } else {
+        scope.field.value = null;
+      }
+    }, true);
   }
 
   var directive = {
-    link: link,
-    // templateUrl: '/template/is/located/here.html',
-    // template: 'Test: {{ selectedStep }}',
-    // restrict: 'EA' default Angular 1.3+
+    link: link
   };
   return directive;
 });

src/main/webapp/scripts/components/wizardEditor/simpleConditional/simpleConditional-properties.ng.html

@@ -3,36 +3,30 @@
     <div fg-property-field-common="{ fieldname: true }"></div>
 
     <div dda-simple-conditional="">
-      <div fg-property-field="element" fg-property-field-label="If Element">
-        <select class="form-control" name="element" ng-model="field.element" ng-options="element as element.name group by element.step.name for element in elements  track by element.id">
-          <!-- <option value=""></option> -->
+      <div fg-property-field="fieldElement" fg-property-field-label="If Element">
+        <select class="form-control" name="fieldElement" ng-model="field.element" ng-options="element as element.name group by element.step.name for element in elements  track by element.id">
+          <option value=""></option>
         </select>
       </div>
 
-      <div fg-property-field="fg-property-field-value" fg-property-field-label="Has value">
-        <!-- <form novalidate class="form-horizontal" name="exampleForm"> -->
-          <!-- <fieldset> -->
-            <div fg-form="" name="fieldValue" fg-form-data="formdata" fg-schema="myForm.schema"></div>
-          <!-- </fieldset> -->
-        <!-- </form> -->
+      <div fg-property-field="fieldValue" fg-property-field-label="Has value">
+        <div fg-form="" name="fieldValue" ng-model="field.value" fg-form-data="embeddedForm.data" fg-schema="embeddedForm.schema"></div>
       </div>
 
-      <div fg-property-field="nextStep" fg-property-field-label="Then go to">
-        <select class="form-control" name="nextStep" ng-model="field.nextStep" ng-options="step as step.name for step in steps track by step.id">
-          <!-- <option value=""></option> -->
+      <div fg-property-field="fieldNextStep" fg-property-field-label="Then go to">
+        <select class="form-control" name="fieldNextStep" ng-model="field.nextStep" ng-options="step as step.name for step in steps track by step.id">
         </select>
       </div>
 
-      <div fg-property-field="hidden" fg-property-field-label="">
+      <div fg-property-field="fieldHidden" fg-property-field-label="">
         <div class="checkbox">
           <label title="Set the initial value of this field.">
-            <input type="checkbox" name="hidden" ng-model="field.hidden"/>
-            Hide element in from preview
+            <input type="checkbox" name="fieldHidden" ng-model="field.hidden"/>
+            Hide element in form preview
           </label>
         </div>
       </div>
     </div>
 
-
   </div>
 </div>

src/main/webapp/scripts/components/wizardEditor/simpleConditional/simpleConditional-template.ng.html

-<div id="{{ field.$_id }}" style="margin-bottom: 0px; padding-top: 7px" >
-    IF <ins>{{ field.schema.element.name }}</ins>
-    HAS VALUE <ins>{{ field.schema.value }}</ins>
-    GO TO <ins>{{ field.schema.nextStep.name }}</ins>
-
+<div id="{{ field.$_id }}" class="conditional" ng-class="{ 'hide-condition': field.schema.hidden }">
+    <span ng-show="field.schema.element.name">If <ins>{{ field.schema.element.name }}</ins> has value <span ng-show="!field.schema.value">&lt;?&gt;</span><ins>{{ field.schema.value }}</ins></span>
+    <span ng-show="field.schema.nextStep.name">go to <ins>{{ field.schema.nextStep.name }}</ins></span>
+    <span ng-show="!field.schema.hidden">| <i class="fa fa-eye"></i></span>
 <!-- <div jsonify="form.schema.fields"></div> -->
 <!-- <div jsonify="field.schema"></div> -->
 <!-- <div jsonify="form.data[field.schema.name]"></div> -->
-<!-- <p>
-  <i class="fa" ng-class="{ 'fa-eye-slash': field.schema.hidden, 'fa-eye': !field.schema.hidden }"></i>
-</p> -->
 </div>
 
-<!-- TODO: Update step, when name of next step change -->
 <!-- TODO: See isolated scope http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs -->
 <!-- TODO: Get steps from wizardEditor controller through attributs, don-t use wizard or step servoce -->