@vuu-ui/vuu-table-extras 3.0.0 → 3.1.0-beta.2

package/src/column-settings-panel/ColumnSettingsPanel.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, FormField, FormFieldLabel, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon, VuuInput } from "@vuu-ui/vuu-ui-controls";
+import { getCalculatedColumnDetails, getDefaultAlignment, isCalculatedColumn } from "@vuu-ui/vuu-utils";
+import { ColumnFormattingPanel } from "../column-formatting-settings/index.js";
+import { ColumnNameLabel } from "./ColumnNameLabel.js";
+import { useColumnSettings } from "./useColumnSettings.js";
+import ColumnSettingsPanel from "./ColumnSettingsPanel.css";
+const classBase = "vuuColumnSettingsPanel";
+const getColumnLabel = (column)=>{
+    const { name, label } = column;
+    if (isCalculatedColumn(name)) return label ?? getCalculatedColumnDetails(column).name;
+    return label ?? name;
+};
+const ColumnSettingsPanel_ColumnSettingsPanel = ({ column: columnProp, columnModel, onClickEditCalculatedColumn, onConfigChange })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-settings-panel",
+        css: ColumnSettingsPanel,
+        window: targetWindow
+    });
+    const isNewCalculatedColumn = "::" === columnProp.name;
+    const { availableRenderers, column, navigateNextColumn, navigatePrevColumn, onChange, onChangeFormatting, onChangeRendering, onChangeToggleButton, onChangeType, onInputCommit } = useColumnSettings({
+        column: columnProp,
+        columnModel,
+        onConfigChange
+    });
+    const { serverDataType, align = getDefaultAlignment(serverDataType), pin, width = "" } = column;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-header`,
+                children: /*#__PURE__*/ jsx(ColumnNameLabel, {
+                    column: column,
+                    onClick: onClickEditCalculatedColumn
+                })
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "column-label",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Column Label"
+                    }),
+                    /*#__PURE__*/ jsx(VuuInput, {
+                        bordered: true,
+                        className: "vuuInput",
+                        "data-embedded": true,
+                        onChange: onChange,
+                        onCommit: onInputCommit,
+                        value: getColumnLabel(column)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "column-width",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Column Width"
+                    }),
+                    /*#__PURE__*/ jsx(VuuInput, {
+                        bordered: true,
+                        className: "vuuInput",
+                        "data-embedded": true,
+                        onChange: onChange,
+                        value: width,
+                        onCommit: onInputCommit
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "column-alignment",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Alignment"
+                    }),
+                    /*#__PURE__*/ jsxs(ToggleButtonGroup, {
+                        onChange: onChangeToggleButton,
+                        value: align,
+                        children: [
+                            /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "left",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "align-left",
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "right",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "align-right",
+                                    size: 16
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                "data-field": "column-pin",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Pin Column"
+                    }),
+                    /*#__PURE__*/ jsxs(ToggleButtonGroup, {
+                        onChange: onChangeToggleButton,
+                        value: pin || "false",
+                        children: [
+                            /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "left",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "pin-left",
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "floating",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "pin-float",
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "right",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "pin-right",
+                                    size: 16
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "cross-circle",
+                                    size: 16
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ColumnFormattingPanel, {
+                availableRenderers: availableRenderers,
+                column: column,
+                onChangeFormatting: onChangeFormatting,
+                onChangeRendering: onChangeRendering,
+                onChangeColumnType: onChangeType
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-buttonBar`,
+                "data-align": isNewCalculatedColumn ? "right" : void 0,
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        className: `${classBase}-buttonNavPrev`,
+                        variant: "secondary",
+                        "data-icon": "arrow-left",
+                        onClick: navigatePrevColumn,
+                        children: "PREVIOUS"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        className: `${classBase}-buttonNavNext`,
+                        variant: "secondary",
+                        "data-icon": "arrow-right",
+                        onClick: navigateNextColumn,
+                        children: "NEXT"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { ColumnSettingsPanel_ColumnSettingsPanel as ColumnSettingsPanel };

package/src/column-settings-panel/useColumnSettings.js

