@vuu-ui/vuu-data-react 2.1.19-beta.2 → 2.1.19-beta.3

package/src/data-editing/UnsavedChangesReport.js

@@ -1,41 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { buildFormEditState } from "./form-edit-state.js";
-import UnsavedChangesReport from "./UnsavedChangesReport.css";
-const classBase = "vuuUnsavedChanges";
-const UnsavedChangesReport_UnsavedChangesReport = ({ entity, editedEntity })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-unsaved-changes-report",
-        css: UnsavedChangesReport,
-        window: targetWindow
-    });
-    const { editedFields } = buildFormEditState(entity, editedEntity);
-    return /*#__PURE__*/ jsx("div", {
-        className: classBase,
-        children: /*#__PURE__*/ jsx("table", {
-            className: `${classBase}-table`,
-            children: /*#__PURE__*/ jsx("tbody", {
-                children: editedFields.map((fieldName, i)=>/*#__PURE__*/ jsxs("tr", {
-                        className: `${classBase}-row`,
-                        children: [
-                            /*#__PURE__*/ jsx("td", {
-                                className: `${classBase}-fieldName`,
-                                children: fieldName
-                            }),
-                            /*#__PURE__*/ jsx("td", {
-                                className: `${classBase}-old`,
-                                children: entity[fieldName]
-                            }),
-                            /*#__PURE__*/ jsx("td", {
-                                className: `${classBase}-new`,
-                                children: editedEntity[fieldName]
-                            })
-                        ]
-                    }, i))
-            })
-        })
-    });
-};
-export { UnsavedChangesReport_UnsavedChangesReport as UnsavedChangesReport };

package/src/data-editing/edit-rule-validation-checker.js

@@ -1,30 +0,0 @@
-import { getEditRuleValidator, isTypeDescriptor } from "@vuu-ui/vuu-utils";
-const OK = {
-    ok: true
-};
-const NO_VALIDATION_RULES = [];
-function getEditValidationRules(descriptor, editPhase) {
-    if (isTypeDescriptor(descriptor.type)) return "*" === editPhase ? descriptor.type.rules ?? [] : descriptor.type.rules?.filter(({ phase: a = "commit" })=>a === editPhase) ?? NO_VALIDATION_RULES;
-    return NO_VALIDATION_RULES;
-}
-const buildValidationChecker = (rules)=>(value, editPhase)=>applyRules(rules, value, editPhase);
-function applyRules(rules, value, editPhase = "commit") {
-    const result = {
-        ok: true
-    };
-    for (const rule of rules){
-        const { phase = "commit" } = rule;
-        if ("*" === editPhase || phase === editPhase) {
-            const applyRuleToValue = getEditRuleValidator(rule.name);
-            if (applyRuleToValue) {
-                const res = applyRuleToValue(rule, value);
-                if (!res.ok) {
-                    result.ok = false;
-                    (result.messages ?? (result.messages = [])).push(res.message);
-                }
-            } else throw Error(`editable-utils applyRules, no validator registered for rule '${rule.name}'`);
-        }
-    }
-    return result;
-}
-export { OK, buildValidationChecker, getEditValidationRules };

package/src/data-editing/edit-validation-rules.js

@@ -1,33 +0,0 @@
-import { registerComponent } from "@vuu-ui/vuu-utils";
-import { OK } from "./edit-rule-validation-checker.js";
-const isString = (value)=>"string" == typeof value;
-const NUMERIC = /^(?:[0-9]|\.)+$/;
-const CharValidatorNumeric = (rule, value)=>{
-    if (isString(value)) {
-        if ("" === value.trim()) return OK;
-        else if (value.match(NUMERIC)) return OK;
-    }
-    return {
-        ok: false,
-        message: "only numeric characters are permitted"
-    };
-};
-const ValueValidatorInteger = (rule, value)=>{
-    if (isString(value)) if ("" === value.trim()) return OK;
-    else {
-        if (!value.match(NUMERIC)) return {
-            ok: false,
-            message: "value must be an integer, invalid character"
-        };
-        if (parseFloat(value) === parseInt(value)) return OK;
-    }
-    return {
-        ok: false,
-        message: "must be an integer value"
-    };
-};
-const registerRules = ()=>{
-    registerComponent("char-numeric", CharValidatorNumeric, "data-edit-validator", {});
-    registerComponent("value-integer", ValueValidatorInteger, "data-edit-validator", {});
-};
-export { registerRules };

