JSFiddle - React, Tailwind, and code Playground

by Clay Anderson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>

<div>
<h1>
!!WIP!!
</h1>
  <label>Enter new branch/tag: <input type="text" ng-model="newBranch"></label>
  <br>
  <label>Enter old branch/tag: <input type="text" ng-model="oldBranch"></label>
  <br>
  <button ng-click="getDiff()">
  Get differences
  </button>
</div>

<br><br>

<table border="1">
<tr ng-repeat="workItem in workItems | orderBy">
  <td>{{workItem.id}}</td>
  <td>{{workItem.fields["System.Title"]}}</td>
  <td>{{workItem.fields["System.AreaPath"]}}</td>
</tr>
</table>

JavaScript

angular.module('app', [])
	.run(runApp);

var vstsApiHeaders = {
  'Authorization': 'Basic ' + btoa(':jmkub5x2udviy4fu4z7ddil24h2ks5uwjktuwq5c4u3dbee4pt3q')
  };

function runApp($rootScope, $http) {

  $rootScope.newBranch = 'master';
  $rootScope.oldBranch = 'release-1384m';
  
  $rootScope.getDiff = getDiff;
  
    function getDiff() {

      var ufRepoId = 'a010e7be-3313-4ae0-b977-453e4af5ccfb';

      $http.post('https://visionlink.visualstudio.com/DefaultCollection/_apis/git/repositories/' + ufRepoId + '/commitsBatch?api-version=1.0&top=200', 
      {
        itemVersion: {
          versionType: "branch",
          version: $rootScope.oldBranch
        },
        compareVersion: {
          versionType: "branch",
          version: $rootScope.newBranch
        }
      },
      {
        headers: vstsApiHeaders
      });
	}

	$rootScope.workItemIds = '12184,13070,13074,13075,13078,13105,13109,13155,15005,16786,18167,19212,19341,19586,20127,20217,20549,20628,20737,20966,21245,21249,21373,21387,21517,21547,21653,22207,22294,22397,22412,22507,22554,22680,22811,22929,22994,23001,23045,23108,23161,23281,23283,24027,24031,24202,24325,24372,24420,24502,24534,6346,8679,8681'; // example

	$rootScope.$watch('workItemIds', getWorkItems);

	function getWorkItems(workItemIds) {
    $http.get( 'https://visionlink.visualstudio.com/DefaultCollection/_apis/wit/workitems?api-version=1.0&ids='+workItemIds,
    {
      headers: vstsApiHeaders
    })
    .then(function (response) {
    	console.log(response.data);
      $rootScope.workItems = _.sortBy(response.data.value, function(workItem) { return workItem.fields["System.AreaPath"]; });
    });
    
  }
  
}