Employee Directory using Bootstrap, AngularJS and WCF Service

Hi Guys,

This time I made Employee Directory application for an organisation using Bootstrap, AngularJS and WCF Services.  This is a simple application which consumes (GET,POST) JSON enabled WCF Services using Angular JS. Hope you like it.

Before you Start,

1) Any version of Visual Studio 

Step One : The Solution

First create a WebSite as following.


Step Two : Code and Styles

Since this is a Website I will not include all the code here. I will include only the AngularJS code.

1) Open js -> app.js and paste the following code

var appmodule = angular.module('EmployeeApp', ['ngRoute','ngAnimate','angularFileUpload', 'smart-table']);
appmodule.controller('EmployeeController', ["$scope", "$http",  EmployeeController]);
appmodule.controller('EmployeeDetailController', ["$scope", "$http", "$route", EmployeeDetailController]);



appmodule.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) {
        $routeProvider
          .when('/AllEmployees', {
              templateUrl: 'views/Partials/employeesCard.html',
              controller: 'EmployeeController',
              controllerAs: 'emp'
          })
             .when('/Employee/:Id', {
                 templateUrl: 'Partials/employee.html',
                 controller: 'EmployeeDetailController',
                 controllerAs: 'emp'
             })
          .when('/', {
              templateUrl: 'views/Partials/employeesCard.html',
              controller: 'EmployeeController',
              controllerAs: 'emp'
          })
          .when('/NewEmployee', {
              templateUrl: 'views/Partials/newEmployee.html',
              controller: 'EmployeeController',
              controllerAs: 'emp'
          })

        .otherwise({
            redirectTo: '/AllEmployees'
          });;

        $locationProvider.html5Mode(true);
    }]);




function EmployeeDetailController($scope, $http, $route) {


    var responsePromise = $http.get("/Services/EmployeeService.svc/GetEmployeeById?id=" + $route.current.params["Id"]);

    responsePromise.success(function (data, status, headers, config) {
        $scope.CurrentEmp = data[0];



    });
    responsePromise.error(function (data, status, headers, config) {
        alert("AJAX failed!");
    });
}




function EmployeeController($scope, $http) {
    var scope = $scope;


    scope.rowCollection = [];
    scope.displayedCollection = [].concat($scope.rowCollection);
    getAllEmployees($scope, $http);

    scope.CurrentEmp = [];
    scope.IsSaved = false;
    scope.IsMailTaken = false;
    scope.InitKPI = function () {
        var responsePromise = $http.get("/Services/EmployeeService.svc/GetEmployeeById?id=2");

        responsePromise.success(function (data, status, headers, config) {
            scope.CurrentEmp = clone(data[0]);



        });
        responsePromise.error(function (data, status, headers, config) {
            alert("AJAX failed!");
        });

    }

    scope.InitKPI();

    scope.SaveEmployee = function (emp) {
        
        emp.EditedBy = "sshahim";
       
        var responsePromise = $http.post("/Services/EmployeeService.svc/SaveEmployee", JSON.stringify(emp));

        responsePromise.success(function (data, status, headers, config) {
            scope.IsSaved = true;
            getAllEmployees(scope, $http);

        });
        responsePromise.error(function (data, status, headers, config) {
            alert("AJAX failed!");
        });
    };

    scope.OnMailChange = function (email) {

       

        var responsePromise = $http.get("/Services/EmployeeService.svc/GetEmployeeByEmail?email="+email);

        responsePromise.success(function (data, status, headers, config) {

            scope.IsMailTaken = (data && data.length > 0);
            
            

        });
        responsePromise.error(function (data, status, headers, config) {
            alert("AJAX failed!");
        });
    };

   


   
}

function getAllEmployees(thisscope, http) {
    var responsePromise = http.get("/Services/EmployeeService.svc/GetAllEmployees");

    responsePromise.success(function (data, status, headers, config) {

        thisscope.rowCollection = data;
        thisscope.itemsByPage = 6;

    });
    responsePromise.error(function (data, status, headers, config) {
        alert("AJAX failed!");
    });
}




function clone(obj) {
    if (obj == null || typeof (obj) != 'object')
        return obj;

    var temp = obj.constructor(); // changed

   
    
    return temp;
}

2) Then open Index.html and paste the following code

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Employee Directory</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/angular.min.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/angular-file-upload.min.js"></script>
    <script src="js/angular-animate.js"></script>
    <script src="js/app.js"></script>
    <script src="js/smart-table.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body ng-app="EmployeeApp">
<nav class="navbar navbar-fixed-top header">
  <div class="col-md-12">
        <div class="navbar-header">
          
          <a href="#" class="navbar-brand">Employee Directory</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse1">
          <i class="glyphicon glyphicon-search"></i>
          </button>
      
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse1">
          
          <ul class="nav navbar-nav navbar-right">
             
            
             <li><a href="/AllEmployees" id="btnToggle"><i class="glyphicon glyphicon-th-large"></i></a></li>
             <li><a href="#loginModal" role="button"  data-toggle="modal"><i class="glyphicon glyphicon-user"></i></a></li>
           </ul>
        </div>
     </div>
</nav>


<!--main-->
<div class="container" id="main">
  <div class="view-animate-container">
    <div ng-view class="view-animate"></div>
  </div>
    </div>

        <div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
  <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h2 class="text-center">Add New Employee</h2>
      </div>
      <div class="modal-body">
         
          <form name="KpiForm" ng-controller="EmployeeController" ng-submit="KpiForm.$valid && !IsMailTaken && SaveEmployee(CurrentEmp)"   novalidate>
    


                            
