Bug 1865757 - Enable DataTables searchPanes extension on bug lists

Remove Scroller extension.
Enable SearchPanes extension.
Enable SaveState extension.
Enable search panes for product, component, assignee, and status columns.

Change-Id: Ie1bd7e4de958f22b007f3e1eef39a7a585ad89f8

1 files changed, 196 insertions, 81 deletions

diff --git a/template/en/default/list/list.html.tmpl b/template/en/default/list/list.html.tmpl
index fc750cfa4..f261dbab0 100644
--- a/template/en/default/list/list.html.tmpl
+++ b/template/en/default/list/list.html.tmpl
@@ -336,12 +336,9 @@ function update_selected_products(args) {
   var bug;
 
   if (typeof (args['bug']) === 'undefined') {
-    console.log("Starting loop");
-    console.log(args['bug_id']);
     for (let key in data_cache) {
       for (let i in data_cache[key]['data']) {
         var bug2 = data_cache[key]['data'][i];
-        console.log(bug2['id']);
         if (bug2['id'] == args['bug_id']) {
           bug = bug2;
           break;
@@ -493,7 +490,8 @@ $.fn.dataTable.pipeline = function ( opts ) {
                 "cache":    false,
                 "success":  function ( json ) {
                     cacheLastJson = $.extend(true, {}, json);
-                    data_cache[drawStart] = json;
+                    data_cache[drawStart] = { ...json};
+                    filter_rows(json);
                     drawCallback( json );
                     mark_cached(requestLength);
                 },
@@ -509,20 +507,52 @@ $.fn.dataTable.pipeline = function ( opts ) {
                     json.recordsFiltered = real_count;
                     json.draw = test;
                     json.data = json.result.bugs;
+                    json.searchPanes = json.result.searchPanes
                     return JSON.stringify( json ); // return JSON string
                 }
             } );
         }
         else {
-            json = data_cache[drawStart];
+            json = { ...data_cache[drawStart]};
             json.draw = request.draw; // Update the echo for each response
-             drawCallback(json);
-             mark_cached(requestLength);
-             update_table_info();
+            filter_rows(json);
+            drawCallback(json);
+            mark_cached(requestLength);
+            update_table_info();
         }
     }
 };
 
+function filter_rows(json) {
+    // Clone array as we will be filtering it
+    var fdata = json['data'];
+
+    // BUGBUG Local storage approach...
+    // https://stackoverflow.com/questions/61690093/jquery-datatables-searchpane-filter-value
+    // Filter out rows that don't match search panes
+    $('.dtsp-searchPane table:visible').each(function () {
+      const dt = $(this).DataTable();
+      const selected = dt.rows({selected:true}).data().toArray();
+
+      if(selected.length === 0) return;
+
+      var col = $(this).attr('id');
+      // BUGBUG this needs to map the filter to the field
+      // 3 == 'status'
+      col = col.replace('DataTables_Table_', '');
+      col = filterMap[col];
+      const field = the_search.include_fields[col];
+
+      console.log(selected);
+
+      fdata = fdata.filter(function( row ) {
+        return selected.filter( sp => sp.display == row[field] ).length > 0;
+      });
+    });
+
+    json['data'] = fdata;
+}
+
 // Register an API method that will empty the pipelined data, forcing an Ajax
 // fetch on the next draw (i.e. `table.clearPipeline().draw()`)
 $.fn.dataTable.Api.register( 'clearPipeline()', function () {
@@ -603,6 +633,22 @@ var real_cols = [
 ];
 
 var the_search_base64 = btoa(JSON.stringify([%- search_json FILTER safe_json -%]));
+
+var collapsedGroups = {};
+
+[% search_col_fields = ['status', 'product', 'assigned_to', 'component'] %]
+
+var filterMap = [
+  [% first_match = 1 %]
+  [% FOREACH column = search_cols %]
+    [% IF search_col_fields.contains(column) %]
+      [% IF !first_match %],[% ELSE %][% first_match = 0 %][% END %]
+      [% loop.count - 1 +%]
+    [%+ END %]
+  [% END %]
+];
+
+
 $(document).ready(function() {
     the_search.include_fields.push('bug_classes');
     var table = $('#bz_buglist').DataTable({
@@ -611,23 +657,22 @@ $(document).ready(function() {
         thehash: " ",
         serverSide: true,
         processing: true,
+        scroller: false,
         //deferLoading: [%- num_matches FILTER none -%],
         "language": {
           "emptyTable": "[% terms.zeroSearchResults FILTER js FILTER html %]"
         },
         "createdRow": function (row, data, dataIndex, cells) {
-          //$(row).addClass('bz_' + data.status);
           $(row).addClass(data.bug_classes)
         },
         rowGroup: {
-            enable: false
-        },
-/*
-        searchPanes: {
-            cascadePanes: true,
-            columns: [ 1, 3, 5 ],
+            enable: false,
+            startRender: function (rows, group) {
+                return $('<tr/>')
+                    .append('<th colspan="' + rows.columns()[0].length +'">' + group + ' (' + rows.count() + ')' + '</th>')
+                    .attr('data-name', group);
+            },
         },
-*/
         "ajax": $.fn.dataTable.pipeline( {
             url: 'jsonrpc.cgi',
             num_records: real_count,
@@ -691,51 +736,41 @@ $(document).ready(function() {
       [% IF user.settings.def_buglist_size.value %]
         iDisplayLength: [% user.settings.def_buglist_size.value FILTER js %],
       [%- END %]
-        dom: 'lBrtip',
+        dom: '<"top"ilB>rtip',
         buttons: [
+          [% IF user.id %]
             {
-              extend: 'colvis',
-              columns: 'th:nth-child(n+2)'
+                extend: 'selected',
+                text: 'Edit',
+                action: function ( e, dt, button, config ) {
+                    bulk_edit_bugs(selected_cache.length, selected_cache);
+                }
             },
+          [% END %]
             {
                 extend: 'collection',
-                text: 'Selection',
-                autoClose: true,
+                text: 'Export',
                 buttons: [
-                  {
-                      text: 'Select all on page',
-                      action: function () {
-                          table.rows().select();
-                      }
-                  },
-                  {
-                      text: 'Select all cached',
-                      action: function () {
-                          table.rows().select();
-                          select_all_cached();
-                          mark_cached(requestLength);
-                          update_table_info();
-
-                      }
-                  },
-                  {
-                      text: 'Deselect all on page',
-                      action: function () {
-                          table.rows().deselect();
-                      }
-                  },
-                  {
-                      text: 'Deselect all cached',
-                      action: function () {
-                          table.rows().deselect();
-                          clear_selected_cache();
-                          mark_cached(requestLength);
-                          update_table_info();
-                      }
-                  }
+                    'copy',
+                    'csv',
+                    'excel',
+                    'pdf',
+                    {
+                        extend: 'print',
+                        text: 'Print all (not just selected)',
+                        exportOptions: {
+                            modifier: {
+                                selected: null
+                            }
+                        }
+                    }
                 ]
             },
             {
+              extend: 'colvis',
+              columns: 'th:nth-child(n+2)'
+            },
+            {
                 extend: 'collection',
                 text: 'Row Groups',
                 autoClose: true,
@@ -808,35 +843,107 @@ $(document).ready(function() {
                 [% END %]
                 ]
             },
-          [% IF user.id %]
             {
-                extend: 'selected',
-                text: 'Edit',
-                action: function ( e, dt, button, config ) {
-                    bulk_edit_bugs(selected_cache.length, selected_cache);
+                extend: 'searchPanes',
+                config: {
+                    cascadePanes: false,
+                    viewTotal: false,
+                    //layout: 'columns-4',
+                    initCollapsed: false,
+                    i18n: {
+                        //showMessage: 'Display SearchPanes',
+                        title: {
+                          _: 'Filters Selected - %d<div class="note">Filters are client side and only affect data on the current search result page.</div>',
+                        },
+                    },
+                    columns: [
+                      [% first_match = 1 %]
+                      [% FOREACH column = search_cols %]
+                        [% IF search_col_fields.contains(column) %]
+                          [% IF !first_match %],[% ELSE %][% first_match = 0 %][% END %]
+                          [% loop.count - 1 %]
+                        [% END %]
+                      [% END %]
+                    ],
+                }
+            },
+            {
+                extend: 'createState',
+                  text: 'Save State',
+                config: {
+                    creationModal: true,
+                    toggle: {
+                        length: true,
+                        order: true,
+                        paging: true,
+                        scroller: false,
+                        search: true,
+                        searchBuilder: false,
+                        searchPanes: true,
+                        select: true,
+                        visible: true,                    }
                 }
             },
-          [% END %]
+            {
+                extend: 'savedStates',
+                  text: 'Load State',
+                config: {
+                    splitSecondaries: [
+                        'updateState',
+                        'removeState',
+                        {
+                            extend: 'renameState',
+                            className: 'red-border'
+                        },
+                    ]
+                }
+            },
+            // BUGBUG if this is before savedStates the buttons are duplicated in it ...
             {
                 extend: 'collection',
-                text: 'Export',
+                text: 'Selection',
+                autoClose: true,
                 buttons: [
-                    'copy',
-                    'csv',
-                    'excel',
-                    'pdf',
-                    {
-                        extend: 'print',
-                        text: 'Print all (not just selected)',
-                        exportOptions: {
-                            modifier: {
-                                selected: null
-                            }
-                        }
-                    }
+                  {
+                      text: 'Select all on page',
+                      action: function () {
+                          table.rows().select();
+                      }
+                  },
+                  {
+                      text: 'Select all cached',
+                      action: function () {
+                          table.rows().select();
+                          select_all_cached();
+                          mark_cached(requestLength);
+                          update_table_info();
+
+                      }
+                  },
+                  {
+                      text: 'Deselect all on page',
+                      action: function () {
+                          table.rows().deselect();
+                      }
+                  },
+                  {
+                      text: 'Deselect all cached',
+                      action: function () {
+                          table.rows().deselect();
+                          clear_selected_cache();
+                          mark_cached(requestLength);
+                          update_table_info();
+                      }
+                  }
                 ]
-            }
+            },
         ],
+        language: {
+            searchPanes: {
+                //clearMessage: 'Obliterate Selections',
+                collapse: {0: 'Filters', _: 'Filters Applied (%d)'}
+            }
+        },
         select: {
           info: false
         },
@@ -844,14 +951,6 @@ $(document).ready(function() {
         rowId: 'id',
         columnDefs: [
           { targets: [0], type: "numeric-html"},
-/*
-          {
-              searchPanes: {
-                  show: true
-              },
-              targets: [1, 3, 5]
-          }
-*/
         ],
         columns: [
           [% FOREACH column = search_cols %]
@@ -925,6 +1024,22 @@ $(document).ready(function() {
         var info = table.page.info();
         update_table_info();
     } );
+
+    table.on('click', 'tr.dtrg-start', function () {
+        $(this).toggleClass('group_collapsed');
+        var next_class = '.dtrg-level-0';
+        var hide_class = 'dtrg-level-0-hide';
+        if ($(this).hasClass('dtrg-level-1')){
+           next_class = '.dtrg-level-0, .dtrg-level-1';
+           hide_class = 'dtrg-level-1-hide';
+        }
+        var rowsCollapse = $(this).nextUntil(next_class);
+        if ($(this).hasClass('group_collapsed')) {
+            $(rowsCollapse).addClass(hide_class);
+        } else {
+            $(rowsCollapse).removeClass(hide_class);
+        }
+    });
 });
 
 </script>