c826f65bd6
Backend:
- GET /api/search?q={query} — returns up to 10 matching active clients and 10
matching pets in a single request; clients matched on name/email/phone,
pets matched on name/breed with owner name included
- Special chars (%, _, \) escaped before ILIKE to prevent injection/accidents
- Disabled clients excluded; pets from disabled client owners excluded via JOIN filter
- Route registered under protected API (auth + RBAC middleware applies automatically)
- Export `ilike` from @groombook/db alongside existing drizzle-orm helpers
Frontend:
- GlobalSearch component in sticky admin header: debounced input (300ms),
grouped dropdown (Clients / Pets sections), loading/empty states
- Client results show name + phone; pet results show name, breed, owner name
- Touch-friendly: 44px input height, 48px min row height, full-width dropdown
- Outside-click closes dropdown; selecting a result navigates to /admin/clients
Tests (apps/api/src/__tests__/search.test.ts):
- 400 on missing/empty/whitespace q
- Returns matching clients and pets
- Empty arrays on no match
- Response shape always has clients/pets keys
- Special character inputs handled without errors
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import { Hono } from "hono";
|
|
import { and, eq, getDb, clients, ilike, or, pets } from "@groombook/db";
|
|
|
|
export const searchRouter = new Hono();
|
|
|
|
const LIMIT = 10;
|
|
|
|
/** Escape %, _, and \ in user input before wrapping with ILIKE wildcards. */
|
|
function escapeLike(s: string): string {
|
|
return `%${s.replace(/[%_\\]/g, "\\$&")}%`;
|
|
}
|
|
|
|
/**
|
|
* GET /api/search?q={query}
|
|
*
|
|
* Returns up to 10 matching active clients and up to 10 matching pets.
|
|
* Clients are matched on name, email, or phone.
|
|
* Pets are matched on name or breed; includes owner name.
|
|
*/
|
|
searchRouter.get("/", async (c) => {
|
|
const q = c.req.query("q");
|
|
if (!q || q.trim().length === 0) {
|
|
return c.json({ error: "Query parameter q is required" }, 400);
|
|
}
|
|
|
|
const pattern = escapeLike(q.trim());
|
|
const db = getDb();
|
|
|
|
const [matchingClients, matchingPets] = await Promise.all([
|
|
db
|
|
.select({
|
|
id: clients.id,
|
|
name: clients.name,
|
|
email: clients.email,
|
|
phone: clients.phone,
|
|
})
|
|
.from(clients)
|
|
.where(
|
|
and(
|
|
eq(clients.status, "active"),
|
|
or(
|
|
ilike(clients.name, pattern),
|
|
ilike(clients.email, pattern),
|
|
ilike(clients.phone, pattern)
|
|
)
|
|
)
|
|
)
|
|
.limit(LIMIT),
|
|
|
|
db
|
|
.select({
|
|
id: pets.id,
|
|
name: pets.name,
|
|
breed: pets.breed,
|
|
clientId: pets.clientId,
|
|
ownerName: clients.name,
|
|
})
|
|
.from(pets)
|
|
.innerJoin(clients, and(eq(pets.clientId, clients.id), eq(clients.status, "active")))
|
|
.where(
|
|
or(
|
|
ilike(pets.name, pattern),
|
|
ilike(pets.breed, pattern)
|
|
)
|
|
)
|
|
.limit(LIMIT),
|
|
]);
|
|
|
|
return c.json({ clients: matchingClients, pets: matchingPets });
|
|
});
|