From 113142f709e4c6f536cb84148804956ad8b82788 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Sun, 5 Jun 2022 05:43:47 +0100
Subject: [PATCH] displayed list of columns in dropdown with checkbooxes

---
 src/types/components.d.ts                     |  1 +
 .../related/components/LogTable/Index.vue     |  2 +-
 src/views/dashboard/related/log/Header.vue    | 82 ++++++++-----------
 3 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index da5d949d..27e79ae6 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -7,6 +7,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index d7fa2472..38fd38f0 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div :class="{ 'd-flex': visibleColumns.length < 6 }" class="log-header">
+    <div :class="{ 'd-flex': visibleColumns.length < 6 }" class="log-header">      
       <template v-for="(item, index) in columns">
         <template v-if="item.isVisible">
           <div
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index d5923c2b..fd167945 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -15,53 +15,33 @@ limitations under the License. -->
 <template>
   <div class="flex-h log-wrapper">
     <div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
-      <p style="margin-right: 10px">Select visible columns</p>
-      <el-select
-        id="columnSelector"
-        v-model="selectedColumns"
-        multiple
-        placeholder="Select"
-        style="width: 240px"
-        size="small"
-        @change="hideTags"
-      >
-        <el-option
-          v-for="item in logStore.serviceLogColumn"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
-          <div
-            style="justify-content: space-between"
-            class="flex-h items-center"
-          >
-            <span class="mr-5">{{ item.value }}</span>
-            <div class="flex-h items-center">
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                :content="item.isVisible ? 'Hide column' : 'Show Column'"
-                placement="right-start"
+      <!-- <p style="margin-right: 10px">Select visible columns</p> -->
+      <el-dropdown :hide-on-click="false">
+        <span class="el-dropdown-link">
+          Select visible columns<el-icon class="el-icon--right"
+            ><arrow-down
+          /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="dark">
+            <div class="">Test it all</div>
+            <el-dropdown-item
+              v-for="item in logStore.serviceLogColumn"
+              :key="item.value"
+            >
+              <div
+                style="width: 100%"
+                class="flex-h items-center justify-between"
               >
-                <el-button
-                  v-if="item.isVisible"
-                  class="toggle-btn mx-3"
-                  @click="hideColumns(item)"
-                >
-                  <Icon iconSize="sm" iconName="cancel" />
-                </el-button>
-                <el-button
-                  v-else
-                  class="toggle-btn mx-3"
-                  @click="showColumns(item)"
-                >
-                  <Icon iconSize="sm" iconName="add" />
-                </el-button>
-              </el-tooltip>
-            </div>
-          </div>
-        </el-option>
-      </el-select>
+                <span style="margin-left: 10px; display: block">{{
+                  t(item.value)
+                }}</span>
+                <el-checkbox :checked="item.isVisible" size="large" />
+              </div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
       <el-button class="toggle-btn mx-3danger" @click="setSearchTerm('')">
         <Icon iconSize="sm" iconName="cancel" />
       </el-button>
@@ -269,6 +249,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { ArrowDown } from "@element-plus/icons-vue";
 import { ref, reactive, watch, computed, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
@@ -634,6 +615,12 @@ watch(
 );
 </script>
 <style lang="scss" scoped>
+.el-dropdown-link {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+}
 // .log-wrapper {
 //   width: 600px;
 //   padding-left: 40px;
@@ -646,6 +633,9 @@ watch(
 .items-center {
   align-items: center;
 }
+.justify-between {
+  justify-content: space-between;
+}
 .row {
   margin-bottom: 5px;
 }