@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.1.7

package/dist/src/components/custom/scheduler/CwSchedulerComp.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { Component } from "react";
+import { ResourcesTitleList } from "./components/resources_title_list/ResourcesTitleList";
+import { SchedulerContentArea } from "./components/scheduler_content_area/SchedulerContentArea";
+import { SchedulerHeader } from "./components/scheduler_header/SchedulerHeader";
+import { addMinutesToDateFromPx } from "./logic/dates/addMinutesToDateFromPx";
+import { daysBetweenTwoDates } from "./logic/dates/daysBetweenTwoDates";
+import { daysBetweenTwoDatesIncludingBoth } from "./logic/dates/daysBetweenTwoDatesWithoutCeil";
+import { getUtcToday } from "./logic/dates/getUtcToday";
+import { calculateDivisions } from "./logic/divisions/calculateDivisions";
+import { filterEvents } from "./logic/filtering/filterEvents";
+import { filterResources } from "./logic/filtering/filterResources";
+import { heightScheduler } from "./logic/pixels/heightScheduler";
+import { getEventsInInnerRows } from "./logic/ui/getEventsOfResource";
+import { getTimeHeaders } from "./logic/ui/getTimeHeaders";
+export class CwScheduler extends Component {
+    contentArea;
+    calculateMaxPx = () => {
+        const mainElement = document.body;
+        const mainRect = mainElement.getBoundingClientRect();
+        return Math.floor(mainRect.width - 190);
+    };
+    constructor(props) {
+        super(props);
+        const maxPx = this.calculateMaxPx();
+        const timeHeaders = getTimeHeaders(props.startDate, props.endDate);
+        const dayPx = maxPx / Math.floor(daysBetweenTwoDates(props.startDate, props.endDate));
+        const hourPx = dayPx / 24;
+        const minutePx = dayPx / 1440;
+        window?.addEventListener("resize", this.handleResize);
+        const divisions = calculateDivisions(this.props.startDate, this.props.endDate);
+        const divisionsLeftPx = timeHeaders
+            .filter((_, index) => {
+            return index != 0 && index % (24 / divisions) == 0;
+        })
+            .map((date) => {
+            const daysDiff = daysBetweenTwoDatesIncludingBoth(date, props.startDate);
+            const pixels = daysDiff * 24 * hourPx;
+            return pixels;
+        });
+        this.state = {
+            maxPx: maxPx,
+            dayPx: dayPx,
+            hourPx: hourPx,
+            minutePx: minutePx,
+            timeHeaders: timeHeaders,
+            divisionsLeftPx: divisionsLeftPx,
+            eventHeight: 30,
+            resources: props.resources,
+            lineStyle: 0,
+            nowUtc: getUtcToday(),
+            division: divisions,
+            divisionType: "",
+            pinnedResources: props.pinnedResources ? props.pinnedResources : [],
+            selectedEvents: [],
+            showConsoleLogs: false, // Change to false to not show the console.log(...)
+        };
+    }
+    handleResize = () => {
+        const maxPx = this.calculateMaxPx();
+        const days = Math.floor(daysBetweenTwoDates(this.props.startDate, this.props.endDate));
+        const dayPx = maxPx / days;
+        const hourPx = dayPx / 24;
+        const updated = { ...this.state, maxPx: maxPx, hourPx: hourPx, dayPx: dayPx };
+        this.setState(updated);
+    };
+    objectsEqual = (o1, o2) => {
+        Object.keys(o1).length === Object.keys(o2).length && Object.keys(o1).every((p) => o1[p] === o2[p]);
+    };
+    objectsEqualDeep = (o1, o2) => typeof o1 === "object" && Object.keys(o1).length > 0
+        ? Object.keys(o1).length === Object.keys(o2).length &&
+            Object.keys(o1).every((p) => this.objectsEqual(o1[p], o2[p]))
+        : o1 === o2;
+    arraysEqual = (a1, a2) => a1.length === a2.length && a1.every((o, idx) => this.objectsEqualDeep(o, a2[idx]));
+    componentWillReceiveProps(_nextProps) {
+        if (this.state.showConsoleLogs) {
+            console.log("Schedule - componentWillReceiveProps, start: ", moment(new Date()).toString());
+            console.log("Schedule - componentWillReceiveProps - has changes, start: ", moment(new Date()).toString());
+        }
+        const dateChange = _nextProps.startDate.toISOString() !== this.props.startDate.toISOString() ||
+            _nextProps.endDate.toISOString() !== this.props.endDate.toISOString();
+        if (dateChange) {
+            const startDate = _nextProps.startDate;
+            const endDate = _nextProps.endDate;
+            const maxPx = this.calculateMaxPx();
+            const timeHeaders = getTimeHeaders(startDate, endDate);
+            const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
+            const dayPx = maxPx / days;
+            const hourPx = dayPx / 24;
+            const minutePx = dayPx / 1440;
+            const now = getUtcToday();
+            const isInDateRange = now >= startDate && now <= endDate && this.contentArea !== undefined;
+            const lineStyle = isInDateRange ? daysBetweenTwoDatesIncludingBoth(startDate, now) * dayPx : 0;
+            const divisions = calculateDivisions(startDate, endDate);
+            const divisionsLeftPx = timeHeaders
+                .filter((_, index) => {
+                return index != 0 && index % (24 / divisions) == 0;
+            })
+                .map((date) => {
+                const daysDiff = daysBetweenTwoDatesIncludingBoth(date, startDate);
+                const pixels = daysDiff * dayPx;
+                return pixels;
+            });
+            this.setState({
+                maxPx: maxPx, // window.screen.width * 0.9,
+                dayPx: dayPx,
+                hourPx: hourPx,
+                minutePx: minutePx,
+                timeHeaders: timeHeaders,
+                divisionsLeftPx: divisionsLeftPx,
+                resources: this.getNewResources(_nextProps, dayPx),
+                lineStyle: lineStyle,
+                nowUtc: now,
+                division: divisions,
+                divisionType: "",
+                pinnedResources: this.props.pinnedResources ?? [],
+            });
+            if (this.state.showConsoleLogs) {
+                console.log("Schedule - componentWillReceiveProps - print on schedule, end: ", moment(new Date()).toString());
+                console.log("Schedule - componentWillReceiveProps, end: ", moment(new Date()).toString());
+            }
+            return;
+        }
+        const areSameEvents = this.arraysEqual(_nextProps.events, this.props.events);
+        const areSameRows = this.arraysEqual(_nextProps.resources, this.props.resources);
+        if (!areSameEvents || !areSameRows) {
+            const startDate = _nextProps.startDate;
+            const endDate = _nextProps.endDate;
+            const maxPx = this.calculateMaxPx();
+            const days = Math.floor(daysBetweenTwoDates(startDate, endDate));
+            const dayPx = maxPx / days;
+            this.setState({
+                resources: this.getNewResources(_nextProps, dayPx),
+            });
+            return;
+        }
+    }
+    getNewResources = (_nextProps, dayPx) => {
+        const mappedEvents = filterEvents(_nextProps.events, _nextProps.startDate, _nextProps.endDate, this.props.id, this.props.module)
+            .filter((event) => {
+            const outOfRange = event.end <= this.props.startDate || event.start >= this.props.endDate;
+            return !outOfRange;
+        });
+        const resources = filterResources(this.props.module, this.props.resourceName, _nextProps.resources, this.props.groupByFunction, _nextProps.endDate, _nextProps.startDate, this.props.id);
+        const newResources = resources
+            .map((resource) => {
+            return {
+                ...resource,
+                events: mappedEvents.filter((event) => event.resourceId === resource.id),
+            };
+        })
+            .map((resource) => {
+            const tops = getEventsInInnerRows(resource, this.state.eventHeight, dayPx, _nextProps.startDate);
+            const height = tops.length === 0 ? this.state.eventHeight : tops.length * this.state.eventHeight;
+            let flatMapEvents = [];
+            for (let h = 0; h < tops.length; h++) {
+                flatMapEvents = flatMapEvents.concat(tops[h]);
+            }
+            return {
+                ...resource,
+                maxTop: height,
+                events: flatMapEvents,
+            };
+        });
+        return newResources;
+    };
+    handleOnClickContextMenuResourceScheduler = (_clickEvent, _resource) => {
+        let datetime = new Date();
+        const _ca = this.contentArea;
+        if (_clickEvent.domEvent.currentTarget !== undefined) {
+            const leftPos = _clickEvent.domEvent.currentTarget.parentElement.getBoundingClientRect().left -
+                (_ca?.getBoundingClientRect()?.left ?? 0) -
+                window.scrollX;
+            datetime = addMinutesToDateFromPx(this.props.startDate, leftPos, this.state.minutePx);
+        }
+        if (this.props.scheduler_handleOnClickContextMenuResource) {
+            this.props.scheduler_handleOnClickContextMenuResource(datetime, _resource, _clickEvent.key, this.props.id);
+        }
+    };
+    handleCrewPinning = (resource, text) => {
+        if (this.props.scheduler_handlePinned) {
+            this.props.scheduler_handlePinned.call(this.props.parent, resource.id, text, this.props.id);
+        }
+    };
+    render() {
+        const isInDateRange = this.state.nowUtc >= this.props.startDate &&
+            this.state.nowUtc <= this.props.endDate &&
+            this.contentArea !== undefined;
+        const showTimeline = isInDateRange && this.state.lineStyle < this.state.maxPx;
+        const isPinnedTable = this.props.id.toLowerCase().includes("pinned");
+        const schedulerHeight = heightScheduler(this.state.resources, this.props.height, this.props.id === "crewAssignmentsScheduler");
+        return (_jsx("div", { id: this.props.id, style: {
+                maxHeight: isPinnedTable ? "auto" : schedulerHeight,
+            }, className: this.state.resources.length > 0 ? "cwellt_tb_con" : "cwellt_tb_con cw_tb_con_emptyValues", children: _jsxs("table", { id: "cwelltTableScheduler", children: [this.props.id !== "crewAssignmentsScheduler" && (_jsx(SchedulerHeader, { timelineProps: {
+                            maxPx: this.state.maxPx,
+                            hoursList: this.state.timeHeaders,
+                            pxPerHour: this.state.hourPx,
+                            startDate: this.props.startDate,
+                            endDate: this.props.endDate,
+                            headerName: this.props.resourceName,
+                        }, descriptionColumn: this.props.descriptionColumn })), _jsx("tbody", { style: {
+                            width: this.state.maxPx + 150,
+                            maxHeight: isPinnedTable ? "auto" : schedulerHeight,
+                        }, className: isPinnedTable ? "fc-body cw-fc-body-pinned" : "fc-body", children: _jsxs("tr", { className: "fc_body_row", children: [_jsx(ResourcesTitleList, { resources: this.state.resources, canBePinned: this.props.canBePinned ?? false, includesPinned: this.props.id.toLowerCase().includes("pinned"), onCrewPinning: this.handleCrewPinning, onClickResourceContextMenu: (_e, resource) => {
+                                        if (this.props.scheduler_handleOnClickResourceContextMenu) {
+                                            this.props.scheduler_handleOnClickResourceContextMenu(_e, resource);
+                                        }
+                                    }, ResourceTitleComponent: this.props.resourceComp }), _jsx("td", { className: "dividerArea" }), _jsx(SchedulerContentArea, { now: this.state.nowUtc, showTimeline: showTimeline, timeSeparatorLeftPx: this.state.divisionsLeftPx, timeLineLeftPx: this.state.lineStyle, resources: this.state.resources, contextMenuContents: this.props.resourceContextMenuContents, scheduler: this, onEmptyClick: this.props.scheduler_handleEmptyClick, setContentArea: (n) => (this.contentArea = n), onClickContextMenu: this.handleOnClickContextMenuResourceScheduler })] }) })] }) }));
+    }
+}

