Adds prefixes to reservee names

- using the only way possible to check for the use of "Sis", as discussed

wip

apps/admin-ui/src/component/my-units/ReservationPopupContent.tsx

@@ -9,6 +9,7 @@ import { DenseVerticalFlex } from "../../styles/layout";
 import { getReserveeName } from "../reservations/requested/util";
 import { CELL_BORDER } from "./const";
 import VisibleIfPermission from "../reservations/requested/VisibleIfPermission";
+import { useTranslation } from "next-i18next";
 
 const PopupContent = styled.div`
   border: ${CELL_BORDER};
@@ -35,7 +36,8 @@ const ReservationPopupContent = ({
 }: {
   reservation: ReservationType;
 }): JSX.Element => {
-  const eventName = getReserveeName(reservation, 22) || "-";
+  const { t } = useTranslation();
+  const eventName = getReserveeName(reservation, t, 22) || "-";
   return (
     <PopupContent>
       <DenseVerticalFlex>

apps/admin-ui/src/component/my-units/create-reservation/CreateReservationModal.tsx

@@ -242,20 +242,22 @@ const DialogContent = ({
   }, [start, trigger]);
 
   // force form vaildation on date change but not on first render
+  const date = watch("date");
   useEffect(() => {
     // Is touched is always false with controller
     if (getFieldState("date").isDirty) {
       trigger();
     }
-  }, [watch("date"), trigger, getFieldState]);
+  }, [date, trigger, getFieldState]);
 
   // force revalidation of end time on start time change
+  const startTime = watch("startTime");
   useEffect(() => {
     // Is touched is always false with controller
     if (getFieldState("endTime").isDirty) {
       trigger("endTime");
     }
-  }, [watch("startTime"), trigger, getFieldState]);
+  }, [startTime, trigger, getFieldState]);
 
   const [create] = useMutation<
     { createStaffReservation: ReservationStaffCreateMutationPayload },

apps/admin-ui/src/component/reservations/ReservationsDataLoader.tsx

@@ -7,8 +7,8 @@ import {
   ReservationType,
 } from "common/types/gql-types";
 import { More } from "@/component/More";
-import { LIST_PAGE_SIZE } from "../../common/const";
-import { useNotification } from "../../context/NotificationContext";
+import { LIST_PAGE_SIZE } from "@/common/const";
+import { useNotification } from "@/context/NotificationContext";
 import Loader from "../Loader";
 import { FilterArguments } from "./Filters";
 import { RESERVATIONS_QUERY } from "./queries";

apps/admin-ui/src/component/reservations/ReservationsTable.tsx

@@ -2,10 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { TFunction } from "i18next";
 import { memoize } from "lodash";
-import {
-  ReservationsReservationTypeChoices,
-  ReservationType,
-} from "common/types/gql-types";
+import { ReservationType } from "common/types/gql-types";
 import { truncate } from "@/helpers";
 import { reservationUrl } from "@/common/urls";
 import { formatDateTime } from "@/common/util";
@@ -42,18 +39,14 @@ const getColConfig = (t: TFunction): ReservationTableColumn[] => [
     key: "reservee_name",
     isSortable: true,
     transform: (reservation: ReservationType) => {
-      const staffPrefix =
-        reservation.type === ReservationsReservationTypeChoices.Staff
-          ? t("Reservations.prefixes.staff")
-          : "";
-      const prefix =
-        reservation.type === ReservationsReservationTypeChoices.Behalf
-          ? t("Reservations.prefixes.behalf")
-          : staffPrefix;
+      const reservationDisplayName = getReserveeName(
+        reservation,
+        t,
+        MAX_NAME_LENGTH
+      );
       return (
         <TableLink href={reservationUrl(reservation.pk as number)}>
-          {getReserveeName(reservation, 22, prefix) ||
-            t("RequestedReservation.noName")}
+          {reservationDisplayName || t("RequestedReservation.noName")}
         </TableLink>
       );
     },

apps/admin-ui/src/component/reservations/fragments.ts

@@ -125,6 +125,10 @@ export const RESERVATION_COMMON_FRAGMENT = gql`
     order {
       status
     }
+    user {
+      firstName
+      lastName
+    }
     bufferTimeBefore
     bufferTimeAfter
   }

apps/admin-ui/src/component/reservations/requested/util.ts

@@ -16,12 +16,12 @@ import {
   AgeGroupType,
   Maybe,
   ReservationsReservationReserveeTypeChoices,
+  ReservationsReservationTypeChoices,
   ReservationType,
-  ReservationUnitType,
   ReservationUnitPricingType,
-  ReservationUnitsReservationUnitPricingPricingTypeChoices,
   ReservationUnitsReservationUnitPricingPriceUnitChoices,
-  ReservationsReservationTypeChoices,
+  ReservationUnitsReservationUnitPricingPricingTypeChoices,
+  ReservationUnitType,
 } from "common/types/gql-types";
 import { fromApiDate } from "common/src/common/util";
 import { toMondayFirst } from "common/src/helpers";
@@ -214,9 +214,22 @@ export const getTranslationKeyForReserveeType = (
 
 export const getReserveeName = (
   reservation: ReservationType,
-  length = 50,
-  prefix = ""
-): string => truncate(prefix + reservation.reserveeName?.trim() ?? "-", length);
+  t?: TFunction,
+  length = 50
+): string => {
+  let prefix = "";
+  if (reservation.type === ReservationsReservationTypeChoices.Behalf) {
+    prefix = t ? t("Reservations.prefixes.behalf") : "";
+  }
+  if (
+    reservation.type === ReservationsReservationTypeChoices.Staff &&
+    reservation.reserveeName ===
+      `${reservation.user?.firstName} ${reservation.user?.lastName}`
+  ) {
+    prefix = t ? t("Reservations.prefixes.staff") : "";
+  }
+  return truncate(prefix + reservation.reserveeName, length);
+};
 
 export const getName = (reservation: ReservationType, t: TFunction) => {
   if (reservation.name) {
@@ -225,7 +238,7 @@ export const getName = (reservation: ReservationType, t: TFunction) => {
 
   return trim(
     `${reservation.pk}, ${
-      getReserveeName(reservation) || t("RequestedReservation.noName")
+      getReserveeName(reservation, t) || t("RequestedReservation.noName")
     }`.trim()
   );
 };