swcho
6e109e970e
- SearchModal 껐다 킬 때 페이지네이션 정보 잃어버리는 에러 수정 - useSearchModal.ts useEffect 의존성 배열을 searchModal.tsx 로 이동 - import 정리
95 lines
2.6 KiB
TypeScript
95 lines
2.6 KiB
TypeScript
'use client'
|
|
import React, { useEffect } from 'react';
|
|
import LoadingOverlay from '@/components/ui/LoadingBar';
|
|
import useReportTab from './useReportTab';
|
|
import { useReportTabStore } from '@/store/useReportTabStore';
|
|
import { UiTable } from '@common/business_components/ui';
|
|
import { UiModal } from "@common/business_components";
|
|
import useSearchModalStore from '@/store/useSearchModalStore';
|
|
|
|
type ModalOpenProp = { clsfSystmSn: string } // 자료관 기본계획 일련번호
|
|
const ReportFilesModal: React.FC<ModalOpenProp> = ({ clsfSystmSn }: ModalOpenProp) => {
|
|
// 하수도정비 기본계획 보고서 파일목록
|
|
const REPORT_FILES_HEADLIST = [
|
|
{ id: "no", title: "NO" },
|
|
{ id: "fileTitle", title: "파일명" },
|
|
{ id: "regDt", title: "등록일자" },
|
|
];
|
|
|
|
const {
|
|
curPage, setCurPage,
|
|
isLoading,
|
|
isResetPage,
|
|
isResetSelection,
|
|
setIsResetPage,
|
|
setIsResetSelection
|
|
} = useSearchModalStore();
|
|
const {
|
|
isOpen: isModalOpen,
|
|
files,
|
|
dcFiles: filesOrigin,
|
|
setIsOpen: setIsModalOpen,
|
|
setFiles,
|
|
fetchDcFiles
|
|
} = useReportTabStore();
|
|
const { getFiles, handleCellClick } = useReportTab();
|
|
|
|
|
|
useEffect(() => {
|
|
fetchDcFiles(clsfSystmSn);
|
|
}, [clsfSystmSn]);
|
|
|
|
useEffect(() => {
|
|
if (isModalOpen === true) {
|
|
getFiles(); // 파일 목록 조회
|
|
} else {
|
|
setFiles([]); // 모달이 닫힐 때 파일 목록 초기화
|
|
setCurPage(1); // 페이지를 1로 초기화
|
|
setIsResetPage(true); // 페이지를 초기화
|
|
setIsResetSelection(true); // 선택 초기화
|
|
}
|
|
}, [filesOrigin, isModalOpen, curPage]);
|
|
|
|
const renderBody = () => (
|
|
<>
|
|
<div className="flex-1 px-2 pb-2">
|
|
<LoadingOverlay isLoading={isLoading} />
|
|
<UiTable
|
|
headName={(() => {
|
|
return (<>조회 결과 ({filesOrigin.length.toLocaleString('ko-KR')})건</>);
|
|
})()
|
|
}
|
|
tableData={files}
|
|
headlist={REPORT_FILES_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(ReportFilesModal); |