conditionalFormatting.js

name: Row-level conditional formatting in cases list
description: Allows to stylize table rows based on values of test case fields
author: Paul Danyliuk
version: 1.0
includes: ^suites/view
excludes:

js:
(function ($, context) {

  // [!] Define conditional formatting rules here [!]
  var rules = [
    {
      expr: 'this.priority_id > 3',
      class: 'highPriority'
    },
    {
      expr: 'this.priority_id == 1',
      class: 'lowestPriority'
    }
  ];

  //------------------------------------------------------------------------------------------------------------------//

  // Compile rules into evaluable functions
  for (var i = 0; i < rules.length; i++) {
    rules[i].func = new Function('return ' + rules[i].expr);
  }

  /**
   * Creates an indexed map of cases for easy lookup
   * @param casesData Array of case descriptors as returned by REST API
   * @return {{}} Map of case descriptors with case id as key
   */
  var mapCases = function(casesData) {
    var mapData = {};
    for (var i = 0; i < casesData.length; i++) {
      mapData[casesData[i].id] = casesData[i];
    }
    return mapData;
  };

  /**
   * Walk over test cases table and add CSS classes according to rules
   * @param casesMap
   */
  var colorizeRows = function(casesMap) {
    $('.caseRow').each(function () {
      var $row = $(this);
      var caseId = $row.attr('rel');
      rules.forEach(function(rule) {
        if (rule.func.apply(casesMap[caseId])) {
          $row.addClass(rule.class);
        }
      });
    });
  };

  // Request cases data via REST API and stylize table rows
  $(document).ready(function () {
    $.ajax({
      url: 'index.php?/api/v2/get_cases/' + context.project.id + '&suite_id=' + context.suite.id,
      contentType: 'application/json',
      success: function (data) {
        var casesMap = mapCases(data);

        // Stylize immediately (if data is already loaded)
        colorizeRows(casesMap);

        // And subscribe to any subsequent changes (e.g. "load all cases" clicks, loading another section etc)
        $.subscribe('body.changed', 'condformat', function() {
          colorizeRows(casesMap);
        });
      }
    });
  });

})($, uiscripts.context);

css:
  .highPriority {
  background-color: #FFD1C7;
}
.lowestPriority td.sub, .lowestPriority td.id, .lowestPriority td .title {
  color: #AAA;
}