App.js

'use strict';

// Declare app level module which depends on views, and components
var myApp = angular.module('myApp',[
  'ui.router',
  'ui.bootstrap',
  'validation', 
  'validation.rule', 
  'users',
  'dashboard',
  'reports',
  'employees',
  'reservations',
  'employeeTalentPool',
  'ngDialog',
  'angularCharts',
  //'picardy.fontawesome',
  'reports',
  'chart.js',
  'smart-table',
  'easypiechart'
  
  //'ui.bootstrap',
  //'dialogs',
  //'ngAnimate'
]);
myApp.TalentPoolBaseUrl = "http://localhost:58102/api";
myApp.IndecommBaseUrl = "http://localhost:1783/api";
myApp.HRISBaseUrl = "http://localhost:51219/api";

myApp.state = { bench: 1, blocked:5, billed:7 };
myApp.dateFormat = "yyyy-MM-dd";

//Config phase
myApp.config(function($urlRouterProvider, $httpProvider) {
    //session check and redirect to specific state
    $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    if (!window.sessionStorage["userInfo"]) {
	$urlRouterProvider.otherwise("/login");  
  }else{
	$urlRouterProvider.otherwise("/dashboard");  
  }
    
});

//Run phase
myApp.run(function($rootScope, $state, $window) {
	$rootScope.$state = $state; //Get state info in view
    //Should below code be using rootScope or localStorage.. Check which one is better and why.

	if (window.sessionStorage["userInfo"]) {

		$rootScope.userInfo = JSON.parse(window.sessionStorage["userInfo"]);
	}
	
	//Check session and redirect to specific page
	$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
		if(toState && toState.data && toState.data.auth && !window.sessionStorage["userInfo"]){
			event.preventDefault();
			window.location.href = "#login";
		}		
		//if (toState && toState.data && toState.data.auth && window.sessionStorage["userInfo"]) {
		    
		//    $rootScope.mysearch = "";
		//}

		if(!toState && !toState.data && !toState.data.auth && window.sessionStorage["userInfo"]){
			event.preventDefault();
			window.location.href = "#dashboard";
		}
		if (toState && toState.data.auth == "Admin") {
		    event.preventDefault();
		    window.location.href = "#unAuthorized";
		}

	});
	$rootScope.back = function () {
	    $window.history.back();
	}
});


