erp5_web_renderjs_ui: available to hide item in listbox

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_form_js.xml

@@ -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>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.xml

@@ -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>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml

@@ -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>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml

@@ -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>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_listbox_zuite/testHideItem.xml

+<?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>