Expense Modal

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>