swoop-common 2.1.18 → 2.1.20

package/dist/rendering/components/ComponentPicker.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { DTOComponentRead } from "../../api/generated/core/exports";
+interface ComponentPickerModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSelect: (component: DTOComponentRead) => void;
+    selectedComponent?: DTOComponentRead | null;
+}
+export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, }: ComponentPickerModalProps): React.JSX.Element;
+export {};

package/dist/rendering/components/ComponentPicker.js

@@ -0,0 +1,209 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useState, useEffect } from "react";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, MenuItem, Box, List, ListItem, ListItemButton, ListItemText, Typography, Chip, InputAdornment, IconButton, Divider, CircularProgress, Pagination, Autocomplete, } from "@mui/material";
+import { Search as SearchIcon, Clear as ClearIcon, FilterList as FilterIcon, } from "@mui/icons-material";
+import { PARTNER_REGION_READABLE } from "../consts/region";
+import { fetchComponents, getAllPartners } from "../util/api";
+import { InternalServices } from "../../api/init";
+export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, }) {
+    const [searchTerm, setSearchTerm] = useState("");
+    const [selectedRegion, setSelectedRegion] = useState("");
+    const [selectedPartner, setSelectedPartner] = useState("");
+    const [selectedTemplate, setSelectedTemplate] = useState("");
+    const [components, setComponents] = useState([]);
+    const [templates, setTemplates] = useState([]);
+    const [partners, setPartners] = useState([]);
+    const [regions, setRegions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [initialLoading, setInitialLoading] = useState(false);
+    const [page, setPage] = useState(1);
+    const [pageSize] = useState(10);
+    const [totalCount, setTotalCount] = useState(0);
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearchTerm(searchTerm);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchTerm]);
+    useEffect(() => {
+        if (open && templates.length === 0) {
+            loadInitialData();
+        }
+    }, [open]);
+    useEffect(() => {
+        if (open) {
+            fetchFilteredComponents();
+        }
+    }, [open, debouncedSearchTerm, selectedRegion, selectedPartner, selectedTemplate, page]);
+    useEffect(() => {
+        if (open) {
+            setPage(1);
+        }
+    }, [debouncedSearchTerm, selectedRegion, selectedPartner, selectedTemplate]);
+    useEffect(() => {
+        if (open) {
+            setSearchTerm("");
+            setSelectedRegion("");
+            setSelectedPartner("");
+            setSelectedTemplate("");
+        }
+    }, [open]);
+    const loadInitialData = () => __awaiter(this, void 0, void 0, function* () {
+        setInitialLoading(true);
+        try {
+            const [templatesData, partnersData, regionsData] = yield Promise.all([
+                InternalServices.CoreService.templateList(),
+                getAllPartners(),
+                InternalServices.ItineraryService.regionList(),
+            ]);
+            setTemplates(templatesData.data);
+            setPartners(partnersData);
+            setRegions(regionsData.data);
+        }
+        catch (error) {
+            console.error("Error loading initial data:", error);
+        }
+        finally {
+            setInitialLoading(false);
+        }
+    });
+    const fetchFilteredComponents = () => __awaiter(this, void 0, void 0, function* () {
+        setLoading(true);
+        try {
+            const query = {
+                limit: pageSize.toString(),
+                page: page.toString(),
+            };
+            if (debouncedSearchTerm)
+                query.search = debouncedSearchTerm;
+            if (selectedRegion)
+                query.regions = selectedRegion;
+            if (selectedPartner)
+                query.partners = selectedPartner;
+            if (selectedTemplate)
+                query.templateId = selectedTemplate;
+            const { data, pagination } = yield fetchComponents(query);
+            setComponents(data || []);
+            setTotalCount(pagination.total || 0);
+        }
+        catch (error) {
+            console.error("Error fetching components:", error);
+            setComponents([]);
+            setTotalCount(0);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    const usedRegions = regions;
+    const usedPartners = partners;
+    const usedTemplates = templates;
+    const handleClearFilters = () => {
+        setSelectedRegion("");
+        setSelectedPartner("");
+        setSelectedTemplate("");
+    };
+    const handleClearSearch = () => setSearchTerm("");
+    const handleSelect = (component) => {
+        onSelect(component);
+        onClose();
+    };
+    const getComponentDetails = (component) => {
+        const template = templates.find(t => t.id === component.templateId);
+        const componentPartners = partners.filter(p => { var _a; return p.id && ((_a = component.partners) === null || _a === void 0 ? void 0 : _a.includes(p.id)); });
+        const componentRegions = regions.filter(r => { var _a; return (_a = component.regions) === null || _a === void 0 ? void 0 : _a.includes(r.id); });
+        return { template, partners: componentPartners, regions: componentRegions };
+    };
+    const hasActiveFilters = selectedRegion || selectedPartner || selectedTemplate;
+    if (initialLoading) {
+        return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, PaperProps: { sx: { height: "80vh", maxHeight: "800px" } } },
+            React.createElement(DialogContent, null,
+                React.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", py: 8 },
+                    React.createElement(CircularProgress, { size: 48, sx: { mb: 2 } }),
+                    React.createElement(Typography, { variant: "body1", color: "text.secondary" }, "Loading component data...")))));
+    }
+    return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, PaperProps: { sx: { height: "80vh", maxHeight: "800px" } } },
+        React.createElement(DialogTitle, null,
+            React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between" },
+                React.createElement(Typography, { variant: "h6" }, "Select Component"),
+                hasActiveFilters && (React.createElement(Button, { size: "small", startIcon: React.createElement(ClearIcon, null), onClick: handleClearFilters }, "Clear Filters")))),
+        React.createElement(DialogContent, { dividers: true },
+            React.createElement(TextField, { fullWidth: true, placeholder: "Search components...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), InputProps: {
+                    startAdornment: React.createElement(InputAdornment, { position: "start" },
+                        React.createElement(SearchIcon, null)),
+                    endAdornment: searchTerm && (React.createElement(InputAdornment, { position: "end" },
+                        React.createElement(IconButton, { size: "small", onClick: handleClearSearch },
+                            React.createElement(ClearIcon, null)))),
+                }, sx: { mb: 2 } }),
+            React.createElement(Box, { display: "flex", gap: 2, mb: 2, flexWrap: "wrap" },
+                React.createElement(Autocomplete, { size: "small", options: usedRegions, getOptionLabel: (option) => option.name, value: usedRegions.find(r => r.id === selectedRegion) || null, onChange: (_, newValue) => setSelectedRegion((newValue === null || newValue === void 0 ? void 0 : newValue.id) || ""), renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { label: "Region" })), sx: { minWidth: 160 }, isOptionEqualToValue: (option, value) => option.id === value.id }),
+                React.createElement(TextField, { select: true, size: "small", label: "Partner", value: selectedPartner, onChange: (e) => setSelectedPartner(e.target.value), sx: { minWidth: 160 } },
+                    React.createElement(MenuItem, { value: "" }, "All Partners"),
+                    usedPartners.map((partner) => (React.createElement(MenuItem, { key: partner.id, value: partner.id }, partner.name)))),
+                React.createElement(TextField, { select: true, size: "small", label: "Type", value: selectedTemplate, onChange: (e) => setSelectedTemplate(e.target.value), sx: { minWidth: 160 } },
+                    React.createElement(MenuItem, { value: "" }, "All Types"),
+                    usedTemplates.map((template) => (React.createElement(MenuItem, { key: template.id, value: template.id },
+                        template.name,
+                        " v",
+                        template.revision))))),
+            React.createElement(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1 },
+                React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                    totalCount,
+                    " component",
+                    totalCount !== 1 ? "s" : "",
+                    " found"),
+                loading && React.createElement(CircularProgress, { size: 16 })),
+            React.createElement(List, { sx: { display: "flex", flexDirection: "column", flex: 1, overflow: "auto" } }, loading && components.length === 0 ? (React.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", py: 4 },
+                React.createElement(CircularProgress, { size: 48, sx: { mb: 2 } }),
+                React.createElement(Typography, { variant: "body1", color: "text.secondary" }, "Loading components..."))) : components.length === 0 ? (React.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", py: 4 },
+                React.createElement(FilterIcon, { sx: { fontSize: 48, color: "text.secondary", mb: 2 } }),
+                React.createElement(Typography, { variant: "body1", color: "text.secondary" }, "No components match your search criteria"),
+                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Try adjusting your filters or search term"))) : (components.map((component, index) => {
+                const details = getComponentDetails(component);
+                const isSelected = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === component.id;
+                return (React.createElement(React.Fragment, { key: component.id },
+                    React.createElement(ListItem, { disablePadding: true },
+                        React.createElement(ListItemButton, { onClick: () => handleSelect(component), selected: isSelected, sx: {
+                                flexDirection: "column",
+                                alignItems: "flex-start",
+                                py: 2,
+                                "&.Mui-selected": {
+                                    backgroundColor: "primary.50",
+                                    borderLeft: "4px solid",
+                                    borderColor: "primary.main",
+                                },
+                            } },
+                            React.createElement(Box, { width: "100%" },
+                                React.createElement(ListItemText, { primary: React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, component.name), secondary: React.createElement(Box, { mt: 1 },
+                                        details.template && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                                            "Type: ",
+                                            details.template.name)),
+                                        details.regions.length > 0 && (React.createElement(Box, { display: "flex", alignItems: "center", gap: 1, mt: 0.5 },
+                                            React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Regions:"),
+                                            details.regions.map(region => (React.createElement(Chip, { key: region.id, label: region.name, size: "small", variant: "outlined" }))))),
+                                        details.partners.length > 0 && (React.createElement(Box, { display: "flex", alignItems: "center", gap: 1, mt: 0.5 },
+                                            React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Partners:"),
+                                            details.partners.slice(0, 3).map(partner => (React.createElement(Chip, { key: partner.id, label: `${partner.name} - ${PARTNER_REGION_READABLE[partner.id || "".split("-")[0]]}`, size: "small", variant: "outlined", color: "secondary" }))),
+                                            details.partners.length > 3 && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                                                "+",
+                                                details.partners.length - 3,
+                                                " more"))))) })))),
+                    index < components.length - 1 && React.createElement(Divider, null)));
+            }))),
+            components.length > 0 && (React.createElement(Box, { display: "flex", justifyContent: "center", mt: 2 },
+                React.createElement(Pagination, { count: Math.ceil(totalCount / pageSize), page: page, onChange: (_, newPage) => setPage(newPage), color: "primary" })))),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { onClick: onClose }, "Cancel"),
+            selectedComponent && (React.createElement(Button, { variant: "contained", onClick: () => handleSelect(selectedComponent) },
+                "Select ",
+                selectedComponent.name)))));
+}

