186 lines
8.0 KiB
TypeScript
186 lines
8.0 KiB
TypeScript
import { useCardStore } from "@/lib/store/useCardStore";
|
|
import { useForm } from "@tanstack/react-form";
|
|
import { Label } from "../ui/label";
|
|
import { Checkbox } from "../ui/checkbox";
|
|
import { Input } from "../ui/input";
|
|
// import {
|
|
// Select,
|
|
// SelectContent,
|
|
// SelectGroup,
|
|
// SelectItem,
|
|
// SelectLabel,
|
|
// SelectTrigger,
|
|
// SelectValue,
|
|
// } from "../ui/select";
|
|
import { Button } from "../ui/button";
|
|
|
|
export default function Cards(card: any) {
|
|
const { addCard, removeCard, cards } = useCardStore();
|
|
let existing: any = cards.filter((n: any) => n.name === card.name);
|
|
|
|
//console.log(existing);
|
|
const form = useForm({
|
|
defaultValues: {
|
|
name: existing[0]?.name || card.name,
|
|
rowType: existing[0]?.type ?? card.rowType,
|
|
age: existing[0]?.age ?? 90,
|
|
active: existing[0]?.active ?? false,
|
|
},
|
|
onSubmit: async ({ value }) => {
|
|
console.log(value);
|
|
const testCard: any = cards.filter(
|
|
(i: any) => i.name === value.name
|
|
);
|
|
|
|
if (value.active) {
|
|
const newCard = {
|
|
name: `${value.name}`,
|
|
rowType: value.rowType,
|
|
age: value.age ?? 90,
|
|
active: value.active,
|
|
};
|
|
if (testCard.length > 0) {
|
|
removeCard(value.name);
|
|
addCard(newCard);
|
|
return;
|
|
}
|
|
// change the name for a type card
|
|
|
|
addCard(newCard);
|
|
} else {
|
|
removeCard(value.name);
|
|
}
|
|
},
|
|
});
|
|
return (
|
|
<div className="border-solid border-2 m-2">
|
|
<p>{card.name}</p>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
className="flex flex-row"
|
|
>
|
|
<form.Field
|
|
name="active"
|
|
// validators={{
|
|
// // We can choose between form-wide and field-specific validators
|
|
// onChange: ({ value }) =>
|
|
// value.length > 3
|
|
// ? undefined
|
|
// : "Username must be longer than 3 letters",
|
|
// }}
|
|
children={(field) => {
|
|
return (
|
|
<div className="m-2 p-2 flex flex-row">
|
|
<div>
|
|
<Label htmlFor="active">
|
|
<span>Active</span>
|
|
</Label>
|
|
</div>
|
|
|
|
<Checkbox
|
|
className="ml-2"
|
|
name={field.name}
|
|
onBlur={field.handleBlur}
|
|
checked={field.state.value}
|
|
onCheckedChange={(e) =>
|
|
field.handleChange(e)
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
{!card.inventory && (
|
|
<>
|
|
<form.Field
|
|
name="age"
|
|
// validators={{
|
|
// // We can choose between form-wide and field-specific validators
|
|
// onChange: ({ value }) =>
|
|
// value.length > 3
|
|
// ? undefined
|
|
// : "Username must be longer than 3 letters",
|
|
// }}
|
|
children={(field) => {
|
|
return (
|
|
<div className="m-2 min-w-48 p-2">
|
|
<Label htmlFor="active" className="">
|
|
Age
|
|
</Label>
|
|
<Input
|
|
name={field.name}
|
|
onBlur={field.handleBlur}
|
|
value={field.state.value}
|
|
type="number"
|
|
onChange={(e) =>
|
|
field.handleChange(
|
|
e.target.value
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
|
|
{/* <form.Field
|
|
name="rowType"
|
|
//listeners={{onChange: ({value})=>{}}}
|
|
children={(field) => {
|
|
return (
|
|
<div className="m-2 min-w-48 max-w-96 p-2">
|
|
<Label htmlFor={field.name}>
|
|
Row Type
|
|
</Label>
|
|
<Select
|
|
value={field.state.value}
|
|
onValueChange={field.handleChange}
|
|
>
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue
|
|
id={field.name}
|
|
placeholder="Select Role"
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectLabel>
|
|
Row Type
|
|
</SelectLabel>
|
|
<SelectItem value="empty">
|
|
Empty
|
|
</SelectItem>
|
|
<SelectItem value="fg">
|
|
Finished Goods
|
|
</SelectItem>
|
|
<SelectItem value="materials">
|
|
Materials
|
|
</SelectItem>
|
|
<SelectItem value="waste">
|
|
Waste
|
|
</SelectItem>
|
|
<SelectItem value="packaging">
|
|
Packaging
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
}}
|
|
/> */}
|
|
</>
|
|
)}
|
|
<div className="mt-7">
|
|
<Button type="submit" onClick={() => form.handleSubmit()}>
|
|
Save Card
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|