Employee Form

Employee dynamically editable form.

by Alex Shabanov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp">
    <div class="container" ng-controller="appCtrl">
      <div class="jumbotron", id="jtron" >
        <h2 id="title">Employee Form</h2>
        <div class="affix" role="alert">
            <span class="error" ng-show="infoForm.empName.$touched && infoForm.empName.$invalid && !infoForm.empName.$error.maxlength">User name is a required field!</span>
            <span class="error" ng-show="infoForm.empEmail.$touched && infoForm.empEmail.$invalid && !infoForm.empEmail.$error.maxlength">User email is a required field!</span>
            <span class="error" ng-show="infoForm.empId.$touched && infoForm.empId.$invalid && !infoForm.empId.$error.maxlength">Employee ID is a required field!</span>
            <span class="error" ng-show="infoForm.empPassword.$touched && infoForm.empPassword.$invalid && !infoForm.empPassword.$error.maxlength">Password is a required field!</span>
            <span class="error" ng-show="infoForm.empName.$error.maxlength || infoForm.empId.$error.maxlength || infoForm.empPassword.$error.maxlength">Max length 15.</span>
            <span class="error" ng-show="infoForm.empEmail.$error.maxlength">Max length 30.</span>
            <span class="error" ng-show="infoForm.empName.$error.minlength || infoForm.empId.$error.minlength">Min length 3.</span>
            <span class="error" ng-show="infoForm.empPassword.$error.minlength">Max length 5.</span>
          </div>
        <hr style="background-color:#ffad33; border-width:0; color:#ffad33; height:2px; line-height:0;" />
        <form type="submit" class="form-inline" name="infoForm" novalidate>
          <div class="form-group">
           ...

CSS

a {
        color: #00B7FF;
    }
    #title {
      text-align: center;
      color: #3366cc;
    }
    .affix {
      margin-top: -15px;
      position: absolute;
    }
    #jtron {
      display: block;
      margin: 100px auto;
      width: 100%;
      height: 600px;
      overflow: auto;
    }
    #infoTable {
      width: 100%;
    }
    #infoTable td {
      height: 50px;
    }
    #infoTable thead tr {
      border-bottom: 1px solid #527a7a;
    }
    #infoTable tbody tr {
      border-bottom: 1px solid #527a7a;
    }
    #infoTable tbody td {
      cursor:pointer;
    }
    #username.ng-valid {
        color: #008000;
    }
    #username.ng-invalid.ng-touched {
        border-color: #e62e00;
    }
    #username.ng-invalid-maxlength {
        border-color: #e62e00;
    }
    #username.ng-invalid-minlength {
        border-color: #e62e00;
    }
    #email.ng-valid {
        color: #008000;
    }
    #email.ng-invalid.ng-touched {
        border-color: #e62e00;
    }
    #email.ng-invalid-maxlength {
        border-color: #e62e00;
    }
    #email.ng-invalid-minlength {
        border-color: #e62e00;
    }
    #employeeId.ng-valid {
        color: #008000;
    }
    #employeeId.ng-invalid.ng-touched {
        border-color: #e62e00;
    }
    #employeeId.ng-invalid-maxlength {
        border-color: #e62e00;
    }
    #employeeId.ng-invalid-minlength {
        border-color: #e62e00;
    }
    #password.ng-valid {
        color: #008000;
    }
    #password.ng-invalid.ng-touched {
        color: #e62e00;
    }
    #password.ng-invalid-maxlength {
        border-color: #e62e00;
    }
    #password.ng-invalid-minlength {
        border-color: #e62e00;
    }
    .error {
      color: #ff5050;
    }
    #username {
      width: 200px;
    }
    #email {
      width:200px;
    }
    #employeeId {
      width: 200px;
    }
    #password {
      width: 200px;
    }
    #myColumn {
      display: block;
      margin: 0px auto;
      margin-left: 150px;
    }
   ...

JavaScript

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('appCtrl', ['$scope', '$http', function($scope, $http) {
    var http = $http;
    var empList;
    $scope.viewPasswords = function() {
    	if($scope.employeelist == undefined || $scope.employeelist.length == 0){
    		return;
    	}
    	var btnText = $("#viewPswds").text();
    	if(btnText === "View Passwords"){
    		btnText = $("#viewPswds").text("Hide Passwords");
    		if($scope.employeelist != undefined && $scope.employeelist.length != 0 ){
    			var i;
			    for(i = 0; i < $scope.employeelist.length; i++){
			    	$scope.employeelist[i].password = empList[i].password;
			    }
    		}
    	}
    	else {
    		btnText = $("#viewPswds").text("View Passwords");
    		if($scope.employeelist != undefined && $scope.employeelist.length != 0 ){
    			var i;
			    for(i = 0; i < $scope.employeelist.length; i++){
			    	$scope.employeelist[i].password = empList[i].password;
			    }
    		}
    	}
    };
    $scope.addEmployee = function() {
    	if($scope.employeelist == undefined){
    		empList = [];
    		$scope.employeelist = [];
    	}
		if($scope.employee != undefined && $scope.employee.name1 && $scope.employee.email1 && $scope.employee.employeeId1 && $scope.employee.password1){
			$scope.employeelist.push({'name': $scope.employee.name1, 'email': $scope.employee.email1, 
				'employeeId': $scope.employee.employeeId1, 'password': $scope.employee.password1});
			empList.push({'name': $scope.employee.name1, 'email': $scope.employee.email1,
				'employeeId': $scope.employee.employeeId1, 'password': $scope.employee.password1});
			$scope.employee.name1 = '';
			$scope.employee.email1 = '';
			$scope.employee.employeeId1 = '';
			$scope.employee.password1 = '';
      
      $scope.infoForm.empName.$setUntouched();
    	$scope.infoForm.empEmail.$setUntouched();
    	$scope.infoForm.empId.$setUntouched();
    	$scope.infoForm.empPassword.$setUntouched();
		}
  };

    var getJsonItem =...