erp5_web_renderjs_ui: move buttons from form_list to search_field

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_html.html

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_html.xml

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.js

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_list_js.xml

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.html

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_html.xml

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

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.js

@@ -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.tagName === 'BUTTON') {
         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)});
+        } 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);
 

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_searchfield_js.xml

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