package/dist/rendering/consts/region.d.ts

@@ -0,0 +1 @@
+export declare const PARTNER_REGION_READABLE: Record<string, string>;

package/dist/rendering/consts/region.js

@@ -0,0 +1,5 @@
+export const PARTNER_REGION_READABLE = {
+    "ARC": "Arctic",
+    "PAT": "Patagonia",
+    "ANT": "Antarctic"
+};

package/dist/rendering/contexts/ComponentPickerContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DTOComponentRead } from '../../api/generated/core/exports';
+interface ComponentPickerExports {
+    get: () => Promise<DTOComponentRead>;
+}
+interface Props {
+    children?: React.ReactNode;
+}
+export declare const useComponentPicker: () => ComponentPickerExports;
+declare const ComponentPickerProvider: React.FC<Props>;
+export default ComponentPickerProvider;

package/dist/rendering/contexts/ComponentPickerContext.js

@@ -0,0 +1,48 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { createContext, useContext, useRef, useState } from 'react';
+import ComponentPickerModal from '../components/ComponentPicker';
+const ComponentSelectorContext = createContext(undefined);
+export const useComponentPicker = () => {
+    const picker = useContext(ComponentSelectorContext);
+    if (!picker)
+        throw new Error("useComponentPicker used from outside selector context");
+    return picker;
+};
+const ComponentPickerProvider = ({ children }) => {
+    const [open, setOpen] = useState(false);
+    const changeProp = useRef(() => { });
+    const closeProp = useRef(() => { });
+    const getSelectedComponent = () => __awaiter(void 0, void 0, void 0, function* () {
+        setOpen(true);
+        return new Promise((res, rej) => {
+            // In case of old refs being called (so i dont need to explicitly remove them)
+            let done = false;
+            changeProp.current = (value) => {
+                if (done)
+                    return;
+                done = true;
+                res(value);
+                setOpen(false);
+            };
+            closeProp.current = () => {
+                if (done)
+                    return;
+                done = true;
+                rej();
+                setOpen(false);
+            };
+        });
+    });
+    return (React.createElement(ComponentSelectorContext.Provider, { value: { get: getSelectedComponent } },
+        React.createElement(ComponentPickerModal, { open: open, onClose: closeProp.current, onSelect: changeProp.current }),
+        children));
+};
+export default ComponentPickerProvider;

