Working on the backend interface for supporter registrations

app/assets/javascripts/admin/supporters.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

app/assets/javascripts/application.js

@@ -15,6 +15,7 @@
 //= require jquery-ui
 //= require jquery-fileupload
 //= require jquery-ui-timepicker-addon
+//= require jquery.dataTables
 //= require cocoon
 //= require bootstrap.min
 //= require osem

app/assets/javascripts/osem.js

@@ -79,3 +79,166 @@ function word_count(text, divId, maxcount) {
         $('#' + divId).css('color', '#333');
     }
 };
+
+
+/* Set the defaults for DataTables initialisation */
+$.extend( true, $.fn.dataTable.defaults, {
+    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
+    "sPaginationType": "bootstrap",
+    "oLanguage": {
+        "sLengthMenu": "_MENU_ items per page"
+    }
+} );
+
+/* Default class modification */
+$.extend( $.fn.dataTableExt.oStdClasses, {
+    "sWrapper": "dataTables_wrapper form-inline"
+} );
+
+/* API method to get paging information */
+$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
+{
+    return {
+        "iStart":         oSettings._iDisplayStart,
+        "iEnd":           oSettings.fnDisplayEnd(),
+        "iLength":        oSettings._iDisplayLength,
+        "iTotal":         oSettings.fnRecordsTotal(),
+        "iFilteredTotal": oSettings.fnRecordsDisplay(),
+        "iPage":          oSettings._iDisplayLength === -1 ?
+            0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
+        "iTotalPages":    oSettings._iDisplayLength === -1 ?
+            0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
+    };
+};
+
+$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
+{
+    if ( typeof sNewSource != 'undefined' && sNewSource != null ) {
+        oSettings.sAjaxSource = sNewSource;
+    }
+
+    // Server-side processing should just call fnDraw
+    if ( oSettings.oFeatures.bServerSide ) {
+        this.fnDraw();
+        return;
+    }
+
+    this.oApi._fnProcessingDisplay( oSettings, true );
+    var that = this;
+    var iStart = oSettings._iDisplayStart;
+    var aData = [];
+
+    this.oApi._fnServerParams( oSettings, aData );
+
+    oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
+        /* Clear the old information from the table */
+        that.oApi._fnClearTable( oSettings );
+
+        /* Got the data - add it to the table */
+        var aData =  (oSettings.sAjaxDataProp !== "") ?
+            that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;
+
+        for ( var i=0 ; i<aData.length ; i++ )
+        {
+            that.oApi._fnAddData( oSettings, aData[i] );
+        }
+
+        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
+
+        if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
+        {
+            oSettings._iDisplayStart = iStart;
+            that.fnDraw( false );
+        }
+        else
+        {
+            that.fnDraw();
+        }
+
+        that.oApi._fnProcessingDisplay( oSettings, false );
+
+        /* Callback user function - for event handlers etc */
+        if ( typeof fnCallback == 'function' && fnCallback != null )
+        {
+            fnCallback( oSettings );
+        }
+    }, oSettings );
+};
+
+/* Bootstrap style pagination control */
+$.extend( $.fn.dataTableExt.oPagination, {
+    "bootstrap": {
+        "fnInit": function( oSettings, nPaging, fnDraw ) {
+            var oLang = oSettings.oLanguage.oPaginate;
+            var fnClickHandler = function ( e ) {
+                e.preventDefault();
+                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
+                    fnDraw( oSettings );
+                }
+            };
+
+            $(nPaging).addClass('pagination').append(
+                '<ul>'+
+                    '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
+                    '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
+                    '</ul>'
+            );
+            var els = $('a', nPaging);
+            $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
+            $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
+        },
+
+        "fnUpdate": function ( oSettings, fnDraw ) {
+            var iListLength = 5;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+            var an = oSettings.aanFeatures.p;
+            var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
+
+            if ( oPaging.iTotalPages < iListLength) {
+                iStart = 1;
+                iEnd = oPaging.iTotalPages;
+            }
+            else if ( oPaging.iPage <= iHalf ) {
+                iStart = 1;
+                iEnd = iListLength;
+            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
+                iStart = oPaging.iTotalPages - iListLength + 1;
+                iEnd = oPaging.iTotalPages;
+            } else {
+                iStart = oPaging.iPage - iHalf + 1;
+                iEnd = iStart + iListLength - 1;
+            }
+
+            for ( i=0, ien=an.length ; i<ien ; i++ ) {
+                // Remove the middle elements
+                $('li:gt(0)', an[i]).filter(':not(:last)').remove();
+
+                // Add the new list items and their event handlers
+                for ( j=iStart ; j<=iEnd ; j++ ) {
+                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
+                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')
+                        .insertBefore( $('li:last', an[i])[0] )
+                        .bind('click', function (e) {
+                            e.preventDefault();
+                            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
+                            fnDraw( oSettings );
+                        } );
+                }
+
+                // Add / remove disabled classes from the static elements
+                if ( oPaging.iPage === 0 ) {
+                    $('li:first', an[i]).addClass('disabled');
+                } else {
+                    $('li:first', an[i]).removeClass('disabled');
+                }
+
+                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
+                    $('li:last', an[i]).addClass('disabled');
+                } else {
+                    $('li:last', an[i]).removeClass('disabled');
+                }
+            }
+        }
+    }
+} );
+

