From 844e9630c2aa7ddc5f645f53fda8c59e0f12b236 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Sun, 20 Jun 2021 15:02:32 +0200
Subject: [PATCH] Complete insertion of a reservation.
---
.../ReservationPage/Reservation/TripStage.tsx | 84 +++++++++++++------
.../ReservationPage/ReservationDialog.tsx | 5 +-
2 files changed, 60 insertions(+), 29 deletions(-)
diff --git a/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx b/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
index a80d18a..297aeb5 100644
--- a/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
+++ b/src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx
@@ -1,9 +1,21 @@
/* eslint-disable react/jsx-props-no-spreading */
import React, { FC, useState } from 'react';
-import { Button, TextField, Typography } from '@material-ui/core';
+import {
+ Button,
+ Card,
+ CardActions,
+ CardContent,
+ TextField,
+ Typography,
+} from '@material-ui/core';
import { Control, Controller } from 'react-hook-form';
import { InputField } from 'components/Auth/InputField/InputField';
import { InsertReservationType } from 'types/InsertReservationType';
+import DateFnsUtils from '@date-io/date-fns';
+import {
+ MuiPickersUtilsProvider,
+ KeyboardDateTimePicker,
+} from '@material-ui/pickers';
type TripStageProps = {
control: Control<InsertReservationType>;
@@ -12,36 +24,56 @@ type TripStageProps = {
export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
const [stage, setStage] = useState<string[]>(['']);
const [value, setValue] = useState<string>('');
- console.log(control);
const addStage = (): void => {
setStage([...stage, value]);
};
return (
- <>
- {stage.map((field, index) => (
- <>
- <Typography variant="h3" component="h3">
- Stage {index}
- </Typography>
- <Controller
- as={<TextField variant="outlined" fullWidth label="Location" />}
- name={`tripStages[${index}].address`}
- control={control}
- defaultValue={field}
- />
- <InputField
- name={`tripStages[${index}].estimatedBeAt`}
- label="Predicted time"
- type="date"
- control={control}
- />
- </>
- ))}
- <Button variant="outlined" onClick={addStage} type="button">
- Add stage
- </Button>
- </>
+ <MuiPickersUtilsProvider utils={DateFnsUtils}>
+ <Card>
+ {stage.map((field, index) => (
+ <CardContent>
+ <Typography variant="h3" component="h3">
+ Stage {index}
+ </Typography>
+ <Controller
+ as={<input hidden />}
+ name={`tripStages[${index}].number`}
+ control={control}
+ defaultValue={index}
+ />
+ <Controller
+ as={<TextField variant="outlined" fullWidth label="Location" />}
+ name={`tripStages[${index}].location.address`}
+ control={control}
+ defaultValue={field}
+ />
+ <Controller
+ control={control}
+ name={`tripStages[${index}].estimatedBeAt`}
+ as={({ ref, ...rest }) => (
+ <KeyboardDateTimePicker
+ margin="normal"
+ id="date-picker-dialog"
+ label="Date picker dialog"
+ defaultValue={field}
+ format="dd/MM/yyyy"
+ KeyboardButtonProps={{
+ 'aria-label': 'Insert trip stage',
+ }}
+ {...rest}
+ />
+ )}
+ />
+ </CardContent>
+ ))}
+ <CardActions>
+ <Button variant="outlined" onClick={addStage} type="button">
+ Add stage
+ </Button>
+ </CardActions>
+ </Card>
+ </MuiPickersUtilsProvider>
);
};
diff --git a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
index 1f34d92..5938e3f 100644
--- a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
@@ -37,10 +37,9 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
const filledReservation = reservation;
getRoleObject().then((role) => {
filledReservation.insertedBy = role.id;
+ filledReservation.senior = senior?.id;
+ setReservation(filledReservation);
});
- filledReservation.senior = senior?.id;
- console.log(filledReservation);
- setReservation(filledReservation);
handleClose();
};
--
GitLab