add array render

README.md

@@ -42,7 +42,7 @@ Below is the list of JSON Schema validation properties and current supported sta
 
 **array**
 
-*rendering is not supported*
+**fixed** *rendering is not supported*
 
 * `additionalItems`
 * `items`

gadget_json_generated_form.js

@@ -42,6 +42,57 @@
     return input;
   }
 
+  function render_array(gadget, json_field, default_array, root, path) {
+    var queue = RSVP.Queue(),
+      div,
+      div_input,
+      input,
+      item_schema,
+      i;
+    if (json_field.items.type) {
+      item_schema = json_field.items;
+      div = document.createElement("div");
+      div.setAttribute("class", "subfield");
+      div.title = json_field.description;
+
+      div_input = document.createElement("div");
+      div_input.setAttribute("class", "input");
+
+      input = document.createElement("button");
+      input.setAttribute("class", "add-sub-form");
+      input.type = "button";
+      input.name = path;
+      input.textContent = "Add";
+      gadget.props.add_buttons.push({
+        parent_type: 'array',
+        element: input,
+        schema_part: item_schema
+      });
+      div_input.appendChild(input);
+
+      div.appendChild(div_input);
+      if (default_array) {
+        for (i = 0; i < default_array.length; i++) {
+          queue
+            .push(
+              addSubForm.bind(gadget, gadget, {
+                parent_type: 'array',
+                key: Math.random().toString(36).substr(2, 9).length,
+                path: path,
+                element: input,
+                schema_part: item_schema,
+                default_dict: default_array[i]
+              })
+            );
+        }
+      }
+      root.appendChild(div);
+    }
+    // todo add failback rendering if default_array not array
+    // input = render_textarea(json_field, default_value, "array");
+    return queue;
+  }
+
   function render_field(gadget, key, path, json_field, default_value, root) {
     var div,
       label,
@@ -82,10 +133,6 @@
       input = render_selection(json_field, default_value);
     }
 
-    if (json_field.type === "array") {
-      input = render_textarea(json_field, default_value, "array");
-    }
-
     if (["string", "integer", "number"].indexOf(json_field.type) >= 0) {
       if (json_field.textarea === true) {
         input = render_textarea(json_field, default_value, "string");
@@ -103,6 +150,17 @@
       }
     }
 
+    if (json_field.type === "array") {
+      queue = render_array(
+        gadget,
+        json_field,
+        default_value,
+        div_input,
+        first_path + '/');
+      div.setAttribute("data-json-path", first_path + '/');
+      div.setAttribute("data-json-type", json_field.type);
+    }
+
     if (json_field.type === "object") {
       queue
         .push(function () {
@@ -113,6 +171,7 @@
             div_input,
             first_path + '/');
         });
