Commit 7052d221 authored by ras19's avatar ras19
Browse files

Created new component for displaying users assigned to a task, used in...

Created new component for displaying users assigned to a task, used in dashboard task previews and tasks in list of project tasks [RS]
parent 0995134b
Pipeline #203799 passed with stage
in 1 minute and 16 seconds
import { Link } from 'react-router-dom'
import useFetch from './useFetch';
import UsersAssignedToTask from './UsersAssignedToTask';
const MyProjectTasks = ({ tasks, title }) => {
const FindingUsers = task_id => {
......@@ -24,7 +25,7 @@ const MyProjectTasks = ({ tasks, title }) => {
<h3><strong>Priority level:</strong> {task.priority}</h3>
<h3><strong>To be done by:</strong> {task.due_date}</h3>
<h3>All volunteers assigned to this task: </h3>
{FindingUsers(task.id)}
<UsersAssignedToTask task_id={task.id} />
<Link to={`/projects/${task.project_id}`}>
<h4>Click to see the project details</h4>
</Link>
......
import { useState } from "react";
import { useHistory } from 'react-router';
import UsersAssignedToTask from "./UsersAssignedToTask";
const ProjectTaskList = ({ project_tasks }) => {
/* pass in filtered dataset containing tasks for a specific project*/
const history = useHistory();
const [description, setDescription] = useState("");
const [priority, setPriority] = useState(1);
const [due_date, setDueDate] = useState(Date.now);
......@@ -11,7 +11,6 @@ const ProjectTaskList = ({ project_tasks }) => {
const handleComplete = task => e => {
e.preventDefault();
console.log(task.id)
setDescription(task.description)
setPriority(task.priority)
......@@ -40,7 +39,6 @@ const ProjectTaskList = ({ project_tasks }) => {
}).then(() => {
window.location.reload();
})
};
return (
......@@ -53,6 +51,8 @@ const ProjectTaskList = ({ project_tasks }) => {
</div>
<h3>Priority: {task.priority}</h3>
<h3>All volunteers assigned to this task</h3>
<UsersAssignedToTask task_id={task.id} />
{ !task.completed && <button className="task-complete-button" onClick={handleComplete(task)}>Complete</button> }
<button className="task-delete-button"onClick={handleDelete(task)}>Delete</button>
</div>
......
import { Link } from 'react-router-dom'
import useFetch from './useFetch';
const UsersAssignedToTask = ({task_id, title}) => {
const { data: assignedUsers, error, isPending } = useFetch("/assigned_task/task/" + task_id);
return assignedUsers.map((user) => (
<div className="assigned_users_list">
<Link to={`/users/${user.username}`}>
<h5>{user.firstname} {user.surname}</h5>
</Link>
</div>
));
}
export default UsersAssignedToTask;
\ No newline at end of file
......@@ -586,6 +586,16 @@ Note: Beware of modifying this element as it can break the animations - you shou
padding-left: 4px;
}
.project-task-preview h4 {
padding-left: 15px;
padding-bottom: 7px;
}
.project-task-preview h4:hover {
font-weight: bolder;
color: red;
}
.project-task-preview a {
text-decoration: none;
}
......@@ -677,14 +687,16 @@ Note: Beware of modifying this element as it can break the animations - you shou
padding-top: 0px;
}
.assigned_user_list {
padding-left: 10px;
}
.assigned_user_list a {
text-decoration: none;
}
.assigned_user_list h4:hover {
color:red;
.assigned_users_list h5 {
padding-left: 15px;
padding-bottom: 7px;
}
.assigned_users_list h5:hover {
font-weight: bolder;
color: red;
}
\ 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