Extract vendor page subcomponents; structured Directus errors
Split the 316-line vendors index into VendorToolbar, VendorGrid, VendorList, and PerPageSelector under components/vendors/. Page now owns only search-param state and query orchestration. Replace generic Error throws in lib/directus.ts with a DirectusError class carrying status, statusText, collection, url, and parsed body. Surface useLocalStorage read/write failures via console.warn instead of swallowing them.
This commit is contained in:
37
frontend/src/components/vendors/per-page-selector.tsx
vendored
Normal file
37
frontend/src/components/vendors/per-page-selector.tsx
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { cn } from '~/lib/utils'
|
||||
|
||||
type Props = {
|
||||
value: number
|
||||
options?: readonly number[]
|
||||
onChange: (value: number) => void
|
||||
}
|
||||
|
||||
const DEFAULT_OPTIONS = [12, 24, 48] as const
|
||||
|
||||
export function PerPageSelector({ value, options = DEFAULT_OPTIONS, onChange }: Props) {
|
||||
return (
|
||||
<div className="mt-5 flex items-center justify-center gap-2">
|
||||
<span className="text-sm">Results per page:</span>
|
||||
<div className="inline-flex rounded-md border">
|
||||
{options.map((n, i) => (
|
||||
<Button
|
||||
key={n}
|
||||
variant={value === n ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
disabled={value === n}
|
||||
onClick={() => onChange(n)}
|
||||
className={cn(
|
||||
'rounded-none',
|
||||
i === 0 && 'rounded-l-md',
|
||||
i === options.length - 1 && 'rounded-r-md',
|
||||
i > 0 && 'border-l',
|
||||
)}
|
||||
>
|
||||
{n}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
8
frontend/src/components/vendors/types.ts
vendored
Normal file
8
frontend/src/components/vendors/types.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export type VendorLayout = 'GRID' | 'LIST'
|
||||
|
||||
export function truncateDescription(desc: string | null | undefined): string {
|
||||
if (!desc) return ''
|
||||
const head = desc.substring(0, 80)
|
||||
const end = head.lastIndexOf(' ')
|
||||
return desc.substring(0, end > 0 ? end : head.length) + ' …'
|
||||
}
|
||||
53
frontend/src/components/vendors/vendor-grid.tsx
vendored
Normal file
53
frontend/src/components/vendors/vendor-grid.tsx
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
|
||||
import { Card, CardContent } from '~/components/ui/card'
|
||||
import { Skeleton } from '~/components/ui/skeleton'
|
||||
import { assetUrl } from '~/lib/directus'
|
||||
import type { VendorListItem } from '~/lib/types'
|
||||
|
||||
import { truncateDescription } from './types'
|
||||
|
||||
type Props = {
|
||||
vendors: VendorListItem[]
|
||||
isLoading: boolean
|
||||
perPage: number
|
||||
}
|
||||
|
||||
export function VendorGrid({ vendors, isLoading, perPage }: Props) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
||||
{isLoading
|
||||
? Array.from({ length: perPage }).map((_, k) => (
|
||||
<Card key={k}>
|
||||
<Skeleton className="h-40 rounded-none" />
|
||||
<CardContent className="pt-4">
|
||||
<Skeleton className="mb-2 h-6" />
|
||||
<Skeleton className="mb-1 h-4" />
|
||||
<Skeleton className="h-4" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
: vendors.map((v) => (
|
||||
<Card key={v.id} className="group relative hover:border-primary/40">
|
||||
<img
|
||||
src={assetUrl(v.logo, 'logo-card')}
|
||||
alt={v.name}
|
||||
width={250}
|
||||
height={150}
|
||||
className="h-40 w-full rounded-t-lg bg-white object-contain"
|
||||
/>
|
||||
<CardContent className="pt-4">
|
||||
<Link
|
||||
to="/vendors/$slug"
|
||||
params={{ slug: v.slug }}
|
||||
className="mb-2 block text-base font-extrabold after:absolute after:inset-0"
|
||||
>
|
||||
{v.name}
|
||||
</Link>
|
||||
<p className="text-sm text-muted-foreground">{truncateDescription(v.description)}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
frontend/src/components/vendors/vendor-list.tsx
vendored
Normal file
57
frontend/src/components/vendors/vendor-list.tsx
vendored
Normal file
@@ -0,0 +1,57 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
|
||||
import { Skeleton } from '~/components/ui/skeleton'
|
||||
import { assetUrl } from '~/lib/directus'
|
||||
import type { VendorListItem } from '~/lib/types'
|
||||
|
||||
import { truncateDescription } from './types'
|
||||
|
||||
type Props = {
|
||||
vendors: VendorListItem[]
|
||||
isLoading: boolean
|
||||
perPage: number
|
||||
}
|
||||
|
||||
export function VendorList({ vendors, isLoading, perPage }: Props) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-md border">
|
||||
<table className="w-full caption-bottom text-sm">
|
||||
<tbody>
|
||||
{isLoading
|
||||
? Array.from({ length: perPage }).map((_, k) => (
|
||||
<tr key={k} className="border-b">
|
||||
<td className="w-[10%] p-3">
|
||||
<Skeleton className="h-12 w-12" />
|
||||
</td>
|
||||
<td className="w-[30%] p-3">
|
||||
<Skeleton className="h-6" />
|
||||
</td>
|
||||
<td className="w-[60%] p-3">
|
||||
<Skeleton className="h-6" />
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
: vendors.map((v) => (
|
||||
<tr key={v.id} className="border-b last:border-0 hover:bg-accent/50">
|
||||
<td className="w-[10%] p-3 align-middle">
|
||||
<img
|
||||
src={assetUrl(v.logo, 'logo-card')}
|
||||
alt={v.name}
|
||||
className="h-12 w-12 rounded-md bg-white object-contain"
|
||||
/>
|
||||
</td>
|
||||
<td className="w-[30%] p-3 align-middle font-medium">
|
||||
<Link to="/vendors/$slug" params={{ slug: v.slug }} className="hover:underline">
|
||||
{v.name}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="w-[60%] p-3 align-middle text-muted-foreground">
|
||||
{truncateDescription(v.description)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
113
frontend/src/components/vendors/vendor-toolbar.tsx
vendored
Normal file
113
frontend/src/components/vendors/vendor-toolbar.tsx
vendored
Normal file
@@ -0,0 +1,113 @@
|
||||
import { Check, Filter, FilterX, LayoutGrid, List, Loader2, Search, X } from 'lucide-react'
|
||||
|
||||
import { Button } from '~/components/ui/button'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '~/components/ui/dropdown-menu'
|
||||
import { Input } from '~/components/ui/input'
|
||||
import type { Category } from '~/lib/types'
|
||||
|
||||
import type { VendorLayout } from './types'
|
||||
|
||||
type Props = {
|
||||
searchInput: string
|
||||
onSearchInput: (value: string) => void
|
||||
onSearchClear: () => void
|
||||
isFetching: boolean
|
||||
categories: Category[]
|
||||
category: string
|
||||
onCategoryChange: (slug: string | undefined) => void
|
||||
layout: VendorLayout
|
||||
onLayoutChange: (layout: VendorLayout) => void
|
||||
}
|
||||
|
||||
export function VendorToolbar({
|
||||
searchInput,
|
||||
onSearchInput,
|
||||
onSearchClear,
|
||||
isFetching,
|
||||
categories,
|
||||
category,
|
||||
onCategoryChange,
|
||||
layout,
|
||||
onLayoutChange,
|
||||
}: Props) {
|
||||
return (
|
||||
<div className="mb-5 flex flex-col items-stretch gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<h1 className="text-2xl font-bold">Vendors</h1>
|
||||
<div className="flex h-9 items-center justify-center">
|
||||
{isFetching && <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="relative">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
className="pl-9 pr-9"
|
||||
placeholder="Search vendors"
|
||||
value={searchInput}
|
||||
onChange={(e) => onSearchInput(e.target.value.toLowerCase())}
|
||||
/>
|
||||
{searchInput && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
onClick={onSearchClear}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" aria-label="Filter by category">
|
||||
{category ? <FilterX /> : <Filter />}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{categories.map((cat) => (
|
||||
<DropdownMenuItem
|
||||
key={cat.slug}
|
||||
disabled={category === cat.slug}
|
||||
onSelect={() => onCategoryChange(cat.slug)}
|
||||
>
|
||||
{category === cat.slug && <Check className="h-4 w-4" />}
|
||||
{cat.name}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onSelect={() => onCategoryChange(undefined)}>Clear</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<div className="inline-flex rounded-md border">
|
||||
<Button
|
||||
variant={layout === 'GRID' ? 'secondary' : 'ghost'}
|
||||
size="icon"
|
||||
className="rounded-r-none"
|
||||
onClick={() => onLayoutChange('GRID')}
|
||||
aria-label="Grid layout"
|
||||
disabled={layout === 'GRID'}
|
||||
>
|
||||
<LayoutGrid />
|
||||
</Button>
|
||||
<Button
|
||||
variant={layout === 'LIST' ? 'secondary' : 'ghost'}
|
||||
size="icon"
|
||||
className="rounded-l-none border-l"
|
||||
onClick={() => onLayoutChange('LIST')}
|
||||
aria-label="List layout"
|
||||
disabled={layout === 'LIST'}
|
||||
>
|
||||
<List />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user