adding edit shift staff form

Signed-off-by: Nilesh Gupta <[email protected]>

src/components/Staff/EditShiftStaffForm.stories.tsx

@@ -0,0 +1,33 @@
+import moment from 'moment';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Moment} from "moment/moment";
+import type {IEditShiftStaff, IEditShiftStaffForm} from './EditShiftStaffForm'
+import {EditShiftStaffForm as EditShiftStaffFormComponent} from './EditShiftStaffForm'
+
+const meta: Meta<typeof EditShiftStaffFormComponent> = {
+  title: "DRT Components/EditShiftStaffFormComponent",
+  component: EditShiftStaffFormComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EditShiftStaffFormComponent>;
+
+const essform: IEditShiftStaff = {
+  actualStaff: 1,
+  dayAt: moment(),
+  startTime: moment(),
+  endTime: moment().add(1, 'hour'),
+}
+
+export const EditShiftStaffForm = {
+  args: {
+    essf: essform,
+    handleSubmit: (essf: IEditShiftStaff) => {
+      console.log('Submit clicked', essf);
+    },
+    cancelHandler: () => {
+      console.log('Cancel clicked');
+    },
+  }
+};

src/components/Staff/EditShiftStaffForm.tsx

@@ -0,0 +1,102 @@
+import React, {useState} from "react";
+import {Box, Button, Link, TextField, Typography, Select, MenuItem} from "@mui/material";
+import {Moment} from "moment";
+import {TimePicker} from '@mui/x-date-pickers/TimePicker';
+import {DatePicker} from '@mui/x-date-pickers/DatePicker';
+import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+
+export type IEditShiftStaff = {
+  dayAt: Moment,
+  startTime: Moment | null,
+  endTime: Moment | null,
+  actualStaff: number | null
+}
+
+export interface IEditShiftStaffForm {
+  essf: IEditShiftStaff | null,
+  handleSubmit: (ssf: IEditShiftStaff) => void,
+  cancelHandler: () => void
+}
+
+export const EditShiftStaffForm = ({essf, handleSubmit, cancelHandler}: IEditShiftStaffForm) => {
+  const [selectedDate, setSelectedDate] = useState<Moment>(essf?.dayAt);
+  const [startTime, setStartTime] = useState<Moment | null>(null);
+  const [endTime, setEndTime] = useState<Moment | null>(null);
+  const [staffNumber, setStaffNumber] = useState<number>(essf?.actualStaff ? essf?.actualStaff : 0);
+
+  const handleDateChange = (date: Moment | null) => {
+    setSelectedDate(date);
+  };
+
+  const handleStartTimeChange = (date: Moment | null) => {
+    setStartTime(date);
+  };
+
+  const handleEndTimeChange = (date: Moment | null) => {
+    setEndTime(date);
+  };
+
+  const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setStaffNumber(event.target.value as number);
+  };
+
+  const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => {
+    const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000;
+    console.log("endTime.valueOf", endTime.valueOf())
+    console.log("startTime.valueOf", startTime.valueOf())
+    console.log("selectedDate", selectedDate.valueOf())
+    console.log("difference", startTime.valueOf() - selectedDate.valueOf())
+    console.log("staffNumber", staffNumber)
+    const ess: IEditShiftStaff = {
+      dayAt: selectedDate,
+      startTime: startTime,
+      endTime: endTime,
+      actualStaff: staffNumber
+    };
+    handleSubmit(ess);
+  }
+
+
+  return <Box data-testid={`shift-staff-form`}
+              sx={{
+                paddingTop: '10px',
+                paddingLeft: '20px',
+                paddingBottom: '10px',
+                backgroundColor: '#B4B5BE',
+                border: '1px solid black',
+                width: '350px'
+              }}>
+    <Typography variant="h2" component="h2">Update staff</Typography>
+    <Box sx={{paddingTop: '10px'}}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker sx={{backgroundColor: '#FFFFFF'}} label="Date" value={selectedDate} onChange={handleDateChange}
+                    renderInput={(params) => <TextField {...params} />}/>
+      </LocalizationProvider>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="Start Time"
+                      value={startTime} onChange={handleStartTimeChange}
+                      renderInput={(params) => <TextField {...params} />}/>
+        </LocalizationProvider>
+      </Box>
+    <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <TimePicker sx={{backgroundColor: '#FFFFFF'}} label="End Time"
+                      value={endTime} onChange={handleEndTimeChange}
+                      renderInput={(params) => <TextField {...params} />}/>
+        </LocalizationProvider>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <TextField sx={{backgroundColor: '#FFFFFF'}} label="Staff Number"
+                 value={staffNumber}
+                 onChange={handleStaffNumberChange} type="number"/>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Button sx={{paddingLeft: '10px'}} onClick={handleSubmitForm}>Update staff</Button>
+      <Button sx={{paddingLeft: '20px'}} onClick={cancelHandler}>Cancel</Button>
+    </Box>
+  </Box>
+
+}

src/components/Staff/ShiftStaffForm.stories.tsx

@@ -30,28 +30,6 @@ export const ShiftStaffForm = {
   args: {
     ssf: ssform,
     handleSubmit: (ssf: IShiftStaffForm) => {
-      // port: string,
-      //  terminal: string,
-      //  shiftName: string,
-      //  startAt: Moment,
-      //  periodInMinutes: number,
-      //  endAt: Moment | null,
-      //  frequency: string | null,
-      //  actualStaff: number | null,
-      //  minimumRosteredStaff: number,
-      //  email: string) => {
-      //   const json = {
-      //   'port': port,
-      //   'terminal': terminal,
-      //   'shiftName': shiftName,
-      //   'startAt': startAt.valueOf(),
-      //   'periodInMinutes': periodInMinutes,
-      //   'endAt': endAt?.valueOf(),
-      //   'frequency': frequency,
-      //   'actualStaff': actualStaff,
-      //   'minimumRosteredStaff': minimumRosteredStaff,
-      //   'email': email
-      // }
       console.log('Submit clicked', ssf);
     },
     cancelHandler: () => {

src/components/Staff/index.ts

@@ -6,3 +6,5 @@ export type {IMinStaffWarning} from './MinStaffWarning'
 export type {IMinStaffForm} from './MinStaffForm'
 export type {IShiftStaffForm, ShiftStaffFormData} from './ShiftStaffForm'
 export {ShiftStaffForm} from './ShiftStaffForm'
+export type {IEditShiftStaff, IEditShiftStaffForm} from './EditShiftStaffForm'
+export {EditShiftStaffForm} from './EditShiftStaffForm'

src/components/index.ts

@@ -14,3 +14,6 @@ export type {IMinStaffSuccess, IMinStaffWarning, IMinStaffForm} from './Staff'
 
 export type {IShiftStaffForm, ShiftStaffFormData} from './Staff'
 export {ShiftStaffForm} from './Staff'
+
+export type {IEditShiftStaff, IEditShiftStaffForm} from './Staff'
+export {EditShiftStaffForm} from './Staff'