Changeset 5001


Ignore:
Timestamp:
Oct 4, 2018, 8:36:07 AM (4 years ago)
Author:
Nicklas Nordborg
Message:

References #1054: Even more functionality in the Flagged alignment wizard

Added functionality for keeping track of changes that are made in the forms. Changed elements are highlighted.

A warning message is displayed if there are changes that would be lost due to changing filter settings or navigating to a different page.

Location:
extensions/net.sf.basedb.reggie/trunk/resources/flaggedalignment
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • extensions/net.sf.basedb.reggie/trunk/resources/flaggedalignment/search.js

    r4998 r5001  
    88  var alignments;
    99  var firstLoad = true;
     10  var numChangedFormElements = 0;
    1011 
    1112  var itemByName = {}; // To keep track of which QiaCubes and LibPlates we have already seen
     
    2728    Events.addEventHandler('mode-resolve', 'change', search.modeOnChange);
    2829   
     30    Events.addEventHandler('itemTable', 'change', search.changedFormData);
     31   
    2932    Buttons.addClickHandler('goreprocess', search.goReProcess);
    3033    Buttons.addClickHandler('goresolve', search.goResolve);
     
    5760    Doc.show('navigation');
    5861    search.updateTable();
     62  }
     63 
     64  /**
     65    All changes to form elements will enable a warning when trying to
     66    go somewhere else.
     67  */
     68  search.changedFormData = function(event)
     69  {
     70    var ctrl = event.target;
     71   
     72    // Check if the control element has changed -- we need different checks for different element types
     73    var modified = false;
     74    if (ctrl.tagName == 'INPUT' && ctrl.type == 'text')
     75    {
     76      // For text elements we can simply compare the current value with the original value
     77      modified = ctrl.defaultValue != ctrl.value;
     78    }
     79    else if (ctrl.tagName == 'SELECT')
     80    {
     81      modified = ctrl.value != ''; // Works, since we always have no value for the default selection
     82    }
     83    else if (ctrl.tagName == 'INPUT' && ctrl.type == 'checkbox')
     84    {
     85      modified = ctrl.checked; // Works, since all checkboxes are unchecked by default
     86    }
     87   
     88    // Did the modified status change for the control?
     89    if (ctrl.modified != modified)
     90    {
     91      ctrl.modified = modified;
     92      // We need to apply the class to the parent (<td>) element since <select> elements don't support ::after/::before
     93      Doc.addOrRemoveClass(ctrl.parentNode, 'modified', modified);
     94      numChangedFormElements += modified ? 1 : -1; //Update counter for changed elements
     95      if (numChangedFormElements < 0) numChangedFormElements = 0; // Just to be safe...
     96      Wizard.setNoConfirmOnFirstStep(numChangedFormElements == 0);
     97    }
    5998  }
    6099 
     
    205244      if (event.target != libPlate) libPlate.selectedIndex = 0;
    206245      if (event.target != qiaCube) qiaCube.selectedIndex = 0;
     246    }
     247   
     248    if (numChangedFormElements > 0)
     249    {
     250      if (!confirm('There are unsaved changes. Discard changes?')) return;
    207251    }
    208252   
     
    535579          html += '<td rowspan="'+tbodySpan+'" class="mode-reprocess num-col">'+(lys ? Math.round(lys.remainingQuantity) : '')+'</td>';
    536580          html += '<td rowspan="'+tbodySpan+'" class="mode-reprocess num-col">'+(sp ? Reggie.formatNumber(rna.remainingQuantity, null, 2, 2) : '')+'</td>';
    537           html += '<td rowspan="'+tbodySpan+'" class="mode-reprocess">'+(sp ? HTMLHelper.reprocessOptions(aligned, recommendReprocess) : '')+'</td>';
    538 
    539           html += '<td rowspan="'+tbodySpan+'" class="mode-resolve dottedleft">'+(sp ? HTMLHelper.okToUseOptions(aligned, filterType) : '')+'</td>';
    540           html += '<td rowspan="'+tbodySpan+'" class="mode-resolve">'+(sp ? HTMLHelper.resolveOptions(aligned, filterType) : '')+'</td>';
    541           html += '<td rowspan="'+tbodySpan+'" class="mode-resolve">'+(sp ? HTMLHelper.futureGtOptions(aligned, filterType) : '')+'</td>';
    542           html += '<td rowspan="'+tbodySpan+'" class="mode-resolve comment-col dottedright">'+(sp ? HTMLHelper.resolveComment(aligned) : '')+'</td>';
     581          html += '<td rowspan="'+tbodySpan+'" class="mode-reprocess reprocess-col editable">'+(sp ? HTMLHelper.reprocessOptions(aligned, recommendReprocess) : '')+'</td>';
     582
     583          html += '<td rowspan="'+tbodySpan+'" class="mode-resolve dottedleft editable">'+(sp ? HTMLHelper.okToUseOptions(aligned, filterType) : '')+'</td>';
     584          html += '<td rowspan="'+tbodySpan+'" class="mode-resolve editable">'+(sp ? HTMLHelper.resolveOptions(aligned, filterType) : '')+'</td>';
     585          html += '<td rowspan="'+tbodySpan+'" class="mode-resolve editable">'+(sp ? HTMLHelper.futureGtOptions(aligned, filterType) : '')+'</td>';
     586          html += '<td rowspan="'+tbodySpan+'" class="mode-resolve comment-col dottedright editable">'+(sp ? HTMLHelper.resolveComment(aligned) : '')+'</td>';
    543587        }
    544588       
    545589        var flagged = aligned.flagged;
    546590        var isAlignment = aligned.name;
    547         html += '<td rowspan="'+rowspan+'" class="mode-reprocess comment-col">'+(isAlignment ? HTMLHelper.qcCommentInput(aligned) : '')+'</td>';       
    548         html += '<td rowspan="'+rowspan+'" class="mode-reprocess flag-col dottedright">'+(isAlignment && sp && !flagged ? HTMLHelper.qcFlagCheckbox(aligned) : '')+'</td>';
     591        html += '<td rowspan="'+rowspan+'" class="mode-reprocess comment-col editable">'+(isAlignment ? HTMLHelper.qcCommentInput(aligned) : '')+'</td>';       
     592        html += '<td rowspan="'+rowspan+'" class="mode-reprocess flag-col dottedright editable">'+(isAlignment && sp && !flagged ? HTMLHelper.qcFlagCheckbox(aligned) : '')+'</td>';
    549593      }
    550594      html += '<td rowspan="'+rowspan+'" class="icon-col">'+tmp.icons+'</td>';
     
    630674      Events.addEventHandler(checks[i], 'change', search.okToUseOnChange);
    631675    }
    632 
     676   
     677    // Reset the change detection flags.
     678    Wizard.setNoConfirmOnFirstStep(true);
     679    numChangedFormElements = 0;
    633680  }
    634681 
     
    873920    {
    874921      doNotUseList.selectedIndex = 0;
     922      Events.sendChangeEvent(doNotUseList);
    875923      Doc.removeClass(doNotUseList, 'required');
    876924      Doc.removeClass(commentField, 'required');
     
    892940    var value = event.currentTarget.value;   
    893941    var futureGtCheck = Doc.element('futuregt.'+tmpId);
     942    if (value == '')
     943    {
     944      futureGtCheck.checked = false;
     945      Events.sendChangeEvent(futureGtCheck);
     946    }
    894947    futureGtCheck.disabled = value == '';
    895948    var commentField = Doc.element('resolvecomment.'+tmpId);
     
    15341587    var title = '';
    15351588   
    1536     var html = '<span class="reprocess-wrapper">';
     1589    var html = '';
    15371590    html += '<select id="'+id+'" class="reprocess-options" name="'+id+'" '+(recommendReprocess? 'title="Re-processing is recommended"':'')+'>';
    15381591    if (!aligned.currentReProcess) html += '<option value="" selected>&nbsp;';
     
    15401593    html += helper.reprocessOption('Lysate', 'lysate', aligned.currentReProcess, aligned.lysate.DO_NOT_USE);
    15411594    html += helper.reprocessOption('RNA', 'rna', aligned.currentReProcess, aligned.rna.DO_NOT_USE);
    1542     html += '</select></span>';
     1595    html += '</select>';
    15431596   
    15441597    if (aligned.currentReProcess != null)
  • extensions/net.sf.basedb.reggie/trunk/resources/flaggedalignment/search.jsp

    r4982 r5001  
    117117#itemTable .comment-col input
    118118{
    119   width: calc(100% - 12px);
     119  width: calc(100% - 16px);
    120120}
    121121
     
    227227select.donotuse-options
    228228{
    229     width: calc(100% - 10px);
     229    width: calc(100% - 16px);
    230230}
    231231
     
    241241}
    242242
    243 .reprocess-warning .reprocess-wrapper:after
     243.reprocess-warning .reprocess-col:after
    244244{
    245245  content: url('../images/warning.png');
     
    247247  padding: 2px;
    248248}
     249
     250td.editable::before
     251{
     252  content: '';
     253  border-right-width: 2px;
     254  border-right-style: solid;
     255  border-right-color: transparent;
     256  display: inline-block;
     257  height: 1em;
     258  vertical-align: middle;
     259  margin: 2px;
     260}
     261
     262td.modified
     263{
     264  background-color: #F0F0A8;
     265}
     266
     267td.modified::before
     268{
     269  border-right-color: #A08000;
     270}
     271
    249272</style>
    250273</base:head>
Note: See TracChangeset for help on using the changeset viewer.