Change Test Name

Customer request

I would like to be able to rename a test, I often clone existing tests (a great feature!) and sometimes forget to rename the new test.

• Select the ‘edit’ icon next to the name
• Popup editor appears

 

• change your test name
• click the ‘CheckBox’ to save

Bonus – the code using Bootstrap PopOver.

We did not want to include yet another javascript library that did this for us.  Though if you want there is a good one https://vitalets.github.io/x-editable/.

Instead we implemented just what we needed using Bootstrap PopOver, though we did not make this generic enough to throw into your code but it gives you an idea.

HTML Snippets

<!-- The icon to edit the test name -->
<span onclick="viewLoadTestHelper.editableShow()" class="name-edit glyphicon glyphicon-edit" aria-hidden="true" data-placement="top" title="Change Test Name"></span>

<!-- Somewhere else on the page we keep the markup for the edit box -->
<!-- For an Editable Name, we hide by default -->
<div id="editable-input" style="display:none;">
  <div class="form-inline">
    <input type="text" class="form-control editable-name">
    <!-- We pass in some data to editable name, but that could be stored in a data- attribute -->
    <button onclick="viewLoadTestHelper.editableName( [your data] )" type="submit" class="btn btn-primary btn-sm "><i class="glyphicon glyphicon-ok"></i></button>
    <!-- Cancel updating the name we will just drop the box -->
    <button onclick="viewLoadTestHelper.editableCancel()"type="button" class="btn btn-default btn-sm "><i class="glyphicon glyphicon-remove"></i></button>
  </div>
</div>

And the javascript to match

var editableHelper = { 

  /**
   * Set up field for popover editing 
   * Need to pull from page and push into dynamic popover by listening to shown event.
   */
  editableSetup : function( ){
    // Hard cleanup
    $('.name-edit').popover('destroy');

    // We use the manual control on the popover
    // We are using HTML content
    // Pull in the HTML from a content stored in the page (#editable-input)
    $('.name-edit').popover({ trigger : 'manual', html: true , content: $('#editable-input').html() });

    // We watch for the popover to show, then grab the text and place it inside the input field. 
    $('.name-edit').on('shown.bs.popover', function () {
      $('.popover input.editable-name').val(  $("#testname").text() );
    })

    // You can put this somewhere on your page where you show errors.
    $('.on-editable-error').text("");
  },

  /** Manual Control of Popover - Show */
  editableShow : function( ) {
    $('.name-edit').popover('show');
  },

  /** Manual Control of Popover - Hide */
  editableCancel : function( ) {
    $('.name-edit').popover('hide');
  },
  
  /**
   * On Save using $.post 
   */
  editableName : function ( loadTestId ) {
    // Grab value from field.
    var name = $('.popover input.editable-name').val();
    // Grab original value
    var oname = $("#testname").text();

    // Manual Control, hide the popover
    $('.name-edit').popover('hide');
    // Make sure we have content and it is not what we already had.
    if ( name && name.trim().length > 0 && name != oname ) {

      // POST To your endpoint
      $.post( '/YOUR ENDPOINT', { "name": name } )
      .done(function(data) {
        // Update field on the page
        $("#testname").text( name );
      })
      .fail( function(error){
        // Set error on page if there is an issue.
        $('.on-editable-error').text("Failed to change name! " + error.statusText );
      });
    }
  }
}

// Initialize somewhere on page load.
$(function() {
 EditableHelper.editableSetup();
});