package/dist/src/components/custom/scheduler/CwSuperSchedulerComp.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _ from "lodash";
+import * as React from "react";
+import { CwButton } from "../../control/action/button/CwButton";
+import { CwScheduler } from "./CwSchedulerComp";
+let topsCounter = 0;
+export class CwSuperScheduler extends React.Component {
+    constructor(Props) {
+        super(Props);
+        this.state = {
+            topsCalculated: 0,
+            height: 50,
+            dataConfig: this.props.dataConfig ? this.props.dataConfig : undefined,
+            pinnedResources: []
+        };
+    }
+    componentDidUpdate(_previousProps, _previousState) {
+        if (this.props.pinnedResources !== _previousProps.pinnedResources) {
+            let returnedTops = 0;
+            let returnedHeight = 50;
+            let data;
+            if (this.props.pinnedResources) {
+                let pinned = [...this.props.pinnedResources];
+                pinned = _.uniq(pinned);
+                for (let i = 0; i < pinned.length; i++) {
+                    data = this.returnDynamicHeight(pinned[i], returnedTops);
+                    returnedTops = data.topsCalculated;
+                    returnedHeight = data.height;
+                }
+                this.setState({
+                    topsCalculated: returnedTops,
+                    height: returnedHeight !== 50 ? 80 + returnedHeight : 50,
+                    pinnedResources: this.props.pinnedResources
+                });
+            }
+        }
+    }
+    scheduler_handleCblEventClick = (cblEvent, schedulerId) => {
+        this.props.scheduler_handleCblEventClick(cblEvent, schedulerId);
+    };
+    scheduler_handleCblEventClickRight = (cblEvent, schedulerId) => {
+        if (this.props.scheduler_handleCblEventClickRight) {
+            this.props.scheduler_handleCblEventClickRight(cblEvent, schedulerId);
+        }
+    };
+    scheduler_handleCblEventDoubleClick = (cblEvent, schedulerId) => {
+        this.props.scheduler_handleCblEventDoubleClick(cblEvent, schedulerId);
+    };
+    scheduler_handlePinnedClickMultipleIds = (resIds, schedulerId, requestString) => {
+        this.props.scheduler_handlePinningOfResources(resIds, "", schedulerId, requestString);
+    };
+    scheduler_handlePinnedClick = (resId, text, schedulerId) => {
+        const array = new Array();
+        array.push(resId);
+        this.props.scheduler_handlePinningOfResources(array, text, schedulerId, "resources");
+    };
+    returnDynamicHeight(pinned, topsCalculated) {
+        let height = 100;
+        let maxTop = 0;
+        const eventHeight = 30;
+        const tops = new Array();
+        tops[0] = new Array();
+        const diffDates = this.props.endDate.getTime() - this.props.startDate.getTime();
+        const diffDays = diffDates / (1000 * 3600 * 24);
+        const dateToFilter = new Date(this.props.startDate.getTime());
+        dateToFilter.setDate(dateToFilter.getDate() + diffDays);
+        let events = this.props.pinnedEvents !== undefined ? this.props.pinnedEvents : new Array();
+        events = events
+            .filter(x => pinned === x.resourceId && x.start >= this.props.startDate && x.start <= dateToFilter)
+            .sort((a, b) => {
+            return +new Date(a.start) - +new Date(b.start);
+        });
+        for (let i = 0; i < events.length; i++) {
+            const event = events[i];
+            if (i === 0 || event.isFullHeight) {
+                tops[0].push(event);
+            }
+            else {
+                let found = false;
+                for (let j = 0; j < tops.length && found === false; j++) {
+                    found = this.checkIfSlotAvailable(tops[j], event);
+                    if (found === true || event.isFullHeight) {
+                        tops[j].push(event);
+                    }
+                }
+                if (found === false) {
+                    maxTop++;
+                    tops[maxTop] = new Array();
+                    tops[maxTop].push(event);
+                }
+            }
+        }
+        for (let h = 0; h < tops.length; h++) {
+            if (tops.length === 0) {
+                height = 100;
+            }
+            else {
+                height = (topsCalculated + tops.length) * eventHeight;
+            }
+        }
+        topsCounter = topsCounter + tops.length;
+        return {
+            topsCalculated: topsCalculated + tops.length,
+            height: height
+        };
+    }
+    checkIfSlotAvailable(array, event) {
+        let found = false;
+        if (array[array.length - 1].end <= event.start || array[array.length - 1].isFullHeight) {
+            found = true;
+        }
+        return found;
+    }
+    handleOnClickContextMenuResource = (date, resource, key, schedulerId) => {
+        let url = "";
+        switch (key) {
+            case "showReserves": {
+                // CrewControl
+                if (this.props.module === "CrewControl") {
+                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfReserve";
+                }
+                // CrewScheduling
+                if (this.props.module === "CrewScheduling") {
+                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfReserve";
+                }
+                const requestOptions = {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        from: this.dateUTCString(this.props.startDate),
+                        to: this.dateUTCString(this.props.endDate),
+                        acftCategories: [],
+                        functions: [],
+                        clickedDate: this.dateUTCString(date),
+                        airportSelected: this.props.airportSelected
+                    })
+                };
+                if (this.state.dataConfig) {
+                    fetch(this.state.dataConfig + url, requestOptions)
+                        .then(response => response.json())
+                        .then(res => {
+                        if (res.length > 0) {
+                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Reserves");
+                        }
+                        else {
+                            alert("No Reserves");
+                        }
+                    });
+                }
+                break;
+            }
+            case "showStandbys": {
+                // CrewControl
+                if (this.props.module === "CrewControl") {
+                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfStandby";
+                }
+                // CrewScheduling
+                if (this.props.module === "CrewScheduling") {
+                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfStandby";
+                }
+                const requestOptions2 = {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        from: this.dateUTCString(this.props.startDate),
+                        to: this.dateUTCString(this.props.startDate),
+                        acftCategories: [],
+                        functions: [],
+                        clickedDate: this.dateUTCString(date),
+                        airportSelected: this.props.airportSelected
+                    })
+                };
+                if (this.state.dataConfig) {
+                    fetch(this.state.dataConfig + url, requestOptions2)
+                        .then(response => response.json())
+                        .then(res => {
+                        if (res.length > 0) {
+                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Standbys");
+                        }
+                        else {
+                            alert("No Standbys");
+                        }
+                    });
+                }
+                break;
+            }
+            case "showAvailables": {
+                // CrewControl
+                if (this.props.module === "CrewControl") {
+                    url = "/Winops/CrewControl/CrewControlReact/GetCrewIdsOfAvailables";
+                }
+                // CrewScheduling
+                if (this.props.module === "CrewScheduling") {
+                    url = "/Winops/CrewPlanning/CrewPlanning/GetCrewIdsOfAvailables";
+                }
+                const requestOptions3 = {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        from: this.dateUTCString(this.props.startDate),
+                        to: this.dateUTCString(this.props.startDate),
+                        acftCategories: [],
+                        functions: [],
+                        clickedDate: this.dateUTCString(date),
+                        airportSelected: this.props.airportSelected
+                    })
+                };
+                if (this.state.dataConfig) {
+                    fetch(this.state.dataConfig + url, requestOptions3)
+                        .then(response => response.json())
+                        .then(res => {
+                        if (res.length > 0) {
+                            this.scheduler_handlePinnedClickMultipleIds(res, schedulerId, "Availables");
+                        }
+                        else {
+                            alert("No Availables");
+                        }
+                    });
+                }
+                break;
+            }
+            default: {
+                if (this.props.scheduler_handleOnClickContextMenuResource) {
+                    this.props.scheduler_handleOnClickContextMenuResource(date, resource, key);
+                }
+                break;
+            }
+        }
+    };
+    dateUTCString(date) {
+        if (date instanceof Date) {
+            if (date.getFullYear() > 1901)
+                return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes())).toISOString();
+        }
+        return date;
+    }
+    render() {
+        const havePinnedResources = this.state.pinnedResources?.length > 0;
+        const firstSchedulerResources = havePinnedResources
+            ? this.props.resourcesToPin.filter(x => this.state.pinnedResources.includes(x.id))
+            : new Array();
+        const secondSchedulerResources = this.props.resources.filter(x => !this.state.pinnedResources.includes(x.id));
+        const pinnedEvents = this.props.pinnedEvents !== undefined
+            ? this.props.pinnedEvents.filter(x => this.state.pinnedResources.includes(x.resourceId))
+            : new Array();
+        const notPinnedEvents = this.props.events.filter(x => !this.props.pinnedResources?.includes(x.resourceId));
+        return (_jsxs("div", { className: "cwelltSuperScheduler_content", children: [_jsx(CwScheduler, { id: "crewPinnedScheduler", events: pinnedEvents, resources: firstSchedulerResources, height: this.state.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.props.scheduler_handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: false, scheduler_handlePinned: this.scheduler_handlePinnedClick, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, groupByFunction: this.props.groupByFunction }), havePinnedResources && (_jsx("div", { style: { padding: "0.5rem" }, children: _jsx(CwButton, { text: "Clear", onClick: () => {
+                            this.props.scheduler_handleClearPinnedOnParent();
+                        } }) })), _jsx(CwScheduler, { id: "crewAssignmentsScheduler", events: notPinnedEvents, resources: secondSchedulerResources, height: this.props.height, startDate: this.props.startDate, endDate: this.props.endDate, scheduler_handleCblEventClick: this.props.scheduler_handleCblEventClick, scheduler_handleCblEventClickRight: this.props.scheduler_handleCblEventClickRight, scheduler_handleCblEventDoubleClick: this.props.scheduler_handleCblEventDoubleClick, scheduler_handleOnDropCblEventsOnResource: this.props.scheduler_handleOnDropCblEventsOnResource, parent: this.props.parent, cblEventComp: this.props.cblEventComp, scheduler_handleOnClickEventContextMenu: this.props.scheduler_handleOnClickEventContextMenu, resourceComp: this.props.resourceComp, scheduler_handleOnClickContextMenuResource: this.handleOnClickContextMenuResource, resourceContextMenuContents: this.props.resourceContextMenuContents, scheduler_handleDblClickOnResourceInScheduler: this.props.scheduler_handleDblClickOnResourceInScheduler, scheduler_handleEmptyClick: this.props.scheduler_handleEmptyClick, canBePinned: true, scheduler_handlePinned: this.scheduler_handlePinnedClick, scheduler_handleCblEventResize: this.props.scheduler_handleCblEventResize, resourceName: this.props.resourceName, descriptionColumn: this.props.descriptionColumn, scheduler_handleOnClickResourceContextMenu: this.props.scheduler_handleOnClickResourceContextMenu, airportSelected: this.props.airportSelected, module: this.props.module, groupByFunction: this.props.groupByFunction })] }));
+    }
+}
+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/components/EventRender.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CblDragAndDrop } from "../state/CblDragAndDrop";
+const BIRTHDATE = 15;
+const NOT_WORKING = 16;
+const REST_TIME = 10;
+const MAX_FLIGHT_DUTY_PERIOD = 11;
+const DUTY_REGULATION = 20;
+const unHandleableEvents = [REST_TIME, MAX_FLIGHT_DUTY_PERIOD, NOT_WORKING, DUTY_REGULATION];
+const getEventStyle = (event, reslTime) => {
+    const baseStyle = {
+        left: event.leftPx,
+        width: event.width,
+        top: event.top,
+        overflow: "hidden",
+        zIndex: event.isFullHeight ? 4 : 5,
+    };
+    if (event.data.eventType === BIRTHDATE) {
+        return {
+            ...baseStyle,
+            height: event.isFullHeight ? "100%" : "auto",
+            marginTop: event.isFullHeight ? -1 * event.top : 0,
+            pointerEvents: "none",
+            borderBottom: "solid 1px rgba(0, 0, 0, 0.4)",
+            backgroundColor: event.data.category.color || "orange",
+            display: "flex",
+            opacity: 0.3,
+            alignItems: "flex-end",
+        };
+    }
+    if ([REST_TIME, MAX_FLIGHT_DUTY_PERIOD, DUTY_REGULATION].includes(event.data.eventType)) {
+        return {
+            ...baseStyle,
+            zIndex: event.isFullHeight ? 4 : 6,
+            marginTop: event.isFullHeight ? -1 * event.top : 0,
+            borderRadius: "0px",
+            backgroundColor: event.data.category.color || "grey",
+            opacity: 0.3,
+            borderBottom: event.data.eventType === DUTY_REGULATION ? "solid 1px rgba(0, 0, 0, 0.4)" : "",
+        };
+    }
+    return {
+        ...baseStyle,
+        height: event.isFullHeight ? "100%" : "auto",
+        marginTop: event.isFullHeight ? -1 * event.top : 0,
+        borderRadius: reslTime <= 0.99 ? "3px" : "5px",
+        minWidth: reslTime <= 1.5 ? "5px" : "",
+        maxWidth: reslTime <= 1.5 ? "25px" : "",
+    };
+};
+export const EventRender = ({ event, schedulerProps }) => {
+    const dateStart = new Date(event.data.start);
+    const dateEnd = new Date(event.data.end);
+    const reslTime = (dateEnd.getTime() - dateStart.getTime()) / 3600000;
+    const eventStyle = getEventStyle(event, reslTime);
+    const onClickEvent = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            e.stopPropagation();
+            const props = schedulerProps;
+            props.scheduler_handleCblEventClick.call(props.parent, event, schedulerProps.id);
+        }
+    };
+    const onRightClickEvent = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            e.stopPropagation();
+            const props = schedulerProps;
+            if (props.scheduler_handleCblEventClickRight) {
+                props.scheduler_handleCblEventClickRight.call(props.parent, event, schedulerProps.id);
+            }
+        }
+    };
+    const safeHandleDragStart = (e, isLeft, isRight) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            handleDragStart(e, isLeft, isRight);
+        }
+    };
+    const handleDragStart = (e, isResizeFromStart, isResizeFromEnd) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            [].forEach.call(document.querySelectorAll(".ant-tooltip"), function (el) {
+                el.style.visibility = "hidden";
+            });
+            // We don't know in which case is necessary
+            if (e.target !== e.currentTarget) {
+                // e.preventDefault();
+                return;
+            }
+            const isResize = isResizeFromStart || isResizeFromEnd;
+            const isAllowed = !event.isReadOnly && (isResize ? event.isResizable : event.isDraggable);
+            if (!isAllowed) {
+                e.preventDefault();
+                return;
+            }
+            const cblDragNDrop = new CblDragAndDrop(schedulerProps.id, null, [event], null, isResizeFromStart, isResizeFromEnd);
+            if (!isResize) {
+                e.dataTransfer.dropEffect = e.ctrlKey ? "copy" : "link";
+            }
+            e.dataTransfer.setData("data", JSON.stringify(cblDragNDrop));
+        }
+    };
+    const handleDoubleClick = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const props = schedulerProps;
+            props.scheduler_handleCblEventDoubleClick.call(props.parent, event, schedulerProps.id);
+        }
+    };
+    const onClickContextMenu = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            const props = schedulerProps;
+            if (props.scheduler_handleOnClickEventContextMenu) {
+                props.scheduler_handleOnClickEventContextMenu(e, event);
+            }
+        }
+    };
+    const renderBirthdayEvent = () => (_jsxs("div", { className: `fc-timeline-event cwellt_timeline_event cwellt_event_bday ${event.selected ? "cblEventSelected" : ""}`, style: eventStyle, children: [_jsx("span", { className: "cwi-icons cwi-birthday", style: { visibility: "visible" } }), event.data.subject && _jsx("span", { style: { lineHeight: "1em" }, children: event.data.subject })] }, event.id));
+    const renderRegularEvent = () => (_jsxs("div", { draggable: ![10, 11, 16, 20, 21].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event " +
+            (event.selected === true ? "cblEventSelected " : "") +
+            (event.data.eventType === REST_TIME ||
+                event.data.eventType === MAX_FLIGHT_DUTY_PERIOD ||
+                event.data.eventType === DUTY_REGULATION
+                ? " cwellt_event_bhnd_appt "
+                : " "), style: eventStyle, onClick: onClickEvent, onContextMenu: onRightClickEvent, onDragStart: (e) => safeHandleDragStart(e, false, false), onDoubleClick: handleDoubleClick, children: [schedulerProps.scheduler_handleCblEventResize &&
+                !event.isReadOnly &&
+                !unHandleableEvents.includes(event.data.eventType) && (_jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, true, false), style: {
+                    position: "absolute",
+                    cursor: "e-resize",
+                    zIndex: 10,
+                    left: "0",
+                    border: "solid 1px rgba(46,49,49,0.5)",
+                }, children: "\u200B" })), _jsx(schedulerProps.cblEventComp, { cblEvent: event, handleOnClickEventContextMenu: onClickContextMenu }, event.id), schedulerProps.scheduler_handleCblEventResize &&
+                !event.isReadOnly &&
+                !unHandleableEvents.includes(event.data.eventType) && (_jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, false, true), style: {
+                    position: "absolute",
+                    right: "0",
+                    cursor: "e-resize",
+                    zIndex: 10,
+                    border: "solid 1px rgba(46,49,49,0.5)",
+                    marginTop: "-25px",
+                }, children: "\u200B" }))] }, event.id));
+    const render = event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent();
+    return render;
+};

