@quillsql/react 2.13.42 → 2.13.44

package/dist/cjs/components/ReportBuilder/AddColumnModal.js

@@ -8,10 +8,81 @@ const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const UiComponents_1 = require("../UiComponents");
 const textProcessing_1 = require("../../utils/textProcessing");
-function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, schemaLoading, TextInputComponent, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, LoadingComponent = UiComponents_1.QuillLoadingComponent, }) {
+const ReportBuilder_1 = require("../../models/ReportBuilder");
+const schema_1 = require("../../utils/schema");
+function AddColumnModal({ onSave, 
+// selectedTables,
+selectedColumns, schema, schemaLoading, TextInputComponent, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, LoadingComponent = UiComponents_1.QuillLoadingComponent, }) {
+    const [primaryTable, setPrimaryTable] = (0, react_1.useState)(undefined);
     const [search, setSearch] = (0, react_1.useState)('');
-    const [searchResults, setSearchResults] = (0, react_1.useState)(orderedColumnNames);
     const textInputContainerRef = (0, react_1.useRef)(null);
+    const [modalSelectedColumns, setModalSelectedColumns] = (0, react_1.useState)(selectedColumns.map((col) => `${col.table}.${col.field}`));
+    const foreignKeyMap = (0, react_1.useMemo)(() => {
+        return (0, schema_1.getSchemaForeignKeyMapping)(schema);
+    }, [schema]);
+    const columnOptions = schema
+        .filter((table) => {
+        if (!primaryTable)
+            return true;
+        return (table.name === primaryTable ||
+            foreignKeyMap[primaryTable]?.some((tableInfo) => tableInfo.foreignTable === table.name) ||
+            foreignKeyMap[table.name]?.some((tableInfo) => tableInfo.foreignTable === primaryTable));
+    })
+        .sort((a, b) => {
+        // Ensure primaryTable is always first, this is essential for SELECT ALL
+        if (primaryTable) {
+            if (a.name === primaryTable)
+                return -1;
+            if (b.name === primaryTable)
+                return 1;
+        }
+        return 0; // Keep original order otherwise
+    })
+        .flatMap((table) => table.columns
+        .map((col) => `${table.name}.${col.field}`)
+        .sort((a, b) => {
+        const aIsId = a.endsWith('.id') ||
+            a.endsWith('_id') ||
+            a.endsWith('Id') ||
+            a === 'id';
+        const bIsId = b.endsWith('.id') ||
+            b.endsWith('_id') ||
+            b.endsWith('Id') ||
+            b === 'id';
+        if (aIsId && !bIsId)
+            return 1;
+        if (bIsId && !aIsId)
+            return -1;
+        return 0;
+    }));
+    const [orderedColumnNames, setOrderedColumnNames] = (0, react_1.useState)(columnOptions);
+    const isSelectedAllColumns = columnOptions.length === modalSelectedColumns.length;
+    const duplicateColumnNames = (0, react_1.useMemo)(() => {
+        const columnNames = modalSelectedColumns.map((col) => {
+            const [, ...rest] = col.split('.');
+            return rest.join('.');
+        });
+        const duplicates = columnNames.filter((name, i) => columnNames.indexOf(name) !== i);
+        return duplicates;
+    }, [modalSelectedColumns, schema]);
+    const searchResults = (0, react_1.useMemo)(() => {
+        return orderedColumnNames.filter((column) => {
+            return (columnOptions.includes(column) &&
+                (search.length === 0 ||
+                    column.toLowerCase().includes(search.toLowerCase()) ||
+                    (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(column)
+                        .toLowerCase()
+                        .includes(search.toLowerCase())));
+        });
+    }, [search, columnOptions, orderedColumnNames]);
+    (0, react_1.useEffect)(() => {
+        if (modalSelectedColumns.length === 0) {
+            setPrimaryTable(undefined);
+        }
+        else {
+            setPrimaryTable(modalSelectedColumns[0]?.split('.')[0]);
+        }
+    }, [modalSelectedColumns]);
     const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
         coordinateGetter: sortable_1.sortableKeyboardCoordinates,
     }));
