108 lines
3.6 KiB
TypeScript
108 lines
3.6 KiB
TypeScript
'use client'
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
import LoadingOverlay from '@/components/ui/LoadingBar';
|
|
import { getFileDownload, getDcFiles, useDcFiles } from './searchModalReportApi';
|
|
import { type ReportDataFile } from './searchModalReportApi';
|
|
import { useReportFileModalStore } from './searchModalReportApi'; // 모달 상태 관리 스토어
|
|
import { UiTable } from '@common/business_components/ui';
|
|
import { UiModal } from "@common/business_components";
|
|
|
|
type ModalOpenProp = {
|
|
clsfSystmSn: string, // 자료관 기본계획 일련번호
|
|
}
|
|
// 하수도정비 기본계획 보고서 파일목록
|
|
export const headlist = [
|
|
{ id: "no", title: "NO" },
|
|
{ id: "fileTitle", title: "파일명" },
|
|
{ id: "regDt", title: "등록일자" },
|
|
];
|
|
|
|
const ReportFiles: React.FC<ModalOpenProp> = ({ clsfSystmSn }: ModalOpenProp) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isResetPage, setIsResetPage] = useState<boolean>(false);
|
|
const [isResetSelection, setIsResetSelection] = useState<boolean>(false);
|
|
const { isOpen: isModalOpen, setIsOpen: setIsModalOpen } = useReportFileModalStore(); // 모달 상태 관리 스토어
|
|
const [files, setFiles] = useState<ReportDataFile[]>([]);
|
|
const [curPage, setCurPage] = useState(1);
|
|
|
|
const filesOrigin = useDcFiles(clsfSystmSn); // 자료관 기본계획 일련번호에 해당하는 파일 목록을 가져오기 위한 훅
|
|
useEffect(() => {
|
|
if (isModalOpen === true) {
|
|
getFiles(); // 파일 목록 조회
|
|
} else {
|
|
setFiles([]); // 모달이 닫힐 때 파일 목록 초기화
|
|
setCurPage(1); // 페이지를 1로 초기화
|
|
setIsResetPage(true); // 페이지를 초기화
|
|
setIsResetSelection(true); // 선택 초기화
|
|
}
|
|
}, [filesOrigin, isModalOpen, curPage]);
|
|
|
|
// 파일 목록 조회
|
|
const getFiles = async () => {
|
|
setIsLoading(true); // 로딩 시작
|
|
try {
|
|
//let data = await getDcFiles(clsfSystmSn);
|
|
let data = filesOrigin;
|
|
data = data?.slice((curPage - 1) * 10, curPage * 10); // paging
|
|
data = data?.map((item, index) => ({ ...item, no: (curPage - 1) * 10 + index + 1 }));
|
|
setFiles(data);
|
|
} catch (error) {
|
|
console.error("파일 목록 조회 에러:", error);
|
|
} finally {
|
|
setIsLoading(false); // 로딩 종료
|
|
}
|
|
};
|
|
|
|
// cellClick 핸들러
|
|
const handleCellClick = (index: number|undefined) => {
|
|
if (typeof index === "number" && files[index]) {
|
|
const fileName = files[index].fileTitle;
|
|
const filePath = files[index].filePath;
|
|
if (files[index].fileSn !== "") {
|
|
getFileDownload(files[index].fileSn, fileName, filePath);
|
|
}
|
|
}
|
|
};
|
|
|
|
const renderBody = () => (
|
|
<>
|
|
<div className="flex-1 px-2 pb-2">
|
|
<LoadingOverlay isLoading={isLoading} />
|
|
<UiTable
|
|
headName={(() => {
|
|
return (<>조회 결과 ({filesOrigin.length.toLocaleString('ko-KR')})건</>);
|
|
})()
|
|
}
|
|
tableData={files}
|
|
headlist={headlist}
|
|
pageSize={10}
|
|
total={filesOrigin.length}
|
|
cellClick={handleCellClick}
|
|
onPageChange={setCurPage}
|
|
resetPageNo={isResetPage}
|
|
resetSelection={isResetSelection}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
return (
|
|
<UiModal
|
|
open={isModalOpen}
|
|
onOpenChange={setIsModalOpen}
|
|
headerTitle=""
|
|
bodyClass={`
|
|
min-h-[50vh] h-[570px]
|
|
min-w-[35vw] w-[400px]
|
|
max-w-none max-h-none
|
|
overflow-visible
|
|
z-[5000]
|
|
flex items-start
|
|
`}
|
|
body={renderBody()}
|
|
noFooterYn='Y'
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ReportFiles); |