//Datatable
myApp.factory('dataTable', ['$filter', 'ngTableParams', '$rootScope', function ($filter, ngTableParams, $rootScope) {

    var factoryDefinition = {
      render: function($scope, config, componentId, data) {
          if (!config) config = { filter: { 'firstName': $rootScope.mysearch } };
          
		var config = angular.extend({}, {page:1, count:10}, config)
		
		$scope[componentId] = new ngTableParams(config, {
			total: data.length, // length of data
			getData: function ($defer, params) {
			    // organize filter as $filter understand it (graph object)
			    var filters = {};
			    var val = $rootScope.mysearch;
			    var key = "firstname";
			    $rootScope.mysearch = "";

			    angular.forEach(params.filter(), function (val, key) {
			        var filter = filters;
			        var parts = key.split('.');
			        for (var i = 0; i < parts.length; i++) {
			            if (i != parts.length - 1) {
			                filter[parts[i]] = {};
			                filter = filter[parts[i]];
			            }
			            else {
			                filter[parts[i]] = val;
			            }
			        }
			    });
				// use build-in angular filter
				var filteredData = params.filter() ?
						$filter('filter')(data, filters) :
						data;
				var orderedData = params.sorting() ?
						$filter('orderBy')(filteredData, params.orderBy()) :
						data;
				params.total(orderedData.length); // set total for recalc pagination
				$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
				$scope.pageNumber = params.page();
				$scope.itemsPerPage = params.count();
			}
		}); 
		
		
      }
    }
	
    return factoryDefinition;
  }
]);
myApp.filter('customFilter', ['$filter', function ($filter) {
    var filterFilter = $filter('filter');
    var standardComparator = function standardComparator(obj, text) {
        text = ('' + text).toLowerCase();
        return ('' + obj).toLowerCase().indexOf(text) > -1;
    };

    return function customFilter(array, expression) {
        function customComparator(actual, expected) {

            var isBeforeActivated = expected.before;
            var isAfterActivated = expected.after;
            var isLower = expected.lower;
            var isHigher = expected.higher;
            var higherLimit;
            var lowerLimit;
            var itemDate;
            var queryDate;

            if (ng.isObject(expected)) {
                //exact match
                if (expected.distinct) {
                    if (!actual || actual.toLowerCase() !== expected.distinct.toLowerCase()) {
                        return false;
                    }

                    return true;
                }

                //matchAny
                if (expected.matchAny) {
                    if (expected.matchAny.all) {
                        return true;
                    }

                    if (!actual) {
                        return false;
                    }

                    for (var i = 0; i < expected.matchAny.items.length; i++) {
                        if (actual.toLowerCase() === expected.matchAny.items[i].toLowerCase()) {
                            return true;
                        }
                    }

                    return false;
                }

                //date range
                if (expected.before || expected.after) {
                    try {
                        if (isBeforeActivated) {
                            higherLimit = expected.before;

                            itemDate = new Date(actual);
                            queryDate = new Date(higherLimit);

                            if (itemDate > queryDate) {
                                return false;
                            }
                        }

                        if (isAfterActivated) {
                            lowerLimit = expected.after;


                            itemDate = new Date(actual);
                            queryDate = new Date(lowerLimit);

                            if (itemDate < queryDate) {
                                return false;
                            }
                        }

                        return true;
                    } catch (e) {
                        return false;
                    }

                } else if (isLower || isHigher) {
                    //number range
                    if (isLower) {
                        higherLimit = expected.lower;

                        if (actual > higherLimit) {
                            return false;
                        }
                    }

                    if (isHigher) {
                        lowerLimit = expected.higher;
                        if (actual < lowerLimit) {
                            return false;
                        }
                    }

                    return true;
                }
                //etc

                return true;

            }
            return standardComparator(actual, expected);
        }

        var output = filterFilter(array, expression, customComparator);
        return output;
    };
}]);

//For top sub menu (look others menu)
//$(function () {
//	$('.subnavbar').find ('li').each (function (i) {
//		var mod = i % 3;
//		if (mod === 2) {
//			$(this).addClass ('subnavbar-open-right');
//		}
//	});
//});
//Date Picker
myApp.directive('coreDatePicker', function ($compile) {
    return {
        restrict: 'A',
        require: 'ngModel',
        compile: function (element, attrs) {
            $(element[0]).datepicker({
                autoclose: true,
                format: "dd/mm/yyyy"
            });

            return this.link;
        },
        link: function (scope, element, attrs, ngModelCtrl) {
            $(element[0]).datepicker().on("change", function (e) {
                scope.$apply(function () {
                    if (element.val()) {
                        ngModelCtrl.$setViewValue(element.val());
                    }
                });
            });
        }
    };
});

dashboard.html

<div class="row">
    <ol class="breadcrumb">
        <li>
            <a href="#">
                <svg class="glyph stroked home">
                    <use xlink:href="#stroked-home"></use>
                </svg>
            </a>
        </li>
        <li class="active">Dashboard</li>
        <li>
        <li class="dropdown pull-right">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <svg class="glyph stroked male-user">
                    <use xlink:href="#stroked-male-user"></use>
                </svg> Important Shortcuts <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li> <a class="" href="#"> Skill Report</a> </li>
                <li> <a class="" href="#"> Reservation </a> </li>
                <li> <a class="" href="#"> Bench Consumption </a> </li>
                <li> <a class="" href="#"> Bench Ageing </a> </li>
                <li> <a class="" href="#"> POC Report </a> </li>
                <li> <a class="" href="#"> Frequent </a></li>
                <li> <a class="" href="#"> Benchers </a> </li>
            </ul>
        </li>
        </li>
    </ol>
</div>

<!--/.row-->

