@cwellt_software/cwellt-reactjs-lib 1.1.4 → 1.1.6

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

@@ -1,113 +0,0 @@
-import moment from "moment";
-import { calculateDivisionsByDays, getHoursFromDivisions } from "./getDivisions";
-export const getDefaultDivisions = (visibleDays, selectedDate) => {
-    if (visibleDays <= 15) {
-        return getDayDivisions(visibleDays, selectedDate);
-    }
-    if (visibleDays <= 30) {
-        return getWeekDivisions(visibleDays, selectedDate);
-    }
-    // from 31 to infinity
-    return getMonthDivisions(visibleDays, selectedDate);
-};
-const getDayDivisions = (visibleDays, selectedDate) => {
-    const divisionsNumber = calculateDivisionsByDays(visibleDays);
-    const divisions = getHoursFromDivisions(divisionsNumber);
-    const calculatedDivision = [];
-    for (let i = 0; i < visibleDays; i++) {
-        const currentDate = moment(selectedDate).add(i, "days");
-        calculatedDivision.push({
-            top: currentDate.format("DD.MM.YYYY"),
-            bottom: divisions,
-            startDate: currentDate.toDate(),
-            endDate: currentDate.toDate()
-        });
-    }
-    return calculatedDivision;
-};
-const getWeekDivisions = (visibleDays, selectedDate) => {
-    const weeks = getWeeksByDays(visibleDays, selectedDate);
-    const divisions = weeks.map((week) => {
-        const days = Array.from({ length: week.days }, (_, i) => moment(week.start).add(i, "days").date().toString());
-        const weekEnd = moment(week.start).add(week.days - 1, "days");
-        const top = days.length > 2
-            ? moment(week.start).format("DD.MM.YYYY") + " - " + moment(week.start).add(week.days - 1, "days").format("DD.MM.YYYY")
-            : moment(week.start).format("DD.MM.YYYY");
-        const division = {
-            top: top,
-            bottom: days,
-            startDate: moment(week.start).toDate(),
-            endDate: weekEnd.toDate()
-        };
-        return division;
-    });
-    return divisions;
-};
-const getMonthDivisions = (visibleDays, selectedDate) => {
-    const months = getMonthsByDays(visibleDays, selectedDate);
-    const divisions = months.map((month) => {
-        const days = Array.from({ length: month.days }, (_, i) => moment(month.start).add(i, "days").date().toString());
-        const monthEnd = moment(month.start).add(month.days - 1, "days");
-        const division = {
-            top: moment(month.start).format("MM.YYYY"),
-            bottom: days,
-            startDate: moment(month.start).toDate(), // Añadir fecha de inicio
-            endDate: monthEnd.toDate()
-        };
-        return division;
-    });
-    return divisions;
-};
-export const getMonthsByDays = (visibleDays, selectedDate) => {
-    if (visibleDays <= 0) {
-        return [];
-    }
-    const month = [];
-    let temporalDay = moment(selectedDate);
-    for (let i = 0; i < visibleDays; i++) {
-        const currentDay = moment(selectedDate).add(i, "days");
-        const isLastLoop = i + 1 === visibleDays;
-        if (isLastLoop) {
-            month.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
-            });
-            break;
-        }
-        if (currentDay.date() === currentDay.daysInMonth()) {
-            month.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
-            });
-            temporalDay = currentDay.add(1, "days");
-        }
-    }
-    return month;
-};
-const SUNDAY = 0;
-export const getWeeksByDays = (visibleDays, selectedDate) => {
-    if (visibleDays <= 0) {
-        return [];
-    }
-    const weeks = [];
-    let temporalDay = moment(selectedDate);
-    for (let i = 0; i < visibleDays; i++) {
-        const currentDay = moment(selectedDate).add(i, "days");
-        const isLastLoop = i + 1 === visibleDays;
-        if (isLastLoop) {
-            weeks.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
-            });
-            break;
-        }
-        if (currentDay.day() === SUNDAY) {
-            weeks.push({
-                start: temporalDay.toDate(),
-                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
-            });
-            temporalDay = currentDay.add(1, "days");
-        }
-    }
-    return weeks;
-};

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

