Can toggle columns with models

This commit is contained in:
Peter Olu 2022-06-05 06:11:27 +01:00
parent 113142f709
commit 9b4d3eb20e

View File

@ -16,15 +16,23 @@ limitations under the License. -->
<div class="flex-h log-wrapper"> <div class="flex-h log-wrapper">
<div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5"> <div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
<!-- <p style="margin-right: 10px">Select visible columns</p> --> <!-- <p style="margin-right: 10px">Select visible columns</p> -->
<el-dropdown :hide-on-click="false"> <el-dropdown class="dark" :hide-on-click="false">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
Select visible columns<el-icon class="el-icon--right" Select visible columns<el-icon class="el-icon--right"
><arrow-down ><arrow-down
/></el-icon> /></el-icon>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="dark"> <el-dropdown-menu class="dropdownSelector" >
<div class="">Test it all</div> <el-dropdown-item>
<div
style="width: 100%"
class="flex-h items-center justify-between"
>
<span style="margin-right: 10px">Show All</span>
<el-checkbox :checked="showAllColumns" size="large" />
</div>
</el-dropdown-item>
<el-dropdown-item <el-dropdown-item
v-for="item in logStore.serviceLogColumn" v-for="item in logStore.serviceLogColumn"
:key="item.value" :key="item.value"
@ -33,10 +41,8 @@ limitations under the License. -->
style="width: 100%" style="width: 100%"
class="flex-h items-center justify-between" class="flex-h items-center justify-between"
> >
<span style="margin-left: 10px; display: block">{{ <span style="margin-right: 10px">{{ t(item.value) }}</span>
t(item.value) <el-checkbox v-model="item.isVisible" size="large" />
}}</span>
<el-checkbox :checked="item.isVisible" size="large" />
</div> </div>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
@ -270,6 +276,7 @@ const { portal } = useRoute().query;
const logStore = useLogStore(); const logStore = useLogStore();
const selectedColumns = ref<any[]>([]); const selectedColumns = ref<any[]>([]);
const showColumList = ref<boolean>(false); const showColumList = ref<boolean>(false);
const showAllColumns = ref<boolean>(false);
const traceId = ref<string>(""); const traceId = ref<string>("");
const keywordsOfContent = ref<string[]>([]); const keywordsOfContent = ref<string[]>([]);
const excludingKeywordsOfContent = ref<string[]>([]); const excludingKeywordsOfContent = ref<string[]>([]);