test: edit user action frontend
This commit is contained in:
parent
0cc1a63722
commit
74c0d5235b
|
|
@ -11,7 +11,8 @@ import {
|
||||||
TextField,
|
TextField,
|
||||||
useTheme,
|
useTheme,
|
||||||
Switch,
|
Switch,
|
||||||
FormControlLabel
|
FormControlLabel,
|
||||||
|
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
@ -26,6 +27,7 @@ import Button from '@mui/material/Button';
|
||||||
import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
import { UserContext } from 'src/contexts/userContext';
|
||||||
|
|
||||||
interface HistoryProps {
|
interface HistoryProps {
|
||||||
errorLoadingS3Data: boolean;
|
errorLoadingS3Data: boolean;
|
||||||
|
|
@ -35,7 +37,8 @@ interface HistoryProps {
|
||||||
function HistoryOfActions(props: HistoryProps) {
|
function HistoryOfActions(props: HistoryProps) {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const searchParams = new URLSearchParams(location.search);
|
const searchParams = new URLSearchParams(location.search);
|
||||||
|
const context = useContext(UserContext);
|
||||||
|
const { currentUser } = context;
|
||||||
const [history, setHistory] = useState<Action[]>([]);
|
const [history, setHistory] = useState<Action[]>([]);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const tokencontext = useContext(TokenContext);
|
const tokencontext = useContext(TokenContext);
|
||||||
|
|
@ -49,8 +52,10 @@ function HistoryOfActions(props: HistoryProps) {
|
||||||
description: ''
|
description: ''
|
||||||
});
|
});
|
||||||
const { testModeMap, setTestMode } = useTestMode();
|
const { testModeMap, setTestMode } = useTestMode();
|
||||||
const isTestMode = testModeMap[props.id]||false;
|
const isTestMode = testModeMap[props.id] || false;
|
||||||
|
const [isRowHovered, setHoveredRow] = useState(-1);
|
||||||
|
const [selectedAction, setSelectedAction] = useState<number>(-1);
|
||||||
|
const [editMode, setEditMode] = useState(false);
|
||||||
const handleTestModeToggle = () => {
|
const handleTestModeToggle = () => {
|
||||||
setTestMode(props.id,!isTestMode);
|
setTestMode(props.id,!isTestMode);
|
||||||
};
|
};
|
||||||
|
|
@ -70,12 +75,47 @@ function HistoryOfActions(props: HistoryProps) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const resetNewAction = () => {
|
||||||
|
console.log("Reset action to default");
|
||||||
|
setActionDate(dayjs());
|
||||||
|
setNewAction({
|
||||||
|
...newAction,
|
||||||
|
['description']: '',
|
||||||
|
});
|
||||||
|
setEditMode(false);
|
||||||
|
};
|
||||||
|
|
||||||
const handleAddActionButton = () => {
|
const handleAddActionButton = () => {
|
||||||
setOpenModalAddAction(!openModalAddAction);
|
resetNewAction();
|
||||||
|
//setOpenModalAddAction(!openModalAddAction);
|
||||||
|
setOpenModalAddAction(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const SumbitNewAction = () => {
|
const SumbitNewAction = () => {
|
||||||
const res = axiosConfig.post(`/InsertNewAction`, newAction).catch((err) => {
|
const endpoint = editMode ? `/UpdateAction` : `/InsertNewAction`;
|
||||||
|
console.log("Add an action", endpoint);
|
||||||
|
const res=axiosConfig.post(endpoint,newAction).catch((err)=>{
|
||||||
|
if (err.response) {
|
||||||
|
// setError(true);
|
||||||
|
// setLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res){
|
||||||
|
//setOpenModalAddAction(!openModalAddAction);
|
||||||
|
setOpenModalAddAction(false);
|
||||||
|
setEditMode(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteUserModalHandleCancel = (e) => {
|
||||||
|
setOpenModalAddAction(false);
|
||||||
|
setEditMode(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const HandleDelete = (e) => {
|
||||||
|
console.log("Delete this action");
|
||||||
|
const res = axiosConfig.post(`/DeleteAction`, newAction).catch((err) => {
|
||||||
if (err.response) {
|
if (err.response) {
|
||||||
// setError(true);
|
// setError(true);
|
||||||
// setLoading(false);
|
// setLoading(false);
|
||||||
|
|
@ -83,14 +123,12 @@ function HistoryOfActions(props: HistoryProps) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (res) {
|
if (res) {
|
||||||
setOpenModalAddAction(!openModalAddAction);
|
console.log("Delete this action is successful");
|
||||||
|
setOpenModalAddAction(false);
|
||||||
|
setEditMode(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const deleteUserModalHandleCancel = (e) => {
|
|
||||||
setOpenModalAddAction(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const areRequiredFieldsFilled = () => {
|
const areRequiredFieldsFilled = () => {
|
||||||
for (const field of requiredFields) {
|
for (const field of requiredFields) {
|
||||||
if (!newAction[field]) {
|
if (!newAction[field]) {
|
||||||
|
|
@ -100,6 +138,33 @@ function HistoryOfActions(props: HistoryProps) {
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSelectOneAction = (action) => {
|
||||||
|
if (selectedAction != action.id) {
|
||||||
|
setSelectedAction(action.id);
|
||||||
|
setSelectedAction(-1);
|
||||||
|
if (action.userName === currentUser.name){
|
||||||
|
console.log("Select this action");
|
||||||
|
setActionDate(dayjs(action.timestamp));
|
||||||
|
setNewAction({ description: action.description, timestamp: action.timestamp });
|
||||||
|
setEditMode(true);
|
||||||
|
setOpenModalAddAction(true);
|
||||||
|
} else {
|
||||||
|
console.log('The user is not authorized to edit this action.');
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
setSelectedAction(-1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowMouseEnter = (id) => {
|
||||||
|
setHoveredRow(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowMouseLeave = () => {
|
||||||
|
setHoveredRow(-1);
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
axiosConfig
|
axiosConfig
|
||||||
.get(`/GetHistoryForInstallation?id=${props.id}`)
|
.get(`/GetHistoryForInstallation?id=${props.id}`)
|
||||||
|
|
@ -112,6 +177,7 @@ function HistoryOfActions(props: HistoryProps) {
|
||||||
navigate(routes.login);
|
navigate(routes.login);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
console.log("Update the tab:", openModalAddAction);
|
||||||
}, [openModalAddAction]);
|
}, [openModalAddAction]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -216,6 +282,21 @@ function HistoryOfActions(props: HistoryProps) {
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
{editMode && (
|
||||||
|
<Button
|
||||||
|
sx={{
|
||||||
|
marginLeft: 2,
|
||||||
|
textTransform: 'none',
|
||||||
|
bgcolor: '#ffc04d',
|
||||||
|
color: '#111111',
|
||||||
|
'&:hover': { bgcolor: '#f7b34d' }
|
||||||
|
}}
|
||||||
|
onClick={HandleDelete}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Box>
|
</Box>
|
||||||
</LocalizationProvider>
|
</LocalizationProvider>
|
||||||
|
|
@ -247,209 +328,254 @@ function HistoryOfActions(props: HistoryProps) {
|
||||||
|
|
||||||
<Grid item xs={12} md={12}>
|
<Grid item xs={12} md={12}>
|
||||||
{history.length > 0 && (
|
{history.length > 0 && (
|
||||||
|
// <Card sx={{ marginTop: '10px' }}>
|
||||||
|
// <Divider />
|
||||||
|
// <div>
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// height: '40px',
|
||||||
|
// marginBottom: '10px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 2,
|
||||||
|
// marginTop: '15px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// color="dimgrey"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// fontSize="1rem"
|
||||||
|
// gutterBottom
|
||||||
|
// noWrap
|
||||||
|
// >
|
||||||
|
// <FormattedMessage id="user" defaultMessage="User" />
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
//
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 1,
|
||||||
|
// marginTop: '15px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// color="dimgrey"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// fontSize="1rem"
|
||||||
|
// gutterBottom
|
||||||
|
// noWrap
|
||||||
|
// >
|
||||||
|
// <FormattedMessage id="date" defaultMessage="Date" />
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 1,
|
||||||
|
// marginTop: '15px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// color="dimgrey"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// fontSize="1rem"
|
||||||
|
// gutterBottom
|
||||||
|
// noWrap
|
||||||
|
// >
|
||||||
|
// <FormattedMessage id="time" defaultMessage="Time" />
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 6,
|
||||||
|
// marginTop: '15px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// color="dimgrey"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// fontSize="1rem"
|
||||||
|
// gutterBottom
|
||||||
|
// noWrap
|
||||||
|
// >
|
||||||
|
// <FormattedMessage
|
||||||
|
// id="description"
|
||||||
|
// defaultMessage="Description"
|
||||||
|
// />
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <Divider />
|
||||||
|
// <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
|
||||||
|
// {history.map((action, index) => {
|
||||||
|
// // Parse the timestamp string to a Date object
|
||||||
|
// const date = new Date(action.timestamp);
|
||||||
|
//
|
||||||
|
// // Extract the date part (e.g., "2023-05-31")
|
||||||
|
// const datePart = date.toLocaleDateString();
|
||||||
|
//
|
||||||
|
// // Extract the time part (e.g., "12:34:56")
|
||||||
|
// const timePart = date.toLocaleTimeString();
|
||||||
|
//
|
||||||
|
// return (
|
||||||
|
// <React.Fragment key={index}>
|
||||||
|
// <Divider />
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// minHeight: '40px',
|
||||||
|
// marginBottom: '10px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 2,
|
||||||
|
// marginTop: '15px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// color="text.primary"
|
||||||
|
// gutterBottom
|
||||||
|
// >
|
||||||
|
// {action.userName}
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
//
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 1,
|
||||||
|
// marginTop: '15px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// color="text.primary"
|
||||||
|
// gutterBottom
|
||||||
|
// >
|
||||||
|
// {datePart}
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 1,
|
||||||
|
// marginTop: '15px',
|
||||||
|
// display: 'flex',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// color="text.primary"
|
||||||
|
// gutterBottom
|
||||||
|
// >
|
||||||
|
// {timePart}
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
//
|
||||||
|
// <div
|
||||||
|
// style={{
|
||||||
|
// flex: 6,
|
||||||
|
// display: 'flex',
|
||||||
|
// marginTop: '15px',
|
||||||
|
// alignItems: 'center',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Typography
|
||||||
|
// variant="body1"
|
||||||
|
// fontWeight="bold"
|
||||||
|
// color="text.primary"
|
||||||
|
// gutterBottom
|
||||||
|
// style={{
|
||||||
|
// whiteSpace: 'normal',
|
||||||
|
// wordBreak: 'break-word'
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {action.description}
|
||||||
|
// </Typography>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </React.Fragment>
|
||||||
|
// );
|
||||||
|
// })}
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </Card>
|
||||||
<Card sx={{ marginTop: '10px' }}>
|
<Card sx={{ marginTop: '10px' }}>
|
||||||
<Divider />
|
<Divider />
|
||||||
<div>
|
<TableContainer component={Paper}>
|
||||||
<div
|
<Table>
|
||||||
style={{
|
<TableHead>
|
||||||
height: '40px',
|
<TableRow>
|
||||||
marginBottom: '10px',
|
<TableCell>User</TableCell>
|
||||||
display: 'flex',
|
<TableCell>Date</TableCell>
|
||||||
alignItems: 'center'
|
<TableCell>Time</TableCell>
|
||||||
}}
|
<TableCell>Description</TableCell>
|
||||||
>
|
</TableRow>
|
||||||
<div
|
</TableHead>
|
||||||
style={{
|
<TableBody>
|
||||||
flex: 2,
|
{history.map((action, index) => {
|
||||||
marginTop: '15px',
|
const isActionSelected =
|
||||||
display: 'flex',
|
action.id === selectedAction;
|
||||||
alignItems: 'center',
|
const date = new Date(action.timestamp);
|
||||||
justifyContent: 'center'
|
const datePart = date.toLocaleDateString();
|
||||||
}}
|
const timePart = date.toLocaleTimeString();
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
color="dimgrey"
|
|
||||||
fontWeight="bold"
|
|
||||||
fontSize="1rem"
|
|
||||||
gutterBottom
|
|
||||||
noWrap
|
|
||||||
>
|
|
||||||
<FormattedMessage id="user" defaultMessage="User" />
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
const rowStyles = isRowHovered === action.id
|
||||||
style={{
|
? { cursor: 'pointer', backgroundColor: 'lightgray' }
|
||||||
flex: 1,
|
: {};
|
||||||
marginTop: '15px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
color="dimgrey"
|
|
||||||
fontWeight="bold"
|
|
||||||
fontSize="1rem"
|
|
||||||
gutterBottom
|
|
||||||
noWrap
|
|
||||||
>
|
|
||||||
<FormattedMessage id="date" defaultMessage="Date" />
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
marginTop: '15px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
color="dimgrey"
|
|
||||||
fontWeight="bold"
|
|
||||||
fontSize="1rem"
|
|
||||||
gutterBottom
|
|
||||||
noWrap
|
|
||||||
>
|
|
||||||
<FormattedMessage id="time" defaultMessage="Time" />
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 6,
|
|
||||||
marginTop: '15px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
color="dimgrey"
|
|
||||||
fontWeight="bold"
|
|
||||||
fontSize="1rem"
|
|
||||||
gutterBottom
|
|
||||||
noWrap
|
|
||||||
>
|
|
||||||
<FormattedMessage
|
|
||||||
id="description"
|
|
||||||
defaultMessage="Description"
|
|
||||||
/>
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Divider />
|
|
||||||
<div style={{ maxHeight: '400px', overflowY: 'auto' }}>
|
|
||||||
{history.map((action, index) => {
|
|
||||||
// Parse the timestamp string to a Date object
|
|
||||||
const date = new Date(action.timestamp);
|
|
||||||
|
|
||||||
// Extract the date part (e.g., "2023-05-31")
|
return (
|
||||||
const datePart = date.toLocaleDateString();
|
<TableRow
|
||||||
|
hover
|
||||||
// Extract the time part (e.g., "12:34:56")
|
key={action.id}
|
||||||
const timePart = date.toLocaleTimeString();
|
selected={isActionSelected}
|
||||||
|
style={rowStyles}
|
||||||
return (
|
onClick={() => handleSelectOneAction(action)}
|
||||||
<React.Fragment key={index}>
|
onMouseEnter={() => handleRowMouseEnter(action.id)}
|
||||||
<Divider />
|
onMouseLeave={handleRowMouseLeave}
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
minHeight: '40px',
|
|
||||||
marginBottom: '10px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
<TableCell>{action.userName}</TableCell>
|
||||||
style={{
|
<TableCell>{datePart}</TableCell>
|
||||||
flex: 2,
|
<TableCell>{timePart}</TableCell>
|
||||||
marginTop: '15px',
|
<TableCell>{action.description}</TableCell>
|
||||||
display: 'flex',
|
</TableRow>
|
||||||
alignItems: 'center',
|
);
|
||||||
justifyContent: 'center'
|
})}
|
||||||
}}
|
</TableBody>
|
||||||
>
|
</Table>
|
||||||
<Typography
|
</TableContainer>
|
||||||
variant="body1"
|
|
||||||
fontWeight="bold"
|
|
||||||
color="text.primary"
|
|
||||||
gutterBottom
|
|
||||||
>
|
|
||||||
{action.userName}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
marginTop: '15px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
fontWeight="bold"
|
|
||||||
color="text.primary"
|
|
||||||
gutterBottom
|
|
||||||
>
|
|
||||||
{datePart}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
marginTop: '15px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
fontWeight="bold"
|
|
||||||
color="text.primary"
|
|
||||||
gutterBottom
|
|
||||||
>
|
|
||||||
{timePart}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 6,
|
|
||||||
display: 'flex',
|
|
||||||
marginTop: '15px',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant="body1"
|
|
||||||
fontWeight="bold"
|
|
||||||
color="text.primary"
|
|
||||||
gutterBottom
|
|
||||||
style={{
|
|
||||||
whiteSpace: 'normal',
|
|
||||||
wordBreak: 'break-word'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{action.description}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue