88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
import { Mutex } from "async-mutex"
|
|
import styled from "styled-components"
|
|
import useAsyncEffect from "use-async-effect"
|
|
import { useItemStore } from "../providers/ItemsProvider"
|
|
|
|
type ItemHistoryTableProps = {
|
|
itemId: number
|
|
}
|
|
|
|
const ItemHistoryTableStyle = styled.table`
|
|
width: 100%
|
|
`
|
|
const ItemHistoryTableHead = styled.thead`
|
|
background-color: #34067eff
|
|
`
|
|
const ItemHistoryTableItem = styled.td`
|
|
align: center
|
|
`
|
|
|
|
const ItemHistoryTH = styled.th`
|
|
align: center
|
|
`
|
|
|
|
const ItemHistoryTableBody = styled.tbody`
|
|
> :nth-child(even) {
|
|
background-color: #410041ff;
|
|
}
|
|
> :hover {
|
|
background-color: #707070ff;
|
|
}
|
|
`
|
|
|
|
const ItemHistoryTableRow = styled.tr`
|
|
|
|
`
|
|
|
|
const itemHistoryMutex = new Mutex()
|
|
|
|
export const ItemHistoryTable = ({itemId}: ItemHistoryTableProps) => {
|
|
const itemStore = useItemStore((state) => state)
|
|
|
|
useAsyncEffect(async () => {
|
|
if(itemStore.itemHistories.filter((ih) => parseInt(ih.ItemId) === itemId).length === 0) {
|
|
const release = await itemHistoryMutex.acquire()
|
|
await itemStore.getItemHistory(itemId)
|
|
await release()
|
|
}
|
|
}, [itemStore.itemHistories])
|
|
|
|
return (
|
|
<ItemHistoryTableStyle>
|
|
<ItemHistoryTableHead>
|
|
<tr>
|
|
<ItemHistoryTH>
|
|
item
|
|
</ItemHistoryTH>
|
|
<ItemHistoryTH>
|
|
price
|
|
</ItemHistoryTH>
|
|
<ItemHistoryTH>
|
|
valid from
|
|
</ItemHistoryTH>
|
|
<ItemHistoryTH>
|
|
valid to
|
|
</ItemHistoryTH>
|
|
</tr>
|
|
</ItemHistoryTableHead>
|
|
<ItemHistoryTableBody>
|
|
{itemStore.itemHistories.filter((ih) => parseInt(ih.ItemId) === itemId).map((iph) => (
|
|
<ItemHistoryTableRow key = {iph.ItemId + new Date(iph.ValidFrom).getMilliseconds()}>
|
|
<ItemHistoryTableItem>
|
|
{iph.ItemName}
|
|
</ItemHistoryTableItem>
|
|
<ItemHistoryTableItem>
|
|
{Math.trunc(parseInt(iph.ItemPrice) * 100) / 100}
|
|
</ItemHistoryTableItem>
|
|
<ItemHistoryTableItem>
|
|
{new Date(iph.ValidFrom).toLocaleDateString()}
|
|
</ItemHistoryTableItem>
|
|
<ItemHistoryTableItem>
|
|
{new Date(iph.ValidTo).toLocaleDateString()}
|
|
</ItemHistoryTableItem>
|
|
</ItemHistoryTableRow>
|
|
))}
|
|
</ItemHistoryTableBody>
|
|
</ItemHistoryTableStyle>
|
|
)
|
|
} |