Files
frontend/apps/wr/components/ui/modal/headChModal/headChModal.tsx
T

106 lines
3.5 KiB
TypeScript

import { useWrStore } from "@/app/store";
import type { TableProps } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg";
import type { TableTripleProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
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 { useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
export default function HeadChModal({type }:{type: string }) {
const { sttnCommon ,chSttnHead} = useWrStore((state) => state);
const { rainSttHeadList,pbnSttHeadList } =sttnCommon;
let items = rainSttHeadList.map(item => ({id:item.id, label:item.title}));
const FormSchema = z.object({
data: z.array(z.string()).refine((value) => value.some((item) => item), {
message: "최소한 하나를 선택해주시길 바랍니다.",
}),
})
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
data: [],
},
})
const onSubmit = (val : z.infer<typeof FormSchema>) =>{
if(val?.data.length > 0)
chSttnHead(val?.data, 'rain')
}
return (
<>
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="data"
render={() => (
<FormItem>
<div className="mb-4">
<FormLabel className="text-2xl"> 조회항목 설정</FormLabel>
</div>
{items.map((item) => (
<FormField
key={item.id}
control={form.control}
name="data"
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-xl">
{item.label}
</FormLabel>
</FormItem>
);
}}
/>
))}
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">항목 표출 변경</Button>
</form>
</Form>
</div>
</>
);
}