From 7ed55d59d9ac45ef75f89005d66dde3b8bc53db3 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Tue, 27 May 2025 16:30:42 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=ED=95=98=EC=88=98=EC=9E=AC=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=B6=94=EA=B0=80,=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/ruseFcltMng/fcltReg/pbnstReg/page.tsx | 6 ++- .../ruseFcltMng/fcltReg/pbnstReg/headList.tsx | 4 +- .../ruseFcltMng/fcltReg/pbnstReg/type.tsx | 13 ++--- .../ui/form/fcltReg/bdstReg/bdstReg.tsx | 35 ++++--------- .../fcltReg/pbnstReg/buseReg/bugRegForm.tsx | 50 ++++++++++++++++--- .../fcltReg/pbnstReg/mngReg/mngRegForm.tsx | 48 +++++++++++++++--- .../pbnstReg/ruseMngTable/ruseMngTable.tsx | 33 ++++++++---- 7 files changed, 132 insertions(+), 57 deletions(-) diff --git a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx index f9f1ad04b..0820e5609 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx @@ -6,6 +6,7 @@ import { SearchFormLeft, SearchInput, Title, + UiModal, UiTable, } from "@common/business_components"; import { Button, Input } from "@common/components"; @@ -18,6 +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"; export default function PublicReuseFaciltyInsert() { const { code, pbnst, pubHasuInit,pbnstRegInit } = useWrStore((state) => state); @@ -25,6 +27,7 @@ export default function PublicReuseFaciltyInsert() { const [currentTab, setCurrentTab] = useState("mng"); const [fcltMng, setFcltMng] = useState(); const [pbnstBiz, setPbnstBiz] = useState(); + const [issNewReg, setIsNewReg] = useState(false); const [searchTxt, setSearchTxt] = useState(); const [bdstTable, setbdstTable] = useState(); @@ -96,7 +99,7 @@ useEffect(() => { @@ -137,6 +140,7 @@ useEffect(() => { + diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx index 4f35c813c..659aa714d 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx @@ -17,6 +17,7 @@ export const pubFacHeadListExport: TableUpperProps[] = [ ]; export const pbnstMngUpHeadListExport: TableUpperProps[] = [ + { id: "choose", title: "선택", type: "checkbox" }, { id: "operMthd", title: "운영방식", edit: true}, { id: "rprtvBzenty", title: "대행업체", edit: true}, { id: "bgngDt", title: "시작일", upName: "upChangeRe", upSequnce: 1, type: "date"}, @@ -25,9 +26,10 @@ export const pbnstMngUpHeadListExport: TableUpperProps[] = [ export const pplInstlsHeadListExport: TableUpperProps[] = [ + { id: "choose", title: "선택", type: "checkbox" }, { id: "ppMqlt", title: "관재질", type: "select", selectData:'pplQulity' }, { id: "pdmt", title: "관경", type: "select", selectData:'pplLenght'}, - { id: "cpct", title: "연장", }, + { id: "cpct", title: "연장", edit: true, type: "number" }, ]; diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx index d84a5b3e6..29bec52b9 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx @@ -73,6 +73,7 @@ const fcOperSchema = z.object({ rgtr: z.string(), mdfcnDt: z.date().nullish(), mdfr: z.string().default("test"), + choose: z.boolean().default(false), }); const fcOrgwtSchema = z.object({ @@ -289,15 +290,15 @@ export const exampleData = { pplInstls: [ { ruseFcltBizFk: "10", - pdmt: "관경", - ppMqlt: "1", - cpct: "100", + pdmt: "D200", + ppMqlt: "도복장강관", + cpct: "1", }, { ruseFcltBizFk: "10", - pdmt: "관경", - ppMqlt: "2", - cpct: "200", + pdmt: "D100", + ppMqlt: "PE관", + cpct: "2", }, ], fcOrgwts: [ diff --git a/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx index 638f45915..5ab5edf98 100644 --- a/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx +++ b/apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx @@ -15,7 +15,8 @@ import { SelectBox, type SelectDataType, } from "@common/business_components"; -import { Button, Input } from "@common/components"; +import { Button, Checkbox, Input } from "@common/components"; +import { Check } from "lucide-react"; import { useEffect, useRef, useState } from "react"; import { useFieldArray } from "react-hook-form"; @@ -42,18 +43,15 @@ export default function BdstReg({ form }: { form: any }) { // remove(fields.length - 1); // } // }; -// 이건 삭제해도되는거 const removeSelected = () => { - // fields 배열에서 selectedIds 에 포함된 field.id 의 인덱스만 골라내기 const idxsToRemove = fields - .map((f, i) => selectedIds.includes(f.id) ? i : -1) - .filter(i => i > -1) - // 내림차순 정렬: 인덱스 뒤쪽부터 제거해야 안전합니다. - .sort((a,b) => b - a); + .map((item, idx) => selectedIds.includes(item.id) ? idx : -1) + .filter(index => index > -1) + .sort((prevIndex, nextIndex) => nextIndex - prevIndex); - remove(idxsToRemove); - setSelectedIds([]); -}; + remove(idxsToRemove); + setSelectedIds([]); + }; const [selectSgg, setSelectSgg] = useState(); @@ -89,9 +87,6 @@ export default function BdstReg({ form }: { form: any }) { return () => subscription?.unsubscribe(); }, [form.form]); - - - // 여기서부터는 자유롭게 삭제 가능 const [selectedIds, setSelectedIds] = useState([]); const toggleSelect = (id: string) => { @@ -280,19 +275,13 @@ export default function BdstReg({ form }: { form: any }) { {fields.map((field, index) => ( - //여기서부터 자유롭게 삭제 가능
- {/* 1) 체크박스 */}
- toggleSelect(field.id)} - className="h-6 w-6" + onCheckedChange={() => toggleSelect(field.id)} />
- - {/* 2) 구분 */}
- - {/* 3) 허가일 */}
- - {/* 4) 면적 */}
(data[0]?.pplInstls ?? null); const { code, pbnst } = useWrStore((state) => state); const { pbnstBizCycle, pbnstRes } = pbnst; const [getBizCycle, setBizCycle] = useState("1"); @@ -57,14 +58,36 @@ export function PbnstBuseForm({ data }: { data: fcBizType[] }) { name: "fcOrgwts", }); - const { fields: pplInstls } = useFieldArray({ + const { fields: pplInstls, append, remove } = useFieldArray({ control: form.control, name: "pplInstls", }); + + const plusHist = () => { + append({ + choose: false, + ppMqlt: "", + pdmt: "", + cpct: "", + }); + }; + + const removeSelected = () => { + if(!ref.current) return; + const selectedIdxs = ref.current + .map((item, idx) => (item.choose ? idx : -1)) + .filter((idx) => idx !== -1); + selectedIdxs.reverse().forEach((idx) => remove(idx)); + }; + useEffect(() => { if (data) { const index = Number(getBizCycle) - 1; form.reset(data[index]); + ref.current = data[index]?.pplInstls ?? null; + console.log("form reset with data:", data[index]); + + } }, [getBizCycle, data]); @@ -180,10 +203,22 @@ export function PbnstBuseForm({ data }: { data: fcBizType[] }) { readOnly className="w-32 border-gray-300 rounded pr-8 " /> - - + +
@@ -191,7 +226,8 @@ export function PbnstBuseForm({ data }: { data: fcBizType[] }) { tableData={pplInstls} headList={pbnst.pplInstlsHeadLisat} code={ppiSelectList ?? []} - /> + ref={ref} + upHeadList={[]} />
{ + append({ + choose: false, + rgtr: "", + mdfr: "", + pbnstRuseFcltFk: 0, + pbnstRuseFcltOperInfoPk: 0, + operMthd: "", + rprtvBzenty: "", + bgngDt: new Date(), + endDt: new Date(), + }); + }; + + const removeSelected = () => { + console.log("ref", ref.current); + console.log("fcOpersField", fcOpersField); + if(!ref.current) return; + const selectedIdxs = ref.current + .map((item, idx) => (item.choose ? idx : -1)) + .filter(idx => idx !== -1); + selectedIdxs.reverse().forEach(idx => remove(idx)); + }; + const onSelectValue = (val: string) => {}; useEffect(() => { @@ -64,8 +88,8 @@ export function PbnstMngForm({ data }: { data: customPbnst }) { // 2. Define a submit handler. function onSubmit(values: z.infer) { - console.log("submit",values); - + values.fcOpers = ref.current || []; + console.log("form values:", values); pbnstUpdate(values); } @@ -77,7 +101,7 @@ export function PbnstMngForm({ data }: { data: customPbnst }) { }, handleProgress, handleResponse: (req, res) => { - console.log(" handleResponse req", req); + console.log("handleResponse req", req); console.log("handleResponse res", res); }, handleSuccess: (a) => { @@ -116,22 +140,32 @@ export function PbnstMngForm({ data }: { data: customPbnst }) { {form.getValues("ruseUtztnFcltNm") ? ": " + form.getValues("ruseUtztnFcltNm") : ""}
- +
-
+
재이용시설 운영정보 +
+ +
( }, ref) => { const [tableState, setTableState] = useState([...tableData]); useEffect(() => { + console.log("tableState", tableState); if (ref && typeof ref === "object" && "current" in ref) { ref.current = tableState; } @@ -71,11 +71,11 @@ const RuseMngTable = React.forwardRef( type={head.type} onChange={(txt) => { setTableState(prev => { - const next = [...prev]; - next[i] = { ...next[i], [head.id]: txt.target.value }; - return next; - }) - }} + const next = [...prev]; + next[i] = { ...next[i], [head.id]: txt.target.value }; + return next; + }) + }} value={tableState[i][head.id] || ""} /> ) : head.type === "select" ? ( @@ -83,7 +83,7 @@ const RuseMngTable = React.forwardRef( label="" selectArray={code.find(item => item.name === head.selectData)?.val ?? []} value={ - item[head.id] + tableState[i][head.id] || "" } className={""} selectClass={selectClass} @@ -99,18 +99,31 @@ const RuseMngTable = React.forwardRef( mode="single" field={{ value: - tableState[i][head.id], // Provide a default Date value + tableState[i][head.id], // Provide a default Date value onChange: (date) => { setTableState(prev => { const next = [...prev]; next[i] = { ...next[i], [head.id]: date }; return next; }) - } + } } } selectClass={"w-full"} /> + ) : head.type === "checkbox" ? ( + { + console.log("checked", checked); + setTableState((prev) => { + prev[i][head.id] = checked + return [...prev] + }) + }} + > + ) : ( `${item[head.id] || ""}` )} From 66df8b21b3939af172a66f8a562faad2dadbca49 Mon Sep 17 00:00:00 2001 From: jyha00 Date: Wed, 28 May 2025 09:10:43 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=ED=95=98=EC=88=98=EC=9E=AC=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=8B=A0=EA=B7=9C=EB=93=B1=EB=A1=9D=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/ruseFcltMng/fcltReg/pbnstReg/page.tsx | 13 +- .../fcltReg/pbnstReg/buseReg/bugRegForm.tsx | 5 +- .../fcltReg/pbnstReg/mngReg/mngRegForm.tsx | 38 +++--- .../mngRegFormDetail/mngRegFormDetail.tsx | 2 +- .../fcltReg/pbnstRegModal/pbnstRegModal.tsx | 121 ++++++++++++++++++ 5 files changed, 152 insertions(+), 27 deletions(-) create mode 100644 apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx diff --git a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx index 0820e5609..1aec73e63 100644 --- a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx +++ b/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(() => { @@ -140,7 +140,14 @@ useEffect(() => { - + } + bodyClass="w-[68vw] max-w-none h-[90vh]" + open={issNewReg} + onOpenChange={(open) => { + setIsNewReg(open); + }} + />
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx index 731f32e1d..e9ec31965 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx +++ b/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(data[0]?.pplInstls ?? null); + // const ref = useRef(data[0]?.pplInstls ?? null); + const ref = useRef( + 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"); diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx index 1786b5f2e..3d37a8832 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx +++ b/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(data.fcOpers ?? null); + const ref = useRef(data?.fcOpers ?? null); const form = useForm>({ 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 }) {

재이용수 공급 가능량

-
+
-
+
-
+
-
+
field.onChange(date) } - className={"rounded-lg w-full"} + className={"rounded-lg !w-full"} /> ) : item.type === "number" ? ( diff --git a/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx new file mode 100644 index 000000000..3d33d3e92 --- /dev/null +++ b/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() + const [objSearch, setObjSearch] = useState({sgg:"",city:""}); + const [searchTxt, setSearchTxt] = useState() + const [bdstTable, setbdstTable] = useState(); + const [selectBdst, setSelectBdst] = useState(null); + const [pbnstBiz, setPbnstBiz] = useState(); + const [pbnstBdstForm, setPbnstBdstForm] = useState({} as customPbnst); + const [currentTab, setCurrentTab] = useState("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 ( + <> +
+ + {""} + + + {" "} + + + {}}/> + +
+
+
+

공공 하수처리시설 목록

+ +
+ (tableClick(idx, headId || ""))} + onPageChange={function (page: number): void { + throw new Error("Function not implemented."); + }}> + {/* {nodeList} */} + +
+ +
+ + + + 시설정보 + 차수별정보 + + + + + + + + +
+ + + + +
+ +
+ + + ) +} + +