TT#44605 datatables search field tooltip

Change-Id: I4f574d8f47807121d6636e4e83ab2f178bd24df9

lib/NGCP/Panel/Field/DataTable.pm

@@ -16,8 +16,9 @@ has 'table_titles' => ( isa => 'ArrayRef', is => 'rw' );
 has 'custom_renderers' => ( isa => 'HashRef', is => 'rw' );
 has 'no_ordering' => ( isa => 'Bool', is => 'rw' );
 has 'language_file' => (isa => 'Str', is => 'rw', default => 'dataTables.default.js' );
+has 'search_tooltip' => (isa => 'Str', is => 'rw', default => 'Filter for column values matching the pattern string, e.g. 12*45. The * (wildcard) is implicitly prepended and appended.' );
 
-#didn't want to incude some complex role related logic here, 
+#didn't want to incude some complex role related logic here,
 #as these DataTable fields also are used in API
 #To don't slow down API
 #traits  => ['Code']
@@ -41,12 +42,13 @@ sub render_element {
         no_ordering => $self->no_ordering,
         errors => $self->errors,
         language_file => $self->language_file,
+        search_tooltip => $self->search_tooltip,
         wrapper_class => ref $self->wrapper_class eq 'ARRAY' ? join (' ', @{$self->wrapper_class}) : $self->wrapper_class,
     };
     ref $self->adjust_datatable_vars eq 'CODE' and $self->adjust_datatable_vars->($self, $vars);
 
-    my $t = new Template({ 
-        ABSOLUTE => 1, 
+    my $t = new Template({
+        ABSOLUTE => 1,
         INCLUDE_PATH => [
             '/usr/share/ngcp-panel/templates',
             'share/templates',

share/templates/helpers/datatables.tt

@@ -4,11 +4,15 @@
         helper.column_fields = [];
         helper.column_sortable_map = {};
         helper.custom_renderers = {};
+        helper.strict_search = 0;
         FOR col IN helper.dt_columns;
             IF !col.accessor;
                 col.accessor = col.name;
                 col.accessor = col.accessor.replace('\.','_');
             END;
+            IF col.strict_search;
+                helper.strict_search = 1;
+            END;
             NEXT UNLESS col.title;
             helper.column_titles.push(col.title);
             helper.column_fields.push(col.accessor);
@@ -23,6 +27,13 @@
     # create unique identifier
     helper.id_from_name = helper.identifier || helper.name.remove('[\s+\.#]');
     helper.identifier = 0; # make sure we don't use the same identifier twice
+    IF search_tooltip;
+        helper.search_tooltip = c.loc(search_tooltip);
+    ELSIF helper.strict_search;
+        helper.search_tooltip = c.loc('Filter for column values matching the string, e.g. 12345. A leading * (wildcard) can result in long response times.');
+    ELSE;
+        helper.search_tooltip = c.loc('Filter for column values matching the pattern string, e.g. 12*45. The * (wildcard) is implicitly prepended and appended.');
+    END;
 -%]
 
 <script src="/js/libs/bootstrap/datatables-paging.js"></script>
@@ -239,6 +250,13 @@ $(document).ready(function() {
             nRow.className = "sw_action_row";
             return nRow;
         },
+        "initComplete": function(settings, json) {
+            if ("[% helper.search_tooltip %]".length > 0) {
+                $( "#[% helper.id_from_name %]_table_filter input" ).tooltip({
+                    title: "[% helper.search_tooltip %]"
+                });
+            }
+        }
     } );
 
 } );

share/templates/helpers/datatables_field.tt

@@ -1,9 +1,9 @@
 <script type="text/javascript">
 
 $(document).ready(function() {
-    
+
     $('#[% table_id %] tr td input[type="checkbox"]').live( "click", function() {
-    
+
         if($(this).attr("checked") == "checked") {
             $(this).parents("tr").siblings().find("td input[type='checkbox']").attr("checked", false);
             $("#[% hidden_id %]").val( $(this).parents("tr")
@@ -11,7 +11,7 @@ $(document).ready(function() {
         } else {
             $("#[% hidden_id %]").val("");
         }
-    
+
     });
 
     $('#[% table_id %]')
@@ -30,12 +30,12 @@ $(document).ready(function() {
             "sUrl": "/js/i18n/[% language_file %]"
         },
         "sAjaxSource": "[% ajax_src %]",
-        
+
         "aoColumns": [
                         [% FOREACH f IN table_fields -%]
                             [%index = loop.count - 1%]
                             [%IF table_titles.${index} %]
-                        { 
+                        {
                            "mData": "[% f.replace('\.','_') %]",
                            "mRender": function ( data, type, full ) {
                                 if(data == null)
@@ -68,8 +68,14 @@ $(document).ready(function() {
         "fnServerParams": function ( aoData ) {
             aoData.push( {"name":"iIdOnTop","value":"[% value %]"} );
         },
+        "initComplete": function(settings, json) {
+            if ("[% c.loc(search_tooltip) %]".length > 0) {
+                $( "#[% table_id %]_filter input" ).tooltip({
+                    title: "[% c.loc(search_tooltip) %]"
+                });
+            }
+        }
     } );
-
 } );
 </script>
 

share/templates/helpers/datatables_multifield.tt

@@ -10,7 +10,7 @@ $(document).ready(function() {
     });
     [%END%]
     $('#[% table_id %] tr td input[type="checkbox"]').live( "click", function() {
-    
+
         var my_id = $(this).parents("tr").find("td:first").text();
         var indexOfId = checked_fields.indexOf(my_id)
         if($(this).attr("checked") == "checked") {
@@ -23,7 +23,7 @@ $(document).ready(function() {
             }
         }
         $("#[% hidden_id %]").val( JSON.stringify(checked_fields) );
-    
+
     });
     $('#[% table_id %]')
         .dataTable( {
@@ -41,10 +41,10 @@ $(document).ready(function() {
             "sUrl": "/js/i18n/[% language_file %]"
         },
         "sAjaxSource": "[% ajax_src %]",
-        
+
         "aoColumns": [
                         [% FOREACH f IN table_fields -%]
-                        { 
+                        {
                            "mData": "[% f %]",
                            "mRender": function ( data, type, full ) {
                                 if(data == null)
@@ -53,7 +53,7 @@ $(document).ready(function() {
                                     var renderCustom = [% custom_renderers.${f} -%];
                                 [% ELSE -%]
                                     var renderCustom = function(data, type, full) { return data; };
-                                [% END -%]                                   
+                                [% END -%]
                                 return String(renderCustom(data, type, full)).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
                             }
                         },
@@ -76,6 +76,13 @@ $(document).ready(function() {
         "fnServerParams": function ( aoData ) {
             //aoData.push( {"name":"iIdOnTop","value":"[% value %]"} );
         },
+        "initComplete": function(settings, json) {
+            if ("[% c.loc(search_tooltip) %]".length > 0) {
+                $( "#[% table_id %]_filter input" ).tooltip({
+                    title: "[% c.loc(search_tooltip) %]"
+                });
+            }
+        }
     } );
 
 } );