osem-fcy/app/views/admin/registrations/index.html.haml

.row
  .col-md-12
    .page-header
      %h1
        Registrations
        = "(#{@registrations.length})" if @registrations
        .btn-group.pull-right
          - if can? :read, Registration
            = link_to 'Export CSV', { format: :csv }, class: 'btn btn-success'
            = link_to 'Export PDF', { format: :pdf }, class: 'btn btn-success'
            = link_to 'Export XLS', { format: :xlsx }, class: 'btn btn-success'
      %p.text-muted
        All the people who registered to your event
  .col-md-4
    = render 'donut_chart', title: 'Affiliation',
      combined_data: @affiliation_distribution
  - unless @conference.pending?
    .col-md-4
      = render 'donut_chart', title: 'Attended registrations',
        combined_data: @registration_distribution
.row
  .col-md-12
    %div.margin-event-table
      %table.datatable#registrations{ data: { source: admin_conference_registrations_path(conference_id: @conference, format: :json) } }
        %thead
          %tr
            %th{ width: '0' } ID#
            %th{ width: '25%' } Name
            %th{ width: '0' } Roles
            %th{ width: '0' } E-Mail
            %th{ width: '0' }
              %abbr{ title: 'Code of Conduct' } CoC
            %th{ width: '0' } Arrival
            %th{ width: '0' } Departure
            %th{ width: '0' } Actions
        %tbody

:javascript
  $(function () {
    var codeOfConductPresent = #{@code_of_conduct ? 'true' : 'false'};
    var registrationsDataTable = $('#registrations.datatable').DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": $('#registrations.datatable').data('source'),
      "drawCallback": function(settings) {
        checkboxSwitch("[class='switch-checkbox']");
        if (codeOfConductPresent) {
          iconize("td.code-of-conduct", "true", "check", "accepted");
          iconize("td.code-of-conduct", "false", "exclamation-circle", "Has not accepted Code of Conduct");
        };
        // truncatify("td.truncate");
      },
      "columns": [
        {
          "data": "id"
        },
        {
          "data": "name",
          "className": "truncate",
          "render": function(data, type, row) {
            var content = '<span data-toggle="tooltip" title="' + data + '">' + data + '</span><br/>';
            $.each(row.roles, function(index, role){
              content += ' <span class="label label-info">' + role + '</span>'
            });
            return content;
          }
        },
        {
          "name": "roles",
          "data": "roles",
          "className": "truncate",
          "render": function(data, type, row) {
            return data.join(', ');
          }
        },
        {
          "data": "email"
        },
        {
          "data": "accepted_code_of_conduct",
          "className": "code-of-conduct text-center",
          "searchable": false
        },
        {
          "data": "arrival",
          "searchable": false,
          "render": function(data, type, row) {
            if (data) { return moment(data).format('ll LT'); }
            return '';
          }
        },
        {
          "data": "departure",
          "searchable": false,
          "render": function(data, type, row) {
            if (data) { return moment(data).format('ll LT'); }
            return '';
          }
        },
        {
          "data": null,
          "className": "actions",
          "searchable": false,
          "sortable": false,
          "render":    function (data, type, row, meta) {
            return '<div class="btn-group">'+
                   '<a class="btn-primary" href="'+data.edit_url+'">Edit</a>'+
                   '</div>';
          }
        }
      ]
    });

    registrationsDataTable.columns(3).visible(codeOfConductPresent);
    registrationsDataTable.columns(2).visible(false);
  });