salix/modules/order/front/catalog/index.js

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

class Controller {
    constructor($http, $scope, $state, $compile, $transitions) {
        this.$http = $http;
        this.$ = $scope;
        this.$state = $state;
        this.$stateParams = $state.params;
        this.$compile = $compile;
        this.$transitions = $transitions;
        this.itemTypes = [];
        this.tags = [];

        // Static autocomplete data
        this.orderWays = [
            {way: 'ASC', name: 'Ascendant'},
            {way: 'DESC', name: 'Descendant'},
        ];
        this.defaultOrderFields = [
            {field: 'relevancy DESC, name', name: 'Relevancy'},
            {field: 'showOrder, price', name: 'Color'},
            {field: 'name', name: 'Name'},
            {field: 'price', name: 'Price'}
        ];
        this.orderFields = [].concat(this.defaultOrderFields);
        this._orderWay = this.orderWays[0].way;
        this.orderField = this.orderFields[0].field;
    }

    $onChanges() {
        if (this.order && this.order.isConfirmed)
            this.$state.go('order.card.line');
    }

    /**
     * Fills order autocomplete with tags
     * obtained from last filtered
     */
    get order() {
        return this._order;
    }

    /**
     * Sets filter values from state params
     *
     * @param {Object} value - Order data
     */
    set order(value) {
        this._order = value;

        if (!value) return;

        this.$.$applyAsync(() => {
            if (this.$stateParams.categoryId)
                this.categoryId = this.$stateParams.categoryId;

            if (this.$stateParams.typeId)
                this.typeId = this.$stateParams.typeId;
        });
    }

    get items() {
        return this._items;
    }

    set items(value) {
        this._items = value;

        if (!value) return;

        const newFilterList = [];
        value.forEach(item => {
            // Add new tag filters
            item.tags.forEach(itemTag => {
                const alreadyAdded = newFilterList.findIndex(filter => {
                    return filter.field == itemTag.tagFk;
                });

                if (alreadyAdded == -1) {
                    newFilterList.push({
                        name: itemTag.name,
                        field: itemTag.tagFk,
                        isTag: true
                    });
                }
            });
        });

        // Add default filters - Replaces tags with same name
        this.defaultOrderFields.forEach(orderField => {
            const index = newFilterList.findIndex(newfield => {
                return newfield.name == orderField.name;
            });

            if (index > -1)
                newFilterList[index] = orderField;
            else
                newFilterList.push(orderField);
        });

        this.orderFields = newFilterList;
    }

    get categoryId() {
        return this._categoryId;
    }

    set categoryId(value) {
        if (!value) value = null;

        this._categoryId = value;
        this.itemTypes = [];
        this.typeId = null;

        this.updateStateParams();

        if (this.tags.length > 0)
            this.applyFilters();

        if (value)
            this.updateItemTypes();
    }

    changeCategory(id) {
        if (this._categoryId == id) id = null;
        this.categoryId = id;
    }

    get typeId() {
        return this._typeId;
    }

    set typeId(value) {
        this._typeId = value;

        this.updateStateParams();

        if (value || this.tags.length > 0)
            this.applyFilters();
    }

    /**
     * Get order way ASC/DESC
     */
    get orderWay() {
        return this._orderWay;
    }

    set orderWay(value) {
        this._orderWay = value;
        if (value) this.applyOrder();
    }

    /**
     * Returns the order way selection
     */
    get orderSelection() {
        return this._orderSelection;
    }

    set orderSelection(value) {
        this._orderSelection = value;

        if (value) this.applyOrder();
    }

    /**
     * Apply order to model
     */
    applyOrder() {
        if (this.typeId || this.tags.length > 0)
            this.$.model.addFilter(null, {orderBy: this.getOrderBy()});
    }

    /**
     * Returns order param
     *
     * @return {Object} - Order param
     */
    getOrderBy() {
        const isTag = !!(this.orderSelection && this.orderSelection.isTag);
        return {
            field: this.orderField,
            way: this.orderWay,
            isTag: isTag
        };
    }

    /**
     * Refreshes item type dropdown data
     */
    updateItemTypes() {
        let params = {
            itemCategoryId: this.categoryId
        };

        const query = `Orders/${this.order.id}/getItemTypeAvailable`;
        this.$http.get(query, {params}).then(res =>
            this.itemTypes = res.data);
    }

    onSearchById(event) {
        const hasValue = this.tags.length > 0 || this.itemId || this.typeId;
        if (event.key === 'Enter' && hasValue)
            this.applyFilters();
    }

    onSearchByTag(event) {
        if (event.key !== 'Enter' || !this.value) return;
        this.tags.push({
            value: this.value,
        });
        this.$.search.value = null;
        this.applyFilters();
    }

    remove(index) {
        this.tags.splice(index, 1);

        if (this.tags.length >= 0 || this.itemId || this.typeId)
            this.applyFilters();
    }

    applyFilters() {
        let newParams = {};
        let newFilter = {};
        const model = this.$.model;

        if (this.categoryId)
            newFilter.categoryFk = this.categoryId;

        if (this.typeId)
            newFilter.typeFk = this.typeId;

        if (this.itemId)
            newFilter = {'i.id': this.itemId};

        newParams = {
            orderFk: this.order.id,
            orderBy: this.getOrderBy(),
            tags: this.tags,
        };

        model.applyFilter({where: newFilter}, newParams);
    }

    openPanel(event) {
        if (event.defaultPrevented) return;
        event.preventDefault();

        this.panelFilter = {};
        this.$.popover.show(this.$.search.element);
    }

    onPanelSubmit(filter) {
        this.$.popover.hide();
        this.tags.push(filter);
        this.applyFilters();
    }

    /**
     * Updates url state params from filter values
     */
    updateStateParams() {
        const params = {};

        if (this.categoryId)
            params.categoryId = this.categoryId;
        else params.categoryId = undefined;

        if (this.typeId)
            params.typeId = this.typeId;
        else params.typeId = undefined;

        this.$state.go(this.$state.current.name, params);
    }
}

Controller.$inject = ['$http', '$scope', '$state', '$compile', '$transitions'];

ngModule.component('vnOrderCatalog', {
    template: require('./index.html'),
    controller: Controller,
    bindings: {
        order: '<'
    }
});