@@ -0,0 +1,205 @@
+import { getFieldName, getRegisteredCellRenderers, getServerDataType, isValidColumnAlignment, isValidPinLocation, queryClosest, setCalculatedColumnName, updateColumnFormatting, updateColumnRenderProps, updateColumnType } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useState } from "react";
+const integerCellRenderers = [
+    {
+        description: "Default formatter for columns with data type integer",
+        label: "Default Renderer (int, long)",
+        name: "default-int"
+    }
+];
+const doubleCellRenderers = [
+    {
+        description: "Default formatter for columns with data type double",
+        label: "Default Renderer (double)",
+        name: "default-double"
+    }
+];
+const decimalCellRenderers = [
+    {
+        description: "Default formatter for columns with data type decimal (2,4,6 or 8)",
+        label: "Default Renderer (decimal)",
+        name: "default-decimal"
+    }
+];
+const stringCellRenderers = [
+    {
+        description: "Default formatter for columns with data type string",
+        label: "Default Renderer (string)",
+        name: "default-string"
+    }
+];
+const booleanCellRenderers = [];
+const getAvailableCellRenderers = (column)=>{
+    const serverDataType = getServerDataType(column);
+    switch(serverDataType){
+        case "char":
+        case "string":
+            return stringCellRenderers.concat(getRegisteredCellRenderers("string"));
+        case "int":
+        case "long":
+            return integerCellRenderers.concat(getRegisteredCellRenderers("int"));
+        case "double":
+            return doubleCellRenderers.concat(getRegisteredCellRenderers(column.serverDataType));
+        case "scaleddecimal2":
+        case "scaleddecimal4":
+        case "scaleddecimal6":
+        case "scaleddecimal8":
+            return decimalCellRenderers.concat(getRegisteredCellRenderers(column.serverDataType));
+        case "boolean":
+            return booleanCellRenderers.concat(getRegisteredCellRenderers("boolean"));
+        default:
+            return stringCellRenderers;
+    }
+};
+const useColumnSettings = ({ column: columnProp, columnModel })=>{
+    const [column, setColumn] = useState(columnModel.getColumn(columnProp.name));
+    useEffect(()=>{
+        setColumn(columnProp);
+    }, [
+        columnProp
+    ]);
+    const availableRenderers = useMemo(()=>getAvailableCellRenderers(column), [
+        column
+    ]);
+    const handleChangeToggleButton = useCallback((evt)=>{
+        const button = queryClosest(evt.target, "button");
+        if (button) {
+            const fieldName = getFieldName(button);
+            const { value } = button;
+            switch(fieldName){
+                case "column-alignment":
+                    if (isValidColumnAlignment(value)) {
+                        const newColumn = {
+                            ...column,
+                            align: value
+                        };
+                        setColumn(newColumn);
+                        columnModel.updateColumn(newColumn);
+                    }
+                    break;
+                case "column-pin":
+                    if (isValidPinLocation(value)) {
+                        const newColumn = {
+                            ...column,
+                            pin: value || void 0
+                        };
+                        setColumn(newColumn);
+                        columnModel.updateColumn(newColumn);
+                        break;
+                    }
+            }
+        }
+    }, [
+        column,
+        columnModel
+    ]);
+    const handleChange = useCallback((evt)=>{
+        const input = evt.target;
+        const fieldName = getFieldName(input);
+        const { value } = input;
+        switch(fieldName){
+            case "column-label":
+                setColumn((state)=>({
+                        ...state,
+                        label: value
+                    }));
+                break;
+            case "column-name":
+                setColumn((state)=>setCalculatedColumnName(state, value));
+                break;
+            case "column-width":
+                {
+                    const numericValue = parseInt(value, 10);
+                    isNaN(numericValue) ? setColumn((state)=>({
+                            ...state,
+                            width: void 0
+                        })) : setColumn((state)=>({
+                            ...state,
+                            width: numericValue
+                        }));
+                }
+                break;
+        }
+    }, []);
+    const handleInputCommit = useCallback(()=>{
+        columnModel.updateColumn(column);
+    }, [
+        column,
+        columnModel
+    ]);
+    const handleChangeCalculatedColumnName = useCallback((name)=>{
+        setColumn((state)=>({
+                ...state,
+                name
+            }));
+    }, []);
+    const handleChangeRendering = useCallback((renderProps)=>{
+        if (renderProps) {
+            const newColumn = updateColumnRenderProps(column, renderProps);
+            setColumn(newColumn);
+            columnModel.updateColumn(newColumn);
+        }
+    }, [
+        column,
+        columnModel
+    ]);
+    const handleChangeFormatting = useCallback((formatting)=>{
+        const newColumn = updateColumnFormatting(column, formatting);
+        setColumn(newColumn);
+        columnModel.updateColumn(newColumn);
+    }, [
+        column,
+        columnModel
+    ]);
+    const handleChangeType = useCallback((type)=>{
+        const updatedColumn = updateColumnType(column, type);
+        setColumn(updatedColumn);
+        columnModel.updateColumn(updatedColumn);
+    }, [
+        column,
+        columnModel
+    ]);
+    const handleChangeServerDataType = useCallback((serverDataType)=>{
+        setColumn((col)=>({
+                ...col,
+                serverDataType
+            }));
+    }, []);
+    const navigateColumn = useCallback(({ moveBy })=>{
+        const index = columnModel.selectedColumns.indexOf(column) + moveBy;
+        const newColumn = columnModel.selectedColumns[index];
+        if (newColumn) setColumn(newColumn);
+    }, [
+        column,
+        columnModel
+    ]);
+    const navigateNextColumn = useCallback(()=>{
+        navigateColumn({
+            moveBy: 1
+        });
+    }, [
+        navigateColumn
+    ]);
+    const navigatePrevColumn = useCallback(()=>{
+        navigateColumn({
+            moveBy: -1
+        });
+    }, [
+        navigateColumn
+    ]);
+    return {
+        availableRenderers,
+        column,
+        navigateNextColumn,
+        navigatePrevColumn,
+        onChange: handleChange,
+        onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
+        onChangeFormatting: handleChangeFormatting,
+        onChangeRendering: handleChangeRendering,
+        onChangeServerDataType: handleChangeServerDataType,
+        onChangeToggleButton: handleChangeToggleButton,
+        onChangeType: handleChangeType,
+        onInputCommit: handleInputCommit
+    };
+};
+export { useColumnSettings };

