Citali/v2.app.gaertan.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom YCH typs for commission page

Browse Source
This commit is contained in:
Citali
2026-02-01 16:08:08 +01:00
parent 1940867519
commit aa95635e3e
6 changed files with 364 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/commissions/CommissionOrderForm.tsx
View File

@ -14,6 +14,9 @@ import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import type {
CommissionCustomInput,
CommissionCustomCard,
CommissionCustomCardExtra,
CommissionCustomCardOption,
CommissionExtra,
CommissionOption,
CommissionType,
@ -37,15 +40,40 @@ type CommissionTypeWithRelations = CommissionType & {
customInputs: (CommissionTypeCustomInput & { customInput: CommissionCustomInput })[];
};
type Props = {
types: CommissionTypeWithRelations[];
type CommissionCustomCardWithRelations = CommissionCustomCard & {
options: (CommissionCustomCardOption & { option: CommissionOption })[];
extras: (CommissionCustomCardExtra & { extra: CommissionExtra })[];
};
export function CommissionOrderForm({ types }: Props) {
type Props = {
types: CommissionTypeWithRelations[];
customCards: CommissionCustomCardWithRelations[];
};
type SelectedOption = {
id: string;
optionId: string;
option: CommissionOption;
price: number | null;
pricePercent: number | null;
priceRange: string | null;
};
type SelectedExtra = {
id: string;
extraId: string;
extra: CommissionExtra;
price: number | null;
pricePercent: number | null;
priceRange: string | null;
};
export function CommissionOrderForm({ types, customCards }: Props) {
const form = useForm<z.infer<typeof commissionOrderSchema>>({
resolver: zodResolver(commissionOrderSchema),
defaultValues: {
typeId: "",
customCardId: "",
optionId: "",
extraIds: [],
customerName: "",
@ -59,19 +87,49 @@ export function CommissionOrderForm({ types }: Props) {
const [isSubmitting, setIsSubmitting] = useState(false);
const typeId = useWatch({ control: form.control, name: "typeId" });
const customCardId = useWatch({ control: form.control, name: "customCardId" });
const optionId = useWatch({ control: form.control, name: "optionId" });
const extraIds = useWatch({ control: form.control, name: "extraIds" });
const selectedType = useMemo(() => types.find((t) => t.id === typeId), [types, typeId]);
const selectedCustomCard = useMemo(
() => customCards.find((c) => c.id === customCardId),
[customCards, customCardId]
);
const selection = useMemo<{
kind: "type" | "custom";
name: string;
options: SelectedOption[];
extras: SelectedExtra[];
} | null>(() => {
if (selectedCustomCard) {
return {
kind: "custom",
name: selectedCustomCard.name,
options: selectedCustomCard.options,
extras: selectedCustomCard.extras,
};
}
if (selectedType) {
return {
kind: "type",
name: selectedType.name,
options: selectedType.options,
extras: selectedType.extras,
};
}
return null;
}, [selectedCustomCard, selectedType]);
const selectedOption = useMemo(
() => selectedType?.options.find((o) => o.optionId === optionId),
[selectedType, optionId]
() => selection?.options.find((o) => o.optionId === optionId),
[selection, optionId]
);
const selectedExtras = useMemo(
() => selectedType?.extras.filter((e) => extraIds?.includes(e.extraId)) ?? [],
[selectedType, extraIds]
() => selection?.extras.filter((e) => extraIds?.includes(e.extraId)) ?? [],
[selection, extraIds]
);
const [minPrice, maxPrice] = useMemo(() => {
@ -84,6 +142,7 @@ export function CommissionOrderForm({ types }: Props) {
try {
const payload = {
typeId: values.typeId || null,
customCardId: values.customCardId || null,
optionId: values.optionId || null,
extraIds: values.extraIds ?? [],
customerName: values.customerName,
@ -100,6 +159,7 @@ export function CommissionOrderForm({ types }: Props) {
form.reset({
typeId: "",
customCardId: "",
optionId: "",
extraIds: [],
customerName: "",
@ -136,7 +196,12 @@ export function CommissionOrderForm({ types }: Props) {
key={type.id}
type="button"
variant={field.value === type.id ? "default" : "outline"}
onClick={() => field.onChange(type.id)}
onClick={() => {
field.onChange(type.id);
form.setValue("customCardId", "");
form.setValue("optionId", "");
form.setValue("extraIds", []);
}}
disabled={isSubmitting}
>
{type.name}
@ -149,7 +214,40 @@ export function CommissionOrderForm({ types }: Props) {
)}
/>
{selectedType && (
{customCards.length > 0 ? (
<FormField
control={form.control}
name="customCardId"
render={({ field }) => (
<FormItem>
<FormLabel>Custom requests / YCH</FormLabel>
<FormControl>
<div className="flex flex-wrap gap-2">
{customCards.map((card) => (
<Button
key={card.id}
type="button"
variant={field.value === card.id ? "default" : "outline"}
onClick={() => {
field.onChange(card.id);
form.setValue("typeId", "");
form.setValue("optionId", "");
form.setValue("extraIds", []);
}}
disabled={isSubmitting}
>
{card.name}
</Button>
))}
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
) : null}
{selection && (
<>
<FormField
control={form.control}
@ -159,7 +257,7 @@ export function CommissionOrderForm({ types }: Props) {
<FormLabel>Base Option</FormLabel>
<FormControl>
<div className="space-y-1">
{selectedType.options.map((opt) => (
{selection.options.map((opt) => (
<label key={opt.id} className="flex items-center gap-2">
<input
type="radio"
@ -186,7 +284,7 @@ export function CommissionOrderForm({ types }: Props) {
<FormLabel>Extras</FormLabel>
<FormControl>
<div className="space-y-1">
{selectedType.extras.map((ext) => (
{selection.extras.map((ext) => (
<label key={ext.id} className="flex items-center gap-2">
<input
type="checkbox"