Commit 06d35c8c authored by ras19's avatar ras19
Browse files

Changed user selection when creating a new project so that deselection is...

Changed user selection when creating a new project so that deselection is possible and noone is selected more than once [RS, EW]
parent 89500f3d
Pipeline #203001 passed with stage
in 1 minute and 8 seconds
......@@ -17,6 +17,12 @@ def get_all_users():
"interests" : x.interests, "username" : x.username } for x in user_query]
return jsonify(users_list)
@user.route('/users/user_project', methods=['GET'])
def get_all_users_in_value_label_form():
user_query = User.query.all()
users_list = [{"value" : x.username, "label" : x.firstname + " " + x.surname } for x in user_query]
return jsonify(users_list)
@user.route('/users/<username>', methods=['GET'])
def get_id(username):
......
This diff is collapsed.
......@@ -64,6 +64,7 @@
"react-hook-form": "^7.8.2",
"react-refresh": "^0.8.3",
"react-router-dom": "^5.2.0",
"react-select": "^4.3.1",
"resolve": "1.18.1",
"resolve-url-loader": "^3.1.2",
"sass-loader": "^10.0.5",
......
import { useState } from "react";
import { useHistory } from "react-router-dom"
import Select from 'react-select';
import useFetch from './useFetch'
const CreateProject = () => {
......@@ -14,7 +15,13 @@ const CreateProject = () => {
const history = useHistory();
const { data: users, error, isPending } = useFetch("/users")
const { data: users, error, isPending } = useFetch("/users/user_project");
const usernames = users.map(user => user.username);
const handleChange = (e) => {
setSelectUsernames(Array.isArray(e) ? e.map(x => x.value) : []);
}
const handleSubmit = async e => {
e.preventDefault()
......@@ -41,6 +48,9 @@ const CreateProject = () => {
});
});
console.log(users);
console.log(usernames);
console.log(selectUsernames);
history.push("/");
}
......@@ -81,9 +91,18 @@ const CreateProject = () => {
<option value="Other">Other</option>
</select>
<label>Volunteers assigned to this project</label>
<select multiple={true} onChange={(e) => setSelectUsernames(selectUsernames.concat(e.target.value))} value={selectUsernames} >
<Select
className="dropdown"
placeholder="Select Users"
value={users.filter(user => selectUsernames.includes(user.value))}
options={users} // set list of the usernames
onChange={handleChange} // assign onChange function
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>
</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>
......
......@@ -548,3 +548,7 @@ Note: Beware of modifying this element as it can break the animations - you shou
margin-bottom: 10px;
margin-right: 10px;
}
.dropdown {
max-width: 400px;
}
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