@cwellt_software/cwellt-reactjs-lib 1.0.9 → 1.1.0

package/dist/src/components/custom/scheduler/logic/ui/isAllowedToMove.js

@@ -0,0 +1,19 @@
+export const isAllowedToMove = (data, resData, cblDragNDrop) => {
+    if (data?.eventType !== 1) {
+        return true;
+    }
+    const allowedMoves = [
+        { from: "acftsScheduler", to: "flightsPairingsScheduler" },
+        { from: "flightsScheduler", to: "crewAssignmentsScheduler" },
+        { from: "opstoolScheduler", to: "opstoolScheduler" },
+        { from: "opstoolScheduler", to: "opstoolSchedulerVirtual" },
+        { from: "opstoolSchedulerVirtual", to: "opstoolScheduler" },
+        { from: "opstoolSchedulerVirtual", to: "opstoolSchedulerVirtual" },
+        { from: "vacationsScheduler", to: "vacationsScheduler" }
+    ];
+    const crewControllAllowedMove = allowedMoves.some(move => move.from === cblDragNDrop.fromId && move.to === cblDragNDrop.toId);
+    if (crewControllAllowedMove) {
+        return true;
+    }
+    return data.Crew !== resData.Crewmember_Id;
+};

package/dist/src/components/custom/scheduler/logic/ui/updateResourceVisibility.js

@@ -0,0 +1,15 @@
+export const updateResourceVisibility = (viewportTop, viewportBottom, stateResources, propsResources) => {
+    if (propsResources.length === 0)
+        return [];
+    let currentHeight = 0;
+    return stateResources.map(resource => {
+        const newResource = { ...resource };
+        newResource.isInViewport = isResourceInViewport(currentHeight, viewportTop, viewportBottom);
+        currentHeight += resource.maxTop;
+        return newResource;
+    });
+};
+const isResourceInViewport = (resourceTop, viewportTop, viewportBottom) => {
+    const buffer = 100;
+    return viewportBottom + 50 > resourceTop && resourceTop >= viewportTop - buffer;
+};

package/dist/src/components/custom/scheduler/state/CblDragAndDrop.js

@@ -0,0 +1,18 @@
+export class CblDragAndDrop {
+    fromId;
+    toId;
+    data;
+    droppedOnDate;
+    resizeFromStart;
+    resizeFromEnd;
+    isCtrlKey;
+    constructor(fromId, toId, data, droppedOnDate = null, resizeFromStart = null, resizeFromEnd = null, isCtrlKey = null) {
+        this.fromId = fromId;
+        this.toId = toId;
+        this.data = data;
+        this.droppedOnDate = droppedOnDate;
+        this.resizeFromStart = resizeFromStart;
+        this.resizeFromEnd = resizeFromEnd;
+        this.isCtrlKey = isCtrlKey;
+    }
+}

package/dist/src/components/custom/scheduler/state/CwSchedulerProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler/state/Resource.js

@@ -0,0 +1,18 @@
+export class Resource {
+    uid = "";
+    id;
+    name;
+    maxTop;
+    events = [];
+    isInViewport = false;
+    schedulerResourceDisplay;
+    isLoading = false;
+    data = null;
+    constructor(id, name, eventHeight, data = null, schedulerResourceDisplay = null) {
+        this.id = id;
+        this.name = name;
+        this.maxTop = eventHeight;
+        this.data = data;
+        this.schedulerResourceDisplay = schedulerResourceDisplay || this.name;
+    }
+}

package/dist/src/components/custom/scheduler/state/State.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler/state/cblEvent.js

@@ -0,0 +1,28 @@
+import { getGUID } from "../logic/strings/getGUID";
+export class cblEvent {
+    id = "";
+    start;
+    end;
+    resourceId;
+    selected = false;
+    top = 0;
+    leftPx = 0;
+    rightPx = 0;
+    width = 0;
+    isFullHeight = false;
+    isReadOnly = false;
+    isResizable = false;
+    isDraggable = false;
+    data = null;
+    constructor(start, end, resourceId, data = null, isFullHeight = false, isReadOnly = false, isResizable = false, isDraggable = false) {
+        this.start = start;
+        this.end = end;
+        this.resourceId = resourceId;
+        this.data = data;
+        this.isFullHeight = isFullHeight;
+        this.isReadOnly = isReadOnly;
+        this.isResizable = isResizable;
+        this.isDraggable = isDraggable;
+        this.id = getGUID();
+    }
+}

