ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

신규등록 팝업 및 데이터 처리 변경

Browse Source
This commit is contained in:
leedj312
2025-03-26 16:48:26 +09:00
parent 489be4ce19
commit cf518a46c3
5 changed files with 142 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx
+16 -5
View File
@@ -1,7 +1,9 @@
'use client'
import { useWrStore } from "@/app/store";
import type { bdstType, rainRuseType, TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"
import { BdstReg } from "@/components/ui/form/fcltReg/bdstReg/bdstRegForm";
import { RainRegForm } from "@/components/ui/form/fcltReg/rainReg/component";
import { BdstRegModal } from "@/components/ui/modal/bdstReg/component";
import { ScrollArea, SearchDiv, SearchInput, UiTable } from "@common/business_components";
import { Button, TableHead, TableRow } from "@common/components";
import { useEffect, useState } from "react";
@@ -55,13 +57,22 @@ export default function Home() {
}
}, [code,bdstObj]);
const cellClick=(val:number)=>{
let data
if(bdstObj.length>0) {
data =rainRuseObj.filter((item)=> item.bdstInfoFk===val)
if((bdstTable ?? []).length > 0) {
data =rainRuseObj.filter((item)=> item.bdstInfoFk===bdstTable?.[val]?.bdstInfoPk)
setRinBdstForm(data)
}
}
const divTest =()=>{
return(
<>
<BdstReg />
</>
)
}
return (
<>
@@ -75,8 +86,8 @@ export default function Home() {
</div>
<div className='w-1/5 flex items-center justify-end'>
<Button className='mr-4 rounded-lg'>조회</Button>
<Button className='mr-4 rounded-lg'>저장</Button>
<Button className='mr-4 rounded-lg'>신규등록</Button>
<BdstRegModal butNm="신규등록" title='건축물 시설 등록(빗물이용시설)' body={<BdstReg></BdstReg>} />
{/* <Button className='mr-4 rounded-lg' onClick={()=>bdstRegModal('ㅁ',divTest())}>신규등록</Button> */}
</div>
</SearchDiv>
</div>
apps/wr/components/ui/form/fcltReg/bdstReg/bdstRegForm.tsx
+63
View File
@@ -0,0 +1,63 @@
'use client'
import { headMakeColSpan } from "@/app/ruseFcltMng/fcltReg/rainReg/page";
import { useWrStore } from "@/app/store";
import { selectClass, type bdstType } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { SelectBox, UiTable } from "@common/business_components";
import { Button, Input } from "@common/components";
import { useEffect, useState } from "react";
export function BdstReg(){
const { rain, code,init } = useWrStore((state) => {
return state
});
const[bdstTable, setbdstTable] = useState <bdstType[]> ();
const {bdstObj, rainRuseObj } =rain
const getCity =(val:string|number)=>{
console.log(val)
}
const getSgg =(val:string|number)=>{
console.log(val)
}
useEffect ( () => {
if(code.sggCd.length>0){
const table= bdstObj.map((item) => {
const sggText= code.sggCd.find((cd)=>cd.val.toString() === item.sggCd )?.text;
const cityText= code.cityCd.find((cd)=>cd.val.toString() === item.ctpvCd )?.text;
return(
{...item,
sggText:sggText,
cityText:cityText
})
})
setbdstTable(table)
}
}, [code,bdstObj]);
const cellClick = ()=>{
}
const nodeList = headMakeColSpan(rain.upHeadList)
return(
<>
<h2>건축물조회</h2> < h2/>
<div className="grid grid-cols-12 gap-2">
<SelectBox className='col-span-3' label={''} selectClass={selectClass} selectArray={code.cityCd} onSelectValue={getCity } > </SelectBox>
<SelectBox className='col-span-3' label={""} selectClass={selectClass} selectArray={code.sggCd} onSelectValue={getSgg }> </SelectBox>
<Input className='col-span-3'></Input>
<Button className='col-span-1'> 조회</Button>
</div>
<div>
<UiTable tableData={bdstTable || []} headlist={rain.upHeadList} pageSize={-10} total={-1} headName={undefined} cellClick={cellClick}>
{nodeList}
</UiTable>
</div>
</>
)
}
apps/wr/components/ui/form/fcltReg/rainReg/component.tsx
+28 -9
View File
@@ -1,7 +1,7 @@
"use client";
import { Form, FormField, SelectBox } from "@common/business_components/ui";
import { Input } from "@common/components/ui";
import { Button, Input } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
@@ -33,11 +33,17 @@ export function RainRegForm({data}:{data:rainRuseType[]} ) {
const { rain ,code} = useWrStore((state) => state);
const {rainFcltCd } = code
useEffect(() => {
console.log(data);
console.log("form data:", data);
if (data && data.length > 0) {
form.reset(data[0]); // Assuming the first item matches the form schema
const selectedOption = rainFcltCd.find(item => item.val === String(data[0].pntfColKnd));
const formData = {
...data[0],
pntfColKnd: selectedOption ? selectedOption.val : ""
};
console.log("Setting form data:", formData);
form.reset(formData);
}
}, [data]);
}, [data, rainFcltCd]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@@ -60,6 +66,14 @@ export function RainRegForm({data}:{data:rainRuseType[]} ) {
},
});
// form 값이 변경될 때마다 로그 출력
useEffect(() => {
const subscription = form.watch((value) => {
console.log("form values changed:", value);
});
return () => subscription.unsubscribe();
}, [form]);
// 2. Define a submit handler.
function onSubmit(values: z.infer<typeof formSchema>) {
// Do something with the form values.
@@ -76,8 +90,9 @@ export function RainRegForm({data}:{data:rainRuseType[]} ) {
<form onSubmit={form.handleSubmit(onSubmit)}>
{/* <div className="flex justify-between items-center mx-3"> */}
<div>
<div>
<h1 className="pl-3 text-xl ">○ 빗물이용시설 운영정보</h1>
<div className="grid grid-cols-12">
<h1 className="pl-3 text-xl col-span-10">○ 빗물이용시설 운영정보</h1>
<Button className='mr-4 rounded-lg col-span-2'>저장</Button>
</div>
</div>
<h1 className="bg-gray-400 text-xl text-center border-2 p-2 mt-4 ">
@@ -94,7 +109,7 @@ export function RainRegForm({data}:{data:rainRuseType[]} ) {
className=""
type="date"
onChange={(e) => field.onChange(e.target.value ? new Date(e.target.value) : undefined)}
value={field.value ? field.value.toISOString().split('T')[0] : ""}
value={field.value ? field?.value.toString().split('T')[0] : ""}
/>
</FormUi>
)}
@@ -138,8 +153,12 @@ export function RainRegForm({data}:{data:rainRuseType[]} ) {
selectClass={selectClass}
label={""}
selectArray={rainFcltCd}
onSelectValue={onSelectValue}
{...field}
onSelectValue={(val) => {
field.onChange(val);
onSelectValue(val);
}}
value={field.value}
defaultValue={field.value}
/>
</FormUi>
)}
apps/wr/components/ui/modal/bdstReg/component.tsx
+33
View File
@@ -0,0 +1,33 @@
import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@common/components";
type ModalType={
bodyClass:string
butNm:string
title:string
body:React.ReactNode
}
export function BdstRegModal({bodyClass,butNm,title ,body}:ModalType ) {
return (
<>
<Dialog >
<DialogTrigger asChild>
<Button className="mr-4 rounded-lg">{butNm}</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-7xl">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
<DialogDescription>
</DialogDescription>
</DialogHeader>
{body}
<DialogFooter className="sm:justify-start">
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}
apps/wr/components/ui/modal/pbnstMng/component.tsx
+2
View File
@@ -15,6 +15,8 @@ export function PbnstMngModal(butNm:string,chldrn:React.ReactNode) {
</DialogDescription>
</DialogHeader>
{chldrn}
<DialogFooter className="sm:justify-start">
<DialogClose asChild>
<Button type="button" variant="secondary">