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

<div class="container">
	<div class="row">
	
		<div>
			<select
				ng-model='account'
				ng-change='refreshList()'
				ng-options="account.name for account in accounts track by account.id"></select>
		</div>
		
		<div class="col-md-offset-4 col-md-4 col-xs-offset-1 col-xs-10">
			
			<div ng-show="lastSubmission" class="lastSubmission col-xs-offset-1 alert alert-info" role="alert">
				{{lastSubmission.date | date:'dd.MM.yyyy'}}
				<span ng-class="{ 'color-green': lastSubmission.amount > 0, 'color-red': lastSubmission.amount < 0 }">{{lastSubmission.amount}}&nbsp;€</span>
				&nbsp;&nbsp;&nbsp;
				<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
			</div>
			
			<div class="row" style="margin-top:2em;">
				<form name="form" ng-submit="postTransaction()">
				
					<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="form.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>
					
					<div class="row form-group" style="text-align:center;">
						<input type="submit" ng-disabled="form.amount.$error.pattern" class="btn btn-primary" />
					</div>
					
				</form>
			</div>
			
			<div class="row">
				<table class="listing">
					<tr>
						<th>Datum</th>
						<th>Kategorie</th>
						<th>Betrag</th>
						<th>Beschreibung</th>
					</tr>
					<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>
						<td>{{transaction.description}}</td>
					</tr>
				</table>
				<div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
					<a href="" ng-click="moreTransactions()">more</a>
				</div>
				
				<div style="margin-top: 2em; text-align: center;">
					<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}}&nbsp;€<br/></span>
				</div>
				
				
				<!-- Template for UI Bootstrap modal, see https://angular-ui.github.io/bootstrap/#/modal -->
				<script type="text/ng-template" id="detailsTemplate.html">
					<div class="modal-body">
						<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" 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>
		</div>			
	</div>
</div>