portal/resources/assets/vue/components/general/elements/SearchComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <img class="w-100" src="/images/search-illustration.png" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="row no-margin hint-text">
                <div class="col bg-master-lightest p-b-15 hint-text">
                    <div class="row m-b-15 p-t-10 p-b-10 bg-master-lighter">
                        <div class="col">
                            <small class="all-caps muted fs-10">Filters</small>
                        </div>
                        <div class="col-auto">
                            <div class="row align-items-center text-info pointer">
                                <div class="col-auto p-r-0"><small class="all-caps fs-10">Advance</small></div>
                                <div class="col-auto p-l-0"><i class="fa fa-chevron-down fs-8 m-l-5" style=" margin-bottom: 3px; "></i></div>
                            </div>
                        </div>
                    </div>
                    <user-filters-component ref="filters_form"></user-filters-component>
                    <div class="row m-t-15">
                        <div class="col">
                            <div class="bg-transparent text-center b-success b-a text-success fs-10 all-caps bold b-rad-none p-t-10 p-b-10 p-r-25 p-l-25 pointer" @click="updateFilters()">
                                Apply filters
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-10 text-center">
                        <div class="col">
                            <small class="all-caps fs-9 text-danger pointer" @click="resetForm();updateFilters()">Clear
                                Filters
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            section: {
                type: String,
                required: true
            }
        },
        data(){
            return {
                filters: {},
            }
        },
        methods:{
            updateFilters(){
                this.$store.getters.isInQueue(this.section) ? this.filters = this.$store.getters.getListDetails(this.section).filters : this.setDecoratorDefault();
                let vm = this;

                $.each(this.$refs.filters_form.parameters, function(key, value) {

                    value ? (vm.filters[key] = value) : (key in vm.filters && delete vm.filters[key]);

                });

                this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters});

            },
            resetForm(){
                if(!this.$refs.filters_form.data) {
                    Object.assign(this.$refs.filters_form.$data, this.$refs.filters_form.$options.data.call(this));
                }
            }
        }
    }
</script>