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]

backend/blueprints/user.py

@@ -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):

frontend/package.json

@@ -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",

frontend/src/CreateProject.js

 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>

frontend/src/index.css

@@ -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;
+}