From 5d958f672fde61d263302a9a8c5032b47d801210 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 6 Nov 2023 15:50:26 +0800
Subject: [PATCH] Issues #186: done.

---
 src/components/Discover/Map/SidebarFilter.vue |  2 +-
 src/components/Discover/Map/SidebarState.vue  |  2 +-
 src/components/Discover/Map/SidebarTraces.vue |  2 +-
 src/components/Discover/Map/SidebarView.vue   |  2 +-
 src/views/Discover/Map/index.vue              | 39 ++++++++++++++++---
 5 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue
index 01b158f..85cf665 100644
--- a/src/components/Discover/Map/SidebarFilter.vue
+++ b/src/components/Discover/Map/SidebarFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar :visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" :baseZIndex="15" class="!w-11/12 !bg-neutral-100" >
+  <Sidebar :visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false" :baseZIndex="15" class="!w-11/12 !bg-neutral-100" >
     <template #header>
       <ul class="flex space-x-4">
         <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('filter')" :class="tab === 'filter'? 'text-neutral-900': 'text-neutral-500'" id="tabFilter">Filter</li>
diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue
index 203d324..6fd1897 100644
--- a/src/components/Discover/Map/SidebarState.vue
+++ b/src/components/Discover/Map/SidebarState.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="true" class="!w-[360px]" @hide="hide" @show="show">
+  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false" class="!w-[360px]" @hide="hide" @show="show">
     <template #header>
       <ul class="flex space-x-4 pl-4">
         <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('summary')" :class="tab === 'summary'? 'text-neutral-900': ''">Summary</li>
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 8cd76b7..68eb7b1 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12" @show="show()">
+  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false" class="!w-11/12" @show="show()">
     <template #header>
       <p class="h1">Traces</p>
     </template>
diff --git a/src/components/Discover/Map/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue
index b157adb..f74068b 100644
--- a/src/components/Discover/Map/SidebarView.vue
+++ b/src/components/Discover/Map/SidebarView.vue
@@ -1,5 +1,5 @@
 <template>
-  <Sidebar :visible="sidebarView" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" >
+  <Sidebar :visible="sidebarView" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="false" >
     <template #header>
       <p class="h1">Visualization Setting</p>
     </template>
diff --git a/src/views/Discover/Map/index.vue b/src/views/Discover/Map/index.vue
index 4c21121..41b1df5 100644
--- a/src/views/Discover/Map/index.vue
+++ b/src/views/Discover/Map/index.vue
@@ -2,17 +2,17 @@
   <!-- Sidebar: Switch data type -->
   <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-50':''">
     <ul class="space-y-4 flex flex-col justify-center items-center">
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarView = true" :class="{'border-primary': sidebarView}">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}">
         <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
           track_changes
         </span>
       </li>
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarFilter = true" :class="{'border-primary': sidebarFilter}">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}">
         <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
           tornado
         </span>
       </li>
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"  @click="sidebarTraces = true" :class="{'border-primary': sidebarTraces}">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"  @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}">
         <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
           rebase
         </span>
@@ -36,7 +36,7 @@
   <!-- Sidebar: State -->
   <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
     <ul class="flex flex-col justify-center items-center">
-      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = true" :class="{'border-primary': sidebarState}" id="iconState">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
         <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
           info
         </span>
@@ -50,7 +50,6 @@
   <SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
   <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd" :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
   @submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidevarFilterRef"></SidebarFilter>
-
 </template>
 
 <script>
@@ -111,6 +110,36 @@ export default {
       return result;
     }
   },
+  watch: {
+    sidebarView: function(newValue) {
+      if(newValue) {
+        this.sidebarFilter = false;
+        this.sidebarTraces = false;
+      }
+    },
+    sidebarFilter: function(newValue) {
+      if(newValue) {
+        this.sidebarView = false;
+        this.sidebarState = false;
+        this.sidebarTraces = false;
+        this.sidebarState = false;
+      }
+    },
+    sidebarTraces: function(newValue) {
+      if(newValue) {
+        this.sidebarView = false;
+        this.sidebarState = false;
+        this.sidebarFilter = false;
+        this.sidebarState = false;
+      }
+    },
+    sidebarState: function(newValue) {
+      if(newValue) {
+        this.sidebarFilter = false;
+        this.sidebarTraces = false;
+      }
+    },
+  },
   methods: {
     /**
      * switch map type