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 (
+
+
+
+ );
+}
+
+export default MemberSelect;
\ No newline at end of file
diff --git a/src/pages/Tasks.jsx b/src/pages/Tasks.jsx
index c7cf7e5..855a927 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 [description, setDescription] = 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 });
+
+ console.log(data);
+ 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,
+ assigned_by: session.user.id,
+ assigned_at: new Date().toISOString(),
+ description: description,
+ };
+
+ const { error } = await supabase.from("Tasks").insert(newTask);
+
+ if (error) {
+ console.error("Error adding new task:", error);
+ } else {
+ fetchTasks();
+ onClose();
+ setTaskName("");
+ setTaskType("Scheduled");
+ setStartDate("");
+ setEndDate("");
+ setAssignedTo("");
+ setDescription("");
+ }
};
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
-
-
+
+
Start Date
- 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
-