package/src/data-editing/form-edit-state.js

@@ -1,16 +0,0 @@
-const CLEAN_FORM = {
-    isClean: true,
-    editedFields: []
-};
-const buildFormEditState = (entity, newEntity)=>{
-    if (void 0 === entity) return CLEAN_FORM;
-    {
-        const editedFields = [];
-        for (const [fieldName, value] of Object.entries(entity))if (value !== newEntity[fieldName]) editedFields.push(fieldName);
-        return {
-            isClean: 0 === editedFields.length,
-            editedFields
-        };
-    }
-};
-export { CLEAN_FORM, buildFormEditState };

package/src/data-editing/get-data-item-edit-control.js

@@ -1,63 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { VuuDatePicker, VuuInput, VuuTimePicker, VuuTypeaheadInput } from "@vuu-ui/vuu-ui-controls";
-import { asTimeString, isDateTimeDataValue, isTimeDataValue } from "@vuu-ui/vuu-utils";
-import { ToggleFilter } from "@vuu-ui/vuu-filters";
-const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, errorMessage, onCommit, table, values, variant })=>{
-    const handleCommitNumber = (evt, value)=>{
-        onCommit(evt, value.toString());
-    };
-    const dataVariant = variant && "toggle" !== variant ? variant : void 0;
-    if (false === dataDescriptor.editable) return /*#__PURE__*/ jsx(VuuInput, {
-        variant: "secondary",
-        ...InputProps,
-        onCommit: onCommit,
-        readOnly: true,
-        "data-edit-control": true
-    });
-    if (isTimeDataValue(dataDescriptor)) {
-        if (InputProps?.inputProps) {
-            const { value, onChange } = InputProps.inputProps;
-            return /*#__PURE__*/ jsx(VuuTimePicker, {
-                className: className,
-                value: asTimeString(value, true),
-                onChange: onChange,
-                onCommit: onCommit,
-                "data-edit-control": true
-            });
-        }
-    } else if (isDateTimeDataValue(dataDescriptor)) return /*#__PURE__*/ jsx(VuuDatePicker, {
-        className: className,
-        onCommit: handleCommitNumber,
-        "data-edit-control": true
-    });
-    else if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
-        className: className,
-        column: dataDescriptor.name,
-        "data-edit-control": true,
-        onCommit: onCommit,
-        table: table,
-        values: values,
-        value: InputProps?.inputProps?.value ?? "all"
-    });
-    else return /*#__PURE__*/ jsx(VuuTypeaheadInput, {
-        ...InputProps,
-        ...TypeaheadProps,
-        className: className,
-        column: dataDescriptor.name,
-        "data-edit-control": true,
-        "data-variant": dataVariant,
-        onCommit: onCommit,
-        table: table
-    });
-    return /*#__PURE__*/ jsx(VuuInput, {
-        variant: "secondary",
-        ...InputProps,
-        className: className,
-        commitOnBlur: commitOnBlur,
-        commitWhenCleared: commitWhenCleared,
-        onCommit: onCommit,
-        errorMessage: errorMessage,
-        "data-edit-control": true
-    });
-};
-export { getDataItemEditControl };

package/src/data-editing/index.js

@@ -1,6 +0,0 @@
-export * from "./get-data-item-edit-control.js";
-export * from "./EditForm.js";
-export * from "./edit-rule-validation-checker.js";
-export * from "./UnsavedChangesReport.js";
-export * from "./useEditForm.js";
-export * from "./form-edit-state.js";

package/src/data-editing/useEditForm.js