package/src/csv-upload/CsvUpload.css.js

@@ -0,0 +1,28 @@
+const css = `
+.vuuCsvUpload {
+  gap: var(--salt-spacing-200);
+  display: grid;
+}
+
+.vuuCsvUpload-dropZone {
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  min-height: calc(var(--salt-size-base) * 4);
+  padding: var(--salt-spacing-300);
+  text-align: center;
+  justify-items: center;
+  display: grid;
+}
+
+.vuuCsvUpload-errors {
+  border: solid 1px var(--salt-status-error-borderColor);
+  border-radius: var(--salt-size-borderRadius);
+  color: var(--salt-status-error-foreground);
+  gap: var(--salt-spacing-100);
+  padding: var(--salt-spacing-200);
+  display: grid;
+}
+
+
+`;
+export default css;

package/src/csv-upload/CsvUpload.js

@@ -0,0 +1,105 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogActions, DialogContent, DialogHeader, FileDropZone, FileDropZoneIcon, FileDropZoneTrigger } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useCallback, useState } from "react";
+import { useCsvUpload } from "./useCsvUpload.js";
+import CsvUpload from "./CsvUpload.css";
+const classBase = "vuuCsvUpload";
+const CsvUpload_CsvUpload = (props)=>{
+    const { children, dialogTitle = "Import CSV", embedded = false, onCancel, onClose, open } = props;
+    const isControlledOpen = void 0 !== open;
+    const [internalOpen, setInternalOpen] = useState(open ?? true);
+    const dialogOpen = isControlledOpen ? open : internalOpen;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-csv-upload",
+        css: CsvUpload,
+        window: targetWindow
+    });
+    const { canImport, cancelImport, isProcessingFile, isImporting, importData, onDrop, onTriggerChange, schema, validation } = useCsvUpload(props);
+    const handleCancel = useCallback(async ()=>{
+        await cancelImport();
+        if (!isControlledOpen) setInternalOpen(false);
+        onCancel?.();
+    }, [
+        cancelImport,
+        isControlledOpen,
+        onCancel
+    ]);
+    const handleImport = useCallback(async ()=>{
+        if (await importData()) onClose?.();
+    }, [
+        importData,
+        onClose
+    ]);
+    const content = /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        children: [
+            /*#__PURE__*/ jsxs(FileDropZone, {
+                className: `${classBase}-dropZone`,
+                disabled: void 0 === schema || isProcessingFile || isImporting,
+                onDrop: onDrop,
+                status: validation && validation.errors.length > 0 ? "error" : void 0,
+                children: [
+                    /*#__PURE__*/ jsx(FileDropZoneIcon, {}),
+                    validation && validation.errors.length > 0 ? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                children: "Your file contains errors"
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                children: " Please rectify and reupload"
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx("div", {
+                        children: "Drop a file here or"
+                    }),
+                    /*#__PURE__*/ jsx(FileDropZoneTrigger, {
+                        accept: ".csv,text/csv",
+                        onChange: onTriggerChange,
+                        children: "BROWSE FILES"
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+    const actions = /*#__PURE__*/ jsxs(DialogActions, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                appearance: "solid",
+                disabled: isImporting,
+                sentiment: "negative",
+                onClick: handleCancel,
+                children: "Cancel"
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                disabled: !canImport,
+                appearance: "solid",
+                sentiment: "accented",
+                onClick: handleImport,
+                children: isProcessingFile ? "Validating..." : isImporting ? "Importing..." : "Import"
+            })
+        ]
+    });
+    if (embedded) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            content,
+            actions
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Dialog, {
+        open: dialogOpen,
+        children: [
+            /*#__PURE__*/ jsx(DialogHeader, {
+                header: dialogTitle
+            }),
+            /*#__PURE__*/ jsx(DialogContent, {
+                children: content
+            }),
+            actions
+        ]
+    });
+};
+export { CsvUpload_CsvUpload as CsvUpload };

