148 lines
5.9 KiB
TypeScript
148 lines
5.9 KiB
TypeScript
"use client";
|
|
|
|
import { useWrStore } from "@/app/store";
|
|
import { numSize } from "@/app/store/common/code/basicCode";
|
|
import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
|
import { formH1Class } from "@/components/lib/class/comClass";
|
|
import { safeDate } from "@/components/lib/func/commom";
|
|
import { DatePicker, FormField, FormUi, SelectBox } from "@common/business_components";
|
|
import { Button, Checkbox, Input } from "@common/components";
|
|
import { useState } from "react";
|
|
import { useFieldArray } from "react-hook-form";
|
|
|
|
export default function BdstAdd({ form, readonly }: { form: any; readonly?: boolean; }) {
|
|
|
|
const { code } = useWrStore((state) => {
|
|
return state;
|
|
});
|
|
|
|
const { fields, append, remove } = useFieldArray({
|
|
name: "chgBuilding",
|
|
control: form?.control, // Provide a fallback to avoid errors
|
|
});
|
|
|
|
const plusHist = () => {
|
|
append({
|
|
bdstNm: "",
|
|
daddr: "",
|
|
bdstUsgCd: "",
|
|
});
|
|
};
|
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
|
|
|
const toggleSelect = (id: string) => {
|
|
setSelectedIds((prev) =>
|
|
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
|
);
|
|
};
|
|
|
|
const removeSelected = () => {
|
|
const idxsToRemove = fields
|
|
.map((item, idx) => (selectedIds.includes(item.id) ? idx : -1))
|
|
.filter((index) => index > -1)
|
|
.sort((prevIndex, nextIndex) => nextIndex - prevIndex);
|
|
|
|
remove(idxsToRemove);
|
|
setSelectedIds([]);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<h1 className={formH1Class}>중축, 개축, 재축</h1>
|
|
{!readonly && (
|
|
<div className="flex justify-end gap-2 mt-4">
|
|
|
|
<Button type="button" className="" size={"sm"} onClick={plusHist}>
|
|
이력추가
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
className="!bg-red-500 text-white"
|
|
size={"sm"}
|
|
onClick={removeSelected}
|
|
>
|
|
삭제
|
|
</Button>
|
|
|
|
</div>
|
|
)}
|
|
{fields.map((field, index) => (
|
|
<div
|
|
key={field.id}
|
|
// className="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mt-4 items-center"
|
|
className={`grid ${
|
|
readonly ? "grid-cols-3" : "grid-cols-[auto,1fr,1fr,1fr]"
|
|
} gap-2 mt-4 items-center`}
|
|
>
|
|
{!readonly && (
|
|
<div className="col-span-1 flex justify-center mr-4">
|
|
<Checkbox
|
|
checked={selectedIds.includes(field.id)}
|
|
onCheckedChange={() => toggleSelect(field.id)}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="">
|
|
<FormField
|
|
control={form.control}
|
|
name={`chgBuilding.${index}.bdstChgNm`}
|
|
render={({ field: f }) => (
|
|
<FormUi label="구분">
|
|
<SelectBox
|
|
selectClass={selectClass}
|
|
selectArray={code.chBuCd}
|
|
onSelectValue={(val) => f.onChange(val)}
|
|
value={f.value ?? code.chBuCd[0]?.val}
|
|
className={""}
|
|
label={""}
|
|
readOnly={readonly}
|
|
/>
|
|
</FormUi>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="">
|
|
<FormField
|
|
control={form.control}
|
|
name={`chgBuilding.${index}.archChgPrmsnDt`}
|
|
render={({ field: f }) => (
|
|
<FormUi label="허가일">
|
|
<DatePicker
|
|
mode="single"
|
|
field={{
|
|
value: safeDate(f.value) || new Date(),
|
|
onChange: (date) => f.onChange(date),
|
|
}}
|
|
selectClass="w-full"
|
|
readOnly={readonly}
|
|
/>
|
|
</FormUi>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="">
|
|
<FormField
|
|
control={form.control}
|
|
name={`chgBuilding.${index}.archChgArea`}
|
|
render={({ field: f }) => (
|
|
<FormUi label="면적(㎡)">
|
|
<Input
|
|
placeholder="-"
|
|
type="text"
|
|
onChange={(e) => f.onChange(e.target.value)}
|
|
value={f.value || ''}
|
|
className={selectClass}
|
|
readOnly={readonly}
|
|
maxLength={numSize}
|
|
/>
|
|
</FormUi>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div className="border-b border-gray-300 my-4"> </div>
|
|
</>
|
|
)
|
|
} |