-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (112 loc) · 6.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
<meta charset="UTF-8">
<title>Contact Grid</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="public/css/style.css">
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="public/js/controllers/mainCtrl.js"></script>
<script src="public/js/services/localStorage.js"></script>
<script src="public/js/directives/dirPagination.js"></script>
</head>
<body ng-app="contactGrid" ng-controller="MainCtrl">
<div class="container">
<div class="header">
<h1>Contact Grid</h1>
<div class="search pull-right">
<span style="font-size:18px;">Filter:</span>
<input type="text" placeholder="Search text..." ng-model="searchText">
</div>
</div>
<div class="add-user-wrap">
<table>
<tr>
<form name="userForm" ng-submit="submitForm()">
<td>
<input name="lastName" type="text" ng-model="newUser.last_name" required placeholder="Last name">
</td>
<td>
<input name="firstName" type="text" ng-model="newUser.first_name" required placeholder="First name">
</td>
<td>
<input style="width:80px;" name="age" type="text" ng-model="newUser.age" placeholder="Age" ng-pattern="/^[0-9]+$/" required>
</td>
<td>
<input type="email" name="email" placeholder="Email" ng-model="newUser.email" required>
</td>
<td>
<input type="checkbox" style="width:20px;" name="active" ng-model="newUser.active">Active
</td>
<td>
<button class="btn btn-primary pull-right" ng-disabled="myForm.$invalid">Add a new user</button>
</td>
</form>
</tr>
</table>
</div>
<div class="table-wrap">
<table>
<tr>
<th style="width:137px;"><a href="" ng-click="updateSort('last_name')">Last Name</a>
<span class="pull-right" ng-show="predicate === 'last_name'" ng-class="{ 'flip' : reverse }">V</span>
</th>
<th style="width:137px;"><a href="" ng-click="updateSort('first_name')">First Name</a>
<span class="pull-right" ng-show="predicate === 'first_name'" ng-class="{ 'flip' : reverse }">V</span>
</th>
<th><a href="" ng-click="updateSort('age')">Age</a>
<span class="pull-right" ng-show="predicate === 'age'" ng-class="{ 'flip' : reverse }">V</span>
</th>
<th style="width:258px;"><a href="" ng-click="updateSort('email')">Email</a>
<span class="pull-right" ng-show="predicate === 'email'" ng-class="{ 'flip' : reverse }">V</span>
</th>
<th><a href="" ng-click="updateSort('created_on')">Created on</a>
<span class="pull-right" ng-show="predicate === 'created_on'" ng-class="{ 'flip' : reverse }">V</span>
</th>
<th><a href="" ng-click="updateSort('edited')">Last edited</a>
<span class="pull-right" ng-show="predicate === 'edited'" ng-class="{ 'flip' : reverse }">V</span>
</th>
<th><a href="" ng-click="updateSort('active')">Active</a>
<span class="pull-right" ng-show="predicate === 'active'" ng-class="{ 'flip' : reverse }">V</span>
</th>
</tr>
<tr dir-paginate="contact in contacts | orderBy:predicate:reverse | filter:searchText | itemsPerPage: pageSize track by contact.id" current-page="currentPage" ng-class-even="'even'" ng-class-odd="'odd'" ng-class="{'editing' : contact.being_edited }">
<td ng-show="!contact.being_edited">{{contact.last_name}}</td>
<td ng-show="contact.being_edited">
<input type="text" ng-model="tempModel.last_name">
</td>
<td ng-show="!contact.being_edited">{{contact.first_name}}</td>
<td ng-show="contact.being_edited">
<input type="text" ng-model="tempModel.first_name">
</td>
<td ng-show="!contact.being_edited">{{contact.age}}</td>
<td ng-show="contact.being_edited">
<input type="text" style="width:80px" ng-model="tempModel.age">
</td>
<td ng-show="!contact.being_edited">{{contact.email}}</td>
<td ng-show="contact.being_edited">
<input type="text" ng-model="tempModel.email" style="width:210px;">
</td>
<td>{{contact.created_on | date:'medium'}}</td>
<td>{{contact.edited | date:'medium'}}</td>
<td>
<span ng-show="!contact.being_edited">
<i ng-class="{'active' : contact.active }" class="fa fa-check"></i>
<i class="fa fa-pencil-square-o" ng-click="edit(contact.id)"></i>
<i class="fa fa-times" ng-click="deleteUser(contact.id)"></i>
</span>
<span ng-show="contact.being_edited">
<i ng-model="tempModel.active" ng-class="{'active' : tempModel.active }" class="fa fa-check" ng-click="toggleActive(tempModel)"></i>
<i class="fa fa-save" ng-click="save(contact.id)"></i>
<i class="fa fa-undo" ng-click="revert()"></i>
</span>
</td>
</tr>
</table>
</div>
<div class="pagination-wrap">
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="templates/dirPagination.tpl.html"></dir-pagination-controls>
</div>
</div>
</body>
</html>