github.com/v2pro/plz@v0.0.0-20221028024117-e5f9aec5b631/witch/webroot/filters.html

<script type="text/x-template" id="filters-template">
<div>
    <h4>Filters<i class="el-icon-refresh" style="cursor: pointer" @click="clearFilters()"></i></h4>
    <el-select v-model="editingFilter.propKey"
               allow-create
               filterable
               placeholder="Property...">
        <el-option
                v-for="propKey in propKeys"
                :key="propKey"
                :label="propKey"
                :value="propKey">
        </el-option>
    </el-select>
    <el-select v-model="editingFilter.operator" filterable placeholder="Operator..." style="margin-top: 8px;">
        <el-option
                v-for="operator in operators"
                :key="operator[1]"
                :label="operator[0]"
                :value="operator[1]">
        </el-option>
    </el-select>
    <el-select
            v-model="editingFilter.operand"
            filterable
            allow-create
            placeholder="Value..." style="margin-top: 8px;">
        <el-option
                v-for="propValue in editingPropValues"
                :key="propValue"
                :label="propValue"
                :value="propValue">
        </el-option>
    </el-select>
    <el-button style="margin-top: 8px;" @click="addFilter()">Add Filter</el-button>
    <div v-for="(filter, index) in editableFilters" :key="filter.key"
         style="margin-top: 8px; word-wrap: break-word; line-height: 2em;">
        <i class="el-icon-circle-close-outline" style="cursor: pointer" @click="removeFilter(index)"></i>
        {{ filter.propKey }} {{ filter.operator}} {{ formatOperand(filter.operand) }}
    </div>
</div>
</script>
<script>
    Vue.component('filters', {
        template: '#filters-template',
        props: ['propValues', 'filters'],
        data: function () {
            var editableFilters = [];
            var persistedModel = localStorage.getItem('filters::persistedModel');
            if (persistedModel) {
                var model = JSON.parse(persistedModel);
                editableFilters = model.editableFilters || [];
            }
            return {
                editingFilter: {
                    propKey: '',
                    operator: 'equals',
                    operand: ''
                },
                operators: [
                    ['Equals', 'equals'],
                    ['Contains', 'contains'],
                    ['Not Equals', 'not-equals'],
                    ['Not Contains', 'not-contains']
                ],
                editableFilters: editableFilters
            }
        },
        watch: {
            editableFilters: function (val) {
                this.onEditableFiltersUpdated();
            }
        },
        mounted: function() {
            this.onEditableFiltersUpdated();
        },
        computed: {
            propKeys: function() {
                var propKeys = [];
                for (var propKey in this.propValues) {
                    propKeys.push(propKey);
                }
                return propKeys;
            },
            editingPropValues: function() {
                if (!this.editingFilter.propKey) {
                    return [];
                }
                return this.propValues[this.editingFilter.propKey];
            }
        },
        methods: {
            clearFilters: function() {
                this.editingFilter = {
                    propKey: '',
                    operator: 'equals',
                    operand: ''
                };
                this.editableFilters = [];
                this.$notify.info({
                    title: 'info',
                    message: 'filters cleared'
                });
            },
            onEditableFiltersUpdated: function() {
                var whitelist = {};
                var blacklist = {};
                for (var i in this.editableFilters) {
                    var editableFilter = this.editableFilters[i];
                    if (editableFilter.operator.indexOf('not-') === 0) {
                        blacklist[editableFilter.propKey] = createFilterFunc(
                            editableFilter, blacklist[editableFilter.propKey]);
                    } else {
                        whitelist[editableFilter.propKey] = createFilterFunc(
                            editableFilter, whitelist[editableFilter.propKey]);
                    }
                }
                var filters = {
                    cacheKey: '__filtered_by_' + new Date().getTime(),
                    filterFunc: mergeWhitelistAndBlacklist(whitelist, blacklist)
                };
                this.$emit('update:filters', filters);
                localStorage.setItem('filters::persistedModel', JSON.stringify({
                    'editableFilters': this.editableFilters
                }));
            },
            addFilter: function(propKey, operator, operand) {
                propKey = propKey || this.editingFilter.propKey;
                operator = operator || this.editingFilter.operator;
                operand = operand || this.editingFilter.operand;
                if (!(propKey)) {
                    $vue.$notify.error({
                        title: 'Add filter missing parameter',
                        message: 'Property not specified'
                    });
                    return;
                }
                if (!(operand)) {
                    $vue.$notify.error({
                        title: 'Add filter missing parameter',
                        message: 'Filter operand not specified'
                    });
                    return;
                }
                this.editableFilters.push({
                    propKey: propKey,
                    operator: operator,
                    operand: operand,
                    key: new Date().getTime()
                });
                this.editingFilter.propKey = '';
                this.editingFilter.operand = '';
            },
            removeFilter: function(index) {
                this.editableFilters.splice(index, 1);
            },
            formatTimestamp: function(val) {
                var d = new Date(val / 1000000);
                return d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '.' + d.getMilliseconds();
            },
            formatOperand: function(operand) {
                if (Array.isArray(operand)) {
                    return this.formatTimestamp(operand[0]) + ' ~ ' + this.formatTimestamp(operand[1]);
                } else {
                    return operand;
                }
            }
        }
    });

    function mergeWhitelistAndBlacklist(whitelist, blacklist) {
        return function(event) {
            // if blacklist, do not show
            for (var propKey in blacklist) {
                var filterFunc = blacklist[propKey];
                var propValue = event[propKey];
                if (propValue && !filterFunc(propValue)) {
                    return false;
                }
            }
            // if no whitelist, show by default
            if (Object.keys(whitelist).length === 0) {
                return true;
            }
            // test if whitelist matched
            for (var propKey in whitelist) {
                var filterFunc = whitelist[propKey];
                var propValue = event[propKey];
                if (propValue && filterFunc(propValue)) {
                    return true;
                }
            }
            // if not covered by whitelist, do not show
            return false;
        }
    }

    function createFilterFunc(editableFilter, previousFunc) {
        switch (editableFilter.operator) {
            case 'contains':
                return function(val) {
                    if (val.indexOf(editableFilter.operand) !== -1) {
                        return true;
                    }
                    if (previousFunc) {
                        return previousFunc(val)
                    } else {
                        return false;
                    }
                };
            case 'not-contains':
                return function(val) {
                    var myResult = val.indexOf(editableFilter.operand) === -1;
                    if (previousFunc) {
                        return myResult && previousFunc(val)
                    }
                    return myResult;
                };
            case 'equals':
                return function(val) {
                    if (val === editableFilter.operand) {
                        return true;
                    }
                    if (previousFunc) {
                        return previousFunc(val)
                    } else {
                        return false;
                    }
                };
            case 'not-equals':
                return function(val) {
                    var myResult = val !== editableFilter.operand;
                    if (previousFunc) {
                        return myResult && previousFunc(val)
                    }
                    return myResult;
                };
            case 'between':
                return function(val) {
                    if (val >= editableFilter.operand[0] && val <= editableFilter.operand[1]) {
                        return true;
                    }
                    if (previousFunc) {
                        return previousFunc(val)
                    } else {
                        return false;
                    }
                };
            default:
                console.log('unknown filter operator: ' + editableFilter.operator);
                return function(val) { return false; }
        }
    }
</script>