View and edit task connect api

frontend/react-app/src/api/isAssignedApi.js

@@ -28,8 +28,8 @@ export const unassignTeamMemberFromTask = async (teamMemberId, taskId) => {
         });
 
         if (!response.ok) {
-            console.error(`Failed unassigning team member to task: ${response.status} ${response.statusText}`);
-            return false;
+            throw Error(`Failed unassigning team member to task: ${response.status} ${response.statusText}`)
+
         }
 
         return true;

frontend/react-app/src/api/teamMemberApi.js

@@ -89,6 +89,7 @@ export const assignMemberToTask = async (taskId, teamMemberId) => {
 //Assign many members to a task
 export const massAssignMemberToTask = async(taskId, teamMemberIds) => {
     try {
+        console.log(JSON.stringify(teamMemberIds))
         const response = await fetch(`${BASE_URL}/${taskId}/mass-assign`, {
             method: 'POST',
             headers: { "Content-Type": "application/json" },

frontend/react-app/src/components/CreateTaskForm.jsx

@@ -52,7 +52,7 @@ function CreateTaskForm(){
                      })
                     }  
             })
-            //window.location.href="/home";
+            window.location.href="/home";
         } catch (error) {
             console.log(error)
             alert("FAILED IN MAKING TASK");
@@ -84,7 +84,7 @@ function CreateTaskForm(){
                 <label>
                     Choose Team:
                     <div>
-                        <select name="" id="" onChange={teamSelected} {...register('team',{required:true})}>
+                        <select name="" id="" onChange={teamSelected}>
                             <option disabled selected value=''>Choose A Team To Assign</option>
                             {userTeams.map((team)=>(
                                 <option value = {team.teamId}>{team.teamName}</option>

frontend/react-app/src/components/EditTaskForm.jsx

@@ -1,18 +1,97 @@
 
-import {useForm} from 'react-hook-form'
+import {useForm, Controller} from 'react-hook-form'
+import Select from 'react-select'
+import { assignMemberToTask, editTask, massAssignMemberToTask } from '../api/teamMemberApi';
+import { unassignTeamMemberFromTask } from '../api/isAssignedApi';
+const customStyles = {
+    control: (provided) => ({
+      ...provided,
+      width: '100%',
+    minWidth: '100px',
+    maxWidth: '100%',
+    minHeight: '30px',
+    maxHeight: '100%',
+      border: '2px solid grey',
+      borderRadius: '10px',
+      paddingLeft: '8px',
+      backgroundColor: '#BFCDE0',
+      margin: '10px 0px',
+      cursor: 'pointer'
+    }),
+    option: (provided, state) =>({
+        ...provided,
+        cursor: state.isSelected ? 'default' : 'pointer',
+    })
+  };
+  function formatTeamData(myTeamMembers){
+    return myTeamMembers.map((teamMember)=>(
+
+
+        {
+            value: teamMember.accountId,
+            label: teamMember.userName
+         }
+
+
+    ))
+  }
 function EditTaskForm({task, team}){
-    const { register, handleSubmit, formState: {errors}} = useForm();
-    const onSubmit = data => {
-        console.log(data)
-        alert("Your task was updated")
-        window.location.href="/home";
+    console.log(formatTeamData(task.assignedMembers))
+    const { register, handleSubmit, formState: {errors}, control} = useForm();
+
+    const onSubmit = async(data) => {
+        console.log(task.assignedMembers)
+        try {
+            console.log(task.taskId, data.name, data.description, null,null, data.dueDate, data.priority)
+            const response = await editTask(task.taskId, data.name, data.description, null,null, data.dueDate, data.priority)
+            console.log(response)
+            if(JSON.stringify(data.teamMembers) !== JSON.stringify(task.assignedMembers)){
+                let teamMembersToAdd = []
+                let teamMembersToDelete = []
+                data.teamMembers.map((teamMemberOfChoice)=>{
+                    let addToTeam = true;
+                    task.assignedMembers.map((teamMember)=>{
+                        if(teamMemberOfChoice.value === teamMember.accountId){
+                            addToTeam = false;
+                        }
+                    })
+                    if(addToTeam){
+                        teamMembersToAdd = [...teamMembersToAdd, teamMemberOfChoice.value]
+                    }
+                })
+
+                task.assignedMembers.map((teamMemberToDelete)=>{
+                    let deleteTeamMember = true
+                    data.teamMembers.map((teamMember)=>{
+                        if(teamMemberToDelete.accountId === teamMember.value){
+                            deleteTeamMember = false;
+                        }
+                    })
+                    if(deleteTeamMember){
+                        teamMembersToDelete = [...teamMembersToDelete, teamMemberToDelete.accountId]}
+                })
+                if(teamMembersToAdd.length >0){
+                    const addedTeamMembersAPIResponse = await massAssignMemberToTask(task.taskId, teamMembersToAdd);
+                    console.log(addedTeamMembersAPIResponse)
+                }if(teamMembersToDelete.length >0 && teamMembersToDelete[0]!== undefined){
+                    teamMembersToDelete.map(async(teamMemberToDel)=>{
+                        const delTeamMemberAPIResponse = await unassignTeamMemberFromTask(teamMemberToDel, task.taskId)
+                    })
+                }
+            }
+
+            await alert('Task Has Been Edited')
+            window.location.href="/home";
+        } catch (error) {
+            alert(error)
+        }
     };
     return(
-        <form onSubmit={handleSubmit(onSubmit)} className='body'>
+        <form onSubmit={handleSubmit(onSubmit)} className='CreateTaskForm'>
                         <label className='majorLabel'>
                                 Task Name
                                 <div>
-                                <input type="text" name="name" id="name" className='input' defaultValue={task.name}{...register("name", { 
+                                <input type="text" name="name" id="name" className='input' defaultValue={task.title}{...register("name", { 
                                     required:{
                                         value: true,
                                         message: 'Please set a Task Name'
@@ -30,31 +109,53 @@ function EditTaskForm({task, team}){
                             </label>
                             <label className='majorLabel'>
                                 Assign To:
-                                <div className='Checkboxs'>
+                                {/*<div className='Checkboxs'>
                                     {team.map((teamMember)=>(
                                         <div className='checkbox' key = {teamMember.name}>
-                                            {teamMember.name}
-                                            <input type="checkbox" name="" id="" value = {teamMember.name} {...register("assignees")}/>
+                                            {teamMember.userName}
+                                            <input type="checkbox" name="" id="" value = {teamMember.accountId} {...register("assignees")}/>
                                         </div>
-                                    ))}
-                                </div>
+                                    ))
+                                </div>}*/}
+                                <Controller
+                                    control={control}
+                                    className='Select'
+                                    name="teamMembers"
+                                    rules={{required:true}}
+                                    defaultValue={formatTeamData(task.assignedMembers)}
+                                    render={({field}) => (
+                                        <Select
+                                        {...field}
+                                        options={formatTeamData(team)}
+                                        isMulti
+
+                                        styles={customStyles}
+
+                                        />)}
+                                    />
                             </label>
                             <label>
                                 Priority
                                 <select name="" id="" defaultValue={task.priority}{...register("priority")}>
-                                    <option value="Low">Low</option>
-                                    <option value="Medium">Medium</option>
-                                    <option value="High">High</option>
+                                    <option value="LOW">Low</option>
+                                    <option value="MEDIUM">Medium</option>
+                                    <option value="HIGH">High</option>
                                 </select>
                             </label>
                             <label className='majorLabel'>
                             Description
 
                             <div>
-                                <input type="text" name="input-discription" id="discription" className='input' defaultValue={task.discription}  {...register("discription", { required: false })}/>
+                                <input type="text" name="input-description" id="description" className='input' defaultValue={task.description}  {...register("description", { required: false })}/>
                             </div>
                             </label>
-                            <input type="submit" value="Create Task" id="button"/>
+                            <label className='majorLabel'>
+                                Due Date
+                                <div>
+                                    <input type='date' name="input-dueDate" id="dueDate" className='input' defaultValue={task.dueDate}  {...register("dueDate", { required: false })}/>
+                                </div>
+                            </label>
+                            <input type="submit" value="Edit Task" id="button"/>
 
                     </form>
     )

frontend/react-app/src/components/TaskList.jsx

@@ -16,7 +16,7 @@ function TaskList({dataToUse, headersAndAccessors}){
     const filteredData = React.useMemo(()=> {return dataToUse.filter((task) =>{
             switch(searchForThis.value){
             case "name":
-                return task.name.toLowerCase().includes(searchQuery.toLowerCase())
+                return task.name.title.toLowerCase().includes(searchQuery.toLowerCase())
             case "team":
                 return task.team.toLowerCase().includes(searchQuery.toLowerCase())
             case "assignees":

frontend/react-app/src/css/CreateTaskForm.css

@@ -4,17 +4,20 @@
 .CreateTaskForm input {
     width: 100%;
     padding: 12px 20px;
-    margin: 8px 0;
+    margin: 8px 2px;
     box-sizing: border-box;
     background-color: #bfcde0;
+    cursor:text;
   }
 .CreateTaskForm  select {
     width: 100%;
     padding: 16px 20px;
     border: none;
     border-radius: 4px;
     background-color: #bfcde0;
+    cursor: pointer;
   }
+
   .CreateTaskForm  input[type=submit] {
     background-color: #1d1e22;
     border: none;
@@ -23,44 +26,4 @@
     text-decoration: none;
     margin: 4px 2px;
     cursor: pointer;
-  }
-  .Checkboxs{
-    display: flex;
-  }
-  .checkbox{
-    width:fit-content;
-  }
-  .CreateTaskForm  input[type ="checkbox"]{
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-  .CreateTaskForm  input[type="checkbox"]:before {
-    position: relative;
-    display: block;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #808080;
-    content: "";
-    background: #FFF;
-  }
-  .CreateTaskForm  input[type="checkbox"]:after {
-    position: relative;
-    display: block;
-    left: 3px;
-    top: -15px;
-    width: 10px;
-    height: 10px;
-    border-width: 1px;
-    border-style: solid;
-    content: "";
-    background-image: linear-gradient(135deg, #bfcde0 0%, #FFF 100%);
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  .CreateTaskForm  input[type="checkbox"]:checked:after {
-    background-image: linear-gradient(135deg, #5d5d81 0%, #3b3355 100%);
-  }
-
-  .CreateTaskForm  input[type="checkbox"]:disabled:after {
-    -webkit-filter: opacity(0.4);
   }

frontend/react-app/src/css/ViewTask.css

@@ -14,11 +14,6 @@ div.viewTask{
     flex-direction: column;
     background-color: #5d5d81;
 }
-div.page-body{
-    margin-left: 5%;
-    margin-right: 5%;
-    font-family: Calibri;
-}
 div.flexbox{
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -40,6 +35,9 @@ div.priority{
     text-align: right;
     border: 2px solid black;
 }
+.description{
+    margin-bottom: 15px;
+}
 div.pic{
     display: flex;
     justify-content: center;
@@ -73,15 +71,13 @@ input.submit-comment{
     font-size: 15px;
     border-radius: 3px;
 }
-.update-class{
-    display: flex;
-    justify-content: space-between;
-}
 .updateSelector{
     padding: 10px;
     border-bottom: 2px solid black;
     border-radius: 20px;
     background-color: #bfcde0;
+    margin-right: 10px;
+    cursor: pointer;
 }
 .fotterbutton{
     margin-left: 10px;
@@ -94,5 +90,6 @@ input.submit-comment{
     border-bottom: 2px solid black;
     border-radius: 10px;
     background-color: #1d1e22;
+    cursor: pointer;
 }
 

frontend/react-app/src/pages/EditTask.jsx

@@ -1,21 +1,42 @@
 import {Link, useLocation} from 'react-router-dom'
+import { useEffect, useState } from 'react'
 import EditTaskForm from '../components/EditTaskForm'
 import Header from '../components/Header'
 import '../css/EditTask.css'
+import { getTeamMembers } from '../api/teamApi'
+
 function EditTask(){
         const location = useLocation()
         const { taskToEdit } = location.state
-        const {onThisTeam} = location.state
+        const [teamMembers, setTeamMembers] = useState();
+        const [loading, setLoading] = useState(true);
+        useEffect(()=>{
+            async function getTeam(teamId){
+                try {
+                    const response = await getTeamMembers(taskToEdit.teamId);
+                    setTeamMembers(response)
+                    console.log(response)
+                } catch (error) {
+
+                }finally{
+                    setLoading(false);
+                }    
+            }
+            getTeam();
+
+
+        },[]);
         console.log("taskToEdit: ", taskToEdit)
-        console.log("onThisTeam: ", onThisTeam)
-
+        if(loading){
+            return(<div>..Loading</div>)
+        }
         return(
             <div className='pageContainer'>
                 <Header/>
                 <div className='pageBody'>
                         <EditTaskForm
                         task={taskToEdit}
-                        team={onThisTeam}
+                        team={teamMembers}
                         />
                 </div>
             </div>

frontend/react-app/src/pages/Home.js

@@ -36,10 +36,10 @@ if(ansArr.length > 0){
 
 function setUpData(results) {
     return results
-    .filter((taskItem) => taskItem.status !== "done")
+    .filter((taskItem) => taskItem.status !== "Done")
       .map((taskItem) => ({
         id: taskItem.taskId,
-        name: taskItem.title,
+        name: taskItem,
         status: taskItem.status,
         team: taskItem.teamId,
         dueDate: taskItem.dueDate || "No Due Date", 
@@ -58,7 +58,7 @@ const Home = () => {
             Header: "Task Name",
             accessor: "name",
             Cell: (original) => (
-                <Link to="/view-task" className = "link" state={{taskToSee: original.cell.row.values.id}}>{original.value}</Link>
+                <Link to="/view-task" className = "link" state={{taskToSee: original.value, teamMembers: original.cell.row.values.assignees}}>{original.value.title}</Link>
               )
         },
         {