From 89893fca9869f2827da95fc72a211ac5bc06be4d Mon Sep 17 00:00:00 2001 From: jyha00 Date: Wed, 28 May 2025 21:07:01 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9B=90=EC=88=98=EC=B7=A8=EC=88=98=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ruseFcltMng/fcltReg/pbnstReg/headList.tsx | 1 + .../ruseFcltMng/fcltReg/pbnstReg/type.tsx | 1 + .../fcOrgwtsRegModal/fcOrgwtsRegModal.tsx | 122 ++++++++++++------ .../pbnstReg/ruseMngTable/ruseMngTable.tsx | 6 +- 4 files changed, 90 insertions(+), 40 deletions(-) diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx index a0dce391a..686a8b420 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx @@ -52,6 +52,7 @@ export const pbnstOrgwtHeadListRxport: TableUpperProps[] = [ { id: "dtlPstnExpln", title: "상세위치 설명", }, ]; export const fcOrgwtsHeadListExport: TableUpperProps[] = [ + { id: "choose", title: "선택", type: "checkbox" }, { id: "sido", title: "시도" }, { id: "gugun", title: "시군구" }, { id: "bscFctNm", title: "시설명" }, diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx index 1c356019c..b6a340b5e 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx @@ -185,6 +185,7 @@ export const fcBizSchema = z.object({ }); export const pbnstRegZod = z.object({ + choose: z.boolean().default(false), pbnstRuseFcltPk: z.number().default(0), swtrmtFcltFk: z.string().default(""), ruseUtztnFcltNm: z.string().default(""), diff --git a/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx index eb44fba66..cc416a64c 100644 --- a/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx +++ b/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx @@ -1,13 +1,16 @@ "use client"; import { useWrStore } from "@/app/store"; import type { customPbnst, fcBizType, fcOrgwtType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; +import type { TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { tableData } from "@/components/lib/func/commom"; +import RuseMngTable from "@/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable"; import { Title, UiTable } from "@common/business_components/ui"; import { Label } from "@common/business_components/ui/form/lib/label"; import { Button } from "@common/business_components/ui/table/lib/button"; import { Input } from "@common/components/ui"; import { ArrowLeft, ArrowRight } from "lucide-react"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; +import { useFieldArray } from "react-hook-form"; export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) { const { code, pbnst } = useWrStore((state) => state); @@ -15,12 +18,12 @@ export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) { const [bdstTable, setbdstTable] = useState(); const [isFcOrgwtsData, setIsFcOrgwtsData] = useState(false); const [pkTable, setPkTable] = useState(); + const rightRef = useRef([] as fcOrgwtType[]); + const leftRef = useRef([] as fcOrgwtType[]); + const [rightData, setRightData] = useState(); useEffect(() => { - console.log("isFcOrgwtsData", isFcOrgwtsData); - }, [isFcOrgwtsData]); - useEffect(() => { - // console.log("어휴", pbnstHasuRes); + // console.log("머지", pbnstHasuRes); if (code.sggCd.length > 0 && pbnstHasuRes.length > 0) { setbdstTable(tableData(pbnstHasuRes, { code })); } @@ -29,62 +32,105 @@ export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) { useEffect(() => { if (!data) return; const findPk = data.map(element => { - const pk = pbnstHasuRes.find((item)=> String(item.bscFctCd) === element.swtrmtFcltFk) + const pk = pbnstHasuRes.find((item) => String(item.bscFctCd) === element.swtrmtFcltFk) return pk; }); - setPkTable(findPk); }, [data]); - useEffect(()=>{ - - }) - return ( <>
- <Button className="m-2" size={"sm"} onClick={()=>{}}>저장</Button> + <Button className="m-2" size={"sm"} onClick={() => { }}>저장</Button> </div> - + <div className="flex flex-row flex-grow gap-4 mt-4"> <div className="w-3/7"> - <Label className="w-full text-2xl text-gray-600 text-right">공공하수처리시설 목록</Label> - <div className="flex items-center"> - <Label className="w-full text-xl text-gray-600 text-right">시설명</Label> - <Input className="w-1/3 !text-xl ml-2" type="text" value={""} onChange={(e) => {}}/> - <Button className="m-2" size={"sm"} onClick={()=>{}}>조회</Button> - </div> - <div className="border-t border-gray-300 my-4"></div> - <UiTable + <Label className="w-full text-2xl text-gray-600 text-right">공공하수처리시설 목록</Label> + <div className="flex items-center"> + <Label className="w-full text-xl text-gray-600 text-right">시설명</Label> + <Input className="w-1/3 !text-xl ml-2" type="text" value={""} onChange={(e) => { }} /> + <Button className="m-2" size={"sm"} onClick={() => { }}>조회</Button> + </div> + <div className="border-t border-gray-300 my-4"></div> + <RuseMngTable + tableData={bdstTable || []} + headList={fcOrgwtsHeadList} + upHeadList={[]} // TODO: Replace with actual upHeadList data if available + ref={leftRef} + /> + {/* <UiTable headName={""} tableData={bdstTable || []} headlist={fcOrgwtsHeadList} pageSize={0} total={0} - cellClick={undefined} + cellClick={cellClick} onPageChange={function (page: number): void { throw new Error("Function not implemented."); }} - ></UiTable> - </div> + ></UiTable> */} + </div> <div className="flex flex-col items-center justify-center w-1/7 gap-2"> <ArrowRight - type="button" - onClick={() => { - setIsFcOrgwtsData(!isFcOrgwtsData); - }} - className="w-12 h-12 text-gray-500" - /> - <ArrowLeft - type="button" - onClick={() => {}} - className="w-12 h-12 text-gray-500" /> - </div> + type="button" + onClick={() => { + if (leftRef && typeof leftRef === "object" && "current" in leftRef) { + const checked = leftRef.current?.filter((item) => ((item as unknown as customPbnst)?.choose)) + const unchecked = leftRef.current?.filter((item) => !(item as unknown as customPbnst)?.choose) + if (checked && checked.length > 0) { + checked.forEach(item=>(item as unknown as customPbnst).choose = false) + setRightData([...(checked as unknown as customPbnst[]), + ...((rightRef.current ?? []) as unknown as customPbnst[]) + ]) + + } + if (unchecked && unchecked.length > 0) { + setbdstTable([...(unchecked as unknown as customPbnst[])]) + }else{ + setbdstTable([]) + } + } + } + } + className="w-12 h-12 text-gray-500 cursor-pointer" + /> + <ArrowLeft + type="button" + onClick={() => { + if (rightRef && typeof rightRef === "object" && "current" in rightRef) { + const checked = rightRef.current?.filter((item) => ((item as unknown as customPbnst)?.choose)) + const unchecked = rightRef.current?.filter((item) => !(item as unknown as customPbnst)?.choose) + if (checked && checked.length > 0) { + checked.forEach(item=>(item as unknown as customPbnst).choose = false) + setbdstTable([ + ...(checked as unknown as customPbnst[]), + ...((leftRef.current ?? []) as unknown as customPbnst[]) + ]) + } + console.log("ㅇㅇ", unchecked); + if (unchecked && unchecked.length > 0) { + setRightData([...(unchecked as unknown as customPbnst[])]) + }else{ + setRightData([]) + } + } + }} + className="w-12 h-12 text-gray-500" /> + </div> {/* Right Table container: Takes 2/5 of the width */} <div className="w-3/7"> - <UiTable + <Label className="w-full text-2xl text-gray-600 text-right">취수하수처리장 목록</Label> + <div className="border-t border-gray-300 my-4"></div> + <RuseMngTable + tableData={rightData || []} + headList={fcOrgwtsHeadList} + upHeadList={[]} // TODO: Replace with actual upHeadList data if available + ref={rightRef} + /> + {/* <UiTable headName={"취수하수처리장 목록"} tableData={pkTable || []} headlist={fcOrgwtsHeadList} @@ -94,10 +140,10 @@ export default function FcOrgwtsRegModal({ data }: { data: fcOrgwtType[] }) { onPageChange={function (page: number): void { throw new Error("Function not implemented."); }} - ></UiTable> + ></UiTable> */} + </div> </div> </div> - </div> </> ); } diff --git a/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx b/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx index d31c2efcd..c6fdea207 100644 --- a/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx +++ b/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx @@ -1,5 +1,7 @@ import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead"; import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList"; +import type { customPbnst as OriginalCustomPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; + import { selectClass, type TableUpperProps } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; import { DatePicker, SelectBox, type SelectDataType } from "@common/business_components/ui"; import { @@ -21,12 +23,12 @@ type RuseMngTableProps = { code?: { name: string, val: SelectDataType[] }[]; }; -const RuseMngTable = React.forwardRef<any[], RuseMngTableProps>( +const RuseMngTable = React.forwardRef<any, RuseMngTableProps>( ({ tableData, headList, upHeadList, - code = [] + code }, ref) => { const [tableState, setTableState] = useState([...tableData]); useEffect(() => {