From 2eb71cf64d8b34cb9e84989051016e694f932c4b Mon Sep 17 00:00:00 2001 From: heswell Date: Mon, 3 Jun 2024 16:22:13 +0100 Subject: [PATCH 1/2] fix bug in session table editing column value type wa snot typechecked correctly, always sent to server as string. --- vuu-ui/package-lock.json | 4 + .../packages/vuu-popups/src/dialog/Dialog.css | 18 --- .../packages/vuu-popups/src/dialog/Dialog.tsx | 105 ------------------ .../packages/vuu-popups/src/dialog/index.ts | 1 - .../vuu-popups/src/dialog/useDialog.tsx | 2 +- .../SessionEditingForm.tsx | 21 ++-- .../src/useFilterTable.tsx | 4 +- 7 files changed, 15 insertions(+), 140 deletions(-) delete mode 100644 vuu-ui/packages/vuu-popups/src/dialog/Dialog.css delete mode 100644 vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json index 99940d572..59fd645c8 100644 --- a/vuu-ui/package-lock.json +++ b/vuu-ui/package-lock.json @@ -13430,6 +13430,7 @@ "@finos/vuu-filters": "0.0.26", "@finos/vuu-layout": "0.0.26", "@finos/vuu-popups": "0.0.26", + "@finos/vuu-shell": "0.0.26", "@finos/vuu-table": "0.0.26", "@finos/vuu-table-extras": "0.0.26", "@finos/vuu-table-types": "0.0.26", @@ -13786,6 +13787,7 @@ "dependencies": { "@finos/vuu-data-react": "0.0.26", "@finos/vuu-data-remote": "0.0.26", + "@finos/vuu-datatable": "0.0.26", "@finos/vuu-filter-types": "0.0.26", "@finos/vuu-filters": "0.0.26", "@finos/vuu-layout": "0.0.26", @@ -14773,6 +14775,7 @@ "@finos/vuu-filters": "0.0.26", "@finos/vuu-layout": "0.0.26", "@finos/vuu-popups": "0.0.26", + "@finos/vuu-shell": "0.0.26", "@finos/vuu-table": "0.0.26", "@finos/vuu-table-extras": "0.0.26", "@finos/vuu-table-types": "0.0.26", @@ -18356,6 +18359,7 @@ "requires": { "@finos/vuu-data-react": "0.0.26", "@finos/vuu-data-remote": "0.0.26", + "@finos/vuu-datatable": "0.0.26", "@finos/vuu-filter-types": "0.0.26", "@finos/vuu-filters": "0.0.26", "@finos/vuu-layout": "0.0.26", diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css deleted file mode 100644 index 3929b8172..000000000 --- a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css +++ /dev/null @@ -1,18 +0,0 @@ -.vuuDialog { - background: var(--salt-container-primary-background); - border: var(--vuuDialog-border, solid 1px #ccc); - border-radius: 5px; - display: var(--vuuDialog-display, flex); - flex-direction: column;; - padding: var(--vuuDialog-padding, 16px); - position: relative; - box-shadow: var(--salt-overlayable-shadow, none); - height: var(--vuuDialog-height, fit-content); - overflow: visible; - width: var(--vuuDialog-width, fit-content); -} - -.vuuDialog-body { - flex: 1 1 auto; -} - diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx deleted file mode 100644 index 92b8fb7c9..000000000 --- a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import cx from "clsx"; -import { useComponentCssInjection } from "@salt-ds/styles"; -import { useWindow } from "@salt-ds/window"; -import { useThemeAttributes } from "@finos/vuu-utils"; -import { HTMLAttributes, useCallback, useLayoutEffect, useRef } from "react"; -import { DialogHeader } from "../dialog-header"; -import { PopupComponentProps, useAnchoredPosition } from "../popup"; - -import dialogCss from "./Dialog.css"; - -const classBase = "vuuDialog"; - -const AnchorBody = { current: document.body }; -const EMPTY_PROPS = {}; - -export interface DialogProps extends HTMLAttributes { - PopupProps?: Partial; - isOpen?: boolean; - onClose?: () => void; - hideCloseButton?: boolean; -} - -export const Dialog = ({ - PopupProps = EMPTY_PROPS, - children, - className, - isOpen = false, - onClose, - style, - title, - hideCloseButton = false, - ...htmlAttributes -}: DialogProps) => { - const targetWindow = useWindow(); - useComponentCssInjection({ - testId: "vuu-dialog", - css: dialogCss, - window: targetWindow, - }); - - const { - anchorElement = AnchorBody, - offsetLeft = 0, - offsetTop = 0, - placement = "auto", - } = PopupProps; - - const rootRef = useRef(null); - const portalRef = useRef(null); - const [themeClass, _, dataMode] = useThemeAttributes(); - const { position } = useAnchoredPosition({ - anchorElement, - offsetLeft, - offsetTop, - placement, - }); - - const close = useCallback(() => { - onClose?.(); - }, [onClose]); - - // if (!isOpen) { - // return null; - // } - - useLayoutEffect(() => { - if (rootRef.current) { - if (isOpen) { - // rootRef.current.showModal(); - rootRef.current.show(); - - const { left, top } = rootRef.current.getBoundingClientRect(); - if (portalRef.current) { - portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`; - } - } else { - rootRef.current.close(); - } - if (placement.endsWith("center")) { - const { width } = rootRef.current.getBoundingClientRect(); - rootRef.current.style.marginLeft = `-${width / 2}px`; - } - } - }, [isOpen, placement]); - - return ( - - -
{children}
-
-
- ); -}; diff --git a/vuu-ui/packages/vuu-popups/src/dialog/index.ts b/vuu-ui/packages/vuu-popups/src/dialog/index.ts index 4ba801841..01bbfb6a2 100644 --- a/vuu-ui/packages/vuu-popups/src/dialog/index.ts +++ b/vuu-ui/packages/vuu-popups/src/dialog/index.ts @@ -1,2 +1 @@ -export * from "./Dialog"; export * from "./useDialog"; diff --git a/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx b/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx index d4c448e44..c0fad8e04 100644 --- a/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx +++ b/vuu-ui/packages/vuu-popups/src/dialog/useDialog.tsx @@ -42,7 +42,7 @@ export const useDialog = () => { ); const dialog = dialogState ? ( - + {dialogState.content} {dialogState.hideCloseButton !== true ? ( diff --git a/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx b/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx index dabecadaf..6c3f1cd67 100644 --- a/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx +++ b/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx @@ -193,11 +193,11 @@ export const SessionEditingForm = ({ const initialDataRef = useRef(); const dataStatusRef = useRef(Status.uninitialised); - const ds = getDataSource(dataSourceProp, schema); - const { columns } = ds; - const columnMap = buildColumnMap(ds.columns); - const dataSource = useMemo(() => { + const ds = getDataSource(dataSourceProp, schema); + const { columns } = ds; + const columnMap = buildColumnMap(ds.columns); + const applyServerData = (data: VuuDataRow) => { if (columnMap) { const values: { [key: string]: VuuRowDataItemType } = {}; @@ -222,16 +222,15 @@ export const SessionEditingForm = ({ } }); return ds; - }, [columnMap, columns, 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); - const typedValue = value; + const { type } = getField(fields, field); + const typedValue = getTypedValue(value, type); setValues((values = {}) => { const newValues = { ...values, @@ -246,7 +245,7 @@ export const SessionEditingForm = ({ return newValues; }); }, - [] + [fields] ); const handleBlur = useCallback>( @@ -255,9 +254,7 @@ export const SessionEditingForm = ({ const rowKey = values?.[keyField]; // TODO link this with client side validation if we're going to use it const { type } = getField(fields, field); - const clientTypedValue = getTypedValue(value, type, true); - console.log(`client typed value ${clientTypedValue}`); - const typedValue = value; + const typedValue = getTypedValue(value, type, true); if (typeof rowKey === "string") { dataSource .menuRpcCall({ diff --git a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx index 2550e3dd3..bb7bb6508 100644 --- a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx +++ b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx @@ -124,14 +124,12 @@ export const useFilterTable = ({ tableSchema }: FilterTableFeatureProps) => { ); const filterBarProps: Omit = { - FilterClauseEditorProps: { - suggestionProvider, - }, columnDescriptors: tableConfig.columns, filterState, onFilterDeleted, onFilterRenamed, onFilterStateChanged, + suggestionProvider, tableSchema, }; From 78dbc7f9893abe1a7a618eaec8c4b65377532e59 Mon Sep 17 00:00:00 2001 From: heswell Date: Mon, 3 Jun 2024 16:26:41 +0100 Subject: [PATCH 2/2] fix type issue --- .../sample-apps/feature-filter-table/src/useFilterTable.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx index bb7bb6508..2550e3dd3 100644 --- a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx +++ b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx @@ -124,12 +124,14 @@ export const useFilterTable = ({ tableSchema }: FilterTableFeatureProps) => { ); const filterBarProps: Omit = { + FilterClauseEditorProps: { + suggestionProvider, + }, columnDescriptors: tableConfig.columns, filterState, onFilterDeleted, onFilterRenamed, onFilterStateChanged, - suggestionProvider, tableSchema, };