Drtii 1557 min staff (#37)

* Adding add min staff alert Signed-off-by: Nilesh Gupta <[email protected]> * remove strong Signed-off-by: Nilesh Gupta <[email protected]> * adding form to update min staff number Signed-off-by: Nilesh Gupta <[email protected]> * Adding min staff form for export Signed-off-by: Nilesh Gupta <[email protected]> * adding continueCallback for update Signed-off-by: Nilesh Gupta <[email protected]> * Change success icon and colors Signed-off-by: Nilesh Gupta <[email protected]> * adding test for min staff form and warning component Signed-off-by: Nilesh Gupta <[email protected]> * using AddCircleOutlineOutlinedIcon for adding min staff Signed-off-by: Nilesh Gupta <[email protected]> * remove icon on continue Signed-off-by: Nilesh Gupta <[email protected]> * separating min staff update sucess component Signed-off-by: Nilesh Gupta <[email protected]> * Update index for export IMinSuccess Type Signed-off-by: Nilesh Gupta <[email protected]> * adding close success handler Signed-off-by: Nilesh Gupta <[email protected]> * adding cancel to mins staff form Signed-off-by: Nilesh Gupta <[email protected]> * adding decimal error check Signed-off-by: Nilesh Gupta <[email protected]> * remove colon Signed-off-by: Nilesh Gupta <[email protected]> * update title Signed-off-by: Nilesh Gupta <[email protected]> * adding text change Signed-off-by: Nilesh Gupta <[email protected]> * fix test and update esbuild Signed-off-by: Nilesh Gupta <[email protected]> * Initial submit shift staff form Signed-off-by: Nilesh Gupta <[email protected]> * DRTII-1557 adding json for handle submit Signed-off-by: Nilesh Gupta <[email protected]> * using IShiftStaffForm instead if individual fields Signed-off-by: Nilesh Gupta <[email protected]> * addin export for shift staff to index Signed-off-by: Nilesh Gupta <[email protected]> * adding optional ssf Signed-off-by: Nilesh Gupta <[email protected]> * adding edit shift staff form Signed-off-by: Nilesh Gupta <[email protected]> * updating minstaffSucces to staffSuccess Signed-off-by: Nilesh Gupta <[email protected]> * updating edit shif staff Signed-off-by: Nilesh Gupta <[email protected]> * remove moment in initialization Signed-off-by: Nilesh Gupta <[email protected]> * rename ess to essf Signed-off-by: Nilesh Gupta <[email protected]> * using AdapterMoment an removing null Signed-off-by: Nilesh Gupta <[email protected]> * update handle change event with adapter date Signed-off-by: Nilesh Gupta <[email protected]> * change width of edit form * adding summary of selection * date format DD-MM-YYY Signed-off-by: Nilesh Gupta <[email protected]> * updating date format and 24 time format for edit form Signed-off-by: Nilesh Gupta <[email protected]> * adding style changes to edit shift form Signed-off-by: Nilesh Gupta <[email protected]> * fixing setting date issue Signed-off-by: Nilesh Gupta <[email protected]> * fixing day and remove border Signed-off-by: Nilesh Gupta <[email protected]> * moving 2nd line padding by 2 pixel in summary as it is lookinn bit left in drt Signed-off-by: Nilesh Gupta <[email protected]> * update edit form Signed-off-by: Nilesh Gupta <[email protected]> * removing unused components Signed-off-by: Nilesh Gupta <[email protected]> * update time range form Signed-off-by: Nilesh Gupta <[email protected]> * fixing 2 space indent and remove renderInput for date picker Signed-off-by: Nilesh Gupta <[email protected]> --------- Signed-off-by: Nilesh Gupta <[email protected]> Signed-off-by: Nilesh Gupta <[email protected]> Co-authored-by: Nilesh Gupta <[email protected]> Co-authored-by: Nilesh Gupta <[email protected]>
UKHomeOffice · Nov 5, 2024 · 40d2e91 · 40d2e91
1 parent c3dd252
commit 40d2e91
Show file tree

Hide file tree

Showing 8 changed files with 807 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@drt/drt-react-components",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "React components for DRT applications",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
@@ -67,6 +67,9 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-svg-transformer": "^1.0.0",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
+    "momentjs": "^2.0.0",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -95,14 +98,20 @@
     "@emotion/styled": "^11.11.5",
     "@fontsource/material-icons": "^5.0.18",
     "@fontsource/roboto": "^5.0.13",
-    "@mui/icons-material": "5.11.16",
+    "@mui/icons-material": "5.16.5",
     "@mui/lab": "5.0.0-alpha.119",
     "@mui/material": "5.16.5",
+    "@mui/x-date-pickers": "^6.20.2",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.5.43",
+    "momentjs": "^2.0.0",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/icons": "^1.2.9",
     "@svgr/webpack": "^8.1.0",
     "css-loader": "^7.1.2",
     "css-mediaquery": "^0.1.2",
+    "dayjs": "^1.11.13",
+    "esbuild": "^0.24.0",
     "install-peers": "^1.0.4",
     "postcss": "^8.4.38",
     "sass-loader": "^14.2.1",

diff --git a/src/components/Staff/StaffUpdateSuccess.stories.tsx b/src/components/Staff/StaffUpdateSuccess.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StaffUpdateSuccess as StaffUpdateSuccessComponent } from "./StaffUpdateSuccess";
+
+const meta: Meta<typeof StaffUpdateSuccessComponent> = {
+  title: "DRT Components/StaffSuccessComponent",
+  component: StaffUpdateSuccessComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof StaffUpdateSuccessComponent>;
+
+export const StaffSuccess: Story = {
+  args: {
+    staffNumber: 1,
+    message: "You updated the staff number for selected date and time",
+    closeHandler: () => {
+      console.log("Close handler")
+    }
+  }
+};
diff --git a/src/components/Staff/StaffUpdateSuccess.tsx b/src/components/Staff/StaffUpdateSuccess.tsx
@@ -0,0 +1,27 @@
+import {Alert, Box, IconButton} from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+
+export interface IStaffUpdateSuccess {
+  staffNumber: number | null,
+  message: string,
+  closeHandler: () => void
+}
+
+export const StaffUpdateSuccess = ({staffNumber, message, closeHandler}: IStaffUpdateSuccess) => {
+  return <Box data-testid={`min-staff-form-success`} sx={{marginTop: '10px', backgroundColor: '#eeeff0'}}>
+    <Alert sx={{color: '#FFFFFF', backgroundColor: '#2E7D32'}} severity="success"
+           action={
+             <IconButton
+               aria-label="close"
+               color="inherit"
+               size="small"
+               onClick={closeHandler}
+             >
+               <CloseIcon fontSize="inherit"/>
+             </IconButton>
+           }
+           icon={<CheckCircleIcon style={{color: '#FFFFFF'}}/>}>{message} {staffNumber}</Alert>
+  </Box>
+}
diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx
@@ -0,0 +1,34 @@
+import moment from 'moment';
+import type {Meta, StoryObj} from '@storybook/react';
+import type {IUpdateStaffForTimeRangeData} from './UpdateStaffForTimeRangeForm'
+import {UpdateStaffForTimeRangeForm as UpdateStaffForTimeRangeFormComponent} from './UpdateStaffForTimeRangeForm'
+
+const meta: Meta<typeof UpdateStaffForTimeRangeFormComponent> = {
+  title: "DRT Components/UpdateStaffForTimeRangeFormComponent",
+  component: UpdateStaffForTimeRangeFormComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UpdateStaffForTimeRangeFormComponent>;
+
+const ustdForm: IUpdateStaffForTimeRangeData = {
+  actualStaff: 1,
+  startDayAt: moment(),
+  startTimeAt: moment(),
+  endTimeAt: moment().add(1, 'hour'),
+  endDayAt: moment().add(1, 'day')
+}
+
+export const UpdateStaffForTimeRangeForm = {
+  args: {
+    ustd: ustdForm,
+    interval: 15,
+    handleSubmit: (essf: IUpdateStaffForTimeRangeData) => {
+      console.log('Submit clicked', essf);
+    },
+    cancelHandler: () => {
+      console.log('Cancel clicked');
+    },
+  }
+};
diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx
@@ -0,0 +1,206 @@
+import React, {useState} from "react";
+import {Box, Button, IconButton, TextField, TextFieldProps, Typography} from "@mui/material";
+import moment, {Moment} from "moment";
+import {TimePicker} from '@mui/x-date-pickers/TimePicker';
+import {DatePicker} from '@mui/x-date-pickers/DatePicker';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import CloseIcon from "@mui/icons-material/Close";
+import {AdapterMoment} from "@mui/x-date-pickers/AdapterMoment";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import PeopleIcon from '@mui/icons-material/People';
+
+export type IUpdateStaffForTimeRangeData = {
+  startDayAt: Moment,
+  startTimeAt: Moment,
+  endTimeAt: Moment,
+  endDayAt: Moment,
+  actualStaff: number
+}
+
+export interface IUpdateStaffForTimeRangeForm {
+  ustd: IUpdateStaffForTimeRangeData,
+  interval: number,
+  handleSubmit: (ssf: IUpdateStaffForTimeRangeData) => void,
+  cancelHandler: () => void
+}
+
+export const UpdateStaffForTimeRangeForm = ({
+                                              ustd,
+                                              interval,
+                                              handleSubmit,
+                                              cancelHandler
+                                            }: IUpdateStaffForTimeRangeForm) => {
+  const [startDate, setStartDate] = useState<Moment>(ustd.startDayAt);
+  const [startTime, setStartTime] = useState<Moment>(ustd.startTimeAt.startOf('day'));
+  const [endTime, setEndTime] = useState<Moment>(ustd.endTimeAt.startOf('day'));
+  const [endDate, setEndDate] = useState<Moment>(ustd.endDayAt);
+  const [staffNumber, setStaffNumber] = useState<number>(ustd.actualStaff);
+  const [error, setError] = useState<string | null>(null);
+  const handleStartDateChange = (date: Moment | null) => {
+    setStartDate(date?.startOf('day') || moment());
+    setEndDate(date?.startOf('day') || moment());
+  };
+
+  const handleEndDateChange = (date: Moment | null) => {
+    setEndDate(date?.startOf('day') || moment());
+  };
+
+  const handleStartTimeChange = (date: Moment | null) => {
+    setStartTime(date?.startOf('minute') || moment());
+    if (date && endTime && date.isAfter(endTime)) {
+      setError("Start time must be less than or equal to end time.");
+      return;
+    }
+    setError(null);
+  };
+
+  const handleEndTimeChange = (date: Moment | null) => {
+    setEndTime(date?.startOf('minute') || moment());
+    if (date && startTime && date.isBefore(startTime)) {
+      setError("End time must be greater than or equal to start time.");
+      return;
+    }
+    setError(null);
+  };
+
+  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", startDate.valueOf())
+    console.log("diffInMinutes", diffInMinutes)
+    console.log("staffNumber", staffNumber)
+    const ess: IUpdateStaffForTimeRangeData = {
+      startDayAt: startDate,
+      startTimeAt: startTime,
+      endTimeAt: endTime,
+      endDayAt: endDate,
+      actualStaff: staffNumber
+    };
+    handleSubmit(ess);
+  }
+  const duration = moment.duration(endTime.diff(startTime));
+  const hours = Math.floor(duration.asHours());
+  const minutes = duration.minutes();
+
+  return <Box data-testid={`shift-staff-form`}
+              sx={{
+                paddingTop: '10px',
+                paddingLeft: '20px',
+                paddingBottom: '10px',
+                paddingRight: '20px',
+                width: '400px'
+              }}>
+    <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+      <Typography variant="h2" component="h2" fontWeight={"bold"}>Edit staff</Typography>
+      <IconButton
+        aria-label="close"
+        color="inherit"
+        size="small"
+        onClick={cancelHandler}>
+        <CloseIcon fontSize="inherit"/>
+      </IconButton>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Typography variant="h3" component="h3">Date</Typography>
+      <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Start Date" value={startDate}
+                      onChange={handleStartDateChange}
+                      format="DD MMMM YYYY"/>
+        </LocalizationProvider>
+      </Box>
+      <Box sx={{paddingTop: '10px'}}>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <DatePicker sx={{backgroundColor: '#FFFFFF', width: '100%'}}
+                      label="End Date"
+                      value={endDate}
+                      onChange={handleEndDateChange}
+                      format="DD MMMM YYYY"
+          />
+        </LocalizationProvider>
+      </Box>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Typography variant="h3" component="h3">Time</Typography>
+      <Box sx={{paddingTop: '10px', display: 'flex', justifyContent: 'flex-start'}}>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <TimePicker sx={{backgroundColor: '#FFFFFF', width: '50%'}} label="Start Time"
+                      value={startTime}
+                      ampm={false}
+                      onChange={handleStartTimeChange}
+                      minutesStep={interval}
+                      views={['hours', 'minutes']}
+          />
+        </LocalizationProvider>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale={'en-gb'}>
+          <TimePicker sx={{paddingLeft: '10px', backgroundColor: '#FFFFFF', width: '50%'}} label="End Time"
+                      value={endTime}
+                      onChange={handleEndTimeChange}
+                      minutesStep={interval}
+                      ampm={false}
+                      views={['hours', 'minutes']}/>
+        </LocalizationProvider>
+      </Box>
+    </Box>
+    <Box sx={{paddingTop: '10px', paddingBottom: '10px'}}>
+      <Typography variant="h3" component="h3">Staff</Typography>
+      <Box sx={{paddingTop: '10px'}}>
+        <TextField sx={{backgroundColor: '#FFFFFF', width: '100%'}} label="Staff Number"
+                   value={staffNumber}
+                   onChange={handleStaffNumberChange} type="number"/>
+      </Box>
+    </Box>
+    {error && <Typography color="error" sx={{paddingTop: '10px'}}>{error}</Typography>}
+    <Box sx={{
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      paddingLeft: '10px',
+      paddingRight: '20px',
+      backgroundColor: '#E6E9F1'
+    }}>
+      <Typography variant="h6">Summary of Selections:</Typography>
+      <Box sx={{paddingTop: '10px'}}>
+        <Box sx={{display: 'flex', alignItems: 'center'}}>
+          <CalendarTodayIcon sx={{marginRight: '5px'}}/>
+          <span
+            style={{fontWeight: 'bold'}}>{startDate.format(startDate.year() === endDate.year() ? 'DD MMM' : 'DD MMM YY')} to {endDate.format('DD MMM YYYY')}</span>
+        </Box>
+        <Typography
+          sx={{paddingLeft: '32px'}}>{endDate.diff(startDate, 'days') + 1} days</Typography>
+      </Box>
+      <Box sx={{paddingTop: '10px'}}>
+        <Box sx={{display: 'flex', alignItems: 'center'}}>
+          <AccessTimeIcon sx={{marginRight: '5px'}}/>
+          <span style={{fontWeight: 'bold'}}>{startTime.format('HH:mm')} to {endTime.format('HH:mm')}</span>
+        </Box>
+        <Typography
+          sx={{paddingLeft: '32px'}}>{hours} hours {minutes !== 0 && ` and ${minutes} minutes`}</Typography>
+      </Box>
+      <Box sx={{paddingTop: '10px'}}>
+        <Box sx={{display: 'flex', alignItems: 'center'}}>
+          <PeopleIcon sx={{marginRight: '5px'}}/>
+          <span style={{fontWeight: 'bold'}}>{staffNumber} Staff</span>
+        </Box>
+      </Box>
+    </Box>
+    <Box sx={{paddingTop: '10px'}}>
+      <Button sx={{
+        textTransform: 'none',
+        paddingLeft: '10px',
+        color: 'white',
+        width: '100%',
+        backgroundColor: 'primary.main',
+        '&:hover': {
+          backgroundColor: 'primary.dark',
+        }
+      }} disabled={!!error} onClick={handleSubmitForm}>Save staff updates</Button>
+    </Box>
+  </Box>
+
+}
diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts
@@ -0,0 +1,4 @@
+export {StaffUpdateSuccess} from './StaffUpdateSuccess'
+export type {IStaffUpdateSuccess} from './StaffUpdateSuccess'
+export type {IUpdateStaffForTimeRangeData, IUpdateStaffForTimeRangeForm} from './UpdateStaffForTimeRangeForm'
+export {UpdateStaffForTimeRangeForm} from './UpdateStaffForTimeRangeForm'
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,10 +1,16 @@
-export { default as FlightFlagger } from "./FlightFlagger";
+export {default as FlightFlagger} from "./FlightFlagger";
 
-export { FlightFlaggerFilters, FlightHighlightChip } from "./FlightFlagger";
-export type { IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip } from "./FlightFlagger";
+export {FlightFlaggerFilters, FlightHighlightChip} from "./FlightFlagger";
+export type {IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip} from "./FlightFlagger";
 
-export { StatusTag } from "./StatusTags";
-export type { IStatusTag } from "./StatusTags";
+export {StatusTag} from "./StatusTags";
+export type {IStatusTag} from "./StatusTags";
 
 export {default as Header} from './Header'
-export type { IHeader, MenuItem} from './Header';
+export type {IHeader, MenuItem} from './Header';
+
+export type {IStaffUpdateSuccess} from './Staff'
+export {StaffUpdateSuccess} from './Staff'
+
+export type {IUpdateStaffForTimeRangeData, IUpdateStaffForTimeRangeForm} from './Staff'
+export {UpdateStaffForTimeRangeForm} from './Staff'