65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Button,
|
|
TextField,
|
|
} from "@mui/material";
|
|
import { useState, useEffect } from "react";
|
|
|
|
interface StatusChangeDialogProps {
|
|
open: boolean;
|
|
newStatus: string;
|
|
reason: string;
|
|
setReason: React.Dispatch<React.SetStateAction<string>>;
|
|
handleClose: () => void;
|
|
handleSave: () => void;
|
|
}
|
|
|
|
const StatusChangeDialog = ({
|
|
open,
|
|
newStatus,
|
|
reason,
|
|
setReason,
|
|
handleClose,
|
|
handleSave,
|
|
}: StatusChangeDialogProps) => {
|
|
const [isValid, setIsValid] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const noSpaces = reason.replace(/\s/g, ""); // remove all spaces
|
|
const length = noSpaces.length;
|
|
setIsValid(length >= 12 && length <= 400);
|
|
}, [reason]);
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose}>
|
|
<DialogTitle>Change Status</DialogTitle>
|
|
<DialogContent>
|
|
You want to change the status to <b>{newStatus}</b>. Please provide a
|
|
reason for the change.
|
|
<TextField
|
|
label="Reason for change"
|
|
variant="outlined"
|
|
fullWidth
|
|
multiline
|
|
rows={4}
|
|
value={reason}
|
|
onChange={(e) => setReason(e.target.value)}
|
|
helperText="Reason must be between 12 and 400 characters"
|
|
sx={{ mt: 2 }}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleClose}>Cancel</Button>
|
|
<Button variant="contained" onClick={handleSave} disabled={!isValid}>
|
|
Save
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default StatusChangeDialog;
|