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

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

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.vnComponent('vnTh', {
    template: require('./index.html'),
    transclude: true,
    controller: Th,
    bindings: {
        defaultOrder: '@?'
    },
    require: {
        table: '^^vnTable'
    }
});