@@ -1,21 +0,0 @@
-import moment from "moment";
-export const calculateDivisionsByDays = (days) => {
-    if (days <= 3) {
-        return 8;
-    }
-    if (days <= 7) {
-        return 3;
-    }
-    return 2;
-};
-export const getHoursFromDivisions = (divisions) => {
-    const hoursInterval = 24 / divisions;
-    const array = [];
-    for (let i = 0; i < divisions; i++) {
-        const newHour = moment(new Date(1, 1, 1))
-            .add(hoursInterval * i, "hours")
-            .format("HH:mm");
-        array.push(newHour);
-    }
-    return array;
-};

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

@@ -1,30 +0,0 @@
-import { eventIsVisible } from "./eventIsVisible";
-export const hoursBetween = (date1, date2) => {
-    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
-    const timeDiff = date2.getTime() - date1.getTime();
-    return timeDiff / oneHourInMillis;
-};
-export const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
-    if (!eventIsVisible(startDate, endDate, schedulerDate, totalDays)) {
-        return {
-            left: 0,
-            width: 0,
-        };
-    }
-    const totalHours = totalDays * 24;
-    const dateString = schedulerDate.toISOString().split('T')[0];
-    const schedulerDateAtZero = new Date(dateString);
-    let startHours = hoursBetween(schedulerDateAtZero, startDate);
-    let durationHours = hoursBetween(startDate, endDate);
-    const startOutOfScheduler = startHours < 0;
-    if (startOutOfScheduler) {
-        durationHours += startHours;
-        startHours = 0;
-    }
-    const left = (startHours / totalHours) * 100;
-    const width = (durationHours * 100) / totalHours;
-    return {
-        left,
-        width,
-    };
-};

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

@@ -1,13 +0,0 @@
-export function getLinesByDivisions(headerDivision, _) {
-    const lines = headerDivision.flatMap((division) => {
-        return division.bottom;
-    });
-    const left = 100 / lines.length;
-    const finalLines = lines.map((_, index) => {
-        return {
-            left: left * index,
-            width: 1,
-        };
-    }).filter((_, index) => index !== 0);
-    return finalLines;
-}

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

@@ -1,7 +0,0 @@
-export function getPercentageFromMouseEvent(event) {
-    const rect = event.currentTarget.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const totalWidth = rect.width;
-    const clickPercentage = x / totalWidth;
-    return clickPercentage;
-}

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

@@ -1,32 +0,0 @@
-const eventsCollide = (event1, event2) => {
-    const eventInsideOther = event1.startDate <= event2.startDate && event1.endDate >= event2.endDate;
-    const eventCollideStart = event1.endDate > event2.startDate && event1.endDate < event2.endDate;
-    const eventCollideEnd = event2.endDate > event1.startDate && event2.endDate < event1.endDate;
-    return eventInsideOther || eventCollideStart || eventCollideEnd;
-};
-// Function to separate events into non-colliding rows
-export const separateEventsToInnerRows = (events) => {
-    const sortedEvents = [...events].sort((a, b) => {
-        const aOrder = a.order ?? Number.MAX_SAFE_INTEGER;
-        const bOrder = b.order ?? Number.MAX_SAFE_INTEGER;
-        if (aOrder !== bOrder) {
-            return aOrder - bOrder; // Prioridad al order si ambos están definidos
-        }
-        return a.startDate.getTime() - b.startDate.getTime();
-    });
-    const rows = [];
-    for (const event of sortedEvents) {
-        let placed = false;
-        for (const row of rows) {
-            if (!row.some((existingEvent) => eventsCollide(existingEvent, event))) {
-                row.push(event);
-                placed = true;
-                break;
-            }
-        }
-        if (!placed) {
-            rows.push([event]);
-        }
-    }
-    return rows;
-};

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

@@ -1,12 +0,0 @@
-export const sortByCategoryAndTitle = (previous, next, orderCategories) => {
-    for (const orderCategory of orderCategories) {
-        const prevOrder = previous[orderCategory];
-        const nextOrder = next[orderCategory];
-        if (prevOrder !== nextOrder) {
-            return prevOrder > nextOrder ? 1 : -1;
-        }
-    }
-    const prevTitle = previous["title"];
-    const nextTitle = next["title"];
-    return prevTitle > nextTitle ? 1 : -1;
-};