package/dist/src/components/custom/scheduler/components/ResourceListRender.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown, Menu } from "antd";
+import { Fragment } from "react";
+import { doubleClickOnResource } from "../logic/state_handle/doubleClickOnResource";
+import { ResourceRender } from "./ResourceRender";
+export const ResourceListRender = ({ resources, schedulerProps, state, contentArea, onClickContextMenu, crewAssignmentSchedulerContextMenu, }) => {
+    return (_jsx(Fragment, { children: resources.map((r, _i) => (_jsx(Dropdown, { placement: "topLeft", dropdownRender: () => {
+                return (_jsx(Menu, { style: { pointerEvents: "auto" }, onClick: (e) => {
+                        onClickContextMenu(e, r);
+                    }, children: crewAssignmentSchedulerContextMenu?.map((m) => (_jsxs(Menu.Item, { children: [_jsx("span", { className: m.icon, style: { color: m.color } }), _jsx("span", { className: "cwellt_contextMenu", children: m.text })] }, m.key))) }));
+            }, trigger: ["contextMenu"], children: _jsx("span", { onDoubleClick: () => doubleClickOnResource(schedulerProps, r), id: schedulerProps.id + "_" + r.id, children: _jsx(ResourceRender, { res: r, schedulerProps: schedulerProps, contentArea: contentArea, state: state, isInViewport: r.isInViewport }, r.id) }) }, r.id))) }));
+};

package/dist/src/components/custom/scheduler/components/ResourceRender.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { EventRender } from "./EventRender";
+import { OnDrop } from "../logic/onDrop/OnDrop";
+import { onDragOver } from "../logic/state_handle/onDragOver";
+const arePropsEqual = (prevProps, nextProps) => {
+    return prevProps.res.events === nextProps.res.events && prevProps.isInViewport === nextProps.isInViewport;
+};
+export const ResourceRender = memo(({ res, schedulerProps, contentArea, state }) => {
+    return (_jsx("div", { style: {
+            backgroundColor: "#F9F8F8",
+            height: res.maxTop,
+            width: "100%",
+            position: "relative",
+            borderBottom: "1px solid rgb(255,255,255)",
+        }, onDragOver: (e) => onDragOver(e), onDrop: (e) => {
+            OnDrop({
+                e,
+                resource: res,
+                id: schedulerProps.id,
+                contentArea,
+                state,
+                schedulerProps,
+            });
+        }, className: "cwellt_divRow_schContent", children: res.events.map((evnt) => (_jsx(EventRender, { event: evnt, schedulerProps: schedulerProps }, evnt.id))) }, res.id));
+}, arePropsEqual);