package/dist/src/components/custom/scheduler/state/cblEventCompProps.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler/state/resourceCompProps2.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/custom/scheduler-new/presentation/NewScheduler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewScheduler.d.ts","sourceRoot":"","sources":["../../../../../../src/components/custom/scheduler-new/presentation/NewScheduler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAwB,MAAM,0CAA0C,CAAC;AACxG,OAAO,EAAmB,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAoB,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAClG,OAAO,EAAkB,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAU/F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC;AAEhD,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,gBAAgB,EAAE,QAAQ,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAClF,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAYD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB,SAAS,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,4CAyJvG,CAAC;AAiCF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"NewScheduler.d.ts","sourceRoot":"","sources":["../../../../../../src/components/custom/scheduler-new/presentation/NewScheduler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,8BAA8B,CAAC;AAE3D,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,6CAA6C,CAAC;AAEzE,OAAO,EAAC,sBAAsB,EAAuB,MAAM,0CAA0C,CAAC;AACtG,OAAO,EAAkB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAmB,WAAW,EAAE,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAChG,OAAO,EAAiB,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAU7F,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAG9D,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC;AAEhD,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,gBAAgB,EAAE,QAAQ,EAAE,CAAC;IAC7B,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAClF,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAYD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,gBAAgB,SAAS,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,4CA4JvG,CAAC;AAiCF,eAAe,SAAS,CAAC"}