package/dist/src/components/custom/scheduler-temporal/CwSchedulerComp2.js

@@ -1,267 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import lodash from "lodash";
-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 { calculateDivisionType } from "./logic/divisions/calculateDivisionType";
-import { filterAndProcessResources } from "./logic/filtering/filterAndProcessResources";
-import { filterResources } from "./logic/filtering/filterResources";
-import { getEventWithSize } from "./logic/pixels/getPixelsForEvent";
-import { heightScheduler } from "./logic/pixels/heightScheduler";
-import { getEventsInInnerRows, getEventsOfResource } from "./logic/ui/getEventsOfResource";
-import { getTimeHeaders } from "./logic/ui/getTimeHeaders";
-export class CwScheduler2 extends Component {
-    contentArea;
-    constructor(Props) {
-        super(Props);
-        this.init(this.props);
-    }
-    resizeObserver;
-    calculateMaxPx = () => {
-        const mainElement = document.querySelector(".cw-scheduler-main-wrapper");
-        if (!mainElement)
-            return window.innerWidth - 402; // sidebar + first column + padding
-        const mainRect = mainElement.getBoundingClientRect();
-        return Math.floor(mainRect.width - 162); // first column + padding
-    };
-    init = (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;
-        this.state = {
-            startDate: props.startDate,
-            endDate: props.endDate,
-            maxPx: maxPx,
-            dayPx: dayPx,
-            hourPx: hourPx,
-            minutePx: minutePx,
-            timeHeaders: timeHeaders,
-            eventHeight: 30,
-            events: props.events,
-            resources: props.resources,
-            top: 0,
-            bottom: 1000,
-            lineStyle: 0,
-            nowUtc: getUtcToday(),
-            division: 0,
-            divisionType: "",
-            pinnedResources: props.pinnedResources ? props.pinnedResources : [],
-            selectedEvents: [],
-            showConsoleLogs: false, // Change to false to not show the console.log(...)
-            groupByFunction: props.groupByFunction ?? false,
-        };
-    };
-    initOutside = (events, resources, _nextProps, startDate, endDate) => {
-        // const maxPx: number = (document.getElementById("root")?.clientWidth ?? window.innerWidth) - 150;
-        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 eventHeight = 30;
-        resources = filterResources(this.props.module, this.props.resourceName, this.props.resources, this.props.groupByFunction, endDate, startDate);
-        resources = resources.map((resource) => {
-            return {
-                ...resource,
-                events: getEventsOfResource(resource, events, this.state, this.props.id, this.props.module, startDate, endDate),
-            };
-        });
-        const groupByFunction = this.props.groupByFunction ?? false;
-        const now = getUtcToday();
-        const isInDateRange = now >= startDate && now <= endDate && this.contentArea !== undefined;
-        const lineStyle = isInDateRange ? daysBetweenTwoDatesIncludingBoth(startDate, now) * dayPx : 0;
-        this.setState({
-            startDate: startDate,
-            endDate: endDate,
-            maxPx: maxPx,
-            dayPx: dayPx,
-            hourPx: hourPx,
-            minutePx: minutePx,
-            timeHeaders: timeHeaders,
-            eventHeight: eventHeight,
-            events: [...events],
-            resources: [...resources],
-            top: 0,
-            bottom: 1000,
-            lineStyle: lineStyle,
-            nowUtc: now,
-            division: 0,
-            divisionType: "",
-            pinnedResources: this.props.pinnedResources ?? [],
-            groupByFunction: groupByFunction,
-        });
-    };
-    componentDidMount() {
-        const eventsCopy = [...this.props.events];
-        const filteredResources = filterAndProcessResources(this.props, this.state);
-        const divisions = calculateDivisions(this.state.startDate, this.state.endDate);
-        const divisionType = calculateDivisionType(this.state.startDate, this.state.endDate);
-        this.setState({
-            events: eventsCopy,
-            resources: filteredResources,
-            division: divisions,
-            divisionType: divisionType,
-        });
-        // Añadir ResizeObserver
-        const mainElement = document.querySelector(".cw-scheduler-main-wrapper");
-        if (mainElement) {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.handleResize();
-            });
-            this.resizeObserver.observe(mainElement);
-        }
-        window?.addEventListener("resize", this.handleResize);
-    }
-    componentWillUnmount() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        window?.removeEventListener("resize", this.handleResize);
-    }
-    recalculateEventPositions = (events, dayPx, startDate) => {
-        return events.map(event => getEventWithSize(event, startDate, dayPx));
-    };
-    updateResourcesWithEvents = (resources, events) => {
-        return resources.map(resource => ({
-            ...resource,
-            events: events.filter(event => event.resourceId === resource.id)
-        }));
-    };
-    handleResize = () => {
-        const maxPx = this.calculateMaxPx();
-        const days = Math.floor(daysBetweenTwoDates(this.state.startDate, this.state.endDate));
-        const dayPx = maxPx / days;
-        const hourPx = dayPx / 24;
-        const minutePx = dayPx / 1440;
-        const recalculatedEvents = this.recalculateEventPositions(this.state.events, dayPx, this.state.startDate);
-        const updatedResources = this.updateResourcesWithEvents(this.state.resources, recalculatedEvents);
-        this.setState({
-            maxPx,
-            dayPx,
-            hourPx,
-            minutePx,
-            events: recalculatedEvents,
-            resources: updatedResources
-        });
-    };
-    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.state.startDate.toISOString() ||
-            _nextProps.endDate.toISOString() !== this.state.endDate.toISOString();
-        if (document.getElementById("root") !== null) {
-            this.handleResize();
-        }
-        if (dateChange) {
-            const events = lodash.cloneDeep(this.props.events);
-            const resources = lodash.cloneDeep(this.props.resources);
-            this.initOutside(events, resources, _nextProps, _nextProps.startDate, _nextProps.endDate);
-            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 mappedEvents = _nextProps.events
-            .map((event) => {
-            return getEventWithSize(event, _nextProps.startDate, this.state.dayPx);
-        })
-            .filter((event) => {
-            const outOfRange = event.end <= this.props.startDate || event.start >= this.props.endDate;
-            return !outOfRange;
-        });
-        const newResources = _nextProps.resources
-            .map((resource) => {
-            return {
-                ...resource,
-                events: mappedEvents.filter((event) => event.resourceId === resource.id),
-            };
-        })
-            .map((resource) => {
-            const tops = getEventsInInnerRows(resource, this.state, _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,
-            };
-        });
-        this.setState({
-            events: mappedEvents,
-            resources: 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.state.startDate, leftPos, this.state.minutePx);
-        }
-        if (this.props.scheduler_handleOnClickContextMenuResource) {
-            this.props.scheduler_handleOnClickContextMenuResource(datetime, _resource, _clickEvent.key, this.props.id);
-        }
-    };
-    handleOnClickResourceContextMenu = (_e, resource) => {
-        if (this.props.scheduler_handleOnClickResourceContextMenu) {
-            this.props.scheduler_handleOnClickResourceContextMenu(_e, resource);
-        }
-    };
-    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.state.startDate &&
-            this.state.nowUtc <= this.state.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");
-        const timeHeaders = this.state.timeHeaders;
-        const referenceDate = timeHeaders[0];
-        const divisions = 24 / calculateDivisions(timeHeaders[0], timeHeaders[timeHeaders.length - 1]);
-        const hoursPixels = timeHeaders
-            .filter((_, index) => {
-            return index != 0 && index % divisions == 0;
-        })
-            .map((date) => {
-            const daysDiff = daysBetweenTwoDatesIncludingBoth(date, referenceDate);
-            const pixels = daysDiff * 24 * this.state.hourPx;
-            return pixels;
-        });
-        return (_jsx("div", { id: this.props.id, style: {
-                overflowY: "auto",
-                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.state.startDate,
-                            endDate: this.state.endDate,
-                            headerName: this.props.resourceName,
-                        }, descriptionColumn: this.props.descriptionColumn })), _jsx("tbody", { style: {
-                            overflow: "visible",
-                            width: this.state.maxPx + 150
-                        }, 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: this.handleOnClickResourceContextMenu, ResourceTitleComponent: this.props.resourceComp }), _jsx("td", { className: "dividerArea" }), _jsx(SchedulerContentArea, { now: this.state.nowUtc, showTimeline: showTimeline, timeSeparatorLeftPx: hoursPixels, 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 })] }) })] }) }));
-    }
-}