From 7107ca6ee317d02dd48c5ff85c059c16b10cc13f Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 27 Mar 2023 15:42:59 +0800
Subject: [PATCH] Discover: fix sidebarTraces style :deep code.

---
 src/components/Discover/sidebarState.vue  |  5 ++--
 src/components/Discover/sidebarTraces.vue |  8 +++---
 src/views/Discover/index.vue              | 35 ++++++++++++++++++++---
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/components/Discover/sidebarState.vue b/src/components/Discover/sidebarState.vue
index e12fccf..1e224f5 100644
--- a/src/components/Discover/sidebarState.vue
+++ b/src/components/Discover/sidebarState.vue
@@ -6,8 +6,8 @@
         <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('insight')" :class="tab === 'insight'? 'text-neutral-900': ''">Insight</li>
       </ul>
     </template>
+    <!-- header: summary -->
     <div v-if="tab === 'summary'">
-    <!-- <div> -->
       <!-- Stats -->
       <ul class="pb-4 border-b border-neutral-300">
         <li>
@@ -71,8 +71,8 @@
 
       </div>
     </div>
+    <!-- header: insight -->
     <div v-if="tab === 'insight'">
-    <!-- <div> -->
       <div class="border-b-2 border-neutral-300 mb-4">
         <p class="h2">Most frequent</p>
         <ul class="list-disc ml-6">
@@ -163,7 +163,6 @@
     </div>
   </Sidebar>
 </template>
-<!-- @hide="hide" @show="show" -->
 
 <script>
 import getNumberLabel from '@/module/numberLabel.js';
diff --git a/src/components/Discover/sidebarTraces.vue b/src/components/Discover/sidebarTraces.vue
index e14801a..b984be1 100644
--- a/src/components/Discover/sidebarTraces.vue
+++ b/src/components/Discover/sidebarTraces.vue
@@ -195,17 +195,17 @@ export default {
 
 <style scoped>
 /* 進度條顏色 */
-:deep .p-progressbar .p-progressbar-value {
+:deep(.p-progressbar .p-progressbar-value) {
   @apply bg-primary
 }
 /* Table set */
-:deep .p-datatable-thead th {
+:deep(.p-datatable-thead th) {
   @apply sticky top-0 left-0 z-10 bg-neutral-10
 }
-:deep .p-datatable .p-datatable-thead > tr > th {
+:deep(.p-datatable .p-datatable-thead > tr > th) {
   @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500
 }
-:deep .p-datatable .p-datatable-tbody > tr > td {
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
   @apply border-neutral-500 !border-t-0
 }
 </style>
diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue
index b385b75..4985d8c 100644
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -8,7 +8,7 @@
         </span>
       </li>
       <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow hover:border-primary" @click="sidebarFilter = true" :class="{'border-primary': sidebarFilter}">
-        <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']">
+        <span class="material-symbols-outlined text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']">
           tornado
         </span>
       </li>
@@ -53,8 +53,28 @@
 
   <Sidebar v-model:visible="sidebarFilter" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
     <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': ''">Filter</li>
+        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('funnel')" :class="tab === 'funnel'? 'text-neutral-900': ''">Funnel</li>
+      </ul>
     </template>
+    <!-- header: filter -->
+    <div v-if="tab === 'filter'" class="pt-4 bg-neutral-100">
+      <!-- filter silect -->
+      <div>
+        <div>
+          <p class="h2">Filter Type</p>
+
+        </div>
+      </div>
+    </div>
+
+
+
+
+
+    <!-- header: funnel -->
+    <div v-if="tab === 'funnel'"></div>
   </Sidebar>
 </template>
 
@@ -106,16 +126,23 @@ export default {
       sidebarState: false, // SideBar: Summary & Insight
       sidebarTraces: false, // SideBar: Traces
       sidebarFilter: false, // SideBar: Filter
-      iii:null,
+
+      tab: 'filter',
     }
   },
   computed:{
     sidebarLeftValue: function() {
-      let result = this.sidebarView === true || this.sidebarTraces === true;
+      let result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true;
       return result;
     }
   },
   methods: {
+    /**
+     * @param {string} switch Summary or Insight
+     */
+     switchTab(tab) {
+      this.tab = tab;
+    },
     /**
      * switch map type
      * @param {string} type processMap | bpmn