modal instead of partial for transaction details

src/main/resources/static/js/app.js

@@ -4,9 +4,6 @@ transactionsApp.config([ '$routeProvider', function($routeProvider) {
 	$routeProvider.when('/list', {
 		templateUrl : 'partials/transaction-list.html',
 		controller : 'TransactionListCtrl'
-	}).when('/transaction/:transactionURI*', {
-		templateUrl : 'partials/transaction-details.html',
-		controller : 'TransactionDetailCtrl'
 	}).otherwise({
 		redirectTo : '/list'
 	});

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

@@ -201,10 +201,6 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 		});
 	};
 	
-	$scope.showTransaction = function(transaction) {
-		$location.path('/transaction/' + transaction._links.self.href);
-	};
-	
 	$scope.moreTransactions = function() {
 		if ($scope.nextPageAvailable) {
 			$scope.pageNumber++;
@@ -229,20 +225,16 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 		});
 	};
 	
-	$scope.items = ['item1', 'item2', 'item3'];
+	$scope.openDetails = function(transaction) {
-	
-	$scope.openDetails = function() {
 		var modalInstance = $uibModal.open({
 			templateUrl: 'detailsTemplate.html',
 			controller: 'DetailsModalCtrl',
 			resolve: {
-				items: function () {
+				transaction: transaction
-					return $scope.items;
-				}
 			}
 		});
 
-		modalInstance.result.then(function (selectedItem) {
+		modalInstance.result.then(function(selectedItem) {
 			$scope.selected = selectedItem;
 		}, function () {
 			$log.info('Modal dismissed at: ' + new Date());
@@ -254,12 +246,9 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 
 } ]);
 
-transactionControllers.controller('DetailsModalCtrl', [ '$scope', '$uibModalInstance', 'items', function($scope, $uibModalInstance, items) {
+transactionControllers.controller('DetailsModalCtrl', [ '$scope', '$uibModalInstance', 'transaction', function($scope, $uibModalInstance, transaction) {
 
-	$scope.items = items;
+	$scope.transaction = transaction;
-	$scope.selected = {
-		item: $scope.items[0]
-	};
 
 	$scope.ok = function () {
 		$uibModalInstance.close($scope.selected.item);
@@ -272,7 +261,7 @@ transactionControllers.controller('DetailsModalCtrl', [ '$scope', '$uibModalInst
 
 
 
-
+// TODO to be removed
 transactionControllers.controller('TransactionDetailCtrl', [ '$scope', '$routeParams', '$resource', '$location', function($scope, $routeParams, $resource, $location) {
 	
 	$scope.initDetails = function() {

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

@@ -1,63 +0,0 @@
-<form name="form" ng-submit="updateTransaction()">
-	<table border='0' cellpadding='1' style='margin: auto;'>
-		<tr>
-			<td align='right'>Betrag:</td>
-			<td><input name="amount" ng-model='transaction.amount' type='text' required autofocus="autofocus"
-				ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
-					is not valid!</span></td>
-		</tr>
-		<tr>
-			<td align='right'>Kategorie:</td>
-			<td><select ng-model='transaction.category' size='1'
-				ng-options="category.name for category in categories track by category._links.self.href" ng-change='checkCategory()'>
-			</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' ng-model='transaction.creditor' ng-value='none' type='radio' checked='checked' />Keine</label -->
-				<!-- label ng-repeat="user in accountUsers" class='userLabel'><input name='expenseBy' ng-model='$parent.transaction.creditor' ng-value='{{user.name}}' type='radio' />{{user.name}}</label -->
-				
-				<label class='userLabel'><input id='noCreditorRadioButton' name='expenseBy' ng-model='transaction.creditor' type='radio' value='' checked='checked' />Keine</label>
-				<label class='userLabel' ng-repeat="user in accountUsers"><input name='expenseBy' ng-model='$parent.transaction.creditor' type='radio' value="{{user._links.self.href}}" />{{user.name}}</label>
-			</td>
-				
-		</tr>
-		<tr>
-			<td align='center' colspan='2'><input type="submit" ng-disabled="form.amount.$error.pattern" /></td>
-		</tr>
-	</table>
-</form>
-
-
-<!-- 
-<table class="listing">
-	<tr>
-		<th>Datum</th>
-		<th>Kategorie</th>
-		<th>Betrag</th>
-		<th>Beschreibung</th>
-	</tr>
-	<tr>
-		<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
-		<td>{{transaction.category.name}}</td>
-		<td align="right">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
-		<td>{{transaction.description}}</td>
-	</tr>
-</table>
-
-<div ng-if="transaction.creditor.name">Auslage: {{transaction.creditor.name}}</div>
--->
-
-
-<div style="margin: auto; width: 20%; border: 1px dotted lightgray;">
-	<a class="btn btn-danger" ng-click="deleteTransaction(transaction)">Delete</a>
-</div>

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

@@ -88,7 +88,7 @@
 						<th>Betrag</th>
 						<th>Beschreibung</th>
 					</tr>
-					<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
+					<tr ng-repeat="transaction in transactions" ng-click="openDetails(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>
@@ -104,12 +104,7 @@
 				</div>
 				
 				
-				
+				<!-- Template for UI Bootstrap modal, see https://angular-ui.github.io/bootstrap/#/modal -->
-				
-				
-				<button type="button" class="btn btn-default" ng-click="openDetails()">Open me!</button>
-				<div ng-show="selected">Selection from a modal: {{ selected }}</div>
-				
 				<script type="text/ng-template" id="detailsTemplate.html">
 					<div class="modal-header">
 						<h3 class="modal-title">I'm a modal!</h3>
@@ -121,6 +116,7 @@
 							</li>
 						</ul>
 						Selected: <b>{{ selected.item }}</b>
+						<pre style="font-size: 75%; color: darkgray;">{{transaction | json}}</pre>
 					</div>
 					<div class="modal-footer">
 						<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
@@ -128,8 +124,6 @@
 					</div>
 				</script>
 				
-				
-				
 			</div>
 		</div>			
 	</div>