91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import { useState } from "react"
|
|
import styled from "styled-components"
|
|
import { OrderItemTable } from "./OrderItemTable"
|
|
|
|
type OrderTableRowProps = {
|
|
orderId: number
|
|
orderer: string
|
|
dateDue: string
|
|
datePlaced: string
|
|
amountPaid: number
|
|
orderTotal: number
|
|
amountDue: number
|
|
filled: boolean
|
|
delivered: boolean
|
|
}
|
|
|
|
const OrderRowContainer = styled.div`
|
|
margin-bottom: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
width: 100%;
|
|
`
|
|
|
|
const OrderFieldContainer = styled.div`
|
|
display: inline-block;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
`
|
|
|
|
const OrderOverviewContainer = styled.div`
|
|
display: inline-block;
|
|
background-color: #410041ff;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
background-color: #920592ff;
|
|
cursor: pointer;
|
|
}
|
|
`
|
|
|
|
const OrderDetailsContainer = styled.div`
|
|
display: inline-block;
|
|
background-color: #6e296eff;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
background-color: #da51daff;
|
|
color: #000;
|
|
cursor: pointer;
|
|
}
|
|
`
|
|
|
|
export const OrderTableRow = ({orderId, orderer, dateDue, datePlaced, amountPaid, orderTotal, amountDue, filled, delivered}: OrderTableRowProps) => {
|
|
const dateDueDate = new Date(dateDue)
|
|
const datePlacedDate = new Date(datePlaced)
|
|
|
|
const [shouldShowDetails, setShouldShowDetails] = useState<boolean>(false)
|
|
|
|
return (
|
|
<li>
|
|
<OrderRowContainer>
|
|
<OrderOverviewContainer onClick={() => {
|
|
setShouldShowDetails(!shouldShowDetails)
|
|
}}>
|
|
<OrderFieldContainer>
|
|
orderer: {orderer}
|
|
</OrderFieldContainer>
|
|
<OrderFieldContainer>
|
|
due: {dateDueDate.toLocaleDateString()}
|
|
</OrderFieldContainer>
|
|
</OrderOverviewContainer>
|
|
{shouldShowDetails && (
|
|
<>
|
|
<OrderDetailsContainer>
|
|
<OrderFieldContainer>
|
|
placed: {datePlacedDate.toLocaleDateString()}
|
|
</OrderFieldContainer>
|
|
<OrderFieldContainer>
|
|
balance: {(Math.trunc(amountDue * 100) / 100).toString()}
|
|
</OrderFieldContainer>
|
|
<OrderFieldContainer>
|
|
{filled ? delivered ? "delivered" : "undelivered" : "unfilled"}
|
|
</OrderFieldContainer>
|
|
</OrderDetailsContainer>
|
|
<OrderItemTable orderId={orderId} />
|
|
</>
|
|
)}
|
|
</OrderRowContainer>
|
|
</li>
|
|
)
|
|
} |