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
**array**
*rendering is not supported*
**fixed** *rendering is not supported*
* `additionalItems`
* `items`
......
......@@ -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) {
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");
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");
......
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