@@ -1,253 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Range, buildColumnMap, dataSourceRowToEntity, messageHasDataRows, queryClosest } from "@vuu-ui/vuu-utils";
-import { Button } from "@salt-ds/core";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { UnsavedChangesReport } from "./UnsavedChangesReport.js";
-import { buildValidationChecker, getEditValidationRules } from "./edit-rule-validation-checker.js";
-import { CLEAN_FORM, buildFormEditState } from "./form-edit-state.js";
-import { useModal } from "@vuu-ui/vuu-ui-controls";
-const CLEAN_VALIDATION = {
-    ok: true,
-    messages: {}
-};
-const getValidationChecker = (descriptor, editPhase)=>{
-    const rules = getEditValidationRules(descriptor, editPhase) ?? [];
-    return buildValidationChecker(rules);
-};
-const nextValidationState = (state, dataDescriptor, value)=>{
-    const check = getValidationChecker(dataDescriptor, "change");
-    const result = check(value, "change");
-    const { name } = dataDescriptor;
-    const { ok: wasOk, messages: existingMessages } = state;
-    if (!result.ok) return {
-        ok: false,
-        messages: {
-            ...existingMessages,
-            [name]: result.messages.join("\n")
-        }
-    };
-    if (!wasOk) {
-        const fieldsInError = Object.keys(existingMessages);
-        if (fieldsInError.includes(name)) if (1 === fieldsInError.length) return {
-            ok: true,
-            messages: {}
-        };
-        else {
-            const messages = {
-                ...existingMessages
-            };
-            delete messages[name];
-            return {
-                ok: false,
-                messages
-            };
-        }
-    }
-    return state;
-};
-function find(descriptors, fieldname) {
-    const d = descriptors.find(({ name })=>name === fieldname);
-    if (d) return d;
-    throw Error(`DataValueDescriptor not found for field ${fieldname}`);
-}
-const getField = (target)=>{
-    const fieldElement = queryClosest(target, "[data-field]");
-    if (fieldElement) return fieldElement.dataset.field;
-    throw Error("no field ");
-};
-const useEditForm = ({ dataSource, formFieldDescriptors, onSubmit })=>{
-    const { showDialog, closeDialog } = useModal();
-    const currentDataSource = useRef(void 0);
-    const formFieldsContainerRef = useRef(null);
-    const entityRef = useRef(void 0);
-    const focusedFieldRef = useRef("");
-    const originalEntityRef = useRef(void 0);
-    const formEditStateRef = useRef(CLEAN_FORM);
-    const validationStateRef = useRef({
-        ok: true,
-        messages: {}
-    });
-    const [entity, _setEntity] = useState();
-    const [, forceUpdate] = useState({});
-    const setFormEditState = useCallback((newState)=>{
-        formEditStateRef.current = newState;
-    }, []);
-    const setEntity = useCallback((newEntity)=>{
-        setFormEditState(buildFormEditState(originalEntityRef.current, newEntity));
-        entityRef.current = newEntity;
-        _setEntity(newEntity);
-    }, [
-        setFormEditState
-    ]);
-    const submitChanges = useCallback(async ()=>{
-        const rpcResponse = await currentDataSource.current?.rpcRequest?.({
-            params: {},
-            rpcName: "VP_BULK_EDIT_SUBMIT_RPC",
-            type: "RPC_REQUEST"
-        });
-        console.log({
-            rpcResponse
-        });
-    }, []);
-    const showSaveOrDiscardPrompt = useCallback(async ()=>{
-        const { current: currentEntity } = entityRef;
-        const { current: originalEntity } = originalEntityRef;
-        let resolver;
-        const save = async ()=>{
-            await submitChanges();
-            closeDialog();
-            resolver?.("saved");
-        };
-        const discard = ()=>{
-            closeDialog();
-            resolver?.("discarded");
-        };
-        requestAnimationFrame(()=>{
-            showDialog(/*#__PURE__*/ jsx(UnsavedChangesReport, {
-                entity: originalEntity,
-                editedEntity: currentEntity
-            }), "Unsaved Changes", [
-                /*#__PURE__*/ jsx(Button, {
-                    onClick: discard,
-                    children: "Discard Changes"
-                }, "cancel"),
-                /*#__PURE__*/ jsx(Button, {
-                    onClick: save,
-                    children: "Save Changes"
-                }, "submit")
-            ], true);
-        });
-        return new Promise((resolve)=>{
-            resolver = resolve;
-        });
-    }, [
-        closeDialog,
-        showDialog,
-        submitChanges
-    ]);
-    useMemo(async ()=>{
-        if (dataSource) {
-            if (false === formEditStateRef.current.isClean) await showSaveOrDiscardPrompt();
-            currentDataSource.current = dataSource;
-            originalEntityRef.current = void 0;
-            const columnMap = buildColumnMap(dataSource.columns);
-            dataSource?.subscribe({
-                range: Range(0, 1)
-            }, (message)=>{
-                if (messageHasDataRows(message)) {
-                    const [row] = message.rows;
-                    if (row) {
-                        const entity = dataSourceRowToEntity(row, columnMap);
-                        if (void 0 === originalEntityRef.current) {
-                            originalEntityRef.current = entity;
-                            setEntity(entity);
-                        }
-                        const { editedFields } = buildFormEditState(entityRef.current, entity);
-                        if (1 === editedFields.length) setEntity(entity);
-                    }
-                }
-            });
-        }
-    }, [
-        dataSource,
-        setEntity,
-        showSaveOrDiscardPrompt
-    ]);
-    const setValidationState = useCallback((state)=>{
-        validationStateRef.current = state;
-        forceUpdate({});
-    }, []);
-    const handleFieldCommit = useCallback(async (_, value)=>{
-        const { current: fieldName } = focusedFieldRef;
-        const dataDescriptor = find(formFieldDescriptors, fieldName);
-        const { current: state } = validationStateRef;
-        const newState = nextValidationState(state, dataDescriptor, value);
-        if (newState !== state) setValidationState(newState);
-        if (newState.ok && dataSource?.tableSchema) {
-            const { key } = dataSource.tableSchema;
-            const keyValue = entity?.[key];
-            const response = await dataSource.rpcRequest?.({
-                params: {
-                    column: fieldName,
-                    data: value,
-                    key: keyValue
-                },
-                rpcName: "editCell",
-                type: "RPC_REQUEST"
-            });
-            console.log({
-                response
-            });
-        }
-    }, [
-        dataSource,
-        entity,
-        formFieldDescriptors,
-        setValidationState
-    ]);
-    const handleFieldChange = useCallback((evt)=>{
-        const { current: fieldName } = focusedFieldRef;
-        if (fieldName) {
-            const input = queryClosest(evt.target, "input", true);
-            const dataDescriptor = find(formFieldDescriptors, fieldName);
-            const value = input.value;
-            const { current: state } = validationStateRef;
-            const newState = nextValidationState(state, dataDescriptor, value);
-            if (newState !== state) setValidationState(newState);
-            setEntity({
-                ...entity,
-                [fieldName]: value
-            });
-        }
-    }, [
-        entity,
-        formFieldDescriptors,
-        setEntity,
-        setValidationState
-    ]);
-    const handleFormSubmit = useCallback(async ()=>{
-        submitChanges();
-        setFormEditState(CLEAN_FORM);
-        originalEntityRef.current = entity;
-        onSubmit?.();
-        forceUpdate({});
-    }, [
-        entity,
-        onSubmit,
-        setFormEditState,
-        submitChanges
-    ]);
-    const handleFormCancel = useCallback(async ()=>{
-        setFormEditState(CLEAN_FORM);
-        setValidationState(CLEAN_VALIDATION);
-        setEntity(originalEntityRef.current);
-    }, [
-        setEntity,
-        setFormEditState,
-        setValidationState
-    ]);
-    const handleFocus = useCallback((evt)=>{
-        if (formFieldsContainerRef.current?.contains(evt.target)) {
-            const fieldName = getField(evt.target);
-            if (fieldName) {
-                if (fieldName) focusedFieldRef.current = fieldName;
-            }
-        }
-    }, []);
-    const { current: { ok, messages: errorMessages } } = validationStateRef;
-    const { current: { isClean, editedFields } } = formEditStateRef;
-    return {
-        editedFields,
-        editEntity: entity,
-        errorMessages,
-        formFieldsContainerRef,
-        isClean,
-        ok,
-        onCancel: handleFormCancel,
-        onChange: handleFieldChange,
-        onCommit: handleFieldCommit,
-        onFocus: handleFocus,
-        onSubmit: handleFormSubmit
-    };
-};
-export { useEditForm };

