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] || ""}` )}