var IndexTable = function(params) { this.init(params); } IndexTable.prototype = { //============================================================================ // Required parameters //============================================================================ form_authenticity_token: false, // Base URL used for default refresh/update/delete/bulk URLs base_url: false, // Where to get json data for all the models refresh_url: false, // Where to send bulk updates bulk_update_url: false, // Where to send bulk deletes bulk_delete_url: false, // When to send bulk import CSV data bulk_import_url: false, // Where to post new models add_url: false, after_add: 'refresh', // or 'redirect' // Array of fields you want to show in the table (given as model binder attributes with additional text and value functions) // [{ // show: true, // bulk_edit: true, // name: 'title', // nice_name: 'Title', // type: 'text', // text: function(obj) { return obj.title; }, // value: function(obj) { return obj.id; }, // options_url: '/admin/dogs/collar-options' // fixed_placeholder: false, // width: 200, // }] fields: [], //============================================================================ // Additional parameters //============================================================================ // Container for the table container: 'models', // Where to get json data for a single model refresh_single_url: function(model_id, it) { return it.base_url + '/' + model_id + '/json'; }, // Where to send normal updates update_url: function(model_id, it) { return it.base_url + '/' + model_id; }, // Where to send duplicate calls duplicate_url: function(model_id, it) { return it.base_url + '/' + model_id + '/duplicate'; }, // What to do when the edit button is clicked for a model edit_click_handler: function(model_id, it) { window.location = it.base_url + '/' + model_id; }, // What to do when a row is click. Default is quick edit mode. row_click_handler: function(model_id, it, e) { if (it.quick_edit_model_id == model_id) { if ($(e.target).prop('tagName') == 'TD') it.quick_edit_model_id = false; else return; } else it.quick_edit_model_id = model_id; it.print(); }, allow_add: true, allow_bulk_edit: true, allow_bulk_delete: true, allow_bulk_import: true, allow_duplicate: true, allow_advanced_edit: true, bulk_import_fields: false, no_models_text: "There are no models right now.", new_model_text: 'New', new_model_fields: [{ name: 'name', nice_name: 'Name', type: 'text', width: 400 }], search_fields: false, custom_row_controls: false, after_print: false, table_class: 'data', allow_export: false, exports: false, // Example: // [ // { // name: 'My Export', // url: '', // wait_for_processing: true, // status_url: function(resp) { return resp.status_url; }, // ready: function(resp) { return resp.redirect_url; } // } // ] //============================================================================ // End of parameters //============================================================================ models: [], // The models we get from the server model_ids: [], // IDs of currently selected models quick_edit_model_id: false, // The id of the model currently being edited pager: { options: { page: 1 }, params: {} }, add_to_url: function(url, str) { if (url.indexOf('?') > -1) { bu = url.split('?'); return bu.shift() + str + '?' + bu.join('?'); } return url + str; }, // Constructor init: function(params) { for (var thing in params) this[thing] = params[thing]; var that = this; if (!this.refresh_url ) this.refresh_url = this.add_to_url(this.base_url, '/json'); if (!this.bulk_update_url ) this.bulk_update_url = this.add_to_url(this.base_url, '/bulk'); if (!this.bulk_delete_url ) this.bulk_delete_url = this.add_to_url(this.base_url, '/bulk'); if (!this.add_url ) this.add_url = this.base_url; $.each(this.fields, function(i, f) { if (f.editable == null) f.editable = true; }); this.init_local_storage(); this.get_visible_columns(); $(window).on('hashchange', function() { that.refresh(); }); this.refresh(); }, parse_querystring: function() { var b = {}; // Get the querystring values a = window.location.search; if (a.length > 0) { a = a.substr(1).split('&'); for (var i=0; i 0) { a = a.substr(1).split('&'); for (var i=0; i 0) //{ // //alert('Testing'); // //window.location = this.pager_url({ base_url: window.location.pathname }).replace('?', '#'); //} }, refresh: function(skip_parse_querystring) { var that = this; if (!skip_parse_querystring) { that.pager = { options: { page: 1 }, params: {}}; that.parse_querystring(); } var $el = $('#' + that.container + '_table_container').length > 0 ? $('#' + that.container + '_table_container') : $('#' + that.container); $el.html("

Refreshing...

"); $.ajax({ url: that.refresh_url, type: 'get', data: that.pager_params(), success: function(resp) { for (var thing in resp['pager']) that.pager[thing] = resp['pager'][thing]; that.models = resp['models']; for (var i=0; iError retrieving data.

"); } }); }, refresh_single: function(model_id) { var that = this; $.ajax({ url: that.refresh_single_url(model_id, that), type: 'get', success: function(resp) { for (var i=0; i').append(that.new_model_link())) // .append($('
').attr('id', that.container + '_new_form_container')) // .append($('

').append(that.no_models_text)); // return; //} var model_count = that.models ? that.models.length : 0; var table = that.no_models_text; var pager_div = ''; if (model_count > 0) { var tbody = $('').append(this.table_headers()); $.each(that.models, function(i, m) { tbody.append(that.table_row(m)); }); table = $('').addClass(that.table_class).css('margin-bottom', '10px').append(tbody); pager_div = this.pager_div(); } if ($('#' + this.container + '_table_container').length > 0) { $('#' + this.container + '_table_container' ).empty().append(table); $('#' + this.container + '_pager' ).empty().append(pager_div); $('#' + this.container + '_toggle_columns' ).show(); $('#' + this.container + '_bulk_delete' ).show(); $('#' + this.container + '_bulk_edit' ).show(); $('#' + this.container + '_duplicate' ).show(); } else { var controls = $('

'); if (this.allow_add ) controls.append($('').attr('type', 'button').attr('id', this.container + '_new' ).val(that.new_model_text ).click(function(e) { that.new_form(); })).append(' '); controls.append($('').attr('type', 'button').attr('id', this.container + '_toggle_columns' ).val('Show/Hide Columns' ).click(function(e) { that.toggle_columns(); })).append(' '); if (this.search_fields ) controls.append($('').attr('type', 'button').attr('id', this.container + '_toggle_search' ).val('Show/Hide Search Form' ).click(function(e) { that.toggle_search_form(); })).append(' '); if (this.allow_bulk_edit ) controls.append($('').attr('type', 'button').attr('id', this.container + '_bulk_edit' ).val('Bulk Edit' ).click(function(e) { that.bulk_edit(); })).append(' '); if (this.allow_bulk_import ) controls.append($('').attr('type', 'button').attr('id', this.container + '_bulk_import' ).val('Import' ).click(function(e) { that.bulk_import(); })).append(' '); if (this.allow_duplicate ) controls.append($('').attr('type', 'button').attr('id', this.container + '_duplicate' ).val('Duplicate' ).click(function(e) { that.duplicate(); })).append(' '); if (this.allow_bulk_delete ) controls.append($('').attr('type', 'button').attr('id', this.container + '_bulk_delete' ).val('Delete' ).click(function(e) { that.bulk_delete(); })).append(' '); if (this.allow_export ) controls.append($('').attr('type', 'button').attr('id', this.container + '_export' ).val('Export' ).click(function(e) { that.csv_export(); })).append(' '); var c = $('#' + that.container); c.empty(); c.append($('

').attr('id', that.container + '_controls').append(controls)); //if (this.search_fields) // c.append(that.search_form()); c.append($('
').attr('id', that.container + '_message')); c.append($('
').attr('id', that.container + '_table_container').append(table)); c.append($('
').attr('id', that.container + '_pager').append(pager_div)); if (model_count == 0) { $('#' + that.container + '_toggle_columns').hide(); $('#' + that.container + '_bulk_edit' ).hide(); $('#' + that.container + '_duplicate' ).hide(); $('#' + that.container + '_bulk_delete' ).hide(); $('#' + that.container + '_pager' ).hide(); } } if (model_count > 0 && that.quick_edit_model_id) { var m = that.model_for_id(that.quick_edit_model_id); $.each(that.fields, function(j, field) { if (field.show && field.editable) { var attrib = $.extend({}, field); attrib['value'] = field.value(m); attrib['fixed_placeholder'] = false; attrib['after_update'] = function() { that.refresh_single(m.id); }; new ModelBinder({ name: 'Model', id: m.id, update_url: that.update_url(that.quick_edit_model_id, that), authenticity_token: that.form_authenticity_token, attributes: [attrib] }); } }); } if (that.after_print) that.after_print(); }, all_models_selected: function() { var that = this; var all_checked = true; $.each(that.models, function(i, m) { if (that.model_ids.indexOf(m.id) == -1) { all_checked = false; return false; } }); return all_checked; }, table_headers: function() { var that = this; var tr = $('
'); if (this.allow_bulk_edit || this.allow_bulk_delete || this.allow_duplicate) { var input = $('').attr('type', 'checkbox').attr('id', that.container + '_check_all').val(1) .change(function() { var checked = $(this).prop('checked'); that.model_ids = []; $.each(that.models, function(i, m) { $('#model_' + m.id).prop('checked', checked); if (checked) that.model_ids.push(m.id); }); }); input.prop('checked', that.all_models_selected()); tr.append($('').attr('id', 'model_row_' + m.id); if (that.highlight_id && that.highlight_id == m.id) tr.addClass('highlight'); if (that.allow_bulk_edit || that.allow_bulk_delete || that.allow_duplicate) { var checkbox = $('').attr('type', 'checkbox').attr('id', 'model_' + m.id) .click(function(e) { e.stopPropagation(); var model_id = $(this).attr('id').replace('model_', ''); if (model_id == 'NaN') alert("Error: invalid model id."); else { model_id = parseInt(model_id); var checked = $(this).prop('checked'); var i = that.model_ids.indexOf(model_id); if (checked && i == -1) that.model_ids.push(model_id); if (!checked && i > -1) that.model_ids.splice(i, 1); } $('#' + that.container + '_check_all').prop('checked', that.all_models_selected()); }); if (that.model_ids.indexOf(m.id) > -1) checkbox.prop('checked', 'true'); tr.append($('
').append(input)); } if (this.allow_advanced_edit) tr.append($('').html(' ')); $.each(this.fields, function(i, field) { if (field.show) { var s = field.sort ? field.sort : field.name; var arrow = that.pager.options.sort == s ? (parseInt(that.pager.options.desc) == 1 ? ' ↑' : ' ↓') : ''; var link = that.pager_hash({ sort: s, desc: (that.pager.options.sort == s ? (parseInt(that.pager.options.desc) == 1 ? '0' : '1') : '0') }); //var input = $('').attr('type', 'checkbox').attr('id', 'quick_edit_' + field.name).val(field.name) // .change(function() { // that.quick_edit_field = $(this).prop('checked') ? $(this).val() : false; // that.refresh(); // }); //if (field.name == that.quick_edit_field) // input.prop('checked', 'true'); tr.append($('') //.append(input).append('
') .append($('') .attr('id', 'quick_edit_' + field.name).val(field.name) .attr('href', link) .data('sort', s) .html(field.nice_name + arrow) ) ); } }); return tr; }, table_row: function(m) { var that = this; var tr = $('
').append(checkbox)); } if (this.allow_advanced_edit) { tr.append($('') .addClass('edit_button') .mouseover(function() { $(this).addClass('edit_button_over'); }) .mouseout( function() { $(this).removeClass('edit_button_over'); }) .click(function(e) { e.stopPropagation(); that.edit_click_handler(m.id, that, e); }) .append($('').addClass('ui-icon ui-icon-pencil')) ); } tr.click(function(e) { var model_id = $(this).attr('id').replace('model_row_', ''); that.row_click_handler(model_id, that, e); }); $.each(that.fields, function(j, field) { if (field.show) { var td = $(''); if (field.editable && that.quick_edit_model_id == m.id) td.append($('
').attr('id', 'model_' + m.id + '_' + field.name)); else td.html(field.text ? field.text(m) : field.value(m)); tr.append(td); } }); return tr; }, column_checkboxes: function() { var that = this; var div = $('
').attr('id', that.container + '_columns').addClass('note'); $.each(this.fields, function(i, field) { var input = $('') .attr('type', 'checkbox') .attr('id', 'field_' + field.name) .click(function(e) { var field_name = $(this).attr('id').replace('field_', ''); var checked = $(this).prop('checked'); $.each(that.fields, function(j, f) { if (f.name == field_name) { f.show = checked; that.print(); } }); that.set_visible_column(field_name, checked); }); if (field.show) input.prop('checked', 'true'); div.append($('
').addClass('label_with_checkbox') .append(input) .append($('