package/src/datasource-provider/VuuDataSourceProvider.js

@@ -1,20 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { ConnectionManager, VuuDataSource } from "@vuu-ui/vuu-data-remote";
-import { DataProvider } from "@vuu-ui/vuu-utils";
-import { useAutoLoginToVuuServer } from "./useAutoLoginToVuuServer.js";
-const getServerAPI = ()=>ConnectionManager.serverAPI;
-const VuuDataSourceProvider = ({ authenticate, autoConnect = false, autoLogin = false, children, websocketUrl })=>{
-    useAutoLoginToVuuServer({
-        authenticate,
-        autoConnect,
-        autoLogin,
-        websocketUrl
-    });
-    return /*#__PURE__*/ jsx(DataProvider, {
-        VuuDataSource: VuuDataSource,
-        getServerAPI: getServerAPI,
-        isLocalData: false,
-        children: children
-    });
-};
-export { VuuDataSourceProvider };

package/src/datasource-provider/index.js

@@ -1 +0,0 @@
-export * from "./VuuDataSourceProvider.js";

package/src/datasource-provider/useAutoLoginToVuuServer.js

@@ -1,42 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { ConnectionManager, authenticate as vuu_data_remote_authenticate } from "@vuu-ui/vuu-data-remote";
-import { useEffect, useState } from "react";
-const useAutoLoginToVuuServer = ({ authenticate = true, autoConnect = true, secure = true, token: tokenProp = "no-token", user = "steve", websocketUrl } = {})=>{
-    const [errorMessage, setErrorMessage] = useState("");
-    useEffect(()=>{
-        const connect = async ()=>{
-            try {
-                let token = tokenProp;
-                if (authenticate) {
-                    const response = await vuu_data_remote_authenticate(user, "xyz", "/api/authn");
-                    token = response.token;
-                }
-                const url = websocketUrl ?? `${secure ? "wss" : "ws"}://localhost/8090/websocket`;
-                ConnectionManager.connect({
-                    url,
-                    token
-                });
-            } catch (e) {
-                if (e instanceof Error) {
-                    console.error(e.message);
-                    setErrorMessage(e.message);
-                }
-            }
-        };
-        if (autoConnect) connect();
-        return ()=>{
-            if (autoConnect) ConnectionManager.disconnect();
-        };
-    }, [
-        authenticate,
-        autoConnect,
-        secure,
-        tokenProp,
-        user,
-        websocketUrl
-    ]);
-    if (errorMessage) return /*#__PURE__*/ jsx("p", {
-        children: "Unable to authenticate against Vuu Server A Vuu Server instance must be running to show this example."
-    });
-};
-export { useAutoLoginToVuuServer };

