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

import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';

export default class Th extends Component {
    constructor($element, $, $transclude) {
        super($element, $);

        this._order = 'ASC';
        this.column = $element[0];
        $element.on('click', () => this.onToggleOrder());

        $transclude($clone => {
            const text = this.$t($clone.text()); // Not updating translations
            $element.append(text ? text : $clone);
        });
    }

    /**
     * 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', '$scope', '$transclude'];

ngModule.vnComponent('vnTh', {
    transclude: true,
    controller: Th,
    bindings: {
        defaultOrder: '@?'
    },
    require: {
        table: '^^vnTable'
    }
});