fix: paginate SQL favorites

ui/chen/components/QueryConsolePanel.vue

@@ -206,10 +206,9 @@ function handleSqlFileChange(event: Event) {
   emit("uploadSql", props.tab, file);
 }
 
-async function openSnippetDialog() {
-  selectSnippetDialogOpen.value = true;
+async function loadSnippetPage(page: number) {
   try {
-    await sqlSnippets.load();
+    await sqlSnippets.load(page);
   } catch (cause) {
     addErrorToast({
       title: "Failed to load SQL",
@@ -218,6 +217,11 @@ async function openSnippetDialog() {
   }
 }
 
+async function openSnippetDialog() {
+  selectSnippetDialogOpen.value = true;
+  await loadSnippetPage(1);
+}
+
 function openSaveSnippetDialog() {
   saveSnippetDialogOpen.value = true;
 }
@@ -491,8 +495,12 @@ defineExpose({ editorSnapshot });
       :snippets="sqlSnippets.snippets.value"
       :loading="sqlSnippets.loading.value"
       :deleting-id="sqlSnippets.deletingId.value"
+      :page="sqlSnippets.page.value"
+      :page-size="sqlSnippets.pageSize"
+      :total="sqlSnippets.total.value"
       @insert="insertSqlSnippet"
       @delete="deleteSqlSnippet"
+      @page-change="loadSnippetPage"
     />
   </div>
 </template>

ui/chen/components/SqlSnippetSelectDialog.vue

@@ -8,12 +8,16 @@ const props = defineProps<{
   snippets: ChenSqlSnippet[];
   loading: boolean;
   deletingId: string;
+  page: number;
+  pageSize: number;
+  total: number;
 }>();
 
 const emit = defineEmits<{
   "update:open": [open: boolean];
   insert: [snippet: ChenSqlSnippet];
   delete: [snippet: ChenSqlSnippet];
+  pageChange: [page: number];
 }>();
 
 const deleteDialogOpen = ref(false);
@@ -41,49 +45,62 @@ function confirmDelete() {
 </script>
 
 <template>
-  <ChenWorkspaceModal v-model:open="visible" title="Select SQL" :ui="{ content: 'sm:max-w-3xl' }">
+  <ChenWorkspaceModal v-model:open="visible" title="Select SQL" :dismissible="false" :ui="{ content: 'sm:max-w-3xl' }">
     <template #body>
       <div v-if="loading" class="grid min-h-32 place-items-center text-muted">
         <UIcon name="i-lucide-loader-circle" class="size-5 animate-spin" />
       </div>
 
       <div v-else-if="!snippets.length" class="grid min-h-32 place-items-center text-sm text-muted">No saved SQL.</div>
 
-      <div v-else class="max-h-[60vh] overflow-auto rounded-md border border-default">
-        <table class="w-full table-fixed text-left text-sm">
-          <thead class="sticky top-0 bg-elevated text-muted">
-            <tr>
-              <th class="w-36 px-3 py-2 font-medium">Name</th>
-              <th class="px-3 py-2 font-medium">Content</th>
-              <th class="w-36 px-3 py-2" />
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-default">
-            <tr v-for="snippet in snippets" :key="snippet.id" class="hover:bg-elevated/60">
-              <td class="truncate px-3 py-2" :title="snippet.name">
-                {{ snippet.name }}
-              </td>
-              <td class="truncate px-3 py-2 font-mono text-xs text-muted" :title="snippet.args">
-                {{ snippet.args }}
-              </td>
-              <td class="px-3 py-2">
-                <div class="flex justify-end gap-1">
-                  <UButton size="xs" variant="ghost" @click="emit('insert', snippet)">Insert</UButton>
-                  <UButton
-                    size="xs"
-                    color="error"
-                    variant="ghost"
-                    :loading="deletingId === snippet.id"
-                    :disabled="Boolean(deletingId)"
-                    @click="requestDelete(snippet)"
-                  >
-                    Delete
-                  </UButton>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <div v-else>
+        <div class="max-h-[60vh] overflow-auto rounded-md border border-default">
+          <table class="w-full table-fixed text-left text-sm">
+            <thead class="sticky top-0 bg-elevated text-muted">
+              <tr>
+                <th class="w-36 px-3 py-2 font-medium">Name</th>
+                <th class="px-3 py-2 font-medium">Content</th>
+                <th class="w-36 px-3 py-2" />
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-default">
+              <tr v-for="snippet in snippets" :key="snippet.id" class="hover:bg-elevated/60">
+                <td class="truncate px-3 py-2" :title="snippet.name">
+                  {{ snippet.name }}
+                </td>
+                <td class="truncate px-3 py-2 font-mono text-xs text-muted" :title="snippet.args">
+                  {{ snippet.args }}
+                </td>
+                <td class="px-3 py-2">
+                  <div class="flex justify-end gap-1">
+                    <UButton size="xs" variant="ghost" @click="emit('insert', snippet)">Insert</UButton>
+                    <UButton
+                      size="xs"
+                      color="error"
+                      variant="ghost"
+                      :loading="deletingId === snippet.id"
+                      :disabled="Boolean(deletingId)"
+                      @click="requestDelete(snippet)"
+                    >
+                      Delete
+                    </UButton>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="total > pageSize" class="mt-3 flex items-center justify-between gap-3">
+          <span class="text-xs text-muted">{{ total }} saved SQL</span>
+          <UPagination
+            :page="page"
+            :items-per-page="pageSize"
+            :total="total"
+            size="sm"
+            @update:page="emit('pageChange', $event)"
+          />
+        </div>
       </div>
     </template>
   </ChenWorkspaceModal>

ui/chen/composables/useChenSqlSnippets.ts

@@ -1,4 +1,4 @@
-import type { SqlSnippetPayload } from "~/composables/useApiRequest";
+import type { SqlSnippetListParams, SqlSnippetPayload } from "~/composables/useApiRequest";
 
 import { ref } from "vue";
 import { createSqlSnippet, deleteSqlSnippet, getSqlSnippets } from "~/composables/useApiRequest";
@@ -11,7 +11,7 @@ export interface ChenSqlSnippet {
 }
 
 interface ChenSqlSnippetRequests {
-  list: () => Promise<unknown>;
+  list: (query: SqlSnippetListParams) => Promise<unknown>;
   create: (payload: SqlSnippetPayload) => Promise<unknown>;
   remove: (id: string) => Promise<unknown>;
 }
@@ -35,6 +35,11 @@ function snippetModuleValue(module: unknown) {
   return String(module || "");
 }
 
+function snippetCount(value: unknown, fallback: number) {
+  const count = Number((value as any)?.count);
+  return Number.isInteger(count) && count >= 0 ? count : fallback;
+}
+
 export function normalizeChenSqlSnippets(value: unknown, dbType: string): ChenSqlSnippet[] {
   return rawSnippetList(value).flatMap((raw): ChenSqlSnippet[] => {
     const id = String(raw?.id || "");
@@ -53,15 +58,27 @@ export function normalizeChenSqlSnippets(value: unknown, dbType: string): ChenSq
 }
 
 export function useChenSqlSnippets(getDbType: () => string, requests: ChenSqlSnippetRequests = defaultRequests) {
+  const pageSize = 10;
   const snippets = ref<ChenSqlSnippet[]>([]);
+  const page = ref(1);
+  const total = ref(0);
   const loading = ref(false);
   const saving = ref(false);
   const deletingId = ref("");
 
-  async function load() {
+  async function load(nextPage = page.value) {
+    page.value = Math.max(1, Math.trunc(nextPage));
     loading.value = true;
     try {
-      snippets.value = normalizeChenSqlSnippets(await requests.list(), getDbType());
+      const dbType = getDbType();
+      const data = await requests.list({
+        module: dbType,
+        limit: pageSize,
+        offset: (page.value - 1) * pageSize,
+        order: "-date_updated"
+      });
+      snippets.value = normalizeChenSqlSnippets(data, dbType);
+      total.value = snippetCount(data, snippets.value.length);
     } finally {
       loading.value = false;
     }
@@ -80,6 +97,7 @@ export function useChenSqlSnippets(getDbType: () => string, requests: ChenSqlSni
     deletingId.value = id;
     try {
       await requests.remove(id);
+      if (snippets.value.length === 1 && page.value > 1) page.value -= 1;
       await load();
     } finally {
       deletingId.value = "";
@@ -89,8 +107,11 @@ export function useChenSqlSnippets(getDbType: () => string, requests: ChenSqlSni
   return {
     deletingId,
     loading,
+    page,
+    pageSize,
     saving,
     snippets,
+    total,
     load,
     remove,
     save

ui/composables/useApiRequest.ts

@@ -45,6 +45,13 @@ export interface SqlSnippetPayload {
   module: string;
 }
 
+export interface SqlSnippetListParams extends Record<string, unknown> {
+  module: string;
+  limit: number;
+  offset: number;
+  order: string;
+}
+
 export interface CommandSnippetPayload extends SqlSnippetPayload {
   comment?: string;
 }
@@ -359,10 +366,11 @@ export function updateCommandSnippet(id: string, payload: CommandSnippetPayload)
   });
 }
 
-export function getSqlSnippets(): Promise<unknown> {
+export function getSqlSnippets(query: SqlSnippetListParams): Promise<unknown> {
   return apiRequest<unknown>({
     method: "GET",
-    path: "/api/v1/ops/adhocs/"
+    path: "/api/v1/ops/adhocs/",
+    query
   });
 }