package/src/hooks/useLookupValues.js

@@ -1,93 +0,0 @@
-import { VuuDataSource } from "@vuu-ui/vuu-data-remote";
-import { Range, buildColumnMap, getSelectedOption, isLookupRenderer, isTypeDescriptor, isValueListRenderer, useShellContext } from "@vuu-ui/vuu-utils";
-import { useMemo, useState } from "react";
-const NO_VALUES = [];
-const toListOption = (value)=>({
-        label: value,
-        value
-    });
-const lookupValueMap = new Map();
-const loadLookupValues = ({ labelColumn, table, valueColumn })=>{
-    const tableKey = `${table.module}:${table.table}`;
-    const lookupValues = lookupValueMap.get(tableKey);
-    if (lookupValues) return lookupValues;
-    {
-        const promise = new Promise((resolve)=>{
-            const columns = [
-                valueColumn,
-                labelColumn
-            ];
-            const columnMap = buildColumnMap(columns);
-            const dataSource = new VuuDataSource({
-                bufferSize: 0,
-                table
-            });
-            dataSource.subscribe({
-                columns,
-                range: Range(0, 100)
-            }, (message)=>{
-                if ("viewport-update" === message.type) {
-                    if (message.rows) {
-                        const listOptions = message.rows.map((row)=>({
-                                value: row[columnMap[valueColumn]],
-                                label: row[columnMap[labelColumn]]
-                            }));
-                        resolve(listOptions);
-                        dataSource.unsubscribe();
-                    }
-                }
-            });
-        });
-        lookupValueMap.set(tableKey, promise);
-        return promise;
-    }
-};
-const getLookupDetails = ({ name, type })=>{
-    if (isTypeDescriptor(type) && isLookupRenderer(type.renderer)) return type.renderer.lookup;
-    throw Error(`useLookupValues column ${name} is not configured to use lookup values`);
-};
-const useLookupValues = (column, initialValueProp)=>{
-    const { type: columnType } = column;
-    const { getLookupValues } = useShellContext();
-    const initialState = useMemo(()=>{
-        if (isTypeDescriptor(columnType) && isValueListRenderer(columnType?.renderer)) {
-            const values = columnType.renderer.values.map(toListOption);
-            return {
-                initialValue: getSelectedOption(values, initialValueProp) ?? null,
-                values
-            };
-        }
-        {
-            const lookupDetails = getLookupDetails(column);
-            const values = getLookupValues?.(lookupDetails.table) ?? NO_VALUES;
-            return {
-                initialValue: getSelectedOption(values, initialValueProp) ?? null,
-                values
-            };
-        }
-    }, [
-        column,
-        columnType,
-        getLookupValues,
-        initialValueProp
-    ]);
-    const [{ initialValue, values }, setLookupState] = useState(initialState);
-    useMemo(()=>{
-        if (values === NO_VALUES) {
-            const lookupDetails = getLookupDetails(column);
-            loadLookupValues(lookupDetails).then((values)=>setLookupState({
-                    initialValue: getSelectedOption(values, initialValueProp) ?? null,
-                    values
-                }));
-        }
-    }, [
-        values,
-        column,
-        initialValueProp
-    ]);
-    return {
-        initialValue,
-        values
-    };
-};
-export { useLookupValues };

