Edit form, pt. 2

src/main/resources/static/css/app.css

@@ -10,6 +10,14 @@ label {
 	color: #eee;
 }
 
+.modal-body label {
+	color: #aaa;
+}
+
+.userLabel {
+	color: white;
+}
+
 .row-margin {
 	padding: 5 ex;
 	margin: 20 px;

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

@@ -4,8 +4,6 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 	
 	$scope.refreshList = function() {
 		
-		console.log('refreshList()');
-		
 		// reset form
 		if ($scope.form) {
 			$scope.form.$setPristine();
@@ -108,8 +106,6 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 	}
 	
 	$scope.initList = function() {
-		console.log('initList()');
-		
 		$scope.pageSize = 20;
 		
 		var userinfo = $resource('/user').get();
@@ -230,7 +226,10 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 			templateUrl: 'detailsTemplate.html',
 			controller: 'DetailsModalCtrl',
 			resolve: {
-				transaction: transaction
+				transaction: transaction,
+				categories: function () {
+			          return $scope.categories;
+			        }
 			}
 		});
 
@@ -246,12 +245,23 @@ transactionControllers.controller('TransactionListCtrl', [ '$http', '$scope', '$
 
 } ]);
 
-transactionControllers.controller('DetailsModalCtrl', [ '$scope', '$uibModalInstance', 'transaction', function($scope, $uibModalInstance, transaction) {
-
+transactionControllers.controller('DetailsModalCtrl', [ '$scope', '$uibModalInstance', 'transaction', 'categories', function($scope, $uibModalInstance, transaction, categories) {
+	
+	transaction.date = new Date(transaction.date);
+	
 	$scope.transaction = transaction;
-
+	$scope.categories = categories;
+	
+	for (i = 0; i < $scope.categories.length; i++) {
+		if ($scope.categories[i].name == $scope.transaction.category.name) {
+			$scope.transaction.category  = $scope.categories[i];
+			break;
+		}
+	}
+	
 	$scope.ok = function () {
-		$uibModalInstance.close($scope.selected.item);
+		console.log($scope.transaction);
+		$uibModalInstance.close($scope.transaction);
 	};
 
 	$scope.cancel = function () {

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

@@ -22,7 +22,8 @@
 				
 					<div class="row form-group">
 						<label for="amountInput">Betrag</label>
-						<input id="amountInput"	
+						<input id="amountInput"
+							name="amount"
 							ng-model='transaction.amount'
 							type='text'
 							required
@@ -106,22 +107,70 @@
 				
 				<!-- Template for UI Bootstrap modal, see https://angular-ui.github.io/bootstrap/#/modal -->
 				<script type="text/ng-template" id="detailsTemplate.html">
-					<div class="modal-header">
-						<h3 class="modal-title">I'm a modal!</h3>
-					</div>
 					<div class="modal-body">
-						<ul>
-							<li ng-repeat="item in items">
-								<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
-							</li>
-						</ul>
-						Selected: <b>{{ selected.item }}</b>
-						<pre style="font-size: 75%; color: darkgray;">{{transaction | json}}</pre>
+						<form name="detailsForm" style="padding:2ex;">
+				
+							<div class="row form-group">
+								<label for="amountInput">Betrag</label>
+								<input id="amountInput"
+									name="amount"
+									ng-model='transaction.amount'
+									type='text'
+									required
+									autocomplete="off"
+									autofocus="autofocus"
+									ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/"
+									class="form-control" />
+								<span ng-show="detailsForm.amount.$error.pattern"><br/>The value is not valid!</span>
+							</div>
+					
+							<div class="row form-group">
+								<label for="categorySelect">Kategorie</label>
+								<select
+									id="categorySelect"
+									ng-model='transaction.category'
+									size='1'
+									ng-options="category.name for category in categories track by category._links.self.href"
+									ng-change='checkCategory()'
+									class="form-control"></select>
+							</div>
+					
+							<div class="row form-group">
+								<label for="dateInput">Datum</label>
+								<input
+									id="dateInput"
+									ng-model='transaction.date'
+									type='date'
+									placeholder="yyyy-MM-dd"
+									required
+									class="form-control" />
+							</div>
+					
+							<div class="row form-group">
+								<label for="descriptionInput">Notiz</label>
+								<input
+									id="descriptionInput"
+									ng-model="transaction.description"
+									uib-typeahead="address for address in updateSuggestions($viewValue)"
+									typeahead-loading="loadingLocations"
+									class="form-control">
+							</div>
+	
+							<div class="row form-group" ng-show="accountUsers.length > 1">
+								<label for="expenseInput">Auslage</label>
+								<div>
+									&nbsp;<label class='userLabel'><input id='noCreditorRadioButton' name='expenseBy' ng-model='transaction.creditor' type='radio' value='' checked='checked' />&nbsp;Keine&nbsp;&nbsp;</label>
+									<label class='userLabel' ng-repeat="user in accountUsers"><input name='expenseBy' ng-model='$parent.transaction.creditor' type='radio' value="{{user._links.self.href}}" />&nbsp;{{user.name}}&nbsp;&nbsp;</label>
+								</div>
+							</div>
+					
+						</form>
 					</div>
 					<div class="modal-footer">
-						<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
+						<button class="btn btn-primary" ng-disabled="detailsForm.amount.$error.pattern" type="button" ng-click="ok()">OK</button>
 						<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
 					</div>
+					<pre style="font-size: 75%; color: darkgray;">{{transaction | json}}</pre>
 				</script>
 				
 			</div>