feat: support filter on fields

client/components/data-table.vue

@@ -148,6 +148,7 @@ const pageSizes = [30, 50, 100, 150, 200, 500, 1000]
 
 const props = defineProps<{
   name: string
+  filter: boolean
 }>()
 
 const table = computed(() => store.database.tables[props.name])
@@ -181,7 +182,18 @@ async function updateData() {
     sort: querySort,
   }
   // await new Promise((res) => setInterval(() => res(0), 1000))
-  tableData.value = await sendQuery('get', props.name as never, {}, modifier)
+  try {
+    const row = props.filter ? Object.keys(state.newRow).reduce((o, field) => {
+      if (state.newRow[field]) {
+        o[field] = state.newRow[field]
+        o[field] = fromModelValue(field, o[field])
+      }
+      return o
+    }, {}): {}
+    tableData.value = await sendQuery('get', props.name as never, row, modifier)
+  } catch {
+    // Ignore invalid query
+  }
   await nextTick()
   state.loading = false
 }

client/icons/filter-off.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20">
+    <path fill="currentColor" d="M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z" />
+  </svg>
+</template>

client/icons/filter-on.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20">
+    <path fill="currentColor"  d="M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z" />
+  </svg>
+</template>

client/icons/index.ts

@@ -1,6 +1,10 @@
 import { icons } from '@koishijs/client'
 import Database from './database.vue'
 import Refresh from './refresh.vue'
+import FilterOff from './filter-off.vue'
+import FilterOn from './filter-on.vue'
 
 icons.register('database', Database)
 icons.register('refresh', Refresh)
+icons.register('filter-off', FilterOff)
+icons.register('filter-on', FilterOn)

client/index.vue

@@ -6,6 +6,9 @@
     </template>
 
     <template #menu>
+      <span class="menu-item" @click="filter = !filter">
+        <k-icon class="menu-icon" :name="filterIcon"></k-icon>
+      </span>
       <span class="menu-item" @click="table?.updateData()">
         <k-icon class="menu-icon" name="refresh"></k-icon>
       </span>
@@ -21,7 +24,7 @@
       <k-empty v-if="!current">
         <div>在左侧选择要访问的数据表</div>
       </k-empty>
-      <table-view v-else :key="current" :name="current" ref="table"></table-view>
+      <table-view v-else :key="current" :name="current" :filter="filter" ref="table"></table-view>
     </keep-alive>
   </k-layout>
 </template>
@@ -40,6 +43,9 @@ function join(source: string | string[]) {
 
 const table = ref()
 
+const filter = ref(false)
+const filterIcon = computed(() => filter.value ? 'filter-off' : 'filter-on')
+
 const route = useRoute()
 
 const current = computed<string>({