From d9ebb4e6433e9bea92a45f411342fae47dcfab86 Mon Sep 17 00:00:00 2001 From: Kainoa Nishida Date: Thu, 26 Sep 2024 13:07:24 -0700 Subject: [PATCH 1/2] Tasks.jsx is no longer hard-coded data. Now uses the Users and Tasks databases --- src/components/MemberSelect.jsx | 85 +++++++++ src/pages/Tasks.jsx | 318 ++++++++++++++------------------ 2 files changed, 226 insertions(+), 177 deletions(-) create mode 100644 src/components/MemberSelect.jsx diff --git a/src/components/MemberSelect.jsx b/src/components/MemberSelect.jsx new file mode 100644 index 0000000..bbf5140 --- /dev/null +++ b/src/components/MemberSelect.jsx @@ -0,0 +1,85 @@ +import React, { useState, useEffect } from "react"; +import { + FormControl, + Menu, + MenuButton, + MenuList, + MenuItem, + Button, + Input, + Box, + Text, +} from "@chakra-ui/react"; +import { ChevronDownIcon } from "@chakra-ui/icons"; +import { useSupabaseClient } from "@supabase/auth-helpers-react"; + +function MemberSelect({ onChange }) { + const supabase = useSupabaseClient(); + const [members, setMembers] = useState([]); + const [selectedMember, setSelectedMember] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); + + useEffect(() => { + fetchMembers(); + }, []); + + const fetchMembers = async () => { + const { data, error } = await supabase + .from("Users") + .select("user_id, display_name") + .order("display_name", { ascending: true }); + + if (error) { + console.error("Error fetching members:", error); + } else { + setMembers(data); + } + }; + + const handleSelectMember = (userId, displayName) => { + setSelectedMember({ user_id: userId, display_name: displayName }); + onChange(userId); + }; + + const filteredMembers = members.filter((member) => + member.display_name.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + return ( + + + } + width="100%" + > + {selectedMember ? selectedMember.display_name : "Select Member"} + + + + setSearchTerm(e.target.value)} + /> + + {filteredMembers.map((member) => ( + handleSelectMember(member.user_id, member.display_name)} + > + {member.display_name} + + ))} + + + + ); +} + +export default MemberSelect; \ No newline at end of file diff --git a/src/pages/Tasks.jsx b/src/pages/Tasks.jsx index c7cf7e5..68dbd35 100644 --- a/src/pages/Tasks.jsx +++ b/src/pages/Tasks.jsx @@ -1,6 +1,7 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import Sidenav from "../components/Sidenav"; import Header from "../components/Header"; +import MemberSelect from "../components/MemberSelect"; import { Box, @@ -9,6 +10,7 @@ import { Tbody, Tr, Th, + Text, Td, TableContainer, Input, @@ -33,84 +35,20 @@ import { import { useSession, - // useSupabaseClient, - // useSessionContext, + useSupabaseClient, } from "@supabase/auth-helpers-react"; import { ChevronDownIcon } from "@chakra-ui/icons"; function Tasks() { - const [tasks, setTasks] = useState([ - { - name: "Research participant #1132 lab session 3", - type: "Scheduled", - startDate: "2024-07-10 13:30", - endDate: "2024-07-10 15:30", - status: "Not Started", - }, - { - name: "Finish lab report 1", - type: "Deadline", - startDate: "-", - endDate: "2024-06-29 11:59", - status: "Completed", - }, - { - name: "Finish lab report 2", - type: "Deadline", - startDate: "-", - endDate: "2024-07-15 11:59", - status: "Not Started", - }, - { - name: "A very long title for some task just for ...", - type: "Scheduled", - startDate: "2024-07-11 14:20", - endDate: "2024-07-11 16:00", - status: "Not Started", - }, - { - name: "Conduct MRI scan on participant #1022", - type: "Scheduled", - startDate: "2024-07-19 11:30", - endDate: "2024-07-19 13:30", - status: "Not Started", - }, - { - name: "Research participant #1132 lab session 3", - type: "Scheduled", - startDate: "2024-07-10 13:30", - endDate: "2024-07-10 15:30", - status: "Not Started", - }, - { - name: "Finish lab report 1", - type: "Deadline", - startDate: "-", - endDate: "2024-06-29 11:59", - status: "Completed", - }, - { - name: "Finish lab report 2", - type: "Deadline", - startDate: "-", - endDate: "2024-07-15 11:59", - status: "Not Started", - }, - { - name: "A very long title for some task just for ...", - type: "Scheduled", - startDate: "2024-07-11 14:20", - endDate: "2024-07-11 16:00", - status: "Not Started", - }, - ]); + const supabase = useSupabaseClient(); + const [tasks, setTasks] = useState([]); const [taskName, setTaskName] = useState(""); const [taskType, setTaskType] = useState("Scheduled"); const [startDate, setStartDate] = useState(""); const [endDate, setEndDate] = useState(""); - const [members, setMembers] = useState(""); - const [taskDescription, setTaskDescription] = useState(""); + const [assignedTo, setAssignedTo] = useState(""); + // const [taskDescription, setTaskDescription] = useState(""); const { isOpen, onOpen, onClose } = useDisclosure(); @@ -121,24 +59,83 @@ function Tasks() { "Start Date", "End Date", "Status", + "Assigned To", ]; const [visibleColumns, setVisibleColumns] = useState(allColumns); + useEffect(() => { + fetchTasks(); + }, []); + + const fetchTasks = async () => { + const { data, error } = await supabase + .from("Tasks") + .select(` + *, + assigned_to:Users!Tasks_assigned_to_fkey(display_name) + `) + .order("start_date", { ascending: true }); + + if (error) { + console.error("Error fetching tasks:", error); + } else { + setTasks(data.map(task => ({ + ...task, + assigned_to: task.assigned_to ? task.assigned_to.display_name : null + }))); + } + }; + const handleColumnChange = (column) => { setVisibleColumns((prev) => { const newColumns = prev.includes(column) ? prev.filter((c) => c !== column) : [...prev, column]; - console.log("Visible columns:", newColumns); return newColumns; }); }; - const handleStatusChange = (index, newStatus) => { - const updatedTasks = [...tasks]; - updatedTasks[index].status = newStatus; - setTasks(updatedTasks); - console.log(`Task ${index} status changed to: ${newStatus}`); + const handleStatusChange = async (taskId, newStatus) => { + const { error } = await supabase + .from("Tasks") + .update({ status: newStatus }) + .eq("task_id", taskId); + + if (error) { + console.error("Error updating task status:", error); + } else { + fetchTasks(); // Refresh tasks after update + } + }; + + const handleAddTask = async () => { + const newTask = { + task_name: taskName, + task_type: taskType, + start_date: startDate, + end_date: endDate, + status: "Not Started", + assigned_to: assignedTo, // This is now a single user ID + assigned_by: session.user.id, + assigned_at: new Date().toISOString(), + // description: taskDescription, + }; + + const { error } = await supabase.from("Tasks").insert(newTask); + + if (error) { + console.error("Error adding new task:", error); + } else { + fetchTasks(); // Refresh tasks after adding + onClose(); // Close the add task popover + // Reset form fields + setTaskName(""); + setTaskType("Scheduled"); + setStartDate(""); + setEndDate(""); + setAssignedTo(""); + // setTaskDescription(""); + } }; return ( @@ -157,7 +154,7 @@ function Tasks() { boxShadow="0px 2px 4px rgba(0, 0, 0, 0.5)" height="4.5vh" width="35vh" - borderWidth="2px" + border="None" placeholder="Search tasks..." mr={2} /> @@ -183,22 +180,25 @@ function Tasks() { borderWidth="2px" borderColor="#A1A1AA" borderRadius="5px" - width="5vhpx" + width="670px" + height="650px" + padding={4} > + Task Name - Task Name setTaskName(e.target.value)} /> + Task Type - Task Type setStartDate(e.target.value)} - /> - - - + + setStartDate(e.target.value)} + /> + + + + End Date - setEndDate(e.target.value)} - /> - + + setEndDate(e.target.value)} + /> + + - Member(s) - setMembers(e.target.value)} - /> + Assigned To + setAssignedTo(selectedUserId)} /> + + Task Description + - - Task Description -