<div class="row">
    <div class="col-md-4">
        
        <div class="panel panel-default">
            <div class="panel-heading dark-overlay">
                <svg class="glyph stroked clock">
                    <use xlink:href="#stroked-clock" />
                </svg> Today's Stats
            </div>
            <div class="panel-body" ng-controller="todaysStatsController">
                <canvas id="doughnut" class="chart chart-doughnut"
                        chart-data="data" chart-labels="labels" chart-series="series" chart-dataset-override="datasetOverride" chart-options="options" height="100">{{data.available}}</canvas>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading dark-overlay">
                <svg class="glyph stroked app window with content">
                    <use xlink:href="#stroked-app-window-with-content" />
                </svg> Recent News
            </div>
            <div class="panel-body no-padding">
                <table data-toggle="table" data-url="tables/data04.json">
                    <thead>
                        <tr>
                            <th data-field="ns"> </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="panel-footer">
                <div class="input-group">
                    <button class="btn btn-primary btn-md" id="btn-todo">Add</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8" ng-controller="getAllBenchersController">
        <div class="panel panel-default" >
            <div class="panel-heading dark-overlay">
                <svg class="glyph stroked clock">
                    <use xlink:href="#stroked-clock" />
                </svg> Talentpool
            </div>



            <div class="panel-body showdetails" style="display:none" >
                <div class="profile">
                    <a class="btn btn-default btn-sm pull-right showback top" style="margin:0px 10px 10px 0px" title="" data-placement="top" data-toggle="tooltip" data-original-title="back to list"><span class="glyphicon glyphicon-list"></span></a>
                    <div style="margin-bottom:15px" class="row">
                        <div class="col-xs-12 col-sm-8">
                            <h2> {{employee.firstName}} </h2>
                            <p> <strong>Title:</strong> Web Designer / UI.</p>
                            <p>
                                <strong>Primary Skills :</strong> Read, out with friends, listen to music, draw and learn
                                new things.
                            </p>
                            <p> <strong class="mrs">Skills:</strong><span class="label label-green mrs">html5</span><span class="label label-green mrs">css3</span><span class="label label-green mrs">jquery</span></p>
                        </div>
                        <div class="col-xs-12 col-sm-4 text-center">
                            <figure>
                                <img src="../../NewUI/img/user.png" alt="" style="display: inline-block" class="img-responsive img-circle">
                                <figcaption class="ratings">
                                    <p><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star"></span></a><a href="#"><span class="glyphicon glyphicon-star-empty"></span></a></p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    <div class="row text-center divider">
                        <div class="col-xs-12 col-sm-4 emphasis">
                            <h2> <strong>20,7K</strong></h2>
                            <p> <small>Followers</small> </p>
                            <button class="btn btn-success btn-block"> <span class="glyphicon glyphicon-plus-sign"></span> Follow </button>
                        </div>
                        <div class="col-xs-12 col-sm-4 emphasis">
                            <h2> <strong>245</strong></h2>
                            <p> <small>Following</small> </p>
                            <button class="btn btn-warning btn-block"> <span class="glyphicon glyphicon-user"></span> Profile </button>
                        </div>
                        <div class="col-xs-12 col-sm-4 emphasis">
                            <h2> <strong>43</strong></h2>
                            <p> <small>Snippets</small> </p>
                            <div class="btn-group dropup">
                                <button type="button" data-toggle="dropdown" class="btn btn-danger dropdown-toggle"> <span class="glyphicon glyphicon-cog"></span> Options </button>
                                <ul role="menu" class="dropdown-menu pull-right text-left">
                                    <li><a href="#"><span class="fa fa-envelope"></span>&nbsp; Send an email</a></li>
                                    <li><a href="#"><span class="fa fa-list"></span>&nbsp; Add or remove from a list</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#"><span class="fa fa-warning"></span>&nbsp; Report this user for spam</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#" role="button" class="btn disabled">Unfollow</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="panel-body showdetails1 showbackdetails" id="details">
                <!--<div class="pull-right">
                    <div class="btn-group" style="margin-bottom:15px;">
                        <button type="button" class="btn btn-success btn-filter" data-target="available">Available</button>
                        <button type="button" class="btn btn-warning btn-filter" data-target="billed">Billed</button>
                        <button type="button" class="btn btn-danger btn-filter" data-target="reject">Reject</button>
                        <button type="button" class="btn btn-default btn-filter" data-target="all">All</button>
                    </div>
                </div>-->
                <div class="table-container" ng-repeat="employee in data">
                    <table class="table table-filter">
                        <tbody>
                            <tr data-status="available"  class="showbackdetails showdetails1">
                                <td>
                                    <div class="ckbox">
                                        <input type="checkbox" id="checkbox1">
                                        <label for="checkbox1"></label>
                                    </div>
                                </td>
                                <td>
                                    <a href="javascript:;" class="star"> <i class="glyphicon glyphicon-star"></i> </a>
                                </td>
                                <td id="details">
                                    <div class="media">
                                        <a href="#" class="pull-left"> <img src="../../NewUI/img/user.png" class="media-photo"> </a>
                                        <div class="media-body">
                                            <span class="media-meta pull-right">dec 13, 2016</span>
                                            <h4 class="title "> {{employee.firstName}} <span class="pull-right available">(available)</span> </h4>
                                            <p class="summary">been moved to Talentpool...</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
    </div>
