Added edit feature

Author: mraible

app/css/app2.css

@@ -23,3 +23,10 @@ td {
     padding: 8px;
 }
 
+form {
+    line-height: 2;
+}
+
+address {
+    font-style: normal;
+}

app/edit/edit.controller.js

@@ -0,0 +1,17 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('myApp')
+        .controller('EditController', EditController);
+
+    EditController.$inject = ['SearchService', '$stateParams'];
+
+    function EditController(SearchService, $stateParams) {
+        var vm = this;
+
+        SearchService.fetch($stateParams.id, function (response) {
+            vm.person = response;
+        });
+    }
+})();

app/edit/edit.html

@@ -0,0 +1,19 @@
+<form>
+    <div>
+        <label for="name">Name:</label>
+        <input type="text" ng-model="vm.person.name" id="name">
+    </div>
+    <div>
+        <label for="phone">Phone:</label>
+        <input type="text" ng-model="vm.person.phone" id="phone">
+    </div>
+    <fieldset>
+        <legend>Address:</legend>
+        <address style="margin-left: 50px">
+            <input type="text" ng-model="vm.person.address.street"><br/>
+            <input type="text" ng-model="vm.person.address.city">,
+            <input type="text" ng-model="vm.person.address.state" size="2">
+            <input type="text" ng-model="vm.person.address.zip" size="5">
+        </address>
+    </fieldset>
+</form>

app/edit/edit.state.js

@@ -0,0 +1,18 @@
+(function () {
+    'use strict';
+
+    angular.module('myApp')
+        .config(stateConfig);
+
+    stateConfig.$inject = ['$stateProvider'];
+
+    function stateConfig($stateProvider) {
+        $stateProvider
+            .state('edit', {
+                url: '/edit/:id',
+                templateUrl: 'edit/edit.html',
+                controller: 'EditController',
+                controllerAs: 'vm'
+            });
+    }
+})();

app/index.html

@@ -39,6 +39,8 @@
   <script src="search/search.state.js"></script>
   <script src="search/search.controller.js"></script>
   <script src="search/search.service.js"></script>
+  <script src="edit/edit.state.js"></script>
+  <script src="edit/edit.controller.js"></script>
   <script src="components/version/version.js"></script>
   <script src="components/version/version-directive.js"></script>
   <script src="components/version/interpolate-filter.js"></script>

app/search/search.html

@@ -13,7 +13,7 @@
     </thead>
     <tbody>
     <tr ng-repeat="person in vm.searchResults">
-        <td>{{person.name}}</td>
+        <td><a ui-sref="edit({id: person.id})">{{person.name}}</a></td>
         <td>{{person.phone}}</td>
         <td>{{person.address.street}}<br/>
             {{person.address.city}}, {{person.address.state}} {{person.address.zip}}

app/search/search.service.js

@@ -19,6 +19,15 @@
             });
         };
 
+        Search.fetch = function (id, callback) {
+            Search.query(function (response) {
+                var results = response.filter(function (item) {
+                    return item.id === parseInt(id);
+                });
+                return callback(results[0]);
+            });
+        };
+
         return Search;
     }
 })();