diff --git a/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx b/apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx index f9f1ad04b..1aec73e63 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 { PbnstRegModal } from "@/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal"; 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,14 @@ useEffect(() => { + } + bodyClass="w-[68vw] max-w-none h-[90vh]" + open={issNewReg} + onOpenChange={(open) => { + setIsNewReg(open); + }} + /> diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx index e936ea8b7..62feda6dc 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 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"); @@ -66,27 +70,38 @@ const [ isFcOrgwts, setIsFcOrgwts] = useState(false); name: "fcOrgwts", }); - const { fields: pplInstls } = useFieldArray({ + const { fields: pplInstls, append, remove } = useFieldArray({ control: form.control, name: "pplInstls", }); - const fcOrgwtsReg = () =>{ + const plusHist = () => { + append({ + choose: false, + ppMqlt: "", + pdmt: "", + cpct: "", + }); + }; - console.log("fcOrgwtsReg"); -//ref로바꿔야함 - setFcOrgwts({isOpen:true , data:fcOrgwtFiled as fcOrgwtType[]}); - - - } - + 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]); @@ -202,10 +217,22 @@ const [ isFcOrgwts, setIsFcOrgwts] = useState(false); readOnly className="w-32 border-gray-300 rounded pr-8 " /> - - + +
@@ -213,7 +240,8 @@ const [ isFcOrgwts, setIsFcOrgwts] = useState(false); tableData={pplInstls} headList={pbnst.pplInstlsHeadLisat} code={ppiSelectList ?? []} - /> + ref={ref} + upHeadList={[]} />
state); const { pbnstMngUpHeadList } = pbnst; @@ -48,17 +43,42 @@ export function PbnstMngForm({ data }: { data: customPbnst }) { setProgress(Number(percentage)); }; - const ref = useRef(data.fcOpers ?? null); + const ref = useRef(data?.fcOpers ?? null); const form = useForm>({ resolver: zodResolver(pbnstRegZod), defaultValues: pbnstRegZod.parse({}), }); - const { fields: fcOpersField } = useFieldArray({ + + const { fields: fcOpersField, append, remove } = useFieldArray({ control: form.control, name: "fcOpers", }); + const plusHist = () => { + 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(() => { @@ -71,6 +91,9 @@ export function PbnstMngForm({ data }: { data: customPbnst }) { console.log("submit", values); testFile; // pbnstUpdate(values); + values.fcOpers = ref.current || []; + console.log("form values:", values); + pbnstUpdate(values); } const fileHandler = (files:File[]) => { const setReFiles = [...(relationfiles || [])]; @@ -105,8 +128,21 @@ export function PbnstMngForm({ data }: { data: customPbnst }) { setRelationFiles(setReFiles); }; const testFile = () => { - if (relationfiles && relationfiles[0]) - TusClientUpload(relationfiles[0], setUpload); + // if (relationfiles && relationfiles[0]) + // TusClientUpload(relationfiles[0], setUpload, { + // handleUploadStart: () => { + // console.log("handleUploadStart"); + // }, + // handleProgress, + // handleResponse: (req, res) => { + // console.log("handleResponse req", req); + // console.log("handleResponse res", res); + // }, + // handleSuccess: (a) => { + // console.log("req", a); + + // }, + // }); }; useEffect(() => { console.log("form errors:", form.formState.errors); @@ -132,20 +168,31 @@ 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} */} + +
+ +
+ + + + 시설정보 + 차수별정보 + + + + + + + + +
+ + + + +
+ +
+ + + ) +} + + diff --git a/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx b/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx index e5733406b..d31c2efcd 100644 --- a/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx +++ b/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx @@ -1,9 +1,9 @@ import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead"; import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList"; -import type { customPbnst, fcltOperInfoType, fcOrgwtType, operType, ppInstlType } 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 { + Checkbox, Input, Table, TableBody, @@ -12,7 +12,6 @@ import { TableHeader, TableRow, } from "@common/components/ui"; -import moment from "moment"; import React, { useEffect, useState } from "react"; type RuseMngTableProps = { @@ -31,6 +30,7 @@ const RuseMngTable = React.forwardRef( }, 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] || ""}` )}