diff options
Diffstat (limited to 'src/views')
| -rw-r--r-- | src/views/Things/ThingsHistory.jsx | 84 | ||||
| -rw-r--r-- | src/views/Things/ThingsView.jsx | 17 |
2 files changed, 55 insertions, 46 deletions
diff --git a/src/views/Things/ThingsHistory.jsx b/src/views/Things/ThingsHistory.jsx index 4b32b0e..c043a55 100644 --- a/src/views/Things/ThingsHistory.jsx +++ b/src/views/Things/ThingsHistory.jsx @@ -107,47 +107,49 @@ const ThingsHistory = () => { <Typography level='h3' mb={1.5}> History: </Typography> - <List sx={{ p: 0 }}> - {thingsHistory.map((history, index) => ( - <> - <ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}> - <ListItemContent sx={{ my: 0 }}> - <Box - sx={{ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - }} - > - <Typography level='body1' sx={{ fontWeight: 'md' }}> - {moment(history.updatedAt).format( - 'ddd MM/DD/yyyy HH:mm:ss', - )} - </Typography> - <Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip> - </Box> - </ListItemContent> - </ListItem> - {index < thingsHistory.length - 1 && ( - <> - <ListDivider component='li'> - {/* time between two completion: */} - {index < thingsHistory.length - 1 && - thingsHistory[index + 1].createdAt && ( - <Typography level='body3' color='text.tertiary'> - {formatTimeDifference( - history.createdAt, - thingsHistory[index + 1].createdAt, - )}{' '} - before - </Typography> - )} - </ListDivider> - </> - )} - </> - ))} - </List> + <Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}> + <List sx={{ p: 0 }}> + {thingsHistory.map((history, index) => ( + <> + <ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}> + <ListItemContent sx={{ my: 0 }}> + <Box + sx={{ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }} + > + <Typography level='body1' sx={{ fontWeight: 'md' }}> + {moment(history.updatedAt).format( + 'ddd MM/DD/yyyy HH:mm:ss', + )} + </Typography> + <Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip> + </Box> + </ListItemContent> + </ListItem> + {index < thingsHistory.length - 1 && ( + <> + <ListDivider component='li'> + {/* time between two completion: */} + {index < thingsHistory.length - 1 && + thingsHistory[index + 1].createdAt && ( + <Typography level='body3' color='text.tertiary'> + {formatTimeDifference( + history.createdAt, + thingsHistory[index + 1].createdAt, + )}{' '} + before + </Typography> + )} + </ListDivider> + </> + )} + </> + ))} + </List> + </Box> {/* Load more Button */} <Box sx={{ diff --git a/src/views/Things/ThingsView.jsx b/src/views/Things/ThingsView.jsx index 8b2beb6..69b3a88 100644 --- a/src/views/Things/ThingsView.jsx +++ b/src/views/Things/ThingsView.jsx @@ -190,7 +190,8 @@ const ThingsView = () => { const [confirmModelConfig, setConfirmModelConfig] = useState({}) const [isSnackbarOpen, setIsSnackbarOpen] = useState(false) - const [snackBarMessage, setSnackBarMessage] = useState('') + const [snackbarMessage, setSnackbarMessage] = useState('') + const [snackbarColor, setSnackbarColor] = useState('success') useEffect(() => { // fetch things @@ -222,7 +223,8 @@ const ThingsView = () => { } }) }) - setSnackBarMessage('Thing saved successfully') + setSnackbarMessage('Thing saved successfully') + setSnackbarColor('success') setIsSnackbarOpen(true) } const handleEditClick = thing => { @@ -246,7 +248,12 @@ const ThingsView = () => { ) currentThings.splice(thingIndex, 1) setThings(currentThings) + } else if (response.status === 405) { + setSnackbarMessage('Unable to delete thing with associated tasks') + setSnackbarColor('danger') + setIsSnackbarOpen(true) } + // if method not allwo show snackbar: }) } setConfirmModelConfig({}) @@ -280,7 +287,7 @@ const ThingsView = () => { }) }) } - setSnackBarMessage('Thing state updated successfully') + setSnackbarMessage('Thing state updated successfully') setIsSnackbarOpen(true) } @@ -366,11 +373,11 @@ const ThingsView = () => { }} autoHideDuration={3000} variant='soft' - color='success' + color={snackbarColor} size='lg' invertedColors > - <Typography level='title-md'>{snackBarMessage}</Typography> + <Typography level='title-md'>{snackbarMessage}</Typography> </Snackbar> </Container> ) |