package/dist/src/components/custom/scheduler-new/presentation/NewScheduler.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { VariableSizeList as List } from "react-window";
+import { SchedulerHeader } from "./components/header/SchedulerHeader";
+import { BackgroundEvent } from "./components/row/BackgroundEvent";
+import { DefaultRowHeader } from "./components/row/DefaultRowHeader";
+import { SchedulerEvent } from "./components/row/Event";
+import { SchedulerRow } from "./components/row/SchedulerRow";
+import { getDefaultDivisions } from "./logic/getDefaultDivisions";
+import { hoursBetween } from "./logic/getEventSizes";
+import { getLinesByDivisions } from "./logic/getLinesByDivisions";
+import { separateEventsToInnerRows } from "./logic/separateEventsToInnerRows";
+import { sortByCategoryAndTitle } from "./logic/sortByCategoryAndTitle";
+import { getWeekendLinesByDatesVisible } from "./logic/WeekendCalc";
+import { OnClickUtc, UpdateApi } from "./NewSchedulerUiEvents";
+import { SchedulerPresenter } from "./SchedulerPresenter";
+import styles from "./styles/new-scheduler.module.css";
+const getNow = (isUtc) => {
+    let now = new Date();
+    if (!isUtc) {
+        now = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
+    }
+    return now;
+};
+const rowsHeight = 1.75; // rem
+export const Scheduler = (props) => {
+    const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, } = props;
+    const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
+    const rows = useOrderCategory === false
+        ? props.rows
+        : props.rows.sort((a, b) => sortByCategoryAndTitle(a, b, orderCategories));
+    const instanceRef = useRef(null);
+    // const rowHeaderWidth = "180px";
+    const { selectedDate, visibleDays, isUtc, isHeaderVisible, visibleRows: stateVisibleRows } = props.state;
+    const events = eventsState.filter((event) => {
+        const lastDayOfScheduler = moment(selectedDate).add(visibleDays, "days");
+        return (moment(event.endDate).isAfter(selectedDate) &&
+            moment(event.startDate).isBefore(lastDayOfScheduler));
+    });
+    useEffect(() => {
+        instanceRef.current?.resetAfterIndex(0);
+    }, [orderCategories, props.rows.length, events]);
+    const notEmptyRows = stateVisibleRows ?? rows.length;
+    const visibleRows = height(events, rows, notEmptyRows);
+    const totalHours = visibleDays * 24;
+    const [timeLinePercentage, setTimeLinePercentage] = useState(0);
+    const header = {
+        content: headerContent,
+        divisions: getDefaultDivisions(visibleDays, selectedDate),
+        visibleDays: visibleDays,
+        width: rowHeaderWidth,
+        selectedDate,
+        onEvent,
+        timeLinePercentage: timeLinePercentage,
+        isUtc: isUtc
+    };
+    const evenColor = "var(--cw-color-surface-container-low)";
+    const oddColor = "var(--cw-color-surface-container)";
+    const schedulerContentHeight = rowsHeight * visibleRows;
+    const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
+    const divisionLines = getLinesByDivisions(header.divisions, visibleDays);
+    // Timeline percentage calculation
+    useEffect(() => {
+        const updateTimeLinePercentage = () => {
+            const percentage = (hoursBetween(selectedDate, getNow(isUtc)) * 100) / totalHours;
+            setTimeLinePercentage(percentage);
+        };
+        updateTimeLinePercentage();
+        const interval = setInterval(updateTimeLinePercentage, 10_000);
+        return () => clearInterval(interval);
+    }, [selectedDate, isUtc, totalHours]);
+    // Memoized Row Component
+    const Row = React.memo(({ index, style }) => {
+        const row = rows[index];
+        const rowColor = groupRowColors
+            ? Math.floor(index / 2) % 2 === 0 ? evenColor : oddColor
+            : index % 2 === 0 ? evenColor : oddColor;
+        const header = {
+            value: row,
+            width: rowHeaderWidth,
+            onEvent: onEvent,
+        };
+        return (_jsx("div", { style: {
+                ...style,
+                backgroundColor: rowColor
+            }, children: _jsx(SchedulerRow, { events: events.filter((it) => it.rowId === row.rowId), backgroundEvents: backgroundEvents.filter((it) => it.rowId === row.rowId), rowHeader: header, EventComp: EventComp, BackgroundEventComp: BackgroundEventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, rowHeightInRem: rowsHeight, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }, row.rowId));
+    });
+    const getItemSize = useCallback((index) => {
+        const row = rows[index];
+        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
+        const innerRows = separateEventsToInnerRows(filteredEvents);
+        const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
+        const pixelsInRem = 16;
+        return rowsNumber * rowsHeight * pixelsInRem;
+    }, [rows, events]);
+    // Render
+    return (_jsxs("div", { id: id, style: {
+            position: "relative",
+            height: `${schedulerContentHeight + 4}rem`,
+            overflowY: "auto",
+            scrollbarWidth: "thin",
+        }, children: [isHeaderVisible && (_jsx("div", { style: {
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1,
+                }, children: _jsx(SchedulerHeader, { ...header }) })), _jsx(List, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles["hide-scrollbar"], children: Row })] }));
+};
+const height = (events, rows, rowsNumber) => {
+    const selectedRows = rows.slice(0, rowsNumber);
+    const flatMapped = selectedRows.flatMap(row => {
+        const newEvents = events.filter(it => it.rowId === row.rowId);
+        const innerRows = separateEventsToInnerRows(newEvents);
+        return innerRows.length > 0 ? innerRows : [[]];
+    });
+    return flatMapped.length;
+};
+//@ts-ignore
+const _preview = () => {
+    const { state, resources, events, backgroundEvents, onEvent } = SchedulerPresenter();
+    return (_jsxs("div", { children: [_jsx("button", { onClick: (_) => onEvent(new UpdateApi()), children: "update" }), _jsx("button", { onClick: (_) => onEvent(new OnClickUtc()), children: state.isUtc ? "set Local" : "set UTC" }), _jsx(Scheduler, { id: "test", state: state, header: { title: "Flights", classification: "ACFT" }, rows: resources, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: DefaultRowHeader, events: events, backgroundEvents: backgroundEvents, contextMenuItems: [] })] }));
+};
+export default Scheduler;

package/dist/src/components/custom/scheduler-new/presentation/NewSchedulerUiEvents.js

