161 lines
6.5 KiB
TypeScript
161 lines
6.5 KiB
TypeScript
"use client"
|
|
|
|
import type { FieldValues, FieldPath } from "react-hook-form"
|
|
import { Trash2 } from "lucide-react"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { Input } from "@/shared/components/ui/input"
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableHead,
|
|
TableRow,
|
|
TableCell,
|
|
} from "@/shared/components/ui/table"
|
|
import { RhfResourceField } from "@/shared/components/resource-selector"
|
|
import { partColumns } from "./parts-columns"
|
|
import { PARTS_ROUTES } from "@garage/api"
|
|
import type { PartsClient } from "@garage/api"
|
|
|
|
type PartItem = {
|
|
part_id: number
|
|
title: string
|
|
quantity: number
|
|
rate: number
|
|
discount_amount?: number
|
|
description?: string
|
|
}
|
|
|
|
type PartsItemsFieldConstraint = PartItem[] | undefined
|
|
|
|
export type PartsSelectorFieldProps<
|
|
TValues extends FieldValues,
|
|
TName extends FieldPath<TValues>,
|
|
> = {
|
|
name: TName & (TValues[TName] extends PartsItemsFieldConstraint ? TName : never)
|
|
label?: string
|
|
triggerLabel?: string
|
|
showDiscount?: boolean
|
|
}
|
|
|
|
export function PartsSelectorField<
|
|
TValues extends FieldValues,
|
|
TName extends FieldPath<TValues>,
|
|
>({
|
|
name,
|
|
label = "Parts",
|
|
triggerLabel = "Add Parts",
|
|
showDiscount = false,
|
|
}: PartsSelectorFieldProps<TValues, TName>) {
|
|
return (
|
|
<RhfResourceField<TValues, TName, PartsClient>
|
|
name={name}
|
|
label={label}
|
|
triggerLabel={triggerLabel}
|
|
itemKey="part_id"
|
|
dialogProps={{
|
|
title: "Select Parts",
|
|
crudProps: {
|
|
routeKey: PARTS_ROUTES.INDEX,
|
|
getClient: (api) => api.parts,
|
|
columns: [
|
|
partColumns.title,
|
|
partColumns.partNumber,
|
|
partColumns.manufacturer,
|
|
partColumns.purchasePrice,
|
|
partColumns.stock,
|
|
],
|
|
},
|
|
}}
|
|
mapSelected={(row) => {
|
|
const r = row as any
|
|
return {
|
|
part_id: r.id,
|
|
title: r.title || "",
|
|
quantity: 1,
|
|
rate: Number(r.purchase_price) || 0,
|
|
description: "",
|
|
} as any
|
|
}}
|
|
renderItems={(items, { remove, update }) => (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Part</TableHead>
|
|
<TableHead className="w-24">Qty</TableHead>
|
|
<TableHead className="w-28">Rate</TableHead>
|
|
{showDiscount && <TableHead className="w-28">Discount</TableHead>}
|
|
<TableHead>Description</TableHead>
|
|
<TableHead className="w-12" />
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{((items as PartItem[] | undefined) ?? []).map((item, index) => (
|
|
<TableRow key={item.part_id}>
|
|
<TableCell className="font-medium">{item.title}</TableCell>
|
|
<TableCell>
|
|
<Input
|
|
type="number"
|
|
min={1}
|
|
value={item.quantity}
|
|
onChange={(e) =>
|
|
update(index, { ...item, quantity: Number(e.target.value) || 1 } as any)
|
|
}
|
|
className="h-8 w-20"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
step={0.01}
|
|
value={item.rate}
|
|
onChange={(e) =>
|
|
update(index, { ...item, rate: Number(e.target.value) || 0 } as any)
|
|
}
|
|
className="h-8 w-24"
|
|
/>
|
|
</TableCell>
|
|
{showDiscount && (
|
|
<TableCell>
|
|
<Input
|
|
type="number"
|
|
min={0}
|
|
step={0.01}
|
|
value={item.discount_amount ?? 0}
|
|
onChange={(e) =>
|
|
update(index, { ...item, discount_amount: Number(e.target.value) || 0 } as any)
|
|
}
|
|
className="h-8 w-24"
|
|
/>
|
|
</TableCell>
|
|
)}
|
|
<TableCell>
|
|
<Input
|
|
value={item.description ?? ""}
|
|
onChange={(e) =>
|
|
update(index, { ...item, description: e.target.value } as any)
|
|
}
|
|
placeholder="Optional description"
|
|
className="h-8"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => remove(index)}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-destructive" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
/>
|
|
)
|
|
}
|