add rename property feature

gadget_json_generated_form.js

@@ -122,8 +122,14 @@
     div = document.createElement("div");
     div.setAttribute("class", "subfield");
     div.title = json_field.description;
+    if (key && !first_path) {
+      label = document.createElement("input");
+      label.value = key;
+      gadget.props.property_name_edit = label;
+    } else {
       label = document.createElement("label");
       label.textContent = json_field.title || key;
+    }
     div.appendChild(label);
     div_input = document.createElement("div");
     div_input.setAttribute("class", "input");
@@ -210,9 +216,9 @@
       });
   }
 
-  function render_object(gadget, json_field, default_dict, root, path) {
+  function render_object(g, json_field, default_dict, root, path) {
     var key,
-      default_used_list = [],
+      used_properties = {},
       queue = RSVP.Queue();
 
     function addAdditional(schema) {
@@ -237,7 +243,7 @@
         " ui-btn-icon-notext ui-icon-btn ui-icon-plus ui-input-btn");
       input.type = "button";
       input.name = path;
-      gadget.props.add_buttons.push({
+      g.props.add_buttons.push({
         element: input,
         schema_part: schema
       });
@@ -246,12 +252,12 @@
 
 
       for (key in default_dict) {
-        if (default_dict.hasOwnProperty(key) && default_used_list.indexOf(key) < 0) {
-          default_used_list.push(key);
+        if (default_dict.hasOwnProperty(key) && !used_properties.hasOwnProperty(key)) {
+          used_properties[key] = "";
           queue
             .push(
-              addSubForm.bind(gadget, gadget, {
-                key: key,
+              addSubForm.bind(g, g, {
+                property_name: key,
                 path: path,
                 element: input,
                 schema_part: schema,
@@ -271,12 +277,12 @@
 
     for (key in json_field.properties) {
       if (json_field.properties.hasOwnProperty(key)) {
-        default_used_list.push(key);
+        used_properties[key] = false;
         if (json_field.properties[key].default !== undefined) {
           json_field.properties[key].info = '(default = ' + json_field.properties[key].default + ')';
         }
         queue
-          .push(render_field.bind(gadget, gadget, key, path,
+          .push(render_field.bind(g, g, key, path,
             json_field.properties[key], default_dict[key], root)
           );
       }
@@ -285,17 +291,19 @@
       if (json_field.patternProperties['.*'] !== undefined) {
         addAdditional(json_field.patternProperties['.*']);
       }
+      g.props.objects[path] = used_properties;
     }
 
     if (json_field.additionalProperties !== undefined && json_field.additionalProperties.type) {
       addAdditional(json_field.additionalProperties);
+      g.props.objects[path] = used_properties;
     }
 
     for (key in default_dict) {
       if (default_dict.hasOwnProperty(key)) {
-        if (default_used_list.indexOf(key) < 0 ) {
+        if (!used_properties.hasOwnProperty(key)) {
           queue
-            .push(render_field.bind(gadget, gadget, key, path, {
+            .push(render_field.bind(g, g, key, path, {
                 "type": "string",
                 "info": "(Not part of the schema)"
               }, default_dict[key], root)
@@ -311,6 +319,8 @@
       scope,
       options = g.props,
       array,
+      path,
+      key,
       i,
       len,
       queue = RSVP.Queue();
@@ -336,13 +346,16 @@
       }
     }
 
-    function recursiveGetContent(gadget, scope) {
+    function recursiveGetContent(scope, path) {
       queue
         .push(function () {
+          return g.getDeclaredGadget(scope);
+        })
+        .push(function (gadget) {
           return gadget.getContent();
         })
         .push(function (jdict) {
-          convertOnMultiLevel(multi_level_dict, scope, jdict);
+          convertOnMultiLevel(multi_level_dict, path, jdict);
         });
     }
 
@@ -379,9 +392,16 @@
       }
     }
 
-    for (scope in options.subforms) {
-      if (options.subforms.hasOwnProperty(scope)) {
-        recursiveGetContent(options.subforms[scope], scope);
+    for (path in options.objects) {
+      if (options.objects.hasOwnProperty(path)) {
+        for (key in options.objects[path]) {
+          if (options.objects[path].hasOwnProperty(key)) {
+            scope = options.objects[path][key];
+            if (scope) {
+              recursiveGetContent(scope, path + encodeJsonPointer(key));
+            }
+          }
+        }
       }
     }
 
@@ -419,21 +439,32 @@
 
   function addSubForm(g, options) {
     var element = options.element,
-      key,
+      property_name,
       parent_path = options.path || element.name,
-      scope;
-
-    if (options.parent_type === "array") {
-      key = Math.random().toString(36).substr(2, 9);
-    } else {
-      key = options.key ||
-        element.parentNode.querySelector("input[type='text']").value;
+      scope,
+      input_element;
+
+    scope = parent_path + Math.random().toString(36).substr(2, 9);
+    if (options.parent_type !== "array") {
+      property_name = options.property_name;
+      if (!property_name) {
+        input_element = element.parentNode.querySelector("input[type='text']");
+        property_name = input_element.value;
+      }
+      if (!property_name) {
+        // TODO notify user
+        // you can't create property without property_name
+        return false;
       }
-    scope = parent_path + encodeJsonPointer(key);
-
-    if (!key || g.props.subforms.hasOwnProperty(scope)) {
+      if (g.props.objects[parent_path].hasOwnProperty(property_name) && g.props.objects[parent_path][property_name] !== "") {
+        // TODO notify user
+        // you can't create property with existed property_name
         return false;
       }
+      if (input_element) {
+        input_element.value = "";
+      }
+    }
 
     return g.declareGadget('gadget_json_generated_form.html', {scope: scope})
       .push(function (form_gadget) {
@@ -441,7 +472,8 @@
         if (options.parent_type === "array") {
           g.props.arrays[parent_path] = 1;
         } else {
-          g.props.subforms[scope] = form_gadget;
+          g.props.objects[parent_path][property_name] = scope;
+          form_gadget.element.setAttribute("data-json-property-name", property_name);
         }
         // add to end of list
         element.parentNode.appendChild(form_gadget.element);
@@ -449,10 +481,13 @@
           schema: options.schema_part,
           document: options.default_dict,
           display_label: options.parent_type !== "array",
-          key: key,
           scope: scope
         });
-      });
+      }); // TODO focus on first element subform
+  }
+
+  function getSubGadgetElement(g, scope) {
+    return g.element.querySelector("div[data-gadget-scope='" + scope + "']");
   }
 
   rJS(window)
@@ -470,15 +505,61 @@
         });
     })
 
+    .declareAcquiredMethod("renameChildrenParent", "renameChildren")
+    .allowPublicAcquisition("renameChildren", function (opt) {
+      var property_name,
+        objects = this.props.objects,
+        options = opt[0], // TODO strange rjs behavior
+        element = getSubGadgetElement(this, options.scope),
+        parent = element.getAttribute('data-json-parent');
+      if (objects.hasOwnProperty(parent)) {
+        parent = objects[parent];
+        if (parent.hasOwnProperty(options.new_name)) {
+          throw Error("property already exist");
+        }
+        // TODO validate property if property pattern
+        for (property_name in parent) {
+          if (parent.hasOwnProperty(property_name) && parent[property_name] === options.scope) {
+            delete parent[property_name];
+            parent[options.new_name] = options.scope;
+            return options.new_name;
+          }
+        }
+        throw Error("gadget not found for renaming");
+      }
+    })
+    .declareMethod("rename", function (new_name, event) {
+      var g = this,
+        name = g.element.getAttribute('data-json-property-name');
+      return this.renameChildrenParent({
+        scope: g.element.getAttribute('data-gadget-scope'),
+        // parent: g.element.getAttribute('data-json-parent'),
+        // name: g.element.getAttribute('data-json-property-name'),
+        new_name: new_name
+      })
+        .push(function () {
+          return g.element.setAttribute('data-json-property-name', new_name);
+        })
+        .push(undefined, function (error) {
+          // TODO notify user
+          event.srcElement.value = name;
+          event.srcElement.focus();
+        });
+    })
     .declareAcquiredMethod("deleteChildrenParent", "deleteChildren")
     .allowPublicAcquisition("deleteChildren", function (scope) {
-      var arrays = this.props.arrays,
-        subforms = this.props.subforms,
-        element = this.element.querySelector("div[data-gadget-scope='" + scope + "']");
-      if (!arrays.hasOwnProperty(element.getAttribute('data-json-parent'))) {
-        if (subforms.hasOwnProperty(scope)) {
-          delete subforms[scope].element;
-          delete subforms[scope];
+      var key,
+        objects = this.props.objects,
+        element = getSubGadgetElement(this, scope),
+        parent = element.getAttribute('data-json-parent');
+      // TODO strange rjs behavior
+      scope = scope[0];
+      if (objects.hasOwnProperty(parent)) {
+        parent = objects[parent];
+        for (key in parent) {
+          if (parent.hasOwnProperty(key) && parent[key] === scope) {
+            delete parent[key];
+          }
         }
       }
       element.parentNode.removeChild(element);
@@ -558,20 +639,17 @@
 
     .declareMethod('renderForm', function (options) {
       var g = this,
-        key = options.key,
+        property_name = g.element.getAttribute('data-json-property-name'),
         schema = options.schema,
         delete_button,
         root;
       g.props.inputs = [];
       g.props.add_buttons = [];
       g.props.arrays = {};
-      g.props.subforms = {};
+      g.props.objects = {};
       g.props.path = options.path; // self gadget scope
-      if (key === undefined) {
-        key = "";
-      }
-      if (!options.display_label) {
-        key = "";
+      if (!property_name || !options.display_label) {
+        property_name = "";
       }
       if (schema.type === undefined) {
         schema.type = "object";
@@ -593,7 +671,7 @@
         g.props.delete_button = delete_button;
         root.appendChild(delete_button);
       }
-      return render_field(g, key, "", schema, options.document, root)
+      return render_field(g, property_name, "", schema, options.document, root)
         .push(function () {
           g.listenEvents();
           return g.element;
@@ -646,6 +724,17 @@
         ));
       }
 
+      if (g.props.property_name_edit) {
+        promise_list.push(loopEventListener(
+          g.props.property_name_edit,
+          'change',
+          false,
+          function (event) {
+            return g.rename(g.props.property_name_edit.value, event);
+          }
+        ));
+      }
+
       for (i = 0; i < field_list.length; i = i + 1) {
         promise_list.push(loopEventListener(
           field_list[i],