하수재이용 신규등록 팝업

apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx

@@ -19,7 +19,7 @@ import type { customPbnst, fcBizSchema, fcBizType, ruseFcltType } from "@/app/st
 import { PbnstMngForm } from "@/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm";
 import { PbnstBuseForm } from "@/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm";
 import { z } from "zod";
-import { BdstReg } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
+import { PbnstRegModal } from "@/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal";
 
 export default function PublicReuseFaciltyInsert() {
   const { code, pbnst, pubHasuInit,pbnstRegInit } = useWrStore((state) => state);
@@ -99,7 +99,7 @@ useEffect(() => {
                   <Button
                     size={"sm"}
                     className=""
-                    onClick={() =>{} }
+                    onClick={() => setIsNewReg(!issNewReg) }
                   >
                     신규등록
                   </Button>
@@ -140,7 +140,14 @@ useEffect(() => {
             </Tabs>
                 </ScrollArea>
           </ListDiv>
-         
+          <UiModal
+            body={<PbnstRegModal></PbnstRegModal>}
+            bodyClass="w-[68vw] max-w-none h-[90vh]"
+            open={issNewReg}
+            onOpenChange={(open) => {
+              setIsNewReg(open);
+            }}
+          />
         </div>
       </ContentsDiv>
     </>

apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx

@@ -37,7 +37,10 @@ import {
 import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable";
 
 export function PbnstBuseForm({ data }: { data: fcBizType[] }) {
-  const ref = useRef<ppInstlType[] | null>(data[0]?.pplInstls ?? null);
+  // const ref = useRef<ppInstlType[] | null>(data[0]?.pplInstls ?? null);
+  const ref = useRef<ppInstlType[] | null>(
+    Array.isArray(data) && data.length > 0 ? data[0]?.pplInstls ?? null : null
+  );
   const { code, pbnst } = useWrStore((state) => state);
   const { pbnstBizCycle, pbnstRes } = pbnst;
   const [getBizCycle, setBizCycle] = useState("1");

apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx

@@ -1,29 +1,23 @@
 "use client";
 
-import { SelectBox } from "@common/business_components";
-import { FileUpload, FormUi, UiTable } from "@common/business_components/ui";
-import { Form, FormField } from "@common/business_components/ui/form";
-import { Button, Input, TableHead, TableRow } from "@common/components";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { use, useEffect, useRef, useState } from "react";
-import { set, useFieldArray, useForm } from "react-hook-form";
-import { nullable, z } from "zod";
 import { useWrStore } from "@/app/store";
-import {
-  selectClass,
-  type TableUpperProps,
-} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
+import { FileUpload, FormUi } from "@common/business_components/ui";
+import { Form, FormField } from "@common/business_components/ui/form";
+import { Button, Input } from "@common/components";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useRef, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { z } from "zod";
 
+import { pbnstRegZod, type customPbnst, type operType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 import {
   commonButonSize,
   formH1Class,
-  formH2Class,
-  formTableName,
+  formTableName
 } from "@/components/lib/class/comClass";
-import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable";
 import { TusClientUpload } from "@/components/lib/useTus_wr/useTusWr";
+import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable";
 import type { Upload } from "tus-js-client";
-import { pbnstRegZod, type customPbnst, type operType, type ruseFcltType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 
 export function PbnstMngForm({ data }: { data: customPbnst }) {
   const { pbnst ,pbnstUpdate} = useWrStore((state) => state);
@@ -44,7 +38,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
    
 
 
-  const ref = useRef<operType[] | null>(data.fcOpers ?? null);
+  const ref = useRef<operType[] | null>(data?.fcOpers ?? null);
   const form = useForm<z.infer<typeof pbnstRegZod>>({
     resolver: zodResolver(pbnstRegZod),
     defaultValues: pbnstRegZod.parse({}),
@@ -83,7 +77,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
 
   useEffect(() => {
       form.reset(data);
-      setRuseOperData(data.fcOpers);
+      setRuseOperData(data?.fcOpers);
   }, [data]);
 
   // 2. Define a submit handler.
@@ -178,7 +172,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
             <div>
               <h1 className={formH1Class}>재이용수 공급 가능량</h1>
               <div className="grid grid-cols-12 gap-4">
-                <div className="col-span-3">
+                <div className="col-span-3 mt-4">
                   <FormField
                     control={form.control}
                     name="fcltCpct"
@@ -189,7 +183,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
                     )}
                   />
                 </div>
-                <div className="col-span-3">
+                <div className="col-span-3 mt-4">
                   <FormField
                     control={form.control}
                     name="hasuhasu"
@@ -200,7 +194,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
                     )}
                   />
                 </div>
-                <div className="col-span-3">
+                <div className="col-span-3 mt-4">
                   <FormField
                     control={form.control}
                     name="ruseCpct"
@@ -211,7 +205,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
                     )}
                   />
                 </div>
-                <div className="col-span-3">
+                <div className="col-span-3 mt-4">
                   <FormField
                     control={form.control}
                     name="splyExtraCpct"

apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegFormDetail/mngRegFormDetail.tsx

@@ -42,7 +42,7 @@ export default function MngRegFormDetail({
                         onSelect={(date: Date | undefined) =>
                           field.onChange(date)
                         }
-                        className={"rounded-lg w-full"}
+                        className={"rounded-lg !w-full"}
                       />
                     ) : item.type === "number" ? (
                       <Input placeholder="" type="number"  value={field.value??0}  onChange={field.onChange} />

apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useWrStore } from "@/app/store";
+import type { customPbnst, fcBizType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
+import { getCity } from "@/components/lib/func/commom";
+import { PbnstMngForm } from "@/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm";
+import { ScrollArea, SelectBox, UiTable, type SelectDataType } from "@common/business_components";
+import { Button, Input, Label, Tabs, TabsContent, TabsList, TabsTrigger } from "@common/components/ui";
+import { useState } from "react";
+import type { objSearchType } from "../bdstRegModal/bdstRegModal";
+import { PbnstBuseForm } from "@/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm";
+
+export function PbnstRegModal() {
+  const {code, pbnst} = useWrStore((state) => {
+    return state;
+  });
+  const { pubFacHeadList, pbnstHasuRes, pbnstRes } = pbnst;
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
+  const [objSearch, setObjSearch] = useState<objSearchType>({sgg:"",city:""});
+  const [searchTxt, setSearchTxt] = useState<string>()
+  const [bdstTable, setbdstTable] = useState<customPbnst[]>();
+  const [selectBdst, setSelectBdst] = useState<customPbnst | null>(null);
+  const [pbnstBiz, setPbnstBiz] = useState<fcBizType[]>();
+  const [pbnstBdstForm, setPbnstBdstForm] = useState<customPbnst>({} as customPbnst);
+  const [currentTab, setCurrentTab] = useState<string>("mng");
+  // const nodeList = headMakeColSpan(pubFacHeadList.moUpHeadList);
+  const getSelCity = (val: string | number) => {
+    const cityValue = String(val);
+    const data = getCity(cityValue, code.sggCd);
+    setSelectSgg(data);
+    setObjSearch({ city: cityValue, sgg: '' });
+  };
+  const getSgg = (val: string | number) => {
+    console.log(val);
+    setObjSearch({...objSearch,sgg: String(val)})
+  };
+  const tableClick: (val: number | undefined , headId:string) => void = (val ,headId) => {
+    // if(val!==undefined && bdst?.bdstBase.length>0){
+      // const data:BdstTypeMap[T] =bdst?.bdstBase[val]
+      //   if (data) {
+      //     setRainBdstForm(data); 
+      //   }
+      // }
+  } 
+  const handleTabChange = (value: string) => {
+    setCurrentTab(value);
+  };
+
+  return (
+   <>
+      <div className="grid grid-cols-12 gap-4 mt-4 items-center">
+        <SelectBox
+          className="col-span-3 h-full"
+          label={"시도"}
+          selectClass={selectClass}
+          selectArray={code.cityCd || []}
+          onSelectValue={getSelCity}
+        >
+          {""}
+        </SelectBox>
+        <SelectBox
+          className="col-span-3 h-full"
+          label={"시군구"}
+          selectClass={selectClass}
+          selectArray={selectSgg || []}
+          onSelectValue={getSgg}
+        >
+          {" "}
+        </SelectBox>
+        <Label className="w-full text-xl text-gray-600 text-right">시설명</Label>
+        <Input className="w-full h-full !text-xl col-span-2 col-start-8" type="text" value={searchTxt || ''} onChange={()=>{}}/> 
+        <Button className="" size={"sm"} onClick={()=>{}}>조회</Button>
+      </div>
+      <div className="border-t border-gray-300 my-4"></div>
+      <div className="h-auto">
+        <h1 className="text-2xl font-medium text-label pl-8">공공 하수처리시설 목록</h1>
+        <ScrollArea className="h-[30vh]">
+          <div>
+            <UiTable
+              tableData={bdstTable || []}
+              headlist={pbnst.pubFacHeadList}
+              pageSize={-10}
+              total={-1}
+              headName={undefined}
+              cellClick={(idx, headId) => (tableClick(idx, headId || ""))} 
+              onPageChange={function (page: number): void {
+                throw new Error("Function not implemented.");
+              }}>
+              {/* {nodeList} */}
+            </UiTable>
+          </div>
+        </ScrollArea>
+        <div className="border-t border-gray-300 my-4"></div>
+        <ScrollArea className="h-[40vh]">
+          <Tabs  defaultValue="mng" onValueChange={handleTabChange}>
+            <TabsList  className="">
+              <TabsTrigger className="!text-xl" value="mng">시설정보</TabsTrigger>
+              <TabsTrigger className="!text-xl" value="buse">차수별정보</TabsTrigger>
+            </TabsList>
+            <TabsContent className="max-h-full" value="mng">
+                  <PbnstMngForm mngForm={pbnstBdstForm as customPbnst} isModal={true} />
+              </TabsContent>
+              <TabsContent className="max-h-full" value="buse">
+                  <PbnstBuseForm buseForm={pbnstBdstForm as customPbnst} isModal={true} />
+              </TabsContent>
+            </Tabs>
+          <div>
+            
+            
+
+            
+          </div>
+        </ScrollArea>
+      </div>
+    </>
+        
+  )
+}
+
+