Commit e2152113 authored by Gabriel Monnerat's avatar Gabriel Monnerat

erp5_web_renderjs_ui: move buttons from form_list to search_field

parent 5dcf3bc7
......@@ -13,7 +13,6 @@
"translated_simulation_state_title",
"translated_validation_state_title"
];
if (!option_list.length) {
return;
}
......@@ -616,7 +615,6 @@
i,
j,
result_queue = new RSVP.Queue(),
graphic_option_list = [],
button_selector_list = ['button[name="Sort"]', 'button[name="Hide"]',
'button[name="Clipboard"]',
'button[name="Configure"]',
......@@ -1197,7 +1195,6 @@
})
.push(function () {
var loading_element = gadget.element.querySelector(".listboxloader"),
graphic_option_list = [],
loading_element_classList;
if (loading_element) {
loading_element_classList = loading_element.classList;
......@@ -1207,21 +1204,9 @@
if (gadget.state.option_list.length > 0 &&
gadget.state.enable_graphic &&
!gadget.state.extended_search) {
for (i = 0; i < gadget.state.option_list.length; i += 1) {
graphic_option_list.push(
domsugar("option", {
"value": gadget.state.option_list[i][0],
"text": gadget.state.option_list[i][1]
})
);
}
if (!gadget.state.extended_search &&
gadget.state.enable_graphic) {
domsugar(gadget.element.querySelector(".graphic_section"), [
domsugar("select", {
"name": "GraphicSelect",
"value": gadget.state.graphic_type
}, graphic_option_list),
domsugar("div", {"class": "graphic_area"})
]);
}
......@@ -1235,9 +1220,18 @@
gadget.state.graphic_type !== "") {
result_queue
.push(function () {
gadget.element.querySelector(
'select[name="GraphicSelect"]'
).value = gadget.state.graphic_type;
return gadget.getUrlParameter("display_graphic_panel")
})
.push(function (result) {
if (result) {
return gadget.renderEditorPanel(
"gadget_erp5_graphic_editor.html", {
graphic_option_list: gadget.state.option_list,
graphic_type: gadget.state.graphic_type
});
}
})
.push(function () {
return gadget.declareGadget('gadget_graphic.html', {
scope: 'gadget_graphic',
element: gadget.element.querySelector(".graphic_area")
......@@ -1502,20 +1496,6 @@
return result;
});
}, {mutex: 'changestate'})
.onEvent('change', function change(evt) {
var gadget = this,
graphic_select = gadget.element.querySelector(
'select[name="GraphicSelect"]'
);
if (evt.target == graphic_select) {
return gadget.redirect({
command: 'store_and_change',
options: {
graphic_type: evt.target.value
}
});
}
})
.onEvent('click', function click(evt) {
// For some reason, Zelenium can click even if button has the disabled
// attribute. So, it is needed for now to manually checks
......
......@@ -240,7 +240,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>997.32364.32479.38109</string> </value>
<value> <string>997.43623.34440.2457</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -258,7 +258,7 @@
</tuple>
<state>
<tuple>
<float>1642458074.31</float>
<float>1642798544.4</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -31,21 +31,6 @@
<!-- XXX action, method, fieldset -->
<form>
<button type="submit" class="ui-icon-action ui-btn-icon-right ui-screen-hidden">Submit</button>
<!-- XXX Just a draft -->
<div class="graphic-button" style="float: left;padding-top: 6pt;">
<div>
<button class="ui-btn-icon-notext ui-icon-bar-chart-o display-graphic"
style="border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
background-color: #FFFFFF;
margin-right: 6pt;
max-width: 6em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 3pt;" type="button"> Graphic</button>
</div>
</div>
<div data-gadget-url="gadget_erp5_searchfield.html"
data-gadget-scope="erp5_searchfield"
data-gadget-sandbox="public"></div>
......
......@@ -238,7 +238,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>997.37810.8320.54442</string> </value>
<value> <string>997.39276.32766.15104</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -256,7 +256,7 @@
</tuple>
<state>
<tuple>
<float>1642474757.61</float>
<float>1642645073.04</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -136,13 +136,6 @@
form_options.form_definition.extended_search = form_gadget.state.extended_search;
}
form_options.enable_graphic = true;
if (!form_gadget.state.extended_search) {
form_gadget.element.querySelector(
".graphic-button").classList.add("ui-screen-hidden");
} else {
form_gadget.element.querySelector(
".graphic-button").classList.remove("ui-screen-hidden");
}
return erp5_form.render(form_options);
})
......@@ -156,6 +149,7 @@
if (form_gadget.state.extended_search) {
search_options.extended_search = form_gadget.state.extended_search;
}
search_options.enable_graphic = true;
return search_gadget.render(search_options);
})
......@@ -208,17 +202,6 @@
});
}, {mutex: 'changestate'})
.onEvent('click', function click(evt) {
var gadget = this;
if (evt.target.classList.contains("display-graphic")) {
return gadget.redirect({
command: "display_with_history",
options: {
jio_key: gadget.state.jio_key
}
});
}
})
.onEvent('submit', function submit() {
var gadget = this;
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>997.37922.23380.46216</string> </value>
<value> <string>997.39340.10291.26709</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1642458450.04</float>
<float>1642802822.3</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -17,6 +17,20 @@
</head>
<body>
<!-- XXX Just a draft -->
<div class="graphic-button-section" style="float: left;">
<button
class="ui-btn-icon-notext ui-icon-bar-chart-o ui-screen-hidden change-graphic-button"
style="border: 1px solid rgba(0, 0, 0, 0.14);
margin-right: 6pt;
border-radius: 0.325em;" type="button"> Change Graphic</button>
<button
class="ui-btn-icon-notext ui-icon-bar-chart-o ui-screen-hidden graphic-button"
style="border: 1px solid rgba(0, 0, 0, 0.14);
margin-right: 6pt;
border-radius: 0.325em;" type="button"> Display Graphic</button>
</div>
<div class="ui-input-text">
<div class="search_parsed_value"></div>
<div data-gadget-url="gadget_html5_input.html"
......
......@@ -238,7 +238,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>997.39354.39569.61815</string> </value>
<value> <string>997.43553.453.33228</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -256,7 +256,7 @@
</tuple>
<state>
<tuple>
<float>1642544018.82</float>
<float>1643060796.12</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -31,16 +31,20 @@
/////////////////////////////////////////////////////////////////
.declareMethod('render', function (options) {
var state_dict = {
extended_search: options.extended_search || ""
extended_search: options.extended_search || "",
enable_graphic: options.enable_graphic || false
};
return this.changeState(state_dict);
})
.onStateChange(function () {
.onStateChange(function (modification_dict) {
var gadget = this,
i,
len,
button_container = gadget.element.querySelector('div.search_parsed_value'),
button_graphic = gadget.element.querySelector(".graphic-button"),
select_button_graphic = gadget.element.querySelector(".change-graphic-button"),
graphic_css_class = "ui-screen-hidden",
button,
operator = 'AND',
jio_query_list = [],
......@@ -53,6 +57,12 @@
continue_full_text_query_search = true;
if (gadget.state.extended_search) {
if (modification_dict.enable_graphic &&
button_graphic && button_graphic.classList.contains(
graphic_css_class)) {
button_graphic.classList.remove(graphic_css_class);
}
// Parse the raw query
try {
jio_query = QueryFactory.create(gadget.state.extended_search);
......@@ -109,8 +119,13 @@
}));
}
}
} else if (modification_dict.enable_graphic &&
button_graphic && !button_graphic.classList.contains(
graphic_css_class)) {
button_graphic.classList.add(graphic_css_class);
} else if (modification_dict.enable_graphic && select_button_graphic) {
select_button_graphic.classList.remove(graphic_css_class);
}
button_container.innerHTML = '';
len = query_text_list.length;
for (i = 0; i < len; i += 1) {
......@@ -224,15 +239,32 @@
// But, in the case of panel, we don't need to handle anything.
return;
})
.declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("triggerSubmit", "triggerSubmit")
.onEvent('click', function (evt) {
if ((evt.target.nodeType === Node.ELEMENT_NODE) &&
(evt.target.tagName === 'BUTTON') &&
(evt.target.value)) {
// Open the filter panel if one 'search' button is clicked
evt.preventDefault();
return this.triggerSubmit({focus_on: parseInt(evt.target.value, 10)});
if (evt.target.tagName === 'BUTTON') {
if ((evt.target.nodeType === Node.ELEMENT_NODE) &&
(evt.target.value)) {
// Open the filter panel if one 'search' button is clicked
evt.preventDefault();
return this.triggerSubmit({focus_on: parseInt(evt.target.value, 10)});
} else if (evt.target.classList.contains("graphic-button")) {
return this.redirect({
command: "change",
options: {
extended_search: ""
}
});
} else if (evt.target.classList.contains("change-graphic-button")) {
return this.redirect({
command: "change",
options: {
display_graphic_panel: true,
extended_search: ""
}
});
}
}
}, false, false);
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>997.39359.32235.40874</string> </value>
<value> <string>997.43698.44863.10427</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1642544051.96</float>
<float>1643061187.04</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