@quillsql/admin 1.4.0 → 1.6.0

package/dist/cjs/modals/EditFiltersModal.js

@@ -0,0 +1,345 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditFiltersModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AdminProvider_1 = require("../AdminProvider");
+const react_2 = require("@quillsql/react");
+const constants_1 = require("../utils/constants");
+const Admin_1 = require("../Admin");
+const InputLabel_1 = __importDefault(require("../components/InputLabel"));
+const CardSection_1 = __importDefault(require("../components/CardSection"));
+const TogglePrimitive_1 = __importDefault(require("../primitives/TogglePrimitive"));
+const SegmentedControl_1 = require("../components/SegmentedControl");
+function EditFiltersModal({ isOpen, dashboardData, selectedDashboard, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }) {
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
+    const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)('');
+    const { data } = (0, react_2.useDashboard)(selectedDashboard.name);
+    const [isDateComparison, setIsDateComparison] = (0, react_1.useState)(false);
+    const [newFilters, setNewFilters] = (0, react_1.useState)([]);
+    const [initialRange, setInitialRange] = (0, react_1.useState)(constants_1.defaultDateRange);
+    const [showDateFilter, setShowDateFilter] = (0, react_1.useState)(false);
+    const [newDateFilter, setNewDateFilter] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!selectedDashboard) {
+            return;
+        }
+        setSelectedDashboardName(selectedDashboard);
+        setIsDateComparison(selectedDashboard.dateFilter?.comparison);
+        setNewFilters(selectedDashboard.filters || []);
+        setNewDateFilter(selectedDashboard.dateFilter);
+        setSelectedDashboardName(selectedDashboard.name);
+        setShowDateFilter(!!selectedDashboard.dateFilter);
+    }, [selectedDashboard]);
+    const handleAddFilter = async () => {
+        setNewFilters([...newFilters, { label: '' }]);
+    };
+    const handleSubmitDashboardChanges = async () => {
+        if (!selectedDashboardName ||
+            newFilters.some((filter) => !filter.label) ||
+            (newDateFilter &&
+                Object.keys(newDateFilter).length &&
+                !newDateFilter.label)) {
+            alert('Empty fields');
+            return;
+        }
+        if (newFilters.filter((elem) => !elem.field).length) {
+            alert(`no filter field for: ${newFilters.filter((elem) => !elem.field)[0].label}`);
+            return;
+        }
+        const updatedFilters = newFilters.map((filter) => {
+            const table = state.tables.find((table) => table.name === filter.table);
+            const filterType = (0, Admin_1.getPostgresBasicType)(table.columns.find((col) => col.name === filter.field));
+            return {
+                table: filter.table,
+                field: filter.field,
+                labelField: filter.field,
+                label: filter.label,
+                filterType,
+                stringFilterType: filter.stringFilterType,
+            };
+        });
+        if (dashNames &&
+            dashNames.length > 0 &&
+            dashNames.some((dashName) => dashName.name === selectedDashboardName &&
+                selectedDashboardName !== selectedDashboard.name)) {
+            alert('Dashboard name already taken!');
+            return;
+        }
+        const fieldsSet = new Set();
+        const hasDuplicateField = updatedFilters.some((filter) => {
+            if (fieldsSet.has(filter.field)) {
+                return true;
+            }
+            else {
+                fieldsSet.add(filter.field);
+                return false;
+            }
+        });
+        if (hasDuplicateField ||
+            (newDateFilter &&
+                Object.keys(newDateFilter).length > 0 &&
+                updatedFilters.some((filter) => filter.filterType === 'date'))) {
+            alert('Maximum of one filter per field');
+            return;
+        }
+        let allValid = true;
+        updatedFilters.forEach((filter) => {
+            if (filter.filterType !== 'string' && filter.filterType !== 'date') {
+                allValid = false;
+                console.error(`Invalid filterType found: ${filter.filterType}`);
+            }
+        });
+        if (!allValid) {
+            alert('We only support string and date filters.');
+            return;
+        }
+        const filterProblems = [];
+        if (newDateFilter) {
+            data.newQueries.forEach((chart) => {
+                if (!chart.dateField ||
+                    !chart.dateField.table ||
+                    !chart.dateField.field) {
+                    filterProblems.push({
+                        chart: chart.name,
+                        filter: `${newDateFilter.label} (Date filter)`,
+                    });
+                }
+            });
+        }
+        updatedFilters.forEach((filter) => {
+            data.newQueries.forEach((chart) => {
+                const chartTable = chart.referencedTables.find((table) => table === filter.table);
+                if (!chartTable) {
+                    filterProblems.push({ chart: chart.name, filter: filter.label });
+                }
+            });
+        });
+        if (filterProblems.length > 0) {
+            alert(`The following filters are not applicable to the following charts:\n\n${filterProblems.map((problem) => `${problem.filter} - ${problem.chart}`).join('\n')}\n\nPlease update the charts or remove the filters.`);
+            return;
+        }
+        const url = `${constants_1.QUILL_SERVER}/dashfilter/${client._id}/`;
+        const body = {
+            newDashboardName: selectedDashboardName,
+            filters: updatedFilters,
+            dateFilter: newDateFilter
+                ? {
+                    ...newDateFilter,
+                    comparison: isDateComparison,
+                    primaryRange: initialRange,
+                }
+                : null,
+            name: selectedDashboard.name,
+            databaseType: state.client.databaseType,
+        };
+        const headers = {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer `,
+        };
+        try {
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: headers,
+                body: JSON.stringify(body),
+            });
+            await onSave(selectedDashboardName);
+            setIsOpen(false);
+        }
+        catch (e) {
+            console.log('error');
+        }
+    };
+    const handleDeleteFilter = (filter) => {
+        setNewFilters(newFilters.filter((f) => f !== filter));
+    };
+    const handleDeleteDateFilter = async () => {
+        setShowDateFilter(false);
+        setNewDateFilter(null);
+    };
+    const handleAddDateFilter = async () => {
+        setShowDateFilter(true);
+        setNewDateFilter({ label: null });
+    };
+    const handleDeleteDashboard = async () => {
+        if (confirm('Are you sure? This action cannot be undone.')) {
+            const URL = `${constants_1.QUILL_SERVER}/dashboard/${selectedDashboard.name}`;
+            await fetch(URL, {
+                method: 'DELETE',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    clientId: client._id,
+                    databaseType: state.client.databaseType,
+                }),
+            });
+            setIsOpen(false);
+            setNewFilters([]);
+            await onSave();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => {
+            setIsOpen(false);
+            setSelectedDashboardName(selectedDashboard);
+            setIsDateComparison(selectedDashboard.dateFilter?.comparison);
+            setNewFilters(selectedDashboard.filters || []);
+            setNewDateFilter(selectedDashboard.dateFilter);
+            setSelectedDashboardName(selectedDashboard.name);
+            setShowDateFilter(!!selectedDashboard.dateFilter);
+        }, style: {
+            minWidth: '814px',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                gap: 16,
+                flexDirection: 'column',
+                width: '100%',
+                height: '100%',
+                maxHeight: '100%',
+                overflowY: 'auto',
+            }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Manage dashboard" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Name" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: selectedDashboardName, onChange: (e) => setSelectedDashboardName(e.target.value) }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '10px',
+                            }, children: [(0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Date Filter" }), showDateFilter && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            gap: '10px',
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Label" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            alignItems: 'center',
+                                                        }, children: (0, jsx_runtime_1.jsx)(TextInputComponent, { value: newDateFilter?.label || '', onChange: (e) => {
+                                                                setNewDateFilter({
+                                                                    ...newDateFilter,
+                                                                    label: e.target.value,
+                                                                });
+                                                            } }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: '10px',
+                                                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Initial Range" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: initialRange.label, onChange: (e) => {
+                                                                setInitialRange(constants_1.InitialDateRangeOptions.find((table) => table.label === e) ?? initialRange);
+                                                            }, options: constants_1.InitialDateRangeOptions.map((table) => {
+                                                                return { label: table.label, value: table.label };
+                                                            }), theme: Admin_1.defaultTheme })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    gap: '10px',
+                                                    width: '100%',
+                                                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        width: '100%',
+                                                    }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Date Comparison" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                                display: 'flex',
+                                                                flexDirection: 'row',
+                                                                gap: 10,
+                                                                width: '100%',
+                                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                                        display: 'flex',
+                                                                        flexDirection: 'column',
+                                                                        justifyContent: 'center',
+                                                                        height: '100%',
+                                                                        minWidth: 200,
+                                                                        maxWidth: 200,
+                                                                        width: 200,
+                                                                    }, children: (0, jsx_runtime_1.jsx)(TogglePrimitive_1.default, { value: isDateComparison, onClick: () => {
+                                                                            setIsDateComparison((isDateComparison) => !isDateComparison);
+                                                                        } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                        width: '100%',
+                                                                        display: 'flex',
+                                                                        justifyContent: 'flex-end',
+                                                                    }, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
+                                                                            height: 38,
+                                                                            width: 38,
+                                                                            alignItems: 'center',
+                                                                            justifyContent: 'flex-end',
+                                                                            display: 'flex',
+                                                                            cursor: 'pointer',
+                                                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) })] })] }) })] }) })), !showDateFilter && ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                marginTop: 20,
+                            }, children: (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Filters" }) }), newFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '6px' }, children: newFilters.map((filter, index) => {
+                                return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        gap: '10px',
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                // maxWidth: 300,
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Label" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { value: filter?.label || '', onChange: (e) => {
+                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                            ? { ...otherFilter, label: e.target.value }
+                                                            : otherFilter);
+                                                        setNewFilters(updatedFilters);
+                                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                maxWidth: 300,
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: filter.table || '', onChange: (e) => {
+                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                            ? { ...otherFilter, table: e }
+                                                            : otherFilter);
+                                                        setNewFilters(updatedFilters);
+                                                    }, options: state.tables.map((table) => {
+                                                        return { label: table.name, value: table.name };
+                                                    }), theme: Admin_1.defaultTheme })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                maxWidth: 300,
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: filter.table
+                                                        ? state.tables
+                                                            .find((table) => table.name === filter.table)
+                                                            ?.columns.filter((column) => {
+                                                            return column.fieldType === 'varchar';
+                                                        })
+                                                            .map((column) => {
+                                                            return {
+                                                                label: column.name,
+                                                                value: column.name,
+                                                            };
+                                                        })
+                                                        : [], onChange: (e) => {
+                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                            ? { ...otherFilter, field: e }
+                                                            : otherFilter);
+                                                        setNewFilters(updatedFilters);
+                                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                width: '100%',
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Filter Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        alignItems: 'center',
+                                                        width: '100%',
+                                                    }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                            display: 'flex',
+                                                            flexDirection: 'row',
+                                                            alignItems: 'center',
+                                                            width: '100%',
+                                                            gap: 10,
+                                                        }, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { theme: Admin_1.defaultTheme, value: filter && filter.stringFilterType
+                                                                    ? filter.stringFilterType
+                                                                    : 'default', onChange: (e) => {
+                                                                    const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                                        ? { ...otherFilter, stringFilterType: e }
+                                                                        : otherFilter);
+                                                                    setNewFilters(updatedFilters);
+                                                                } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
+                                                                    height: 38,
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'flex-end',
+                                                                    display: 'flex',
+                                                                    cursor: 'pointer',
+                                                                    width: '100%',
+                                                                }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }, index));
+                            }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Chart order" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => openEditOrderModal(selectedDashboardName), label: "Edit chart order" }) }), (0, jsx_runtime_1.jsx)(CardSection_1.default, { children: "Danger Zone" }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleDeleteDashboard, label: "Delete Dashboard" }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 18 } }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: "Save changes" }) })] }) }));
+}
+exports.EditFiltersModal = EditFiltersModal;

package/dist/cjs/modals/NewDashboardModal.d.ts

@@ -1,4 +1,4 @@
-export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openEditOrderModal, }: {
+export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }: {
     isOpen: boolean;
     client: any;
     setIsOpen: any;
@@ -11,9 +11,7 @@ export declare function NewDashboardModal({ isOpen, client, setIsOpen, onSave, M
     ButtonComponent: any;
     HeaderComponent: any;
     SelectComponent: any;
-    selectedEditDashboard: any;
     dashNames: any;
-    setSelectedEditDashboard: any;
     SecondaryButtonComponent: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NewDashboardModal.d.ts.map

package/dist/cjs/modals/NewDashboardModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/NewDashboardModal.tsx"],"names":[],"mappings":"AAeA,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,qBAAqB,EAAE,GAAG,CAAC;IAC3B,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;IAC9B,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CAqgBA"}
+{"version":3,"file":"NewDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/NewDashboardModal.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,MAAM,EACN,SAAS,EACT,MAAM,EACN,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,eAAe,EACf,SAAS,EACT,wBAAwB,EACxB,kBAAkB,GACnB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,kBAAkB,EAAE,GAAG,CAAC;IACxB,cAAc,EAAE,GAAG,CAAC;IACpB,kBAAkB,EAAE,GAAG,CAAC;IACxB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,wBAAwB,EAAE,GAAG,CAAC;CAC/B,2CA+hBA"}

package/dist/cjs/modals/NewDashboardModal.js

@@ -14,7 +14,8 @@ const constants_1 = require("../utils/constants");
 const Admin_1 = require("../Admin");
 const TogglePrimitive_1 = __importDefault(require("../primitives/TogglePrimitive"));
 const delay_1 = require("../utils/delay");
-function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, setSelectedEditDashboard, SecondaryButtonComponent, openEditOrderModal, }) {
+const SegmentedControl_1 = require("../components/SegmentedControl");
+function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent, TextInputComponent, ButtonComponent, HeaderComponent, SelectComponent, dashNames, SecondaryButtonComponent, openEditOrderModal, }) {
     const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     const [selectedDashboardName, setSelectedDashboardName] = (0, react_1.useState)('');
     const [saveButtonMessage, setSaveButtonMessage] = (0, react_1.useState)('Save changes');
@@ -62,6 +63,7 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                 labelField: filter.field,
                 label: filter.label,
                 filterType,
+                stringFilterType: filter.stringFilterType,
             };
         });
         if (dashNames &&
@@ -104,14 +106,13 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
         const body = {
             newDashboardName: selectedDashboardName,
             filters: updatedFilters,
-            dateFilter: {
+            dateFilter: showDateFilter && {
                 ...newDateFilter,
                 comparison: isDateComparison,
                 primaryRange: initialRange,
             },
             name: selectedDashboardName,
         };
-        dispatch({ type: 'SET_DATE_FILTER', payload: body.dateFilter });
         const headers = {
             'Content-Type': 'application/json',
             Authorization: `Bearer `,
@@ -124,12 +125,11 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
             });
             setSaveButtonMessage('Saved ✅');
             await (0, delay_1.delay)(200);
-            setSelectedEditDashboard(null);
             setIsOpen(false);
             setSelectedDashboardName('');
             setNewFilters([]);
             setIsDateComparison(false);
-            onSave(selectedDashboardName);
+            onSave(body);
             setSaveButtonMessage('Save changes');
         }
         catch (e) {
@@ -156,7 +156,7 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
             setIsDateComparison(false);
         }, style: {
             minWidth: '814px',
-            maxWidth: '814px',
+            overflow: 'visible',
         }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 gap: 16,
@@ -190,39 +190,37 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                                                             }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'row',
-                                                    gap: '10px',
+                                                    width: '100%',
                                                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                                         display: 'flex',
                                                         flexDirection: 'column',
-                                                    }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Date Comparison" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                justifyContent: 'center',
-                                                                width: '100%',
-                                                                height: '100%',
-                                                                minWidth: 120,
-                                                                maxWidth: 230,
-                                                            }, children: (0, jsx_runtime_1.jsx)(TogglePrimitive_1.default, { value: isDateComparison, onClick: () => {
-                                                                    setIsDateComparison((isDateComparison) => !isDateComparison);
-                                                                } }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                    display: 'flex',
-                                                    flexGrow: 1,
-                                                    flexDirection: 'row',
-                                                    alignItems: 'end',
-                                                    justifyContent: 'end',
-                                                    gap: '10px',
-                                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        justifyContent: 'center',
-                                                    }, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
-                                                            height: 38,
-                                                            width: 42,
-                                                            alignItems: 'center',
-                                                            justifyContent: 'center',
-                                                            display: 'flex',
-                                                            cursor: 'pointer',
-                                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) }) })] }) })), !showDateFilter && ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                        width: '100%',
+                                                    }, children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Date Comparison" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                                        display: 'flex',
+                                                                        flexDirection: 'row',
+                                                                        justifyContent: 'flex-start',
+                                                                        alignItems: 'center',
+                                                                        width: '100%',
+                                                                        height: '100%',
+                                                                        minWidth: 200,
+                                                                        maxWidth: 200,
+                                                                        width: 200,
+                                                                    }, children: (0, jsx_runtime_1.jsx)(TogglePrimitive_1.default, { value: isDateComparison, onClick: () => {
+                                                                            setIsDateComparison((isDateComparison) => !isDateComparison);
+                                                                        } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                                                        display: 'flex',
+                                                                        flexDirection: 'column',
+                                                                        justifyContent: 'center',
+                                                                        width: '100%',
+                                                                    }, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteDateFilter(), style: {
+                                                                            height: 38,
+                                                                            width: 42,
+                                                                            alignItems: 'center',
+                                                                            justifyContent: 'flex-end',
+                                                                            display: 'flex',
+                                                                            cursor: 'pointer',
+                                                                            width: '100%',
+                                                                        }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) }) })] })] }) })] }) })), !showDateFilter && ((0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddDateFilter, label: "Add date filter +" }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
@@ -252,31 +250,50 @@ function NewDashboardModal({ isOpen, client, setIsOpen, onSave, ModalComponent,
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 maxWidth: 300,
-                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Field" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: selectedTable?.columns
+                                                        .filter((column) => {
+                                                        return column.fieldType === 'varchar';
+                                                    })
+                                                        .map((column) => {
+                                                        return {
+                                                            label: column.name,
+                                                            value: column.name,
+                                                        };
+                                                    }), onChange: (e) => {
+                                                        const updatedFilters = newFilters.map((otherFilter, i) => index === i
+                                                            ? { ...otherFilter, field: e }
+                                                            : otherFilter);
+                                                        setNewFilters(updatedFilters);
+                                                    } })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'column',
+                                                width: '100%',
+                                            }, children: [index === 0 && (0, jsx_runtime_1.jsx)(InputLabel_1.default, { children: "Filter Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
                                                         display: 'flex',
                                                         flexDirection: 'column',
                                                         alignItems: 'center',
+                                                        width: '100%',
                                                     }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                                                             display: 'flex',
                                                             flexDirection: 'row',
                                                             alignItems: 'center',
-                                                        }, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { defaultValue: "", value: filter && filter.field ? filter.field : '', options: selectedTable?.columns.map((column) => {
-                                                                    return {
-                                                                        label: column.name,
-                                                                        value: column.name,
-                                                                    };
-                                                                }), onChange: (e) => {
+                                                            width: '100%',
+                                                            gap: 10,
+                                                        }, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { value: filter && filter.stringFilterType
+                                                                    ? filter.stringFilterType
+                                                                    : 'default', onChange: (e) => {
+                                                                    console.log(e);
                                                                     const updatedFilters = newFilters.map((otherFilter, i) => index === i
-                                                                        ? { ...otherFilter, field: e }
+                                                                        ? { ...otherFilter, stringFilterType: e }
                                                                         : otherFilter);
                                                                     setNewFilters(updatedFilters);
                                                                 } }), (0, jsx_runtime_1.jsx)("div", { onClick: () => handleDeleteFilter(filter), style: {
                                                                     height: 38,
-                                                                    width: 42,
                                                                     alignItems: 'center',
-                                                                    justifyContent: 'center',
+                                                                    justifyContent: 'flex-end',
                                                                     display: 'flex',
                                                                     cursor: 'pointer',
+                                                                    width: '100%',
                                                                 }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#4C5462", width: "20", height: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }) })] })] }));
                             }) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAddFilter, label: "Add filter +" })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 18 } }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 230 }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: handleSubmitDashboardChanges, label: saveButtonMessage }) })] }) }));
 }

package/dist/cjs/modals/PromoteDashModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromoteDashModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteDashModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,UAAU,CAAC;AAmE7C,UAAU,qBAAqB;IAC7B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,2CA2HvB"}
+{"version":3,"file":"PromoteDashModal.d.ts","sourceRoot":"","sources":["../../../src/modals/PromoteDashModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,UAAU,CAAC;AAoE7C,UAAU,qBAAqB;IAC7B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,cAAc,EACd,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,EACV,OAAO,EACP,KAAK,GACN,EAAE,qBAAqB,2CAqIvB"}

package/dist/cjs/modals/PromoteDashModal.js

@@ -5,6 +5,7 @@ const AdminProvider_1 = require("../AdminProvider");
 const components_1 = require("../components");
 const react_1 = require("react");
 const constants_1 = require("../utils/constants");
+const QuillSelect_1 = require("../components/QuillSelect");
 const createStyles = (theme) => ({
     modalContent: {
         display: 'flex',
@@ -71,7 +72,7 @@ function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, clientId, client,
     const [selectedToClient, setSelectedToClient] = (0, react_1.useState)();
     const styles = createStyles(theme);
     (0, react_1.useEffect)(() => {
-        setModalSelectedDashboard(state.selectedDashboard);
+        setModalSelectedDashboard(state.selectedDashboard.name);
         setSelectedToClient(state.clients.filter((c) => c.name !== state.client.name)[0]);
     }, [state.selectedDashboard, state.clients]);
     const handlePromote = async () => {
@@ -97,11 +98,17 @@ function PromoteDashModal({ ModalComponent, isOpen, setIsOpen, clientId, client,
             console.error('Promotion failed:', error);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, close: () => setIsOpen(false), style: { overflow: 'visible' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'flex-start',
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.modalContent, children: (0, jsx_runtime_1.jsx)("h1", { style: styles.modalHeader, children: "Promote Changes" }) }), (0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "Dashboard" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: dashboards, setSelected: setModalSelectedDashboard, selected: modalSelectedDashboard, theme: theme }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.multiContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "From" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: theme, disabled: true }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "To" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: clients.filter((c) => c.name !== client.name), setSelected: setSelectedToClient, selected: selectedToClient, theme: theme }) })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.modalContent, children: (0, jsx_runtime_1.jsx)("h1", { style: styles.modalHeader, children: "Promote Changes" }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.container, children: (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { label: "Dashboard", options: dashboards.map((dashboard) => {
+                                return { label: dashboard.name, value: dashboard.name };
+                            }), onChange: setModalSelectedDashboard, value: modalSelectedDashboard, theme: theme }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: styles.multiContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.group, children: [(0, jsx_runtime_1.jsx)("h1", { style: styles.header, children: "From" }), (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { items: [client], setSelected: () => { }, selected: client, theme: theme, disabled: true }) })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.group, children: (0, jsx_runtime_1.jsx)("div", { style: styles.text, children: (0, jsx_runtime_1.jsx)(QuillSelect_1.QuillSelectComponent, { label: "To", options: clients
+                                        .filter((c) => c.name !== client.name)
+                                        .map((client) => {
+                                        return { label: client.name, value: client.name };
+                                    }), onChange: setSelectedToClient, value: selectedToClient, theme: theme }) }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',

package/dist/cjs/modals/ReorderDashboardModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/ReorderDashboardModal.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf;;;;;;;;;CAAA,2CAiMA"}
+{"version":3,"file":"ReorderDashboardModal.d.ts","sourceRoot":"","sources":["../../../src/modals/ReorderDashboardModal.tsx"],"names":[],"mappings":"AA0BA,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf;;;;;;;;;CAAA,2CAqLA"}