Add search/filtering and confirmation dialogs to admin UI

borisno2 · claude · borisno2 · commit 7486d57828b8 · 2025-10-17T22:42:54.000+11:00
- Implement search functionality across text fields in list views - Add search bar UI with clear button and URL state management - Fix SQLite compatibility by removing mode: 'insensitive' parameter - Create reusable ConfirmDialog component for destructive actions - Add delete functionality with confirmation dialog to ItemFormClient - Preserve search state in pagination URLs - Export ConfirmDialog component from UI package 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/examples/blog/app/admin/[[...admin]]/page.tsx b/examples/blog/app/admin/[[...admin]]/page.tsx
@@ -26,20 +26,23 @@ async function serverAction(props: ServerActionInput) {
 
 interface AdminPageProps {
   params: Promise<{ admin?: string[] }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }
 
 /**
  * Main admin interface using catch-all route
  * Handles all admin routes: /admin, /admin/Post, /admin/Post/create, /admin/Post/[id]
  */
-export default async function AdminPage({ params }: AdminPageProps) {
+export default async function AdminPage({ params, searchParams }: AdminPageProps) {
   const resolvedParams = await params;
+  const resolvedSearchParams = await searchParams;
   const adminContext = await getAdminContext(config, prisma);
 
   return (
     <AdminUI
       context={adminContext}
       params={resolvedParams.admin}
+      searchParams={resolvedSearchParams}
       basePath="/admin"
       serverAction={serverAction}
     />
diff --git a/packages/ui/src/components/AdminUI.tsx b/packages/ui/src/components/AdminUI.tsx
@@ -8,6 +8,7 @@ import { getListKeyFromUrl } from "@opensaas/core";
 export interface AdminUIProps {
   context: AdminContext;
   params?: string[];
+  searchParams?: { [key: string]: string | string[] | undefined };
   basePath?: string;
   // Generic server action
   serverAction: (input: ServerActionInput) => Promise<any>;
@@ -26,6 +27,7 @@ export interface AdminUIProps {
 export function AdminUI({
   context,
   params = [],
+  searchParams = {},
   basePath = "/admin",
   serverAction,
 }: AdminUIProps) {
@@ -69,8 +71,17 @@ export function AdminUI({
     );
   } else {
     // List view
+    const search = typeof searchParams.search === 'string' ? searchParams.search : undefined;
+    const page = typeof searchParams.page === 'string' ? parseInt(searchParams.page, 10) : 1;
+
     content = (
-      <ListView context={context} listKey={listKey} basePath={basePath} />
+      <ListView
+        context={context}
+        listKey={listKey}
+        basePath={basePath}
+        search={search}
+        page={page}
+      />
     );
   }
 
diff --git a/packages/ui/src/components/ConfirmDialog.tsx b/packages/ui/src/components/ConfirmDialog.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+
+export interface ConfirmDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  variant?: "danger" | "warning";
+}
+
+/**
+ * Reusable confirmation dialog component
+ * Used for destructive actions like delete
+ */
+export function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "danger",
+}: ConfirmDialogProps) {
+  if (!isOpen) return null;
+
+  const confirmButtonClass =
+    variant === "danger"
+      ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+      : "bg-yellow-600 text-white hover:bg-yellow-700";
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onCancel}
+      />
+
+      {/* Dialog */}
+      <div className="relative bg-card border border-border rounded-lg shadow-lg max-w-md w-full mx-4 p-6">
+        <h2 className="text-xl font-semibold mb-2">{title}</h2>
+        <p className="text-muted-foreground mb-6">{message}</p>
+
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm font-medium rounded-md border border-border bg-background hover:bg-accent transition-colors"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${confirmButtonClass}`}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/ItemFormClient.tsx b/packages/ui/src/components/ItemFormClient.tsx
@@ -3,6 +3,7 @@
 import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { FieldRenderer } from "./fields/FieldRenderer.js";
+import { ConfirmDialog } from "./ConfirmDialog.js";
 import { cn } from "../lib/utils.js";
 import type { FieldConfig } from "@opensaas/core";
 import type { ServerActionInput } from "../server/types.js";
@@ -112,6 +113,7 @@ export function ItemFormClient({
     if (!itemId) return;
 
     setGeneralError(null);
+    setShowDeleteConfirm(false);
 
     startTransition(async () => {
       try {
@@ -126,11 +128,9 @@ export function ItemFormClient({
           router.refresh();
         } else {
           setGeneralError("Access denied or failed to delete item");
-          setShowDeleteConfirm(false);
         }
       } catch (error: any) {
         setGeneralError(error.message || "Failed to delete item");
-        setShowDeleteConfirm(false);
       }
     });
   };
@@ -197,46 +197,32 @@ export function ItemFormClient({
 
         {/* Delete Button (Edit Mode Only) */}
         {mode === "edit" && itemId && (
-          <div>
-            {!showDeleteConfirm ? (
-              <button
-                type="button"
-                onClick={() => setShowDeleteConfirm(true)}
-                disabled={isPending}
-                className={cn(
-                  "px-4 py-2 bg-destructive text-destructive-foreground rounded-md font-medium",
-                  "hover:bg-destructive/90 transition-colors",
-                  "disabled:opacity-50 disabled:cursor-not-allowed",
-                )}
-              >
-                Delete
-              </button>
-            ) : (
-              <div className="flex items-center space-x-2">
-                <span className="text-sm text-muted-foreground">
-                  Are you sure?
-                </span>
-                <button
-                  type="button"
-                  onClick={handleDelete}
-                  disabled={isPending}
-                  className="px-3 py-1 bg-destructive text-destructive-foreground rounded text-sm font-medium hover:bg-destructive/90"
-                >
-                  Yes, delete
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setShowDeleteConfirm(false)}
-                  disabled={isPending}
-                  className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-sm font-medium hover:bg-secondary/90"
-                >
-                  Cancel
-                </button>
-              </div>
+          <button
+            type="button"
+            onClick={() => setShowDeleteConfirm(true)}
+            disabled={isPending}
+            className={cn(
+              "px-4 py-2 bg-destructive text-destructive-foreground rounded-md font-medium",
+              "hover:bg-destructive/90 transition-colors",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
             )}
-          </div>
+          >
+            Delete
+          </button>
         )}
       </div>
+
+      {/* Delete Confirmation Dialog */}
+      <ConfirmDialog
+        isOpen={showDeleteConfirm}
+        title="Delete Item"
+        message="Are you sure you want to delete this item? This action cannot be undone."
+        confirmLabel="Delete"
+        cancelLabel="Cancel"
+        variant="danger"
+        onConfirm={handleDelete}
+        onCancel={() => setShowDeleteConfirm(false)}
+      />
     </form>
   );
 }
diff --git a/packages/ui/src/components/ListView.tsx b/packages/ui/src/components/ListView.tsx
@@ -11,6 +11,7 @@ export interface ListViewProps {
   columns?: string[];
   page?: number;
   pageSize?: number;
+  search?: string;
 }
 
 /**
@@ -24,6 +25,7 @@ export async function ListView({
   columns,
   page = 1,
   pageSize = 50,
+  search,
 }: ListViewProps) {
   const key = getDbKey(listKey);
   const urlKey = getUrlKey(listKey);
@@ -47,17 +49,36 @@ export async function ListView({
 
   try {
     const dbContext = context.context.db;
-    console.log({ dbContext });
     if (!dbContext || !dbContext[key]) {
       throw new Error(`Context for ${listKey} not found`);
     }
 
+    // Build search filter if search term provided
+    let where: any = undefined;
+    if (search && search.trim()) {
+      // Find all text fields to search across
+      const searchableFields = Object.entries(listConfig.fields)
+        .filter(([_, field]) => (field as any).type === 'text')
+        .map(([fieldName]) => fieldName);
+
+      if (searchableFields.length > 0) {
+        where = {
+          OR: searchableFields.map(fieldName => ({
+            [fieldName]: {
+              contains: search.trim(),
+            },
+          })),
+        };
+      }
+    }
+
     [items, total] = await Promise.all([
       dbContext[key].findMany({
+        where,
         skip,
         take: pageSize,
       }),
-      dbContext[key].count(),
+      dbContext[key].count({ where }),
     ]);
   } catch (error) {
     console.error(`Failed to fetch ${listKey}:`, error);
@@ -98,6 +119,7 @@ export async function ListView({
         page={page}
         pageSize={pageSize}
         total={total || 0}
+        search={search}
       />
     </div>
   );
diff --git a/packages/ui/src/components/ListViewClient.tsx b/packages/ui/src/components/ListViewClient.tsx
@@ -15,6 +15,7 @@ export interface ListViewClientProps {
   page: number;
   pageSize: number;
   total: number;
+  search?: string;
 }
 
 /**
@@ -31,10 +32,12 @@ export function ListViewClient({
   page,
   pageSize,
   total,
+  search: initialSearch,
 }: ListViewClientProps) {
   const router = useRouter();
   const [sortBy, setSortBy] = useState<string | null>(null);
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [searchInput, setSearchInput] = useState(initialSearch || "");
 
   // Determine which columns to show
   const displayColumns =
@@ -68,8 +71,62 @@ export function ListViewClient({
     }
   };
 
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    const params = new URLSearchParams();
+    if (searchInput.trim()) {
+      params.set('search', searchInput.trim());
+    }
+    params.set('page', '1'); // Reset to page 1 on new search
+    router.push(`${basePath}/${urlKey}?${params.toString()}`);
+  };
+
+  const handleClearSearch = () => {
+    setSearchInput('');
+    router.push(`${basePath}/${urlKey}`);
+  };
+
+  const buildPaginationUrl = (newPage: number) => {
+    const params = new URLSearchParams();
+    if (initialSearch) {
+      params.set('search', initialSearch);
+    }
+    params.set('page', newPage.toString());
+    return `${basePath}/${urlKey}?${params.toString()}`;
+  };
+
   return (
     <div className="space-y-4">
+      {/* Search Bar */}
+      <div className="bg-card border border-border rounded-lg p-4">
+        <form onSubmit={handleSearch} className="flex gap-2">
+          <div className="flex-1 relative">
+            <input
+              type="text"
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              placeholder="Search..."
+              className="w-full h-10 px-4 pr-10 rounded-md border border-input bg-background text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            />
+            {searchInput && (
+              <button
+                type="button"
+                onClick={handleClearSearch}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+          <button
+            type="submit"
+            className="px-4 h-10 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90 transition-colors"
+          >
+            Search
+          </button>
+        </form>
+      </div>
+
       {/* Table */}
       <div className="bg-card border border-border rounded-lg overflow-hidden">
         <div className="overflow-x-auto">
@@ -146,9 +203,7 @@ export function ListViewClient({
           </p>
           <div className="flex items-center space-x-2">
             <button
-              onClick={() =>
-                router.push(`${basePath}/${urlKey}?page=${page - 1}`)
-              }
+              onClick={() => router.push(buildPaginationUrl(page - 1))}
               disabled={!hasPrevPage}
               className={cn(
                 "px-4 py-2 text-sm font-medium rounded-md border border-border",
@@ -163,9 +218,7 @@ export function ListViewClient({
               Page {page} of {totalPages}
             </span>
             <button
-              onClick={() =>
-                router.push(`${basePath}/${urlKey}?page=${page + 1}`)
-              }
+              onClick={() => router.push(buildPaginationUrl(page + 1))}
               disabled={!hasNextPage}
               className={cn(
                 "px-4 py-2 text-sm font-medium rounded-md border border-border",
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
