slickgrid.js 15 KB

Edit Raw Blame History

var slickgrid = {
    loader: new Slick.Data.RemoteModel(
        $dj.ajax_get_page, $dj.ajax_search_index),
    grid: null,
    set_active_when_loaded: null,

    op_names: {
        eq: ["równy", "równa", "równe"],
        ne: ["różny od", "różna od", "różne od"],
        le: ["mniejszy lub równy", "mniejsza lub równa", "mniejsze lub równe"],
        ge: ["większy lub równy", "większa lub równa", "większe lub równe"],
        bw: "zaczyna się od",
        bn: "nie zaczyna się od",
        ew: "kończy się na",
        en: "nie kończy się na",
        cn: "zawiera",
        nc: "nie zawiera",
        re: "pasuje do wzorca",
        nr: "nie pasuje do wzorca"
    },

    search_string: function() {
        "use strict";
        return $('#text-search').val();
    },

    active_id: function() {
        "use strict";
        var cell = slickgrid.grid.getActiveCell();
        if (cell === null || cell === undefined)
            return undefined;
        var row = slickgrid.grid.getActiveCell().row;
        if (row === undefined)
            return undefined;
        if (slickgrid.grid.getDataItem(row) === undefined)
            return undefined;
        return slickgrid.grid.getDataItem(row).id;
    },

    scroll_search: function() {
        "use strict";
        slickgrid.loader.searchRow(slickgrid.search_string(), function (row) {
            slickgrid.set_active_when_loaded = row;
            slickgrid.grid.scrollRowToTop(row);
        });
    },

    search: function() {
        "use strict";
        if ($dj.filtering_mode) {
            slickgrid.loader.setSearch(slickgrid.search_string());
            slickgrid.grid.scrollRowToTop(0);
            slickgrid.ensure_data();
            slickgrid.grid.setActiveCell(0, 0);
        } else {
            slickgrid.scroll_search();
        }
    },

    ensure_data: function() {
        "use strict";
        $('#filter-button').children().first().toggleClass('ui-state-highlight',
            slickgrid.loader.getFilter().rules.length !== 0);
        var vp = slickgrid.grid.getViewport();
        slickgrid.loader.ensureData(vp.top, vp.bottom);
    },

    reload_data: function() {
        "use strict";
        var vp = slickgrid.grid.getViewport();
        slickgrid.loader.reloadData(vp.top, vp.bottom);
    }
};

var options = {
    editable: false,
    enableAddRow: false,
    enableCellNavigation: true
};

function set_columns() {
    "use strict";
    var chosen_column_ids = $('#column-list').val();
    var chosen_columns = columns_from_ids(chosen_column_ids);
    slickgrid.grid.setColumns(chosen_columns);
    slickgrid.grid.autosizeColumns();
    $.ajaxJSON({
        method: 'post',
        url: $dj.ajax_save_columns,
        data: {columns: chosen_column_ids}
    });
}

function columns_from_ids(column_ids) {
    "use strict";
    return $.map(column_ids, function(id) {
        return slickgrid.all_columns[id];
    });
}

function update_filter_row(row) {
    "use strict";
    var field = row.find('.rule-field').val();
    var field_info = slickgrid.filter_fields[field];
    var op_select = $('<select/>').addClass('rule-op');
    var value_input;
    $.each(field_info.ops, function(i, op) {
        var op_name;
        var op_name_info = slickgrid.op_names[op];
        if (typeof op_name_info !== "string") {
            var gender = 'mfn'.indexOf(field_info.gender);
            op_name = op_name_info[gender];
        } else {
            op_name = op_name_info;
        }
        $('<option/>').text(op_name).val(op).appendTo(op_select);
    });
    if (field_info.options) {
        value_input = $('<select/>').addClass('rule-data');
        $.each(field_info.options, function(i, option) {
            $('<option/>').text(option[1]).val(option[0]).appendTo(value_input);
        });
    } else if (field_info.optgroups) {
        value_input = $('<select/>').addClass('rule-data');
        $.each(field_info.optgroups, function(i, optgroup) {
            var group = $('<optgroup/>').attr('label', optgroup[0]);
            $.each(optgroup[1], function(i, option) {
                $('<option/>').text(option[1]).val(option[0]).appendTo(group);
            });
            value_input.append(group);
        });
    } else {
        value_input = $('<input/>').attr('type', 'text');
        value_input.addClass('rule-data');
    }
    row.children().eq(1).empty().append(op_select);
    row.children().eq(2).empty().append(value_input);
}

