user interface for withdrawals

src/main/java/de/tilman/transactions/repository/UserRepository.java

@@ -14,7 +14,7 @@ public interface UserRepository extends PagingAndSortingRepository<User, Long> {
 	
 	@PreAuthorize("isFullyAuthenticated() && ((#username == principal.username) || hasRole('ROLE_ADMIN'))")
 	@Query("SELECT u FROM User u WHERE u.username = :username")
-	User getByUsername(@Param("username") String username);
+	User findByUsername(@Param("username") String username);
 	
 	@PreAuthorize("hasRole('ROLE_ADMIN')")
 	@Override

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

@@ -34,28 +34,50 @@ transactionControllers.controller('TransactionListCtrl', [ '$scope', '$location'
 
 		});
 		
-		console.log('$scope.account.links.users:');
-		console.log($scope.account._links.users);
-		
-		// HIER GEHT'S WEITER
-		// URL des aktuell selektierten Account ermitteln, dann /accounts/id/users abrufen, Liste für Radiobuttons bereitstellen
 		var accountUsers = $resource($scope.account._links.users.href).get();
 		accountUsers.$promise.then(function(data) {
-			console.log('accountUsers');
-			console.log(accountUsers);
-			
 			$scope.accountUsers = accountUsers._embedded.users;
 		});
 		
 	}
 	
+	$scope.checkCategory = function() {
+		
+		var radioButtons = document.getElementsByName('expenseBy');
+		var userLabels = document.getElementsByClassName('userLabel');
+		
+		// if this is selected to be a withdrawal, preselect the current user and lock the radio buttons
+		if ($scope.transaction.category.id == -1) {
+			for (i = 0; i < userLabels.length; i++) {
+				if (userLabels[i].innerHTML.substr(-$scope.userinfo.name.length) === $scope.userinfo.name) {
+					userLabels[i].getElementsByTagName('INPUT')[0].checked = true;
+				}
+			}
+			for (i = 0; i < radioButtons.length; i++) {
+				radioButtons[i].disabled = true;
+			}
+		}
+		else {
+			for (i = 0; i < radioButtons.length; i++) {
+				radioButtons[i].disabled = false;
+			}
+			radioButtons[0].checked = true;
+		}
+		
+	}
+	
 	$scope.initList = function() {
 		console.log('initList()');
 		var userinfo = $resource('/user').get();
 		userinfo.$promise.then(function(data) {
-			$scope.username = userinfo.name;
+			$scope.userid = userinfo.name;
 			
-			var accountInfo = $resource('/accounts/search/findByUserName', { username: userinfo.name }).get();
+			userinfo = $resource('/users/search/findByUsername', { username: $scope.userid }).get();
+			userinfo.$promise.then(function(data) {
+				$scope.userinfo = userinfo;
+			});
+			
+			var accountInfo = $resource('/accounts/search/findByUserName', { username: $scope.userid }).get();
 			accountInfo.$promise.then(function(data) {
 				$scope.accounts = accountInfo._embedded.accounts;
 				$scope.account = $scope.accounts[0];

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

@@ -1,51 +1,57 @@
 <div>
 	<div>
 		<div><select ng-model='account' ng-change='refreshList()' ng-options="account.name for account in accounts track by account.id"></select></div>
-		<div>
+		<form name="form" ng-submit="postTransaction()">
-			<form name="form" ng-submit="postTransaction()">
+			<table border='0' cellpadding='1' style='margin: auto;'>
-				<div>
-					Betrag: <input name="amount" ng-model='transaction.amount' type='text' required ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" />
-				</div>
-				<span ng-show="form.amount.$error.pattern">The value is not valid!</span>
-				<div>
-					Kategorie: <select ng-model='transaction.category' size='1'
-						ng-options="category.name for category in categories track by category._links.self.href">
-					</select>
-				</div>
-				<div>
-					Datum: <input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required />
-				</div>
-				<div>
-					Notiz: <input ng-model='transaction.description' type='text' size='20' />
-				</div>
-				<div>
-					Auslage: <label><input name='expenseBy' type='radio' checked='checked' />Keine</label>
-					<label ng-repeat="user in accountUsers"><input name='expenseBy' type='radio' />{{user.name}}</label>
-				</div>
-				<div>
-					<input type="submit" ng-disabled="form.amount.$error.pattern" />
-				</div>
-			</form>
-
-			<table class="listing">
 				<tr>
-					<th>Datum</th>
+					<td align='right'>Betrag:</td>
-					<th>Kategorie</th>
+					<td><input name="amount" ng-model='transaction.amount' type='text' required
-					<th>Betrag</th>
+						ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
-					<th>Beschreibung</th>
+							is not valid!</span></td>
 				</tr>
-				<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
+				<tr>
-					<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
+					<td align='right'>Kategorie:</td>
-					<td>{{transaction.category.name}}</td>
+					<td><select ng-model='transaction.category' size='1'
-					<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
+						ng-options="category.name for category in categories track by category._links.self.href" ng-change='checkCategory()'>
-					<td>{{transaction.description}}</td>
+					</select></td>
+				</tr>
+				<tr>
+					<td align='right'>Datum:</td>
+					<td><input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required /></td>
+				</tr>
+				<tr>
+					<td align='right'>Notiz:</td>
+					<td><input ng-model='transaction.description' type='text' size='20' /></td>
+				</tr>
+				<tr>
+					<td align='right'>Auslage:</td>
+					<td><label class='userLabel'><input name='expenseBy' type='radio' checked='checked' />Keine</label> <label
+						ng-repeat="user in accountUsers" class='userLabel'><input name='expenseBy' type='radio' />{{user.name}}</label></td>
+				</tr>
+				<tr>
+					<td align='center' colspan='2'><input type="submit" ng-disabled="form.amount.$error.pattern" /></td>
 				</tr>
 			</table>
+		</form>
 
-			<!-- div>
+		<table class="listing">
-				<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
+			<tr>
-			</div -->
+				<th>Datum</th>
+				<th>Kategorie</th>
+				<th>Betrag</th>
+				<th>Beschreibung</th>
+			</tr>
+			<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
+				<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
+				<td>{{transaction.category.name}}</td>
+				<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
+				<td>{{transaction.description}}</td>
+			</tr>
+		</table>
+
+		<!-- div>
+			<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
+		</div -->
 			
-		</div>
 	</div>
 </div>