Permalink
Browse files

Add an Edit Feature

  • Loading branch information...
mraible committed Jan 29, 2015
1 parent e9c277a commit 56be9decd0242dd60f06ef7232db723d6595ed0c
Showing with 118 additions and 2 deletions.
  1. +22 −0 app/search/edit.html
  2. +1 −1 app/search/index.html
  3. +57 −0 app/search/mock-api.js
  4. +38 −1 app/search/search.js
View
@@ -0,0 +1,22 @@
+<form ng-submit="save()">
+ <div>
+ <label for="name">Name:</label>
+ <input type="text" data-ng-model="person.name" id="name">
+ </div>
+ <div>
+ <label for="phone">Phone:</label>
+ <input type="text" data-ng-model="person.phone" id="phone">
+ </div>
+ <fieldset>
+ <legend>Address:</legend>
+ <address style="margin-left: 50px">
+ <input type="text" data-ng-model="person.address.street"><br/>
+ <input type="text" data-ng-model="person.address.city">,
+ <input type="text" data-ng-model="person.address.state" size="2">
+ <input type="text" data-ng-model="person.address.zip" size="5">
+ </address>
+ </fieldset>
+ <div>
+ <button type="submit">Save</button>
+ </div>
+</form>
View
@@ -13,7 +13,7 @@
</thead>
<tbody>
<tr ng-repeat="person in searchResults">
- <td>{{person.name}}</td>
+ <td><a href="" ng-click="edit(person)">{{person.name}}</a></td>
<td>{{person.phone}}</td>
<td>{{person.address.street}}<br/>
{{person.address.city}}, {{person.address.state}} {{person.address.zip}}
View
@@ -60,6 +60,35 @@ angular.module('myApp')
return list;
}
};
+
+ this.find = function (id) {
+ // find the game that matches that id
+ var list = $.grep(this.getData(), function (element, index) {
+ return (element.id == id);
+ });
+ if (list.length === 0) {
+ return {};
+ }
+ // even if list contains multiple items, just return first one
+ return list[0];
+ };
+
+ this.update = function (id, dataItem) {
+ // find the game that matches that id
+ var people = this.getData();
+ var match = null;
+ for (var i = 0; i < people.length; i++) {
+ if (people[i].id == id) {
+ match = people[i];
+ break;
+ }
+ }
+ if (!angular.isObject(match)) {
+ return {};
+ }
+ angular.extend(match, dataItem);
+ return match;
+ };
})
.run(function ($httpBackend, ServerDataModel) {
@@ -74,4 +103,32 @@ angular.module('myApp')
$httpBackend.whenGET(/search\/index.html/).passThrough();
$httpBackend.whenGET(/view/).passThrough();
+
+ $httpBackend.whenGET(/\/search/).respond(function (method, url, data) {
+ var results = ServerDataModel.search("");
+
+ return [200, results];
+ });
+
+ $httpBackend.whenGET(/\/edit\/\d+/).respond(function (method, url, data) {
+ // parse the matching URL to pull out the id (/edit/:id)
+ var id = url.split('/')[2];
+
+ var results = ServerDataModel.find(id);
+
+ return [200, results, {Location: '/edit/' + id}];
+ });
+
+ $httpBackend.whenPOST(/\/edit\/\d+/).respond(function(method, url, data) {
+ var params = angular.fromJson(data);
+
+ // parse the matching URL to pull out the id (/edit/:id)
+ var id = url.split('/')[2];
+
+ var person = ServerDataModel.update(id, params);
+
+ return [201, person, { Location: '/edit/' + id }];
+ });
+
+ $httpBackend.whenGET(/search\/edit.html/).passThrough();
});
View
@@ -6,21 +6,58 @@ angular.module('myApp.search', ['ngRoute'])
templateUrl: 'search/index.html',
controller: 'SearchController'
})
+ .when('/search/:term', {
+ templateUrl: 'search/index.html',
+ controller: 'SearchController'
+ })
+ .when('/edit/:id', {
+ templateUrl: 'search/edit.html',
+ controller: 'EditController'
+ });
}])
- .controller('SearchController', function ($scope, SearchService) {
+ .controller('SearchController', function ($scope, $location, $routeParams, SearchService) {
+ if ($routeParams.term) {
+ SearchService.query($routeParams.term).then(function (response) {
+ $scope.term = $routeParams.term;
+ $scope.searchResults = response.data;
+ });
+ }
+
$scope.search = function () {
console.log("Search term is: " + $scope.term);
SearchService.query($scope.term).then(function (response) {
$scope.searchResults = response.data;
});
};
+
+ $scope.edit = function (person) {
+ $location.path("/edit/" + person.id);
+ }
+ })
+
+ .controller('EditController', function ($scope, $location, $routeParams, SearchService) {
+ SearchService.fetch($routeParams.id).then(function (response) {
+ $scope.person = response.data;
+ });
+
+ $scope.save = function() {
+ SearchService.save($scope.person).then(function(response) {
+ $location.path("/search/" + $scope.person.name);
+ });
+ }
})
.factory('SearchService', function ($http) {
var service = {
query: function (term) {
return $http.get('/search/' + term);
+ },
+ fetch: function (id) {
+ return $http.get('/edit/' + id);
+ },
+ save: function(data) {
+ return $http.post('/edit/' + data.id, data);
}
};
return service;

0 comments on commit 56be9de

Please sign in to comment.