Merge pull request #1670 from merico-dev/1669-add-interaction-operation-switch-tab

1669 add interaction operation switch tab

Author: GerilLeto

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.28.0",
+  "version": "14.29.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.28.0",
+  "version": "14.29.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/dashboard-editor/model/views/index.ts

@@ -33,6 +33,19 @@ export const ViewsModel = types
         type: v.type as EViewComponentType,
       }));
     },
+    get tabViewOptions() {
+      return this.options.filter((o) => o.type === EViewComponentType.Tabs);
+    },
+    tabOptions(viewID: string) {
+      const view = self.current.find((v) => v.id === viewID && v.type === EViewComponentType.Tabs && v.tabs.length > 0);
+      if (!view) {
+        return [];
+      }
+      return view.tabs.map((t) => ({
+        label: t.name,
+        value: t.id,
+      }));
+    },
     get editorOptions() {
       // @ts-expect-error getRoot type, reading panels
       const panels: PanelsModelInstance = getRoot(self).content.panels;

dashboard/src/i18n/en.ts

@@ -216,6 +216,11 @@ export const en = {
           label: 'Open View',
           view: 'View',
         },
+        switch_tab: {
+          label: 'Switch Tab',
+          view: 'View',
+          tab: 'Tab',
+        },
         scroll_to_panel: {
           label: 'Scroll to Panel',
           panel: 'Panel',

dashboard/src/i18n/zh.ts

@@ -216,6 +216,11 @@ export const zh = {
           label: '唤出视图',
           view: '视图',
         },
+        switch_tab: {
+          label: '切换标签页',
+          view: '视图',
+          tab: '标签页',
+        },
         scroll_to_panel: {
           label: '滚动到卡片',
           panel: '卡片',

dashboard/src/interactions/components/operation-select.tsx

@@ -110,6 +110,7 @@ const OperationSchemaSelect = observer(({ model }: { model: ReadyOperationConfig
         withinPortal: true,
         zIndex: 340,
       }}
+      maxDropdownHeight={500}
     />
   );
 });

dashboard/src/interactions/operation/operations/index.ts

@@ -5,12 +5,14 @@ import { OpenView } from './open-view';
 import { SetFilterValues } from './set-filter-values';
 import { ClearFilterValues } from './clear-filter-values';
 import { ScrollToPanel } from './scroll-to-panel';
+import { SwitchTab } from './switch-tab';
 
 export const OPERATIONS: IDashboardOperationSchema[] = [
   ConsoleLog,
   OpenLink,
   OpenView,
   ScrollToPanel,
   SetFilterValues,
+  SwitchTab,
   ClearFilterValues,
 ];

dashboard/src/interactions/operation/operations/switch-tab.tsx

@@ -0,0 +1,63 @@
+import { Select, Stack } from '@mantine/core';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+import { useStorageData } from '~/components/plugins';
+import { useEditContentModelContext } from '~/contexts';
+import { IDashboardOperation, IDashboardOperationSchema, IOperationConfigProps } from '~/types/plugin';
+import { getSelectChangeHandler } from '~/utils/mantine';
+
+export interface ISwitchTabOperationConfig {
+  viewID: string;
+  tab: string;
+}
+
+const SwitchTabOperationSettings = observer((props: IOperationConfigProps) => {
+  const { t } = useTranslation();
+  const model = useEditContentModelContext();
+  const { value, set } = useStorageData<ISwitchTabOperationConfig>(props.operation.operationData, 'config');
+
+  const { viewID = '', tab = '' } = value ?? {};
+  const setViewID = (viewID: string) => void set({ viewID, tab });
+  const setTab = (tab: string) => void set({ viewID, tab });
+  return (
+    <Stack gap="xs">
+      <Select
+        defaultValue={viewID}
+        value={viewID}
+        onChange={getSelectChangeHandler(setViewID)}
+        label={t('interactions.operation.switch_tab.view')}
+        data={model.views.tabViewOptions}
+        comboboxProps={{
+          withinPortal: true,
+          zIndex: 340,
+        }}
+        maxDropdownHeight={500}
+      />
+      <Select
+        defaultValue={tab}
+        value={tab}
+        onChange={getSelectChangeHandler(setTab)}
+        label={t('interactions.operation.switch_tab.tab')}
+        data={model.views.tabOptions(viewID)}
+        comboboxProps={{
+          withinPortal: true,
+          zIndex: 340,
+        }}
+        maxDropdownHeight={500}
+      />
+    </Stack>
+  );
+});
+
+async function run(payload: Record<string, unknown>, operation: IDashboardOperation) {
+  const config = await operation.operationData.getItem<ISwitchTabOperationConfig>('config');
+  const { viewID, tab } = config;
+  window.dispatchEvent(new CustomEvent('switch_tab', { detail: { viewID, tab } }));
+}
+
+export const SwitchTab: IDashboardOperationSchema = {
+  displayName: 'interactions.operation.switch_tab.label',
+  id: 'builtin:op:switch_tab',
+  configRender: SwitchTabOperationSettings,
+  run,
+};

dashboard/src/interactions/temp-hack.ts

@@ -45,17 +45,41 @@ export function useInteractionOperationHacks(
         return;
       }
       navigate(`#${panelID}`);
-      const element = document.getElementById(panelID);
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth' });
-      }
+      setTimeout(() => {
+        const element = document.getElementById(panelID);
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth' });
+        }
+      }, 300);
     };
     window.addEventListener('scroll_to_panel', handler);
     return () => {
       window.removeEventListener('scroll_to_panel', handler);
     };
   }, [navigate]);
 
+  useEffect(() => {
+    const handler = (e: $TSFixMe) => {
+      logEvent(e);
+
+      const { viewID, tab } = e.detail;
+      if (!viewID) {
+        console.error(new Error('[Switch Tab] Needs to pick a view and a tab first'));
+        return;
+      }
+      const view = model.views.findByID(viewID);
+      if (!view) {
+        console.error(new Error(`[Switch Tab] View by ID[${viewID}] is not found`));
+        return;
+      }
+      view.setTab(tab);
+    };
+    window.addEventListener('switch_tab', handler);
+    return () => {
+      window.removeEventListener('switch_tab', handler);
+    };
+  }, [model, inEditMode]);
+
   useEffect(() => {
     const handler = (e: $TSFixMe) => {
       logEvent(e);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.28.0",
+  "version": "14.29.0",
   "private": true,
   "workspaces": [
     "api",