erp5_officejs_support_request_ui: Add event interfaction between chart and listbox.

When a user clicked an item on a chart. The listbox in below only show the items which related to that item. This is done by generating a search criterion according to that chart item. Then provide this criterion as "extended_search" to update the lisbox.

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_js.js

 /*global document, window, Option, rJS, RSVP, loopEventListener*/
-/*jslint nomen: true, indent: 2, maxerr: 3 */
+/*jslint nomen: true, indent: 2, maxerr: 150 */
 (function (window, rJS, RSVP, loopEventListener) {
   "use strict";
 
@@ -26,6 +26,53 @@
     .allowPublicAcquisition("updateHeader", function () {
       return;
     })
+    .declareMethod('getSearchCriteria', function (name, seriesName) {
+      var search_criteria, cur_mid_night = new Date(), days_2 = new Date(),
+        days_7 = new Date(), days_30 = new Date(), begin_date, end_date;
+      if (seriesName !== 'Support Request') {
+        // Situation 1: Search Support Request with date.
+        cur_mid_night.setHours(0, 0, 0, 0);
+        cur_mid_night.setDate(cur_mid_night.getDate() + 1);
+
+        days_2.setDate(cur_mid_night.getDate() - 2);
+        days_7.setDate(cur_mid_night.getDate() - 7);
+        days_30.setDate(cur_mid_night.getDate() - 30);
+        days_2.setHours(0, 0, 0, 0);
+        days_7.setHours(0, 0, 0, 0);
+        days_30.setHours(0, 0, 0, 0);
+
+        if (name === 'Less than 2 days') {
+          begin_date = days_2;
+          cur_mid_night.setDate(cur_mid_night.getDate() + 1);
+          end_date = cur_mid_night;
+        } else if (name === '2-7 days') {
+          begin_date = days_7;
+          end_date = days_2;
+        } else if (name === '7-30 days') {
+          begin_date = days_30;
+          end_date = days_7;
+        } else {
+          begin_date = new Date(1970, 1, 1);
+          end_date = days_30;
+        }
+        search_criteria = '( translated_simulation_state_title: "' + seriesName + '" AND modification_date: >= ' + begin_date.toISOString().slice(0, 10) + ' AND modification_date: < ' + end_date.toISOString().slice(0, 10) + ' )';
+      } else {
+        // Situation 2: Search Support Request without date.
+        search_criteria = '( translated_simulation_state_title: "' + name + '")';
+      }
+      return search_criteria;
+    })
+    .allowPublicAcquisition("chartItemClick", function (params) {
+      var gadget = this;
+      return gadget.getDeclaredGadget("last")
+        .push(function () {
+          return gadget.getSearchCriteria(params[0][0], params[0][1])
+            .push(function (search_criteria) {
+              gadget.changeState({extended_search: search_criteria});
+            });
+        });
+      // method code
+    })
     /////////////////////////////////////////////////////////////////
     // declared methods
     /////////////////////////////////////////////////////////////////
@@ -78,10 +125,10 @@
           var bar_chart = document.getElementById("wrap1"),
             pie_chart = document.getElementById("wrap2"),
             loader = document.getElementsByClassName("graph-spinner");
-            loader[0].style.display = "none";
-            loader[1].style.display = "none";
-            bar_chart.style.display = "block";
-            pie_chart.style.display = "block";
+          loader[0].style.display = "none";
+          loader[1].style.display = "none";
+          bar_chart.style.display = "block";
+          pie_chart.style.display = "block";
           return result;
         })
         .push(function (result_list) {
@@ -193,6 +240,22 @@
     .onStateChange(function (modification_dict) {
       var gadget = this,
         queue = new RSVP.Queue();
+      if (modification_dict.hasOwnProperty("extended_search")) {
+        // render the erp5 form
+        queue
+          .push(function () {
+            return gadget.getDeclaredGadget("last");
+          })
+          .push(function (result_list) {
+            var erp5_form = result_list,
+              tmp;
+
+            tmp = JSON.parse(erp5_form.state.erp5_form);
+            tmp.extended_search = modification_dict.extended_search;
+
+            return erp5_form.changeState({erp5_form: JSON.stringify(tmp)});
+          });
+      }
       if (modification_dict.hasOwnProperty("field_listbox_begin_from")) {
         // render the erp5 form
         queue

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.56789.36616.11144</string> </value>
+                <value> <string>961.56892.23530.35549</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1504536348.57</float>
+                        <float>1504542514.5</float>
                         <string>UTC</string>
                       </tuple>
                     </state>