Pass calculation positions from server

app/components/TimeEntryForm.tsx

@@ -1,10 +1,10 @@
-import { Project } from "~/troi/troiController";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { TroiButton } from "./TroiButton";
 import { buttonBlue, buttonRed } from "~/utils/colors";
 import { TrackyTask } from "~/tasks/useTasks";
 import { usePhaseNames } from "~/tasks/usePhaseNames";
 import { validateForm } from "~/utils/timeEntryFormValidator";
+import { CalculationPosition } from "~/troi/CalculationPosition";
 
 export interface TimeEntryFormErrors {
   hours?: string;
@@ -19,7 +19,7 @@ interface Props {
   deleteClicked?: () => unknown;
   recurringTasks: TrackyTask[];
   phaseTasks: TrackyTask[];
-  position: Project;
+  calculationPosition: CalculationPosition;
   disabled: boolean;
   minRows?: number;
   maxRows?: number;
@@ -47,13 +47,13 @@ export function TimeEntryForm({
   deleteClicked,
   recurringTasks,
   phaseTasks,
-  position,
+  calculationPosition,
   disabled,
   minRows = 4,
   maxRows = 40,
 }: Props) {
-  const hoursTestId = `hours-${position.id}`;
-  const descriptionTestId = `description-${position.id}`;
+  const hoursTestId = `hours-${calculationPosition.id}`;
+  const descriptionTestId = `description-${calculationPosition.id}`;
 
   const normalAppearance = "border-1 border-b-[1px] border-gray-300 ";
   const errorAppearance =
@@ -81,7 +81,10 @@ export function TimeEntryForm({
   );
   const [errors, setErrors] = useState<TimeEntryFormErrors>({});
 
-  const phaseNames = usePhaseNames(position.id, position.subproject);
+  const phaseNames = usePhaseNames(
+    calculationPosition.id,
+    calculationPosition.subprojectId,
+  );
   const phases = phaseNames.map((value) => {
     for (const phaseTask of phaseTasks) {
       if (descriptionSegments.includes([phaseTask.name, value].join(" "))) {
@@ -195,7 +198,7 @@ export function TimeEntryForm({
               title="Position ID: {position.id}"
               data-testid="project-heading-{position.id}"
             >
-              {position.name}
+              {calculationPosition.name}
             </h2>
             {updateMode ? (
               <div id="timeEntryForm">
@@ -356,14 +359,14 @@ export function TimeEntryForm({
                       <>
                         <TroiButton
                           text={"Save"}
-                          testId={`update-${position.id}`}
+                          testId={`update-${calculationPosition.id}`}
                           onClick={submit}
                           color={buttonBlue}
                         />
                         {values.hours && values.description && (
                           <TroiButton
                             text={"Cancel"}
-                            testId={`cancel-${position.id}`}
+                            testId={`cancel-${calculationPosition.id}`}
                             onClick={handleCancel}
                             color={buttonRed}
                           />
@@ -381,7 +384,7 @@ export function TimeEntryForm({
                 <br />
                 <TroiButton
                   text={"Delete"}
-                  testId={`delete-${position.id}`}
+                  testId={`delete-${calculationPosition.id}`}
                   onClick={() => {
                     deleteClicked?.();
                   }}
@@ -390,7 +393,7 @@ export function TimeEntryForm({
                 {!disabled && (
                   <TroiButton
                     text={"Edit"}
-                    testId={`edit-${position.id}`}
+                    testId={`edit-${calculationPosition.id}`}
                     onClick={() => {
                       // openPhases();
                       setUpdateMode(true);

app/components/TroiTimeEntries.tsx

@@ -1,28 +1,32 @@
 import { TimeEntry } from "troi-library";
-import { Project } from "~/troi/troiController";
 import {
   convertFloatTimeToHHMM,
   convertTimeStringToFloat,
 } from "~/utils/timeConverter";
 import { TimeEntryForm } from "./TimeEntryForm";
 import { TrackyTask } from "~/tasks/useTasks";
 import { Fragment } from "react";
+import { CalculationPosition } from "~/troi/CalculationPosition";
 
 interface Props {
-  positions: Project[];
+  calculationPositions: CalculationPosition[];
   recurringTasks: TrackyTask[];
   phaseTasks: TrackyTask[];
   entries: {
     [projectId: number]: TimeEntry[];
   };
   deleteEntry: (entry: TimeEntry, positionId: number) => unknown;
-  updateEntry: (position: Project, entry: TimeEntry) => unknown;
-  addEntry: (position: Project, hours: number, description: string) => unknown;
+  updateEntry: (position: CalculationPosition, entry: TimeEntry) => unknown;
+  addEntry: (
+    position: CalculationPosition,
+    hours: number,
+    description: string,
+  ) => unknown;
   disabled: boolean;
 }
 
 export function TroiTimeEntries({
-  positions,
+  calculationPositions,
   recurringTasks,
   phaseTasks,
   entries,
@@ -32,7 +36,7 @@ export function TroiTimeEntries({
   disabled = false,
 }: Props) {
   async function submitEntry(
-    position: Project,
+    position: CalculationPosition,
     newHours: string,
     newDescription: string,
     entry: TimeEntry | undefined = undefined,
@@ -46,7 +50,7 @@ export function TroiTimeEntries({
     }
   }
 
-  return positions.map((position) => (
+  return calculationPositions.map((position) => (
     <section
       key={position.id}
       className="bg-white p-4"
@@ -55,7 +59,7 @@ export function TroiTimeEntries({
       <div className="container mx-auto pb-2 pt-4">
         {!entries[position.id] || entries[position.id].length === 0 ? (
           <TimeEntryForm
-            position={position}
+            calculationPosition={position}
             recurringTasks={recurringTasks}
             phaseTasks={phaseTasks}
             addOrUpdateClicked={(hours, description) =>
@@ -83,7 +87,7 @@ export function TroiTimeEntries({
                       deleteClicked={() => deleteEntry(entry, position.id)}
                       recurringTasks={recurringTasks}
                       phaseTasks={phaseTasks}
-                      position={position}
+                      calculationPosition={position}
                       disabled={disabled}
                     />
                   </div>

app/components/troi.client.tsx

@@ -6,7 +6,6 @@ import { InfoBanner } from "./InfoBanner";
 import { addDaysToDate, getWeekDaysFor } from "~/utils/dateUtils";
 import { WeekView } from "./WeekView";
 import { TroiTimeEntries } from "./TroiTimeEntries";
-import { Project } from "~/troi/troiController";
 import { useTasks } from "~/tasks/useTasks";
 import type { CalendarEvent } from "troi-library";
 import {
@@ -15,10 +14,12 @@ import {
 } from "~/utils/transformCalendarEvents";
 import moment from "moment";
 import { TimeEntries } from "~/troi/TimeEntry";
+import { CalculationPosition } from "~/troi/CalculationPosition";
 
 interface Props {
   username: string;
   password: string;
+  calculationPositions: CalculationPosition[];
   calendarEvents: CalendarEvent[];
   timeEntries: TimeEntries;
 }
@@ -75,37 +76,40 @@ export default function Troi(props: Props) {
     events: findEventsOfDate(calendarEvents, weekday),
   }));
 
-  const positions = troiController?.getProjects();
+  const positions = props.calculationPositions;
 
   async function onAddEntryClicked(
-    position: Project,
+    position: CalculationPosition,
     hours: number,
     description: string,
   ) {
-    await troiController?.addEntry(
-      selectedDate,
-      position,
-      hours,
-      description,
-      () => {},
-    );
-    troiController?.getEntriesFor(selectedDate).then((entries) => {
-      setEntriesForSelectedDate(entries);
-    });
+    // await troiController?.addEntry(
+    //   selectedDate,
+    //   position,
+    //   hours,
+    //   description,
+    //   () => {}
+    // );
+    // troiController?.getEntriesFor(selectedDate).then((entries) => {
+    //   setEntriesForSelectedDate(entries);
+    // });
   }
 
-  async function onUpdateEntryClicked(position: Project, entry: TimeEntry) {
-    await troiController?.updateEntry(position, entry, () => {});
-    troiController?.getEntriesFor(selectedDate).then((entries) => {
-      setEntriesForSelectedDate(entries);
-    });
+  async function onUpdateEntryClicked(
+    position: CalculationPosition,
+    entry: TimeEntry,
+  ) {
+    // await troiController?.updateEntry(position, entry, () => {});
+    // troiController?.getEntriesFor(selectedDate).then((entries) => {
+    //   setEntriesForSelectedDate(entries);
+    // });
   }
 
   async function onDeleteEntryClicked(entry: TimeEntry, positionId: number) {
-    await troiController?.deleteEntry(entry, positionId, () => {});
-    troiController?.getEntriesFor(selectedDate).then((entries) => {
-      setEntriesForSelectedDate(entries);
-    });
+    // await troiController?.deleteEntry(entry, positionId, () => {});
+    // troiController?.getEntriesFor(selectedDate).then((entries) => {
+    //   setEntriesForSelectedDate(entries);
+    // });
   }
 
   return (
@@ -138,7 +142,7 @@ export default function Troi(props: Props) {
 
       {!selectedDayEvents?.some((event) => event.type == "Holiday") && (
         <TroiTimeEntries
-          positions={positions ?? []}
+          calculationPositions={positions ?? []}
           recurringTasks={recurringTasks}
           phaseTasks={phaseTasks}
           entries={entriesForSelectedDate}

app/routes/projects.tsx

@@ -9,7 +9,11 @@ import { Form, useLoaderData } from "@remix-run/react";
 import { login } from "~/cookies.server";
 import Troi from "../components/troi.client";
 import { useEffect, useState } from "react";
-import { getCalenderEvents, getTimeEntries } from "~/troi/troiControllerServer";
+import {
+  getCalculationPositions,
+  getCalenderEvents,
+  getTimeEntries,
+} from "~/troi/troiControllerServer";
 
 let isHydrating = true;
 
@@ -35,21 +39,28 @@ export async function loader({ request }: LoaderFunctionArgs) {
     return redirect("/login");
   }
 
+  const calculationPositions = await getCalculationPositions(request);
   const calendarEvents = await getCalenderEvents(request);
   const timeEntries = await getTimeEntries(request);
 
   return json({
     username: cookie.username,
     password: cookie.password,
+    calculationPositions,
     calendarEvents,
     timeEntries,
   });
 }
 
 export default function Index() {
   const [isHydrated, setIsHydrated] = useState(!isHydrating);
-  const { username, password, calendarEvents, timeEntries } =
-    useLoaderData<typeof loader>();
+  const {
+    username,
+    password,
+    calculationPositions,
+    calendarEvents,
+    timeEntries,
+  } = useLoaderData<typeof loader>();
 
   useEffect(() => {
     isHydrating = false;
@@ -95,6 +106,7 @@ export default function Index() {
             password={password}
             calendarEvents={calendarEvents}
             timeEntries={timeEntries}
+            calculationPositions={calculationPositions}
           />
         )}
       </div>

app/sessions.ts

@@ -1,4 +1,4 @@
-import type { CalculationPosition, CalendarEvent } from "troi-library";
+import type { CalendarEvent } from "troi-library";
 
 // how to invalidate:
 // 1. shortish ttl for session-cookie
@@ -8,6 +8,7 @@ import type { CalculationPosition, CalendarEvent } from "troi-library";
 
 import { createCookie, createFileSessionStorage } from "@remix-run/node";
 import type { TimeEntries } from "./troi/TimeEntry";
+import type { CalculationPosition } from "./troi/CalculationPosition";
 
 export type SessionData = {
   username: string;

app/troi/CalculationPosition.ts

@@ -0,0 +1,5 @@
+export type CalculationPosition = {
+  name: string;
+  id: number;
+  subprojectId: number;
+};

app/troi/troiControllerServer.ts

@@ -1,9 +1,10 @@
-import type { CalculationPosition, CalendarEvent } from "troi-library";
+import type { CalendarEvent } from "troi-library";
 import TroiApiService from "troi-library";
 import type { SessionData } from "~/sessions";
 import { commitSession, getSession } from "~/sessions";
 import { addDaysToDate, formatDateToYYYYMMDD } from "~/utils/dateUtils";
 import type { TimeEntries, TimeEntry } from "./TimeEntry";
+import type { CalculationPosition } from "./CalculationPosition";
 
 const BASE_URL = "https://digitalservice.troi.software/api/v2/rest";
 const CLIENT_NAME = "DigitalService GmbH des Bundes";
@@ -87,13 +88,26 @@ async function fetchCalculationPositionsAndSaveToSession(request: Request) {
   const cookieHeader = request.headers.get("Cookie");
   const session = await getSession(cookieHeader);
 
+  const clientId = await getClientId(request);
+
   const troiApi = await getTroiApi(
     session.get("username"),
     session.get("troiPassword"),
-    await getClientId(request),
-    await getEmployeeId(request),
   );
-  const calculationPositions = await troiApi.getCalculationPositions();
+
+  const calculationPositions: CalculationPosition[] = (
+    (await troiApi.makeRequest({
+      url: "/calculationPositions",
+      params: {
+        clientId: clientId.toString(),
+        favoritesOnly: true.toString(),
+      },
+    })) as any[]
+  ).map((obj: any) => ({
+    name: obj.DisplayPath,
+    id: obj.Id,
+    subprojectId: obj.Subproject.id,
+  }));
 
   session.set("troiCalculationPositions", calculationPositions);
   await commitSession(session);