Merge commit 'fa3f31133a183f8442c77416af14160ebe60f82d'
This commit is contained in:
commit
551ddac725
File diff suppressed because it is too large
Load Diff
|
@ -6,7 +6,7 @@ import StoreSelect from './storeSelect';
|
||||||
import ProductTable from './productTable';
|
import ProductTable from './productTable';
|
||||||
|
|
||||||
interface CreateReservationProps {
|
interface CreateReservationProps {
|
||||||
// createReservation: Function
|
createReservation: Function
|
||||||
}
|
}
|
||||||
|
|
||||||
const Form = styled.form`
|
const Form = styled.form`
|
||||||
|
@ -30,7 +30,7 @@ const Button = styled.button`
|
||||||
width: 200px;
|
width: 200px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CreateReservation = React.memo(({ /* createReservation */ }: CreateReservationProps) => {
|
const CreateReservation = React.memo(({ createReservation }: CreateReservationProps) => {
|
||||||
const [reservationProducts, setReservationProducts] = React.useState<{ [key: string]: number }>({});
|
const [reservationProducts, setReservationProducts] = React.useState<{ [key: string]: number }>({});
|
||||||
const [storeId, setStoreId] = React.useState<string>('');
|
const [storeId, setStoreId] = React.useState<string>('');
|
||||||
const onChangeQuantity = React.useCallback((productId: string, quantity: string) => {
|
const onChangeQuantity = React.useCallback((productId: string, quantity: string) => {
|
||||||
|
@ -42,7 +42,14 @@ const CreateReservation = React.memo(({ /* createReservation */ }: CreateReserva
|
||||||
|
|
||||||
const onSubmit = React.useCallback((e) => {
|
const onSubmit = React.useCallback((e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
createReservation({
|
||||||
|
variables: {
|
||||||
|
reservationProducts: Object.keys(reservationProducts).map(productId => ({
|
||||||
|
productId,
|
||||||
|
quantity: reservationProducts[productId]
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
});
|
||||||
}, [reservationProducts]);
|
}, [reservationProducts]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -55,4 +62,8 @@ const CreateReservation = React.memo(({ /* createReservation */ }: CreateReserva
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export default CreateReservation;
|
|
||||||
|
export default compose(
|
||||||
|
graphql(mutations.createReservation, { name: 'createReservation' })
|
||||||
|
)(CreateReservation);
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
input ReservationProductInput {
|
||||||
|
productId: ID
|
||||||
|
quantity: Int
|
||||||
|
}
|
||||||
|
|
||||||
|
mutation createReservation($reservationProducts: [ReservationProductInput]) {
|
||||||
|
createReservation(input: { reservationProducts: $reservationProducts }) {
|
||||||
|
date
|
||||||
|
id
|
||||||
|
}
|
||||||
|
}
|
|
@ -46,7 +46,32 @@ interface ProductTableProps {
|
||||||
|
|
||||||
const ProductTable = React.memo(({ onChangeQuantity, storeId }: ProductTableProps) => {
|
const ProductTable = React.memo(({ onChangeQuantity, storeId }: ProductTableProps) => {
|
||||||
return (
|
return (
|
||||||
<div>Product table</div>
|
<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>
|
||||||
|
<QuantityTd>
|
||||||
|
<QuantitySelect id={id} onChange={onChangeQuantity} />
|
||||||
|
</QuantityTd>
|
||||||
|
</Tr>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</Table>)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</Query >
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
query getStores{
|
||||||
|
stores{
|
||||||
|
id,
|
||||||
|
name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
query getStore($storeId: String!){
|
||||||
|
store (id:$storeId){
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
city,
|
||||||
|
number,
|
||||||
|
postalCode,
|
||||||
|
street,
|
||||||
|
products {id,description,name,price}
|
||||||
|
}
|
||||||
|
}
|
|
@ -25,7 +25,17 @@ const StoreSelect = React.memo(({ value, onChange }: StoreSelectProps) => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>Store select</div>
|
<Query query={queries.getStores}>
|
||||||
|
{({ data: { stores = [] } = {} }) => (
|
||||||
|
<Select value={value} onChange={onChangeStore}>
|
||||||
|
<option key="default" value="">Select a store</option>
|
||||||
|
{stores.map(({ id, name }: Store) => {
|
||||||
|
return (<option key={id} value={id}>{name}</option>)
|
||||||
|
})}
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</Query>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue