Merge pull request #4054 from Northeastern-Electric-Racing/#4023-guests-projects-tasks-tab

#4023 guest projects tasks tab

Author: chpy04

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/ProjectViewContainer.tsx

@@ -4,7 +4,7 @@
  */
 
 import { Link, useHistory } from 'react-router-dom';
-import { Project, isGuest, isAdmin, isLeadership } from 'shared';
+import { Project, isGuest, isAdmin, isLeadership, RoleEnum } from 'shared';
 import { projectWbsPipe, wbsPipe } from '../../../utils/pipes';
 import ProjectDetails from './ProjectDetails';
 import { routes } from '../../../utils/routes';
@@ -207,7 +207,7 @@ const ProjectViewContainer: React.FC<ProjectViewContainerProps> = ({ project, en
       {tab === 0 ? (
         <ProjectDetails project={project} />
       ) : tab === 1 ? (
-        <TaskList project={project} />
+        <TaskList project={project} isGuest={user.role === RoleEnum.GUEST} />
       ) : tab === 2 ? (
         <BOMTab project={project} />
       ) : tab === 3 ? (

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/GuestTasksList.tsx

@@ -0,0 +1,92 @@
+import { Typography } from '@mui/material';
+import { Box, useTheme } from '@mui/system';
+import { Project, TaskPriority, TaskStatus } from 'shared';
+
+const TaskCard = ({ task }: { task: any }) => {
+  const theme = useTheme();
+  const getPriorityColor = (priority: TaskPriority) => {
+    switch (priority) {
+      case TaskPriority.High:
+        return '#ff0000';
+      case TaskPriority.Medium:
+        return '#ff9800';
+      default:
+        return '#4caf50';
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 1,
+        p: 2,
+        mb: 1,
+        backgroundColor: theme.palette.background.paper,
+        width: '100%',
+        borderRadius: 1
+      }}
+    >
+      <Typography
+        sx={{
+          color: getPriorityColor(task.priority),
+          fontWeight: 'bold',
+          flexShrink: 0
+        }}
+      >
+        {task.priority}
+      </Typography>
+      <Typography> - {task.title}</Typography>
+    </Box>
+  );
+};
+
+export const GuestsTasksList = ({ project }: { project: Project }) => {
+  const backLogTasks = project.tasks.filter((task) => task.status === TaskStatus.IN_BACKLOG);
+  const inProgressTasks = project.tasks.filter((task) => task.status === TaskStatus.IN_PROGRESS);
+  const doneTasks = project.tasks.filter((task) => task.status === TaskStatus.DONE);
+
+  return (
+    <Box justifyContent="space-between" mt={3}>
+      {backLogTasks.length === 0 && inProgressTasks.length === 0 && doneTasks.length === 0 ? (
+        <Typography variant="body1" sx={{ textAlign: 'center', color: 'text.secondary' }}>
+          This project has no tasks associated with it
+        </Typography>
+      ) : (
+        <>
+          {backLogTasks.length > 0 && (
+            <>
+              <Typography variant="h5" sx={{ cursor: 'pointer', mb: 1 }}>
+                Back Log
+              </Typography>
+              {backLogTasks.map((task) => (
+                <TaskCard task={task} />
+              ))}
+            </>
+          )}
+          {inProgressTasks.length > 0 && (
+            <>
+              <Typography variant="h5" sx={{ cursor: 'pointer', mb: 1 }}>
+                In Progress
+              </Typography>
+              {inProgressTasks.map((task) => (
+                <TaskCard task={task} />
+              ))}
+            </>
+          )}
+          {doneTasks.length > 0 && (
+            <>
+              <Typography variant="h5" sx={{ cursor: 'pointer', mb: 1 }}>
+                Done
+              </Typography>
+              {doneTasks.map((task) => (
+                <TaskCard task={task} />
+              ))}
+            </>
+          )}
+        </>
+      )}
+    </Box>
+  );
+};

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskList.tsx

@@ -1,14 +1,10 @@
-import { useMediaQuery, Typography, Theme } from '@mui/material';
+import { useMediaQuery, Theme } from '@mui/material';
 import { Project } from 'shared';
 import { TaskListContent } from './TaskListContent';
+import { GuestsTasksList } from '../GuestTasksList';
 
-export const TaskList = ({ project }: { project: Project }) => {
+export const TaskList = ({ project, isGuest }: { project: Project; isGuest: boolean }) => {
   const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
-  return isSmall ? <FallbackForMobile /> : <TaskListContent project={project} />;
-};
 
-const FallbackForMobile = () => (
-  <Typography mt={3} align="center">
-    The Kanban board is not available on mobile
-  </Typography>
-);
+  return isSmall || isGuest ? <GuestsTasksList project={project} /> : <TaskListContent project={project} />;
+};