kpsul/kfet/static/kfet/js/history.js

class KHistory {

    static get default_options {
        return {
            'templates': {
                'purchase': '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span><span class="addcost"></span><span class="canceled"></span></div>',
                'specialope': '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span><span class="addcost"></span><span class="canceled"></span></div>',
                'opegroup': '<div class="opegroup"><span class="time"></span><span class="trigramme"></span><span class="amount"></span><span class="valid_by"></span><span class="comment"></span></div>',
                'transfergroup': '<div class="opegroup"><span class="time"></span><span class="infos"></span><span class="valid_by"></span><span class="comment"></span></div>',
                'day': '<div class="day"><span class="date"></span></div>',
                'transfer': '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="glyphicon glyphicon-arrow-right"></span><span class="infos2"></span><span class="canceled"></span></div>',
            },

            'api_options': { 
                from: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'), 
            },

        };
    }
    
    constructor(options) {
        var all_options = $.extend({}, this.constructor.default_options, options);

        this.templates = all_options.templates;
        this.api_options = all_options.api_options;

        this._$container = $('#history');
        this._$nb_opes = $('#nb_opes');
        
        this.list = new OperationList();

        if (!all_options.no_select)
            this.selection = new KHistorySelection(this);

        if (all_options.no_trigramme) 
            this.templates['opegroup'] = '<div class="opegroup"><span class="time"></span><span class="amount"></span><span class="valid_by"></span><span class="comment"></span></div>'
 
        this._init_events();
    }

    fetch(api_options) {
        this._$container.html('');
        this.list.clear();

        if (api_options)
            this.api_options = api_options;

        this.list.fromAPI(this.api_options)
            .done( () => this.display() );

    }

    display() {
        this.list.display(this._$container, this.templates, {});
        var nb_opes = this._$container.find('.ope[canceled="false"]').length;
        $('#nb_opes').text(nb_opes);
    }

    _init_events() {
        var that = this;
        $(document).on('keydown', function(e) {
            if (e.keyCode == 46 && that.selection) {
                //DEL key ; we delete the selected operations (if any)
                var to_cancel = that.selection.get_selected();

                if (to_cancel['opes'].length > 0 || to_cancel['transfers'].length > 0)
                    that.cancel_operations(to_cancel);
            }
        });
    }

    cancel_operations(to_cancel) {
        if (window.kpsul) {
            var on_success = kpsul._env.coolReset;
            var focus_next = kpsul;
        } else {
            var on_success = () => this.selection.reset()
            var focus_next = undefined;
        }

        api_with_auth({
            url: Urls['kfet.kpsul.cancel_operations'](),
            data: to_cancel,
            on_success: on_success,
            focus_next: focus_next,
        })
    }

    add_node(data) {
        var node = this.list.get_or_create(data.modelname, data.content, 0);
        this.list.add_to_container(this._$container, node, this.templates);
    }

    update_node(type, id, update_data) {
        var to_update = this.list.find(type, id);
        if (!to_update) 
            return false;

        $.extend(to_update, update_data);
        var $new_elt = to_update.display($(this.templates[type]), {});

        var $to_replace = this._$container.find('#'+type+'-'+id+'>:first-child');
        $to_replace.replaceWith($new_elt);

        return true;
    }

    is_valid(opegroup) {
        var options = this.api_options;

        if (options.from && dateUTCToParis(opegroup.at).isBefore(moment(options.from)))
            return false;

        if (options.to && dateUTCToParis(opegroup.at).isAfter(moment(options.to)))
            return false;

        if (options.transfersonly && opegroup.constructor.verbose_name === 'opegroup')
            return false;

        if (options.accounts && options.accounts.length &&
                options.accounts.indexOf(opegroup.account_id) < 0)
            return false;

        if (options.checkouts && options.checkouts.length && 
                (opegroup.modelname === 'transfergroup' || 
                 options.checkouts.indexOf(opegroup.checkout_id) < 0))
            return false;
            
        return true;
    }

    update_data(data) {
        var opegroups = data['opegroups'];
        var opes = data['opes'];

        for (let ope of opes) {
            if (ope['cancellation']) {
                var update_data = {
                    'canceled_at': ope.canceled_at,
                    'canceled_by': ope.canceled_by,
                };
                if (ope.modelname === 'ope') {
                    this.update_node('purchase', ope.id, update_data)
                    || this.update_node('specialope', ope.id, update_data);
                } else if (ope.modelname === 'transfer') {
                    this.update_node('transfer', ope.id, update_data);
                }
            }
        }

        for (let opegroup of opegroups) {
            if (opegroup['cancellation']) {
                var update_data = { 'amount': opegroup.amount };
                this.update_node('opegroup', opegroup.id, update_data);
            }

            if (opegroup['add'] && this.is_valid(opegroup)) {
                this.add_node(opegroup);            
            }
        }

        var nb_opes = this._$container.find('.ope[canceled="false"]').length;
        $('#nb_opes').text(nb_opes);
    }
}

class KHistorySelection {

    constructor(history) {
        this._$container = history._$container;
        this._init();
    }

    _init() {
        this._$container.selectable({
            filter: 'div.opegroup, div.ope',
            selected: function(e, ui) {
                $(ui.selected).each(function() {
                    if ($(this).hasClass('opegroup')) {
                        $(this).parent().find('.ope').addClass('ui-selected');
                    }
                });
            },
            unselected: function(e, ui) {
                $(ui.unselected).each(function() {
                    if ($(this).hasClass('opegroup')) {
                        $(this).parent().find('.ope').removeClass('ui-selected');
                    }
                });
            },
        });
    }

    get_selected() {
        var selected = {'transfers': [], 'opes': [],};
        this._$container.find('.ope.ui-selected').each(function() {
            var [type, id] = $(this).parent().attr('id').split('-');

            if (type === 'transfer')
                selected['transfers'].push(id);
            else
                selected['opes'].push(id);
        });

        return selected;
    }

    reset() {
        this._$container.find('.ui-selected')
                        .removeClass('.ui-selected');
    }
}