Vue.component("logger-list", {
template: '<template>     <div style="display: flex;">         <q-table v-if="list.length > 0" dense flat square hide-bottom :data="list_filtered" :columns="columns" row-key="_rn" style="width: 100%;" virtual-scroll :pagination.sync="pagination" :rows-per-page-options="[0]">             <template v-slot:header="props">                 <q-tr :props="props">                     <q-th v-for="col in props.cols"                         :key="col.name"                         :props="props"                         style="vertical-align: top"                     >                         {{ col.label }}                         <div v-if="col.name === \'is_error\'" class="cursor-pointer" style="width: fit-content;">                             <q-badge v-show="filter_type === \'all\'" dense outline color="primary" style="margin: 11px 0px 0px 0px; width: 50px; justify-content: center;">                                 <template v-slot:default>all</template>                             </q-badge>                             <q-badge v-show="filter_type === \'error\'" dense color="negative" style="margin: 11px 0px 0px 0px; width: 50px; justify-content: center;">                                 <template v-slot:default>error</template>                             </q-badge>                             <q-badge v-show="filter_type === \'debug\'" dense color="primary" style="margin: 11px 0px 0px 0px; width: 50px; justify-content: center;">                                 <template v-slot:default>debug</template>                             </q-badge>                             <q-menu>                                 <q-list style="min-width: 100px">                                     <q-item clickable v-close-popup @click="filter_type = \'all\'">                                         <q-item-section>all</q-item-section>                                     </q-item>                                     <q-separator></q-separator>                                     <q-item clickable v-close-popup @click="filter_type = \'error\'">                                         <q-item-section>error only</q-item-section>                                     </q-item>                                     <q-item clickable v-close-popup @click="filter_type = \'debug\'">                                         <q-item-section>debug only</q-item-section>                                     </q-item>                                 </q-list>                             </q-menu>                         </div>                         <div v-else-if="col.name === \'data\'" style="display: flex;">                             <div class="cursor-pointer" style="width: fit-content; margin: 0px 10px 0px 0px;">                                 <q-badge v-show="!filter_pipe" dense outline color="primary" style="margin: 11px 0px 0px 0px; min-width: 70px; justify-content: center;">                                     <template v-slot:default>all pipes</template>                                 </q-badge>                                 <q-badge v-show="filter_pipe" dense color="info" style="margin: 11px 0px 0px 0px; min-width: 70px; justify-content: center;">                                     <template v-slot:default>{{filter_pipe}}</template>                                 </q-badge>                                 <q-menu>                                     <q-list style="min-width: 100px">                                         <q-item clickable v-close-popup @click="filter_pipe = undefined">                                             <q-item-section>all</q-item-section>                                         </q-item>                                         <q-separator></q-separator>                                         <q-item v-for="pipe in pipe_list" clickable v-close-popup @click="filter_pipe = pipe">                                             <q-item-section>{{pipe}}</q-item-section>                                         </q-item>                                     </q-list>                                 </q-menu>                             </div>                              <q-input v-model="filter_data" dense borderless style="width: 100%; text-align-last: right;">                                 <template v-slot:append>                                     <q-icon v-show="!filter_data" class="icon-eo-search text-primary"></q-icon>                                     <q-icon v-show="filter_data" class=" icon-eo-cancel text-primary cursor-pointer" @click.stop="filter_data=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_trace" label="include loaded traces" style="font-size: small;" ></q-checkbox>                                 </template>                             </q-input>                         </div>                     </q-th>                 </q-tr>             </template>              <template v-slot:body-cell-trace="props">                 <q-td :props="props">                     <div v-if="item && item._rn === props.row._rn">                         <q-badge label="opened" style="width: 40px; justify-content: center;" color="white" text-color="primary"></q-badge>                     </div>                     <div v-else>                         <q-badge label="n/a" v-if="props.row.trace_loaded === true && props.row.trace_list.length <= 0" style="width: 40px; justify-content: center;" outline color="info"></q-badge>                         <q-badge label="open" @click="show_trace(props.row)" v-if="props.row.trace_loaded === true && props.row.trace_list.length > 0" class="cursor-pointer" style="width: 40px; justify-content: center;" outline color="primary"></q-badge>                         <q-badge label="load" @click="show_trace(props.row)" v-if="props.row.trace_loaded === false" style="width: 40px; justify-content: center;" class="cursor-pointer" outline color="primary"></q-badge>                     </div>                 </q-td>             </template>              <template v-slot:body-cell-is_error="props">                 <q-td :props="props">                     <q-badge v-if="props.value === true" color="negative" label="error" ></q-badge>                     <q-badge v-if="props.value !== true" color="primary" label="debug" ></q-badge>                 </q-td>             </template>              <template v-slot:body-cell-data="props">                 <q-td :props="props">                     <div>                         <q-badge v-for="pipe in props.row.pipe_list" color="info" :label="pipe" style="margin: 0px 2px 0px 0px;" ></q-badge>                         <q-badge v-for="trace in props.row.trace_list_data" color="accent" :label="trace" style="margin: 0px 2px 0px 0px;" ></q-badge>                         {{ props.value }}                     </div>                 </q-td>             </template>         </q-table>          <q-banner v-if="list.length <= 0" class="bg-primary text-white" style="width: 100%; height: 50px; text-align: center;">             <div v-show = "authorization">No data</div>             <div v-show = "!authorization">No authorization</div>         </q-banner>     </div> </template>',
props :{
    item: { type: Object },
    list: { type: Array },
    pipe_list: { type: Array },
    list_filter: { type: String },
    authorization: { type: Boolean }
},
data :function () {
    return {
        pagination: { rowsPerPage: 0 },
        columns: [
            {
                name: '_rn',
                align: 'center',
                label: '#',
                field: '_rn',
                sortable: true,
                style: 'vertical-align: top; width: 110px;'
            },
            {
                name: 'trace',
                align: 'center',
                label: 'traces',
                sortable: false,
                style: 'vertical-align: top; width: 40px;'
            },
            {
                name: 'fdm',
                align: 'center',
                label: 'ms sql time',
                field: 'fdm',
                sortable: true,
                style: 'vertical-align: top; width: 180px;'
            },
            {
                name: 'is_error',
                align: 'center',
                label: 'type',
                field: 'is_error',
                sortable: false,
                style: 'vertical-align: top;  width: 70px;'
            },
            {
                name: 'data',
                align: 'left',
                label: 'pipes & topic',
                field: 'data',
                sortable: false,
                style: 'vertical-align: top; white-space: pre-line;'
            }
        ],
        filter_data: undefined,
        filter_data_whole: false,
        filter_data_trace: false,
        filter_type: 'all',
        filter_pipe: undefined
    };
},
computed :{
    list_filtered: function () {
        return this.list.filter(f => (this.filter_type === 'all' || this.filter_type === 'error' && f.is_error === true || this.filter_type === 'debug' && f.is_error === false) && (!this.filter_pipe || this.filter_pipe && f.pipe_list.some(f => vvs.equal(f, this.filter_pipe))) && (!this.filter_data || this.filter_data_whole === true && new RegExp(this.filter_data, 'i').test(f.trace_list_data.join('').concat(f.data)) || this.filter_data_whole === false && this.filter_data.split(' ').filter(ff => !vvs.isEmptyString(ff)).every(e => new RegExp(e, 'i').test(f.trace_list_data.join('').concat(f.data))) || this.filter_data_whole === true && this.filter_data_trace === true && f.trace_loaded === true && f.trace_list.some(s => new RegExp(this.filter_data, 'i').test(s.data)) || this.filter_data_whole === false && this.filter_data_trace === true && f.trace_loaded === true && this.filter_data.split(' ').filter(ff => !vvs.isEmptyString(ff)).every(e => f.trace_list.some(s => new RegExp(e, 'i').test(s.data)))));
    }
},
methods :{
    show_trace(item) {
        this.emit('trace', item);
    },
    emit(command, item) {
        this.$emit('event', {
            command: command,
            item: item
        });
    }
},
mounted :function () {
    this.$nextTick(function () {
    });
}
})