From 9d3c417a49b05cf7fa5e2f2ec1fa707948d6f53a Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Sat, 21 May 2022 15:00:47 +0100
Subject: [PATCH] can hide columns from selected input

---
 src/store/modules/log.ts                      |  6 +--
 .../related/components/LogTable/Index.vue     |  6 ++-
 src/views/dashboard/related/log/Header.vue    | 39 ++++++++++++++++---
 3 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index ef7aca80..cc3e6ef0 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -1,4 +1,3 @@
-import { serviceLogColumn } from '@/types/log-column';
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -63,10 +62,9 @@ export const logStore = defineStore({
   }),
   actions: {
     hideColumns(columnsLabel: string[]) {
-      console.log(columnsLabel, this.serviceLogColumn)
       // TODO: add a parameter column type too
-      this.serviceLogColumn.map((col: any) => {
-        if (columnsLabel.includes(col.label)) {
+      this.serviceLogColumn.forEach((col: any) => {
+        if (columnsLabel.includes(col.value)) {
           col.isVisible = false
         }
       })
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index 039c7efb..29e62776 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -91,7 +91,11 @@ const showDetail = ref<boolean>(false);
 const dragger = ref<Nullable<HTMLSpanElement>>(null);
 // const method = ref<number>(380);
 // props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
-const columns = ref<any[]> (useLogStore.serviceLogColumn);
+const columns = ref<any[]>(
+  props.type === "browser"
+    ? useLogStore.browserLogColumn
+    : useLogStore.serviceLogColumn
+);
 // const portalVisibleDefaultCols:string[] = ['Service', 'Instance','Content']
 
 const visibleColumns = computed(() =>
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 4e25adba..1c8156c9 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="flex-h log-wrapper">
     <div class="flex-h items-center mr-5">
-      <p style="margin-left: 10px">Select visible columns</p>
+      <p style="margin-right: 10px">Select visible columns</p>
       <el-select
         v-model="selectedColumns"
         multiple
@@ -29,11 +29,36 @@ limitations under the License. -->
           :key="item.value"
           :label="item.label"
           :value="item.value"
-        />
+        >
+          <span class="mr-5">{{ item.value }}</span>
+          <Icon v-if="item.isVisible" iconSize="sm" iconName="cancel" />
+          <Icon v-else iconSize="sm" iconName="add" />
+        </el-option>
       </el-select>
-      <el-button class="toggle-btn mx-3" @click="setVisbleColumn">
-        <Icon iconSize="sm" iconName="timeline" />
-      </el-button>
+      <div class="flex-h items-center" v-if="selectedColumns.length">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="Add selected columns"
+          placement="bottom-start"
+        >
+          <el-button class="toggle-btn mx-3" @click="setVisbleColumn">
+            <Icon iconSize="sm" iconName="save" />
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="Remove selected columns"
+          placement="bottom-start"
+        >
+          <el-button class="toggle-btn mx-3" @click="hideColumn">
+            <Icon iconSize="sm" iconName="cancel" />
+          </el-button>
+        </el-tooltip>
+
+      </div>
     </div>
     <div v-if="!currentSearchTerm.length" class="flex-h items-center">
       <div v-for="(item, index) in arrayOfFilters" :key="index">
@@ -316,6 +341,10 @@ function setVisbleColumn() {
   });
   console.log(cols, [...logStore.serviceLogColumn]);
 }
+function hideColumn() {
+  logStore.hideColumns(selectedColumns.value)
+  selectedColumns.value = []
+}
 async function init() {
   const resp = await logStore.getLogsByKeywords();