feat: enhance texts in calendar entries

Author: stampaaaron

apps/frontend/src/components/questionnaire/calendar/QuestionnaireEntry.tsx

@@ -1,16 +1,34 @@
 import { EventImpl } from "@fullcalendar/core/internal";
 import { ExtendedEvent } from "../../../routes/_auth/questionnaire/_questionnaire/$id/entries";
-import { Flex } from "@quassel/ui";
+import { IconRepeat, Stack, Text } from "@quassel/ui";
+import { i18n } from "../../../stores/i18n";
+import { params } from "@nanostores/i18n";
+import { useStore } from "@nanostores/react";
 
 type QuestionnaireEntryProps = {
   event: EventImpl;
 };
 
+const messages = i18n("questionnaireEntries", {
+  labelRecurringWeekly: params("{weeks} weeks"),
+});
+
 export function QuestionnaireEntry({ event }: QuestionnaireEntryProps) {
+  const { entryLanguages, weeklyRecurring } = event.extendedProps as ExtendedEvent["extendedProps"];
+
+  const t = useStore(messages);
+
   return (
-    <Flex direction={"column"}>
-      <span>{event.title}</span>
-      <span>{(event.extendedProps as ExtendedEvent["extendedProps"]).entryLanguages.map(({ language }) => language.name).join(", ")}</span>
-    </Flex>
+    <Stack gap={0}>
+      <Text size="sm" fw="bold" truncate>
+        {event.title}
+      </Text>
+      {entryLanguages.map(({ language }) => language.ietfBcp47).join(", ")}
+      {weeklyRecurring && weeklyRecurring > 1 && (
+        <Text mt="sm" size="sm">
+          <IconRepeat size={13} /> {t.labelRecurringWeekly({ weeks: weeklyRecurring })}
+        </Text>
+      )}
+    </Stack>
   );
 }

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/entries.tsx

@@ -24,7 +24,9 @@ import { EntityForm, EntryFormValues } from "../../../../../components/questionn
 import { useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 
-export type ExtendedEvent = EventInput & { extendedProps: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][] } };
+export type ExtendedEvent = EventInput & {
+  extendedProps: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][]; weeklyRecurring?: number };
+};
 
 const calendarBaseConfig: FullCalendar["props"] = {
   allDaySlot: false,
@@ -85,12 +87,12 @@ function QuestionnaireEntries() {
   });
 
   const events: ExtendedEvent[] =
-    questionnaire.entries?.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id }) => ({
+    questionnaire.entries?.map(({ startedAt, endedAt, weekday, carer, entryLanguages, id, weeklyRecurring }) => ({
       id: id.toString(),
       start: getDateFromTimeAndWeekday(startedAt, weekday),
       end: getDateFromTimeAndWeekday(endedAt, weekday),
       title: carer.name,
-      extendedProps: { entryLanguages },
+      extendedProps: { entryLanguages, weeklyRecurring },
       backgroundColor: theme.colors[theme.primaryColor][4],
     })) ?? [];
 

libs/ui/src/index.ts

@@ -97,6 +97,7 @@ export {
   IconCalendarWeek,
   IconMapSearch,
   IconMinus,
+  IconRepeat,
 } from "@tabler/icons-react";
 
 export { DSVImport } from "react-dsv-import";