function add_filter_rule(field) {
    "use strict";
    var filter_table = $('#filter-table');
    var row = $('<tr/>');
    var field_select = $('<select/>').addClass('rule-field');

    $.each(slickgrid.filter_fields, function(id, filter_field) {
        var option = $('<option/>').text(filter_field.name).val(id);
        if (id === field) {
            option.prop('selected', true);
        }
        option.appendTo(field_select);
    });
    $('<td/>').append(field_select).appendTo(row);
    row.append($('<td/>')).append($('<td/>'));
    var remove_button = $('<input/>').attr('type', 'button').val('-')
        .addClass('remove-filter');
    $('<td/>').append(remove_button).appendTo(row);
    update_filter_row(row);
    filter_table.append(row);
    return row;
}

function get_filter() {
    "use strict";
    return {
        group_op: $('#group-op').val(),
        rules: $('#filter-table').find('tr').map(function(i, row) {
            var $row = $(row);
            return {
                'field': $row.find('.rule-field').val(),
                'op': $row.find('.rule-op').val(),
                'data': $row.find('.rule-data').val()
            };
        }).toArray()
    };
}

function save_filter() {
    "use strict";
    var filter_name, post_data;
    filter_name = window.prompt("Wybierz nazwę filtru do zapisania");
    if (filter_name) {
        post_data = {
            name: filter_name,
            serialized_filter: $.toJSON(get_filter())
        };
        var save_filter_data = {
            method: 'post',
            url: $dj.ajax_save_filter,
            data: post_data,
            description: 'Zapisanie filtru'
        };
        $.ajaxJSON($.extend(save_filter_data, {
            callback: function (data) {
                if (data.exists && window.confirm(
                        "Filtr o tej nazwie już istnieje. Nadpisać?")) {
                    $.ajaxJSON($.extend(save_filter_data, {
                        data: $.extend(post_data, {force: true})
                    }));
                }
            }
        }));
    }
    return false;
}

function put_filter(filter) {
    "use strict";
    $('#group-op').val(filter.group_op);
    $('#filter-table').empty();
    $.each(filter.rules, function(i, rule) {
        var row = add_filter_rule(rule.field);
        row.find('.rule-op').val(rule.op);
        row.find('.rule-data').val(rule.data);
    });
}

function filter_choice(ajax_data) {
    "use strict";
    var filters = ajax_data.filters;
    var list = $('#filter-list');
    list.empty();
    $.each(filters, function (i, filter) {
        var item = $('<li/>').addClass('ui-state-default').attr('id', filter.id);
        var delete_button = $('<span/>')
            .addClass('remove ui-icon ui-icon-closethick');
        delete_button.click(function () {
            if (window.confirm('Usunąć filtr "' + filter.name + '"?')) {
                $.ajaxJSON({
                    method: 'post',
                    url: $dj.ajax_delete_filter,
                    data: {id: filter.id},
                    description: 'Usunięcie filtru',
                    callback: function () {
                        item.remove();
                    }
                });
            }
            return false;
        });
        item.append(delete_button);
        item.append(filter.name);
        item.click(function () {
            put_filter($.parseJSON(filter.json));
            $("#load-filter-dialog").dialog('close');
        });
        list.append(item);
    });
    $("#load-filter-dialog").dialog('open');
}

function apply_filter(filter) {
    "use strict";
    $('#text-search').text('');
    slickgrid.loader.setFilter(filter || get_filter());
    slickgrid.set_active_when_loaded = 0;
    slickgrid.grid.scrollRowToTop(0);
    slickgrid.ensure_data();
}

