115 lines
4.3 KiB
TypeScript
115 lines
4.3 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Button } from '~/shared/components/button/Button';
|
|
import { Section } from '~/shared/components/section/Section';
|
|
import { Table } from '~/shared/components/table';
|
|
import type { AerialItem } from '../types/aerial';
|
|
import { AerialRegisterModal } from './AerialRegisterModal';
|
|
|
|
export function AerialList() {
|
|
const [selectedId, setSelectedId] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [data, setData] = useState<AerialItem[]>([]);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
// const result = await fetchAerialList('YEAR', strtDttm, endDttm);
|
|
const result = {
|
|
list: [],
|
|
pagination: {
|
|
currentPage: 0,
|
|
pagiSize: 0,
|
|
totalPages: 0,
|
|
totalItems: 0,
|
|
},
|
|
};
|
|
if (result) {
|
|
setData(result.list);
|
|
setTotalCount(result.pagination.totalItems);
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
load();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Section className="w-full pb-4" variant="list">
|
|
<div className="flex flex-col h-full p-4 gap-4">
|
|
<h1 className="text-xl font-bold">항공영상관리</h1>
|
|
|
|
<Table isLayoutFixed isFullHeight>
|
|
<Table.Caption>
|
|
<Table.CaptionLeft>
|
|
<Table.Total count={totalCount} />
|
|
</Table.CaptionLeft>
|
|
<Table.CaptionRight>
|
|
<div className="flex gap-2">
|
|
<Button color="primary" onClick={() => setIsRegisterModalOpen(true)}>항공영상 등록</Button>
|
|
</div>
|
|
</Table.CaptionRight>
|
|
</Table.Caption>
|
|
|
|
<Table.Container>
|
|
<Table.Colgroup>
|
|
<Table.Col width={60} />
|
|
<Table.Col width={180} />
|
|
<Table.Col width={200} />
|
|
<Table.Col width={120} />
|
|
<Table.Col width={100} />
|
|
<Table.Col width={120} />
|
|
<Table.Col width={80} />
|
|
</Table.Colgroup>
|
|
|
|
<Table.Header>
|
|
<Table.HeaderRow>
|
|
<Table.HeaderCell align="center">No</Table.HeaderCell>
|
|
<Table.HeaderCell>파일명</Table.HeaderCell>
|
|
<Table.HeaderCell>지역</Table.HeaderCell>
|
|
<Table.HeaderCell align="center">촬영일시</Table.HeaderCell>
|
|
<Table.HeaderCell align="center">축적</Table.HeaderCell>
|
|
<Table.HeaderCell align="right">용량</Table.HeaderCell>
|
|
<Table.HeaderCell align="center">전처리</Table.HeaderCell>
|
|
</Table.HeaderRow>
|
|
</Table.Header>
|
|
|
|
<Table.Body>
|
|
{isLoading ? (
|
|
<Table.Loading colSpan={7} />
|
|
) : data.length === 0 ? (
|
|
<Table.Empty colSpan={7}>등록된 항공영상이 없습니다.</Table.Empty>
|
|
) : (
|
|
data.map((item, index) => (
|
|
<Table.Row
|
|
key={item.mapId}
|
|
isSelected={selectedId === item.mapId}
|
|
onClick={() => setSelectedId(item.mapId)}
|
|
>
|
|
<Table.Cell align="center">{index + 1}</Table.Cell>
|
|
<Table.Cell>{item.fileName}</Table.Cell>
|
|
<Table.Cell>{item.region}</Table.Cell>
|
|
<Table.Cell align="center">{item.capturedDttm}</Table.Cell>
|
|
<Table.Cell align="center">{item.scale}</Table.Cell>
|
|
<Table.Cell align="right">{item.fileSize}</Table.Cell>
|
|
<Table.Cell align="center">
|
|
{item.status}
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
))
|
|
)}
|
|
</Table.Body>
|
|
</Table.Container>
|
|
</Table>
|
|
</div>
|
|
</Section>
|
|
{isRegisterModalOpen && <AerialRegisterModal isOpen={isRegisterModalOpen} onClose={() => setIsRegisterModalOpen(false)} />}
|
|
</>
|
|
);
|
|
}
|