From 5a71738eeb4a60f7188bc7eecc25e50c15164cd6 Mon Sep 17 00:00:00 2001
From: LuukvH <luuk@drieam.com>
Date: Sun, 15 Sep 2024 20:44:45 +0200
Subject: [PATCH] feat: Show schedule rules

Show scheduling rules on child.
---
 src/web/src/features/schedules/ChildSchedule.tsx | 16 +++++++++-------
 src/web/src/utils/scheduleRulesFormatter.ts      | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 src/web/src/utils/scheduleRulesFormatter.ts

diff --git a/src/web/src/features/schedules/ChildSchedule.tsx b/src/web/src/features/schedules/ChildSchedule.tsx
index 1f0847f..ebb85d8 100644
--- a/src/web/src/features/schedules/ChildSchedule.tsx
+++ b/src/web/src/features/schedules/ChildSchedule.tsx
@@ -8,15 +8,9 @@ import { AddChildScheduleDialog } from "./AddChildScheduleDialog";
 import { useTranslation } from "react-i18next";
 import dayjs from "dayjs";
 import { useGetChildSchedules } from "@api/endpoints/schedules/schedules";
+import { scheduleRulesFormatter } from "../../utils/scheduleRulesFormatter";
 
 const columns: GridColDef[] = [
-  {
-    field: "name",
-    headerName: "Name",
-    flex: 1,
-    disableColumnMenu: true,
-    disableReorder: true,
-  },
   {
     field: "startDate",
     headerName: "StartDate",
@@ -33,6 +27,14 @@ const columns: GridColDef[] = [
     disableReorder: true,
     valueFormatter: (value) => value && dayjs(value).format("DD/MM/YYYY"),
   },
+  {
+    field: "scheduleRules",
+    headerName: "WeekSchedule",
+    flex: 1,
+    disableColumnMenu: true,
+    disableReorder: true,
+    valueFormatter: (value) => value && scheduleRulesFormatter(value),
+  },
 ];
 
 type ChildScheduleProps = {
diff --git a/src/web/src/utils/scheduleRulesFormatter.ts b/src/web/src/utils/scheduleRulesFormatter.ts
new file mode 100644
index 0000000..892e548
--- /dev/null
+++ b/src/web/src/utils/scheduleRulesFormatter.ts
@@ -0,0 +1,14 @@
+import { type ChildScheduleListVMScheduleRule } from "@api/models/childScheduleListVMScheduleRule";
+import dayjs from "dayjs";
+
+export const scheduleRulesFormatter = (scheduleRules: ChildScheduleListVMScheduleRule[]): string => {
+  
+  const monday = dayjs().startOf("week").add(1, "day"); // Ensure the week starts on Monday
+  
+  return scheduleRules
+    .map((rule) => {
+      const dayName = monday.add(rule.day!, "day").format("dd"); // Get the localized day name
+      return `${dayName}: ${rule.timeSlotId}`;
+    })
+    .join("\n"); // Join all formatted rules into a single string with line breaks
+};