fix: filter calendar times based on priority

Author: joonatank

apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/allocation/AllocationCalendar.tsx

@@ -25,12 +25,14 @@ import {
   encodeTimeSlot,
   type RelatedSlot,
   isInsideCell,
+  convertPriorityFilter,
 } from "./modules/applicationRoundAllocation";
 import {
   useFocusAllocatedSlot,
   useFocusApplicationEvent,
   useSlotSelection,
 } from "./hooks";
+import { useSearchParams } from "react-router-dom";
 
 type Props = {
   applicationSections: ApplicationSectionNode[] | null;
@@ -314,24 +316,39 @@ export function AllocationCalendar({
     )
   );
 
+  const [searchParams] = useSearchParams();
+  const priorityFilter = searchParams.getAll("priority");
+  const priorityFilterSanitized = convertPriorityFilter(priorityFilter);
+
   const [focused] = useFocusApplicationEvent();
-  const focusedApplicationEvent = applicationSections?.find(
-    (ae) => ae.pk === focused
-  );
+  const aes = applicationSections?.map((ae) => {
+    // if priority filter is set, we need to filter what is shown in calendar based on that
+    // these are included in the backend request because we want to show them elsewhere, but not in the calendar
+    if (priorityFilter.length > 0) {
+      return {
+        ...ae,
+        suitableTimeRanges: ae.suitableTimeRanges?.filter((tr) =>
+          priorityFilterSanitized.find((p) => p === tr.priority)
+        ),
+      };
+    }
+    return ae;
+  });
+
+  const focusedApplicationEvent = aes?.find((ae) => ae.pk === focused);
+
   const [focusedAllocated] = useFocusAllocatedSlot();
 
   const data = WEEKDAYS.map((day) => {
     const isNotHandled = (ae: ApplicationSectionNode) =>
       ae.status !== ApplicationSectionStatusChoice.Handled;
 
     // Only show allocated that match the unit and day
-    const timeslots = filterNonNullable(applicationSections)
+    const timeslots = filterNonNullable(aes)
       .filter(isNotHandled)
       .filter((ae) => ae.suitableTimeRanges?.some((tr) => isDay(tr, day)));
 
-    const resUnits = applicationSections?.flatMap(
-      (ae) => ae.reservationUnitOptions
-    );
+    const resUnits = aes?.flatMap((ae) => ae.reservationUnitOptions);
 
     const allocated = filterNonNullable(resUnits)
       .filter((a) => a.allocatedTimeSlots?.some((ts) => isDay(ts, day)))

apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/allocation/index.tsx

@@ -13,7 +13,6 @@ import {
   type UnitNode,
   ApplicantTypeChoice,
   ApplicationRoundStatusChoice,
-  Priority,
   type QueryApplicationRoundArgs,
   type QueryAffectingAllocatedTimeSlotsArgs,
   type ApplicationRoundNode,
@@ -44,6 +43,7 @@ import {
 } from "./queries";
 import { AllocationPageContent } from "./ApplicationEvents";
 import { ComboboxFilter, SearchFilter } from "@/component/QueryParamFilters";
+import { convertPriorityFilter } from "./modules/applicationRoundAllocation";
 
 const MAX_RES_UNIT_NAME_LENGTH = 35;
 
@@ -259,17 +259,7 @@ function ApplicationRoundAllocation({
 
   // NOTE sanitize all other query filters similar to this
   // backend returns an error on invalid filter values, but user can cause them by manipulating the url
-  const priorityFilterSanitized = priorityFilter
-    ?.map((x) => Number(x))
-    .reduce<Array<Priority.Secondary | Priority.Primary>>((acc, x) => {
-      if (x === 200) {
-        return [...acc, Priority.Secondary];
-      } else if (x === 300) {
-        return [...acc, Priority.Primary];
-      }
-      return acc;
-    }, []);
-
+  const priorityFilterSanitized = convertPriorityFilter(priorityFilter);
   const priorityFilterQuery =
     priorityFilterSanitized.length > 0 ? priorityFilterSanitized : null;
   const ageGroupFilterQuery = ageGroupFilter

apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/allocation/modules/applicationRoundAllocation.ts

@@ -315,3 +315,16 @@ export function isInsideCell(
   const endMinutes = (end === 0 ? 24 : end) * 60;
   return cellTime >= beginMinutes && cellTime < endMinutes;
 }
+
+export function convertPriorityFilter(values: string[]): Priority[] {
+  return values
+    ?.map((x) => Number(x))
+    .reduce<Array<Priority>>((acc, x) => {
+      if (x === 200) {
+        return [...acc, Priority.Secondary];
+      } else if (x === 300) {
+        return [...acc, Priority.Primary];
+      }
+      return acc;
+    }, []);
+}