controllets/filters-controllet/filters-controllet.html

<link rel="import" href="../../bower_components/polymer/polymer.html" />
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<dom-module id="filters-controllet">
    <template>
        <style is="custom-style">
            #filters_container {
                height: 100%;
                width: 100%;
                position: relative;
            }
            #filters_container * {
                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 16px;
                line-height: 24px;
            }
            paper-dropdown-menu {
                width: 100%;
                --paper-input-container-focus-color: #2196F3;
            }
            :host {
            --paper-dropdown-menu-icon: {
                 color: #2196F3;
             };
            }
            paper-item {
                min-width: 128px;
                white-space: nowrap;
            }
            paper-item.iron-selected {
                background-color: #2196F3;
                color: #FFFFFF;
            }
            paper-input {
                width: 100%;
                --paper-input-container-focus-color: #2196F3;
            }
            paper-button {
                margin: 0;
                height: 48px;
                padding: 12px;
                color: #FFFFFF;
                background: #2196F3;
                font-weight: 700;
                min-width: 96px;
            }
            paper-button#disable_filters {
                position: absolute;
                bottom: 0;
                right: 0;
                margin: 0 8px 8px 0;
                min-width: 192px;
            }
            paper-button#disable_filters.disabled {
                background-color: #B6B6B6;
            }
            iron-icon[icon=filter-list] {
                height: 32px;
                width: 32px;
                color: #FFFFFF;
                margin-top: -4px;
            }
            paper-button:hover {
                box-shadow: 0px 8px 12px #888;
                -webkit-box-shadow: 0px 8px 12px #888;
                -moz-box-shadow: 0px 8px 12px #888;
            }
            paper-icon-button {
                padding: 4px;
            }
            paper-icon-button.add {
                color: #2196F3;
                --paper-icon-button-ink-color: #2196F3;
            }
            paper-icon-button.cancel {
                color: #F44336;
                --paper-icon-button-ink-color: #F44336;
            }
            #filters_container .row {
                display: flex;
                height: 60px;
                width: 100%;
            }
            #filters_container .ddl_container {
                display: flex;
                height: 60px;
                width: 25%;
                padding: 0px 8px;
            }
            #filters_container .add_container {
                height: 40px;
                width: 40px;
                padding: 10px 0px;
            }
            #filters_container .andOr_container {
                display: inline-block;
                height: 44px;
                width: calc(100% - 40px);
                padding: 8px 0px;
                /*text-align: right;*/
                text-align: center;
            }
            #filters_container .row2 {
                display: flex;
                height: 48px;
                width: 100%;
            }
             .highlighted {
                color: #2196F3;
                font-weight: 700;
            }
            #filters_container .filter {
                height: 24px;
                width: calc(75% - 16px);
                padding: 12px 8px;
            }
            #filters_container .remove_container {
                height: 40px;
                width: 40px;
                padding: 4px 8px;
            }
    </style>
        <div id="filters_container">
                <div class="row">
                    <div class="ddl_container">
                        <paper-dropdown-menu id="filter_field" label="Field">
                            <paper-menu id="filter_field_menu" class="dropdown-content">
                                <template is="dom-repeat" items={{fields}}>
                                    <paper-item id={{index}}>{{_fieldName(item)}}</paper-item>
                                </template>
                            </paper-menu>
                        </paper-dropdown-menu>
                    </div>
                    <div class="ddl_container">
                        <paper-dropdown-menu id="filter_operation" label="Operation">
                            <paper-menu id="filter_operation_menu" class="dropdown-content">
                                <template is="dom-repeat" items={{operations}}>
                                    <paper-item id={{index}}>{{_getOperationlName(item)}}</paper-item>
                                </template>
                            </paper-menu>
                        </paper-dropdown-menu>
                    </div>
                    <div class="ddl_container">
                        <paper-input id="filter_value" label="Value" class="base_input" maxlength="32" auto-validate pattern="^[.:,;+-_ a-zA-Z0-9]*" error-message="Invalid value!"></paper-input>
                    </div>
                    <div class="ddl_container">
                        <div class="add_container">
                            <paper-icon-button on-click="_addFilter" icon="add-circle" class="add"></paper-icon-button>
                        </div>
                        <div class="andOr_container">
                            <paper-button raised on-click="_changeLogicalOperator"><span id="andOr">{{logicalOperator}}</span></paper-button>
                        </div>
                    </div>
                </div>
                <template is="dom-repeat" items={{filters}}>
                    <template is="dom-if" if="{{index}}"><!--excludes logicalOperator-->
                        <div class="row2">
                            <div class="filter">
                                {{item.field}} <span class="highlighted">{{_getOperationlName(item.operation)}}</span> "{{item.value}}" <span class="highlighted">{{_getLogicalOperator(index)}}</span>
                            </div>
                            <div class="remove_container">
                                <paper-icon-button on-click="_deleteFilter" icon="cancel" class="cancel"></paper-icon-button>
                            </div>
                        </div>
                    </template>
                </template>
            <paper-button id="disable_filters" raised on-click="_disableFilters"><iron-icon icon="filter-list"></iron-icon>&nbsp; <span id="disable_enable"></span></paper-button>
        </div>
    </template>
    <script>
        Polymer({
            is : 'filters-controllet',
            properties : {
                fields : {
                    type : Array,
                    value : []
                },
                operations : {
                    type : Array,
                    value : ["=", "!=", ">", ">=", "<", "<=", "contains", "notContains", "start", "ends"]
                },
                filters : {
                    type : Array,
                    value :  [{logicalOperator: "AND"}]
                }
            },
            ready : function() {
                $(this.$.filters_container).perfectScrollbar();
                this.logicalOperator = "AND";
            },
            attached : function() {
                this._translate();
            },
            setFields : function(fields) {
                this.fields = this._copy(fields);
            },
            setSelectedFields : function(selectedFields) {
                this.selectedFields = this._copy(selectedFields);
            },
            setFilters : function(filters) {
                if(filters && filters.length > 0) {
                    this.filters = this._copy(filters);
                    this.logicalOperator = this.filters[0].logicalOperator;
                    this._fire();
                }
            },
            getFilters : function() {
                return this.filters;
            },
            reset : function() {
                this.fields = [];
                this.selectedFields = [];
                this.filters = [{logicalOperator: "AND"}];
            },
            _translate : function() {
                this.$.filter_field.setAttribute("label", ln["filterField_" + ln["localization"]]);
                this.$.filter_operation.setAttribute("label", ln["filterOperation_" + ln["localization"]]);
                this.$.filter_value.setAttribute("label", ln["filterValue_" + ln["localization"]]);
                this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
            },
            _fieldName : function(field) {
                return field.substring(field.lastIndexOf(",")+1, field.length);
            },
            _fire : function() {
                this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
                this.$.disable_filters.className = this.$.disable_filters.className.replace(" disabled", "");
                if (this.filters.length > 1)
                    this.fire('filters-controllet_filters', {filters: this.filters});
                else
                    this.fire('filters-controllet_filters', {filters: []});
            },
            _addFilter : function() {
                if (this.$.filter_field.selectedItem && this.$.filter_operation_menu.selectedItem && this.$.filter_value.value != "" && !this.$.filter_value.invalid) {
                    var field = this.$.filter_field.value;
                    var id = this.$.filter_operation.selectedItem.id;
                    var operation = this.operations[id];
                    var value = this.$.filter_value.value;
                    this.filters.push({"field": field, "operation": operation, "value": value});
                    this.$.filter_field_menu.select(-1);
                    this.$.filter_operation_menu.select(-1);
                    this.$.filter_value.value = "";
                    this._fire();
                    this._renderFilters();
                }
            },
            _deleteFilter : function(e) {
                var index = e.model.index;
                this.filters.splice(index, 1);
                this._fire();
                this._renderFilters();
            },
            _getOperationlName: function(operation) {
                return ln[operation + "_" + ln["localization"]];
            },
            _changeLogicalOperator : function() {
                if(this.logicalOperator == "AND")
                    this.logicalOperator = "OR";
                else
                    this.logicalOperator = "AND";
                this.filters[0] = {logicalOperator: this.logicalOperator}
                this._fire();
                this._renderFilters();
            },
            _renderFilters : function() {
                var filters = this.filters.slice();
                this.filters = [];
                this.async(function() {
                    this.filters = filters;
                }, 0);
            },
            _getLogicalOperator : function(index) {
                if(index == this.filters.length -1)
                    return "";
                else
                    return this.filters[0].logicalOperator;
            },
            _disableFilters : function() {
                var classes = this.$.disable_filters.className;
                if (classes.indexOf("disabled") > -1) {
//                    this.$.disable_enable.innerHTML = ln["disableFilters_" + ln["localization"]];
//                    this.$.disable_filters.className = classes.replace(" disabled", "");
                    this._fire();
                }
                else {
                    this.$.disable_enable.innerHTML = ln["enableFilters_" + ln["localization"]];
                    this.$.disable_filters.className = classes + " disabled";
                    this.fire('filters-controllet_filters', {filters: []});
                }
            },
            _copy : function(o) {
                var out, v, key;
                out = Array.isArray(o) ? [] : {};
                for (key in o) {
                    v = o[key];
                    out[key] = (typeof v === "object") ? this._copy(v) : v;
                }
                return out;
            }
        });
    </script>
</dom-module>