From 849895e408cb76c2df4a4ef2b9cd785f81652982 Mon Sep 17 00:00:00 2001 From: heswell Date: Wed, 20 Nov 2024 13:22:42 +0000 Subject: [PATCH] enable side by side view of linked tables --- .../array-data-source/array-data-source.ts | 2 - .../src/TickingArrayDataSource.ts | 4 +- vuu-ui/packages/vuu-datatable/package.json | 1 + .../src/linked-table-view/LinkedTableView.css | 19 +++ .../src/linked-table-view/LinkedTableView.tsx | 118 ++++++++++++++---- .../TableLayoutToggleButton.tsx | 27 ++++ .../linked-table-view/useLinkedTableView.ts | 38 +++++- vuu-ui/packages/vuu-icons/index.css | 13 +- 8 files changed, 188 insertions(+), 34 deletions(-) create mode 100644 vuu-ui/packages/vuu-datatable/src/linked-table-view/TableLayoutToggleButton.tsx diff --git a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts index 23b04e079..f0bdbf4f0 100644 --- a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts +++ b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts @@ -151,7 +151,6 @@ export class ArrayDataSource sort, title, viewport, - visualLink, }: ArrayDataSourceConstructorProps) { super(); if (!data || !columnDescriptors) { @@ -160,7 +159,6 @@ export class ArrayDataSource ); } - console.log({ visualLink }); this.columnDescriptors = columnDescriptors; this.dataMap = dataMap; this.key = keyColumn diff --git a/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts b/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts index 843ac0adb..ec291cbbb 100644 --- a/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts +++ b/vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts @@ -255,7 +255,6 @@ export class TickingArrayDataSource extends ArrayDataSource { parentVpId: parentClientVpId, parentColumnName: toColumn, }).then((response) => { - console.log({ response }); this.emit( "visual-link-created", response as DataSourceVisualLinkCreatedMessage, @@ -266,8 +265,7 @@ export class TickingArrayDataSource extends ArrayDataSource { this.#visualLinkService?.({ childVpId: this.viewport, type: "REMOVE_VISUAL_LINK", - }).then((response) => { - console.log({ response }); + }).then((/* response */) => { this.emit("visual-link-removed"); }); } diff --git a/vuu-ui/packages/vuu-datatable/package.json b/vuu-ui/packages/vuu-datatable/package.json index 8591f0cf0..b6df724ef 100644 --- a/vuu-ui/packages/vuu-datatable/package.json +++ b/vuu-ui/packages/vuu-datatable/package.json @@ -10,6 +10,7 @@ "type-defs": "node ../../scripts/build-type-defs.mjs" }, "dependencies": { + "@salt-ds/core": "1.37.1", "@salt-ds/styles": "0.2.1", "@salt-ds/window": "0.1.1", "@finos/vuu-data-local": "0.0.26", diff --git a/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.css b/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.css index f49fe38bb..921116ba0 100644 --- a/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.css +++ b/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.css @@ -2,6 +2,25 @@ } +.vuuLinkedTableView-header { + align-items: center; + + display: flex; + flex-basis: 28px; + flex-grow: 0; + flex-shrink: 0; + padding-right: var(--salt-spacing-100); + + .vuuTabstrip { + width: fit-content; + } + + .vuuLinkedTableView-toolTray { + margin-left: auto; + } + +} + .vuuLinkedTableView-view { padding: var(--salt-spacing-100); } \ No newline at end of file diff --git a/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.tsx b/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.tsx index 072b7b208..79cc81097 100644 --- a/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.tsx +++ b/vuu-ui/packages/vuu-datatable/src/linked-table-view/LinkedTableView.tsx @@ -3,6 +3,7 @@ import { Flexbox, Stack, View } from "@finos/vuu-layout"; import { VuuLink } from "@finos/vuu-protocol-types"; import { Table } from "@finos/vuu-table"; import { TableConfig } from "@finos/vuu-table-types"; +import { Tabstrip, Tab } from "@finos/vuu-ui-controls"; import { useComponentCssInjection } from "@salt-ds/styles"; import { useWindow } from "@salt-ds/window"; import cx from "clsx"; @@ -15,6 +16,7 @@ import { } from "./useLinkedTableView"; import css from "./LinkedTableView.css"; +import { TableLayoutToggleButton } from "./TableLayoutToggleButton"; const classBase = "vuuLinkedTableView"; @@ -69,29 +71,14 @@ const LinkedTables = ({ const getLinkedTables = ( tdsConfig: TableDataSourceConfig | TableDataSourceConfig[], - { onTabChange, ...levelConfig }: LevelConfig, + { + onChangeTabbedView, + onTabChange, + tabbedView, + ...levelConfig + }: LevelConfig, ) => - Array.isArray(tdsConfig) ? ( - - {tdsConfig.map(({ config, dataSource, title }, i) => ( - - - - ))} - - ) : ( + Array.isArray(tdsConfig) === false ? (
+ ) : tabbedView === 1 ? ( +
+
+ + {tdsConfig.map(({ title }, i) => ( + + ))} + +
+ +
+
+ + {tdsConfig.map(({ config, dataSource, title }, i) => ( +
+
+ + ))} + + + ) : ( +
+
+
+ {tdsConfig.map(({ title }, i) => ( + {title} + ))} +
+
+ +
+
+ + {tdsConfig.map(({ config, dataSource, title }, i) => ( +
+
+ + ))} + + ); - const getAllLinkedTables = ( level2: TableDataSourceConfig | TableDataSourceConfig[], level3: TableDataSourceConfig | TableDataSourceConfig[] | undefined, diff --git a/vuu-ui/packages/vuu-datatable/src/linked-table-view/TableLayoutToggleButton.tsx b/vuu-ui/packages/vuu-datatable/src/linked-table-view/TableLayoutToggleButton.tsx new file mode 100644 index 000000000..f42117718 --- /dev/null +++ b/vuu-ui/packages/vuu-datatable/src/linked-table-view/TableLayoutToggleButton.tsx @@ -0,0 +1,27 @@ +import { Icon } from "@finos/vuu-ui-controls"; +import { + ToggleButton, + ToggleButtonGroup, + ToggleButtonGroupProps, +} from "@salt-ds/core"; + +export const TableLayoutToggleButton = (props: ToggleButtonGroupProps) => { + return ( + + + + + + + + + ); +}; diff --git a/vuu-ui/packages/vuu-datatable/src/linked-table-view/useLinkedTableView.ts b/vuu-ui/packages/vuu-datatable/src/linked-table-view/useLinkedTableView.ts index a72915d55..e5c138c18 100644 --- a/vuu-ui/packages/vuu-datatable/src/linked-table-view/useLinkedTableView.ts +++ b/vuu-ui/packages/vuu-datatable/src/linked-table-view/useLinkedTableView.ts @@ -10,10 +10,10 @@ import { LinkedTableViewProps, LinkTableConfig, } from "./LinkedTableView"; -import { useCallback, useMemo, useState } from "react"; +import { SyntheticEvent, useCallback, useMemo, useState } from "react"; import { TableConfig } from "@finos/vuu-table-types"; import { LinkDescriptorWithLabel, VuuTable } from "@finos/vuu-protocol-types"; -import { useViewContext } from "@finos/vuu-layout"; +// import { useViewContext } from "@finos/vuu-layout"; export type TableDataSourceConfig = { config: TableConfig; @@ -84,9 +84,7 @@ export const useLinkedTableView = ({ const [tableConfig, setTableConfig] = useState< ResolvedTableConfig | undefined >(); - // TBC - const { id } = useViewContext(); - console.log({ id }); + // const { id } = useViewContext(); const [activeTabs, setActiveTab] = useState<[number, number, number]>([ 0, 0, 0, ]); @@ -94,6 +92,7 @@ export const useLinkedTableView = ({ false, false, ]); + const [tabbedView, setTabbedView] = useState<[0 | 1, 0 | 1]>([1, 1]); useMemo(async () => { const tables = getTables(linkedDataSources); @@ -230,6 +229,29 @@ export const useLinkedTableView = ({ setCollapsed(([val]) => [val, false]); }, []); + const handleChangeTabbedView2 = useCallback( + (evt: SyntheticEvent) => { + const target = evt.target as HTMLElement; + const button = target?.closest("button"); + if (button) { + const value = parseInt(button.value) as 0 | 1; + setTabbedView(([, val]) => [value, val]); + } + }, + [], + ); + const handleChangeTabbedView3 = useCallback( + (evt: SyntheticEvent) => { + const target = evt.target as HTMLElement; + const button = target?.closest("button"); + if (button) { + const value = parseInt(button.value) as 0 | 1; + setTabbedView(([val]) => [val, value]); + } + }, + [], + ); + return { activeTabs, level1: { @@ -239,16 +261,20 @@ export const useLinkedTableView = ({ level2: { collapsed: collapsed[0], key: "level2", + onChangeTabbedView: handleChangeTabbedView2, onCollapse: handleCollapseLevel2, onExpand: handleExpandLevel2, onTabChange: handleTabChangeLevel2, + tabbedView: tabbedView[0], }, level3: { collapsed: collapsed[1], key: "level3", + onChangeTabbedView: handleChangeTabbedView3, onCollapse: handleCollapseLevel3, onExpand: handleExpandLevel3, onTabChange: handleTabChangeLevel3, + tabbedView: tabbedView[1], }, tableConfig, }; @@ -263,7 +289,9 @@ export type LevelsConfig = { export type LevelConfig = { key: string; collapsed?: boolean; + onChangeTabbedView?: (evt: SyntheticEvent) => void; onCollapse?: () => void; onTabChange?: (tabIndex: number) => void; onExpand?: () => void; + tabbedView?: 0 | 1; }; diff --git a/vuu-ui/packages/vuu-icons/index.css b/vuu-ui/packages/vuu-icons/index.css index f515fc3a3..6da45d7b6 100644 --- a/vuu-ui/packages/vuu-icons/index.css +++ b/vuu-ui/packages/vuu-icons/index.css @@ -61,6 +61,8 @@ --vuu-svg-radio: url('data:image/svg+xml;utf8,'); --vuu-svg-search: url('data:image/svg+xml;utf8,'); --vuu-svg-settings: url('data:image/svg+xml;utf8,'); + --vuu-svg-split-v: url('data:image/svg+xml;utf8,'); + --vuu-svg-tabs: url('data:image/svg+xml;utf8,'); --vuu-svg-tick: url('data:image/svg+xml;utf8,'); --vuu-svg-triangle-right: url('data:image/svg+xml;utf8,'); --vuu-svg-info-circle: url('data:image/svg+xml;utf8, '); @@ -70,7 +72,9 @@ -span[data-icon] { + + + span[data-icon] { display: inline-block; height: var(--vuu-icon-height, var(--vuu-icon-size, 18px)); position: relative; @@ -278,6 +282,13 @@ span[data-icon] { [data-icon="settings"] { --vuu-icon-svg: var(--vuu-svg-settings); } +[data-icon="split-v"] { + --vuu-icon-svg: var(--vuu-svg-split-v); +} + +[data-icon="tabs"] { + --vuu-icon-svg: var(--vuu-svg-tabs); +} [data-icon="sort-up"] { --vuu-icon-svg: var(--svg-sort-up);