package/dist/rendering/index.d.ts

@@ -9,3 +9,4 @@ export * from "./registry/types";
 export { MasterSchema, Stage } from "./schema/formSchemaTypes";
 export { FORM_BUILDER_JSON_SCHEMA } from "./schema/formBuilders/formBuilderJsonSchema";
 export { FORM_BUILDER_UI_SCHEMA } from "./schema/formBuilders/formBuilderUiSchema";
+export * from "./contexts/ComponentPickerContext";

package/dist/rendering/index.js

@@ -9,3 +9,4 @@ export * from "./registry/types";
 export { Stage } from "./schema/formSchemaTypes";
 export { FORM_BUILDER_JSON_SCHEMA } from "./schema/formBuilders/formBuilderJsonSchema";
 export { FORM_BUILDER_UI_SCHEMA } from "./schema/formBuilders/formBuilderUiSchema";
+export * from "./contexts/ComponentPickerContext";

package/dist/rendering/renderers/ComponentPicker.js

@@ -8,36 +8,21 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useEffect, useMemo, useState } from 'react';
-import { Paper, Typography, Box, TextField, Autocomplete } from '@mui/material';
+import { Paper, Button } from '@mui/material';
 import { useLocalErrors } from '../hooks/errors';
 import { ComponentPool } from '../registry/types';
 import { registerComponent } from '../registry/components';
 import { CoreService } from '../../api/generated/core';
