104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
import { useWrStore } from "@/app/store";
|
|
import { sttnHeadListType } from "@/app/store/ruseFcltMng/fcltSttn/rainSttn/headList";
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, } 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({ headList, type }: { headList: z.infer<typeof sttnHeadListType>, type: string }) {
|
|
const { rainChSttnHead, rswtChSttnHead, htdflChSttnHead, pbnstChSttnHead } = useWrStore((state) => state);
|
|
|
|
|
|
const items = headList.map(item => ({ id: item.id, title: item.title, val: item.visible }));
|
|
|
|
const form = useForm<z.infer<typeof sttnHeadListType>>({
|
|
resolver: zodResolver(sttnHeadListType),
|
|
defaultValues: headList,
|
|
});
|
|
|
|
useEffect(() => {
|
|
form.reset(headList);
|
|
}, [headList, form]);
|
|
|
|
const rawValues = form.watch();
|
|
const values: Array<{ visible: boolean }> = Array.isArray(rawValues)
|
|
? rawValues
|
|
: Object.values(rawValues);
|
|
|
|
const allChecked = values.every((v) => v.visible);
|
|
|
|
const toggleAll = (checked: boolean) => {
|
|
const newValues = values.map((v) => ({ ...v, visible: checked }));
|
|
form.reset(newValues);
|
|
};
|
|
|
|
const onSubmit = (valueList: z.infer<typeof sttnHeadListType>) => {
|
|
if (type === 'RNB') {
|
|
rainChSttnHead(valueList)
|
|
} else if (type === 'RST') {
|
|
rswtChSttnHead(valueList)
|
|
} else if (type === 'HTB') {
|
|
htdflChSttnHead(valueList)
|
|
} else if (type === 'PBN') {
|
|
pbnstChSttnHead(valueList)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
|
|
<div className="mb-4">
|
|
<h3>조회항목 설정</h3>
|
|
</div>
|
|
{/* 전체 선택/해제 체크박스 */}
|
|
<FormItem className="flex flex-row items-start space-x-3">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={allChecked}
|
|
onCheckedChange={(checked) => toggleAll(checked as boolean)}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="text-xl font-bold">전체</FormLabel>
|
|
</FormItem>
|
|
{items.map((item, index) => (
|
|
<FormField
|
|
key={`${index}.id`}
|
|
control={form.control}
|
|
name={`${index}.visible`}
|
|
render={({ field }) => {
|
|
return (
|
|
<FormItem
|
|
key={`${index}.id` + 'item'}
|
|
className="flex flex-row items-start space-x-3 space-y-0"
|
|
>
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
onCheckedChange={(checked) => {
|
|
field.onChange(checked);
|
|
return;
|
|
}
|
|
}
|
|
/>
|
|
</FormControl>
|
|
<FormLabel className="text-xl">
|
|
{item.title}
|
|
</FormLabel>
|
|
</FormItem>
|
|
);
|
|
}}
|
|
/>
|
|
))}
|
|
<Button type="submit">항목 표출 변경</Button>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|