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 cd07dbc

Browse files
author
AbdelrahmanSE
committed
Edit User form
1 parent 1880913 commit cd07dbc

File tree

5 files changed

+118
-11
lines changed

5 files changed

+118
-11
lines changed
Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
1-
module.exports.Directive = function() {
2-
return {
3-
restrict: "E",
4-
scope: {},
5-
templateUrl: "/modules/user/users-detials/users-detials.view.html"
6-
};
1+
// Directive
2+
function Directive() {
3+
return {
4+
restrict: "E",
5+
scope: {},
6+
controller: Controller,
7+
templateUrl: "/modules/user/users-detials/users-detials.view.html"
78
};
8-
9+
}
10+
11+
// Controller
12+
Controller.$inject = ["$scope", "$routeParams", "UsersData", "UsersAPI"];
13+
function Controller($scope, $routeParams, UsersData, UsersAPI) {
14+
$scope.user = {};
15+
16+
this.$onInit = function() {
17+
UsersAPI.getUserById($routeParams.id).then(function(response) {
18+
$scope.user = response.data;
19+
})
20+
};
21+
}
22+
23+
module.exports.Directive = Directive;
24+
module.exports.Controller = Controller;
Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,66 @@
1-
Users Details Box
1+
<a href="#!/users">< Back to Users</a>
2+
<h2>Edit {{ user.firstName }} Details</h2>
3+
4+
<div class="row">
5+
<div class="col-md-6">
6+
<form name="editUser">
7+
<div class="form-group">
8+
<label for="firstName">First Name</label>
9+
<input
10+
type="text"
11+
class="form-control"
12+
id="firstName"
13+
ng-model="user.firstName"
14+
name="firstName"
15+
placeholder="Enter first name"
16+
required
17+
/>
18+
<small
19+
ng-show="editUser.firstName.$dirty && !user.firstName.$valid"
20+
id="emailHelp"
21+
class="form-text text-danger"
22+
>Please enter a value for first name.</small
23+
>
24+
</div>
25+
<div class="form-group">
26+
<label for="lastName">Last Name</label>
27+
<input
28+
type="text"
29+
class="form-control"
30+
id="lastName"
31+
ng-model="user.lastName"
32+
name="lastName"
33+
placeholder="Enter last name"
34+
required
35+
/>
36+
<small
37+
ng-show="editUser.lastName.$dirty && !user.lastName.$valid"
38+
id="emailHelp"
39+
class="form-text text-danger"
40+
>Please enter a value for last name.</small
41+
>
42+
</div>
43+
<div class="form-group">
44+
<label for="email">Email</label>
45+
<input
46+
type="text"
47+
class="form-control"
48+
id="email"
49+
ng-model="user.email"
50+
name="email"
51+
placeholder="Enter email"
52+
required
53+
ng-pattern='/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i'
54+
/>
55+
<small
56+
ng-show="editUser.email.$dirty && !editUser.email.$valid"
57+
id="emailHelp"
58+
class="form-text text-danger"
59+
>Please enter a valid email address.</small
60+
>
61+
</div>
62+
<button type="button" class="btn btn-primary" ng-disabled="!editUser.$valid">Save</button>
63+
<button type="button" class="btn btn-danger">Cancel</button>
64+
</form>
65+
</div>
66+
</div>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,25 @@
1818
}
1919
});
2020
};
21+
22+
// Get User By Id
23+
this.getUserById = function(user_id) {
24+
// This would be replaced by a single endpoint to get a single user
25+
// but I here got all the users then I filter to mock the same behavior
26+
27+
return $http({
28+
method: "GET",
29+
url: "/assets/data/users.json",
30+
data: {
31+
id: user_id
32+
},
33+
headers: {
34+
"Content-Type": "application/json"
35+
}
36+
}).then(function(response) {
37+
response.data = response.data.find(user => user.id == user_id);
38+
return response;
39+
});
40+
};
2141
}
2242
})();

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ function Directive() {
1111
}
1212

1313
// Controller
14-
Controller.$inject = ["$scope", "UsersData"];
15-
function Controller($scope, UsersData) {
14+
Controller.$inject = ["$scope", "$location","UsersData"];
15+
function Controller($scope, $location,UsersData) {
1616
$scope.showUser = showUser;
17+
$scope.editUser = editUser;
1718
$scope.deleteUser = deleteUser;
1819

1920
// Show User Data
@@ -22,6 +23,11 @@ function Controller($scope, UsersData) {
2223
jQuery("#userDetailsModal").modal("show");
2324
}
2425

26+
// Edit User
27+
function editUser() {
28+
$location.url("/users/" + $scope.user.id);
29+
}
30+
2531
// Delete User
2632
function deleteUser() {
2733
UsersData.deleteUser($scope.user.id);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
<td>{{ user.country }}</td>
66
<td class="text-center">
77
<button type="button" class="btn btn-primary" ng-click="showUser()">Show</button>
8-
<aclass="btn btn-secondary" href="#!/users/{{ user.id }}">Edit</a>
8+
<buttontype="button" class="btn btn-secondary" ng-click="editUser()">Edit</button>
99
<button type="button" class="btn btn-danger" ng-click="deleteUser()">Delete</button>
1010
</td>

0 commit comments

Comments
(0)

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