amy/donetick-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: Refactor ThingsHistory component and add styling improvements

Browse source
This commit is contained in:
Mo Tarbin 2024-07-04 02:00:20 -04:00
parent c5ee02d181
commit 71bad5a19f
3 changed files with 59 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/Config.js
View file

@ -1,5 +1,8 @@
/* eslint-env node */ /* eslint-env node */
export const API_URL = import.meta.env.VITE_APP_API_URL // || 'http://localhost:2021' export const API_URL =
import.meta.env.VITE_APP_API_URL === 'AUTO'
? `${window.location.hostname}/api`
: import.meta.env.VITE_APP_API_URL
export const REDIRECT_URL = import.meta.env.VITE_APP_REDIRECT_URL //|| 'http://localhost:3000' export const REDIRECT_URL = import.meta.env.VITE_APP_REDIRECT_URL //|| 'http://localhost:3000'
export const GOOGLE_CLIENT_ID = import.meta.env.VITE_APP_GOOGLE_CLIENT_ID export const GOOGLE_CLIENT_ID = import.meta.env.VITE_APP_GOOGLE_CLIENT_ID
export const ENVIROMENT = import.meta.env.VITE_APP_ENVIROMENT export const ENVIROMENT = import.meta.env.VITE_APP_ENVIROMENT

84
src/views/Things/ThingsHistory.jsx
View file

@ -107,47 +107,49 @@ const ThingsHistory = () => {
<Typography level='h3' mb={1.5}> <Typography level='h3' mb={1.5}>
History: History:
</Typography> </Typography>
<List sx={{ p: 0 }}> <Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}>
{thingsHistory.map((history, index) => ( <List sx={{ p: 0 }}>
<> {thingsHistory.map((history, index) => (
<ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}> <>
<ListItemContent sx={{ my: 0 }}> <ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}>
<Box <ListItemContent sx={{ my: 0 }}>
sx={{ <Box
display: 'flex', sx={{
justifyContent: 'space-between', display: 'flex',
alignItems: 'center', justifyContent: 'space-between',
}} alignItems: 'center',
> }}
<Typography level='body1' sx={{ fontWeight: 'md' }}> >
{moment(history.updatedAt).format( <Typography level='body1' sx={{ fontWeight: 'md' }}>
'ddd MM/DD/yyyy HH:mm:ss', {moment(history.updatedAt).format(
)} 'ddd MM/DD/yyyy HH:mm:ss',
</Typography> )}
<Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip> </Typography>
</Box> <Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip>
</ListItemContent> </Box>
</ListItem> </ListItemContent>
{index < thingsHistory.length - 1 && ( </ListItem>
<> {index < thingsHistory.length - 1 && (
<ListDivider component='li'> <>
{/* time between two completion: */} <ListDivider component='li'>
{index < thingsHistory.length - 1 && {/* time between two completion: */}
thingsHistory[index + 1].createdAt && ( {index < thingsHistory.length - 1 &&
<Typography level='body3' color='text.tertiary'> thingsHistory[index + 1].createdAt && (
{formatTimeDifference( <Typography level='body3' color='text.tertiary'>
history.createdAt, {formatTimeDifference(
thingsHistory[index + 1].createdAt, history.createdAt,
)}{' '} thingsHistory[index + 1].createdAt,
before )}{' '}
</Typography> before
)} </Typography>
</ListDivider> )}
</> </ListDivider>
)} </>
</> )}
))} </>
</List> ))}
</List>
</Box>
{/* Load more Button */} {/* Load more Button */}
<Box <Box
sx={{ sx={{

17
src/views/Things/ThingsView.jsx
View file

@ -190,7 +190,8 @@ const ThingsView = () => {
const [confirmModelConfig, setConfirmModelConfig] = useState({}) const [confirmModelConfig, setConfirmModelConfig] = useState({})
const [isSnackbarOpen, setIsSnackbarOpen] = useState(false) const [isSnackbarOpen, setIsSnackbarOpen] = useState(false)
const [snackBarMessage, setSnackBarMessage] = useState('') const [snackbarMessage, setSnackbarMessage] = useState('')
const [snackbarColor, setSnackbarColor] = useState('success')
useEffect(() => { useEffect(() => {
// fetch things // fetch things
@ -222,7 +223,8 @@ const ThingsView = () => {
} }
}) })
}) })
setSnackBarMessage('Thing saved successfully') setSnackbarMessage('Thing saved successfully')
setSnackbarColor('success')
setIsSnackbarOpen(true) setIsSnackbarOpen(true)
} }
const handleEditClick = thing => { const handleEditClick = thing => {
@ -246,7 +248,12 @@ const ThingsView = () => {
) )
currentThings.splice(thingIndex, 1) currentThings.splice(thingIndex, 1)
setThings(currentThings) 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({}) setConfirmModelConfig({})
@ -280,7 +287,7 @@ const ThingsView = () => {
}) })
}) })
} }
setSnackBarMessage('Thing state updated successfully') setSnackbarMessage('Thing state updated successfully')
setIsSnackbarOpen(true) setIsSnackbarOpen(true)
} }
@ -366,11 +373,11 @@ const ThingsView = () => {
}} }}
autoHideDuration={3000} autoHideDuration={3000}
variant='soft' variant='soft'
color='success' color={snackbarColor}
size='lg' size='lg'
invertedColors invertedColors
> >
<Typography level='title-md'>{snackBarMessage}</Typography> <Typography level='title-md'>{snackbarMessage}</Typography>
</Snackbar> </Snackbar>
</Container> </Container>
) )