Add table filter in schema sidebar #7

src/components/Schema.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="schema-container">
     <div id="schema-filter">
-      <text-field placeholder="Search table" width="100%"/>
+      <text-field placeholder="Search table" width="100%" v-model="filter"/>
     </div>
     <div id="db">
       <div @click="schemaVisible = !schemaVisible" class="db-name">
         <svg
-          :style="{transform: schemaVisible ? 'rotate(90deg)' : 'rotate(0)'}"
+          :style="{ transform: schemaVisible ? 'rotate(90deg)' : 'rotate(0)' }"
           class="chevron-icon"
           width="9"
           height="9"
@@ -24,25 +24,14 @@
       <div class="db-edit">
         <input type="file" id="actual-btn"  ref="dbfile" hidden @change="changeDb"/>
         <label for="actual-btn">
-          <svg
+          <change-db-icon />
-            class="db-edit-icon"
-            width="18"
-            height="18"
-            viewBox="0 0 18 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3 10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12 9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3 6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75 8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995 9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78 8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z"
-            fill="#A2B1C6"/>
-          </svg>
         </label>
-        <span class="db-edit-tooltip">Change database</span>
       </div>
     </div>
-    <div v-show="schemaVisible" class="schema">
+    <div v-if="schemaVisible" class="schema">
       <table-description
-        v-for="(table, index) in schema"
+        v-for="table in schema"
-        :key="index"
+        :key="table[0]"
         :name="table[0]"
         :sql="table[1]"
       />
@@ -53,18 +42,32 @@
 <script>
 import TableDescription from '@/components/TableDescription'
 import TextField from '@/components/TextField'
+import ChangeDbIcon from '@/components/svg/changeDb'
 
 export default {
   name: 'Schema',
-  components: { TableDescription, TextField },
+  components: {
+    TableDescription,
+    TextField,
+    ChangeDbIcon
+  },
   data () {
     return {
-      schemaVisible: true
+      schemaVisible: true,
+      filter: null
     }
   },
   computed: {
     schema () {
-      return this.$store.state.schema
+      if (!this.$store.state.schema) {
+        return []
+      }
+
+      return !this.filter
+        ? this.$store.state.schema
+        : this.$store.state.schema.filter(
+          table => table[0].toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
+        )
     },
     dbName () {
       return this.$store.state.dbName
@@ -122,36 +125,4 @@ export default {
 >>> .table-name:hover .chevron-icon path {
   fill: #506784;
 }
-
-.db-edit {
-  position: relative;
-}
-.db-edit-icon {
-  display: block;
-}
-.db-edit-icon:hover path{
-  fill: var(--color-accent);
-  cursor: pointer;
-}
-
-.db-edit-tooltip {
-  visibility: hidden;
-  background-color: rgba(80, 103, 132, 0.75);
-  color: #fff;
-  text-align: center;
-  font-size: 11px;
-  padding: 0 6px;
-  line-height: 19px;;
-  position: absolute;
-  z-index: 5;
-  height: 19px;
-  left: 24px;
-  top: -12px;
-  border-radius: var(--border-radius-medium);
-  white-space: nowrap;
-}
-
-.db-edit:hover .db-edit-tooltip {
-  visibility: visible;
-}
 </style>

src/components/svg/changeDb.vue

@@ -0,0 +1,70 @@
+<template>
+<div>
+  <svg
+    class="db-edit-icon"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    @mouseover="showTooltip"
+    @mouseout="$set(tooltipStyle, 'visibility', 'hidden')"
+  >
+    <path
+      d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3 10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12 9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3 6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75 8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995 9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78 8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z"
+      fill="#A2B1C6"
+    />
+  </svg>
+  <span class="db-edit-tooltip" :style="tooltipStyle">
+    Change database
+  </span>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'changeDbIcon',
+  data () {
+    return {
+      tooltipStyle: {}
+    }
+  },
+  methods: {
+    showTooltip (e) {
+      this.tooltipStyle = {
+        visibility: 'visible',
+        position: 'fixed',
+        top: e.clientY - 12 + 'px',
+        left: e.clientX + 12 + 'px'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.db-edit-icon {
+  display: block;
+  cursor: pointer;
+}
+.db-edit-icon:hover path {
+  fill: var(--color-accent);
+}
+.db-edit-tooltip {
+  visibility: hidden;
+  background-color: rgba(80, 103, 132, 0.75);
+  color: #fff;
+  text-align: center;
+  font-size: 11px;
+  padding: 0 6px;
+  line-height: 19px;;
+  position: fixed;
+  z-index: 5;
+  height: 19px;
+  left: 100px;
+  top: 100px;
+  border-radius: var(--border-radius-medium);
+  white-space: nowrap;
+  z-index: 999;
+}
+</style>