@cwellt_software/cwellt-reactjs-lib 1.2.0 → 1.2.2

package/dist/src/components/custom/find-airport/CwFindAirportComp.js

@@ -1,240 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { CwButton } from "../../control/action/button/CwButton";
-import { CwIcon } from "../../display/graphics/icon/CwIcon";
-import "./cw-find-airport.css";
-export const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, width }) => {
-    // State
-    const [inputValue, setInputValue] = useState("");
-    const [options, setOptions] = useState([]);
-    const [airports, setAirports] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isInitialLoading, setIsInitialLoading] = useState(false);
-    const [showDropdown, setShowDropdown] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const [tooltipText, setTooltipText] = useState("");
-    // Refs
-    const inputRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const searchTimeoutRef = useRef();
-    // Utility function to extract ICAO from DisplayAirportText
-    const extractIcao = useCallback((displayText) => {
-        const match = displayText.match(/^([A-Z]{4})\(/);
-        return match ? match[1] : displayText;
-    }, []);
-    // Utility function to extract IATA from DisplayAirportText
-    const extractIata = useCallback((displayText) => {
-        const match = displayText.match(/\(([A-Z]{3})\)/);
-        return match ? match[1] : displayText;
-    }, []);
-    // Utility function to get short code (ICAO(IATA) format - original behavior)
-    const getShortCode = useCallback((displayText) => {
-        const match = displayText.match(/([A-Z]{4})\(([A-Z]{3})\)/);
-        if (match && match.length >= 3) {
-            return `${match[1]}(${match[2]})`;
-        }
-        return displayText;
-    }, []);
-    // Utility function to get display text for INPUT based on mode
-    const getInputDisplayText = useCallback((airport) => {
-        const fullText = airport.DisplayAirportText;
-        switch (displayMode) {
-            case "icao-only":
-                return extractIcao(fullText);
-            case "iata-only":
-                return extractIata(fullText);
-            case "full-text":
-                return fullText;
-            case "default":
-            default:
-                // Default: ICAO(IATA) - same as original getShortCode behavior
-                return getShortCode(fullText);
-        }
-    }, [displayMode, extractIcao, extractIata, getShortCode]);
-    // Utility function to get display text for DROPDOWN (always full text)
-    const getDropdownDisplayText = useCallback((airport) => {
-        return airport.DisplayAirportText;
-    }, []);
-    // Fetch airport data by ID
-    const fetchAirportData = useCallback(async (airportId) => {
-        setIsInitialLoading(true);
-        try {
-            const response = await fetch(`${cblConfig}api/data/airport?airportId=${airportId}`);
-            const result = await response.json();
-            const airport = result;
-            const inputText = getInputDisplayText(airport);
-            const dropdownText = getDropdownDisplayText(airport);
-            setAirports([airport]);
-            setOptions([{ value: airport.AptKey, text: dropdownText }]);
-            setInputValue(inputText);
-            setTooltipText(airport.DisplayAirportText);
-        }
-        catch (error) {
-            console.error("Error fetching airport data:", error);
-        }
-        finally {
-            setIsInitialLoading(false);
-        }
-    }, [cblConfig, getInputDisplayText, getDropdownDisplayText]);
-    // Map searchType string to number for API
-    const getSearchTypeNumber = useCallback((type) => {
-        switch (type) {
-            case "OnlyDatabase": return 0;
-            case "DatabaseAndProviders": return 1;
-            case "OnlyProviders": return 2;
-            default: return 0;
-        }
-    }, []);
-    // Search airports
-    const searchAirports = useCallback(async (searchText) => {
-        if (searchText.length < 2) {
-            setOptions([]);
-            setAirports([]);
-            setShowDropdown(false);
-            return;
-        }
-        setIsLoading(true);
-        try {
-            const searchTypeNumber = getSearchTypeNumber(searchType);
-            const response = await fetch(`${cblConfig}controls/cblFindAirport/cblFindAirport/SearchAirportCodeName?text=${searchText}&searchType=${searchTypeNumber}`);
-            const results = await response.json();
-            const newOptions = [];
-            const newAirports = [];
-            results.forEach((airport) => {
-                const displayText = getDropdownDisplayText(airport);
-                newOptions.push({ value: airport.AptKey, text: displayText });
-                newAirports.push(airport);
-            });
-            setOptions(newOptions);
-            setAirports(newAirports);
-            setShowDropdown(newOptions.length > 0);
-            setHighlightedIndex(-1);
-        }
-        catch (error) {
-            console.error("Error searching airports:", error);
-            setOptions([]);
-            setAirports([]);
-            setShowDropdown(false);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    }, [cblConfig, getDropdownDisplayText, searchType, getSearchTypeNumber]);
-    // Debounced search
-    const debouncedSearch = useCallback((searchText) => {
-        if (searchTimeoutRef.current) {
-            window.clearTimeout(searchTimeoutRef.current);
-        }
-        searchTimeoutRef.current = window.setTimeout(() => {
-            searchAirports(searchText);
-        }, 300); // 300ms debounce
-    }, [searchAirports]);
-    // Handle input change
-    const handleInputChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        if (newValue !== inputValue) {
-            debouncedSearch(newValue);
-        }
-    };
-    // Handle option selection
-    const handleOptionSelect = async (optionValue) => {
-        const selectedAirport = airports.find(apt => apt.AptKey === optionValue);
-        if (!selectedAirport)
-            return;
-        setShowDropdown(false);
-        // Handle provider airports (keeping original logic)
-        if (selectedAirport.isAirportFromProvider) {
-            try {
-                const response = await fetch(`${cblConfig}controls/cblFindAirport/cblFindAirport/GetCblAirport?IATAICAO=${selectedAirport.AptIcao}&update=false`);
-                const result = await response.json();
-                const resultAirport = result;
-                const inputText = getInputDisplayText(resultAirport);
-                const dropdownText = getDropdownDisplayText(resultAirport);
-                setInputValue(inputText);
-                setTooltipText(result.DisplayAirportText);
-                setAirports([result]);
-                setOptions([{ value: result.AptKey, text: dropdownText }]);
-                handleChange(result.AptKey);
-            }
-            catch (error) {
-                console.error("Error fetching provider airport:", error);
-            }
-        }
-        else {
-            const inputText = getInputDisplayText(selectedAirport);
-            setInputValue(inputText);
-            setTooltipText(getDropdownDisplayText(selectedAirport));
-            handleChange(optionValue);
-        }
-    };
-    // Handle keyboard navigation
-    const handleKeyDown = (e) => {
-        if (!showDropdown || options.length === 0)
-            return;
-        switch (e.key) {
-            case "ArrowDown":
-                e.preventDefault();
-                setHighlightedIndex(prev => prev < options.length - 1 ? prev + 1 : 0);
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                setHighlightedIndex(prev => prev > 0 ? prev - 1 : options.length - 1);
-                break;
-            case "Enter":
-                e.preventDefault();
-                if (highlightedIndex >= 0 && highlightedIndex < options.length) {
-                    handleOptionSelect(options[highlightedIndex].value);
-                }
-                break;
-            case "Escape":
-                setShowDropdown(false);
-                setHighlightedIndex(-1);
-                break;
-        }
-    };
-    // Handle clicks outside dropdown
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target) &&
-                !inputRef.current?.contains(event.target)) {
-                setShowDropdown(false);
-                setHighlightedIndex(-1);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, []);
-    // Load initial value
-    useEffect(() => {
-        if (value && value !== 0 && value !== -1) {
-            fetchAirportData(value);
-        }
-    }, [value, fetchAirportData]);
-    useEffect(() => {
-        if (!value || value === 0 || value === -1) {
-            setInputValue("");
-            setTooltipText("");
-            setOptions([]);
-            setAirports([]);
-        }
-    }, [value]);
-    // Handle input focus
-    const handleInputFocus = () => {
-        if (options.length > 0) {
-            setShowDropdown(true);
-        }
-    };
-    // Clear selection
-    const handleClear = () => {
-        setInputValue("");
-        setTooltipText("");
-        setOptions([]);
-        setAirports([]);
-        setShowDropdown(false);
-        handleChange(0); // or -1, depending on API expectations
-        inputRef.current?.focus();
-    };
-    return (_jsxs("div", { className: `cw-find-airport ${className}`, style: width ? { width } : undefined, children: [_jsxs("div", { className: "cw-find-airport-input-wrapper", children: [_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleInputFocus, placeholder: isInitialLoading ? "Loading…" : placeHolder, disabled: disabled, required: required, autoComplete: "off", "aria-expanded": showDropdown, "aria-haspopup": "listbox", role: "combobox", title: tooltipText }), (isLoading || isInitialLoading) && (_jsx("div", { className: "cw-find-airport-loading", children: _jsx(CwIcon, { iconId: "spinner" }) })), inputValue && !disabled && !isInitialLoading && (_jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" }))] }), showDropdown && options.length > 0 && (_jsx("div", { ref: dropdownRef, className: "cw-find-airport-dropdown", role: "listbox", children: options.map((option, index) => (_jsx("div", { className: `cw-find-airport-option ${index === highlightedIndex ? "highlighted" : ""}`, onClick: () => handleOptionSelect(option.value), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }))] }));
-};

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

@@ -1,211 +0,0 @@
-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 })] }) })] }) }));
-    }
-}