2019-02-11 18:56:58 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { Query } from 'react-apollo';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
|
|
|
import QuantitySelect from './quantitySelect';
|
|
|
|
import * as queries from './queries.graphql';
|
|
|
|
|
|
|
|
const Table = styled.table`
|
|
|
|
margin-top: 32px;
|
|
|
|
margin-bottom: 32px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Tr = styled.tr`
|
|
|
|
> td {
|
|
|
|
padding-bottom: 16px;
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
|
|
|
const Description = styled.div`
|
|
|
|
font-size: 12px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const PriceTd = styled.td`
|
|
|
|
padding-left: 64px;
|
|
|
|
padding-right 16px;
|
|
|
|
vertical-align: top;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const QuantityTd = styled.td`
|
|
|
|
padding-left: 16px;
|
|
|
|
padding-right 16px;
|
|
|
|
width: 64px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
interface Product {
|
|
|
|
description: string;
|
|
|
|
name: string;
|
|
|
|
price: number;
|
|
|
|
id: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ProductTableProps {
|
|
|
|
onChangeQuantity: Function;
|
|
|
|
storeId: string
|
|
|
|
}
|
|
|
|
|
|
|
|
const ProductTable = React.memo(({ onChangeQuantity, storeId }: ProductTableProps) => {
|
|
|
|
return (
|
2021-02-04 16:48:17 +00:00
|
|
|
<Query query={queries.getStore} skip={!storeId} variables={{ "storeId": storeId }}>
|
|
|
|
{({ data }: any) => {
|
|
|
|
//const products = data && data.store && data.store.products;
|
|
|
|
//console.table(products);
|
|
|
|
return (<Table>
|
|
|
|
<tbody>
|
|
|
|
{
|
|
|
|
data && data.store && data.store.products.map(({ description, id, name, price }: Product) => {
|
|
|
|
return <Tr key={id}>
|
|
|
|
<td>
|
|
|
|
<div>{name}</div>
|
|
|
|
<Description>{description}</Description>
|
|
|
|
</td>
|
|
|
|
<PriceTd>€ {price.toFixed(2)}</PriceTd>
|
2021-02-04 17:49:30 +00:00
|
|
|
<QuantityTd>
|
|
|
|
<QuantitySelect id={id} onChange={onChangeQuantity} />
|
|
|
|
</QuantityTd>
|
2021-02-04 16:48:17 +00:00
|
|
|
</Tr>
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</tbody>
|
|
|
|
</Table>)
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</Query >
|
2019-02-11 18:56:58 +00:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
export default ProductTable;
|