@@ -28,25 +99,6 @@ function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, sel
             });
         }
     }
-    const getColumnsInPivot = () => {
-        if (!pivot)
-            return [];
-        const { valueField, rowField, columnField } = pivot;
-        return [valueField, rowField, columnField].filter(Boolean);
-    };
-    (0, react_1.useEffect)(() => {
-        setSearchResults(orderedColumnNames
-            .filter((row) => {
-            const [table] = row.split('.');
-            const selectedTable = selectedColumns[0]?.split('.')[0];
-            return selectedColumns.length === 0 || selectedTable === table;
-        })
-            .filter((row) => search.length === 0 ||
-            row.includes(search) ||
-            (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(row)
-                .toLowerCase()
-                .includes(search.toLowerCase())));
-    }, [search, orderedColumnNames, selectedColumns]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -69,11 +121,35 @@ function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, sel
                             gap: 8,
                             overflowY: 'auto',
                             maxWidth: '400px',
-                        }, children: [searchResults.map((value) => {
-                                return ((0, jsx_runtime_1.jsx)(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value
+                        }, children: [searchResults.map((value, index) => {
+                                return ((0, jsx_runtime_1.jsx)(SortableItem, { selectedColumns: modalSelectedColumns, setSelectedColumns: (newSelectedColumns) => {
+                                        if (!primaryTable) {
+                                            setModalSelectedColumns(newSelectedColumns);
+                                        }
+                                        else {
+                                            // need to check if primary table is in selected columns
+                                            const columnTables = [
+                                                ...new Set(newSelectedColumns.map((col) => {
+                                                    const [table] = col.split('.');
+                                                    return table || '';
+                                                })),
+                                            ];
+                                            if (columnTables.includes(primaryTable)) {
+                                                setModalSelectedColumns(newSelectedColumns);
+                                            }
+                                            else if (columnTables.length === 1) {
+                                                setPrimaryTable(columnTables[0]);
+                                                setModalSelectedColumns(newSelectedColumns);
+                                            }
+                                            else {
+                                                setPrimaryTable(undefined);
+                                                setModalSelectedColumns([]);
+                                            }
+                                        }
+                                    }, id: value, label: value
                                         .split('.')
                                         .map((v) => (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(v))
-                                        .join(' | '), SelectColumn: SelectColumn }, value));
+                                        .join(' | '), SelectColumn: SelectColumn }, index));
                             }), search.length > 0 && searchResults.length === 0 && ((0, jsx_runtime_1.jsx)(ColumnSearchEmptyState, {}))] }) }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     width: '100%',
@@ -81,50 +157,75 @@ function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, sel
                     gap: 8,
                     justifyContent: 'end',
                     marginTop: 12,
