ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

하수재이용 추가, 삭제 버튼 기능 추가

Browse Source
This commit is contained in:
jyha00
2025-05-27 16:30:42 +09:00
parent 299129a1f1
commit 7ed55d59d9
7 changed files with 132 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx
+5 -1
View File
@@ -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<string>("mng");
const [fcltMng, setFcltMng] = useState<ruseFcltType[]>();
const [pbnstBiz, setPbnstBiz] = useState<fcBizType[]>();
const [issNewReg, setIsNewReg] = useState<boolean>(false);
const [searchTxt, setSearchTxt] = useState<string>();
const [bdstTable, setbdstTable] = useState<customPbnst[]>();
@@ -96,7 +99,7 @@ useEffect(() => {
<Button
size={"sm"}
className=""
onClick={() =>{}}
onClick={() =>{} }
>
신규등록
</Button>
@@ -137,6 +140,7 @@ useEffect(() => {
</Tabs>
</ScrollArea>
</ListDiv>
</div>
</ContentsDiv>
</>
apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx
+3 -1
View File
@@ -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" },
];
apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
+7 -6
View File
@@ -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: [
apps/wr/components/ui/form/fcltReg/bdstReg/bdstReg.tsx
+10 -25
View File
@@ -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<SelectDataType[] | undefined>();
@@ -89,9 +87,6 @@ export default function BdstReg({ form }: { form: any }) {
return () => subscription?.unsubscribe();
}, [form.form]);
// 여기서부터는 자유롭게 삭제 가능
const [selectedIds, setSelectedIds] = useState<string[]>([]);
const toggleSelect = (id: string) => {
@@ -280,19 +275,13 @@ export default function BdstReg({ form }: { form: any }) {
</Button>
</div>
{fields.map((field, index) => (
//여기서부터 자유롭게 삭제 가능
<div key={field.id} className="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mt-4 items-center">
{/* 1) 체크박스 */}
<div className="col-span-1 flex justify-center mr-4">
<input
type="checkbox"
<Checkbox
checked={selectedIds.includes(field.id)}
onChange={() => toggleSelect(field.id)}
className="h-6 w-6"
onCheckedChange={() => toggleSelect(field.id)}
/>
</div>
{/* 2) 구분 */}
<div className="">
<FormField
control={form.control}
@@ -308,8 +297,6 @@ export default function BdstReg({ form }: { form: any }) {
)}
/>
</div>
{/* 3) 허가일 */}
<div className="">
<FormField
control={form.control}
@@ -328,8 +315,6 @@ export default function BdstReg({ form }: { form: any }) {
)}
/>
</div>
{/* 4) 면적 */}
<div className="">
<FormField
control={form.control}
apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
+43 -7
View File
@@ -5,7 +5,7 @@ import { FormUi, type SelectDataType } from "@common/business_components/ui";
import { Form, FormField } from "@common/business_components/ui/form";
import { Button, Input, Label, TableHead, TableRow } from "@common/components";
import { zodResolver } from "@hookform/resolvers/zod";
import { use, useEffect, useState } from "react";
import { use, useEffect, useRef, useState } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import { z } from "zod";
import { useWrStore } from "@/app/store";
@@ -37,6 +37,7 @@ 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 { 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 "
/>
<Button className="ml-7" size={commonButonSize}>
추가등록
</Button>
<Button size={commonButonSize}>삭제</Button>
<Button
type="button"
size={commonButonSize}
className="!text-xl"
onClick={plusHist}
>
추가등록
</Button>
<Button
type="button"
size={commonButonSize}
className="!text-xl !bg-red-500 !text-white ml-1"
onClick={removeSelected}
>
삭제
</Button>
</div>
<div>
@@ -191,7 +226,8 @@ export function PbnstBuseForm({ data }: { data: fcBizType[] }) {
tableData={pplInstls}
headList={pbnst.pplInstlsHeadLisat}
code={ppiSelectList ?? []}
/>
ref={ref}
upHeadList={[]} />
</div>
<MngRegFormDetail
apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
+41 -7
View File
@@ -50,11 +50,35 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
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(() => {
@@ -64,8 +88,8 @@ export function PbnstMngForm({ data }: { data: customPbnst }) {
// 2. Define a submit handler.
function onSubmit(values: z.infer<typeof pbnstRegZod>) {
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 }) {
<span className="mt-4 ml-2">{form.getValues("ruseUtztnFcltNm") ? ": " + form.getValues("ruseUtztnFcltNm") : ""}</span>
</div>
<Button type="submit" size={commonButonSize}>저장</Button>
<Button type="submit" size={commonButonSize}>저장</Button>
</div>
<div>
<div className="h-[200px] overflow-y-auto">
<div className="h-[200px] overflow-y-auto">
<div className="flex justify-between items-center mx-3 mb-3">
<span className={formTableName}>재이용시설 운영정보</span>
<div>
<Button
type="button"
size={commonButonSize}
className="!text-xl"
onClick={() => testFile()}
onClick={plusHist}
>
추가등록
</Button>
<Button
type="button"
size={commonButonSize}
className="!text-xl !bg-red-500 !text-white ml-1"
onClick={removeSelected}
>
삭제
</Button>
</div>
</div>
<RuseMngTable
tableData={fcOpersField}
apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx
+23 -10
View File
@@ -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<any[], RuseMngTableProps>(
}, 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<any[], RuseMngTableProps>(
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<any[], RuseMngTableProps>(
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<any[], RuseMngTableProps>(
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" ? (
<Checkbox
className=""
checked={!!tableState[i][head.id]}
onCheckedChange={(checked) => {
console.log("checked", checked);
setTableState((prev) => {
prev[i][head.id] = checked
return [...prev]
})
}}
>
</Checkbox>
) : (
`${item[head.id] || ""}`
)}