Fix Persistent Filtering Add Dynamic Start Date

Peyton-McKee · Peyton-McKee · commit d84e7d3d21d1 · 2025-04-12T21:20:55.000-04:00
diff --git a/src/backend/src/controllers/retrospectives.controllers.ts b/src/backend/src/controllers/retrospectives.controllers.ts
@@ -4,7 +4,12 @@ import RetrospectiveService from '../services/retrospective.services';
 export default class RetrospectiveController {
   static async getRetrospectiveTimelines(req: Request, res: Response, next: NextFunction) {
     try {
-      const projects = await RetrospectiveService.getRetrospectiveTimelines(req.organization.organizationId);
+      const { start, end } = req.query;
+      const projects = await RetrospectiveService.getRetrospectiveTimelines(
+        req.organization.organizationId,
+        start ? new Date(start as string) : undefined,
+        end ? new Date(end as string) : undefined
+      );
       res.json(projects);
     } catch (error) {
       next(error);
diff --git a/src/backend/src/services/retrospective.services.ts b/src/backend/src/services/retrospective.services.ts
@@ -7,7 +7,11 @@ import { getProjectQueryArgs } from '../prisma-query-args/projects.query-args';
 import { ProjectPreview, RetrospectiveProjectPreview } from 'shared';
 
 export default class RetrospectiveService {
-  static async getRetrospectiveTimelines(organizationId: string): Promise<RetrospectiveProjectPreview[]> {
+  static async getRetrospectiveTimelines(
+    organizationId: string,
+    startDate?: Date,
+    endDate?: Date
+  ): Promise<RetrospectiveProjectPreview[]> {
     const projects = await prisma.project.findMany({
       where: { wbsElement: { organizationId } },
       ...getProjectQueryArgs(organizationId)
@@ -22,20 +26,54 @@ export default class RetrospectiveService {
             originalDuration: workPackage.duration,
             originalStartDate: workPackage.startDate
           };
+          let minDurationChangeDate: Date | undefined = undefined;
+          let minStartChangeDate: Date | undefined = undefined;
+          let maxDurationChangeDate: Date | undefined = undefined;
+          let maxStartChangeDate: Date | undefined = undefined;
           workPackage.wbsElement.changes.forEach((change) => {
-            if (change.detail.toLowerCase().includes('added duration')) {
+            if (startDate && change.dateImplemented.getTime() < startDate?.getTime()) return;
+
+            if (endDate && change.dateImplemented.getTime() > endDate?.getTime()) return;
+
+            if (
+              change.detail.toLowerCase().includes('Added duration') ||
+              change.detail.toLowerCase().includes('changed duration')
+            ) {
               const split = change.detail.split('"');
               if (split.length > 0) {
-                const originalValueSplit = split[1].split('"');
-                const [originalValue] = originalValueSplit;
-                retroWorkpackage.originalDuration = parseFloat(originalValue);
+                if (!minDurationChangeDate || minDurationChangeDate.getTime() > change.dateImplemented.getTime()) {
+                  const [, originalValue] = split;
+                  retroWorkpackage.originalDuration = parseFloat(originalValue);
+                  minDurationChangeDate = change.dateImplemented;
+                }
+                if (
+                  split.length > 3 &&
+                  (!maxDurationChangeDate || maxDurationChangeDate.getTime() < change.dateImplemented.getTime())
+                ) {
+                  const [, , , newValue] = split;
+                  retroWorkpackage.duration = parseFloat(newValue);
+                  maxDurationChangeDate = change.dateImplemented;
+                }
               }
-            } else if (change.detail.toLowerCase().includes('added start date')) {
+            } else if (
+              change.detail.toLowerCase().includes('added start date') ||
+              change.detail.toLowerCase().includes('changed start date')
+            ) {
               const split = change.detail.split('"');
               if (split.length > 0) {
-                const originalValueSplit = split[1].split('"');
-                const [originalValue] = originalValueSplit;
-                retroWorkpackage.originalStartDate = new Date(originalValue);
+                if (!minStartChangeDate || minStartChangeDate.getTime() > change.dateImplemented.getTime()) {
+                  const [, originalValue] = split;
+                  retroWorkpackage.originalStartDate = new Date(originalValue);
+                  minStartChangeDate = change.dateImplemented;
+                }
+                if (
+                  split.length > 3 &&
+                  (!maxStartChangeDate || maxStartChangeDate.getTime() < change.dateImplemented.getTime())
+                ) {
+                  const [, , , newValue] = split;
+                  retroWorkpackage.startDate = new Date(newValue);
+                  maxStartChangeDate = change.dateImplemented;
+                }
               }
             }
           });
diff --git a/src/frontend/src/apis/retrospective.api.ts b/src/frontend/src/apis/retrospective.api.ts
@@ -3,8 +3,8 @@ import axios from '../utils/axios';
 import { apiUrls } from '../utils/urls';
 import { retrospectiveProjectPreviewTransformer } from './transformers/projects.transformers';
 
-export const getRetrospectiveTimelines = () => {
-  return axios.get<RetrospectiveProjectPreview[]>(apiUrls.retrospectiveTimelines(), {
+export const getRetrospectiveTimelines = (startDate?: Date, endDate?: Date) => {
+  return axios.get<RetrospectiveProjectPreview[]>(apiUrls.retrospectiveTimelines(startDate, endDate), {
     transformResponse: (data) => JSON.parse(data).map(retrospectiveProjectPreviewTransformer)
   });
 };
diff --git a/src/frontend/src/hooks/retrospective.hooks.ts b/src/frontend/src/hooks/retrospective.hooks.ts
@@ -2,9 +2,9 @@ import { useQuery } from 'react-query';
 import { RetrospectiveProjectPreview } from 'shared';
 import { getRetrospectiveBudgets, getRetrospectiveTimelines } from '../apis/retrospective.api';
 
-export const useGetRetrospectiveTimelines = () =>
-  useQuery<RetrospectiveProjectPreview[], Error>(['retrospective-timelines'], async () => {
-    const { data } = await getRetrospectiveTimelines();
+export const useGetRetrospectiveTimelines = (startDate?: Date, endDate?: Date) =>
+  useQuery<RetrospectiveProjectPreview[], Error>(['retrospective-timelines', startDate, endDate], async () => {
+    const { data } = await getRetrospectiveTimelines(startDate, endDate);
     return data;
   });
 
diff --git a/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarDisplay.tsx b/src/frontend/src/pages/GanttPage/GanttChart/GanttChartComponents/GanttTaskBar/GanttTaskBarDisplay.tsx
@@ -132,8 +132,11 @@ const GanttTaskBarDisplay = <T,>({
       height: '2rem',
       border: `1px solid ${theme.palette.text.primary}`,
       borderRadius: '0.25rem',
-      backgroundColor: '#ef4345',
-      opacity: 0.5,
+      backgroundImage: `
+        repeating-linear-gradient(-45deg, #000 0, #000 1px, transparent 1px, transparent 10px)
+      `,
+      backgroundColor: grey[100],
+      opacity: 0.3,
       cursor: 'pointer',
       gridRow: 1,
       zIndex: 1
diff --git a/src/frontend/src/pages/GanttPage/ProjectGanttChart/GanttChartFilters.tsx b/src/frontend/src/pages/GanttPage/ProjectGanttChart/GanttChartFilters.tsx
@@ -82,7 +82,7 @@ interface GanttChartFiltersProps {
   overdueHandler: {
     filterLabel: string;
     handler: (event: ChangeEvent<HTMLInputElement>) => void;
-    defaultChecked: boolean;
+    defaultChecked?: boolean;
   }[];
   resetHandler: () => void;
   collapseHandler: () => void;
diff --git a/src/frontend/src/pages/GanttPage/ProjectGanttChart/GanttChartFiltersButton.tsx b/src/frontend/src/pages/GanttPage/ProjectGanttChart/GanttChartFiltersButton.tsx
@@ -14,7 +14,7 @@ interface GanttChartFiltersButtonProps {
   overdueHandler: {
     filterLabel: string;
     handler: (event: ChangeEvent<HTMLInputElement>) => void;
-    defaultChecked: boolean;
+    defaultChecked?: boolean;
   }[];
   resetHandler: () => void;
   collapseHandler: () => void;
diff --git a/src/frontend/src/pages/GanttPage/ProjectGanttChart/ProjectGanttChartPage.tsx b/src/frontend/src/pages/GanttPage/ProjectGanttChart/ProjectGanttChartPage.tsx
@@ -8,11 +8,9 @@ import LoadingIndicator from '../../../components/LoadingIndicator';
 import { useAllProjects } from '../../../hooks/projects.hooks';
 import ErrorPage from '../../ErrorPage';
 import { add, sub } from 'date-fns';
-import { useQuery } from '../../../hooks/utils.hooks';
 import { useHistory } from 'react-router-dom';
 import {
   applyChangesToWBSElement,
-  buildGanttSearchParams,
   constructCollectionsFromTeamPreviewAndProjects,
   constructFinalizedChanges,
   GanttChange,
@@ -21,7 +19,8 @@ import {
   GanttTask,
   isProjectPreview,
   RequestEventChange,
-  transformProjectToGanttTask
+  transformProjectToGanttTask,
+  useGanttFilters
 } from '../../../utils/gantt.utils';
 import { routes } from '../../../utils/routes';
 import { Box } from '@mui/material';
@@ -52,15 +51,9 @@ import { projectWbsPipe } from '../../../utils/pipes';
 import { projectPreviewTransformer } from '../../../apis/transformers/projects.transformers';
 
 const ProjectGanttChartPage: FC = () => {
-  const query = useQuery();
   const history = useHistory();
   const toast = useToast();
 
-  const ganttParams = localStorage.getItem('ganttURL');
-  if (ganttParams && history.location.search !== ganttParams) {
-    history.push(`${history.location.pathname + ganttParams}`);
-  }
-
   const { isLoading: projectsIsLoading, isError: projectsIsError, data: projects, error: projectsError } = useAllProjects();
 
   const {
@@ -87,20 +80,7 @@ const ProjectGanttChartPage: FC = () => {
   const [editedProjects, setEditedProjects] = useState<ProjectPreview[]>([]);
 
   /******************** Filters ***************************/
-  const showCars = query.getAll('car').map((car) => parseInt(car));
-
-  const showTeamTypes = query.getAll('teamType');
-
-  const showTeams = query.getAll('team');
-
-  const showOnlyOverdue = query.get('overdue') ? query.get('overdue') === 'true' : false;
-
-  const [ganttFilters, setGanttFilters] = useState<GanttFilters>({
-    showCars,
-    showTeamTypes,
-    showTeams,
-    showOnlyOverdue
-  });
+  const { filters, setFilters } = useGanttFilters('project-gantt');
 
   useEffect(() => {
     const requestRefresh = (
@@ -129,13 +109,16 @@ const ProjectGanttChartPage: FC = () => {
           projectPreviewTransformer
         )
       );
-      history.push(`${history.location.pathname + buildGanttSearchParams(ganttFilters)}`);
     };
 
     if (projects && teams) {
-      requestRefresh(projects, teams, editedProjects, addedProjects, ganttFilters, searchText);
+      requestRefresh(projects, teams, editedProjects, addedProjects, filters, searchText);
     }
-  }, [teams, projects, addedProjects, setAllProjects, setCollections, editedProjects, ganttFilters, searchText, history]);
+  }, [teams, projects, addedProjects, setAllProjects, setCollections, editedProjects, filters, searchText, history]);
+
+  const handleSetGanttFilters = (newFilters: GanttFilters) => {
+    setFilters(newFilters);
+  };
 
   if (
     projectsIsLoading ||
@@ -155,34 +138,33 @@ const ProjectGanttChartPage: FC = () => {
 
   const carFilterHandler = (car: number) => {
     return (event: ChangeEvent<HTMLInputElement>) => {
-      setGanttFilters(
+      handleSetGanttFilters(
         event.target.checked
-          ? { ...ganttFilters, showCars: Array.from(new Set([...ganttFilters.showCars, car])) }
-          : { ...ganttFilters, showCars: ganttFilters.showCars.filter((c) => c !== car) }
+          ? { ...filters, showCars: Array.from(new Set([...filters.showCars, car])) }
+          : { ...filters, showCars: filters.showCars.filter((c) => c !== car) }
       );
     };
   };
 
   const teamTypeFilterHandler = (teamType: TeamType) => {
     return (event: ChangeEvent<HTMLInputElement>) => {
-      setGanttFilters(
+      handleSetGanttFilters(
         event.target.checked
           ? {
-              ...ganttFilters,
-              showTeamTypes: Array.from(new Set([...ganttFilters.showTeamTypes, teamType.name]))
+              ...filters,
+              showTeamTypes: Array.from(new Set([...filters.showTeamTypes, teamType.name]))
             }
-          : { ...ganttFilters, showTeamTypes: ganttFilters.showTeamTypes.filter((t) => t !== teamType.name) }
+          : { ...filters, showTeamTypes: filters.showTeamTypes.filter((t) => t !== teamType.name) }
       );
-      history.push(`${history.location.pathname + buildGanttSearchParams(ganttFilters)}`);
     };
   };
 
   const teamFilterHandler = (team: TeamPreview) => {
     return (event: ChangeEvent<HTMLInputElement>) => {
-      setGanttFilters(
+      handleSetGanttFilters(
         event.target.checked
-          ? { ...ganttFilters, showTeams: Array.from(new Set([...ganttFilters.showTeams, team.teamName])) }
-          : { ...ganttFilters, showTeams: ganttFilters.showTeams.filter((t) => t !== team.teamName) }
+          ? { ...filters, showTeams: Array.from(new Set([...filters.showTeams, team.teamName])) }
+          : { ...filters, showTeams: filters.showTeams.filter((t) => t !== team.teamName) }
       );
     };
   };
@@ -195,7 +177,7 @@ const ProjectGanttChartPage: FC = () => {
     return {
       filterLabel: teamType.name,
       handler: teamTypeFilterHandler(teamType),
-      defaultChecked: ganttFilters.showTeamTypes.includes(teamType.name)
+      defaultChecked: filters.showTeamTypes.includes(teamType.name)
     };
   });
 
@@ -207,16 +189,16 @@ const ProjectGanttChartPage: FC = () => {
     return {
       filterLabel: team.teamName,
       handler: teamFilterHandler(team),
-      defaultChecked: ganttFilters.showTeams.includes(team.teamName)
+      defaultChecked: filters.showTeams.includes(team.teamName)
     };
   });
 
   const overdueHandler = [
     {
       filterLabel: 'Overdue',
       handler: (event: ChangeEvent<HTMLInputElement>) =>
-        setGanttFilters({ ...ganttFilters, showOnlyOverdue: event.target.checked }),
-      defaultChecked: ganttFilters.showOnlyOverdue
+        handleSetGanttFilters({ ...filters, showOnlyOverdue: event.target.checked }),
+      defaultChecked: filters.showOnlyOverdue
     }
   ];
 
@@ -229,7 +211,7 @@ const ProjectGanttChartPage: FC = () => {
     return {
       filterLabel: carNum === 0 ? 'None' : `Car ${carNum}`,
       handler: carFilterHandler(carNum),
-      defaultChecked: ganttFilters.showCars.includes(carNum)
+      defaultChecked: filters.showCars.includes(carNum)
     };
   });
 
diff --git a/src/frontend/src/pages/RetrospectivePage/Retrospective.tsx b/src/frontend/src/pages/RetrospectivePage/Retrospective.tsx
diff --git a/src/frontend/src/utils/gantt.utils.tsx b/src/frontend/src/utils/gantt.utils.tsx
diff --git a/src/frontend/src/utils/urls.ts b/src/frontend/src/utils/urls.ts
