diff --git a/app/assets/javascripts/transactions.js b/app/assets/javascripts/transactions.js index 5d578e4..e586b47 100644 --- a/app/assets/javascripts/transactions.js +++ b/app/assets/javascripts/transactions.js @@ -4,6 +4,7 @@ ready = function() { errors = $("#transaction_errors") panel_ul = $(errors).find(".panel-body ul") flash_success = $("#transaction_success") + var table = $('#transactions').DataTable({ processing: true, serverSide: true, @@ -60,6 +61,14 @@ ready = function() { }); }); + // filters + filters = $("#transactions-filters"); + filters_body = filters.find(".panel-body"); + filters.find(".panel-heading").click( function() { + filters_body.slideToggle(); + }); + filters_body.hide(); + $(form).on("ajax:before", function(xhr, settings) { $(flash_success).addClass("hidden") $(submit_button).val("Processing") diff --git a/app/assets/stylesheets/users.css.scss b/app/assets/stylesheets/users.css.scss index be7c631..ca2d83d 100644 --- a/app/assets/stylesheets/users.css.scss +++ b/app/assets/stylesheets/users.css.scss @@ -30,7 +30,10 @@ table.pure-table-striped { } } -.data-table-filters { +#transactions-filters { + .panel-heading { + cursor: pointer; + } .row { padding: 10px; padding-top: 20px; diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index f0dddc6..4e831e5 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -2,46 +2,55 @@ = render 'transactions/new' -.panel.panel-default.data-table-filters +#transactions-filters.panel.panel-default .panel-heading %h3.panel-title Filters .panel-body .row .col-md-8.col-md-offset-2 - .bound.input-listen{ 'data-input-type': 'date-range', 'data-filter-name': 'Time' } + .bound.input-listen{ 'data-input-type': 'date-range', + 'data-filter-name': 'Time' } .row .col-md-6 .input-group %span.input-group-addon %span.glyphicon.glyphicon-calendar - %input.lower-bound.form-control.filter-align{type: 'date', placeholder: 'After', class: 'pure-group-addon'} + %input.lower-bound.form-control.filter-align{type: 'date', + placeholder: 'After', class: 'pure-group-addon'} .col-md-6 .input-group %span.input-group-addon %span.glyphicon.glyphicon-calendar - %input.upper-bound.form-control.filter-align{type: 'date', placeholder: 'Before', class: 'pure-group-addon'} - .bound.input-listen.pure-u-1{ 'data-input-type': 'number-range', 'data-filter-name': 'Amount' } + %input.upper-bound.form-control.filter-align{type: 'date', + placeholder: 'Before', class: 'pure-group-addon'} + .bound.input-listen.pure-u-1{ 'data-input-type': 'number-range', + 'data-filter-name': 'Amount' } .row .col-md-6 .input-group %span.input-group-addon %span.glyphicon.glyphicon-euro - %input.lower-bound.form-control.filter-align{type: 'number', placeholder: 'Minimum'} + %input.lower-bound.form-control.filter-align{type: 'number', + placeholder: 'Minimum'} .col-md-6 .input-group %span.input-group-addon %span.glyphicon.glyphicon-euro - %input.upper-bound.form-control.filter-align{type: 'number', placeholder: 'Maximum'} + %input.upper-bound.form-control.filter-align{type: 'number', + placeholder: 'Maximum'} .row .col-md-4 .input-listen{ 'data-input-type': 'text', 'data-filter-name': 'Issuer' } - %input{type: 'text', placeholder: 'Filter on Issuer', class: "form-control" } + %input{type: 'text', placeholder: 'Filter on Issuer', + class: "form-control" } .col-md-4 .input-listen{ 'data-input-type': 'text', 'data-filter-name': 'Peer' } - %input{type: 'text', placeholder: 'Filter on Peer', class: "form-control" } + %input{type: 'text', placeholder: 'Filter on Peer', + class: "form-control" } .col-md-4 .input-listen{ 'data-input-type': 'text', 'data-filter-name': 'Message' } - %input{type: 'text', placeholder: 'Filter on Message', class: "form-control" } + %input{type: 'text', placeholder: 'Filter on Message', + class: "form-control" } %table#transactions.pure-table.pure-table-striped{data: { source: user_path(@user) }} %thead