Vue.component("action-list-menu", {
template: '<template>     <div>         <div style="display: flex;">              <div style="max-width: 220px; min-width: 220px; text-align: end;">                 <q-btn-dropdown split flat dropdown-icon="icon-eo-down-open" color="primary" :label="load_script === false ? \'load topics\' : \'load topics & scripts\'" @click="list_menu_on_refresh(\'current\')">                     <q-list>                         <q-item clickable v-close-popup @click="list_menu_on_refresh(false)">                             <q-item-section>                                 <q-item-label>load topics</q-item-label>                             </q-item-section>                         </q-item>                         <q-item clickable v-close-popup @click="list_menu_on_refresh(true)">                             <q-item-section>                                 <q-item-label>load topics & scripts</q-item-label>                             </q-item-section>                         </q-item>                     </q-list>                 </q-btn-dropdown>             </div>             <div style="display: flex; justify-content: flex-end; width: 100%;">                 <q-btn flat color="primary" style="max-width: 170px; min-width: 170px;" @click="tagfilter_visible = true" :label="\'filter by tags\' + \' (\' + filter_tags.length + \')\'">                 </q-btn>             </div>              <action-list-menu-tagfilter @event="on_list_menu_tagfilter_event" :visible="tagfilter_visible" :tags="tags"></action-list-menu-tagfilter>                                      </div>         <div style="display: flex;">             <q-input v-model="search" dense borderless style="text-align-last: right; margin: 0px 0px 0px 10px; width: 100%;">                 <template v-slot:append>                     <q-icon v-show="!search" class="icon-eo-search text-primary"></q-icon>                     <q-icon v-show="search" class=" icon-eo-cancel text-primary cursor-pointer" @click.stop="search=undefined"></q-icon>                     <q-checkbox size="xs" v-model="filter_data_whole" label="match whole" style="font-size: small;"></q-checkbox>                     <q-checkbox size="xs" v-model="filter_data_script" label="include loaded scripts" style="font-size: small;"></q-checkbox>                 </template>             </q-input>         </div>     </div> </template>',
props :{ tags: { type: Array } },
data :function () {
    return {
        search: '',
        show_mode: 'compact',
        filter_data_whole: false,
        filter_data_script: false,
        filter_tags: [],
        load_script: false,
        tagfilter_visible: false
    };
},
watch :{
    search: function (new_val, old_val) {
        this.change_search();
    },
    filter_data_whole: function (new_val, old_val) {
        this.change_search();
    },
    filter_data_script: function (new_val, old_val) {
        this.change_search();
    }
},
methods :{
    list_menu_on_refresh(load_script) {
        if (load_script !== 'current') {
            this.load_script = load_script;
        }
        this.emit('refresh', this.load_script);
    },
    on_list_menu_tagfilter_event(env) {
        if (!env)
            return;
        if (env.command === 'close') {
            this.tagfilter_visible = false;
            this.filter_tags = env.mode;
            this.change_search();
        }
    },
    change_search() {
        this.emit('filter', {
            text: this.search,
            filter_data_whole: this.filter_data_whole,
            filter_data_script: this.filter_data_script,
            filter_tags: this.filter_tags
        });
    },
    emit(command, mode) {
        this.$emit('event', {
            command: command,
            mode: mode
        });
    }
}
})