package/src/csv-upload/data-upload-preview/DataUploadPreview.css.js

@@ -0,0 +1,15 @@
+const css = `
+.vuuDataUploadPreview {
+  flex-direction: column;
+  width: 900px;
+  height: 420px;
+  display: flex;
+
+  & .vuuDataUploadPreview-content {
+    flex: auto;
+  }
+}
+
+
+`;
+export default css;

package/src/csv-upload/data-upload-preview/DataUploadPreview.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { DataEditingProvider, EDIT_ACTION_ROW_CLASS_NAME_GENERATOR, EditButtons, UNDO_CELL_RENDERER } from "@vuu-ui/vuu-data-editing";
+import { Table } from "@vuu-ui/vuu-table";
+import clsx from "clsx";
+import { useCallback, useMemo } from "react";
+import { TableFooter, TableFooterTray } from "../../table-footer/TableFooter.js";
+import DataUploadPreview from "./DataUploadPreview.css";
+import { getSessionDataSource, useDataUploadPreview } from "./useDataUploadPreview.js";
+const classBase = "vuuDataUploadPreview";
+const undoColumn = {
+    name: "undo",
+    source: "client",
+    width: 80,
+    type: {
+        name: "string",
+        renderer: {
+            name: UNDO_CELL_RENDERER
+        }
+    }
+};
+const rowClassNameGenerators = [
+    EDIT_ACTION_ROW_CLASS_NAME_GENERATOR
+];
+const DataUploadPreview_DataUploadPreview = ({ className, editSession, onClose, saveLabel = "Submit", tableSchema, ...htmlAttributes })=>{
+    const dataSource = useMemo(()=>getSessionDataSource(editSession), [
+        editSession
+    ]);
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-data-upload-preview",
+        css: DataUploadPreview,
+        window: targetWindow
+    });
+    const { canCancel, canSave, hasSelection, onCancel, onDelete, onSave, sessionError } = useDataUploadPreview({
+        dataSource,
+        editSession,
+        onClose
+    });
+    const isRowSelectable = useCallback((dataRow)=>"deleteRow" !== dataRow.vuu_action, []);
+    const config = useMemo(()=>{
+        const columns = tableSchema.columns.map((column)=>"vuuMsg" === column.name ? {
+                ...column,
+                editable: false,
+                hidden: false,
+                label: "Error",
+                width: 300
+            } : {
+                ...column,
+                editable: true
+            });
+        if (!columns.some(({ name })=>"vuuMsg" === name)) columns.push({
+            editable: false,
+            label: "Error",
+            name: "vuuMsg",
+            serverDataType: "string",
+            width: 300
+        });
+        return {
+            columns: columns.concat({
+                hidden: true,
+                name: "vuu_action"
+            }, undoColumn),
+            columnDefaultWidth: 150,
+            rowClassNameGenerators: rowClassNameGenerators,
+            rowSeparators: true,
+            zebraStripes: true
+        };
+    }, [
+        tableSchema.columns
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: [
+            sessionError ? /*#__PURE__*/ jsx("div", {
+                role: "alert",
+                children: sessionError
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-content`,
+                children: /*#__PURE__*/ jsx(DataEditingProvider, {
+                    editSession: editSession,
+                    children: /*#__PURE__*/ jsx(Table, {
+                        config: config,
+                        "data-viewport": dataSource.viewport,
+                        dataSource: dataSource,
+                        isRowSelectable: isRowSelectable,
+                        renderBufferSize: 10,
+                        selectionModel: "checkbox"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(TableFooter, {
+                children: /*#__PURE__*/ jsx(TableFooterTray, {
+                    position: "center",
+                    children: /*#__PURE__*/ jsx(EditButtons, {
+                        canCancel: canCancel,
+                        canSave: canSave,
+                        editSession: editSession,
+                        hasSelection: hasSelection,
+                        onCancel: onCancel,
+                        onDelete: onDelete,
+                        onSave: onSave,
+                        saveLabel: saveLabel
+                    })
+                })
+            })
+        ]
+    });
+};
+export { DataUploadPreview_DataUploadPreview as DataUploadPreview };