Skip to content

S
slapos.core
Commit 70abed28 authored by Rafael Monnerat's avatar Rafael Monnerat
Browse files
Options

slapos_jio: Implement read-only mode for parameter form 

  This is equivalent to editable equal to false when render the gadget field.
parent 1e99a9aa
Show whitespace changes
Inline Side-by-side
Showing with 132 additions and 80 deletions
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.js
View file @ 70abed28
......@@ -72,8 +72,8 @@
);
}
function render_selection(json_field, default_value, is_required) {
var property_dict = {size: 1},
function render_selection(json_field, default_value, is_required, editable) {
var input,
option_list = [domsugar('option', {
value: "",
selected: (default_value === undefined)
......@@ -81,7 +81,12 @@
option_index,
selected,
is_selected = (default_value === undefined),
data_format = "string";
data_format = "string",
property_dict = {
size: 1,
"placeholder": " ",
"class": "slapos-parameter"
};
if (json_field.type === "integer" || json_field.type === "number") {
data_format = "number";
......@@ -118,14 +123,27 @@
if (is_required) {
property_dict.required = true;
}
return domsugar('select', property_dict, option_list);
input = domsugar('select', property_dict, option_list);
if (!editable) {
input.classList.add("readonly");
input["aria-disabled"] = "true";
input["tab-index"] = "-1";
}
return input;
}
function render_selection_oneof(json_field, default_value, is_required) {
var option_list = [domsugar('option', {
function render_selection_oneof(json_field, default_value, is_required, editable) {
var input,
option_list = [domsugar('option', {
value: "",
selected: (default_value === undefined)
})];
})],
property_dict = {
size: 1,
"placeholder": " ",
"class": "slapos-parameter"
};
json_field.oneOf.forEach(function (element) {
if ((element['const'] !== undefined) && (element.title !== undefined)) {
......@@ -143,14 +161,24 @@
}));
}
});
return domsugar('select', {
size: 1
}, option_list);
if (is_required) {
property_dict.required = true;
}
input = domsugar('select', property_dict, option_list);
if (!editable) {
input.classList.add("readonly");
input["aria-disabled"] = "true";
input["tab-index"] = "-1";
}
return input;
}
function render_textarea(json_field, default_value, data_format, is_required) {
var property_dict = {"data-format": data_format};
function render_textarea(json_field, default_value, data_format, is_required, editable) {
var input, property_dict = {
"data-format": data_format,
"placeholder": " ",
"class": "slapos-parameter"
};
if (default_value !== undefined) {
if (default_value instanceof Array) {
property_dict.value = default_value.join("\n");
......@@ -161,17 +189,23 @@
if (is_required) {
property_dict.required = true;
}
return domsugar('textarea', property_dict);
input = domsugar('textarea', property_dict);
if (!editable) {
input.setAttribute('readonly', true);
}
return input;
}
function render_field(json_field, default_value, is_required) {
var data_format, domsugar_input_dict = {};
function render_field(json_field, default_value, is_required, editable) {
var input,
data_format,
domsugar_input_dict = {"placeholder": " ", "class": "slapos-parameter"};
if (json_field['enum'] !== undefined) {
return render_selection(json_field, default_value, is_required);
return render_selection(json_field, default_value, is_required, editable);
}
if (json_field.oneOf !== undefined) {
return render_selection_oneof(json_field, default_value, is_required);
return render_selection_oneof(json_field, default_value, is_required, editable);
}
if (json_field.type === "boolean") {
......@@ -182,7 +216,7 @@
if (default_value === "false") {
default_value = false;
}
return render_selection(json_field, default_value, is_required);
return render_selection(json_field, default_value, is_required, editable);
}
if (json_field.type === "array") {
......@@ -192,11 +226,11 @@
data_format = "array-number";
}
}
return render_textarea(json_field, default_value, data_format, is_required);
return render_textarea(json_field, default_value, data_format, is_required, editable);
}
if (json_field.type === "string" && json_field.textarea === true) {
return render_textarea(json_field, default_value, "string", is_required);
return render_textarea(json_field, default_value, "string", is_required, editable);
}
if (default_value !== undefined) {
......@@ -217,11 +251,14 @@
if (is_required) {
domsugar_input_dict.required = true;
}
return domsugar('input', domsugar_input_dict);
input = domsugar('input', domsugar_input_dict);
if (!editable) {
input.setAttribute('readonly', true);
}
return input;
}
function render_subform(json_field, default_dict, root, path) {
function render_subform(json_field, default_dict, root, path, editable) {
var div_input,
key,
div,
......@@ -240,7 +277,7 @@
path = "/";
}
if (json_field.patternProperties !== undefined) {
if (editable && json_field.patternProperties !== undefined) {
if (json_field.patternProperties['.*'] !== undefined) {
div = domsugar("div", {
......@@ -288,7 +325,8 @@
json_field.patternProperties['.*'],
default_dict[default_value],
default_div,
path + "/" + default_value
path + "/" + default_value,
editable
));
}
}
......@@ -322,10 +360,10 @@
for (key in json_field.properties) {
if (json_field.properties.hasOwnProperty(key)) {
if (editable || default_dict[key] !== undefined) {
label = domsugar("label", {
'text': json_field.properties[key].title
});
is_required = false;
if ((Array.isArray(json_field.required)) && (json_field.required.includes(key))) {
is_required = true;
......@@ -335,16 +373,16 @@
div_input = render_subform(json_field.properties[key],
default_dict[key],
domsugar("div", {"class": "input"}),
path + "/" + key);
path + "/" + key,
editable);
} else {
input = render_field(
json_field.properties[key],
default_dict[key],
is_required
is_required,
editable
);
input.name = path + "/" + key;
input.setAttribute("class", "slapos-parameter");
input.setAttribute("placeholder", " ");
div_input = domsugar("div", {"class": "input"}, [input]);
}
default_used_list.push(key);
......@@ -363,6 +401,7 @@
);
}
}
}
for (key in default_dict) {
if (default_dict.hasOwnProperty(key)) {
if (default_used_list.indexOf(key) < 0) {
......@@ -379,10 +418,8 @@
editable)
]);
} else {
input = render_field({"type": "string", "textarea": true}, default_dict[key], false);
input = render_field({"type": "string", "textarea": true}, default_dict[key], false, editable);
input.name = path + "/" + key;
input.setAttribute("class", "slapos-parameter");
input.setAttribute("placeholder", " ");
div = domsugar("div", {
title: key,
"class": "subfield"
......@@ -683,6 +720,7 @@
var fieldset,
fieldset_list = g.element.querySelectorAll('fieldset'),
div_error,
textarea,
show_raw_button = g.element.querySelector("button.slapos-show-raw-parameter"),
show_form_button = g.element.querySelector("button.slapos-show-form");
......@@ -715,16 +753,20 @@
} else {
div_error = domsugar('div');
}
fieldset = domsugar('fieldset', [
domsugar('div', {
'class': 'field'
}, [
domsugar('textarea', {
textarea = domsugar('textarea', {
rows: "10",
cols: "80",
name: "text_content",
text: g.state.parameter_xml
})
});
if (!g.state.editable) {
textarea.setAttribute("readonly", true);
}
fieldset = domsugar('fieldset', [
domsugar('div', {
'class': 'field'
}, [
textarea
]),
// div error
div_error
......@@ -748,6 +790,7 @@
shared = gadget.state.shared,
softwaretype = gadget.state.softwaretype,
softwareindex = gadget.state.softwareindex,
editable = gadget.state.editable,
to_hide = gadget.element.querySelector("button.slapos-show-form"),
to_show = gadget.element.querySelector("button.slapos-show-raw-parameter");
......@@ -776,7 +819,7 @@
lowest_index = 999,
lowest_option_index;
if (restricted_softwaretype === true) {
if (!editable || restricted_softwaretype === true) {
input.classList.add("readonly");
input["aria-disabled"] = "true";
input["tab-index"] = "-1";
......@@ -812,7 +855,7 @@
});
option['data-id'] = option_index;
option['data-index'] = 999;
option['data-shared'] = json['software-type'][option_index].shared
option['data-shared'] = json['software-type'][option_index].shared;
if (json['software-type'][option_index]['software-type'] !== undefined) {
option.value = json['software-type'][option_index]['software-type'];
......@@ -958,7 +1001,7 @@
var fieldset_list = gadget.element.querySelectorAll('fieldset'),
fieldset = document.createElement("fieldset");
fieldset = render_subform(json, parameter_dict, fieldset, undefined);
fieldset = render_subform(json, parameter_dict, fieldset, undefined, editable);
fieldset_list[1].parentNode.replaceChild(
fieldset,
fieldset_list[1]
......@@ -1033,7 +1076,6 @@
return this.changeState({
// Not used parameters
// editable: options.editable,
// hidden: options.hidden,
// key: options.key,
serialisation: options.serialisation,
......@@ -1043,6 +1085,7 @@
shared: options.value.parameter.shared,
softwaretype: options.value.parameter.softwaretype,
softwareindex: options.value.parameter.softwareindex,
editable: options.editable,
// Force refresh in any case
render_timestamp: new Date().getTime()
});
......@@ -1065,6 +1108,7 @@
return updateParameterForm(gadget);
}
// @ts-ignore
if (evt.target.className.indexOf("slapos-parameter") !== -1) {
// getContent is protected by a mutex which prevent
// onchangestate to be called in parallel
......@@ -1077,14 +1121,17 @@
// Only handle click on BUTTON element
var gadget = this,
queue,
// @ts-ignore
tag_name = evt.target.tagName;
if ((tag_name === 'LABEL') &&
// @ts-ignore
(evt.target.className.indexOf("slapos-parameter-dict-key") !== -1)) {
return collapseParameter(evt.target);
}
if ((tag_name === 'SPAN') &&
// @ts-ignore
(evt.target.className.indexOf("bt_close") !== -1)) {
return removeSubParameter(evt.target);
}
......@@ -1099,6 +1146,7 @@
queue = gadget.getContent();
if ((tag_name === 'BUTTON') &&
// @ts-ignore
(evt.target.className.indexOf("slapos-show-form") !== -1)) {
return queue
.push(function () {
......@@ -1107,6 +1155,7 @@
}
if ((tag_name === 'BUTTON') &&
// @ts-ignore
(evt.target.className.indexOf("slapos-show-raw-parameter") !== -1)) {
return queue
.push(function () {
......@@ -1140,6 +1189,9 @@
gadget.state.shared = 1;
content_dict.shared = 1;
}
if (!gadget.state.editable) {
return gadget.state.parameter_xml;
}
if (text_content !== null) {
// Don't provide blank string since the parameter will not able to load
// itself. If the user removed the values, provide an empty parameter default.
......
master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.xml
View file @ 70abed28
......@@ -280,7 +280,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>1004.26824.9734.39150</string> </value>
<value> <string>1004.31309.44548.40652</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -298,7 +298,7 @@
</tuple>
<state>
<tuple>
<float>1668799098.86</float>
<float>1669089218.99</float>
<string>UTC</string>
</tuple>
</state>
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7