package/src/hooks/useSessionDataSource.js

@@ -1,37 +0,0 @@
-import { useData } from "@vuu-ui/vuu-utils";
-import { useCallback, useRef } from "react";
-const sessionState = new Map();
-const useSessionDataSource = (props)=>{
-    const { VuuDataSource } = useData();
-    const dataSourceConfigRef = useRef(void 0);
-    const getDataSource = useCallback((sessionKey, dataSourceConstructorProps)=>{
-        let ds = sessionState.get(sessionKey);
-        if (ds) return ds;
-        if (dataSourceConstructorProps?.columns) {
-            ds = new VuuDataSource({
-                ...dataSourceConstructorProps,
-                viewport: sessionKey,
-                ...dataSourceConfigRef.current
-            });
-            if (props?.onConfigChange) ds.on("config", props.onConfigChange);
-            sessionState.set(sessionKey, ds);
-            return ds;
-        }
-        throw Error("[useSessionDataSource] unable to create new DataSource, columns have not been defined ");
-    }, [
-        VuuDataSource,
-        props?.onConfigChange
-    ]);
-    const clearDataSource = useCallback((sessionKey, unsubscribe)=>{
-        const ds = sessionState.get(sessionKey);
-        if (ds) {
-            sessionState.delete(sessionKey);
-            if (true === unsubscribe) ds.unsubscribe();
-        } else console.warn(`[useSessionbDatasource] clearDataSource ${sessionKey} not found `);
-    }, []);
-    return {
-        clearDataSource,
-        getDataSource
-    };
-};
-export { useSessionDataSource };