rest with params

21-rest-advance/client/app/app.js

@@ -1,14 +1,9 @@
 (function () {
 
-	/** original */
-	//angular.module('cashFlow', ['ngResource', 'seguridad', 'ngCookies', 'ui.router', 'registro', 'lista', 'total', 'nuevo', 'abComponentes', 'abMenuNavegacion']);
-
-	/** estructura modular jerárquica */
 	angular.module('cashFlow', ['terceros', 'componentes', 'estados']);
 	angular.module('terceros', ['ngResource', 'ngCookies', 'ui.router']);
 	angular.module('componentes', ['seguridad', 'abComponentes', 'abMenuNavegacion']);
-	angular.module('estados', ['registro', 'lista', 'total', 'nuevo']);
-
-	/** módulos para cada componente */
+	// dependencia al estado movimiento
+	angular.module('estados', ['registro', 'lista', 'total', 'nuevo', 'editor']);
 
 }());

21-rest-advance/client/app/states/editor/editor.html

@@ -0,0 +1,61 @@
+<section name="nuevoMovimiento" class="row-fluid">
+	<ab-cabecera>Introduce tus movimientos</ab-cabecera>
+	<form class="form-horizontal text-left">
+		<fieldset>
+			<div class="row-fluid">
+				<div class="col-xs-12 col-sm-6">
+					<div class="control-group">
+						<label class="control-label" for="tipo">Tipo</label>
+						<div class="controls">
+							{{editor.movimiento.tipo}}
+						</div>
+					</div>
+					<div class="control-group">
+						<label class="control-label" for="categ">Categoría</label>
+						<div class="controls">
+							{{editor.movimiento.categoria}}
+						</div>
+					</div>
+				</div>
+				<div class="col-xs-12 col-sm-6">
+					<div class="control-group">
+						<label class="control-label" for="fecha">Fecha</label>
+						<div class="controls">
+							<input type="date" name="fecha" placeholder="" class="input" ng-model="editor.movimiento.fecha">
+						</div>
+					</div>
+					<div class="control-group">
+						<label class="control-label" for="importe">Importe</label>
+						<div class="controls">
+							<input type="number" name="importe" placeholder="" class="input" ng-model="editor.movimiento.importe">
+						</div>
+					</div>
+				</div>
+				<div class="row-fluid">
+					<div class="col-xs-12 col-sm-6">
+						<div class="control-group">
+							<label class="control-label" for="texto">Texto</label>
+							<div class="controls">
+								<input type="text" name="texto" class="input" ng-model="editor.movimiento.texto">
+							</div>
+						</div>
+					</div>
+					<div class="col-xs-12 col-sm-6">
+						<div class="control-group">
+							<label class="control-label" for="valoracion">Valoración</label>
+							<div class="controls">
+								<div ab-valoracion valor="editor.movimiento.valoracion" max="10" solo-lectura="false"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="text-right">
+				<button style="margin-top: 20px" type="button" class="btn btn-lg btn-primary" ng-click="editor.actualizar()">
+					<span>Actualizar</span>
+
+				</button>
+			</div>
+		</fieldset>
+	</form>
+</section>

21-rest-advance/client/app/states/editor/editor.js

@@ -0,0 +1,58 @@
+"use strict";
+(function () {
+	var componentName = "editor";
+	angular
+		.module(componentName, ['ui.router', 'ngResource', 'abDirectivas', 'abValoracion', 'abCabecera'])
+		.config(stateConfig)
+		.directive(componentName, directive)
+		.service("servicio_" + componentName, service)
+
+	function stateConfig($stateProvider) {
+		$stateProvider
+			.state(componentName, {
+				url: '/' + componentName + "/:id",
+				template: '<' + componentName + '></' + componentName + '>'
+			});
+	}
+
+	function directive() {
+		return {
+			templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
+			controller: controller,
+			controllerAs: componentName,
+			bindToController: true,
+			scope: {}
+		}
+	}
+
+	function controller(servicio_editor, $state, $stateParams) {
+		var vm = this;
+
+		var paramId = $stateParams.id;
+
+		servicio_editor.Movimientos.get({
+			id: paramId
+		}).$promise.then(function (data) {
+			var milliseconds = Date.parse(data.fecha)
+			if (!isNaN(milliseconds)) {
+				data.fecha = new Date(milliseconds);
+			}
+			vm.movimiento = data;
+		});
+
+
+		vm.actualizar = function () {
+			console.log(JSON.stringify(vm.movimiento));
+			vm.movimiento.$save()
+				.then(function (result) {
+					$state.go('lista');
+				});
+		};
+	}
+
+	function service($resource) {
+		this.Movimientos =  $resource("/api/priv/movimientos/:id", {
+			id: "@id"
+		});
+	}
+})();

