Expense Modal

src/main/java/de/tilman/transactions/Application.java

@@ -2,11 +2,14 @@ package de.tilman.transactions;
 
 import javax.annotation.PostConstruct;
 
+import org.h2.server.web.WebServlet;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.boot.context.embedded.ServletRegistrationBean;
+import org.springframework.context.annotation.Bean;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
 import org.springframework.security.core.authority.AuthorityUtils;
 import org.springframework.security.core.context.SecurityContextHolder;
@@ -53,5 +56,12 @@ public class Application {
 		SecurityContextHolder.clearContext();
 	}
 	
+	// XXX for dev - make H2 database available as jdbc:h2:mem:testdb at /console (http://stackoverflow.com/a/24727653/3761783)
+//	@Bean
+//	public ServletRegistrationBean h2servletRegistration() {
+//	    ServletRegistrationBean registration = new ServletRegistrationBean(new WebServlet());
+//	    registration.addUrlMappings("/console/*");
+//	    return registration;
+//	}	
 
 }

src/main/resources/static/js/controllers.js

@@ -25,7 +25,7 @@ transactionControllers.controller('TransactionListCtrl', [ '$scope', '$location'
 			
 			// initialize attributes for outstanding amounts
 			for (i = 0; i < $scope.accountUsers.length; i++) {
-				$scope.accountUsers[i].outstandings = 0.0;
+				$scope.accountUsers[i].outstandingSum = 0.0;
 			}
 			
 			// get expenses for all users of the account
@@ -37,12 +37,14 @@ transactionControllers.controller('TransactionListCtrl', [ '$scope', '$location'
 			
 			$q.all(promises).then(function(data) {
 				for (i = 0; i < data.length; i++) {
+					$scope.accountUsers[i].expenses = new Array(data[i]._embedded.transactions.length);
 					var expenseSum = 0;
 					for (j = 0; j < data[i]._embedded.transactions.length; j++) {
+						$scope.accountUsers[i].expenses[j] = data[i]._embedded.transactions[j];
+// XXX						$scope.accountUsers[i].expenses[j].amount = numberToAmount(data[i]._embedded.transactions[j].amount);
 						expenseSum = expenseSum + data[i]._embedded.transactions[j].amount;
 					}
-					$scope.accountUsers[i].outstandings -= expenseSum;
-					//console.log('Expenses by ' + $scope.accountUsers[i].name + ': ' + expenseSum);
+					$scope.accountUsers[i].outstandingSum -= expenseSum;
 				}
 			});
 			
@@ -55,12 +57,13 @@ transactionControllers.controller('TransactionListCtrl', [ '$scope', '$location'
 			
 			$q.all(promises).then(function(data) {
 				for (i = 0; i < data.length; i++) {
+					$scope.accountUsers[i].withdrawals = new Array(data[i]._embedded.withdrawals.length);
 					var withdrawnSum = 0;
 					for (j = 0; j < data[i]._embedded.withdrawals.length; j++) {
+						$scope.accountUsers[i].withdrawals[j] = data[i]._embedded.withdrawals[j];
 						withdrawnSum = withdrawnSum + data[i]._embedded.withdrawals[j].amount;
 					}
-					$scope.accountUsers[i].outstandings -= withdrawnSum;
-					//console.log('Withdrawals by ' + $scope.accountUsers[i].name + ': ' + withdrawnSum);
+					$scope.accountUsers[i].outstandingSum -= withdrawnSum;
 				}
 			});
 		});
@@ -273,7 +276,23 @@ transactionControllers.controller('TransactionListCtrl', [ '$scope', '$location'
 			refreshExpenses();
 			
 		}, function () {
-			$log.info('Modal dismissed at: ' + new Date());
+			$log.info('DetailsModal dismissed ' + new Date());
+		});
+	};
+	
+	$scope.openExpenses = function(user) {
+		var modalInstance = $uibModal.open({
+			templateUrl: 'expensesTemplate.html',
+			controller: 'ExpensesModalCtrl',
+			resolve: {
+				accountUser: user
+			}
+		});
+
+		modalInstance.result.then(function() {
+			refreshExpenses();
+		}, function () {
+			$log.info('ExpensesModal dismissed ' + new Date());
 		});
 	};
 	
@@ -333,3 +352,17 @@ transactionControllers.controller('DetailsModalCtrl', [ '$scope', '$resource', '
 		});
 	}
 } ]);
+
+transactionControllers.controller('ExpensesModalCtrl', [ '$scope', '$uibModalInstance', 'accountUser', function($scope, $uibModalInstance, accountUser) {
+	
+	$scope.accountUser = accountUser;
+	console.log($scope.accountUser);
+	
+	$scope.ok = function () {
+		$uibModalInstance.close();
+	};
+
+	$scope.close = function () {
+		$uibModalInstance.dismiss('close');
+	};
+} ]);

src/main/resources/static/partials/transaction-list.html

@@ -100,7 +100,7 @@
 				</div>
 				
 				<div style="margin-top: 2em; text-align: center;">
-					<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}}&nbsp;€<br/></span>
+					<span ng-repeat="user in accountUsers" ng-click="openExpenses(user)" class="clickable">{{user.name}} {{user.outstandingSum | number : 2}}&nbsp;€<br/></span>
 				</div>
 				
 				
@@ -176,6 +176,50 @@
 					<!-- pre style="font-size: 75%; color: black;">{{transaction | json}}</pre -->
 				</script>
 				
+				<script type="text/ng-template" id="expensesTemplate.html">
+					<div class="modal-header">
+						<h3 class="modal-title">{{accountUser.name}}</h3>
+					</div>
+					<div class="modal-body">
+						<div ng-show="accountUser.expenses">
+							<h4 class="modal-title">Auslagen</h4>
+							<table class="listing">
+								<tr>
+									<th>Datum</th>
+									<th>Kategorie</th>
+									<th>Betrag</th>
+									<th>Beschreibung</th>
+								</tr>
+								<tr ng-repeat="expense in accountUser.expenses">
+									<td>{{expense.date | date:'dd.MM.yyyy'}}</td>
+									<td>{{expense.category.name}}</td>
+									<td align="right">{{expense.amount}}&nbsp;&euro;</td>
+									<td>{{expense.description}}</td>
+								</tr>
+							</table>
+						</div>
+
+						<div ng-show="accountUser.withdrawals">
+							<h4 class="modal-title" style="margin-top: 3.5ex;">Entnahmen</h4>
+							<table class="listing">
+								<tr>
+									<th>Datum</th>
+									<th>Betrag</th>
+								</tr>
+								<tr ng-repeat="withdrawal in accountUser.withdrawals">
+									<td>{{withdrawal.date | date:'dd.MM.yyyy'}}</td>
+									<td align="right">{{withdrawal.amount}}&nbsp;&euro;</td>
+								</tr>
+							</table>
+						</div>
+
+					</div>
+					<div class="modal-footer">
+						<button class="btn btn-default" type="button" ng-click="close()">Schließen</button>
+					</div>
+					<!-- pre style="font-size: 75%; color: black;">{{transaction | json}}</pre -->
+				</script>
+				
 			</div>
 		</div>			
 	</div>