create select for add unrequired properties

gadget_json_generated_form.js

@@ -274,9 +274,56 @@
       key,
       required = json_field.required || [],
       used_properties = {},
-      unused_properties = [],
-      queue = RSVP.Queue();
+      queue = RSVP.Queue(),
+      scope = "property_add_" + Math.random().toString(36).substr(2, 9),
+      selector = {
+        event: function () {
+          return g.getDeclaredGadget(scope)
+            .push(function (z) {
+              return z.getContent()
+                .push(function (value) {
+                  var key = value[scope];
+                  used_properties[key] = "";
+                  return addSubForm({
+                    gadget: g,
+                    property_name: key,
+                    path: path,
+                    schema_part: json_field.properties[key]
+                  });
+                })
+                .push(function (element) {
+                  z.element.parentNode.insertBefore(element, z.element);
+                });
+            })
+            .push(selector.rerender);
+        },
+        rerender: function () {
+          return g.getDeclaredGadget(scope)
+            .push(function (g) {
+              var key,
+                item_list = [["add property", "add property"]];
+              for (key in json_field.properties) {
+                if (json_field.properties.hasOwnProperty(key) &&
+                  !used_properties.hasOwnProperty(key)) {
+                  item_list.push([key, key]);
+                }
+              }
+              return g.render({
+                name: scope,
+                editable: true,
+                hidden: item_list.length <= 1,
+                value: item_list[0][1],
+                item_list: item_list
+              })
+              //not need if gadget_html5_select.render return element
+                .push(function () {
+                  return g.element;
+                });
+            });
+        }
+      };
 
+    g.props.add_property_selections[scope] = selector;
     g.props.objects[path] = used_properties;
 
     function root_append(child) {
@@ -352,18 +399,6 @@
       default_dict = {};
     }
 
-    function generate_property_selection(properties) {
-      var input;
-      if (properties.length > 0) {
-        input = render_selection({
-          enum: properties
-        });
-      }
-      if (input) {
-        root_append(input);
-      }
-    }
-
     for (key in json_field.properties) {
       if (json_field.properties.hasOwnProperty(key)) {
         if (required.indexOf(key) >= 0) {
@@ -388,12 +423,16 @@
               })
             )
             .push(root_append);
-        } else {
-          unused_properties.push(key);
         }
       }
     }
-    generate_property_selection(unused_properties);
+
+    queue
+      .push(function () {
+        return g.declareGadget("gadget_html5_select.html", {scope: scope});
+      })
+      .push(selector.rerender)
+      .push(root_append);
 
     if (json_field.patternProperties !== undefined) {
       if (json_field.patternProperties['.*'] !== undefined) {
@@ -656,10 +695,12 @@
     })
     .declareAcquiredMethod("deleteChildrenParent", "deleteChildren")
     .allowPublicAcquisition("deleteChildren", function (scope) {
-      var key,
+      var g = this,
+        key,
         objects = this.props.objects,
         element = getSubGadgetElement(this, scope),
-        parent = element.getAttribute('data-json-parent');
+        parent = element.getAttribute("data-json-parent"),
+        tasks = [];
       // TODO strange rjs behavior
       scope = scope[0];
       if (objects.hasOwnProperty(parent)) {
@@ -671,6 +712,14 @@
         }
       }
       element.parentNode.removeChild(element);
+      for (key in g.props.add_property_selections) {
+        if (g.props.add_property_selections.hasOwnProperty(key)) {
+          tasks.push(g.props
+            .add_property_selections[key]
+            .rerender());
+        }
+      }
+      return RSVP.All(tasks);
     })
     .declareMethod("selfRemove", function () {
       return this.deleteChildrenParent(this.element.getAttribute('data-gadget-scope'));
@@ -745,6 +794,17 @@
         });
     })
 
+    .allowPublicAcquisition("notifyValid", function (arr, sub_scope) {
+    })
+    .allowPublicAcquisition("notifyChange", function (arr, sub_scope) {
+      var g = this,
+        opt = arr[0];
+      if (opt.type === "change") {
+        return g.props
+          .add_property_selections[sub_scope]
+          .event();
+      }
+    })
     .declareMethod('renderForm', function (options) {
       var g = this,
         property_name = g.element.getAttribute('data-json-property-name'),
@@ -753,6 +813,7 @@
         root;
       g.props.inputs = [];
       g.props.add_buttons = [];
+      g.props.add_property_selections = {};
       g.props.arrays = {};
       g.props.objects = {};
       g.props.path = options.path; // self gadget scope