21-rest-advance/client/app/states/lista/fila-movimiento/fila-movimiento.html

@@ -1,7 +1,10 @@
+<td class="text-left">
+	<a href="" ui-sref="editor({id:movimiento.id})">{{movimiento.id}}</a>
+</td>
 <td class="text-left">{{movimiento.fecha | date}}</td>
 <td class="text-left">{{movimiento.tipo}}</td>
 <td class="text-left">{{movimiento.categoria}}</td>
-<td class="text-left" ng-class="{'text-success': movimiento.tipo=='Ingreso', 'text-danger' : movimiento.tipo=='Gasto'}">
+<td class="text-right" ng-class="{'text-success': movimiento.tipo=='Ingreso', 'text-danger' : movimiento.tipo=='Gasto'}">
 	{{movimiento.importe | number:2}} €
 </td>
 <td class="text-left">

21-rest-advance/client/app/states/lista/lista.html

@@ -8,6 +8,7 @@
 	<table class="table">
 		<thead>
 			<tr>
+				<th>ID</th>
 				<th><a href="" ng-click="lista.campo = 'fecha'; lista.sentido = !lista.sentido ">Fecha</a>
 				</th>
 				<th>Tipo</th>
@@ -17,9 +18,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr ng-repeat="movimiento in lista.movimientos | abGranImporte:lista.valorCorte | filter:lista.valorBuscado | orderBy:lista.campo:lista.sentido"
-			fila-movimiento movimiento="movimiento"
-			ab-seleccionado>
+			<tr ng-repeat="movimiento in lista.movimientos | abGranImporte:lista.valorCorte | filter:lista.valorBuscado | orderBy:lista.campo:lista.sentido" fila-movimiento movimiento="movimiento" ab-seleccionado>
 			</tr>
 		</tbody>
 	</table>

21-rest-advance/client/app/states/nuevo/nuevo.js

