Resolved conflicts after merging dashboard_personalisation into master [RH, IK]

backend/blueprints/project_to_user.py

@@ -2,6 +2,7 @@ from re import T
 from flask import Blueprint, request, jsonify
 from backend.database_config.database import DB
 from backend.models.user_model import User_project
+from backend.models.project_model import Project
 
 user_project = Blueprint('user_project', __name__)
 
@@ -15,14 +16,26 @@ def get_all_assignments():
   return jsonify(assignments_list)
  
 
-@user_project.route('/user_project/<project_id>', methods=['GET'])
-def get_relevant_assignment(project_id):
+@user_project.route('/user_project/project/<project_id>', methods=['GET'])
+def get_users_for_project(project_id):
   entries = User_project.query.filter_by(project_id=project_id)
   assignments_list = [{"username" : x.username,
                     "project_id" : x.project_id, 
                     "id" : x.id} for x in entries]
   return jsonify(assignments_list)
 
+@user_project.route('/user_project/username/<username>', methods=['GET'])
+def get_projects_for_user(username):
+  entries = User_project.query.filter_by(username=username)
+  project_list = [{"id" : query.id,
+                    "name" : query.name, 
+                    "status" : query.status,
+                    "description" : query.description,
+                    "tag" : query.tag,
+                    "location" : query.location,
+                    "files" : query.files} for query in (Project.query.get(x.project_id) for x in entries)]
+  return jsonify(project_list)
+
 @user_project.route('/user_project', methods=['POST'])
 def assign_project_to_user():
   username, project_id = (request.json['username'], request.json['project_id'])

backend/blueprints/user.py

 from flask import Blueprint, request, jsonify, Response
 from backend.database_config.database import DB
 from backend.models.user_model import User
+from backend.models.user_model import User_project
 import bcrypt 
 
 user = Blueprint('user', __name__)
@@ -16,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):
@@ -90,9 +97,14 @@ def update_user(username):
 
 @user.route('/users/<username>', methods=['DELETE'])
 def delete_user(username):
+
   if username == "jaimeaguilera":
     return ''
     
+  entries = User_project.query.filter_by(username=username)
+  for e in entries:
+    DB.delete(e)
+
   entry = User.query.get(username)
   DB.delete(entry)
   return ''

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/Home.js

@@ -2,25 +2,21 @@ import ProjectList from './ProjectList'
 import PersonalToDo from './PersonalToDo'
 import useFetch from './useFetch'
 import useToken from './useToken';
+import { useState } from "react";
 
 const Home = () => {
 
-    const {data: projects, errorProjects, isPendingProjects} = useFetch("/projects")
-    const {data: todos, errorTodos, isPendingTodos} = useFetch("/todos")
+    const {data: todos, errorTodos, isPendingTodos} = useFetch("/todos");
     const {setToken, token} = useToken();
 
+    const {data: projects, errorRelevantProjects, isPendingRelevantProjects} = useFetch("/user_project/username/" + token);
+
     return (
         <div className="home">
             <h1>Dashboard</h1>
             <div className="home-projects" style={{float: "left", width: "600px"}}>
-                { isPendingProjects && <h2>Loading...</h2> }
-                { projects && <h2>All Projects</h2> }
-                <br />
-                { projects && <ProjectList projects={projects}/> }
-                <br />
-                { projects && <h2>Completed Projects</h2> }
-                <br />
-                { projects && <ProjectList projects={projects.filter(project => project.status === "Completed")}/> }
+                { isPendingRelevantProjects && <h2>Loading...</h2> }
+                { projects && <ProjectList projects={projects} title="My Projects"/> }
             </div>
             <div className="homeTodos">
                 { isPendingTodos && <h2>Loading...</h2> }

frontend/src/ProjectDetails.js

@@ -7,7 +7,7 @@ const ProjectDetails = () => {
     const history = useHistory();
 
     const { data: project, error, isPending } = useFetch("/projects/" + id)
-    const { data: assignments, errorAssignment, isPendingAssignment } = useFetch("/user_project/" + id)
+    const { data: assignments, errorAssignment, isPendingAssignment } = useFetch("/user_project/project/" + id)
 
     const handleRemove = e => {
         e.preventDefault()

frontend/src/index.css

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