From 365ac18bf2604f6c2833f79137fbfe20fef704fd Mon Sep 17 00:00:00 2001
From: Vadim Gedz <vadims@linux-tech.io>
Date: Mon, 16 Oct 2023 21:39:57 +0300
Subject: [PATCH] chore(ui): change task details page

---
 web/src/Components/TaskView.js | 237 +++++++++++++++++----------------
 1 file changed, 119 insertions(+), 118 deletions(-)

diff --git a/web/src/Components/TaskView.js b/web/src/Components/TaskView.js
index 49e196f9..f88e822e 100644
--- a/web/src/Components/TaskView.js
+++ b/web/src/Components/TaskView.js
@@ -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>
+    );
 }