add assignees to task

client/src/components/forms/TaskForm/AssigneesForm.tsx

+import { TaskAssignment } from "adapters/task";
+import { useCallback, useEffect, useState } from "react";
+import { possibleMember } from ".";
+import Popup from 'components/ui/Popup';
+import Button from 'components/ui/Button';
+
+interface Props {
+    assignees: TaskAssignment[];
+    setAssignees: Function;
+    members: possibleMember[]
+}
+
+
+export default function AssgineesForm({ assignees, setAssignees, members }: Props) {
+
+    const [possibleMembers, setPossibleMembers] = useState<possibleMember[]>([]);
+    const [addNew, setAddNew] = useState(false);
+    const [selectedMember, setSelectedMember] = useState<string>('');
+    const [selectedTime, setSelectedTime] = useState<string>('');
+
+    useEffect(() => {
+        setPossibleMembers(members.filter(member => !assignees.find(r => r.user === member.id)));
+    }, [members, assignees, setAssignees])
+
+
+    const addAssignee = useCallback(() => {
+        if (selectedTime && selectedMember) {
+            setAssignees((state: any) => [...state, { user: selectedMember, time: selectedTime }]);
+            setAddNew(false);
+            setSelectedMember('');
+            setSelectedTime('');
+
+        }
+    }, [setAssignees, selectedMember, selectedTime])
+
+
+    const removeAssignee = useCallback((member: string) => {
+            setAssignees((state: any) => state.filter((r: any) => r.user !== member));
+    }, [setAssignees])
+    
+    return (
+        <>
+            <div className="requirements-field">
+                {
+                    assignees.map((assignee) => (
+                        <div className="requirement" key={assignee.user}>
+                            <h2>{members.find(member => member.id === assignee.user)?.label}</h2>
+                            <div>{assignee.time}</div>
+                            <div onClick={() => removeAssignee(assignee.user)}>delete</div>
+                        </div>
+                    ))
+                }
+                {
+                    possibleMembers.length > 0 && (
+                        <div className="add-btn" onClick={() => setAddNew(true)}>
+                            new
+                        </div>
+                    )
+                }
+            </div>
+            {
+                addNew && (
+                    <Popup onClose={() => setAddNew(false)}>
+                        <select onChange={(e) => setSelectedMember(e.target.value)}>
+                            <option value="">Please select a user</option>
+                            {
+                                possibleMembers.map((member) => (
+                                    <option value={member.id} key={member.id}>{member.label}</option>
+                                ))
+                            }
+                        </select>
+                        <input type="number" min={1} onChange={(e) => setSelectedTime(e.target.value)} />
+                        <Button type="submit" onClick={addAssignee}>
+                            Add the assignee
+                        </Button>
+                    </Popup>
+
+                )
+            }
+        </>
+    )
+
+}
\ No newline at end of file

client/src/components/forms/TaskForm/RequirementsForm.tsx

 import { TaskRequirement } from 'adapters/task';
-import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { possibleRole } from '.';
 import Popup from 'components/ui/Popup';
 import Button from 'components/ui/Button';
@@ -35,7 +35,7 @@ export default function RequirementsForm({ roles, requirements, setRequirements
 
 
     const removeRequirement = useCallback((role: string) => {
-            setRequirements((state: any) => state.filter((r: any) => r.id === role));
+            setRequirements((state: any) => state.filter((r: any) => r.role !== role));
     }, [setRequirements])
     
     return (

client/src/components/forms/TaskForm/index.tsx

@@ -6,8 +6,9 @@ import TextInput from 'components/ui/TextInput';
 import Picker from 'emoji-picker-react';
 import { getProjectTasks, Project } from 'adapters/project';
 import CheckboxGroup from 'components/ui/CheckboxGroup';
-import { getTeam, getTeamRoles } from 'adapters/team';
+import { getTeam, getTeamMembers, getTeamRoles, TeamMember } from 'adapters/team';
 import RequirementsForm from './RequirementsForm';
+import AssgineesForm from './AssigneesForm';
 
 interface Props {
     task?: Task;
@@ -51,6 +52,10 @@ export interface possibleRole {
     id: string;
     label: string;
 }
+export interface possibleMember {
+    id: string;
+    label: string;
+}
 
 export default function TaskForm({ task, onSubmit, project }: Props) {
     const [name, setName] = useState(task?.name);
@@ -60,10 +65,12 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
     const [error, setError] = useState('');
     const [tasks, setTasks] = useState(task?.dependencies);
     const [requirements, setRequirements] = useState(task?.requirements ?? []);
+    const [assignees, setAssignees] = useState(task?.assigned ?? []);
 
     const allPriorities = Object.values(Priority);
     const [allTasks, setAllTasks] = useState<Task[]>([]);
     const [allRoles, setAllRoles] = useState<possibleRole[]>([]);
+    const [allMembers, setAllMembers] = useState<possibleMember[]>([]);
 
     useEffect(() => {
         getProjectTasks(project.id).then((tasks) => {
@@ -72,12 +79,20 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
         project.teams.forEach((teamId) => {
             getTeam(teamId).then(team => {
                 getTeamRoles(teamId).then((roles) => {
-                    setAllRoles(state => [...state, ...roles.map(role => {
+                    setAllRoles(roles.map(role => {
                         return {
                             id: role.id,
                             label: team.name + ': ' + role.name
                         }
-                    })]);
+                    }));
+                })
+                getTeamMembers(teamId).then((members) => {
+                    setAllMembers(members.map(member => {
+                        return {
+                            id: member.id,
+                            label: team.name + ': ' + (member.realname ?? member.username)
+                        }
+                    }));
                 })
             })
         })
@@ -139,6 +154,11 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
                     <RequirementsForm setRequirements={setRequirements} roles={allRoles} requirements={requirements ?? []} />
                 )
             }
+            {
+                allMembers.length > 0 && (
+                    <AssgineesForm members={allMembers} setAssignees={setAssignees} assignees={assignees} />
+                )
+            }
 
         </form>
     )