@@ -0,0 +1,118 @@
+export class OnClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnRangeClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnMultiClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDoubleClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDragEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDropEvent {
+    id;
+    date;
+    constructor(id, date) {
+        this.id = id;
+        this.date = date;
+    }
+}
+export class OnDropCtrlEvent {
+    id;
+    date;
+    constructor(id, date) {
+        this.id = id;
+        this.date = date;
+    }
+}
+export class OnClickRowEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnDoubleClickRowEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnRightClickEvent {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnStartClickHeaderEvent {
+    date;
+    constructor(date) {
+        this.date = date;
+    }
+}
+export class OnEndClickHeaderEvent {
+    date;
+    constructor(date) {
+        this.date = date;
+    }
+}
+export class OnRightClickRow {
+    id;
+    date;
+    constructor(id, date) {
+        this.id = id;
+        this.date = date;
+    }
+}
+export class OnLeftDragStart {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnRightDragStart {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class OnClickRowHeader {
+    id;
+    constructor(id) {
+        this.id = id;
+    }
+}
+export class UpdateApi {
+    constructor() {
+    }
+}
+export class OnClickUtc {
+    constructor() {
+    }
+}
+export class OnClickContextMenu {
+    id;
+    clickedMenu;
+    constructor(id, clickedMenu) {
+        this.id = id;
+        this.clickedMenu = clickedMenu;
+    }
+}

package/dist/src/components/custom/scheduler-new/presentation/SchedulerPresenter.js

@@ -0,0 +1,166 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { when } from "../../../../common/functions/dsl/UiEventDSL";
+import { CwIcon } from "../../../display/graphics/icon/CwIcon";
+import { getListOfNumbers, getRandomEvents } from "./helpers";
+import { eventIsVisible } from "./logic/eventIsVisible";
+import { getEventSizes } from "./logic/getEventSizes";
+import { OnClickEvent, OnClickRowEvent, OnClickRowHeader, OnClickUtc, OnDoubleClickEvent, OnDragEvent, OnDropCtrlEvent, OnDropEvent, OnLeftDragStart, OnRightClickEvent, OnRightClickRow, OnRightDragStart, UpdateApi, } from "./NewSchedulerUiEvents";
+export const eventToUiState = (it, selectedDate, visibleDays, tooltip) => {
+    const { left, width } = getEventSizes(selectedDate, visibleDays, it.startDate, it.endDate);
+    const eventState = {
+        ...it,
+        left,
+        width,
+        tooltip: tooltip,
+        selected: false,
+        isResizable: false,
+        isDraggable: false,
+    };
+    return eventState;
+};
+export const SchedulerPresenter = () => {
+    const [events, setEvents] = useState([]);
+    const [backgroundEvents, setBackgroundEvents] = useState([]);
+    const [uiState, setUiState] = useState(() => {
+        const visibleDays = 1;
+        const selectedDate = new Date("2024-12-03");
+        const isHeaderVisible = true;
+        return {
+            isUtc: false,
+            selectedDate: selectedDate,
+            isHeaderVisible: isHeaderVisible,
+            visibleDays: visibleDays,
+            rowsHeight: 2,
+            visibleRows: 8,
+        };
+    });
+    const [resources, setResources] = useState([]);
+    const selectedEventRef = useRef("");
+    useEffect(() => {
+        updateDataFromApi();
+    }, []);
+    const updateDataFromApi = () => {
+        const rows = 1;
+        // api call here to events
+        const apiEvents = getListOfNumbers(rows).flatMap((e) => {
+            return getRandomEvents(uiState.selectedDate, uiState.visibleDays * 3, e);
+        });
+        const eventsWithSizes = apiEvents.map((it) => {
+            return eventToUiState(it, uiState.selectedDate, uiState.visibleDays, _jsxs("div", { children: [it.startDate.getHours() + ":" + it.startDate.getMinutes(), " -", it.endDate.getHours() + ":" + it.endDate.getMinutes()] }));
+        });
+        const visibleEvents = eventsWithSizes.filter((event) => {
+            return eventIsVisible(event.startDate, event.endDate, uiState.selectedDate, uiState.visibleDays);
+        });
+        setEvents(visibleEvents);
+        const apiBackgroundEvents = getListOfNumbers(1).map((e) => {
+            const backgroundEvent = {
+                id: e.toString(),
+                rowId: e.toString(),
+                color: "orange",
+                isResizable: false,
+                isDraggable: false,
+                width: 100 / uiState.visibleDays,
+                name: "Birthday",
+                icons: _jsx(CwIcon, { iconId: "house", style: { padding: "0.5rem" } }, "cosa"),
+                startDate: new Date(),
+                left: 0,
+                endDate: new Date(),
+                isVisible: true,
+                selected: false,
+            };
+            return backgroundEvent;
+        });
+        setBackgroundEvents(apiBackgroundEvents);
+        // api call here to rows
+        const apiRows = getListOfNumbers(rows).map((e) => {
+            return {
+                resourceId: e.toString(),
+                title: "JAC" + e,
+            };
+        });
+        const headerProps = apiRows.map((row) => {
+            return {
+                rowId: row.resourceId,
+                title: row.title,
+            };
+        });
+        setResources(headerProps);
+    };
+    const onEvent = (event) => {
+        when(event)
+            .case(OnClickEvent, (event) => {
+            console.log("onClick event: " + event.id);
+        })
+            .case(OnDoubleClickEvent, (event) => {
+            const eventData = resources
+                .map((resource) => {
+                const element = events
+                    .filter((it) => {
+                    return it.rowId === resource.rowId;
+                })
+                    .find((it) => it.id == event.id);
+                return element;
+            })
+                .filter((it) => it !== undefined)[0];
+            console.log("found", eventData?.startDate, eventData?.endDate);
+        })
+            .case(OnDragEvent, (event) => {
+            console.log("onDrag event: " + event.id);
+            selectedEventRef.current = event.id;
+            console.log("selectedEvent set to: " + selectedEventRef.current);
+        })
+            .case(OnDropEvent, (event) => {
+            console.log("onDrop event: " + selectedEventRef.current + " to row: " + event.id);
+            setEvents((prevEvents) => {
+                // Find the index of the event to be updated
+                const eventIndex = prevEvents.findIndex((e) => e.id === selectedEventRef.current);
+                // If event is found, create a new array with the updated event
+                const updatedEvents = [...prevEvents];
+                updatedEvents[eventIndex] = {
+                    ...updatedEvents[eventIndex],
+                    rowId: event.id,
+                };
+                return updatedEvents;
+            });
+            console.log("drop on");
+            selectedEventRef.current = ""; // Reset the selected event ref
+        })
+            .case(OnDropCtrlEvent, (event) => {
+            alert(`Clicked row is ${event.id}`);
+        })
+            .case(OnClickRowEvent, (event) => {
+            alert(`Clicked row is ${event.id}`);
+        })
+            .case(OnRightClickEvent, (event) => {
+            alert(`RightClick event ${event.id}`);
+        })
+            .case(OnRightClickRow, (event) => {
+            alert(`RightClick row ${event.id}`);
+        })
+            .case(OnLeftDragStart, (event) => {
+            alert(`Start left Drag ${event.id}`);
+        })
+            .case(OnRightDragStart, (event) => {
+            alert(`Start Right Drag ${event.id}`);
+        })
+            .case(UpdateApi, () => {
+            updateDataFromApi();
+        })
+            .case(OnClickRowHeader, (event) => {
+            console.log(`Clicked row ${event.id}`);
+        })
+            .case(OnClickUtc, () => {
+            setUiState((old) => {
+                return { ...old, isUtc: !old.isUtc };
+            });
+        });
+    };
+    return {
+        state: uiState,
+        resources: resources,
+        events,
+        backgroundEvents,
+        onEvent: onEvent,
+    };
+};

package/dist/src/components/custom/scheduler-new/presentation/components/header/HeaderDivision.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import styles from "../../styles/scheduler-header.module.css";
+export const SchedulerHeaderDivision = ({ topDivisions, bottomDivisions, classification, topWidth, startDate, endDate }) => {
+    const isToday = () => {
+        if (!startDate)
+            return false;
+        const today = moment();
+        if (endDate) {
+            return today.isBetween(startDate, endDate, 'day', '[]');
+        }
+        return today.isSame(startDate, 'day');
+    };
+    return (_jsxs("div", { style: {
+            width: topWidth,
+            cursor: "pointer"
+        }, children: [_jsx("div", { className: `${styles["scheduler-dates"]} ${isToday() ? styles["current-day"] : ""}`, children: _jsx("span", { children: topDivisions }) }), _jsx("div", { style: { display: "flex", justifyContent: "space-between", flex: 1 }, children: bottomDivisions.map((element) => (_jsx("div", { className: styles["scheduler-hours"], children: _jsx("span", { children: element }) }, classification + element + topDivisions))) })] }));
+};
+export const _preview = () => {
+    const today = new Date();
+    return (_jsx(SchedulerHeaderDivision, { topDivisions: new Date().toLocaleDateString(), bottomDivisions: [
+            new Date(1, 1, 1).toLocaleDateString(),
+            new Date(1, 2, 3).toLocaleDateString(),
+            new Date(2, 2, 2).toLocaleDateString(),
+        ], classification: "test", startDate: today, endDate: today }));
+};

package/dist/src/components/custom/scheduler-new/presentation/components/header/HeaderTitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "../../styles/scheduler-header.module.css";
+export const HeaderTitle = ({ title, dividerText, width }) => {
+    return (_jsxs("div", { className: styles["scheduler-header-title"], style: { width: width }, children: [_jsx("div", { children: _jsx("h5", { children: title }) }), _jsx("div", { children: _jsx("span", { children: dividerText }) })] }));
+};
+export const _preview = () => {
+    return _jsx(HeaderTitle, { title: "Test title", dividerText: "Divider test", width: 5 });
+};

package/dist/src/components/custom/scheduler-new/presentation/components/header/SchedulerHeader.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { dateFromPercentage } from "../../logic/dateFromPercentage";
+import { getPercentageFromMouseEvent } from "../../logic/getPercentageFromMouseEvent";
+import { OnEndClickHeaderEvent, OnStartClickHeaderEvent } from "../../NewSchedulerUiEvents";
+import styles from "../../styles/scheduler-header.module.css";
+import { TimeLine } from "../timeline/TimeLine";
+import { SchedulerHeaderDivision } from "./HeaderDivision";
+import { HeaderTitle } from "./HeaderTitle";
+export const SchedulerHeader = ({ content, divisions, visibleDays, selectedDate, width, onEvent, timeLinePercentage, isUtc }) => {
+    const topWidth = (100 / visibleDays);
+    const { title, classification } = content;
+    return (_jsxs("div", { style: { display: "flex" }, children: [_jsx(HeaderTitle, { title: title, dividerText: classification, width: width }), _jsxs("div", { className: styles["scheduler-header-divisions"], style: { flex: 1, display: "flex", position: "relative" }, onMouseDown: (e) => {
+                    e.preventDefault();
+                    const clickPercentage = getPercentageFromMouseEvent(e);
+                    const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
+                    onEvent(new OnStartClickHeaderEvent(date));
+                }, onMouseUp: (e) => {
+                    e.preventDefault();
+                    const clickPercentage = getPercentageFromMouseEvent(e);
+                    const date = dateFromPercentage(selectedDate, visibleDays, clickPercentage);
+                    onEvent(new OnEndClickHeaderEvent(date));
+                }, children: [divisions.map((day) => {
+                        const thisTopWidth = visibleDays > 15
+                            ? topWidth * day.bottom.length
+                            : topWidth;
+                        const dateStr = day.startDate ? moment(day.startDate) : moment(day.top, "DD.MM.YYYY");
+                        const startDate = dateStr.toDate();
+                        const endDate = day.endDate ? moment(day.endDate).toDate() : undefined;
+                        return (_jsx(SchedulerHeaderDivision, { topDivisions: day.top, bottomDivisions: day.bottom, classification: classification, topWidth: thisTopWidth + "%", startDate: startDate, endDate: endDate }, day.top + classification));
+                    }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (_jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "50%", height: "50%", isHeader: true, isUtc: isUtc }))] })] }));
+};
+export const _preview = () => {
+    const header = {
+        width: 100,
+        content: {
+            title: "Flights",
+            classification: "Aircraft/Time",
+        },
+        isUtc: true,
+        divisions: [
+            {
+                top: "Aug 21",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
+                startDate: new Date(2024, 7, 21), // Mes es 0-based, así que 7 es Agosto
+                endDate: new Date(2024, 7, 21)
+            },
+            {
+                top: "Aug 22",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"],
+                startDate: new Date(2024, 7, 22),
+                endDate: new Date(2024, 7, 22)
+            },
+            /*{
+                top: "Aug 23",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 24",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 25",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 26",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 27",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            },
+            {
+                top: "Aug 28",
+                bottom: ["12am", "3am", "6am", "9am", "12pm", "3pm", "6pm", "9pm"]
+            }*/
+        ],
+        visibleDays: 2,
+        selectedDate: new Date(),
+        timeLinePercentage: 50,
+        onEvent: () => {
+        }
+    };
+    return _jsx(SchedulerHeader, { ...header });
+};

package/dist/src/components/custom/scheduler-new/presentation/components/header/SchedulerHeaderState.js

@@ -0,0 +1 @@
+export {};