Icon to copy Navbar search text to Device Search Options field (closes #11)

Changes

@@ -4,6 +4,7 @@
 
   * Native copy of the Netdisco sort_port routine (#17)
   * Refactor begin hooks (closes #16)
+  * Icon to copy Navbar search text to Device Search Options field (closes #11)
 
   [BUG FIXES]
 

Netdisco/public/css/netdisco.css

@@ -229,17 +229,18 @@ td {
   width: 152px;
 }
 
-/* little sweep brush inside of port filter input field */
+/* little icon inside of search input fields */
-.field_clear_icon {
+.field_clear_icon, .field_copy_icon {
   position: absolute;
   margin-left: 132px;
   z-index: 1;
+  padding: 6px;
 }
 
-/* make the sweep icon fill the height of the input field
+/* nudge when icon inside the search field is a bootstrap glyph */
-so that its tooltip takes prescedence over the field tooltip */
+.field_clear_icon > i {
-.field_clear_icon > img {
+  margin-top: 1px;
-  padding: 6px;
+  margin-left: 4px;
 }
 
 /* change highlighting for form fields which are being used in a search */

Netdisco/views/js/search.js

@@ -10,13 +10,22 @@
   // and strikethrough the navbar search
   function device_form_state(e) {
     if (e.is('[value!=""]')) {
+      $('.field_copy_icon').hide();
+
       e.parent(".clearfix").addClass('success');
       $('#nq').css('text-decoration', 'line-through');
+
+      var id = '#' + e.attr('name') + '_clear_btn';
+      $(id).show();
     }
     else {
       e.parent(".clearfix").removeClass('success');
+      var id = '#' + e.attr('name') + '_clear_btn';
+      $(id).hide();
+
       if (! d_inputs.is('[value!=""]') ) {
         $('#nq').css('text-decoration', 'none');
+        $('.field_copy_icon').show();
       }
     }
   }
@@ -35,6 +44,25 @@
   // on load, check initial Device Search Options form state,
   // and on each change to the form fields
   $(document).ready(function() {
+    $('.field_copy_icon').hide();
+    $('.field_clear_icon').hide();
+
     d_inputs.each(function() {device_form_state($(this))});
     d_inputs.change(function() {device_form_state($(this))});
+
+    // handler for copy icon in search option
+    $('.field_copy_icon').click(function() {
+      var name = $(this).data('btn-for');
+      var input = $('#device_form [name=' + name + ']');
+      input.val( $('#nq').val() );
+      device_form_state(input); // will hide copy icons
+    });
+
+    // handler for bin icon in search option
+    $('.field_clear_icon').click(function() {
+      var name = $(this).data('btn-for');
+      var input = $('#device_form [name=' + name + ']');
+      input.val('');
+      device_form_state(input);
+    });
   });

Netdisco/views/sidebar/search/device.tt

@@ -2,26 +2,46 @@
             <p><em>Device Search Options</em></p>
             <input name="q" value="[% params.q %]" type="hidden"/>
             <div class="clearfix">
-              <input class="nd_side_input" placeholder="System Name"
+              <a data-btn-for="dns" class="field_copy_icon" href="#">
-                type="text" name="name" value="[% params.name %]"
+                <img src="[% uri_base %]/images/vaga_copy.png"/></a>
-                rel="tooltip" data-placement="left" data-offset="5" title="System Name"/>
+              <a id="dns_clear_btn" data-btn-for="dns" class="field_clear_icon" href="#">
-            </div>
+                <i class="icon-trash"></i></a>
-            <div class="clearfix">
-              <input class="nd_side_input" placeholder="Location"
-                type="text" name="location" value="[% params.location %]"
-                rel="tooltip" data-placement="left" data-offset="5" title="Location"/>
-            </div>
-            <div class="clearfix">
               <input class="nd_side_input" placeholder="DNS"
                 type="text" name="dns" value="[% params.dns %]"
                 rel="tooltip" data-placement="left" data-offset="5" title="DNS"/>
             </div>
             <div class="clearfix">
+              <a data-btn-for="ip" class="field_copy_icon" href="#">
+                <img src="[% uri_base %]/images/vaga_copy.png"/></a>
+              <a id="ip_clear_btn" data-btn-for="ip" class="field_clear_icon" href="#">
+                <i class="icon-trash"></i></a>
               <input class="nd_side_input" placeholder="IP Address"
                 type="text" name="ip" value="[% params.ip %]"
                 rel="tooltip" data-placement="left" data-offset="5" title="IP Address"/>
             </div>
             <div class="clearfix">
+              <a data-btn-for="name" class="field_copy_icon" href="#">
+                <img src="[% uri_base %]/images/vaga_copy.png"/></a>
+              <a id="name_clear_btn" data-btn-for="name" class="field_clear_icon" href="#">
+                <i class="icon-trash"></i></a>
+              <input class="nd_side_input" placeholder="System Name"
+                type="text" name="name" value="[% params.name %]"
+                rel="tooltip" data-placement="left" data-offset="5" title="System Name"/>
+            </div>
+            <div class="clearfix">
+              <a data-btn-for="location" class="field_copy_icon" href="#">
+                <img src="[% uri_base %]/images/vaga_copy.png"/></a>
+              <a id="location_clear_btn" data-btn-for="location" class="field_clear_icon" href="#">
+                <i class="icon-trash"></i></a>
+              <input class="nd_side_input" placeholder="Location"
+                type="text" name="location" value="[% params.location %]"
+                rel="tooltip" data-placement="left" data-offset="5" title="Location"/>
+            </div>
+            <div class="clearfix">
+              <a data-btn-for="description" class="field_copy_icon" href="#">
+                <img src="[% uri_base %]/images/vaga_copy.png"/></a>
+              <a id="description_clear_btn" data-btn-for="description" class="field_clear_icon" href="#">
+                <i class="icon-trash"></i></a>
               <input class="nd_side_input" placeholder="Description"
                 type="text" name="description" value="[% params.description %]"
                 rel="tooltip" data-placement="left" data-offset="5" title="Description"/>