-                }, children: [selectedColumns.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), selectedColumns.length > 0 && !isSelectedAllColumns() && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns(searchResults.filter((row) => {
-                            const [table] = row.split('.');
-                            return selectedColumns[0].startsWith(table);
-                        })), label: "Select all" })), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
-                            // follow the ordering of the ordered column names
-                            let tableName = initialTableName;
-                            const orderedSelectedColumns = [];
-                            for (const value of orderedColumnNames) {
-                                const [table, ...rest] = value.split('.');
-                                const column = rest.join('.');
-                                if (selectedColumns.includes(value)) {
-                                    tableName = table;
-                                    orderedSelectedColumns.push(column);
+                }, children: [modalSelectedColumns.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setModalSelectedColumns([]), label: "Clear" })), modalSelectedColumns.length > 0 && !isSelectedAllColumns && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setModalSelectedColumns(columnOptions), label: "Select all" })), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
+                            const newTableNames = [
+                                ...new Set(modalSelectedColumns
+                                    .map((col) => {
+                                    const [table] = col.split('.');
+                                    return table;
+                                })
+                                    .filter((table) => table !== undefined)),
+                            ];
+                            const newTables = newTableNames
+                                .map((table) => {
+                                if (primaryTable && primaryTable !== table) {
+                                    const asForeignTable = foreignKeyMap[primaryTable]?.find((tableInfo) => tableInfo.foreignTable === table);
+                                    const asPrimaryTable = foreignKeyMap[table]?.find((tableInfo) => tableInfo.foreignTable === primaryTable);
+                                    const foreignTable = asForeignTable || asPrimaryTable;
+                                    const primaryTableField = asForeignTable?.foreignKey ||
+                                        asPrimaryTable?.foreignTablePrimaryKey;
+                                    const foreignTableField = asForeignTable?.foreignTablePrimaryKey ||
+                                        asPrimaryTable?.foreignKey;
+                                    if (!foreignTable ||
+                                        !primaryTableField ||
+                                        !foreignTableField) {
+                                        return null;
+                                    }
+                                    return {
+                                        name: table,
+                                        join: {
+                                            type: ReportBuilder_1.JoinType.JOIN,
+                                            condition: {
+                                                operator: '=',
+                                                left: {
+                                                    table: primaryTable,
+                                                    field: primaryTableField,
+                                                },
+                                                right: {
+                                                    table,
+                                                    field: foreignTableField,
+                                                },
+                                            },
+                                        },
+                                    };
+                                }
+                                else {
+                                    return { name: table };
                                 }
-                            }
-                            if (orderedSelectedColumns.length === 0) {
-                                clearAllState();
-                                return;
-                            }
-                            // If there is already an AST saved in state, only update the columns
-                            // otherwise fill in the defaultAST shape and also update columns.
-                            const fallbackAST = {
-                                ...defaultAST,
-                                from: [{ ...defaultTable, table: tableName }],
-                                columns: orderedSelectedColumns.map((name) => nameToColumn(name)),
-                            };
-                            const newBaseAst = {
-                                ...baseAst,
-                                from: [{ ...defaultTable, table: tableName }],
-                                columns: baseAst?.columns.length
-                                    ? orderedSelectedColumns.map((name) => nameToColumn(name))
-                                    : baseAst?.columns,
-                            };
-                            const newAst = baseAst ? newBaseAst : fallbackAST;
-                            setBaseAst(newAst);
-                            // If the user deleted a column that was in the pivot, delete the Pivot
-                            const columnInAST = (col) => newAst.columns.find((c) => c.expr?.value === col ||
-                                c.expr?.column === col ||
-                                c.as === col);
-                            if (pivot &&
-                                !getColumnsInPivot().every((c) => columnInAST(c))) {
-                                setPivot(null);
-                            }
-                            onSave();
+                            })
+                                .filter((table) => table !== null);
+                            const sortedSelectedColumns = orderedColumnNames.filter((col) => modalSelectedColumns.includes(col));
+                            const newColumns = sortedSelectedColumns
+                                .map((col) => {
+                                const [table, ...rest] = col.split('.');
+                                const field = rest.join('.');
+                                if (!table ||
+                                    !field ||
+                                    !newTables.some((t) => t.name === table)) {
+                                    return null;
+                                }
+                                else {
+                                    return {
+                                        table: table || '',
+                                        field: field || '',
+                                        alias: duplicateColumnNames.includes(field)
+                                            ? `${table}_${field}`
+                                            : undefined,
+                                    };
+                                }
+                            })
+                                .filter((col) => col !== null);
+                            onSave(newTables, newColumns);
                         }, label: "Select columns" })] })] }));
 }
 const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, }) => {
@@ -134,14 +235,10 @@ const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectCo
         transition,
     };
     const handleSelect = () => {
-        setSelectedColumns((selectedColumns) => {
-            if (selectedColumns.includes(id)) {
-                return selectedColumns.filter((column) => column !== id);
-            }
-            else {
-                return [...selectedColumns, id];
-            }
-        });
+        const newSelectedColumns = selectedColumns.includes(id)
+            ? selectedColumns.filter((column) => column !== id)
+            : [...selectedColumns, id];
+        setSelectedColumns(newSelectedColumns);
     };
     return ((0, jsx_runtime_1.jsx)("div", { style: { userSelect: 'none', ...style }, ref: setNodeRef, children: (0, jsx_runtime_1.jsx)(SelectColumn, { isSelected: selectedColumns?.includes(id), setSelected: handleSelect, label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(label), DragHandle: (props) => ((0, jsx_runtime_1.jsx)("div", { style: {
                     cursor: 'grab',

package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts

@@ -1,15 +1,11 @@
 import { ButtonComponentProps, SelectComponentProps } from '../UiComponents';
 import { SortPopoverComponentProps } from './ui';
 import { ColumnInternal } from '../../models/Columns';
-export declare const SortSentence: ({ sortField, sortDirection, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, onSave, popoverTitle, SortPopover, EditPopover, Select, Button, SecondaryButton, disabled, }: {
+export declare const SortSentence: ({ sortField, sortDirection, columns, handleDelete, setOpenPopover, onSave, popoverTitle, SortPopover, EditPopover, Select, Button, SecondaryButton, disabled, }: {
     sortField: string;
     sortDirection: string;
     columns: ColumnInternal[];
-    setIsPending: any;
-    setEditPopoverKey: any;
-    setActiveEditItem: any;
     setOpenPopover: any;
-    keyPrefix?: any;
     handleDelete: any;
     onSave: any;
     popoverTitle?: string;

package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddSortPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddSortPopover.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,oBAAoB,EAGpB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,yBAAyB,EAAE,MAAM,MAAM,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAStD,eAAO,MAAM,YAAY,mOAkBtB;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,YAAY,EAAE,GAAG,CAAC;IAClB,iBAAiB,EAAE,GAAG,CAAC;IACvB,iBAAiB,EAAE,GAAG,CAAC;IACvB,cAAc,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,YAAY,EAAE,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,WAAW,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,mDAoDA,CAAC;AAEF,eAAO,MAAM,cAAc,+FAUxB;IACD,MAAM,EAAE,GAAG,CAAC;IACZ,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE,4CAmEA,CAAC"}
+{"version":3,"file":"AddSortPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddSortPopover.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,oBAAoB,EAGpB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,yBAAyB,EAAE,MAAM,MAAM,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAStD,eAAO,MAAM,YAAY,oKActB;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,WAAW,EAAE,GAAG,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,mDA6CA,CAAC;AAEF,eAAO,MAAM,cAAc,+FAUxB;IACD,MAAM,EAAE,GAAG,CAAC;IACZ,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE,4CAmEA,CAAC"}

package/dist/cjs/components/ReportBuilder/AddSortPopover.js

@@ -12,22 +12,15 @@ const SORT_VALUE_TO_LABEL = {
     asc: 'ascending',
     desc: 'descending',
 };
-const SortSentence = ({ sortField, sortDirection, keyPrefix, columns, handleDelete, setEditPopoverKey, setOpenPopover, setActiveEditItem, setIsPending, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, Select = QuillSelect_1.QuillSelectComponent, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, disabled = false, }) => {
+const SortSentence = ({ sortField, sortDirection, columns, handleDelete, setOpenPopover, onSave, popoverTitle = 'Edit Sort', SortPopover, EditPopover, Select = QuillSelect_1.QuillSelectComponent, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, disabled = false, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleSetIsOpen = (isOpen) => {
         setIsOpen(isOpen);
-        if (!isOpen) {
-            setIsPending(false);
-            setActiveEditItem(null);
-        }
     };
     const handleClickDelete = (e) => {
         e.stopPropagation(); // don't call onClick handler
-        setIsPending(false);
-        handleDelete(keyPrefix);
-        setActiveEditItem(null);
         setOpenPopover(null);
-        setEditPopoverKey(null);
+        handleDelete();
     };
     if (!sortField) {
         return null;

package/dist/cjs/components/ReportBuilder/DraggableColumns.d.ts

@@ -0,0 +1,17 @@
+import { ReportBuilderColumn } from '../../models/ReportBuilder';
+interface DraggableColumnsProps {
+    columns: ReportBuilderColumn[];
+    onColumnOrderChange: (newOrder: ReportBuilderColumn[]) => void;
+    DraggableColumnComponent: (props: {
+        label: string;
+        onDelete: () => void;
+        DragHandle: ({ dragIcon }: {
+            dragIcon: () => JSX.Element;
+        }) => JSX.Element;
+        deleteDisabled?: boolean;
+    }) => JSX.Element;
+    loading: boolean;
+}
+export default function DraggableColumns({ columns, onColumnOrderChange, DraggableColumnComponent, loading, }: DraggableColumnsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DraggableColumns.d.ts.map

package/dist/cjs/components/ReportBuilder/DraggableColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableColumns.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/DraggableColumns.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IAC/D,wBAAwB,EAAE,CAAC,KAAK,EAAE;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;YAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAA;SAAE,KAAK,GAAG,CAAC,OAAO,CAAC;QAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;KAC1B,KAAK,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,mBAAmB,EACnB,wBAAwB,EACxB,OAAO,GACR,EAAE,qBAAqB,2CAmFvB"}

package/dist/cjs/components/ReportBuilder/DraggableColumns.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DraggableColumns;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const DraggableItem_1 = __importDefault(require("./DraggableItem"));
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+const textProcessing_1 = require("../../utils/textProcessing");
+function DraggableColumns({ columns, onColumnOrderChange, DraggableColumnComponent, loading, }) {
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }));
+    const columnNames = (0, react_1.useMemo)(() => {
+        return columns.map((col) => `${col.table}.${col.alias ?? col.field}`);
+    }, [columns]);
+    // const [orderedColumnNames, setOrderedColumnNames] = useState<string[]>([]);
+    const columnNameToLabel = (columnName) => {
+        return (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(columnName.split('.').pop() ?? '');
+    };
+    // When a drag event ends, switch the item order.
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (!active || !over)
+            return;
+        if (active.id !== over.id) {
+            const oldIndex = columnNames.findIndex((c) => c.endsWith(active.id));
+            const newIndex = columnNames.findIndex((c) => c.endsWith(over.id));
+            const newOrder = (0, sortable_1.arrayMove)(columnNames, oldIndex, newIndex);
+            const orderToColumns = newOrder
+                .map((name) => {
+                const [table, field] = name.split('.');
+                return columns.find((col) => col.table === table &&
+                    (col.alias ? col.alias === field : col.field === field));
+            })
+                .filter((col) => col !== undefined);
+            onColumnOrderChange(orderToColumns);
+        }
+    }
+    function onDeleteColumn(columnName) {
+        const newColumns = columns.filter((col) => `${col.table}.${col.alias ?? col.field}` !== columnName);
+        onColumnOrderChange(newColumns);
+    }
+    return ((0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columnNames, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8,
+                }, children: [columnNames.map((name) => ((0, jsx_runtime_1.jsx)(DraggableItem_1.default, { id: name, label: columnNameToLabel(name), onDelete: () => !loading && onDeleteColumn(name), loading: loading, DraggableColumnComponent: DraggableColumnComponent }, name))), columnNames.length > 0 && (0, jsx_runtime_1.jsx)("div", { style: { height: 6 } })] }) }) }));
+}

package/dist/cjs/components/ReportBuilder/DraggableItem.d.ts

@@ -0,0 +1,17 @@
+interface DraggableItemProps {
+    id: string;
+    label: string;
+    onDelete: () => void;
+    DraggableColumnComponent: (props: {
+        label: string;
+        onDelete: () => void;
+        DragHandle: ({ dragIcon }: {
+            dragIcon: () => JSX.Element;
+        }) => JSX.Element;
+        deleteDisabled?: boolean;
+    }) => JSX.Element;
+    loading: boolean;
+}
+export default function DraggableItem({ id, label, onDelete, DraggableColumnComponent, loading, }: DraggableItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DraggableItem.d.ts.map

package/dist/cjs/components/ReportBuilder/DraggableItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableItem.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/DraggableItem.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wBAAwB,EAAE,CAAC,KAAK,EAAE;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;YAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAA;SAAE,KAAK,GAAG,CAAC,OAAO,CAAC;QAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;KAC1B,KAAK,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,EAAE,EACF,KAAK,EACL,QAAQ,EACR,wBAAwB,EACxB,OAAO,GACR,EAAE,kBAAkB,2CA6BpB"}

package/dist/cjs/components/ReportBuilder/DraggableItem.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DraggableItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const textProcessing_1 = require("../../utils/textProcessing");
+function DraggableItem({ id, label, onDelete, DraggableColumnComponent, loading, }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: id });
+    const style = {
+        transform: utilities_1.CSS.Transform.toString(transform),
+        transition,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { style: { ...style }, ref: setNodeRef, children: (0, jsx_runtime_1.jsx)(DraggableColumnComponent, { label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(label), onDelete: onDelete, DragHandle: (props) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                    cursor: 'grab',
+                }, ...attributes, ...listeners, children: (0, jsx_runtime_1.jsx)(props.dragIcon, {}) })), deleteDisabled: loading }) }));
+}

package/dist/cjs/components/ReportBuilder/FilterModal.d.ts

@@ -1,19 +1,13 @@
 import { InternalFilter, Operator } from '../../models/Filter';
-import { ColumnInternal } from '../../models/Columns';
+import { UniqueValuesByTable, Table, UniqueValuesByColumn } from '../../models/Tables';
 interface FilterModalProps {
-    schema?: {
-        columns: ColumnInternal[];
-    };
+    schema: Table[];
+    tables?: string[];
     filter?: InternalFilter;
-    fieldValuesMap: {
-        [key: string]: string[];
-    } | {
-        [key: string]: {
-            [key: string]: string[];
-        };
-    };
+    fieldValuesMap: UniqueValuesByColumn | UniqueValuesByTable;
     fieldValuesMapIsLoading?: boolean;
     customOperatorOptions?: OperatorOptionsMap;
+    hideTableName?: boolean;
     onSubmitFilter: (filter: InternalFilter) => void;
     onDeleteFilter: () => void;
     ButtonComponent: React.ComponentType<any>;
@@ -28,6 +22,6 @@ type OperatorOptionsMap = {
 /**
  * Modal for adding, editing, and deleting Filters
  */
-export default function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading, customOperatorOptions, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }: FilterModalProps): import("react/jsx-runtime").JSX.Element | null;
+export default function FilterModal({ schema, tables, filter, fieldValuesMap, fieldValuesMapIsLoading, customOperatorOptions, hideTableName, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }: FilterModalProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=FilterModal.d.ts.map

package/dist/cjs/components/ReportBuilder/FilterModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/FilterModal.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,cAAc,EAId,QAAQ,EAMT,MAAM,qBAAqB,CAAC;AAM7B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE;QAAE,OAAO,EAAE,cAAc,EAAE,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,cAAc,EACZ;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,GACzB;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;SAAE,CAAA;KAAE,CAAC;IACnD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,kBAAkB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACpD,oBAAoB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAChD;AAQD,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,EAAE,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAM,EACN,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACrB,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,oBAAoB,GACrB,EAAE,gBAAgB,kDAi3BlB"}
+{"version":3,"file":"FilterModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/FilterModal.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,cAAc,EAId,QAAQ,EAMT,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EACL,mBAAmB,EACnB,KAAK,EACL,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,UAAU,gBAAgB;IACxB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,cAAc,EACZ,oBAAoB,GAClB,mBAAmB,CAAC;IACxB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,kBAAkB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACpD,oBAAoB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAChD;AAQD,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,EAAE,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAM,EACN,MAAM,EACN,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,oBAAoB,GACrB,EAAE,gBAAgB,kDAk4BlB"}

package/dist/cjs/components/ReportBuilder/FilterModal.js

@@ -13,7 +13,7 @@ const filterProcessing_1 = require("../../utils/filterProcessing");
 /**
  * Modal for adding, editing, and deleting Filters
  */
-function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading, customOperatorOptions, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }) {
+function FilterModal({ schema, tables, filter, fieldValuesMap, fieldValuesMapIsLoading, customOperatorOptions, hideTableName, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }) {
     const [field, setField] = (0, react_1.useState)('');
     const [fieldOptions, setFieldOptions] = (0, react_1.useState)([]);
     const [fieldValues, setFieldValues] = (0, react_1.useState)([]);
@@ -32,7 +32,7 @@ function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading,
     const memoizedFilter = (0, react_1.useMemo)(() => filter, [JSON.stringify(filter)]);
     (0, react_1.useEffect)(() => {
         if (!filter) {
-            onFieldChange(field, fieldOptions);
+            onFieldChange(field, fieldOptions, table);
         }
     }, [memoizedFieldValuesMap]);
     // Define all supported operator options for each field type
@@ -80,7 +80,8 @@ function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading,
     (0, react_1.useEffect)(() => {
         if (filter) {
             setField(filter.field);
-            onFieldChange(filter.field, fieldOptions);
+            setTable(filter.table);
+            onFieldChange(filter.field, fieldOptions, filter.table);
             setType(filter.fieldType);
             onTypeChange(filter.fieldType);
             setValue(filter.filterType === 'date-filter' ? filter.value.value : filter.value);
@@ -102,21 +103,26 @@ function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading,
     }, [memoizedFilter]);
     // Given the schema, set the options for the field
     (0, react_1.useEffect)(() => {
-        if (schema && schema.columns) {
-            const fo = schema.columns.map((column) => {
-                return {
-                    name: column.field,
-                    type: column.fieldType,
-                    table: column.table ?? '',
-                };
+        if (schema) {
+            const fo = schema.flatMap((table) => {
+                if (tables && !tables.includes(table.name)) {
+                    return [];
+                }
+                return table.columns.map((column) => {
+                    return {
+                        name: column.field,
+                        type: column.fieldType,
+                        table: table.name,
+                    };
+                });
             });
             setFieldOptions(fo);
             if (!filter && fo.length > 0 && fo[0]) {
                 setField(fo[0].name);
-                onFieldChange(fo[0].name, fo);
+                onFieldChange(fo[0].name, fo, fo[0].table);
             }
             else {
-                onFieldChange(field !== '' ? field : (filter?.field ?? ''), fo);
+                onFieldChange(field !== '' ? field : (filter?.field ?? ''), fo, table ?? filter?.table);
             }
         }
     }, [schema]);
@@ -209,9 +215,9 @@ function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading,
             setUnit('');
         }
     }
-    function onFieldChange(field, fieldOptions) {
+    function onFieldChange(field, fieldOptions, table) {
         if (field !== '') {
-            const selectedOption = fieldOptions.find((option) => option.name === field);
+            const selectedOption = fieldOptions.find((option) => option.name === field && (!table || option.table === table));
             if (selectedOption) {
                 const fieldValues = getFieldValues(selectedOption.name, selectedOption.table);
                 if (filterInitialized || !filter) {
@@ -301,10 +307,13 @@ function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading,
         }
     };
     const handleFieldChange = (event) => {
-        const newField = event.target.value;
-        if (typeof newField === 'string' && newField !== field) {
+        const value = event.target.value;
+        if (typeof value === 'string') {
+            const [_table, _field] = value.split(':');
+            const newField = _field;
+            const newTable = _table !== '' ? _table : undefined;
             setField(newField);
-            onFieldChange(newField, fieldOptions);
+            onFieldChange(newField, fieldOptions, newTable);
         }
     };
     // Handler for date range selection
@@ -558,10 +567,10 @@ function FilterModal({ schema, filter, fieldValuesMap, fieldValuesMapIsLoading,
                         gap: '20px',
                         flexDirection: 'row',
                         width: '100%',
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: field, width: 200, onChange: handleFieldChange, options: [
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 20 }, children: (0, jsx_runtime_1.jsx)(SelectComponent, { value: `${table ?? ''}:${field}`, width: 200, onChange: handleFieldChange, options: [
                                     ...fieldOptions.map((option) => ({
-                                        value: option.name,
-                                        label: option.table !== ''
+                                        value: `${option.table}:${option.name}`,
+                                        label: option.table !== '' && !hideTableName
                                             ? `${(0, textProcessing_1.snakeAndCamelCaseToTitleCase)(option.name)} (${option.table})`
                                             : (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(option.name),
                                     })),