</div>
<!--/.row--> 

<script type="text/javascript">
    $(document).ready(function () {
        
    $('#details').click(function () {
            $('.showdetails').show();
			$('.showdetails1').css('display', 'none').hide();
    });
    $('.showback').click(function() {
             $('.showbackdetails').show();
			$('.showdetails').css('display', 'none').hide();
    });
});
</script>

dashboard.js

'use strict';

angular.module('dashboard', []);

//Routers
myApp.config(function ($stateProvider) {
    $stateProvider.state('dashboard', {
        url: '/dashboard',
        templateUrl: 'partials/dashboard/dashboard.html',
        data: {
            auth: true
        }
    });

});

//Controllers
myApp.controller('todaysStatsController', ['$scope', 'dashboardServices', function ($scope, dashboardServices) {
    $scope.data = { 'available': 0, 'onnotice': 0, 'shadow': 0, 'poc': 0 };
    dashboardServices.getTodaysStats('Available').then(function (result) {
        $scope.data.available = result.data;
    });
    dashboardServices.getTodaysStats('OnNotice').then(function (result) {
        $scope.data.onnotice = result.data;
    });
    dashboardServices.getTodaysStats().then(function (result) {

        $scope.chartValues = [$scope.data.available, $scope.data.onnotice];

        $scope.labels = ["Total no of employees on Bench","On Notice"];
        $scope.series = ['No of employees'];


        $scope.data = [];
        $scope.datavalues = [];
        var i;
        for (i in $scope.chartValues) {
            $scope.labels.push(i)
            $scope.datavalues.push($scope.chartValues[i])
        }
        $scope.data = [$scope.datavalues]
      
    });







}]);

