Commit 733458b7 authored by Xiaowu Zhang's avatar Xiaowu Zhang

erp5_web_renderjs_ui: available to hide item in listbox

parent 599f0284
......@@ -223,6 +223,8 @@
if (form_definition.extended_search) {\n
suboption_dict.extended_search = form_definition.extended_search;\n
}\n
// XXX Hardcoded for listbox\'s hide functionality\n
suboption_dict.hide_enabled = form_definition.hide_enabled;\n
\n
form_gadget.props.gadget_list = [];\n
form_gadget.props.id = erp5_document._id;\n
......@@ -532,7 +534,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>948.17341.58767.64750</string> </value>
<value> <string>948.7201.1182.16657</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -550,7 +552,7 @@
</tuple>
<state>
<tuple>
<float>1452009359.45</float>
<float>1451393404.31</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -137,6 +137,22 @@
</thead>\n
</table>\n
</script>\n
\n
<script id="listbox-show-thead-template" type="text/x-handlebars-template">\n
<table>\n
<thead class="ui-bar-inherit head">\n
<tr>\n
{{#if show_anchor}}\n
<th data-i18n="Jump">Jump</th>\n
{{/if}}\n
<th></th>\n
{{#each head_value}}\n
<th data-i18n="{{data-i18n}}" class="{{class_value}}">{{text}}</th>\n
{{/each}}\n
</tr>\n
</thead>\n
</table>\n
</script>\n
\n
<script id="listbox-hidden-tbody-template" type="text/x-handlebars-template">\n
<table>\n
......@@ -166,7 +182,40 @@
</tbody>\n
</table>\n
</script>\n
\n
\n
\n
<script id="listbox-show-tbody-template" type="text/x-handlebars-template">\n
<table>\n
<tbody class="tbody">\n
{{#each body_value}}\n
<tr>\n
{{#if ../../show_anchor}}\n
<th class="ui-link ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext"></th>\n
{{/if}}\n
<th>\n
<input value="{{value}}" type="checkbox" checked="true" class="hide_element">\n
</th>\n
{{#each tr_value}}\n
<th>\n
{{#if type}}\n
{{#if editable}}\n
<div class="editable_div" column="{{column}}" line="{{line}}"></div>\n
{{else}}\n
<a href="{{href}}" class="ui-link">\n
<div class="editable_div" column="{{column}}" line="{{line}}"></div>\n
</a>\n
{{/if}}\n
{{else}}\n
<a href="{{href}}" class="ui-link" >{{text}}</a>\n
{{/if}}\n
</th>\n
{{/each}}\n
</tr>\n
{{/each}}\n
</tbody>\n
</table>\n
</script>\n
\n
<script id="listbox-tfoot-template" type="text/x-handlebars-template">\n
<table>\n
<tfoot class="ui-bar-inherit tfoot">\n
......@@ -187,7 +236,7 @@
<div class="ui-table-header ui-header ui-bar-c ui-corner-all">\n
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">\n
<div class="ui-controlgroup-controls">\n
<button data-rel="hide" data-i18n="Hide Rows" name="Hide" type="submit" class="submit responsive ui-last-child ui-btn ui-icon-eye ui-btn-icon-left ui-disabled">Hide Rows</button>\n
<button data-rel="hide" data-i18n="Hide Rows" name="Hide" type="submit" class="submit responsive ui-last-child ui-btn ui-icon-eye ui-btn-icon-left {{hide_class}}">Hide Rows</button>\n
</div>\n
</div>\n
<h1 data-i18n="0 items selected" class="ui-title ui-override-theme">0 items selected</h1>\n
......@@ -199,6 +248,7 @@
</div>\n
<table class="ui-responsive ui-body-c ui-table-inset">\n
<thead class="ui-bar-inherit thead"></thead>\n
<tbody></tbody>\n
<tfoot class="ui-bar-inherit tfoot"></tfoot>\n
</table>\n
</div>\n
......@@ -347,7 +397,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>948.8773.24940.60996</string> </value>
<value> <string>948.8903.55441.44066</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -365,7 +415,7 @@
</tuple>
<state>
<tuple>
<float>1451487984.08</float>
<float>1451495552.88</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -108,19 +108,29 @@
<value> <string encoding="cdata"><![CDATA[
/*jslint indent: 2, maxerr: 3, nomen: true */\n
/*global window, document, rJS, URI, RSVP, loopEventListener, Handlebars*/\n
(function (window, document, rJS, URI, RSVP, loopEventListener, Handlebars) {\n
/*global window, document, rJS, URI, RSVP, loopEventListener,\n
SimpleQuery, ComplexQuery, Query, Handlebars*/\n
(function (window, document, rJS, URI, RSVP, loopEventListener,\n
SimpleQuery, ComplexQuery, Query, Handlebars) {\n
"use strict";\n
var gadget_klass = rJS(window),\n
listbox_hidden_thead_source = gadget_klass.__template_element\n
.getElementById("listbox-hidden-thead-template")\n
.innerHTML,\n
listbox_hidden_thead_template = Handlebars.compile(listbox_hidden_thead_source),\n
listbox_show_thead_source = gadget_klass.__template_element\n
.getElementById("listbox-show-thead-template")\n
.innerHTML,\n
listbox_show_thead_template = Handlebars.compile(listbox_show_thead_source),\n
\n
listbox_hidden_tbody_source = gadget_klass.__template_element\n
.getElementById("listbox-hidden-tbody-template")\n
.innerHTML,\n
listbox_hidden_tbody_template = Handlebars.compile(listbox_hidden_tbody_source),\n
listbox_show_tbody_source = gadget_klass.__template_element\n
.getElementById("listbox-show-tbody-template")\n
.innerHTML,\n
listbox_show_tbody_template = Handlebars.compile(listbox_show_tbody_source),\n
\n
listbox_tfoot_source = gadget_klass.__template_element\n
.getElementById("listbox-tfoot-template")\n
......@@ -209,7 +219,10 @@
return renderEditableField(gadget, tmp);\n
})\n
.push(function () {\n
gadget.props.element.querySelector("table").appendChild(tmp);\n
var table = gadget.props.element.querySelector("table"),\n
tbody = table.querySelector("tbody");\n
table.removeChild(tbody);\n
table.appendChild(tmp);\n
});\n
}\n
\n
......@@ -228,7 +241,11 @@
\n
\n
function renderListbox(gadget) {\n
return gadget.translateHtml(listbox_template());\n
return gadget.translateHtml(listbox_template(\n
{\n
"hide_class": gadget.props.hide_class\n
}\n
));\n
}\n
\n
\n
......@@ -261,6 +278,8 @@
.declareAcquiredMethod("getUrlParameter", "getUrlParameter")\n
.declareAcquiredMethod("getFieldTypeGadgetUrl", "getFieldTypeGadgetUrl")\n
.declareAcquiredMethod("renderEditorPanel", "renderEditorPanel")\n
.declareAcquiredMethod("redirect", "redirect")\n
.declareAcquiredMethod("translate", "translate")\n
//////////////////////////////////////////////\n
// initialize the gadget content\n
//////////////////////////////////////////////\n
......@@ -275,6 +294,7 @@
\n
gadget.props.field_json = field_json;\n
gadget.props.extended_search = options.extended_search;\n
gadget.props.hide_class = options.hide_enabled ? "" : "ui-disabled";\n
gadget.props.sort_list = [];\n
\n
//only display which is in listbox\'s column list\n
......@@ -390,7 +410,7 @@
for (i = 0; i < field_json.column_list.length; i += 1) {\n
select_list.push(field_json.column_list[i][0]);\n
}\n
\n
select_list.push("uid");\n
return gadget.jio_allDocs({\n
// XXX Not jIO compatible, but until a better api is found...\n
"list_method_template": field_json.list_method_template,\n
......@@ -440,6 +460,7 @@
});\n
}\n
body_value.push({\n
"value": result.data.rows[i].value.uid,\n
"tr_value": tr_value\n
});\n
}\n
......@@ -546,6 +567,86 @@
}\n
);\n
})\n
.declareService(function () {\n
var gadget = this,\n
hide_button = gadget.props.element.querySelector(\'button[name="Hide"]\');\n
return loopEventListener(\n
hide_button,\n
"click",\n
false,\n
function () {\n
return new RSVP.Queue()\n
.push(function () {\n
var i,\n
all_hide_elements,\n
query_list = [],\n
search_query,\n
thead_template,\n
tbody_template,\n
hide_button_html,\n
hide_elements;\n
if (gadget.props.foot.colspan === gadget.props.foot.default_colspan) {\n
thead_template = listbox_show_thead_template;\n
tbody_template = listbox_show_tbody_template;\n
hide_button_html = "Submit";\n
gadget.props.foot.colspan += 1;\n
} else {\n
//hide closed\n
//maybe submit\n
all_hide_elements = gadget.props.element.querySelectorAll(".hide_element");\n
hide_elements = gadget.props.element.querySelectorAll(".hide_element:checked");\n
//nothing selected, show all\n
if (hide_elements.length === 0) {\n
return gadget.redirect({\n
command: \'store_and_change\',\n
options: {\n
"extended_search": ""\n
}\n
});\n
}\n
\n
if (hide_elements.length < all_hide_elements.length) {\n
for (i = 0; i < hide_elements.length; i += 1) {\n
query_list.push(new SimpleQuery({\n
key: "catalog.uid",\n
type: "simple",\n
value: hide_elements[i].getAttribute("value")\n
}));\n
}\n
search_query = new ComplexQuery({\n
operator: "OR",\n
query_list: query_list,\n
type: "complex"\n
});\n
return gadget.redirect({\n
command: \'store_and_change\',\n
options: {\n
"extended_search": Query.objectToSearchText(search_query)\n
}\n
});\n
}\n
\n
gadget.props.foot.colspan -= 1;\n
hide_button_html = "Hide Rows";\n
thead_template = listbox_hidden_thead_template;\n
tbody_template = listbox_hidden_tbody_template;\n
}\n
return RSVP.all([\n
renderListboxThead(gadget, thead_template),\n
renderListboxTbody(gadget, tbody_template),\n
renderListboxTfoot(gadget, listbox_tfoot_template),\n
gadget.translate(hide_button_html)\n
]);\n
})\n
.push(function (all_innerHTML) {\n
//change hide button\'s text\n
hide_button.innerHTML = all_innerHTML[3];\n
gadget.props.element.querySelector(".thead").innerHTML = all_innerHTML[0];\n
gadget.props.element.querySelector(".tfoot").innerHTML = all_innerHTML[2];\n
});\n
}\n
);\n
})\n
\n
.allowPublicAcquisition("notifyInvalid", function () {\n
return;\n
......@@ -555,7 +656,8 @@
return;\n
});\n
\n
}(window, document, rJS, URI, RSVP, loopEventListener, Handlebars));
}(window, document, rJS, URI, RSVP, loopEventListener,\n
SimpleQuery, ComplexQuery, Query, Handlebars));
]]></string> </value>
</item>
......@@ -692,7 +794,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>948.8776.58910.16264</string> </value>
<value> <string>948.8931.54995.63897</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -710,7 +812,7 @@
</tuple>
<state>
<tuple>
<float>1451487991.68</float>
<float>1451497439.76</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -157,6 +157,8 @@
form_options.form_definition.extended_search = extended_search;\n
search_options.extended_search = extended_search;\n
}\n
// XXX Hardcoded for listbox\'s hide functionality\n
form_options.form_definition.hide_enabled = true;\n
var new_content_action = options.erp5_document._links.action_object_new_content_action;\n
if (new_content_action !== undefined) {\n
new_content_action = gadget.getUrlFor({command: \'change\', options: {view: new_content_action.href, editable: true}});\n
......@@ -356,7 +358,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>947.25536.23903.53674</string> </value>
<value> <string>948.5880.58041.14626</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -374,7 +376,7 @@
</tuple>
<state>
<tuple>
<float>1448889486.07</float>
<float>1451393377.12</float>
<string>UTC</string>
</tuple>
</state>
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>_text</string> </key>
<value> <unicode encoding="cdata"><![CDATA[
<html xmlns:tal="http://xml.zope.org/namespaces/tal"\n
xmlns:metal="http://xml.zope.org/namespaces/metal">\n
<head>\n
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\n
<title>Test RenderJS UI</title>\n
</head>\n
<body>\n
<table cellpadding="1" cellspacing="1" border="1">\n
<thead>\n
<tr><td rowspan="1" colspan="3">Test RenderJS UI</td></tr>\n
</thead><tbody>\n
<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />\n
\n
<!-- Clean Up -->\n
<tr>\n
<td>open</td>\n
<td>${base_url}/bar_module/ListBoxZuite_reset</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>assertTextPresent</td>\n
<td>Reset Successfully.</td>\n
<td></td>\n
</tr>\n
<!-- should create in new ui instead of using script -->\n
<tr>\n
<td>open</td>\n
<td>${base_url}/foo_module/FooModule_createObjects</td>\n
<td></td>\n
</tr>\n
<tr>\n
<td>assertTextPresent</td>\n
<td>Created Successfully.</td>\n
<td></td>\n
</tr>\n
\n
<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/wait_for_activities" />\n
\n
<!-- Initialize -->\n
<tr>\n
<td>open</td>\n
<td>${base_url}/web_site_module/renderjs_runner/</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//h3[@data-i18n=\'Other\']</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>click</td>\n
<td>//h3[@data-i18n=\'Other\']</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//a[@data-i18n=\'Foos\']</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>click</td>\n
<td>link=Foos</td>\n
<td></td>\n
</tr>\n
\n
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/clear_query" />\n
\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//button[@data-i18n=\'Hide Rows\']</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>click</td>\n
<td>//button[@data-i18n=\'Hide Rows\']</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//tbody/tr/th/input[@type="checkbox"]</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>verifyValue</td>\n
<td>//tbody/tr/th/input[@type="checkbox"]</td>\n
<td>on</td>\n
</tr>\n
\n
<tr>\n
<td>click</td>\n
<td>//tbody/tr[2]/th/input[@type="checkbox"]</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>click</td>\n
<td>//tbody/tr[3]/th/input[@type="checkbox"]</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>click</td>\n
<td>//button[@data-i18n=\'Hide Rows\']</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>waitForElementNotPresent</td>\n
<td>//a[@data-i18n="Previous"]</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//a[@data-i18n="Previous"]</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//tbody/tr/th</td>\n
<td></td>\n
</tr>\n
\n
<!-- only one element present -->\n
<tr>\n
<td>verifyElementPresent</td>\n
<td>//tbody/tr/th</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>verifyElementNotPresent</td>\n
<td>//tbody/tr[2]</td>\n
<td></td>\n
</tr>\n
\n
\n
\n
<tr>\n
<td>click</td>\n
<td>//button[@data-i18n=\'Hide Rows\']</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//tbody/tr/th/input[@type="checkbox"]</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>verifyValue</td>\n
<td>//tbody/tr/th/input[@type="checkbox"]</td>\n
<td>on</td>\n
</tr>\n
\n
<tr>\n
<td>click</td>\n
<td>//tbody/tr/th/input[@type="checkbox"]</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>click</td>\n
<td>//button[@data-i18n=\'Hide Rows\']</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>waitForElementNotPresent</td>\n
<td>//a[@data-i18n="Previous"]</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//a[@data-i18n="Previous"]</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>waitForElementPresent</td>\n
<td>//tbody/tr/th</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>verifyElementPresent</td>\n
<td>//tbody/tr/th</td>\n
<td></td>\n
</tr>\n
\n
\n
<tr>\n
<td>verifyElementPresent</td>\n
<td>//tbody/tr[2]</td>\n
<td></td>\n
</tr>\n
\n
<tr>\n
<td>verifyElementPresent</td>\n
<td>//tbody/tr[3]</td>\n
<td></td>\n
</tr>\n
\n
\n
\n
\n
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/clear_query" />\n
\n
\n
</tbody></table>\n
</body>\n
</html>
]]></unicode> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testHideItem</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode></unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
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