127 lines
5.1 KiB
TypeScript
127 lines
5.1 KiB
TypeScript
"use client"
|
|
import { useFoStore } from "@/app/store";
|
|
import type { modalTableType } from "@/app/store/sewageOccur";
|
|
import { DateMonthPicker, UiTable } from "@common/business_components/ui";
|
|
import ListDiv from "@common/business_components/ui/list_div";
|
|
import { Table, TableCell, TableHead, TableRow } from "@common/components/ui";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function SewageOccurModal(props: { fcltyName: string; facilityCd : string; searchYear : string}) {
|
|
// 그리드 관련
|
|
const {SewageOccurDetail, searchSewageOccurDetailList} = useFoStore((state) => state);
|
|
|
|
// searchYear 유효성 검사 및 기본값 설정
|
|
const validSearchYear = props.searchYear && /^\d{4}$/.test(props.searchYear) ? props.searchYear : new Date().getFullYear().toString();
|
|
|
|
|
|
const [startYearMonth, setStartYearMonth] = useState(validSearchYear+'01');
|
|
const [endYearMonth, setEndYearMonth] = useState(validSearchYear+'12');
|
|
const [detailList, setDetailList] = useState<modalTableType[]>([]);
|
|
|
|
// 가능한 시작년월 설정
|
|
const [enableEndMonth, setEnableEndMonth] = useState<string[]>(['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']);
|
|
|
|
const {
|
|
upHeadListSewageOccurDetail,
|
|
gridListSewageOccurDetail
|
|
} = SewageOccurDetail;
|
|
|
|
useEffect(() => {
|
|
searchSewageOccurDetailList(props.facilityCd, validSearchYear);
|
|
}, [searchSewageOccurDetailList, props.facilityCd, validSearchYear]);
|
|
|
|
useEffect(() => {
|
|
setDetailList(gridListSewageOccurDetail);
|
|
}, [gridListSewageOccurDetail]);
|
|
|
|
|
|
useEffect(() => {
|
|
searchSewageOccurDetailList(props.facilityCd, validSearchYear, startYearMonth, endYearMonth);
|
|
}, [startYearMonth, endYearMonth, searchSewageOccurDetailList, props.facilityCd, validSearchYear]);
|
|
|
|
useEffect(() => {
|
|
const standdardMonthList = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
|
|
setEnableEndMonth(standdardMonthList);
|
|
// 시작년월이 바뀌면 선택가능한 년월 데이터가 변경돼야 한다.
|
|
if(startYearMonth){
|
|
const startMm = startYearMonth.substring(4, 6);
|
|
|
|
if(endYearMonth < startYearMonth) {
|
|
setEndYearMonth(startYearMonth);
|
|
}
|
|
|
|
standdardMonthList.forEach((month) => {
|
|
setEnableEndMonth((prev) => {
|
|
if (parseInt(month.replaceAll('월', '')) < parseInt(startMm)) {
|
|
return prev.filter((m) => m !== month);
|
|
}
|
|
return prev;
|
|
});
|
|
});
|
|
}
|
|
}, [endYearMonth, startYearMonth]);
|
|
|
|
return (
|
|
<>
|
|
<ListDiv className="!h-[80px] !mt-10">
|
|
<div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
|
|
<Table>
|
|
<thead>
|
|
<TableRow className="">
|
|
<TableHead className="w-1/6">{'시설명'}</TableHead>
|
|
<TableCell className="w-1/3">{props.fcltyName}</TableCell>
|
|
<TableHead className="w-1/6">{'년월'}</TableHead>
|
|
<TableCell className="w-1/3">
|
|
<DateMonthPicker
|
|
field={{
|
|
value: startYearMonth || (() => {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
return `${year}${month}`;
|
|
})(),
|
|
onChange: (value: string) => {
|
|
if (value && /^\d{6}$/.test(value)) {
|
|
setStartYearMonth(value);
|
|
}
|
|
}
|
|
}}
|
|
selectClass="ml-5 w-[100px]"
|
|
startYear={1900}
|
|
yearReadOnly={true}
|
|
enableMonth={['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']}
|
|
/>~
|
|
<DateMonthPicker
|
|
field={{
|
|
value: endYearMonth || (() => {
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
return `${year}${month}`;
|
|
})(),
|
|
onChange: (value: string) => {
|
|
if (value && /^\d{6}$/.test(value)) {
|
|
setEndYearMonth(value);
|
|
}
|
|
}
|
|
}}
|
|
selectClass="ml-5 w-[100px]"
|
|
startYear={1900}
|
|
yearReadOnly={true}
|
|
enableMonth={enableEndMonth}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
</thead>
|
|
</Table>
|
|
</div>
|
|
</ListDiv>
|
|
<ListDiv className="!h-[570px] overflow-y-auto">
|
|
<div className="h-[120%]">
|
|
<UiTable headName={"오수발생량 추정"} tableData={detailList} headlist={upHeadListSewageOccurDetail} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} boldArray={[0, 1, 2]}>
|
|
</UiTable>
|
|
</div>
|
|
</ListDiv>
|
|
</>
|
|
);
|
|
} |