app/assets/stylesheets/admin/supporters.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the admin/supporters controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/application.css

@@ -5,4 +5,5 @@
  *= require jquery-ui-1.9.2.custom
  *= require jquery.fileupload-ui
  *= require jquery-ui-timepicker-addon
+ *= require jquery.dataTables_themeroller
 */

app/assets/stylesheets/jquery.dataTables_themeroller.css

@@ -0,0 +1,244 @@
+
+
+/*
+ * Table
+ */
+table.dataTable {
+	margin: 0 auto;
+	clear: both;
+	width: 100%;
+	border-collapse: collapse;
+}
+
+table.dataTable thead th {
+	padding: 3px 0px 3px 10px;
+	cursor: pointer;
+	*cursor: hand;
+}
+
+table.dataTable tfoot th {
+	padding: 3px 10px;
+}
+
+table.dataTable td {
+	padding: 3px 10px;
+}
+
+table.dataTable td.center,
+table.dataTable td.dataTables_empty {
+	text-align: center;
+}
+
+table.dataTable tr.odd { background-color: #E2E4FF; }
+table.dataTable tr.even { background-color: white; }
+
+table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
+table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
+table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
+table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
+table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
+table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }
+
+
+/*
+ * Table wrapper
+ */
+.dataTables_wrapper {
+	position: relative;
+	clear: both;
+	*zoom: 1;
+}
+.dataTables_wrapper .ui-widget-header {
+	font-weight: normal;
+}
+.dataTables_wrapper .ui-toolbar {
+	padding: 5px;
+}
+
+
+/*
+ * Page length menu
+ */
+.dataTables_length {
+	float: left;
+}
+
+
+/*
+ * Filter
+ */
+.dataTables_filter {
+	float: right;
+	text-align: right;
+}
+
+
+/*
+ * Table information
+ */
+.dataTables_info {
+	padding-top: 3px;
+	clear: both;
+	float: left;
+}
+
+
+/*
+ * Pagination
+ */
+.dataTables_paginate {
+	float: right;
+	text-align: right;
+}
+
+.dataTables_paginate .ui-button {
+	margin-right: -0.1em !important;
+}
+
+.paging_two_button .ui-button {
+	float: left;
+	cursor: pointer;
+	* cursor: hand;
+}
+
+.paging_full_numbers .ui-button {
+	padding: 2px 6px;
+	margin: 0;
+	cursor: pointer;
+	* cursor: hand;
+	color: #333 !important;
+}
+
+/* Two button pagination - previous / next */
+.paginate_disabled_previous,
+.paginate_enabled_previous,
+.paginate_disabled_next,
+.paginate_enabled_next {
+	height: 19px;
+	float: left;
+	cursor: pointer;
+	*cursor: hand;
+	color: #111 !important;
+}
+.paginate_disabled_previous:hover,
+.paginate_enabled_previous:hover,
+.paginate_disabled_next:hover,
+.paginate_enabled_next:hover {
+	text-decoration: none !important;
+}
+.paginate_disabled_previous:active,
+.paginate_enabled_previous:active,
+.paginate_disabled_next:active,
+.paginate_enabled_next:active {
+	outline: none;
+}
+
+.paginate_disabled_previous,
+.paginate_disabled_next {
+	color: #666 !important;
+}
+.paginate_disabled_previous,
+.paginate_enabled_previous {
+	padding-left: 23px;
+}
+.paginate_disabled_next,
+.paginate_enabled_next {
+	padding-right: 23px;
+	margin-left: 10px;
+}
+
+.paginate_enabled_previous { background: url('../images/back_enabled.png') no-repeat top left; }
+.paginate_enabled_previous:hover { background: url('../images/back_enabled_hover.png') no-repeat top left; }
+.paginate_disabled_previous { background: url('../images/back_disabled.png') no-repeat top left; }
+
+.paginate_enabled_next { background: url('../images/forward_enabled.png') no-repeat top right; }
+.paginate_enabled_next:hover { background: url('../images/forward_enabled_hover.png') no-repeat top right; }
+.paginate_disabled_next { background: url('../images/forward_disabled.png') no-repeat top right; }
+
+/* Full number pagination */
+.paging_full_numbers a:active {
+	outline: none
+}
+.paging_full_numbers a:hover {
+	text-decoration: none;
+}
+
+.paging_full_numbers a.paginate_button,
+.paging_full_numbers a.paginate_active {
+	border: 1px solid #aaa;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	padding: 2px 5px;
+	margin: 0 3px;
+	cursor: pointer;
+	*cursor: hand;
+	color: #333 !important;
+}
+
+.paging_full_numbers a.paginate_button {
+	background-color: #ddd;
+}
+
+.paging_full_numbers a.paginate_button:hover {
+	background-color: #ccc;
+	text-decoration: none !important;
+}
+
+.paging_full_numbers a.paginate_active {
+	background-color: #99B3FF;
+}
+
+
+/*
+ * Processing indicator
+ */
+.dataTables_processing {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 250px;
+	height: 30px;
+	margin-left: -125px;
+	margin-top: -15px;
+	padding: 14px 0 2px 0;
+	border: 1px solid #ddd;
+	text-align: center;
+	color: #999;
+	font-size: 14px;
+	background-color: white;
+}
+
+
+/*
+ * Sorting
+ */
+table.dataTable thead th div.DataTables_sort_wrapper {
+	position: relative;
+	padding-right: 20px;
+}
+
+table.dataTable thead th div.DataTables_sort_wrapper span {
+	position: absolute;
+	top: 50%;
+	margin-top: -8px;
+	right: 0;
+}
+
+table.dataTable th:active {
+	outline: none;
+}
+
+
+/*
+ * Scrolling
+ */
+.dataTables_scroll {
+	clear: both;
+}
+
+.dataTables_scrollBody {
+	*margin-top: -1px;
+	-webkit-overflow-scrolling: touch;
+}
+

