updates
This commit is contained in:
@@ -0,0 +1,337 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import {
|
||||
useFormContext,
|
||||
useController,
|
||||
type FieldValues,
|
||||
type FieldPath,
|
||||
} from "react-hook-form"
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { Check, PlusIcon, X } from "lucide-react"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { LABEL_ROUTES } from "@garage/api"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { ScrollArea } from "@/shared/components/ui/scroll-area"
|
||||
import {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldError,
|
||||
FieldDescription,
|
||||
} from "@/shared/components/ui/field"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
|
||||
// ── Types ──
|
||||
|
||||
export type LabelItem = {
|
||||
id: number
|
||||
title: string
|
||||
color_code: string
|
||||
}
|
||||
|
||||
type RhfLabelPickerFieldProps<
|
||||
TValues extends FieldValues,
|
||||
TName extends FieldPath<TValues>,
|
||||
> = {
|
||||
name: TName
|
||||
label?: string
|
||||
description?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
placeholder?: string
|
||||
}
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
function extractLabels(response: unknown): LabelItem[] {
|
||||
if (Array.isArray(response)) return response
|
||||
const obj = response as any
|
||||
if (Array.isArray(obj?.data?.data)) return obj.data.data
|
||||
if (Array.isArray(obj?.data)) return obj.data
|
||||
return []
|
||||
}
|
||||
|
||||
// ── Component ──
|
||||
|
||||
export function RhfLabelPickerField<
|
||||
TValues extends FieldValues,
|
||||
TName extends FieldPath<TValues>,
|
||||
>({
|
||||
name,
|
||||
label,
|
||||
description,
|
||||
required,
|
||||
disabled,
|
||||
placeholder = "Select labels...",
|
||||
}: RhfLabelPickerFieldProps<TValues, TName>) {
|
||||
const api = useAuthApi()
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { control } = useFormContext<TValues>()
|
||||
const { field, fieldState: { error } } = useController({ name, control, disabled })
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [search, setSearch] = useState("")
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [newTitle, setNewTitle] = useState("")
|
||||
const [newColor, setNewColor] = useState("#6366f1")
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const { data: allLabels = [] } = useQuery<LabelItem[]>({
|
||||
queryKey: [LABEL_ROUTES.INDEX],
|
||||
queryFn: async () => {
|
||||
const res = await api.labels.list()
|
||||
return extractLabels(res)
|
||||
},
|
||||
staleTime: 5 * 60 * 1000,
|
||||
})
|
||||
|
||||
const selected: LabelItem[] = field.value ?? []
|
||||
|
||||
const filtered = search
|
||||
? allLabels.filter((l) =>
|
||||
l.title.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
: allLabels
|
||||
|
||||
function toggle(lbl: LabelItem) {
|
||||
const isSelected = selected.some((s) => s.id === lbl.id)
|
||||
if (isSelected) {
|
||||
field.onChange(selected.filter((s) => s.id !== lbl.id))
|
||||
} else {
|
||||
field.onChange([...selected, lbl])
|
||||
}
|
||||
}
|
||||
|
||||
function remove(id: number, e: React.MouseEvent) {
|
||||
e.stopPropagation()
|
||||
field.onChange(selected.filter((s) => s.id !== id))
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
if (!newTitle.trim()) return
|
||||
setIsSubmitting(true)
|
||||
try {
|
||||
const res = await api.labels.create({
|
||||
title: newTitle.trim(),
|
||||
color_code: newColor,
|
||||
}) as any
|
||||
const created = res?.data ?? res
|
||||
queryClient.invalidateQueries({ queryKey: [LABEL_ROUTES.INDEX] })
|
||||
if (created?.id) {
|
||||
field.onChange([
|
||||
...selected,
|
||||
{
|
||||
id: created.id,
|
||||
title: created.title ?? newTitle.trim(),
|
||||
color_code: created.color_code ?? newColor,
|
||||
},
|
||||
])
|
||||
}
|
||||
setNewTitle("")
|
||||
setNewColor("#6366f1")
|
||||
setCreating(false)
|
||||
} catch {
|
||||
// silent – toast handled upstream if desired
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Field data-invalid={!!error || undefined}>
|
||||
{label && (
|
||||
<FieldLabel>
|
||||
{label}
|
||||
{required && (
|
||||
<span className="text-destructive ms-0.5">*</span>
|
||||
)}
|
||||
</FieldLabel>
|
||||
)}
|
||||
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<div
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault()
|
||||
setOpen((v) => !v)
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"flex min-h-9 w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1.5 text-sm transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||
disabled && "cursor-not-allowed opacity-50",
|
||||
error && "border-destructive",
|
||||
)}
|
||||
>
|
||||
{selected.length === 0 && (
|
||||
<span className="text-muted-foreground">
|
||||
{placeholder}
|
||||
</span>
|
||||
)}
|
||||
{selected.map((s) => (
|
||||
<span
|
||||
key={s.id}
|
||||
className="inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: s.color_code + "28",
|
||||
borderColor: s.color_code + "80",
|
||||
color: s.color_code,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="h-2 w-2 shrink-0 rounded-full"
|
||||
style={{ backgroundColor: s.color_code }}
|
||||
/>
|
||||
{s.title}
|
||||
<button
|
||||
type="button"
|
||||
className="ml-0.5 rounded-full opacity-70 hover:opacity-100"
|
||||
onClick={(e) => remove(s.id, e)}
|
||||
tabIndex={-1}
|
||||
aria-label={`Remove ${s.title}`}
|
||||
>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent
|
||||
className="flex w-64 flex-col overflow-hidden p-0"
|
||||
align="start"
|
||||
style={{
|
||||
maxHeight:
|
||||
"var(--radix-popover-content-available-height, 320px)",
|
||||
}}
|
||||
>
|
||||
{/* Search */}
|
||||
<div className="shrink-0 p-2">
|
||||
<Input
|
||||
placeholder="Search labels..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="h-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="px-1 pb-1">
|
||||
{filtered.length === 0 && (
|
||||
<p className="py-4 text-center text-xs text-muted-foreground">
|
||||
No labels found
|
||||
</p>
|
||||
)}
|
||||
{filtered.map((lbl) => {
|
||||
const isSelected = selected.some(
|
||||
(s) => s.id === lbl.id,
|
||||
)
|
||||
return (
|
||||
<button
|
||||
key={lbl.id}
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
|
||||
onClick={() => toggle(lbl)}
|
||||
>
|
||||
<span
|
||||
className="h-3 w-3 shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: lbl.color_code,
|
||||
}}
|
||||
/>
|
||||
<span className="flex-1 text-start">
|
||||
{lbl.title}
|
||||
</span>
|
||||
{isSelected && (
|
||||
<Check className="h-3.5 w-3.5 text-primary" />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Footer: create */}
|
||||
<div className="shrink-0 border-t p-2">
|
||||
{creating ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Input
|
||||
placeholder="Label name"
|
||||
value={newTitle}
|
||||
onChange={(e) => setNewTitle(e.target.value)}
|
||||
className="h-8"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
handleCreate()
|
||||
}
|
||||
if (e.key === "Escape") setCreating(false)
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={newColor}
|
||||
onChange={(e) =>
|
||||
setNewColor(e.target.value)
|
||||
}
|
||||
className="h-8 w-8 cursor-pointer rounded border p-0.5"
|
||||
title="Pick a color"
|
||||
/>
|
||||
<span className="flex-1 text-xs text-muted-foreground">
|
||||
Color
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="h-7 text-xs"
|
||||
onClick={handleCreate}
|
||||
disabled={
|
||||
isSubmitting || !newTitle.trim()
|
||||
}
|
||||
>
|
||||
{isSubmitting ? "..." : "Create"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setCreating(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-full justify-start gap-1.5 text-xs"
|
||||
onClick={() => setCreating(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
Create label
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{description && (
|
||||
<FieldDescription>{description}</FieldDescription>
|
||||
)}
|
||||
{error && <FieldError>{error.message}</FieldError>}
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user