+      div.setAttribute("data-json-path", first_path + '/');
     }
 
     if (input) {
@@ -232,7 +291,10 @@
   function getFormValuesAsJSONDict(g) {
     var multi_level_dict = {},
       scope,
-      subforms = g.props.subforms,
+      options = g.props,
+      array,
+      i,
+      len,
       queue = RSVP.Queue();
 
     function convertOnMultiLevel(d, key, value) {
@@ -246,7 +308,11 @@
       for (i = 1; i < key_list.length; i += 1) {
         kk = key_list[i];
         if (i === key_list.length - 1) {
-          d[kk] = value;
+          if (value === undefined) {
+            return d[kk];
+          } else {
+            d[kk] = value;
+          }
         } else {
           if (!d.hasOwnProperty(kk)) {
             d[kk] = {};
@@ -267,9 +333,42 @@
         });
     }
 
-    for (scope in subforms) {
-      if (subforms.hasOwnProperty(scope)) {
-        recursiveGetContent(subforms[scope], scope);
+    function getContentAndPushArray(scope, parent_scope) {
+      queue
+        .push(function () {
+          return g.getDeclaredGadget(scope);
+        })
+        .push(function (gadget) {
+          return gadget.getContent();
+        })
+        .push(function (jdict) {
+          var array = convertOnMultiLevel(multi_level_dict, parent_scope);
+          if (!array) {
+            array = [];
+            convertOnMultiLevel(multi_level_dict, parent_scope, array);
+          }
+          array.push(jdict);
+        });
+    }
+
+    for (scope in options.arrays) {
+      if (options.arrays.hasOwnProperty(scope)) {
+        array = g.element.querySelector("div[data-json-path='" + scope + "']")
+          .querySelectorAll("div[data-json-parent='" + scope + "']");
+        len = array.length;
+        for (i=0; i < len; i++) {
+          getContentAndPushArray(
+            array[i].getAttribute('data-gadget-scope'),
+            // slice remove concluding '/'
+            scope.slice(0, -1)
+          );
+        }
+      }
+    }
+
+    for (scope in options.subforms) {
+      if (options.subforms.hasOwnProperty(scope)) {
+        recursiveGetContent(options.subforms[scope], scope);
       }
     }
 
@@ -307,9 +406,17 @@
 
   function addSubForm(g, options) {
     var element = options.element,
+      key,
+      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 = (options.path || element.name) + key;
+        element.parentNode.querySelector("input[type='text']").value;
+    }
+    scope = parent_path + key;
 
     if (!key || g.props.subforms.hasOwnProperty(scope)) {
       return false;
@@ -319,12 +426,27 @@
       .push(function (form_gadget) {
         var div = document.createElement("div");
 
-        g.props.subforms[scope] = form_gadget;
+        form_gadget.element.setAttribute("data-json-parent", parent_path);
+        if (options.parent_type === "array") {
+          g.props.arrays[parent_path] = 1;
+        } else {
+          g.props.subforms[scope] = form_gadget;
+        }
 
         div.setAttribute("class", "slapos-parameter-dict-key");
         div.appendChild(form_gadget.element);
-        element.parentNode.parentNode.insertBefore(div, element.parentNode.parentNode.children[1]);
-        return form_gadget.renderParameterForm(options.schema_part, options.default_dict, key, scope);
+        // add after button
+        // element.parentNode.parentNode.insertBefore(div, element.parentNode.parentNode.children[1]);
+        // add to end of list
+        element.parentNode.parentNode.appendChild(div);
+
+        return form_gadget.renderForm({
+          schema: options.schema_part,
+          document: options.default_dict,
+          display_label: options.parent_type !== "array",
+          key: key,
+          scope: scope
+        });
       });
   }
 
@@ -453,22 +575,28 @@
         });
     })
 
-    .declareMethod('renderParameterForm', function (schema, default_dict, key, path) {
-      var g = this;
+    .declareMethod('renderForm', function (options) {
+      var g = this,
+        key = options.key,
+        schema = options.schema;
       g.props.inputs = [];
       g.props.add_buttons = [];
+      g.props.arrays = {};
       g.props.subforms = {};
-      g.props.path = path; // self gadget scope
+      g.props.path = options.path; // self gadget scope
       if (key === undefined) {
         key = "";
       }
+      if (!options.display_label) {
+        key = "";
+      }
       if (schema.type === undefined) {
         schema.type = "object";
       }
       while (g.element.firstChild) {
         g.element.removeChild(g.element.firstChild);
       }
-      return render_field(g, key, "", schema, default_dict, g.element)
+      return render_field(g, key, "", schema, options.document, g.element)
         .push(function () {
           g.listenEvents();
           return g.element;
@@ -565,7 +693,10 @@
       return queue
         .push(function (schema) {
           g.options.schema = schema;
-          return g.renderParameterForm(schema, options.value);
+          return g.renderForm({
+            schema: schema,
+            document: options.value
+          });
         })
         .push(function () {
           console.log("FINISHED TO RENDER, RETURNING THE GADGET");