myApp.controller('recentNewsController', ['$scope', 'dashboardServices', function ($scope, dashboardServices) {
    dashboardServices.getLastFiveBenchers('').then(function (result) {
        $scope.data = result.data;
    });
}]);
myApp.controller('getAllBenchersController', ['$scope', 'dashboardServices', 'dataTable', '$window', '$timeout', '$filter', function ($scope, dashboardServices, dataTable, $window, $timeout, $filter) {
    dashboardServices.getAllBenchers().then(function (result) {

        //$scope.data = result.data;
        //employeeTalentPoolServices.getAllBlocked().then(function (result) {
        //    for( var i = 0; i < result.data.length;i++)
        //    {
        //        $scope.data.push(result.data[i]);
        //    }

        //});
        var mainData = result.data;

        $scope.showSkills = {};
        //Calculate Experience
        $scope.CalDate = function (date1, date2) {
            var diff = Math.floor(date1.getTime() - date2.getTime());
            var secs = Math.floor(diff / 1000);
            var mins = Math.floor(secs / 60);
            var hours = Math.floor(mins / 60);
            var days = Math.floor(hours / 24);
            var months = Math.floor(days / 31);
            var years = Math.floor(months / 12);
            months = Math.floor(months % 12);
            days = Math.floor(days % 31);
            hours = Math.floor(hours % 24);
            mins = Math.floor(mins % 60);
            secs = Math.floor(secs % 60);
            var message = "";
            if (days <= 0) {
                //message += secs + " sec ";
                //message += mins + " min ";
                message = "Since today";
            } else {
                if (years > 0) {
                    message += years + " years ";
                }
                if (months > 0 || years > 0) {
                    message += months + " months ";
                }
                message += days + " days";
            }
            return message
        };


        $scope.getExp = function (date) {
            date = new Date($filter('date')(date, "yyyy/MM/dd"));
            var currdate = new Date($filter('date')(new Date(), "yyyy/MM/dd"));

            var exp = $scope.CalDate(currdate, date);
            return exp;
        }

        //Calculate Experience end
        employeeTalentPoolServices.getAllBlocked().then(function (result) {
            for (var i = 0; i < result.data.length; i++) {
                mainData.push(result.data[i]);

            }
            $scope.data = mainData;
        });
        $scope.account = [];
        $scope.employeeAccount = null;
        $scope.showhide = true;
        //$scope.testFilter = function (item) {
        //    return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked');
        //}
        $scope.blockEmployee = function (id) {

            employeeTalentPoolServices.blockEmployee(id);
            $scope.showhide = false;
        }
        if (!result.data.error) {
            dataTable.render($scope, '', "talentPoolList", result.data);
        }
    });



    employeeTalentPoolServices.getCustomerAccounts().then(function (result) {
        $scope.accountData = result.data;
    });

}]);


myApp.controller('getLastFiveBenchersController', ['$scope', 'dashboardServices', '$filter', function ($scope, dashboardServices, $filter) {
    dashboardServices.getLastFiveBenchers('Available').then(function (result) {
        $scope.data = result.data;


        $scope.showSkills = {};

        //Calculate Experience
        $scope.CalDate = function (date1, date2) {
            var diff = Math.floor(date1.getTime() - date2.getTime());
            var secs = Math.floor(diff / 1000);
            var mins = Math.floor(secs / 60);
            var hours = Math.floor(mins / 60);
            var days = Math.floor(hours / 24);
            var months = Math.floor(days / 31);
            var years = Math.floor(months / 12);
            months = Math.floor(months % 12);
            days = Math.floor(days % 31);
            hours = Math.floor(hours % 24);
            mins = Math.floor(mins % 60);
            secs = Math.floor(secs % 60);
            var message = "";
            if (days <= 0) {
                //message += secs + " sec ";
                //message += mins + " min ";
                message = "Since today";
            } else {
                if (years > 0) {
                    message += years + " years ";
                }
                if (months > 0 || years > 0) {
                    message += months + " months ";
                }
                message += days + " days";
            }
            return message
        };


        $scope.getExp = function (date) {
            date = new Date($filter('date')(date, "yyyy/MM/dd"));
            var currdate = new Date($filter('date')(new Date(), "yyyy/MM/dd"));

            var exp = $scope.CalDate(currdate, date);
            return exp;
        }

        //Calculate Experience end
    });
}]);

services.js

myApp.factory('dashboardServices', ['apiServices', function (apiServices) {

    var factoryDefinitions = {
        getTodaysStats: function (state) {

            return apiServices.getFromIndecomm('/WorkflowEntity?status=' + state).success(function (data) { return data; });
        },
        getRecentNews: function () {
            return apiServices.getFromTalentPool('').success(function (data, status, headers, config) {
                return data;
            }).error(function (data, status) {
                return data;
            });
        },
        getLastFiveBenchers: function (status) {

            return apiServices.getFromTalentPool('/EmployeeState?state=' + status + '&pageNumber=1&pageSize=5').success(function (data) { return data; });
        },
        getAllBenchers: function () {
            return apiServices.getFromTalentPool('/EmployeeState?state=Available&pageNumber=0&pageSize=0').success(function (data) { return data; });
        }
    }

    return factoryDefinitions;
}
]);