Angular - Metric Configuration

This is an example of how the metric configuration should look like

by douglasloyo

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.4/sortable.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homeController">
<h1>Metric UI Config</h1>

<h3>Configuring Metric: (100) NWEA MAP - Assessments Performance</h3>
    <table class="srcTable" style="width:auto;">
    <thead>
      <tr>
        <th></th>
        <th>Column Title</th>
        <th>Assessmnet Reporting Method Type</th>
        <th>Cell Type</th>
        <th>Is Metric Value</th>
        <th>Performance Level Passing</th>
      </tr>
    </thead>
    <tbody ui-sortable="sortableOptions" ng-model="metadata.columns">
    <tr ng-repeat="c in metadata.columns" class="item" style="cursor: move;">
      <td>.</td>
      <td><input type="text" ng-model="c.columnTitle" /></td>
      <td><select ng-options="o as o.Value for o in metadata.AssessmentReportingMethodTypes track by o.Id" ng-model="c.MetricValuesKeyName">
        </select></td>
      <td>
        <select ng-options="o.Id as o.Type for o in metadata.MetricCellType" ng-model="c.MetricCellTypeId">
        </select>
     </td>
     <td><input type="radio" name="metricValue" /></td>
     <td><input type="text" ng-model="c.performanceLevelPassing" /></td>
     <td><button ng-click="removeRow($index)">(-)</button></td>
    </tr>
    </tbody>
    </table>
    <button ng-click="addRow()">(+)</button>
    <h2>Rendered Dashboard Visual:</h2>
    <table>
      <thead>
        <tr>
          <th style="width:100px;" class="leftRound">100 - NWEA</th>
          <th ng-repeat="c in metadata.columns | orderBy:DisplayOrder">{{c.columnTitle}}</th>
          <th style="width:100px;" class="rightRound">Details</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="m in...

CSS

tbody{
  background:#FFFFFF;
}

th{background-color:#969696;
  padding: 15px;
  color: white;
}

td{
  padding:5px;
}

.leftRound{
  border-radius:15px 0 0 0;
}

.rightRound{
  border-radius:0 15px 0 0;
}

input[type="text"], textarea, select {
  outline: none;
  border: 0px solid;
}

textarea:focus, input:focus{
    outline: none;
}

.srcTable{
border-collapse:collapse;
border:1px solid #969696;
}

.srcTable th{
  background-color:#3399ff;
  padding: 5px;
}

.srcTable td{
border:1px solid #969696;
padding: 5px;
}

.dbTable{
border-collapse:collapse;
border:1px solid #969696;
}

.dbTable th{
  border:1px solid #969696;
  background-color:#f0f0f0;
  padding: 5px;
  color: #000000;
}

.dbTable td{
border:1px solid #969696;
padding: 5px;
}

JavaScript

/* Application */
var myApp = angular.module('myApp', ['ui.sortable'])
.filter('removeSpaces', [function() {
    return function(string) {
        if (!angular.isString(string)) {
            return string;
        }
        return string.replace(/[\s]/g, '');
    };
}]);

myApp.controller('homeController', function ($scope) {
	
  $scope.sortableOptions = {
    stop: function(e, ui) {
    	var order=1;
    	angular.forEach($scope.metadata.columns, function(c){
        $scope.$apply(function(){
          c.DisplayOrder = order;
        });
        order++;
      });
    },
  };
  
  $scope.addRow = function(){
  	var maxId = Math.max.apply(Math,$scope.metadata.columns.map(function(o){return o.Id;}));
    var maxDiaplayOrder = Math.max.apply(Math,$scope.metadata.columns.map(function(o){return o.DisplayOrder;}));
    //alert(maxId);
  	$scope.metadata.columns.push({Id: maxId+1, metricId: 100, DisplayOrder: maxDiaplayOrder+1, MetricCellTypeId: 0, columnTitle: '', MetricValuesKeyName: ''});
  };
  
  $scope.removeRow = function(index){
  	$scope.metadata.columns.splice(index,1);
  };
  
  $scope.metadata = {
  		
      MetricCellType: [{Id: 1, Type:"PlainText"}, {Id: 2, Type:"StatusLabel"}, {Id: 3, Type:"Trend"}, {Id: 4, Type:"PerformanceBar"}],
      
  		columns:[ 
      	{ Id: 1, metricId: 100, DisplayOrder: 1, MetricCellTypeId: 1, columnTitle: 'RIT Score', MetricValuesKeyName: { Id:"45", Value:"RIT scale score"}  },
      	{ Id: 2, metricId: 100, DisplayOrder: 2, MetricCellTypeId: 1, columnTitle: 'Standard Error', MetricValuesKeyName: { Id:"30", Value:"Standard error measurement"}  },
        { Id: 3, metricId: 100, DisplayOrder: 3, MetricCellTypeId: 2, columnTitle: 'Percentile Rank', MetricValuesKeyName: { Id:"22", Value:"Percentile rank"}  },
        { Id: 4, metricId: 100, DisplayOrder: 4, MetricCellTypeId: 3, columnTitle: 'Trend', MetricValuesKeyName: ''  }],
        
      metricCellMetadata:[],
      
      granularMetricsData: [
      	{metricId:101,...