app/assets/stylesheets/osem.css

@@ -76,4 +76,80 @@ textarea {
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */
     width:100%;
-}
+}
+
+div.dataTables_length label {
+    float: left;
+    text-align: left;
+}
+
+div.dataTables_length select {
+    width: 75px;
+}
+
+div.dataTables_filter label {
+    float: right;
+}
+
+div.dataTables_info {
+    padding-top: 8px;
+}
+
+div.dataTables_paginate {
+    float: right;
+    margin: 0;
+}
+
+table.table {
+    clear: both;
+    margin-bottom: 6px !important;
+    max-width: none !important;
+}
+
+table.table thead .sorting,
+table.table thead .sorting_asc,
+table.table thead .sorting_desc,
+table.table thead .sorting_asc_disabled,
+table.table thead .sorting_desc_disabled {
+    cursor: pointer;
+    *cursor: hand;
+}
+
+table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; }
+table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; }
+table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; }
+
+table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; }
+table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; }
+
+table.dataTable th:active {
+    outline: none;
+}
+
+/* Scrolling */
+div.dataTables_scrollHead table {
+    margin-bottom: 0 !important;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+div.dataTables_scrollHead table thead tr:last-child th:first-child,
+div.dataTables_scrollHead table thead tr:last-child td:first-child {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+div.dataTables_scrollBody table {
+    border-top: none;
+    margin-bottom: 0 !important;
+}
+
+div.dataTables_scrollBody tbody tr:first-child th,
+div.dataTables_scrollBody tbody tr:first-child td {
+    border-top: none;
+}
+
+div.dataTables_scrollFoot table {
+    border-top: none;
+}
+

app/controllers/admin/supporters_controller.rb

@@ -0,0 +1,19 @@
+class Admin::SupportersController < ApplicationController
+  before_filter :verify_organizer
+  layout "admin"
+
+  def index
+    respond_to do |format|
+      format.html
+      format.json { render json: DatatableSupporters.new(@conference.supporter_registrations, view_context) }
+    end
+  end
+
+  def create
+    params[:supporter_registration][:conference_id] = @conference.id
+    supporter = SupporterRegistration.create!(params[:supporter_registration])
+    flash[:notice] = "Supporter added"
+    render :json => {"status" => "ok"}
+
+  end
+end

app/controllers/conference_registration_controller.rb

@@ -12,7 +12,7 @@ class ConferenceRegistrationController < ApplicationController
       @registration = @person.registrations.new(:conference_id => @conference.id)
     end
 
-    @registration.supporter_registration ||= SupporterRegistration.new
+    @registration.supporter_registration ||= SupporterRegistration.new(:conference_id => @conference.id)
   end
 
   # TODO this is ugly
@@ -26,6 +26,7 @@ class ConferenceRegistrationController < ApplicationController
         update_registration = false
         person.update_attributes(params[:registration][:person_attributes])
         params[:registration].delete :person_attributes
+        params[:registration][:supporter_registration_attributes]["conference_id"] = conference.id
         registration = person.registrations.new(params[:registration])
         registration.conference_id = conference.id
         registration.save!

app/helpers/admin/supporters_helper.rb

@@ -0,0 +1,2 @@
+module Admin::SupportersHelper
+end

app/models/conference.rb

@@ -8,6 +8,7 @@ class Conference < ActiveRecord::Base
 
   has_one :email_settings, :dependent => :destroy
   has_one :call_for_papers, :dependent => :destroy
+  has_many :supporter_registrations, :dependent => :destroy
   has_many :supporter_levels, :dependent => :destroy
   has_many :dietary_choices, :dependent => :destroy
   has_many :events, :dependent => :destroy

app/models/datatable.rb

@@ -0,0 +1,99 @@
+# derived from http://railscasts.com/episodes/340-datatables
+# handles server side multi-column searching and sorting
+
+class Datatable
+  delegate :params, :h, :raw, :link_to, :number_to_currency, to: :@view
+
+  def initialize(klass, view)
+    @klass = klass
+    @view = view
+  end
+
+  def as_json(options = {})
+    {
+        sEcho: params[:sEcho].to_i,
+        iTotalRecords: @klass.count,
+        iTotalDisplayRecords: items.total_entries,
+        aaData: data
+    }
+  end
+
+
+  def data
+    []
+  end
+
+  def columns
+    []
+  end
+
+  private
+
+  def items
+    @items ||= fetch_items
+  end
+
+  def fetch_items
+    items = filtered_list
+    items = selected_columns(items)
+    items = items.order(sort_order)
+    items = items.page(page).per_page(per_page)
+    if params[:sSearch].present?
+      items = items.where(quick_search)
+    end
+    items
+  end
+
+  def filtered_list
+    @klass.scoped
+  end
+
+  def selected_columns items
+    items
+  end
+
+  def quick_search
+    search_for = params[:sSearch].split(' ')
+    terms = {}
+    which_one = -1
+    criteria = search_for.inject([]) do |criteria,atom|
+      which_one += 1
+      terms["search#{which_one}".to_sym] = "%#{atom}%"
+      criteria << "(#{search_cols.map{|col| "#{col} like :search#{which_one}"}.join(' or ')})"
+    end.join(' and ')
+    [criteria, terms]
+  end
+
+  def page
+    params[:iDisplayStart].to_i/per_page + 1
+  end
+
+  def per_page
+    params[:iDisplayLength].to_i > 0 ? params[:iDisplayLength].to_i : 10
+  end
+
+  def sort_order
+    colnum = 0
+    sort_by = []
+    while true
+      break if !sorted?(colnum)
+      sort_by << "#{sort_column(colnum)} #{sort_direction(colnum)}"
+      colnum += 1
+    end
+    sort_by.join(", ")
+  end
+
+  def sorted? index=0
+    !params["iSortCol_#{index}"].nil?
+  end
+
+  def sort_column index=0
+    index = "iSortCol_#{index}"
+    columns[params[index].to_i]
+  end
+
+  def sort_direction index=0
+    index = "sSortDir_#{index}"
+    params[index] == "desc" ? "desc" : "asc"
+  end
+end

app/models/datatable_supporters.rb

@@ -0,0 +1,30 @@
+class DatatableSupporters < Datatable
+  def data
+    arr = []
+    items.each do |i|
+      item = []
+      if i.name.blank?
+        item << i.registration.person.public_name
+      else
+        item << i.name
+      end
+
+      if i.email.blank?
+        item << i.registration.person.email
+      else
+        item << i.email
+      end
+
+      item << i.supporter_level.title
+      item << i.code
+      item << i.code_is_valid
+      arr << item
+    end
+
+    arr
+  end
+
+  def columns
+    ["name", "email", "name", "name", "name"]
+  end
+end

app/models/supporter_registration.rb

@@ -2,5 +2,6 @@ class SupporterRegistration < ActiveRecord::Base
   belongs_to :supporter_level
   belongs_to :registration
 
-  attr_accessible :registration, :supporter_level_id, :code, :code_is_valid
+  attr_accessible :registration, :supporter_level_id, :name, :email, :supporter_level, :code, :code_is_valid, :conference_id
+
 end

app/views/admin/supporters/index.html.haml

@@ -0,0 +1,60 @@
+#new-supporter-dialog
+  = semantic_form_for :supporter_registration, :remote => true, :html => {:id => "supporter-add-form"}  do |f|
+    = f.input :name, :label => "Supporter Name"
+    = f.input :email, :label => "Supporter Email"
+    = f.input :supporter_level_id, :as => :select, :collection => @conference.supporter_levels
+    = f.input :code, :label => "Confirmation code"
+    = f.input :code_is_valid, :as => :boolean, :label => false
+    = f.action :submit, :button_html => { :value => "Save", :class => "btn btn-primary" }
+
+.row-fluid
+  .span12
+    .pull-right{:style=>"margin-top:20px; margin-bottom:20px;"}
+      = link_to "New Supporter", "#", :id => "new-supporter-button", :class => "btn btn-success"
+.row-fluid
+  .span12
+    .well
+      %table.table.table-striped#supporters
+        %thead
+          %th
+            Name
+          %th
+            Email
+          %th
+            Level
+          %th
+            Code
+          %th
+            Code Valid
+        %tbody
+
+:javascript
+  $(document).ready(function() {
+      $('#supporters').dataTable( {
+        "bProcessing": true,
+        "bServerSide": true,
+        sPaginationType: "full_numbers",
+        sAjaxSource: "#{admin_conference_supporters_path(@conference.short_title)}",
+        "aoColumns": [
+        // TODO Disable sorting entirely for now, until issues with joins on the Person are resolved
+              { "bSortable": false },
+              { "bSortable": false },
+              { "bSortable": false },
+              { "bSortable": false },
+              { "bSortable": false },
+            ]
+      } );
+
+      $("#supporter-add-form").live('ajax:error', function(xhr, status, error) {
+        alert('error');
+      })
+      .live('ajax:success', function() {
+        $("#new-supporter-dialog").dialog("close");
+        $("#supporters").dataTable().fnReloadAjax();
+        $("#flash-bar").html("<div class='alert alert-success'><a href='#' class='close' data-dismiss='alert'> ×</a>Supporter added.</div>");
+      });
+      $("#new-supporter-dialog").hide();
+      $("#new-supporter-button").click(function(event) {
+        $("#new-supporter-dialog").dialog();
+      });
+  } );

app/views/layouts/_admin_navigation.html.haml

@@ -10,6 +10,13 @@
     - else
       %li
         = link_to "Registrations", admin_conference_registrations_path(@conference.short_title)
+    - if current_page?(admin_conference_supporters_path(@conference.short_title))
+      %li.active
+        = link_to "Supporters", "#"
+    - else
+      %li
+        = link_to "Supporters", admin_conference_supporters_path(@conference.short_title)
+
     - if current_page?(admin_conference_events_path(@conference.short_title))
       %li.active
         = link_to "Events", "#"

app/views/layouts/admin.html.haml

@@ -20,7 +20,7 @@
         #wrap
           #inner-content
             .row-fluid
-              .span12
+              .span12#flash-bar
                 = render 'layouts/messages'
             .row-fluid
               .span12