Commit c7e392a4 authored by ras19's avatar ras19
Browse files

Created personal project task previews on dashboard, hardcoded data shows that it works [RS]

parent f8875891
Pipeline #203345 passed with stage
in 1 minute and 40 seconds
import ProjectList from './ProjectList'
import PersonalToDo from './PersonalToDo'
import useFetch from './useFetch'
import ProjectList from './ProjectList';
import MyProjectTasks from './MyProjectTasks';
import PersonalToDo from './PersonalToDo';
import useFetch from './useFetch';
import useToken from './useToken';
import { useState } from "react";
const Home = () => {
const {data: todos, errorTodos, isPendingTodos} = useFetch("/todos");
const {setToken, token} = useToken();
const { data: todos, errorTodos, isPendingTodos } = useFetch("/todos");
const { setToken, token } = useToken();
const {data: projects, errorRProjects, isPendingRProjects} = useFetch("/user_project/username/" + token);
const { data: projects, errorRProjects, isPendingRProjects } = useFetch("/user_project/username/" + token);
const project_tasks = [
{
"description": "This is example 1",
"due_date": "17/06/2021",
"priority": 1,
"completed": "Completed",
"project_id": 2,
"id": 1
},
{
"description": "This is example 2",
"due_date": "18/06/2021",
"priority": 1,
"completed": "Available",
"project_id": 3,
"id": 2
},
{
"description": "This is example 3",
"due_date": "21/06/2021",
"priority": 2,
"completed": "Available",
"project_id": 4,
"id": 3
}
]
// const {data: project_tasks, errorProjectTasks, isPendingProjectTasks} = useFetch("/assigned_task/username/" + token)
return (
<div className="home">
<h1>Dashboard</h1>
<div className="home-projects" style={{float: "left", width: "600px"}}>
{ isPendingRProjects && <h2>Loading...</h2> }
{ projects && <ProjectList projects={projects} title="My Projects"/> }
<div className="home-projects" style={{ float: "left", width: "600px" }}>
{isPendingRProjects && <h2>Loading...</h2>}
{projects && <ProjectList projects={projects} title="My Projects" />}
</div>
<div className="homeTodos">
{ isPendingTodos && <h2>Loading...</h2> }
{ todos && <PersonalToDo todos={todos.filter(todo => todo.username === token)} title="Personal ToDo items"/> }
{isPendingTodos && <h2>Loading...</h2>}
{todos && <PersonalToDo todos={todos.filter(todo => todo.username === token)} title="Personal ToDo items" />}
</div>
<div className="home-project-tasks" style={{ float: "left", width: "600px" }}>
{isPendingRProjects && <h2>Loading...</h2>}
{projects && <MyProjectTasks tasks={project_tasks} title="My tasks from all projects" />}
</div>
</div>
);
}
export default Home;
\ No newline at end of file
import useFetch from './useFetch'
import { useState } from "react";
const MyProjectTasks = ({ tasks, title }) => {
return (
<div>
<h2>{title}</h2>
<div className="my-project-tasks">
{tasks.map((task) => (
<div className="task-preview" key={task.id}>
<h2>{task.description}</h2>
<h3><strong>Priority level:</strong> {task.priority}</h3>
<h3><strong>To be done by:</strong> {task.due_date}</h3>
</div>
))}
</div>
</div>
);
}
export default MyProjectTasks;
\ No newline at end of file
......@@ -552,3 +552,31 @@ Note: Beware of modifying this element as it can break the animations - you shou
.dropdown {
max-width: 400px;
}
/* Project task previews on personal dashboard */
.task-preview {
padding: 6px;
margin: 2px;
border-bottom: 1px;
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 1px 3px 5px rgb(194, 194, 194);
}
.task-preview:hover {
box-shadow: 1px 3px 5px gray;
}
.task-preview h2 {
padding-top: 10px;
font-size: 20;
color: blue;
padding-bottom: 7px;
}
.todo-preview h3 {
font-size: 10;
color: rgb(0, 0, 0);
padding-bottom: 7px;
padding-left: 4px;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment