96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
import { useWrStore } from "@/app/store";
|
|
import { pbnSttHeadList } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn";
|
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@common/business_components/ui";
|
|
import { Button, Checkbox } from "@common/components/ui";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
export default function HeadChModal() {
|
|
const { pbnStt } = useWrStore((state) => state);
|
|
|
|
|
|
|
|
const items = pbnSttHeadList.map(item => ({id:item.id, label:item.title}));
|
|
|
|
|
|
|
|
|
|
const FormSchema = z.object({
|
|
items: z.array(z.string()).refine((value) => value.some((item) => item), {
|
|
message: "You have to select at least one item.",
|
|
}),
|
|
})
|
|
|
|
const form = useForm<z.infer<typeof FormSchema>>({
|
|
resolver: zodResolver(FormSchema),
|
|
})
|
|
|
|
|
|
|
|
const onSubmit = (val : z.infer<typeof FormSchema>) =>{
|
|
|
|
console.log(val)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
|
<FormField
|
|
control={form.control}
|
|
name="items"
|
|
render={() => (
|
|
<FormItem>
|
|
<div className="mb-4">
|
|
<FormLabel className="text-base">Sidebar</FormLabel>
|
|
<FormDescription>
|
|
Select the items you want to display in the sidebar.
|
|
</FormDescription>
|
|
</div>
|
|
{items.map((item) => (
|
|
<FormField
|
|
key={item.id}
|
|
control={form.control}
|
|
name="items"
|
|
render={({ field }) => {
|
|
return (
|
|
<FormItem
|
|
key={item.id}
|
|
className="flex flex-row items-start space-x-3 space-y-0"
|
|
>
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value?.includes(item.id)}
|
|
onCheckedChange={(checked) => {
|
|
return checked
|
|
? field.onChange([...field.value, item.id])
|
|
: field.onChange(
|
|
field.value?.filter(
|
|
(value) => value !== item.id
|
|
)
|
|
);
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="text-sm font-normal">
|
|
{item.label}
|
|
</FormLabel>
|
|
</FormItem>
|
|
);
|
|
}}
|
|
/>
|
|
))}
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<Button type="submit">Submit</Button>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|