$(function() {
    "use strict";
    var columns = $dj.columns || slickgrid.initial_columns;
    slickgrid.element = $('#' + slickgrid.grid_element_id);
    slickgrid.grid = new Slick.Grid(
        slickgrid.element, slickgrid.loader.data, columns_from_ids(columns),
        options);

    slickgrid.grid.onViewportChanged.subscribe(function (e, args) {
        slickgrid.ensure_data();
    });

    var timeout_handler;
    var last_active_row;
    slickgrid.grid.onActiveCellChanged.subscribe(function(e, cell) {
        if (edit.get_id() === slickgrid.active_id())
            return;
        if (last_active_row !== undefined && edit.changed) {
            if (!window.confirm('Czy chcesz porzucić niezapisane zmiany?')) {
                slickgrid.grid.setActiveCell(last_active_row, 0);
                return;
            }
        }
        last_active_row = cell.row;
        if (cell.row !== undefined) {
            clearTimeout(timeout_handler);
            timeout_handler = setTimeout(function() {
                common.busy_on();
                slickgrid.load_content(slickgrid.active_id());
            }, 500);
        }
    });

    var loadingIndicator = null;
    slickgrid.loader.onDataLoading.subscribe(function () {
        if (!loadingIndicator) {
            loadingIndicator = $(
                "<span class='loading-indicator'><label>Ładowanie..." +
                "</label></span>").appendTo(document.body);
            var $g = slickgrid.element;

            loadingIndicator
                .css("position", "absolute")
                .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2)
                .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2);
        }

        loadingIndicator.show();
    });

    slickgrid.loader.onDataLoaded.subscribe(function (e, args) {
        for (var i = args.from; i <= args.to; i++) {
            slickgrid.grid.invalidateRow(i);
        }

        slickgrid.grid.updateRowCount();
        slickgrid.grid.render();

        loadingIndicator.fadeOut();
        layout.adjust_grid_size();
        var num = slickgrid.grid.getDataLength();
        document.title = slickgrid.grid_caption + ' (' + num + ')';

        // trochę koniecznego syfu...
        var row_to_set = null;
        if (slickgrid.set_active_when_loaded !== null) {
            row_to_set = slickgrid.set_active_when_loaded;
            var cell = slickgrid.grid.getActiveCell();
            if (cell && row_to_set === cell.row)
                row_to_set = null;
            slickgrid.set_active_when_loaded = null;
        } else if (!slickgrid.grid.getActiveCell()) {
            var vp = slickgrid.grid.getViewport();
            row_to_set = vp.top;
        }
        if (row_to_set !== null) {
            slickgrid.grid.setActiveCell(row_to_set, 0);
        } else if (slickgrid.active_id() !== edit.get_id()) {
            common.busy_on();
            slickgrid.load_content(slickgrid.active_id());
        }
    });

    // wyszukiwanie
    var search_timeout_handler;
    $("#text-search").keyup(function (e) {
        if (e.which === 13) {
            slickgrid.search();
        } else if ($dj.auto_search) {
            clearTimeout(search_timeout_handler);
            search_timeout_handler = setTimeout(slickgrid.search, 500);
        }
    });

    if ($dj.filtering_mode) {
        slickgrid.loader.setSearch(slickgrid.search_string());
    }

    $('#search-button').click(slickgrid.search);

    var sort_rules = $dj.sort_rules || slickgrid.initial_sort_rules;

    // sortowanie
    slickgrid.loader.setSort(sort_rules);

    slickgrid.init_sort();

    // filtry
    add_filter_rule(slickgrid.main_field);
    $('#choose-filter-dialog').dialog({
        autoOpen: false,
        width: 'auto',
        modal: false,
        buttons: [
            {
                text: "Czyść",
                click: function() {
                    $('#filter-table').empty();
                    add_filter_rule(slickgrid.main_field);
                    apply_filter({group_op: "AND", rules: []});
                }
            },
            {
                text: "Zapisz filtr",
                click: save_filter
            },
            {
                text: "Załaduj filtr",
                click: function () {
                    $.ajaxJSON({
                        method: 'get',
                        url: $dj.ajax_get_filters,
                        data: {},
                        description: 'Pobranie listy filtrów',
                        callback: filter_choice
                    });
                    return false;
                }
            },
            {
                text: 'Filtruj',
                click: function() {
                    apply_filter();
                }
            }
        ]
    });
    $('#add-filter-button').click(function() {
        add_filter_rule(slickgrid.main_field);
    });
    $(document).on('change', '.rule-field', function() {
        update_filter_row($(this).closest('tr'));
    });
    $(document).on('click', '.remove-filter', function() {
       $(this).closest('tr').remove();
    });

    $('#filter-button').click(function() {
        $('#choose-filter-dialog').dialog('open');
    });

    $(document).on('keyup', '#filter-table input', function (e) {
        if (e.which === 13) { // enter
            $(this).change();
            apply_filter();
        }
    });

    if ($dj.filter && $dj.filter.rules.length > 0) {
        slickgrid.loader.setFilter($dj.filter);
        put_filter($dj.filter);
    }

    // wybór kolumn
    $('#choose-columns-dialog').dialog({
        autoOpen: false,
        width: 'auto',
        modal: true,
        buttons: [
            {
                text: "Anuluj",
                click: function () {
                    $(this).dialog("close");
                }
            },
            {
                text: "Zatwierdź",
                click: function() {
                    set_columns();
                    $(this).dialog("close");
                }
            }
        ]
    });
    var column_list = $('#column-list');
    $('#show-columns-button').click(function() {
        $('#choose-columns-dialog').dialog('open');
        column_list.multiselect('refresh');
    });
    function add_column_option(column, selected) {
        var option = $('<option/>');
        option.attr('value', column.id);
        option.prop('selected', selected);
        option.text(column.name);
        column_list.append(option);
    }
    $.each(columns, function(i, column) {
        add_column_option(slickgrid.all_columns[column], true);
    });
    $.each(slickgrid.all_columns, function(id, column) {
        if (columns.indexOf(id) === -1)
            add_column_option(column, false);
    });
    column_list.multiselect({
        sortable: true
    });

    // load the first page
    slickgrid.grid.onViewportChanged.notify();

    layout.adjust_tabs();
});