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

package/src/lost-connection-indicator/LostConnectionIndicator.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import LostConnectionIndicator from "./LostConnectionIndicator.css";
+const classBase = "vuuLostConnectionIndicator";
+const LostConnectionIndicator_LostConnectionIndicator = ()=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-toast-notification",
+        css: LostConnectionIndicator,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        children: [
+            /*#__PURE__*/ jsx("h2", {
+                className: `${classBase}-title`,
+                children: "CONNECTION LOST"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-spinner`
+            }),
+            /*#__PURE__*/ jsx("h3", {
+                className: `${classBase}-status`,
+                children: "RECONNECTING"
+            })
+        ]
+    });
+};
+export { LostConnectionIndicator_LostConnectionIndicator as LostConnectionIndicator };

package/src/lost-connection-indicator/useLostConnection.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { ConnectionManager, isConnected } from "@vuu-ui/vuu-data-remote";
+import { useCallback, useMemo, useRef } from "react";
+import { NotificationType, useNotifications } from "@vuu-ui/vuu-notifications";
+import { LostConnectionIndicator } from "./LostConnectionIndicator.js";
+const useLostConnection = ()=>{
+    const { hideNotification, showNotification } = useNotifications();
+    const isConnectedRef = useRef(ConnectionManager.connected);
+    const handleConnectionStatusChange = useCallback((connectionStatus)=>{
+        const { current: wasConnected } = isConnectedRef;
+        isConnectedRef.current = isConnected(connectionStatus);
+        if (wasConnected && "disconnected" === connectionStatus) showNotification({
+            content: /*#__PURE__*/ jsx(LostConnectionIndicator, {}),
+            status: "error",
+            type: NotificationType.Workspace
+        });
+        else if (!wasConnected && isConnectedRef.current) hideNotification();
+    }, [
+        hideNotification,
+        showNotification
+    ]);
+    useMemo(async ()=>{
+        ConnectionManager.on("connection-status", handleConnectionStatusChange);
+    }, [
+        handleConnectionStatusChange
+    ]);
+};
+export { useLostConnection };

package/src/session-editing-form/SessionEditingForm.css.js

@@ -0,0 +1,47 @@
+const css = `
+.vuuSessionEditingForm {
+  flex-direction: column;
+  gap: 3px;
+  min-width: 400px;
+  display: flex;
+}
+
+.vuuSessionEditingForm-content {
+  padding: var(--salt-spacing-200);
+  flex-direction: column;
+  flex: auto;
+  gap: 3px;
+  display: flex;
+  overflow: auto;
+}
+
+.vuuSessionEditingForm-fieldValue.vuuReadOnly {
+  font-weight: var(--salt-text-label-fontWeight-strong);
+}
+
+.vuuSessionEditingForm-buttonbar {
+  border-top: solid 1px var(--salt-container-primary-borderColor);
+  box-sizing: content-box;
+  flex: 0 0 autox;
+  height: var(--salt-size-base);
+  margin: var(--salt-spacing-200);
+  padding-top: var(--salt-spacing-200);
+  justify-content: flex-end;
+  align-items: center;
+  gap: 6px;
+  display: flex;
+}
+
+.vuuSessionEditingForm-errorBanner {
+  --vuu-icon-left: 3px;
+  --vuu-icon-size: 18px;
+  --vuu-icon-top: 3px;
+  border: solid 1px var(--salt-status-error-borderColor);
+  padding: 0 6px 0 26px;
+  line-height: 24px;
+  position: relative;
+}
+
+
+`;
+export default css;

package/src/session-editing-form/SessionEditingForm.js

@@ -0,0 +1,236 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VuuDataSource } from "@vuu-ui/vuu-data-remote";
+import { Range, buildColumnMap, getTypedValue, queryClosest, shallowEquals } from "@vuu-ui/vuu-utils";
+import { Button, FormField, FormFieldHelperText, FormFieldLabel, Input, useIdMemo } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import SessionEditingForm from "./SessionEditingForm.css";
+const classBase = "vuuSessionEditingForm";
+const getField = (fields, name)=>{
+    const field = fields.find((f)=>f.name === name);
+    if (field) return field;
+    throw Error(`SessionEditingForm, no field '${name}' found`);
+};
+const getFieldNameAndValue = ({ target })=>{
+    const formField = queryClosest(target, ".saltFormField");
+    if (formField) {
+        const { dataset: { field } } = formField;
+        if (void 0 === field) throw Error("SessionEditingForm, form field has no field data attribute");
+        return [
+            field,
+            target.value
+        ];
+    }
+    throw Error("Form control is not enclosed in FormField");
+};
+const Status = {
+    uninitialised: 0,
+    unchanged: 1,
+    changed: 2,
+    invalid: 3
+};
+const getDataSource = (dataSource, schema)=>{
+    if (dataSource) return dataSource;
+    if (schema) return new VuuDataSource({
+        bufferSize: 0,
+        table: schema.table,
+        columns: schema.columns.map((col)=>col.name)
+    });
+    throw Error("SessionEditingForm: either a DataSource or a TableSchema must be provided");
+};
+const SessionEditingForm_SessionEditingForm = ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-session-editing-form",
+        css: SessionEditingForm,
+        window: targetWindow
+    });
+    const [fieldStatusValues, setFieldStatusValues] = useState({});
+    const [values, setValues] = useState();
+    const [errorMessage, setErrorMessage] = useState("");
+    const formContentRef = useRef(null);
+    const initialDataRef = useRef(void 0);
+    const dataStatusRef = useRef(Status.uninitialised);
+    const dataSource = useMemo(()=>{
+        const ds = getDataSource(dataSourceProp, schema);
+        const { columns } = ds;
+        const columnMap = buildColumnMap(ds.columns);
+        const applyServerData = (data)=>{
+            if (columnMap) {
+                const values = {};
+                for (const column of columns)values[column] = data[columnMap[column]];
+                if (dataStatusRef.current === Status.uninitialised) {
+                    dataStatusRef.current = Status.unchanged;
+                    initialDataRef.current = values;
+                }
+                setValues(values);
+            }
+        };
+        ds.subscribe({
+            range: Range(0, 5)
+        }, (message)=>{
+            if ("viewport-update" === message.type && message.rows) if (dataStatusRef.current === Status.uninitialised) applyServerData(message.rows[0]);
+            else console.log("what do we do with server updates");
+        });
+        return ds;
+    }, [
+        dataSourceProp,
+        schema
+    ]);
+    const id = useIdMemo(idProp);
+    const handleChange = useCallback((evt)=>{
+        const [field, value] = getFieldNameAndValue(evt);
+        const { type } = getField(fields, field);
+        const typedValue = getTypedValue(value, type);
+        setValues((values = {})=>{
+            const newValues = {
+                ...values,
+                [field]: typedValue
+            };
+            const notUpdated = shallowEquals(newValues, initialDataRef.current);
+            dataStatusRef.current = notUpdated ? Status.unchanged : void 0 !== typedValue ? Status.changed : Status.invalid;
+            return newValues;
+        });
+    }, [
+        fields
+    ]);
+    const handleBlur = useCallback(async (evt)=>{
+        const [column, value] = getFieldNameAndValue(evt);
+        const key = values?.[keyField];
+        const { type } = getField(fields, column);
+        const data = getTypedValue(value, type, true);
+        if ("string" == typeof key) {
+            const response = await dataSource.rpcRequest?.({
+                params: {
+                    key,
+                    column,
+                    data
+                },
+                rpcName: "editCell",
+                type: "RPC_REQUEST"
+            });
+            if (response?.type === "SUCCESS_RESULT") setFieldStatusValues((map)=>({
+                    ...map,
+                    [column]: void 0
+                }));
+            else if (response?.type === "ERROR_RESULT") {
+                console.log(`edit rejected ${response.errorMessage}`);
+                setFieldStatusValues((map)=>({
+                        ...map,
+                        [column]: response.errorMessage
+                    }));
+            }
+        }
+    }, [
+        dataSource,
+        fields,
+        keyField,
+        values
+    ]);
+    const handleSubmit = useCallback(async ()=>{
+        const response = await dataSource.rpcRequest?.({
+            params: {
+                comment: ""
+            },
+            rpcName: "submitForm",
+            type: "RPC_REQUEST"
+        });
+        if (response?.type === "SUCCESS_RESULT") onClose?.();
+        else if (response?.type === "ERROR_RESULT") setErrorMessage(response.errorMessage);
+    }, [
+        dataSource,
+        onClose
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        if ("Enter" === evt.key && dataStatusRef.current === Status.changed) handleSubmit();
+    }, [
+        handleSubmit
+    ]);
+    const handleCancel = useCallback(()=>{
+        onClose?.();
+    }, [
+        onClose
+    ]);
+    const getFormControl = (field)=>{
+        const value = String(values?.[field.name] ?? "");
+        if (field.readonly || field.name === keyField) return /*#__PURE__*/ jsx("div", {
+            className: `${classBase}-fieldValue vuuReadOnly`,
+            children: value
+        });
+        return /*#__PURE__*/ jsx(Input, {
+            className: `${classBase}-fieldValue`,
+            onBlur: handleBlur,
+            onChange: handleChange,
+            value: value,
+            id: `${id}-input-${field.name}`
+        });
+    };
+    useEffect(()=>{
+        if (formContentRef.current) {
+            const firstInput = formContentRef.current.querySelector("input");
+            if (firstInput) setTimeout(()=>{
+                firstInput.focus();
+                firstInput.select();
+            }, 100);
+        }
+    }, []);
+    useEffect(()=>()=>{
+            if (dataSource) dataSource.unsubscribe();
+        }, [
+        dataSource
+    ]);
+    const isDirty = dataStatusRef.current === Status.changed;
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: [
+            errorMessage ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-errorBanner`,
+                "data-icon": "error",
+                title: errorMessage,
+                children: "Error, edit(s) not saved"
+            }) : void 0,
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-content`,
+                ref: formContentRef,
+                onKeyDown: handleKeyDown,
+                children: fields.map((field)=>/*#__PURE__*/ jsxs(FormField, {
+                        className: `${classBase}-field`,
+                        "data-field": field.name,
+                        necessity: field.required ? "required" : "optional",
+                        readOnly: field.readonly,
+                        validationStatus: fieldStatusValues[field.name] ? "error" : void 0,
+                        children: [
+                            /*#__PURE__*/ jsx(FormFieldLabel, {
+                                children: field?.label ?? field.description
+                            }),
+                            getFormControl(field),
+                            /*#__PURE__*/ jsx(FormFieldHelperText, {
+                                children: fieldStatusValues[field.name] ?? ""
+                            })
+                        ]
+                    }, field.name))
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-buttonbar salt-theme salt-density-high`,
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "submit",
+                        variant: "cta",
+                        disabled: !isDirty,
+                        onClick: handleSubmit,
+                        children: "Submit"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        variant: "secondary",
+                        onClick: handleCancel,
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { SessionEditingForm_SessionEditingForm as SessionEditingForm };

package/src/session-editing-form/index.js

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