From cc29b3aace21118d37a6908d61a044a310bfc925 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Thu, 20 May 2021 22:42:39 +0200
Subject: [PATCH] began task start page
---
.../components/navigation/Sidebar/index.tsx | 4 +-
client/src/pages/Tasks/TaskStart/index.tsx | 64 ++++++++++++++++++-
.../src/pages/Tasks/TaskStart/task-start.scss | 0
3 files changed, 63 insertions(+), 5 deletions(-)
create mode 100644 client/src/pages/Tasks/TaskStart/task-start.scss
diff --git a/client/src/components/navigation/Sidebar/index.tsx b/client/src/components/navigation/Sidebar/index.tsx
index dc36c1d..a0ec8d5 100644
--- a/client/src/components/navigation/Sidebar/index.tsx
+++ b/client/src/components/navigation/Sidebar/index.tsx
@@ -1,13 +1,11 @@
import Navigation from 'components/navigation/Navigation';
import Avatar from 'components/ui/Avatar';
-import LineGraph from 'components/graphs/LineGraph';
import { NavLink, useHistory } from 'react-router-dom';
import { clearToken, isLoggedIn } from 'adapters/auth';
import './sidebar.scss';
import { useEffect, useState } from 'react';
-import { getCurrentUser, getUser, getUserActivity, User } from 'adapters/user';
+import { getCurrentUser, getUserActivity, User } from 'adapters/user';
import BarChart, { ChartItem } from 'components/graphs/BarChart';
-import { Activity } from 'adapters/util';
import LoadingScreen from 'components/ui/LoadingScreen';
interface Props {
diff --git a/client/src/pages/Tasks/TaskStart/index.tsx b/client/src/pages/Tasks/TaskStart/index.tsx
index 1b851c0..9489f19 100644
--- a/client/src/pages/Tasks/TaskStart/index.tsx
+++ b/client/src/pages/Tasks/TaskStart/index.tsx
@@ -1,3 +1,63 @@
-export default function TaskStart() {
- return (<></>);
+import './task-start.scss';
+import Tag from 'components/ui/Tag';
+import DetailGrid from 'components/layout/DetailGrid';
+import ButtonLink from 'components/navigation/ButtonLink';
+import { useHistory, useParams } from 'react-router';
+import { useEffect, useState } from 'react';
+import { getTask, StatusColors, Task } from 'adapters/task';
+import { getProject, Project } from 'adapters/project';
+import { getTeam } from 'adapters/team';
+import LoadingScreen from 'components/ui/LoadingScreen';
+
+export interface Params {
+ taskId: string;
+}
+
+export default function TaskDetail() {
+ const { taskId } = useParams<Params>();
+ const history = useHistory();
+ const [task, setTask] = useState<Task>();
+ const [project, setProject] = useState<Project>();
+ const [teamNames, setTeamNames] = useState<string[]>([]);
+
+ useEffect(() => {
+ getTask(taskId).then((task) => {
+
+ setTask(task);
+ getProject(task.project).then((project) => {
+ setProject(project);
+ project.teams.forEach((teamId) =>
+ getTeam(teamId).then((team) => {
+ setTeamNames(state => [...state, team.name])
+ }
+ ));
+ });
+ }).catch(() => history.goBack());
+ }, [taskId, history]);
+
+ if (task) {
+ return (
+ <div className={'tasks-detail-page theme-' + StatusColors.get(task.status)}>
+ <div className="content-container">
+ <Tag label={task.status} color={StatusColors.get(task.status)} />
+ <h1>{task.name}</h1>
+
+ <div className="description-container">
+ <h2>
+ Description
+ </h2>
+ <p>
+ {task.text}
+ </p>
+ </div>
+
+ <DetailGrid details={[
+ { icon: 'folder', title: 'Project', label: project?.name ?? 'Loading...' },
+ { icon: 'group', title: 'Teams', label: teamNames.join(', ') }]} />
+ </div>
+ </div>
+ );
+
+ }
+ return <LoadingScreen />;
}
\ No newline at end of file
diff --git a/client/src/pages/Tasks/TaskStart/task-start.scss b/client/src/pages/Tasks/TaskStart/task-start.scss
new file mode 100644
index 0000000..e69de29
--
GitLab