Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2d0d331

Browse files
author
AbdelrahmanSE
committed
Show User
1 parent 929aecc commit 2d0d331

File tree

7 files changed

+74
-7
lines changed

7 files changed

+74
-7
lines changed

‎src/modules/user/users.data.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
function UsersData() {
1010
// Users Data
1111
this.users = [];
12+
13+
// Show User
14+
this.shownUser = {};
1215

1316
}
1417
})();

‎src/modules/user/users/user-row/user-row.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,16 @@ function Directive() {
1111
}
1212

1313
// Controller
14-
function Controller() {}
14+
Controller.$inject = ["$scope", "UsersData"];
15+
function Controller($scope, UsersData) {
16+
$scope.showUser = showUser;
17+
18+
// Show User Data
19+
function showUser() {
20+
UsersData.shownUser = $scope.user;
21+
jQuery('#userDetailsModal').modal('show');
22+
}
23+
}
1524

1625
module.exports.Directive = Directive;
1726
module.exports.Controller = Controller;

‎src/modules/user/users/user-row/user-row.view.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<td>{{ user.email }}</td>
55
<td>{{ user.country }}</td>
66
<td class="text-center">
7-
<button type="button" class="btn btn-primary">Show</button>
7+
<button type="button" class="btn btn-primary"ng-click="showUser()">Show</button>
88
<a class="btn btn-secondary" href="#!/users/{{ user.id }}">Edit</a>
99
<button type="button" class="btn btn-danger">Delete</button>
1010
</td>
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// Directive
2+
function Directive() {
3+
return {
4+
restrict: "E",
5+
scope: {},
6+
controller: Controller,
7+
templateUrl: "/modules/user/users/user-show/user-show.view.html"
8+
};
9+
}
10+
11+
// Controller
12+
Controller.$inject = ["$scope", "UsersData"];
13+
function Controller($scope, UsersData) {
14+
$scope.UserData = UsersData;
15+
$scope.calculateAge = calculateAge;
16+
17+
// Calculates User Age
18+
function calculateAge() {
19+
if (!$scope.UserData.shownUser.dateOfBirth) return 0;
20+
21+
let birthDate = new Date($scope.UserData.shownUser.dateOfBirth);
22+
let now = new Date();
23+
let diff = now.getFullYear() - birthDate.getFullYear();
24+
return Math.ceil(diff);
25+
}
26+
}
27+
28+
module.exports.Directive = Directive;
29+
module.exports.Controller = Controller;
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div
2+
class="modal fade"
3+
id="userDetailsModal"
4+
tabindex="-1"
5+
role="dialog"
6+
aria-labelledby="userDetailsModalTitle"
7+
aria-hidden="true"
8+
>
9+
<div class="modal-dialog modal-dialog-centered" role="document">
10+
<div class="modal-content">
11+
<div class="modal-header">
12+
<h5 class="modal-title" id="userDetailsModalTitle">{{ UserData.shownUser.firstName }} Details</h5>
13+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
14+
<span aria-hidden="true">&times;</span>
15+
</button>
16+
</div>
17+
<div class="modal-body">
18+
{{ UserData.shownUser.firstName }} {{ UserData.shownUser.lastName }}, age:{{ calculateAge() }}
19+
</div>
20+
<div class="modal-footer">
21+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
22+
</div>
23+
</div>
24+
</div>
25+
</div>

‎src/modules/user/users/users.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ function Directive() {
99
}
1010

1111
// Controller
12-
Controller.$inject = ["$scope", "UsersAPI"];
13-
function Controller($scope, UsersAPI) {
12+
Controller.$inject = ["$scope", "UsersAPI","UsersData"];
13+
function Controller($scope, UsersAPI,UsersData) {
1414
$scope.users = [];
1515
$scope.currentPage = 0;
1616
$scope.lastPageNumber = 0;
@@ -28,15 +28,14 @@ function Controller($scope, UsersAPI) {
2828
// Get the Users from the API
2929
function getUsers() {
3030
UsersAPI.getUsers().then(response => {
31-
$scope.users = response.data;
31+
UsersData.users = response.data;
3232
$scope.lastPageNumber = Math.ceil($scope.users.length / RowPerPage);
3333
});
3434
}
3535

3636
// Get the records for the current page
3737
function getUsersPage() {
38-
console.log($scope.users)
39-
return $scope.users.slice($scope.currentPage * RowPerPage, $scope.currentPage * RowPerPage + RowPerPage);
38+
return UsersData.users.slice($scope.currentPage * RowPerPage, $scope.currentPage * RowPerPage + RowPerPage);
4039
}
4140

4241
// Previous Page

‎src/modules/user/users/users.view.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,5 @@ <h2>Users</h2>
2929
</li>
3030
</ul>
3131
</nav>
32+
33+
<user-show></user-show>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /