Commit 6310ebef authored by Boris Kocherov's avatar Boris Kocherov

add array render

parent 1f1b2953
...@@ -42,7 +42,7 @@ Below is the list of JSON Schema validation properties and current supported sta ...@@ -42,7 +42,7 @@ Below is the list of JSON Schema validation properties and current supported sta
**array** **array**
*rendering is not supported* **fixed** *rendering is not supported*
* `additionalItems` * `additionalItems`
* `items` * `items`
......
...@@ -42,6 +42,57 @@ ...@@ -42,6 +42,57 @@
return input; 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) { function render_field(gadget, key, path, json_field, default_value, root) {
var div, var div,
label, label,
...@@ -82,10 +133,6 @@ ...@@ -82,10 +133,6 @@
input = render_selection(json_field, default_value); 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 (["string", "integer", "number"].indexOf(json_field.type) >= 0) {
if (json_field.textarea === true) { if (json_field.textarea === true) {
input = render_textarea(json_field, default_value, "string"); input = render_textarea(json_field, default_value, "string");
...@@ -103,6 +150,17 @@ ...@@ -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") { if (json_field.type === "object") {
queue queue
.push(function () { .push(function () {
...@@ -113,6 +171,7 @@ ...@@ -113,6 +171,7 @@
div_input, div_input,
first_path + '/'); first_path + '/');
}); });
div.setAttribute("data-json-path", first_path + '/');
} }
if (input) { if (input) {
...@@ -232,7 +291,10 @@ ...@@ -232,7 +291,10 @@
function getFormValuesAsJSONDict(g) { function getFormValuesAsJSONDict(g) {
var multi_level_dict = {}, var multi_level_dict = {},
scope, scope,
subforms = g.props.subforms, options = g.props,
array,
i,
len,
queue = RSVP.Queue(); queue = RSVP.Queue();
function convertOnMultiLevel(d, key, value) { function convertOnMultiLevel(d, key, value) {
...@@ -246,7 +308,11 @@ ...@@ -246,7 +308,11 @@
for (i = 1; i < key_list.length; i += 1) { for (i = 1; i < key_list.length; i += 1) {
kk = key_list[i]; kk = key_list[i];
if (i === key_list.length - 1) { if (i === key_list.length - 1) {
d[kk] = value; if (value === undefined) {
return d[kk];
} else {
d[kk] = value;
}
} else { } else {
if (!d.hasOwnProperty(kk)) { if (!d.hasOwnProperty(kk)) {
d[kk] = {}; d[kk] = {};
...@@ -267,9 +333,42 @@ ...@@ -267,9 +333,42 @@
}); });
} }
for (scope in subforms) { function getContentAndPushArray(scope, parent_scope) {
if (subforms.hasOwnProperty(scope)) { queue
recursiveGetContent(subforms[scope], scope); .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 @@ ...@@ -307,9 +406,17 @@
function addSubForm(g, options) { function addSubForm(g, options) {
var element = options.element, 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 || key = options.key ||
element.parentNode.querySelector("input[type='text']").value, element.parentNode.querySelector("input[type='text']").value;
scope = (options.path || element.name) + key; }
scope = parent_path + key;
if (!key || g.props.subforms.hasOwnProperty(scope)) { if (!key || g.props.subforms.hasOwnProperty(scope)) {
return false; return false;
...@@ -319,12 +426,27 @@ ...@@ -319,12 +426,27 @@
.push(function (form_gadget) { .push(function (form_gadget) {
var div = document.createElement("div"); 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.setAttribute("class", "slapos-parameter-dict-key");
div.appendChild(form_gadget.element); div.appendChild(form_gadget.element);
element.parentNode.parentNode.insertBefore(div, element.parentNode.parentNode.children[1]); // add after button
return form_gadget.renderParameterForm(options.schema_part, options.default_dict, key, scope); // 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 @@ ...@@ -453,22 +575,28 @@
}); });
}) })
.declareMethod('renderParameterForm', function (schema, default_dict, key, path) { .declareMethod('renderForm', function (options) {
var g = this; var g = this,
key = options.key,
schema = options.schema;
g.props.inputs = []; g.props.inputs = [];
g.props.add_buttons = []; g.props.add_buttons = [];
g.props.arrays = {};
g.props.subforms = {}; g.props.subforms = {};
g.props.path = path; // self gadget scope g.props.path = options.path; // self gadget scope
if (key === undefined) { if (key === undefined) {
key = ""; key = "";
} }
if (!options.display_label) {
key = "";
}
if (schema.type === undefined) { if (schema.type === undefined) {
schema.type = "object"; schema.type = "object";
} }
while (g.element.firstChild) { while (g.element.firstChild) {
g.element.removeChild(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 () { .push(function () {
g.listenEvents(); g.listenEvents();
return g.element; return g.element;
...@@ -565,7 +693,10 @@ ...@@ -565,7 +693,10 @@
return queue return queue
.push(function (schema) { .push(function (schema) {
g.options.schema = schema; g.options.schema = schema;
return g.renderParameterForm(schema, options.value); return g.renderForm({
schema: schema,
document: options.value
});
}) })
.push(function () { .push(function () {
console.log("FINISHED TO RENDER, RETURNING THE GADGET"); console.log("FINISHED TO RENDER, RETURNING THE GADGET");
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment