CRUD Table

crud-table.markdown

CRUD Table

A Pen by hafinisteam on CodePen.

License.

index.pug

html
	body
		.container(ng-app='myApp', ng-controller='namesCtrl').crud-table
			.clearfix
				.form-inline.pull-left
					button.btn.btn-success(ng-click='addUser()')
						span.glyphicon.glyphicon-plus 
						| Add more user
				.form-inline.pull-right
					| Search by name: 
					.form-group
						input(type='text', ng-model='searchName', placeholder='Type name to search').form-control
			table.table.table-striped
				thead
					tr
						th(ng-click="orderBy('name')") Name
						th(ng-click="orderBy('country')") Country
						th(ng-click="orderBy('salary')") Salary
						th(ng-click="orderBy('email')") Email
						th
						th
				tbody.text-center
					tr(ng-repeat="user in resultUser = (users | filter: {'name': searchName}) | orderBy: order")
						td {{user.name}} 
						td {{user.country}} 
						td {{user.salary}} 
						td {{ user.email }}
						td
							button.btn.btn-primary(ng-click='editUser(user)') Edit
						td 
							button.btn.btn-danger(ng-click='deleteUser(user)') Delete
					tr.text-left
						td(colspan=2) 
							b Total 
						td.text-center {{ resultUser | totalSalary:'salary' }}
						td(colspan=3)
			.crude-form__wrapper(ng-show='triggerForm')
				h3(ng-show='editForm') Edit user
				h3(ng-show='addForm') Add user
				form(name='userForm', ng-model='userForm')
					.form-group
						label(for='name') Name
						input#editName.form-control(
							type='text', 
							name='name', 
							ng-model='crudFormName', 
							placeholder='Edit name', 
							required
						)
						.form-alert.alert.alert-danger(ng-show='userForm.name.$invalid && userForm.name.$touched') Please input name
					.form-group
						label(for='country') Country
						input#editCounty.form-control(
							type='text', 
							name='country',
							ng-model='crudFormCountry', 
							placeholder='Edit country',
							required
							)
						.form-alert.alert.alert-danger(ng-show='userForm.country.$invalid && userForm.country.$touched') Please input user country
					.form-group
						label(for='salary') Salary
						input#editSalary.form-control(type='number', name='salary', ng-model='crudFormSalary', placeholder='Edit salary', min="1", required)
						.form-alert.alert.alert-danger(ng-show='userForm.salary.$invalid && userForm.salary.$touched')
							span(ng-show='userForm.salary.$error.number') Please input valid number
							span(ng-show='userForm.salary.$error.min') Please input salary greater than 1
							span(ng-show='userForm.salary.$error.required') Please input salary
					.form-group
						label(for='email') Email
						input#editEmail.form-control(type='email', name='email', ng-model='crudFormEmail', ng-change='checkEmail(editUserId)', placeholder='Edit email', required, min="1")
					.form-alert.alert.alert-danger(ng-show='userForm.email.$invalid && userForm.email.$touched')
						span(ng-show='userForm.email.$error.email') Please input valid email
						span(ng-show='userForm.email.$error.required') Please input email	
					.form-alert.alert.alert-danger(ng-show='emailExisted')   This email has been registerd by other user
					
					button(ng-click='saveEdit(editUserId)', ng-disabled='userForm.$invalid || emailExisted').btn.btn-primary 
						i.glyphicon.glyphicon-pencil 
						| Save change 
					
					button(ng-click='triggerForm = false').btn.btn-primary 
						| Cancel						
						

script.js

var myApp = angular.module('myApp', []);

myApp.controller('namesCtrl', function($scope, $filter) {
		$scope.triggerForm = false;
		$scope.editForm = false;
		$scope.addForm = false;
		$scope.order = 'name';

    $scope.users = [
        {id: 1, name:'Jani',country:'Norway', salary: 5, email: '[email protected]'},
        {id: 2, name:'Carl',country:'Sweden', salary: 24, email: '[email protected]'},
        {id: 3, name:'Margareth',country:'England', salary: 5, email: '[email protected]'},
        {id: 4, name:'Hege',country:'Norway', salary: 15, email: '[email protected]'},
        {id: 5, name:'Joe',country:'Denmark', salary: 20, email: '[email protected]'}
        ];
  
  	
  
    $scope.orderBy = function(filter){
    	$scope.order = filter;
    };
	
		$scope.editUser = function(user){
			var index = $scope.users.indexOf(user);
			$scope.triggerForm = true;
			$scope.editForm = true;
			$scope.addForm = false;
			$scope.emailExisted = false;
			$scope.editUserId = index;
			$scope.crudFormName = $scope.users[index].name;
			$scope.crudFormCountry = $scope.users[index].country;
			$scope.crudFormSalary = $scope.users[index].salary;
			$scope.crudFormEmail = $scope.users[index].email;
		};
		
		$scope.saveEdit = function(userId){
			if(userId == 'new'){
				var newUser = {
					name: $scope.crudFormName,
					country: $scope.crudFormCountry,
					salary: $scope.crudFormSalary,
					email: $scope.crudFormEmail					
				}
				$scope.users.push(newUser);
			}
			else {
				$scope.users[userId].name = $scope.crudFormName;
				$scope.users[userId].country = $scope.crudFormCountry;
				$scope.users[userId].salary = $scope.crudFormSalary;
				$scope.users[userId].email = $scope.crudFormEmail;				
			}
			
			$scope.triggerForm = false;
			$scope.editForm = false;
			$scope.editUserId = 0;			
		}
	
		$scope.deleteUser = function(user) {
			var index = $scope.users.indexOf(user);
			$scope.users.splice(index, 1);  	
		}
  	
		$scope.addUser = function(){
			$scope.editUserId = 'new';
			$scope.triggerForm = true;
			$scope.editForm = false;
			$scope.addForm = true;
			$scope.emailExisted = false;
			$scope.userForm.$setUntouched();
			$scope.crudFormName = '';
			$scope.crudFormCountry = '';
			$scope.crudFormSalary = '';
			$scope.crudFormEmail = '';			
		}
		$scope.checkEmail = function(userId){
			
			if(userId === 'new' || $scope.crudFormEmail !== $scope.users[userId].email){
				$scope.emailExisted = $scope.users.some(function(user){
					return user.email === $scope.crudFormEmail;
				});				
			}
		}
});

myApp.filter('totalSalary', function(){
  return function(data, key){
			if(angular.isUndefined(data) && angular.isUndefined(key))
				return 0;
      var total = 0;
      angular.forEach(data, function(v, k){
				total+=parseInt(v[key]);
			});
      return total;
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

style.sass

th  
	text-align: center


.glyphicon 
	margin-right: 10px
	

.crud-table 
	max-width: 800px
	padding: 40px 0


.form-alert 
	margin-top: 10px


.form-inline 
	margin-bottom: 20px

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />