actindo-grid-filter-form.html

<dom-module id="actindo-grid-filter-form">
    <template>
        <style>
            .filter-form
            {
                display: flex;
                flex-direction: row;
                align-items: flex-end;
            }
            .btn-add
            {
                background-color: var(--actindo-primary);
                color: var(--actindo-light-grey-light);
                height: 35px;
                padding: 0px 25px;
                margin-bottom: 7px;
                margin-left: 10px;
            }
            actindo-combobox
            {
                margin-right: 10px;
            }
            
        </style>
            
        <div class="filter-form">
            <template is="dom-if" if="[[columns.length]]">
                <actindo-combobox
                    label="Column"
                    items="[[columns]]"
                    display-field="label"
                    value-field="field"
                    selected-item="{{_selectedColumn}}"
                    value="{{property}}"
                    disabled="[[editing]]"
                    allow-deselect
                >
                </actindo-combobox>
            </template>
            <template is="dom-if" if="[[_selectedColumn.type]]">
                <actindo-combobox
                    label="Relation"
                    items="[[_operators]]"
                    display-field="name"
                    value-field="value"
                    value="{{operator}}"
                >
                </actindo-combobox>
            </template>
            <div hidden="[[!operator]]">
                <div id="inputFilter"></div>
            </div>

            <paper-button class="btn-add" on-click="_save" raised>
                <span>Add Filter</span>
            </paper-button>
        </div>
        
    </template>

    <script>

        class ActindoGridFilterForm extends Polymer.Element {
            static get is() { return 'actindo-grid-filter-form'; }

            static get properties() {
                return {
                    /**
                     * Whether is editing or not
                     */
                    editing: {
                        type: Boolean,
                        value: false,
                    },
                    /**
                     * The status of the filter
                     */
                    active: {
                        type: Boolean,
                        value: true
                    },
                    /**
                     * contains all the columns has filterable property equal to true
                     */
                    columns: {
                        type: Array,
                    },
                    /**
                     * contains the filter criteria, the key "property" contains the column value,
                     * the field "operator" contains operator value(=,>,like,etc...), the field "value" contains the value need to be filtered
                     * {property: String, operator: string, value: mixed}
                     */
                    filter: {
                        type: Object
                    },
                    /**
                     * contains the column value
                     */
                    property: {
                        type: String,
                    },
                    /**
                     * contains the operator value
                     */
                    operator: {
                        type: String,
                        observer: '_onOperatorChanged'
                    },
                    /**
                     * contains the filter value
                     */
                    value: {},
                    /**
                     * Internal property
                     */
                    _valueHistory: {
                        type: Object,
                        value: function() {
                            return {}
                        }
                    },
                    /**
                     * Internal property
                     */
                    _operators: {
                        type: Array,
                        value: []
                    },
                    /**
                     * Internal property
                     */
                    _selectedColumn: {
                        type: Object,
                        observer: '_onSelectedColumnChanged'
                    }
                };
            }

            _onSelectedColumnChanged(newColumn, oldColumn)
            {
                if (!newColumn.type)
                {
                    return;
                }
                if (oldColumn.type)
                {
                    this.set('operator', null);
                }
                this.setProperties({
                    _operators: newColumn.operators
                });
            }

            _onOperatorChanged(opt)
            {
                if (!opt)
                {
                    return;
                }
                const inputFilter = this.$.inputFilter;
                let {firstChild} = inputFilter;
                const column = this._selectedColumn;
                const operatorObj = this._operators.find(item => item.value === opt);
                this.getInputComponent(column, operatorObj).then(node => {

                    // Check if in edit mode and first load
                    if (!firstChild && this.editing)
                    {
                        node.value = this.value;
                    }
                    // keep if the new input component name is not changed
                    firstChild = firstChild || {};
                    if (firstChild.tagName === node.tagName)
                    {
                        return;
                    }
                    inputFilter.innerHTML = '';
                    node.addEventListener("value-changed", this._onValueChanged.bind(this));
                    inputFilter.appendChild(node);
                });
            }

            getInputComponent(column, operator)
            {
                return new Promise(resolve => {
                    if (!column.customFilter)
                    {

                        const node = column.renderDefaultFilter(column.defaultFilterProperties, operator);
                        resolve(node);
                        return;
                    }
                    const {importPath, component} = column.customFilter;

                    Polymer.importHref(importPath, (element) => {
                        const node = document.createElement(component);
                        node.element = element.element;
                        resolve(node);
                   });
                });

            }

            _onValueChanged(event)
            {
                // Ignore length array event
                if ('value.length' ===  event.detail.path)
                {
                    return;
                }
                if (event.detail.path === 'value.splices')
                {
                    this.set('value', event.detail.value.indexSplices[0].object);
                    return;
                }
                if (event.detail.path)
                {
                    this.set(event.detail.path, event.detail.value);
                    return;
                }
                this.set('value', event.detail.value);
            }           

            _save()
            {
                let {property, operator, value} = this;

                this.dispatchEvent( new CustomEvent("save", {detail: {
                    property: property,
                    operator: operator,
                    value: value,
                    active: this.active
                } }));
                
                if (!this.editing)
                {
                    const inputFilter = this.shadowRoot.querySelector('#inputFilter');
                    inputFilter.removeChild(inputFilter.firstChild);
                }
                this.reset();
                
            }

            reset()
            {
                const filter = JSON.parse(JSON.stringify(this.filter || {}));
                this.set('operator', '');
                this.setProperties({
                    property: filter.property,
                    operator: filter.operator,
                    value: filter.value
                });
            }
        }
        customElements.define(ActindoGridFilterForm.is, ActindoGridFilterForm);

    </script>
</dom-module>