feat: use select

Author: tmg0

app/components/VisTable.vue

@@ -6,14 +6,18 @@ import { toast } from 'vue-sonner'
 interface Props {
   columns: string[]
   records: Record<string, any>[]
+  changes?: Record<string, Record<string, any[]>>
   editable?: boolean
   primaryKeys?: string[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  changes: () => ({}),
   primaryKeys: () => [],
 })
 
+const emit = defineEmits(['update:changes'])
+
 const Key = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#09090b">
   <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
 </svg>
@@ -56,7 +60,25 @@ VTable.register.icon('frozenCurrent', {
 })
 
 const domRef = ref()
-const changes = ref<Record<string, Record<string, any[]>>>({})
+const changes = useVModel(props, 'changes', emit)
+
+const records = computed(() => {
+  if (!props.editable)
+    return props.records
+
+  return props.records.map((record) => {
+    const key = generateRowKeyFromRecord(record)
+    record.__TABLITE_ROW_KEY = key
+
+    for (const column in record) {
+      const [_, changed] = changes.value[key]?.[column] ?? []
+      if (changed)
+        record[column] = changed
+    }
+
+    return record
+  })
+})
 
 const columns = computed(() => {
   const constantColumns = [
@@ -107,7 +129,7 @@ function fieldFormatGenerator(key: string) {
 
 const options = computed<any>(() => ({
   columns: columns.value,
-  records: props.records,
+  records: records.value,
   theme: TABLITE_THEME,
 
   defaultRowHeight: 32,
@@ -141,7 +163,7 @@ onMounted(() => {
     const column = columns.value[col]
     if (!column)
       return
-    const key = generateRowKeyFromIndex(row)
+    const key = instance.records[row - 1].__TABLITE_ROW_KEY
     if (!key)
       return
     if (!changes.value[key])
@@ -176,34 +198,26 @@ function triggerUndoToast(key: string, field: string, origin: any, row: number,
 
 watch(props, async () => {
   instance.updateOption(options.value)
-  changes.value = {}
 })
 
 function isEmpty(value: any) {
   return ['', undefined, null].includes(value)
 }
 
-function hasChanged(col: number, row: any) {
+function hasChanged(x: number, y: number) {
   if (!props.editable || !instance)
     return false
-  const record = instance.records[row - 1]
-  if (!record)
-    return false
-  const key = generateRowKeyFromIndex(row)
+  const key = instance.records[y - 1]?.__TABLITE_ROW_KEY
   if (!key)
     return false
-  const column = columns.value[col]
+  const column = columns.value[x]
   if (!column)
     return false
-
   const [_, v] = changes.value[key]?.[column.field] ?? []
   return v
 }
 
-function generateRowKeyFromIndex(index: number) {
-  const record = instance.records[index - 1]
-  if (!record)
-    return
+function generateRowKeyFromRecord(record: any) {
   const keys: Record<string, any> = {}
   props.primaryKeys.forEach((k) => {
     keys[k] = record[k]

app/composables/useSelect.ts

@@ -0,0 +1,25 @@
+export interface UseSelectOptions {
+  where?: MaybeRef<string>
+  limit?: MaybeRef<number>
+  offset?: MaybeRef<number>
+}
+
+export function useSelect(columns: MaybeRef<string[]>, from: MaybeRef<string>, options: UseSelectOptions = {}) {
+  const _where = toRef(options.where)
+  const _limit = toRef(options.limit)
+  const _offset = toRef(options.offset)
+
+  const sql = computed(() => [
+    'SELECT',
+    unref(columns).join(', ') || '*',
+    'FROM',
+    `\`${unref(from)}\``,
+    _where.value ? ['WHERE', _where.value] : undefined,
+    _limit.value ? ['LIMIT', _limit.value] : undefined,
+    _offset.value ? ['OFFSET', _offset.value] : undefined,
+  ].flat().join(' '))
+
+  return {
+    sql,
+  }
+}

app/composables/useTable.ts

@@ -81,6 +81,7 @@ export function useTable(tableName: MaybeRef<string>, cursorInstance: MaybeRef<D
   const primaryKeys = ref<string[]>([])
   const backend = useCursorBackend(cursor)
   const where = ref('')
+  const { sql } = useSelect([], table, { where, limit, offset })
 
   async function queryTableSchema(value: string) {
     if (backend.value === 'mysql')
@@ -114,7 +115,7 @@ export function useTable(tableName: MaybeRef<string>, cursorInstance: MaybeRef<D
     if (table.value && cursor.value) {
       try {
         isLoading.value[1] = true
-        data.value = await cursor.value?.select<any[]>(`SELECT * FROM \`${table.value}\` ${where.value} LIMIT ${limit.value} OFFSET ${offset.value};`) ?? []
+        data.value = await cursor.value?.select<any[]>(sql.value) ?? []
       }
       catch {
         data.value = []

app/pages/[id]/tables/index.vue

@@ -11,6 +11,7 @@ const selectedTable = ref('')
 const { data, limit, offset, count, structure, schema, primaryKeys, isLoading, backend, where, setup, execute } = useTable(selectedTable, cursor)
 const mode = ref('data')
 const columns = computed(() => structure.value.map(({ columnName }) => columnName))
+const changes = ref({})
 
 const page = computed({
   get() {
@@ -23,6 +24,10 @@ const page = computed({
 
 const pageTotal = computed(() => Math.floor(count.value / limit.value) + 1)
 
+watch(selectedTable, () => {
+  changes.value = {}
+})
+
 async function onSelectTable() {
   page.value = 1
   await Promise.allSettled([setup(), execute()])
@@ -36,10 +41,7 @@ async function onPaginationChange(value: number) {
 }
 
 async function onApplyFliters(value: string) {
-  if (!value)
-    where.value = ''
-  else
-    where.value = ['WHERE', value].join(' ')
+  where.value = value
   await onPaginationChange(1)
 }
 </script>
@@ -76,7 +78,7 @@ async function onApplyFliters(value: string) {
         <Separator />
 
         <div class="w-full h-0 flex-1 flex flex-col bg-zinc-50 -m-px">
-          <VisTable editable :columns="columns" :records="data" :primary-keys="primaryKeys" />
+          <VisTable v-model:changes="changes" editable :columns="columns" :records="data" :primary-keys="primaryKeys" />
         </div>
 
         <Separator />