<div class="col-sm-14">
                        <div class="panel panel-default">
                           
                            <div class="panel-body">
                              

                           

                            <div  class="form-group">
                                <label>Name in English</label>
                                <input type="text" class="form-control" rows="3"  ng-model="CurrentEmp.Name" maxlength="50" required></input>
                            </div>

                                 <div  class="form-group">
                                <label>Name in Arabic</label>
                                <input type="text" class="form-control" rows="3"  ng-model="CurrentEmp.NameN" maxlength="50" required></input>
                            </div>

                            <div class="form-group" >
                                <label>Gender</label>
                                <div class="checkbox">
                                   <select class="form-control"  ng-model="CurrentEmp.Gender" required>
                                    <option value="">--SELECT--</option>
                                    <option value="1">Male</option>
                                    <option value="2">Female</option>
                                   
                                </select>
                                </div>
                                </div>
                                <div  class="form-group">
                                <label>Employee ID</label>
                                <input type="text" class="form-control" rows="3"  ng-model="CurrentEmp.EmployeeID" maxlength="50" ></input>
                            </div>
                                
                             <div  class="form-group">
                                <label>Position</label>
                                <input type="text" class="form-control" rows="3"  ng-model="CurrentEmp.Position" maxlength="50" required></input>
                            </div>

                               

                                <div  class="form-group">
                                <label>Email</label>
                                <input type="email" class="form-control" rows="3" ng-change="OnMailChange(CurrentEmp.EmailAddress)"  ng-model="CurrentEmp.EmailAddress" maxlength="50" required></input>
                                    <div ng-show="IsMailTaken" class="alert alert-danger">
                    <strong>Oh snap!</strong> Email Already taken.
                </div>
                            </div>

                                <div  class="form-group">
                                <label>Extension</label>
                                <input type="text" class="form-control" rows="3"  ng-model="CurrentEmp.Extension" maxlength="50" required></input>
                            </div>

                                 <div class="form-group" id="fgIndicatorType">
                                <label>Location</label>
                                <div class="checkbox">
                                   <select class="form-control" id="IndicatorType" ng-model="CurrentEmp.Location" required> 
                                       <option value="">--SELECT--</option>                    
                                    <option value="1">Riyadh</option>
                                    <option value="2">Other</option>                                   
                                </select>
                                </div>

                            <!--<div  class="form-group">
                                <label>Profile Picture</label>
                                <input type="file" class="form-control" rows="3"  ng-file-select="onFileSelect($files)" multiple ></input>
                            </div>-->
                               
                                
                            </div>

                                 




                        </div>
                       
                    </div>
                                
                
     <div class="col-md-12">
           <button type="submit" class="btn btn-default"  ><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
               
               
                            <button type="reset" class="btn btn-default"  ><span class="glyphicon glyphicon-remove"></span> Reset</button>
 </div>
           
        
          </form>


      </div>
      <div class="modal-footer">
         
      </div>
  </div>
  </div>
</div>

<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

3) Open EmployeeService.cs paste the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "EmployeeService" in code, svc and config file together.
public class EmployeeService : IEmployeeService
{
    [OperationBehavior]
    public List<EP_Employee> GetAllEmployees()
    {
        using (EmployeePortalDataContext context = new EmployeePortalDataContext())
        {
            var temp = (from r in context.EP_Employees select r);
            return temp.ToList();

        }
    }

   
    [OperationBehavior]
    public bool SaveEmployee(EP_Employee employee)
    {
        using (EmployeePortalDataContext context = new EmployeePortalDataContext())
        {
            if (employee.ID == 0)
            {
                employee.CreatedBy = employee.EditedBy;
                employee.EditedOn =
                employee.CreatedOn = DateTime.Now;
                context.EP_Employees.InsertOnSubmit(employee);
            }
           
            context.SubmitChanges();


            return true;
        }
    }

    [OperationBehavior]
    public List<EP_Employee> GetEmployeeById(long id)
    {
        using (EmployeePortalDataContext context = new EmployeePortalDataContext())
        {
            var temp = (from r in context.EP_Employees where r.ID == id select r);
            return temp.ToList();
        }
    }

    [OperationBehavior]
    public List<EP_Employee> GetEmployeeByEmail(string email)
    {
        using (EmployeePortalDataContext context = new EmployeePortalDataContext())
        {
            var temp = (from r in context.EP_Employees where r.EmailAddress.ToLower().Trim() == email.ToLower().Trim() select r);
            return temp.ToList();
        }
    }
}

3) Open IEmployeeService.cs paste the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IEmployeeService" in both code and config file together.
[ServiceContract]
public interface IEmployeeService
{
    [OperationContract]
    [WebGet(UriTemplate = "/GetAllEmployees",
        ResponseFormat = WebMessageFormat.Json)]
    List<EP_Employee> GetAllEmployees();

    [OperationContract]
    [WebGet(UriTemplate = "/GetEmployeeById?id={id}",
        ResponseFormat = WebMessageFormat.Json)]
    List<EP_Employee> GetEmployeeById(long id);

    [OperationContract]
    [WebGet(UriTemplate = "/GetEmployeeByEmail?email={email}",
        ResponseFormat = WebMessageFormat.Json)]
    List<EP_Employee> GetEmployeeByEmail(string email);

    [OperationContract]
    [WebInvoke(UriTemplate = "/SaveEmployee",
        RequestFormat = WebMessageFormat.Json, Method = "POST")]
    bool SaveEmployee(EP_Employee kpi);
}


Step Three : Running the WebSite

When you run the WebSite it will take you to the AllEmployees page first which looks like this. This includes a smart-table which does the paging for us.
















When you search for some employee by name or any value the smart-table will filter it as shown.






To add a new employee to the directory you can click on the user icon on the right hand top corner which will show the Add New Employee modal form as shown below. 
















References : 
https://docs.angularjs.org/
http://www.bootstrapzero.com/bootstrap-template/google-plus


Comments