Commit da46e054 authored by ras19's avatar ras19
Browse files

Created frontend structure for selecting users to assign to a project task,...

Created frontend structure for selecting users to assign to a project task, hardcoded data for now [RS]
parent 06d35c8c
Pipeline #203240 passed with stage
in 1 minute and 38 seconds
......@@ -2,18 +2,38 @@ import { useState } from "react";
import { useHistory } from "react-router-dom"
import { useParams } from "react-router"
import useFetch from "./useFetch";
import Select from 'react-select';
const AddProjectTask = () => {
const { id } = useParams();
const [description, setDescription] = useState("");
const [due_date, setDueDate] = useState(Date.now);
const [priority, setPriority] = useState(1);
const [completed, setCompleted] = useState(false);
const { id } = useParams();
const { data: project, error, isPending } = useFetch("/projects/" + id)
const [assignedUsers, setAssignedUsers] = useState([]);
const { data: project, error, isPending } = useFetch("/projects/" + id)
const participants = [
{
"value": "john34",
"label": "John Smith"
},
{
"value": "rs0408",
"label": "JRahil Shah"
},{
"value": "ew1234",
"label": "Ethan Weitzman"
}
]
const history = useHistory();
const handleChange = (e) => {
setAssignedUsers(Array.isArray(e) ? e.map(x => x.value) : []);
}
const handleSubmit = e => {
e.preventDefault()
......@@ -36,8 +56,8 @@ const AddProjectTask = () => {
return (
<div className="add-project-task">
<h2>Add a new task</h2>
{ isPending && <h2>Loading...</h2> }
{ project && <form onSubmit={handleSubmit}>
{isPending && <h2>Loading...</h2>}
{project && <form onSubmit={handleSubmit}>
<label>Description</label>
<input
type="text"
......@@ -66,13 +86,24 @@ const AddProjectTask = () => {
placeholder="Input priority here"
/>
<label>Volunteers assigned to this task</label>
<Select
className="dropdown"
placeholder="Select Users"
value={participants.filter(user => assignedUsers.includes(user.value))}
options={participants}
onChange={handleChange}
isMulti
isClearable
/>
<label>Status</label>
<select value={completed} onChange={(e) => setCompleted(e.target.value)}>
<option value="Incomplete">Available</option>
<option value="Completed">Completed</option>
</select>
<button>Add task</button>
</form> }
</form>}
</div>
);
}
......
......@@ -48,9 +48,6 @@ const CreateProject = () => {
});
});
console.log(users);
console.log(usernames);
console.log(selectUsernames);
history.push("/");
}
......@@ -100,9 +97,6 @@ const CreateProject = () => {
isMulti
isClearable
/>
{/* <select multiple={true} onChange={(e) => setSelectUsernames(selectUsernames.concat(e.target.value))} value={selectUsernames} >
{users.map(user => <option value={user.username}>{user.firstname} {user.surname}</option>)}
</select> */}
<label>Google Drive folder</label>
<textarea placeholder="Copy the link to the Google Drive folder for this project" value={files} onChange={(e) => setFiles(e.target.value)}></textarea>
<button>Add project</button>
......
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