Wire transfer payments for events

website/events/admin_views.py

@@ -19,6 +19,7 @@ from events import services
 from events.decorators import organiser_only
 from events.exceptions import RegistrationError
 from events.forms import FieldsForm, EventMessageForm
+from payments.models import Payment
 from pushnotifications.models import Message, Category
 from .models import Event, Registration
 
@@ -34,6 +35,15 @@ class EventAdminDetails(DetailView, PermissionRequiredMixin):
     context_object_name = 'event'
     permission_required = 'events.change_event'
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        context.update({
+            'payment': Payment,
+        })
+
+        return context
+
 
 @method_decorator(staff_member_required, name='dispatch')
 @method_decorator(organiser_only, name='dispatch')

website/events/models.py

@@ -7,12 +7,11 @@ from django.db.models import Q
 from django.urls import reverse
 from django.utils import timezone
 from django.utils.crypto import get_random_string
-from django.utils.translation import ugettext_lazy as _
 from django.utils.text import format_lazy
+from django.utils.translation import ugettext_lazy as _
 from tinymce.models import HTMLField
 
 from members.models import Member
-from payments.models import Payment
 from pushnotifications.models import ScheduledMessage, Category
 from utils.translation import ModelTranslateMeta, MultilingualField
 
@@ -433,10 +432,6 @@ def registration_member_choices_limit():
 class Registration(models.Model):
     """Describes a registration for an Event"""
 
-    PAYMENT_NONE = Payment.NONE
-    PAYMENT_CARD = Payment.CARD
-    PAYMENT_CASH = Payment.CASH
-
     event = models.ForeignKey(Event, models.CASCADE)
 
     member = models.ForeignKey(

website/events/static/events/css/admin.scss

+@import "../../thaliawebsite/static/css/variables";
+
 .dashboard {
     #content {
         width: auto;
@@ -6,22 +8,62 @@
         }
     }
 