+import { useComponentPicker } from '../contexts/ComponentPickerContext';
 const FormComponentPicker = ({ components, selectedComponent, onChange, templateIds, getError, label, enabled }) => {
     const selected = components.find(c => c.id === selectedComponent) || null;
+    const { get } = useComponentPicker();
     return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 1, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
-        React.createElement(Typography, { variant: 'h6' }, label),
-        React.createElement(Autocomplete, { disabled: !enabled, options: components, getOptionLabel: (option) => option.name, value: selected, onChange: (_, newValue) => onChange(newValue ? newValue.id : null), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { variant: "outlined", placeholder: "Search and select a component", disabled: !enabled, InputProps: Object.assign(Object.assign({}, params.InputProps), { readOnly: !enabled }), sx: {
-                    "& input": {
-                        cursor: enabled ? "pointer" : "default",
-                    },
-                    "& .MuiAutocomplete-endAdornment": {
-                        cursor: enabled ? "pointer" : "default",
-                    },
-                } }))), renderOption: (props, option) => (React.createElement("li", Object.assign({}, props, { style: { cursor: enabled ? "pointer" : "default" } }),
-                React.createElement(Box, null,
-                    React.createElement(Typography, { variant: "body1" }, option.name),
-                    React.createElement(Typography, { variant: "caption", color: "text.secondary" },
-                        "Version: v",
-                        option.revision)))), isOptionEqualToValue: (option, value) => option.id === value.id, sx: {
-                cursor: enabled ? "pointer" : "default",
-                "& .MuiAutocomplete-inputRoot": {
-                    cursor: enabled ? "pointer" : "default",
-                },
-                "& .MuiAutocomplete-endAdornment": {
-                    cursor: enabled ? "pointer" : "default",
-                },
-            } })));
+        React.createElement(Button, { onClick: (e) => {
+                get()
+                    .then((comp) => onChange(comp.id))
+                    .finally(() => { });
+            } }, (selected === null || selected === void 0 ? void 0 : selected.name) || label)));
 };
 const FormRendererComponentPicker = ({ data, handleChange, path, label, enabled, schema }) => {
     const [components, setComponents] = useState([]);

package/dist/rendering/util/api.d.ts

@@ -0,0 +1,8 @@
+import { DTOComponentRead, Pagination } from "../../api/generated/core/exports";
+export declare const getAllPartners: () => Promise<any[]>;
+export declare const fetchComponents: (filters?: Record<string, string>) => Promise<{
+    data: Array<DTOComponentRead & {
+        revisions: DTOComponentRead[];
+    }>;
+    pagination: Pagination;
+}>;

package/dist/rendering/util/api.js

@@ -0,0 +1,54 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { OpenAPI } from "../../api/generated/core";
+import { InternalServices } from "../../api/init";
+const Regions = ['patagonia', 'arctic', 'antarctica'];
+export const getAllPartners = () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const finalData = [];
+        for (let index = 0; index < Regions.length; index++) {
+            const region = Regions[index];
+            const partners = yield InternalServices.SwoopService.partnersGetCollection(1, 500, region);
+            // @ts-expect-error
+            if (partners === null || partners === void 0 ? void 0 : partners.member) {
+                // @ts-expect-error
+                finalData.push(...partners.member);
+            }
+        }
+        return finalData;
+    }
+    catch (error) {
+        console.error("Failed to fetch members:", error);
+        return [];
+    }
+});
+export const fetchComponents = (filters) => __awaiter(void 0, void 0, void 0, function* () {
+    const idToken = OpenAPI.TOKEN;
+    const query = new URLSearchParams(filters || {}).toString() || "limit=2000";
+    const response = yield fetch(`${OpenAPI.BASE}/core-data-service/v1/components?${query}`, {
+        headers: {
+            Authorization: `Bearer ${idToken}`,
+        },
+    });
+    const data = yield response.json();
+    const componentsByGroup = new Map();
+    (data.data || []).forEach((component) => {
+        const groupId = component.revisionGroupId;
+        if (!componentsByGroup.has(groupId)) {
+            componentsByGroup.set(groupId, []);
+        }
+        componentsByGroup.get(groupId).push(component);
+    });
+    const latestComponents = Array.from(componentsByGroup.values()).map((components) => {
+        const sorted = components.sort((a, b) => b.revision - a.revision);
+        return Object.assign(Object.assign({}, sorted[0]), { revisions: sorted });
+    });
+    return { data: latestComponents, pagination: data.pagination };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "swoop-common",
-    "version": "2.1.18",
+    "version": "2.1.20",
     "main": "dist/api/index.js",
     "types": "dist/api/index.d.ts",
     "exports": {