@@ -1,53 +1,53 @@
 "use strict";
 (function () {
-    var componentName = "nuevo";
-    angular
-        .module(componentName, ['ui.router', 'ngResource', 'abDirectivas','abValoracion', 'abCabecera'])
-        .config(stateConfig)
-        .directive(componentName, directive)
-        .service("servicio_"+componentName, service)
+	var componentName = "nuevo";
+	angular
+		.module(componentName, ['ui.router', 'ngResource', 'abDirectivas', 'abValoracion', 'abCabecera'])
+		.config(stateConfig)
+		.directive(componentName, directive)
+		.service("servicio_" + componentName, service)
 
-    function stateConfig($stateProvider) {
-        $stateProvider
-            .state(componentName, {
-                url: '/' + componentName,
-                template: '<' + componentName + '></' + componentName + '>'
-            });
-    }
+	function stateConfig($stateProvider) {
+		$stateProvider
+			.state(componentName, {
+				url: '/' + componentName,
+				template: '<' + componentName + '></' + componentName + '>'
+			});
+	}
 
-    function directive() {
-        return {
-            templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
-            controller: controller,
-            controllerAs: componentName,
-            bindToController: true,
-            scope: {}
-        }
-    }
+	function directive() {
+		return {
+			templateUrl: 'app/states/' + componentName + '/' + componentName + '.html',
+			controller: controller,
+			controllerAs: componentName,
+			bindToController: true,
+			scope: {}
+		}
+	}
 
-    function controller(servicio_nuevo, $state) {
-        var vm = this;
-        vm.maestros = servicio_nuevo.Maestros.get();
+	function controller(servicio_nuevo, $state) {
+		var vm = this;
+		vm.maestros = servicio_nuevo.Maestros.get();
 
 		vm.nuevoMovimiento = new servicio_nuevo.Movimientos();
 		vm.nuevoMovimiento.esIngreso = 1;
 		vm.nuevoMovimiento.fecha = new Date();
 
-        vm.guardarMovimiento = function () {
-			vm.nuevoMovimiento.tipo = vm.tipo(vm.nuevoMovimiento);
+		vm.guardarMovimiento = function () {
+			vm.nuevoMovimiento.tipo = tipo(vm.nuevoMovimiento);
 			vm.nuevoMovimiento.$save()
 				.then(function (result) {
 					$state.go('lista');
 				});
 		};
 
-		vm.tipo = function (movimiento) {
+		var tipo = function (movimiento) {
 			return movimiento.esIngreso && 'Ingreso' || 'Gasto'
 		}
-    }
+	}
 
-    function service($resource) {
-        this.Maestros = $resource("/api/pub/maestros/");
-        this.Movimientos =  $resource("/api/priv/movimientos/");
-    }
+	function service($resource) {
+		this.Maestros = $resource("/api/pub/maestros/");
+		this.Movimientos =  $resource("/api/priv/movimientos/");
+	}
 })();

21-rest-advance/client/index.html

@@ -25,10 +25,8 @@
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 	<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-cookies.min.js"></script>
-	<!-- Referencia para usar el módulo ngResource -->
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-resource.min.js"></script>
 	<script src="app/app.js"></script>
-	<!-- Gestor de la Seguridad -->
 	<script src="app/common/appSecurity.js"></script>
 	<script src="app/common/states.js"></script>
 	<script src="app/common/filtros.js"></script>
@@ -43,6 +41,8 @@
 	<script src="app/states/lista/lista.js"></script>
 	<script src="app/states/lista/fila-movimiento/fila-movimiento.js"></script>
 	<script src="app/states/registro/registro.js"></script>
+	<!-- Referencia al nuevo estado editor -->
+	<script src="app/states/editor/editor.js"></script>
 </body>
 
 </html>

21-rest-advance/server.js

@@ -155,42 +155,77 @@ app.route('/api/priv/movimientos')
 // Para las rutas paramétircas creamos otro patrón
 // El recurso sigue siendo movimientos, y el parámetro se declara con :id
 // Obtención a partir de parámetros
-app.get('/api/priv/movimientos/:id', function (req, res, next) {
-	var movId = req.params.id;
-	// Buscar en el array el movimiento con este id
-	movimientoBuscado = getMovimientoById(movId, req.usuario);
-	res.json(movimientoBuscado);
-});
+app.route('/api/priv/movimientos/:id')
+	.get(function (req, res, next) {
+		var movId = req.params.id;
+		// Buscar en el array el movimiento con este id
+		movimientoBuscado = getMovimientoById(movId, req.usuario);
+		res.json(movimientoBuscado);
+	}).post(function (req, res, next) {
+		// Pod´ria programarse como un PUT, pero requiere cambios en $resource
+		var movId = req.params.id;
+		var nuevoMovimiento = req.body;
+		var totalUsuario = getTotalUsuario(req.usuario);
 
-function getMovimientoById(id,usuario) {
-	var movimientoBuscado = movimientos.filter(function (movimiento) {
+		// Buscar en el array el movimiento
+		movimientoBuscado = getMovimientoById(movId, req.usuario);
+		if (movimientoBuscado.tipo == 'Ingreso')
+			totalUsuario.ingresos -= movimientoBuscado.importe;
+		else
+			totalUsuario.gastos -= movimientoBuscado.importe;
+		// sustiruirlo
+		setMovimientoById(movId, req.usuario, nuevoMovimiento);
+		if (nuevoMovimiento.tipo == 'Ingreso')
+			totalUsuario.ingresos += nuevoMovimiento.importe;
+		else
+			totalUsuario.gastos += nuevoMovimiento.importe;
+		// devolverlo igualmente
+		res.json(nuevoMovimiento);
+	});
+
+function getMovimientoById(id, usuario) {
+	var movimientoBuscado = movimientos.find(function (movimiento) {
 		return movimiento.id == id && movimiento.usuario == usuario;
-	})[0];
+	});
 	return movimientoBuscado;
 }
 
+function setMovimientoById(id, usuario, movimiento) {
+	var movimientoBuscadoIndex = movimientos.findIndex(function (movimiento) {
+		return movimiento.id == id && movimiento.usuario == usuario;
+	});
+	movimientos[movimientoBuscadoIndex] = movimiento;
+}
+
 app.get('/api/priv/total', function (req, res, next) {
 	var totalUsuario = getTotalUsuario(req.usuario);
 	res.json(totalUsuario);
 });
 
 function getTotalUsuario(usuario) {
-    if(usuario===undefined) return {};
-    var totalUsuario = totales.filter(function (t) {
-        return t.usuario == usuario;
-    })[0];
-    if (totalUsuario===undefined) {
-        totalUsuario = {
-            usuario : usuario,
-            ingresos: 0,
-            gastos: 0
-        };
-        totales.push(totalUsuario);
-    }
-    return totalUsuario;
+	if (usuario === undefined) return {};
+	var totalUsuario = totales.filter(function (t) {
+		return t.usuario == usuario;
+	})[0];
+	if (totalUsuario === undefined) {
+		totalUsuario = {
+			usuario: usuario,
+			ingresos: 0,
+			gastos: 0
+		};
+		totales.push(totalUsuario);
+	}
+	return totalUsuario;
 }
 
 
 console.log('steady');
 app.listen(3000);
 console.log('go');
+
+/*
+To Do:
+- refactorizar sacando implementaciones de la fachada
+- DRY
+- tratar el parametro movId y transformarlo en un movimiento o un not found
+*/