-    .module table td a {
-        display: inline-block;
-        vertical-align: middle;
+    .module {
+        table {
+            td {
+                vertical-align: middle;
+                &.text-center {
+                    text-align: center;
+                }
+
+                a {
+                    display: inline-block;
+                    vertical-align: middle;
+
+                    &.member-phone, &.member-email {
+                        width: 16px;
+                        height: 16px;
+
+                        @media(max-width: 767px) {
+                            display: block;
+                            width: 20px;
+                            height: 20px;
+                        }
+                    }
+
+                    &.member-phone {
+                        background: url('../images/phone-square.svg') no-repeat;
+                        padding-right: 2px;
 
-        &.member-phone, &.member-email {
-            width: 16px;
-            height: 16px;
+                        @media(max-width: 767px) {
+                            padding-right: 0;
+                            margin-bottom: 2px;
+                        }
+                    }
+
+                    &.member-email {
+                        background: url('../images/envelope-square.svg') no-repeat;
+                    }
+                }
+            }
         }
 
-        &.member-phone {
-            background: url('../images/phone-square.svg') no-repeat;
-            padding-right: 2px;
+        select[name=payment] {
+            background: $danger;
+            color: white;
+
+            &.paid {
+                background: $success;
+            }
+
+            @media(max-width: 767px) {
+                height: 40px;
+            }
         }
 
-        &.member-email {
-            background: url('../images/envelope-square.svg') no-repeat;
+        .button {
+            display: inline-block;
+            margin: 2px;
         }
     }
 }

website/events/static/events/js/admin.js

@@ -13,18 +13,40 @@ django.jQuery(function () {
         });
     });
 
-    $(".payment-radio").change(function () {
-        var radiobutton = $(this);
-        var url = radiobutton.parent().parent().data("url");
-        var value = radiobutton.data("value");
-        if (radiobutton.prop('checked')) {
-            patch(url, { payment: value }, function(result) {
-                radiobutton.prop('checked', value === result.payment);
-                $("table").trigger("update");
-            }, function() {
-                radiobutton.prop('checked', !checked);
-            });
+    var payment_previous;
+    $('select[name=payment]').on('focus', function () {
+        payment_previous = this.value;
+    }).change(function() {
+        var select = $(this);
+        var url = $(this).parents('tr').data("url");
+        var none = $(this).data('none');
+
+        if (payment_previous === $(this).val()) {
+            return;
+        }
+
+        if ($(this).val() === none) {
+            $(this).removeClass('paid');
+        } else {
+            $(this).addClass('paid');
         }
+
+        patch(url, { payment: $(this).val() }, function(data) {
+            if (data.payment === none) {
+                select.removeClass('paid');
+            } else {
+                select.addClass('paid');
+            }
+            select.val(data.payment);
+            $('table').trigger('update');
+        }, function(xhr) {
+            var data = $.parseJSON(xhr.responseText);
+            if (data.message !== undefined) {
+                alert(data.message);
+            } else if (data.payment !== undefined) {
+                alert(data.payment.join('\n'));
+            }
+        });
     });
 
     $.tablesorter.addParser({
@@ -39,14 +61,18 @@ django.jQuery(function () {
     });
 
     $.tablesorter.addParser({
-        id: "radio",
+        id: 'payment',
         is: function(s) {
             return false;
         },
         format: function(s, t, node) {
-            return $(node).children("input[type=radio]").is(':checked') ? 1 : 0;
+            var val = $(node).find('select').val();
+            if (val === 'no_payment') {
+                return '';
+            }
+            return $(node).find('select').val();
         },
-        type: "numeric"
+        type: 'text'
     });
 
     $.tablesorter.addParser({

website/events/templates/events/admin/registrations_table.html

@@ -4,6 +4,9 @@
         <thead>
             <tr>
                 <th scope="col">{% trans "name"|capfirst %} <span class="toggle"></span></th>
+                <th scope="col"></th>
+                <th scope="col" class="sorter-payment">{% trans 'payment'|capfirst %} <span class="toggle"></span></th>
+                <th scope="col" class="sorter-checkbox">{% trans "present"|capfirst %} <span class="toggle"></span></th>
                 <th scope="col" class="sorter-date">{% trans "registration date"|capfirst %} <span class="toggle"></span></th>
                 {% if cancellations %}
                 <th scope="col" class="sorter-date">{% trans "cancellation date"|capfirst %} <span class="toggle"></span></th>
@@ -11,10 +14,6 @@
                 {% for field in fields %}
                 <th scope="col">{{ field.name }} <span class="toggle"></span></th>
                 {% endfor %}
-                <th class="sorter-checkbox">{% trans "present"|capfirst %} <span class="toggle"></span></th>
-                <th class="sorter-radio">{% trans "not paid"|capfirst %} <span class="toggle"></span></th>
-                <th class="sorter-radio">{% trans "paid cash"|capfirst %} <span class="toggle"></span></th>
-                <th class="sorter-radio">{% trans "paid card"|capfirst %} <span class="toggle"></span></th>
                 {% if registrations|length > 0 and registrations.0.date_cancelled is not None %}
                     <th>{% trans "late"|capfirst %}</th>
                 {% endif %}
@@ -31,12 +30,30 @@
                 {% if registration.member %}
                 <td>
                   <a href="{{ registration.member.get_absolute_url }}">{{ registration.member.get_full_name }}</a>
+                </td>
+                <td>
                   <a href="tel:{{ registration.member.profile.phone_number }}" title="{{ registration.member.profile.phone_number }}" class="member-phone"></a>
                   <a href="mailto:{{ registration.member.email }}" title="{{ registration.member.email }}" class="member-email"></a>
                 </td>
                 {% else %}
                 <td>{{ registration.name }}</td>
+                <td></td>
                 {% endif %}
+                <td>
+                    <select name="payment"
+                            data-none="{{ payment.NONE }}"
+                            {% if registration.payment and registration.payment.type != payment.NONE %}class="paid"{% endif %}>
+                        <option value="{{ payment.NONE }}"
+                                {% if not registration.payment or registration.payment.type == payment.NONE %}selected{% endif %}>{% trans 'None' %}</option>
+                        <option value="{{ payment.CARD }}"
+                                {% if registration.payment and registration.payment.type == payment.CARD %}selected{% endif %}>{% trans 'Card' %}</option>
+                        <option value="{{ payment.CASH }}"
+                                {% if registration.payment and registration.payment.type == payment.CASH %}selected{% endif %}>{% trans 'Cash' %}</option>
+                        <option value="{{ payment.WIRE }}"
+                                {% if registration.payment and registration.payment.type == payment.WIRE %}selected{% endif %}>{% trans 'Wire' %}</option>
+                    </select>
+                </td>
+                <td class="text-center"><input type="checkbox" {{ registration.present|yesno:'checked="checked",' }} data-id="{{ registration.id }}" class="present-check" /></td>
                 <td data-sortval="{{ registration.date|date:'c' }}">{{ registration.date }}</td>
                 {% if cancellations %}
                 <td data-sortval="{{ registration.date_cancelled|date:'c' }}">{{ registration.date_cancelled }}</td>
@@ -50,12 +67,6 @@
                     <td>{{ field.value }}</td>
                     {% endif %}
                 {% endfor %}
-                <td><input type="checkbox" {{ registration.present|yesno:'checked="checked",' }} data-id="{{ registration.id }}" class="present-check" /></td>
-
-                <td><input type="radio" name="payment-{{ registration.id }}" {% if not registration.payment %}checked="checked"{% endif %} data-value="{{ registration.PAYMENT_NONE }}" data-id="{{ registration.id }}" class="payment-radio" /></td>
-                <td><input type="radio" name="payment-{{ registration.id }}" {% if registration.payment and registration.payment.type == registration.PAYMENT_CASH %}checked="checked"{% endif %} data-value="{{ registration.PAYMENT_CASH }}" data-id="{{ registration.id }}" class="payment-radio" /></td>
-                <td><input type="radio" name="payment-{{ registration.id }}" {% if registration.payment and registration.payment.type == registration.PAYMENT_CARD %}checked="checked"{% endif %} data-value="{{ registration.PAYMENT_CARD }}" data-id="{{ registration.id }}" class="payment-radio" /></td>
-
                 {% if registration.date_cancelled is not None %}
                     <td>{{ registration.is_late_cancellation|yesno }}</td>
                 {% endif %}