working frontend poc

frontend/src/app/[organisation]/bemanning/page.tsx

@@ -3,15 +3,25 @@ import FilteredConsultantsList from "@/components/FilteredConsultantsList";
 import { fetchWithToken } from "@/data/fetchWithToken";
 import { Consultant, Department } from "@/types";
 import { ConsultantFilterProvider } from "@/components/FilteredConsultantProvider";
+import { useSearchParams } from "next/navigation";
+import { stringToWeek } from "@/data/tmp-utils";
 
 export default async function Bemanning({
   params,
+  searchParams,
 }: {
   params: { organisation: string };
+  searchParams: { selectedWeek?: string };
 }) {
+  const selectedWeek = stringToWeek(searchParams.selectedWeek || undefined);
+
   const consultants =
     (await fetchWithToken<Consultant[]>(
-      `${params.organisation}/consultants`,
+      `${params.organisation}/consultants${
+        selectedWeek
+          ? `?Year=${selectedWeek.year}&Week=${selectedWeek.weekNumber}`
+          : ""
+      }`,
     )) ?? [];
 
   const departments =

frontend/src/components/FilteredConsultantsList.tsx

@@ -2,6 +2,7 @@
 import ConsultantRows from "./ConsultantRows";
 import ActiveFilters from "./ActiveFilters";
 import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
+import WeekSelection from "@/components/WeekSelection";
 
 export default function FilteredConsultantList() {
   const { filteredConsultants: consultants } = useFilteredConsultants();
@@ -10,6 +11,7 @@ export default function FilteredConsultantList() {
     <div>
       <div>
         <ActiveFilters />
+        <WeekSelection />
       </div>
       <table className="w-full table-auto border-separate border-spacing-1">
         <thead>

frontend/src/components/WeekSelection.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { Filter } from "react-feather";
+import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
+import SecondaryButton from "@/components/SecondaryButton";
+
+export default function WeekSelection() {
+  const { setSelectedWeek, resetSelectedWeek, selectedWeek } =
+    useFilteredConsultants();
+
+  function handlePreviousWeekClick() {
+    if (selectedWeek) {
+      setSelectedWeek({ year: 2023, weekNumber: selectedWeek.weekNumber - 1 });
+    } else {
+      setSelectedWeek({ year: 2023, weekNumber: 43 });
+    }
+  }
+
+  function handleNextWeekClick() {
+    if (selectedWeek) {
+      setSelectedWeek({ year: 2023, weekNumber: selectedWeek.weekNumber + 1 });
+    } else {
+      setSelectedWeek({ year: 2023, weekNumber: 45 });
+    }
+  }
+
+  return (
+    <div>
+      <SecondaryButton label={"<"} onClick={handlePreviousWeekClick} />
+      <SecondaryButton label={"Denne uka"} onClick={resetSelectedWeek} />
+      <SecondaryButton label={">"} onClick={handleNextWeekClick} />
+    </div>
+  );
+}

frontend/src/data/tmp-utils.tsx

@@ -0,0 +1,22 @@
+import { Week } from "@/types";
+
+export function stringToWeek(urlString?: string): Week | undefined {
+  if (!urlString) return;
+  try {
+    const args = urlString.split("-");
+    const year = Number.parseInt(args[0]);
+    const week = Number.parseInt(args[1]);
+    if (year && week) {
+      return {
+        year: year,
+        weekNumber: week,
+      };
+    }
+  } catch {
+    return;
+  }
+}
+
+export function weekToString(week: Week) {
+  return `${week.year}-${week.weekNumber}`;
+}

frontend/src/hooks/useFilteredConsultants.ts

@@ -1,15 +1,18 @@
 "use client";
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { Consultant, Department, YearRange } from "@/types";
+import { Consultant, Department, Week, YearRange } from "@/types";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { FilteredContext } from "@/components/FilteredConsultantProvider";
 import { yearRanges } from "@/components/ExperienceFilter";
+import arg from "arg";
+import { stringToWeek, weekToString } from "@/data/tmp-utils";
 
 interface UpdateFilterParams {
   search?: string;
   departments?: string;
   years?: string;
+  week?: Week;
 }
 
 export function useFilteredConsultants() {
@@ -21,6 +24,9 @@ export function useFilteredConsultants() {
   const searchFilter = searchParams.get("search") || "";
   const departmentFilter = searchParams.get("depFilter") || "";
   const yearFilter = searchParams.get("yearFilter") || "";
+  const selectedWeek = stringToWeek(
+    searchParams.get("selectedWeek") || undefined,
+  );
 
   const [activeNameSearch, setActiveNameSearch] =
     useState<string>(searchFilter);
@@ -33,14 +39,32 @@ export function useFilteredConsultants() {
       const { search = searchFilter } = updateParams;
       const { departments = departmentFilter } = updateParams;
       const { years = yearFilter } = updateParams;
+      const { week = selectedWeek } = updateParams;
 
       router.push(
-        `${pathname}?search=${search}&depFilter=${departments}&yearFilter=${years}`,
+        `${pathname}?search=${search}&depFilter=${departments}&yearFilter=${years}${
+          week ? `&selectedWeek=${weekToString(week)}` : ""
+        }`,
       );
     },
-    [departmentFilter, pathname, router, searchFilter, yearFilter],
+    [
+      departmentFilter,
+      pathname,
+      router,
+      searchFilter,
+      selectedWeek,
+      yearFilter,
+    ],
   );
 
+  function setSelectedWeek(week: Week) {
+    updateRoute({ week });
+  }
+
+  function resetSelectedWeek() {
+    updateRoute({ week: undefined });
+  }
+
   useEffect(() => {
     let nameSearchDebounceTimer = setTimeout(() => {
       if (
@@ -136,6 +160,9 @@ export function useFilteredConsultants() {
     setNameSearch,
     toggleDepartmentFilter,
     toggleYearFilter,
+    selectedWeek,
+    setSelectedWeek,
+    resetSelectedWeek,
   };
 }
 

frontend/src/types.ts

@@ -54,3 +54,8 @@ export type YearRange = {
   start: number;
   end?: number;
 };
+
+export type Week = {
+  year: number;
+  weekNumber: number;
+};