Skip to content

Commit

Permalink
chore(ui): change task details page
Browse files Browse the repository at this point in the history
  • Loading branch information
@shini4i
shini4i committed Oct 16, 2023
1 parent 295fb70 commit 365ac18
Showing 1 changed file with 119 additions and 118 deletions.
237 changes: 119 additions & 118 deletions web/src/Components/TaskView.js
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,126 @@
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { fetchTask } from '../Services/Data';
import { useErrorContext } from '../ErrorContext';
import { Grid, Chip } from '@mui/material';
import {
chipColorByStatus,
formatDateTime,
ProjectDisplay,
StatusReasonDisplay,
} from './TasksTable';
import {useEffect, useState} from 'react';
import {useParams} from 'react-router-dom';
import {fetchTask} from '../Services/Data';
import {useErrorContext} from '../ErrorContext';
import {Chip, Divider, Grid, Paper} from '@mui/material';
import {chipColorByStatus, formatDateTime, ProjectDisplay, StatusReasonDisplay,} from './TasksTable';

export default function TaskView() {
const { id } = useParams();
const [task, setTask] = useState(null);
const { setError, setSuccess } = useErrorContext();
const {id} = useParams();
const [task, setTask] = useState(null);
const {setError, setSuccess} = useErrorContext();

useEffect(() => {
fetchTask(id)
.then(item => {
setSuccess('fetchTask', 'Fetched tas successfully');
setTask(item);
})
.catch(error => {
setError('fetchTasks', error.message);
});
}, [id]);
useEffect(() => {
fetchTask(id)
.then((item) => {
setSuccess('fetchTask', 'Fetched task successfully');
setTask(item);
})
.catch((error) => {
setError('fetchTasks', error.message);
});
}, [id]);

return (
<Container maxWidth="lg">
<Stack
direction={{ xs: 'column', md: 'row' }}
spacing={2}
alignItems="center"
sx={{ mb: 2 }}
>
<Typography
variant="h5"
gutterBottom
component="div"
sx={{ flexGrow: 1, display: 'flex', gap: '10px' }}
>
<Box>Task details</Box>
<Box sx={{ fontSize: '10px' }}>UTC</Box>
</Typography>
</Stack>
{!task && <Typography>Loading...</Typography>}
{task && (
<Grid container spacing={3}>
<Grid item xs={3}>
<Typography>Id</Typography>
</Grid>
<Grid item xs={9}>
<Typography variant="body2" sx={{ color: 'neutral.main' }}>
{task.id}
</Typography>
</Grid>
<Grid item xs={3}>
<Typography>Created</Typography>
</Grid>
<Grid item xs={9}>
<Typography variant="body2">
<span>{formatDateTime(task.created)}</span>
</Typography>
</Grid>
<Grid item xs={3}>
<Typography>Updated</Typography>
</Grid>
<Grid item xs={9}>
<Typography variant="body2">
<span>{formatDateTime(task.updated)}</span>
</Typography>
</Grid>
<Grid item xs={3}>
<Typography>Application</Typography>
</Grid>
<Grid item xs={9}>
<Typography variant="body2">{task.app}</Typography>
</Grid>
<Grid item xs={3}>
<Typography>Author</Typography>
</Grid>
<Grid item xs={9}>
<Typography variant="body2">{task.author}</Typography>
</Grid>
<Grid item xs={3}>
<Typography>Project</Typography>
</Grid>
<Grid item xs={9}>
<ProjectDisplay project={task.project}></ProjectDisplay>
</Grid>
<Grid item xs={3}>
<Typography>Images</Typography>
</Grid>
<Grid item xs={9}>
{task.images.map((item, index) => {
return (
<div key={index}>
<Typography variant="body2">
{item.image}:{item.tag}
</Typography>
</div>
);
})}
</Grid>
<Grid item xs={3}>
<Typography>Status</Typography>
</Grid>
<Grid item xs={9}>
<Chip label={task.status} color={chipColorByStatus(task.status)} />
</Grid>
<Grid item xs={3}>
<Typography>Status details</Typography>
</Grid>
<Grid item xs={9}>
<StatusReasonDisplay reason={task.status_reason} />
</Grid>
</Grid>
)}
</Container>
);
return (
<Container maxWidth="lg">
<Paper elevation={3} sx={{padding: '20px', marginBottom: '20px'}}>
<Typography
variant="h5"
gutterBottom
component="div"
sx={{display: 'flex', alignItems: 'center', marginBottom: '10px'}}
>
<Box flexGrow={1}>Task Details</Box>
<Box fontSize="10px" color="gray">
UTC
</Box>
</Typography>
{!task && <Typography>Loading...</Typography>}
{task && (
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h6">Task Information</Typography>
<Divider/>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="body2" color="textSecondary">
ID
</Typography>
<Typography variant="body1">{task.id}</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="body2" color="textSecondary">
Created
</Typography>
<Typography variant="body1">
{formatDateTime(task.created)}
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="body2" color="textSecondary">
Updated
</Typography>
<Typography variant="body1">
{formatDateTime(task.updated)}
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="body2" color="textSecondary">
Application
</Typography>
<Typography variant="body1">{task.app}</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="body2" color="textSecondary">
Author
</Typography>
<Typography variant="body1">{task.author}</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="body2" color="textSecondary">
Project
</Typography>
<Typography variant="body1">
<ProjectDisplay project={task.project}/>
</Typography>
</Grid>
<Grid item xs={12} sm={6}>
<Typography variant="body2" color="textSecondary">
Status
</Typography>
<Chip
label={task.status}
color={chipColorByStatus(task.status)}
/>
</Grid>
<Grid item xs={12} sm={12}>
<Typography variant="body2" color="textSecondary">
Status Details
</Typography>
<Typography variant="body1">
<StatusReasonDisplay reason={task.status_reason}/>
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="h6">Images</Typography>
<Divider/>
</Grid>
{task.images.map((item, index) => (
<Grid item xs={12} sm={6} key={index}>
<Typography variant="body2" color="textSecondary">
Image {index + 1}
</Typography>
<Typography variant="body1">
{item.image}:{item.tag}
</Typography>
</Grid>
))}
</Grid>
)}
</Paper>
</Container>
);
}

0 comments on commit 365ac18

Please sign in to comment.