80 lines
3.0 KiB
TypeScript
80 lines
3.0 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
import { LoadingOverlay, Modal, ModalProps, Table } from '@mantine/core';
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { getDetailBidHistories } from '../../apis/bid-histories';
|
|
import { extractNumber } from '../../lib/table/ultils';
|
|
import { IBid } from '../../system/type';
|
|
import { formatTime } from '../../utils';
|
|
|
|
export interface IShowHistoriesBidGraysApiModalProps extends ModalProps {
|
|
data: IBid | null;
|
|
onUpdated?: () => void;
|
|
}
|
|
|
|
export default function ShowHistoriesBidGraysApiModal({ data, onUpdated, ...props }: IShowHistoriesBidGraysApiModalProps) {
|
|
const [histories, setHistories] = useState<Record<string, string>[]>([]);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const rows = useMemo(() => {
|
|
return histories.map((element) => (
|
|
<Table.Tr key={element.LotId}>
|
|
<Table.Td>{`${element['UserInitials']} - ${element['UserShortAddress']}`}</Table.Td>
|
|
<Table.Td>{formatTime(new Date(extractNumber(element['OriginalDate']) || 0).toUTCString(), 'HH:mm:ss DD/MM/YYYY')}</Table.Td>
|
|
<Table.Td>{`AU $${element['Price']}`}</Table.Td>
|
|
<Table.Td>{`${element['Quantity']}`}</Table.Td>
|
|
<Table.Td>{`${element['WinningQuantity']}`}</Table.Td>
|
|
</Table.Tr>
|
|
));
|
|
}, [histories]);
|
|
|
|
const handleCallApi = useCallback(async () => {
|
|
if (!data?.lot_id) {
|
|
setHistories([]);
|
|
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
const response = await getDetailBidHistories(data?.lot_id);
|
|
setLoading(false);
|
|
|
|
if (response.data && response.data) {
|
|
setHistories(response.data);
|
|
}
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
handleCallApi();
|
|
}, [handleCallApi]);
|
|
|
|
return (
|
|
<Modal className="relative" {...props} size="xl" title={<span className="text-xl font-bold">BIDDING HISTORY</span>} centered>
|
|
<Table striped highlightOnHover withTableBorder withColumnBorders>
|
|
<Table.Thead>
|
|
<Table.Tr>
|
|
<Table.Th>Bidding Details</Table.Th>
|
|
<Table.Th>Bid Time</Table.Th>
|
|
<Table.Th>Bid Price</Table.Th>
|
|
<Table.Th>Bid Qty</Table.Th>
|
|
<Table.Th>Win Qty</Table.Th>
|
|
</Table.Tr>
|
|
</Table.Thead>
|
|
<Table.Tbody>
|
|
{histories.length <= 0 ? (
|
|
<Table.Tr>
|
|
<Table.Td colSpan={5} className="text-center">
|
|
None
|
|
</Table.Td>
|
|
</Table.Tr>
|
|
) : (
|
|
rows
|
|
)}
|
|
</Table.Tbody>
|
|
</Table>
|
|
|
|
<LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ blur: 2 }} />
|
|
</Modal>
|
|
);
|
|
}
|