Refactor large toolbox modules

website/src/features/toolboxes/modules/CalendarContent.jsx

@@ -0,0 +1,144 @@
+// Rôle : rend le contenu interactif du calendrier une fois initialisé.
+import { Icon } from "../../../components/Icon.jsx";
+import { CalendarEventForm } from "./CalendarEventForm.jsx";
+import { CalendarMonthView, CalendarWeekGrid } from "./CalendarViews.jsx";
+import { TextExchangeActions } from "./TextExchangeActions.jsx";
+import {
+  addMonths,
+  formatLocalDateKey,
+  getMonthStart,
+  minutesToTimeValue
+} from "./calendarUtils.js";
+
+export function CalendarContent({
+  data,
+  context,
+  draft,
+  error,
+  activeOccurrenceDate,
+  monthStart,
+  monthGridDays,
+  occurrences,
+  textContent,
+  activeEventId,
+  formOpen,
+  draftSelection,
+  selection,
+  monthSelection,
+  days,
+  weekGridLayout,
+  now,
+  nowDayIndex,
+  nowMinutes,
+  hideEmptyHours,
+  textExchangeOpen,
+  onKeyDown,
+  onSubmit,
+  onDraftChange,
+  onAlertModeChange,
+  onAlertOffsetToggle,
+  onDeleteEvent,
+  onDeleteOccurrence,
+  onClose,
+  onDisplayedMonthChange,
+  onImport,
+  onHideEmptyHoursToggle,
+  onMonthPointerDown,
+  onMonthPointerEnter,
+  onMonthPointerUp,
+  onSlotPointerDown,
+  onSlotPointerEnter,
+  onSlotPointerUp,
+  onEditEvent
+}) {
+  const selectedAlertOffsets = draft.alertMode === "off" ? [] : draft.alertOffsetMinutes;
+
+  return (
+    <div className="calendar-module" onKeyDown={onKeyDown}>
+      {formOpen && (
+        <CalendarEventForm
+          data={data}
+          draft={draft}
+          error={error}
+          activeOccurrenceDate={activeOccurrenceDate}
+          monthStart={monthStart}
+          selectedAlertOffsets={selectedAlertOffsets}
+          textContent={textContent}
+          onSubmit={onSubmit}
+          onDraftChange={onDraftChange}
+          onAlertModeChange={onAlertModeChange}
+          onAlertOffsetToggle={onAlertOffsetToggle}
+          onDeleteEvent={onDeleteEvent}
+          onDeleteOccurrence={onDeleteOccurrence}
+          onClose={onClose}
+          onDisplayedMonthChange={onDisplayedMonthChange}
+        />
+      )}
+      {textExchangeOpen && (
+        <div className="module-text-exchange-panel">
+          <TextExchangeActions type="calendar" data={data} context={context} textContent={textContent} onImport={onImport} />
+        </div>
+      )}
+
+      {data.viewMode === "week" && (
+        <CalendarWeekOptions textContent={textContent} hideEmptyHours={hideEmptyHours} onToggle={onHideEmptyHoursToggle} />
+      )}
+
+      {data.viewMode === "month" ? (
+        <CalendarMonthView
+          monthStart={monthStart}
+          monthGridDays={monthGridDays}
+          occurrences={occurrences}
+          textContent={textContent}
+          activeEventId={activeEventId}
+          selectedRange={formOpen ? { startDate: draft.startDate, endDate: draft.endDate || draft.startDate } : null}
+          dragSelection={monthSelection}
+          todayDate={formatLocalDateKey(now)}
+          nowLabel={minutesToTimeValue(nowMinutes)}
+          onPreviousMonth={() => onDisplayedMonthChange(getMonthStart(addMonths(monthStart, -1)))}
+          onCurrentMonth={() => onDisplayedMonthChange(getMonthStart(new Date()))}
+          onNextMonth={() => onDisplayedMonthChange(getMonthStart(addMonths(monthStart, 1)))}
+          onPointerDown={onMonthPointerDown}
+          onPointerEnter={onMonthPointerEnter}
+          onPointerUp={onMonthPointerUp}
+          onEditEvent={onEditEvent}
+        />
+      ) : (
+        <CalendarWeekGrid
+          days={days}
+          occurrences={occurrences}
+          textContent={textContent}
+          activeEventId={activeEventId}
+          formOpen={formOpen}
+          draftSelection={draftSelection}
+          selection={selection}
+          weekGridLayout={weekGridLayout}
+          nowDayIndex={nowDayIndex}
+          nowMinutes={nowMinutes}
+          onSlotPointerDown={onSlotPointerDown}
+          onSlotPointerEnter={onSlotPointerEnter}
+          onSlotPointerUp={onSlotPointerUp}
+          onEditEvent={onEditEvent}
+        />
+      )}
+    </div>
+  );
+}
+
+function CalendarWeekOptions({ textContent, hideEmptyHours, onToggle }) {
+  return (
+    <div className="calendar-week-options">
+      <span>{textContent.hideEmptyHoursLabel || "Masquer les heures vides"}</span>
+      <button
+        className={`tool-split-scroll-toggle calendar-hide-hours-switch ${hideEmptyHours ? "active" : ""}`}
+        type="button"
+        onClick={onToggle}
+        aria-pressed={hideEmptyHours}
+        title={textContent.hideEmptyHoursLabel || "Masquer les heures vides"}
+      >
+        <Icon name={hideEmptyHours ? "eye-closed" : "eye-open"} />
+        <i aria-hidden="true" />
+      </button>
+    </div>
+  );
+}