salix/front/core/components/th/index.js

import ngModule from '../../module';

export default class Th {
    constructor($element) {
        this._order = 'ASC';
        this.column = $element[0];
        $element.on('click', () => this.onToggleOrder());
    }

    /**
 * Changes the order if the cell has a field and defaultOrder property
 */
    $onInit() {
        if (!this.field) return;

        if (this.defaultOrder)
            this.order = this.defaultOrder;

        this.updateArrow();
    }

    set order(order) {
        this._order = order;
        this.table.setOrder(this.field, order);
    }

    get order() {
        return this._order;
    }

    get field() {
        return this.column.getAttribute('field');
    }

    /**
 * Toggle order ASC/DESC
 */
    toggleOrder() {
        if (this.order === 'ASC') 
            this.order = 'DESC';
         else 
            this.order = 'ASC';
        
    }

    /**
 * Applies a new filter order to the model and
 * updates the cell arrow
 */
    onToggleOrder() {
        if (!this.field) return;

        if (this.table.field == this.field) 
            this.toggleOrder();
         else 
            this.table.setOrder(this.field, this.order);
        

        this.updateArrow();

        this.table.applyOrder(this.field, this.order);
    }

    /**
 * Set cell class to asc/desc
 */
    updateArrow() {
        this.column.classList.remove('asc', 'desc');

        if (this.order === 'DESC') 
            this.column.classList.add('desc');
         else 
            this.column.classList.add('asc');
        
    }
}

Th.$inject = ['$element'];

ngModule.component('vnTh', {
    template: require('./index.html'),
    transclude: true,
    controller: Th,
    bindings: {
        defaultOrder: '@?'
    },
    require: {
        table: '^^vnTable'
    }
});