@cwellt_software/cwellt-reactjs-lib 1.2.16 → 1.3.0

package/dist/index.cjs.js

@@ -251,7 +251,7 @@ const CwMessage = props => {
         }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
         return () => clearTimeout(timer);
     }, [props]);
-    return (jsxRuntime.jsxs("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.messageType), children: [props.messageType && jsxRuntime.jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
+    return (jsxRuntime.jsxs("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.messageType), onClick: props.onClick, style: props.onClick ? { cursor: "pointer" } : undefined, children: [props.messageType && jsxRuntime.jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
 };
 /**
  * Hook for displaying inline messages within specific components.
@@ -314,11 +314,11 @@ class CwMessageManager {
         document.body.prepend(this.messageWrapper);
         this.root = client.createRoot(this.messageWrapper); // Create a root at the messageWrapper
     }
-    showMessage(message, type, duration) {
+    showMessage(message, type, duration, onClick) {
         const msg = document.createElement("div");
         this.messageWrapper?.prepend(msg);
         const msgRoot = client.createRoot(msg); // Create a root for the new message
-        msgRoot.render(jsxRuntime.jsx(CwMessage, { message: message, messageType: type, duration: duration, onClose: () => this.closeMessage(msgRoot) }));
+        msgRoot.render(jsxRuntime.jsx(CwMessage, { message: message, messageType: type, duration: duration, onClick: onClick, onClose: () => this.closeMessage(msgRoot) }));
     }
     closeMessage(msgRoot) {
         msgRoot.unmount(); // Unmount the message root
@@ -340,8 +340,8 @@ class CwMessageManager {
  *
  * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
  */
-function CwDisplayMessage(message, type, duration) {
-    CwMessageManager.getInstance().showMessage(message, type, duration);
+function CwDisplayMessage(message, type, duration, onClick) {
+    CwMessageManager.getInstance().showMessage(message, type, duration, onClick);
 }
 
 /**
@@ -9049,6 +9049,170 @@ const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder
         }, "data-direction": direction, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-search-input-wrapper", children: [jsxRuntime.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) && (jsxRuntime.jsx("div", { className: "cw-search-input-loading", children: jsxRuntime.jsx(CwIcon, { iconId: "spinner" }) })), jsxRuntime.jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsxRuntime.jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected airport", variant: "icon", icon: "close", color: "neutral" })) : (jsxRuntime.jsx(CwIcon, { iconId: "control-tower" })) })] })] }), showDropdown && options.length > 0 && (jsxRuntime.jsx("div", { ref: dropdownRef, className: "cw-input-search-dropdown", role: "listbox", children: jsxRuntime.jsx("ul", { children: options.map((option, index) => (jsxRuntime.jsx("li", { className: index === highlightedIndex ? "highlighted" : "", onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
 };
 
+const CwFindCrewmember = ({ handleChange, placeHolder = "Search crew…", required = false, cblConfig, className = "", value, disabled = false, initialDisplayText, labelProps, alignProps, width }) => {
+    const [inputValue, setInputValue] = React.useState("");
+    const [options, setOptions] = React.useState([]);
+    const [crewmembers, setCrewmembers] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isInitialLoading, setIsInitialLoading] = React.useState(false);
+    const [showDropdown, setShowDropdown] = React.useState(false);
+    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const [tooltipText, setTooltipText] = React.useState("");
+    const inputRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const searchTimeoutRef = React.useRef();
+    const getDisplayText = React.useCallback((crew) => {
+        return `${crew.threeLetterCode} - ${crew.lastName} ${crew.firstName}`;
+    }, []);
+    const fetchCrewmemberData = React.useCallback(async (crewmemberId) => {
+        setIsInitialLoading(true);
+        try {
+            const response = await fetch(`${cblConfig}controls/cblFindCrew/cblFindCrew/GetCrewmember?crewmemberId=${crewmemberId}`);
+            const result = await response.json();
+            const display = getDisplayText(result);
+            setCrewmembers([result]);
+            setOptions([{ value: result.id, text: display }]);
+            setInputValue(display);
+            setTooltipText(display);
+        }
+        catch (error) {
+            console.error("Error fetching crewmember data:", error);
+        }
+        finally {
+            setIsInitialLoading(false);
+        }
+    }, [cblConfig, getDisplayText]);
+    const searchCrewmembers = React.useCallback(async (searchText) => {
+        if (searchText.length < 2) {
+            setOptions([]);
+            setCrewmembers([]);
+            setShowDropdown(false);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const response = await fetch(`${cblConfig}controls/cblFindCrew/cblFindCrew/SearchCrewCodeName?text=${encodeURIComponent(searchText)}`);
+            const results = await response.json();
+            const newOptions = results.map(crew => ({
+                value: crew.id,
+                text: getDisplayText(crew)
+            }));
+            setOptions(newOptions);
+            setCrewmembers(results);
+            setShowDropdown(newOptions.length > 0);
+            setHighlightedIndex(-1);
+        }
+        catch (error) {
+            console.error("Error searching crewmembers:", error);
+            setOptions([]);
+            setCrewmembers([]);
+            setShowDropdown(false);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [cblConfig, getDisplayText]);
+    const debouncedSearch = React.useCallback((searchText) => {
+        if (searchTimeoutRef.current) {
+            window.clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = window.setTimeout(() => {
+            searchCrewmembers(searchText);
+        }, 300);
+    }, [searchCrewmembers]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (newValue !== inputValue) {
+            debouncedSearch(newValue);
+        }
+    };
+    const handleOptionSelect = (optionValue) => {
+        const selectedCrew = crewmembers.find(c => c.id === optionValue);
+        if (!selectedCrew)
+            return;
+        setShowDropdown(false);
+        const display = getDisplayText(selectedCrew);
+        setInputValue(display);
+        setTooltipText(display);
+        handleChange(optionValue);
+    };
+    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;
+        }
+    };
+    React.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);
+    }, []);
+    React.useEffect(() => {
+        if (value && value !== 0 && value !== -1) {
+            if (initialDisplayText) {
+                setInputValue(initialDisplayText);
+                setTooltipText(initialDisplayText);
+            }
+            else {
+                fetchCrewmemberData(value);
+            }
+        }
+    }, [value, fetchCrewmemberData, initialDisplayText]);
+    React.useEffect(() => {
+        if (!value || value === 0 || value === -1) {
+            setInputValue("");
+            setTooltipText("");
+            setOptions([]);
+            setCrewmembers([]);
+        }
+    }, [value]);
+    const handleInputFocus = () => {
+        if (options.length > 0) {
+            setShowDropdown(true);
+        }
+    };
+    const handleClear = () => {
+        setInputValue("");
+        setTooltipText("");
+        setOptions([]);
+        setCrewmembers([]);
+        setShowDropdown(false);
+        handleChange(0);
+        inputRef.current?.focus();
+    };
+    const direction = alignProps?.flexDirection || "row";
+    return (jsxRuntime.jsxs("div", { className: `cw-search-input ${className}`, style: {
+            ...(width ? { width } : {}),
+            ...(labelProps?.labelWidth ? { '--label-width': labelProps.labelWidth } : {})
+        }, "data-direction": direction, children: [jsxRuntime.jsxs(CwAlign, { ...alignProps, itemProp: required ? "required" : "", children: [labelProps && (jsxRuntime.jsx(CwLabel, { ...labelProps, children: labelProps.text })), jsxRuntime.jsxs("div", { className: "cw-search-input-wrapper", children: [jsxRuntime.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) && (jsxRuntime.jsx("div", { className: "cw-search-input-loading", children: jsxRuntime.jsx(CwIcon, { iconId: "spinner" }) })), jsxRuntime.jsx("div", { className: "cw-search-input-icons", children: inputValue && !disabled && !isInitialLoading ? (jsxRuntime.jsx(CwButton, { type: "button", onClick: handleClear, "aria-label": "Clear selected crewmember", variant: "icon", icon: "close", color: "neutral" })) : (jsxRuntime.jsx(CwIcon, { iconId: "person" })) })] })] }), showDropdown && options.length > 0 && (jsxRuntime.jsx("div", { ref: dropdownRef, className: "cw-input-search-dropdown", role: "listbox", children: jsxRuntime.jsx("ul", { children: options.map((option, index) => (jsxRuntime.jsx("li", { className: index === highlightedIndex ? "highlighted" : "", onClick: () => handleOptionSelect(option.value), onMouseDown: (e) => e.preventDefault(), role: "option", "aria-selected": index === highlightedIndex, children: option.text }, option.value))) }) }))] }));
+};
+
 exports.CblDragAndDrop = CblDragAndDrop;
 exports.CwAccordionContainer = CwAccordionContainer;
 exports.CwAlign = CwAlign;
@@ -9079,6 +9243,7 @@ exports.CwExpandable = CwExpandable;
 exports.CwFileUpload = CwFileUpload;
 exports.CwFileUploadMultiple = CwFileUploadMultiple;
 exports.CwFindAirport = CwFindAirport;
+exports.CwFindCrewmember = CwFindCrewmember;
 exports.CwGenericTooltip = CwGenericTooltip;
 exports.CwHeadingMain = CwHeadingMain;
 exports.CwHeadingSecond = CwHeadingSecond;