Merge pull request #1544 from finos/linked-table-layout

enable side by side view of linked tables
finos · Nov 20, 2024 · f06f84f · f06f84f
2 parents 0db2dca + 849895e
commit f06f84f
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 34 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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);
 }
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
@@ -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) ? (
-      <Stack
-        active={activeTabs[1]}
-        data-resizeable
-        key={levelConfig.key}
-        onTabSelectionChanged={onTabChange}
-        style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}
-      >
-        {tdsConfig.map(({ config, dataSource, title }, i) => (
-          <View
-            className={`${classBase}-view`}
-            key={i}
-            resizeable
-            style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}
-            title={title}
-          >
-            <Table config={config} dataSource={dataSource} />
-          </View>
-        ))}
-      </Stack>
-    ) : (
+    Array.isArray(tdsConfig) === false ? (
       <View
         {...levelConfig}
         header
@@ -101,8 +88,93 @@ const LinkedTables = ({
       >
         <Table config={tdsConfig.config} dataSource={tdsConfig.dataSource} />
       </View>
+    ) : tabbedView === 1 ? (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexBasis: 0,
+          flexGrow: 1,
+          flexShrink: 1,
+        }}
+      >
+        <div className={`${classBase}-header`}>
+          <Tabstrip activeTabIndex={activeTabs[1]} onActiveChange={onTabChange}>
+            {tdsConfig.map(({ title }, i) => (
+              <Tab key={i} label={title} />
+            ))}
+          </Tabstrip>
+          <div className={`${classBase}-toolTray`}>
+            <TableLayoutToggleButton
+              onChange={onChangeTabbedView}
+              value={tabbedView}
+            />
+          </div>
+        </div>
+        <Stack
+          active={activeTabs[1]}
+          data-resizeable
+          key={levelConfig.key}
+          showTabs={false}
+          style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}
+        >
+          {tdsConfig.map(({ config, dataSource, title }, i) => (
+            <div
+              className={`${classBase}-view`}
+              key={i}
+              style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}
+              title={title}
+            >
+              <Table config={config} dataSource={dataSource} />
+            </div>
+          ))}
+        </Stack>
+      </div>
+    ) : (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexBasis: 0,
+          flexGrow: 1,
+          flexShrink: 1,
+        }}
+      >
+        <div className={`${classBase}-header`}>
+          <div className={`${classBase}-flexHeaders`}>
+            {tdsConfig.map(({ title }, i) => (
+              <span key={i}>{title}</span>
+            ))}
+          </div>
+          <div className={`${classBase}-toolTray`}>
+            <TableLayoutToggleButton
+              onChange={onChangeTabbedView}
+              value={tabbedView}
+            />
+          </div>
+        </div>
+        <Flexbox
+          style={{
+            flexDirection: "row",
+            flexBasis: 0,
+            flexGrow: 1,
+            flexShrink: 1,
+          }}
+        >
+          {tdsConfig.map(({ config, dataSource, title }, i) => (
+            <div
+              className={`${classBase}-view`}
+              data-resizeable
+              key={i}
+              style={{ flexBasis: 0, flexGrow: 1, flexShrink: 1 }}
+              title={title}
+            >
+              <Table config={config} dataSource={dataSource} />
+            </div>
+          ))}
+        </Flexbox>
+      </div>
     );
-
   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
@@ -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 (
+    <ToggleButtonGroup {...props}>
+      <ToggleButton
+        className="vuuIconToggleButton"
+        value={0}
+        aria-label="Tabbed View"
+      >
+        <Icon name="split-v" size={18} />
+      </ToggleButton>
+      <ToggleButton
+        className="vuuIconToggleButton"
+        value={1}
+        aria-label="Side by side view"
+      >
+        <Icon name="tabs" size={18} />
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+};
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
@@ -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,16 +84,15 @@ 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,
   ]);
   const [collapsed, setCollapsed] = useState<[boolean, boolean]>([
     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<HTMLElement>) => {
+      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<HTMLElement>) => {
+      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<HTMLElement>) => 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