Moved new transaction form into a modal to free up landscape.

littleweaver · Aug 18, 2014 · 56f00ea · 56f00ea
1 parent 6fba140
commit 56f00ea
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 12 deletions.
diff --git a/argus/forms.py b/argus/forms.py
@@ -246,6 +246,11 @@ def __init__(self, group, *args, **kwargs):
                 field = 'member{}'.format(share.party_id)
                 self.fields[field].initial = float(share.numerator) / 100
 
+    @property
+    def member_fields(self):
+        for member in self.members:
+            yield self['member{}'.format(member.pk)]
+
     def clean(self):
         cleaned_data = super(TransactionForm, self).clean()
         split = cleaned_data['split']

diff --git a/argus/templates/argus/__base.html b/argus/templates/argus/__base.html
@@ -35,5 +35,6 @@
 {% block javascripts %}
 	{{ block.super }}
 	<script src="{% static "zenaida/js/bootstrap/tab.js" %}"></script>
+	<script src="{% static "zenaida/js/bootstrap/modal.js" %}"></script>
 	<script src="{% static "argus/js/app.js" %}"></script>
 {% endblock %}
diff --git a/argus/templates/argus/__transaction_list.html b/argus/templates/argus/__transaction_list.html
@@ -3,21 +3,32 @@
 {% load floppyforms zenaida %}
 
 {% block main_panel %}
-	<div class="panel panel-default">
-		<div class="panel-heading">
-			<h2 class="panel-title">Record a New Expense</h2>
-		</div>
-		<div class="panel-body">
-			<form action="" method="post">
-				{% csrf_token %}
-				{% form form %}
-				<button class='btn btn-primary' type='submit'>Create transaction</button>
-			</form>
-		</div>
+	<div class="modal fade" id="expenseForm" tabindex="-1" role="dialog" aria-labelledby="expenseFormLabel" aria-hidden="true">
+		<form action="" method="post">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+					<h4 class="modal-title" id="expenseFormLabel">New transaction</h4>
+					</div>
+					<div class="modal-body">
+						{% csrf_token %}
+						{% form form using "argus/forms/transaction.html" %}
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+						<button class='btn btn-primary' type='submit'>Save</button>
+					</div>
+				</div>
+			</div>
+		</form>
 	</div>
 	<div class="panel panel-default">
 		<div class="panel-heading">
-			<h2 class="panel-title">Expense Log</h2>
+			<h2 class="panel-title">
+				Expense Log
+				<a class='pull-right' href='#' data-toggle='modal' data-target='#expenseForm'><i class='fa fa-plus'></i></a>
+			</h2>
 		</div>
 		<table class="table">
 			<thead>

diff --git a/argus/templates/argus/forms/transaction.html b/argus/templates/argus/forms/transaction.html
@@ -0,0 +1,39 @@
+{% extends "floppyforms/layouts/bootstrap.html" %}
+
+{% load floppyforms %}
+
+{% block rows %}
+	{% for field in form.hidden_fields %}
+		{% formfield field %}
+	{% endfor %}
+	<div class='row'>
+		<div class='col-md-6'>
+			{% formrow form.paid_by %}
+		</div>
+		<div class='col-md-6'>
+			{% formrow form.paid_to %}
+		</div>
+	</div>
+	<div class='row'>
+		<div class='col-md-3'>
+			{% formrow form.memo %}
+		</div>
+		<div class='col-md-3'>
+			{% formrow form.amount %}
+		</div>
+		<div class='col-md-3'>
+			{% formrow form.paid_at %}
+		</div>
+		<div class='col-md-3'>
+			{% formrow form.category %}
+		</div>
+	</div>
+
+	{% formrow form.notes %}
+	{% formrow form.split %}
+	{% formrow form.sharers %}
+
+	{% for field in form.member_fields %}
+		{% formrow field %}
+	{% endfor %}
+{% endblock %}