@nocobase/client-v2 2.1.0-beta.22 → 2.1.0-beta.23

package/src/flow/actions/sortingRules.tsx

@@ -0,0 +1,125 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { defineAction, tExpr, MultiRecordResource } from '@nocobase/flow-engine';
+
+const getSortFields = (fields) => {
+  return fields
+    .filter((field: any) => {
+      if (!field.interface) {
+        return false;
+      }
+      const fieldInterface = field.getInterfaceOptions();
+      if (fieldInterface?.sortable) {
+        return true;
+      }
+      return false;
+    })
+    .map((field: any) => {
+      return {
+        value: field.name,
+        label: field?.uiSchema?.title || field.name,
+      };
+    });
+};
+
+export const sortingRule = defineAction({
+  name: 'sortingRule',
+  title: tExpr('Default sorting'),
+  uiSchema: (ctx) => {
+    const fields = ctx.collectionField?.targetCollection
+      ? ctx.collectionField.targetCollection.getFields()
+      : ctx.blockModel.collection.getFields();
+    const sortFields = getSortFields(fields);
+    return {
+      sort: {
+        type: 'array',
+        'x-component': 'ArrayItems',
+        'x-decorator': 'FormItem',
+        items: {
+          type: 'object',
+          properties: {
+            space: {
+              type: 'void',
+              'x-component': 'Space',
+              properties: {
+                sort: {
+                  type: 'void',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'ArrayItems.SortHandle',
+                },
+                field: {
+                  type: 'string',
+                  required: true,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Select',
+                  'x-component-props': {
+                    style: {
+                      width: 260,
+                    },
+                  },
+                  enum: sortFields,
+                },
+                direction: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Radio.Group',
+                  'x-component-props': {
+                    optionType: 'button',
+                  },
+                  enum: [
+                    {
+                      label: tExpr('ASC'),
+                      value: 'asc',
+                    },
+                    {
+                      label: tExpr('DESC'),
+                      value: 'desc',
+                    },
+                  ],
+                },
+                remove: {
+                  type: 'void',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'ArrayItems.Remove',
+                },
+              },
+            },
+          },
+        },
+        properties: {
+          add: {
+            type: 'void',
+            title: tExpr('Add sort field'),
+            'x-component': 'ArrayItems.Addition',
+          },
+        },
+      },
+    };
+  },
+  defaultParams(ctx) {
+    return {
+      sort: [],
+    };
+  },
+  async handler(ctx, params) {
+    const sortArr = params.sort.map((item) => {
+      return item.direction === 'desc' ? `-${item.field}` : item.field;
+    });
+    // @ts-ignore
+    const resource = ctx.model?.resource as MultiRecordResource;
+    if (!resource) {
+      return;
+    }
+    ctx.model.setProps({
+      globalSort: sortArr,
+    });
+    resource.setSort(sortArr);
+  },
+});

package/src/flow/actions/titleField.tsx

@@ -0,0 +1,141 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { defineAction, DisplayItemModel, FlowModelContext, tExpr } from '@nocobase/flow-engine';
+import { isTitleField } from '../../flow-compat';
+
+const normalizeFilterTargetKey = (filterTargetKey: any) => {
+  if (typeof filterTargetKey === 'string') {
+    return filterTargetKey;
+  }
+  if (Array.isArray(filterTargetKey) && filterTargetKey.length === 1) {
+    return filterTargetKey[0];
+  }
+  return undefined;
+};
+
+const resolveTargetCollectionField = (targetCollection: any, label?: string) => {
+  if (!targetCollection) {
+    return null;
+  }
+  const normalizedLabel =
+    label || targetCollection.titleCollectionField?.name || normalizeFilterTargetKey(targetCollection.filterTargetKey);
+  if (!normalizedLabel) {
+    return null;
+  }
+  return targetCollection.getField(normalizedLabel);
+};
+
+export const titleField = defineAction({
+  name: 'titleField',
+  title: tExpr('Title field'),
+  uiMode: (ctx) => {
+    const targetCollection = ctx.collectionField.targetCollection;
+    const dataSourceManager = ctx.app.dataSourceManager;
+    const targetFields = targetCollection?.getFields?.() ?? [];
+    const options = targetFields
+      .filter((field) => isTitleField(dataSourceManager, field.options))
+      .map((field) => ({
+        value: field.name,
+        label: field?.title,
+      }));
+    return {
+      type: 'select',
+      key: 'label',
+      props: {
+        options,
+      },
+    };
+  },
+  defaultParams: (ctx: any) => {
+    const titleField = ctx.model.context.collectionField.targetCollectionTitleFieldName;
+    return {
+      label: ctx.model.parent?.props?.titleField || ctx.model.props.titleField || titleField,
+    };
+  },
+  hideInSettings: async (ctx: FlowModelContext) => {
+    return (
+      !ctx.collectionField ||
+      !ctx.collectionField.isAssociationField() ||
+      (ctx.model.subModels.field as any)?.disableTitleField
+    );
+  },
+  beforeParamsSave: async (ctx: any, params, previousParams) => {
+    const target = ctx.model.collectionField.target;
+    const targetCollection = ctx.model.collectionField.targetCollection;
+    if (params.label !== previousParams.label) {
+      const fieldUid = ctx.model.subModels['field']?.['uid'];
+      if (fieldUid) {
+        await ctx.engine.destroyModel(fieldUid);
+      }
+      const targetCollectionField = resolveTargetCollectionField(targetCollection, params.label);
+      if (!targetCollectionField) {
+        return;
+      }
+      const binding = DisplayItemModel.getDefaultBindingByField(ctx, targetCollectionField);
+      if (!binding) {
+        return;
+      }
+      const use = binding.modelName;
+      const model = ctx.model.setSubModel('field', {
+        use,
+        stepParams: {
+          fieldSettings: {
+            init: {
+              dataSourceKey: ctx.model.collectionField.dataSourceKey,
+              collectionName: target,
+              fieldPath: params.label,
+            },
+          },
+        },
+      });
+      await model.save();
+      await model.dispatchEvent('beforeRender');
+      // 持久化
+      await ctx.model.save();
+    }
+  },
+
+  async handler(ctx: any, params) {
+    const target = ctx.model.collectionField.target;
+    const targetCollection = ctx.model.collectionField.targetCollection;
+    const targetCollectionField = resolveTargetCollectionField(targetCollection, params.label);
+    if (!targetCollectionField) {
+      return;
+    }
+    const filterKey = normalizeFilterTargetKey(targetCollection.filterTargetKey) || targetCollectionField.name;
+    const label = targetCollectionField.name;
+    const newFieldNames = {
+      value: filterKey,
+      label,
+    };
+    ctx.model.setProps({ fieldNames: newFieldNames });
+    const binding = DisplayItemModel.getDefaultBindingByField(ctx, targetCollectionField);
+    if (!binding) {
+      return;
+    }
+    const use = binding.modelName;
+    if (!ctx.model.subModels['field']) {
+      const model = ctx.model.setSubModel('field', {
+        use,
+        stepParams: {
+          fieldSettings: {
+            init: {
+              dataSourceKey: ctx.model.collectionField.dataSourceKey,
+              collectionName: target,
+              fieldPath: newFieldNames.label,
+            },
+          },
+        },
+      });
+      // await model.save();
+      await model.dispatchEvent('beforeRender');
+    }
+  },
+});

package/src/flow/actions/validation.tsx

@@ -0,0 +1,77 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { defineAction, jioToJoiSchema, tExpr } from '@nocobase/flow-engine';
+import { FieldValidation } from '../../flow-compat';
+
+export const validation = defineAction({
+  title: tExpr('Validation'),
+  name: 'validation',
+  uiSchema: (ctx) => {
+    if (!ctx.model.collectionField) {
+      return;
+    }
+    const targetInterface = ctx.model.collectionField.getInterfaceOptions();
+    if (!targetInterface.validationType) {
+      return null;
+    }
+    return {
+      validation: {
+        'x-decorator': 'FormItem',
+        'x-component': FieldValidation,
+        'x-component-props': {
+          type: targetInterface.validationType,
+          availableValidationOptions: [...new Set(targetInterface.availableValidationOptions)],
+          excludeValidationOptions: [...new Set(targetInterface.excludeValidationOptions)],
+          isAssociation: targetInterface.isAssociation,
+        },
+      },
+    };
+  },
+  handler(ctx, params) {
+    if (params.validation) {
+      const rules = [];
+      const schema = jioToJoiSchema(params.validation);
+      const label = ctx.model.props.label;
+      rules.push({
+        validator: (_, value) => {
+          const { error } = schema.validate(value, {
+            abortEarly: false,
+          });
+
+          if (error) {
+            const messages = error.details.map((d) => {
+              return ctx.t(`${d.type}`, {
+                ...d.context,
+                ns: 'data-source-main',
+                label,
+              });
+            });
+            const div = document.createElement('div');
+            div.innerHTML = messages.join('; ');
+            return Promise.reject(div.textContent);
+          }
+
+          return Promise.resolve();
+        },
+      });
+      const hasRequiredInCollection = params.validation.rules.some((rule) => rule.name === 'required');
+      if (hasRequiredInCollection) {
+        ctx.model.setProps({
+          required: hasRequiredInCollection,
+        });
+      }
+      console.log(rules);
+      ctx.model.setProps({
+        rules,
+        validation: params.validation,
+      });
+    }
+  },
+});

package/src/flow/admin-shell/AdminLayoutRouteCoordinator.ts

@@ -0,0 +1,339 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import {
+  FlowEngine,
+  FlowModel,
+  observable,
+  parsePathnameToViewParams,
+  ViewNavigation,
+  type ViewParam,
+} from '@nocobase/flow-engine';
+import React from 'react';
+import { getViewDiffAndUpdateHidden, getKey } from '../getViewDiffAndUpdateHidden';
+import { getOpenViewStepParams } from '../flows/openViewFlow';
+import { resolveViewParamsToViewList, updateViewListHidden, type ViewItem } from '../resolveViewParamsToViewList';
+
+export interface RoutePageMeta {
+  active: boolean;
+  refreshDesktopRoutes?: () => Promise<unknown>;
+  layoutContentElement?: HTMLElement | null;
+}
+
+interface ViewRuntimeState {
+  destroy: (force?: boolean) => void;
+  update: (value: any) => void;
+  navigation: ViewNavigation;
+}
+
+interface RoutePageRuntime {
+  pageUid: string;
+  routeModel: FlowModel;
+  meta: RoutePageMeta;
+  viewState: Record<string, ViewRuntimeState>;
+  prevViewList: ViewItem[];
+  hasStepNavigated: boolean;
+  forceStop: boolean;
+}
+
+interface RouteLike {
+  params?: { name?: string };
+  pathname?: string;
+}
+
+/**
+ * 管理 admin 场景下每个 page 的 v2 视图栈编排。
+ * 该协调器只负责状态机和开关视图，不直接绑定 React 生命周期。
+ */
+export class AdminLayoutRouteCoordinator {
+  private readonly flowEngine: FlowEngine;
+  private readonly runtimes = new Map<string, RoutePageRuntime>();
+  private layoutContentElement: HTMLElement | null = null;
+
+  private setRuntimeActive(runtime: RoutePageRuntime, active: boolean) {
+    runtime.meta.active = active;
+    if (runtime.routeModel.context.pageActive?.value !== active) {
+      runtime.routeModel.context.pageActive.value = active;
+    }
+  }
+
+  private getCurrentRouteByPageUid(pageUid: string) {
+    return this.flowEngine.context.routeRepository?.getRouteBySchemaUid?.(pageUid) || {};
+  }
+
+  constructor(flowEngine: FlowEngine) {
+    this.flowEngine = flowEngine;
+  }
+
+  setLayoutContentElement(element: HTMLElement | null) {
+    this.layoutContentElement = element;
+  }
+
+  registerPage(pageUid: string, meta: RoutePageMeta) {
+    const routeModel = this.getOrCreateRouteModel(pageUid);
+    const runtime: RoutePageRuntime = {
+      pageUid,
+      routeModel,
+      meta: {
+        active: !!meta.active,
+        refreshDesktopRoutes: meta.refreshDesktopRoutes,
+        layoutContentElement: meta.layoutContentElement || null,
+      },
+      viewState: {},
+      prevViewList: [],
+      hasStepNavigated: false,
+      forceStop: false,
+    };
+
+    this.ensureRouteModelContext(runtime);
+    this.runtimes.set(pageUid, runtime);
+    this.syncPageMeta(pageUid, meta);
+    this.syncRoute(this.flowEngine.context.route || {});
+
+    return runtime.routeModel;
+  }
+
+  syncPageMeta(pageUid: string, meta: Partial<RoutePageMeta>) {
+    const runtime = this.runtimes.get(pageUid);
+    if (!runtime) {
+      return;
+    }
+
+    runtime.meta = {
+      ...runtime.meta,
+      ...meta,
+      active: typeof meta.active === 'boolean' ? meta.active : runtime.meta.active,
+      layoutContentElement: meta.layoutContentElement ?? runtime.meta.layoutContentElement,
+    };
+
+    this.setRuntimeActive(runtime, runtime.meta.active);
+  }
+
+  unregisterPage(pageUid: string) {
+    this.cleanupPage(pageUid);
+    this.runtimes.delete(pageUid);
+  }
+
+  syncRoute(routeLike: RouteLike) {
+    const activePageUid = routeLike?.params?.name;
+    const pathname = routeLike?.pathname;
+
+    this.runtimes.forEach((runtime) => {
+      this.setRuntimeActive(runtime, runtime.pageUid === activePageUid);
+    });
+
+    if (!activePageUid || !pathname) {
+      return;
+    }
+
+    this.runtimes.forEach((runtime) => {
+      if (runtime.pageUid !== activePageUid) {
+        runtime.forceStop = true;
+      }
+    });
+
+    const runtime = this.runtimes.get(activePageUid);
+    if (!runtime) {
+      return;
+    }
+
+    runtime.forceStop = false;
+    this.syncRuntimeWithPathname(runtime, pathname);
+  }
+
+  cleanupPage(pageUid: string) {
+    const runtime = this.runtimes.get(pageUid);
+    if (!runtime) {
+      return;
+    }
+
+    runtime.forceStop = true;
+    runtime.prevViewList.forEach((viewItem) => {
+      this.flowEngine.removeModelWithSubModels(viewItem.params.viewUid);
+      runtime.viewState[getKey(viewItem)]?.destroy?.();
+      delete runtime.viewState[getKey(viewItem)];
+    });
+    runtime.prevViewList = [];
+    runtime.hasStepNavigated = false;
+  }
+
+  destroy() {
+    Array.from(this.runtimes.keys()).forEach((pageUid) => {
+      this.cleanupPage(pageUid);
+      this.runtimes.delete(pageUid);
+    });
+  }
+
+  private syncRuntimeWithPathname(runtime: RoutePageRuntime, pathname: string) {
+    try {
+      const viewStack = parsePathnameToViewParams(pathname);
+      const viewList = resolveViewParamsToViewList(this.flowEngine, viewStack, runtime.routeModel);
+
+      if (this.shouldStepNavigate(runtime, viewList)) {
+        this.stepNavigate(viewList, 0);
+        runtime.hasStepNavigated = true;
+        return;
+      }
+
+      const { viewsToClose, viewsToOpen } = getViewDiffAndUpdateHidden(runtime.prevViewList, viewList);
+
+      if (viewsToClose.length) {
+        viewsToClose.forEach((viewItem) => {
+          runtime.viewState[getKey(viewItem)]?.destroy?.(true);
+          delete runtime.viewState[getKey(viewItem)];
+        });
+        updateViewListHidden(viewList);
+      }
+
+      if (viewsToOpen.length) {
+        void this.handleOpenViews(runtime, viewList, viewsToOpen);
+      }
+
+      if (viewsToClose.length === 0 && viewsToOpen.length === 0) {
+        const currentViewItem = viewList.at(-1);
+        if (currentViewItem) {
+          runtime.viewState[getKey(currentViewItem)]?.navigation.setViewStack(viewList.map((item) => item.params));
+        }
+      }
+
+      runtime.prevViewList = [...viewList];
+    } catch (error) {
+      console.error(`[NocoBase] Failed to resolve view params to view list:`, error);
+    }
+  }
+
+  private shouldStepNavigate(runtime: RoutePageRuntime, viewList: ViewItem[]) {
+    return runtime.prevViewList.length === 0 && viewList.length > 1 && !runtime.hasStepNavigated;
+  }
+
+  private stepNavigate(viewList: ViewItem[], index: number) {
+    if (!viewList[index]) {
+      return;
+    }
+
+    if (index === 0) {
+      new ViewNavigation(this.flowEngine.context, []).navigateTo(viewList[index].params, { replace: true });
+    } else {
+      new ViewNavigation(
+        this.flowEngine.context,
+        viewList.slice(0, index).map((item) => item.params),
+      ).navigateTo(viewList[index].params);
+    }
+
+    this.stepNavigate(viewList, index + 1);
+  }
+
+  private async handleOpenViews(runtime: RoutePageRuntime, viewList: ViewItem[], viewsToOpen: ViewItem[]) {
+    const missingModels = viewsToOpen.filter((v) => !v.model);
+    if (missingModels.length > 0) {
+      await Promise.all(
+        missingModels.map(async (viewItem) => {
+          try {
+            viewItem.model = await this.flowEngine.loadModel({ uid: viewItem.modelUid });
+          } catch (error) {
+            console.error(`[NocoBase] Failed to load model ${viewItem.modelUid}:`, error);
+          }
+        }),
+      );
+    }
+
+    if (runtime.forceStop) {
+      return;
+    }
+
+    updateViewListHidden(viewList);
+    this.openViews(runtime, viewList, viewsToOpen, 0);
+  }
+
+  private openViews(runtime: RoutePageRuntime, viewList: ViewItem[], viewsToOpen: ViewItem[], index: number) {
+    if (!viewsToOpen[index]) {
+      return;
+    }
+
+    const viewItem = viewsToOpen[index];
+    if (!viewItem.model) {
+      return;
+    }
+
+    const destroyRef = React.createRef<(result?: any, force?: boolean) => void>();
+    const updateRef = React.createRef<(value: any) => void>();
+    const openViewParams = getOpenViewStepParams(viewItem.model);
+    const openerUids = viewList.slice(0, viewItem.index).map((item) => item.params.viewUid);
+    const navigation = new ViewNavigation(
+      this.flowEngine.context,
+      viewList.slice(0, viewItem.index + 1).map((item) => item.params),
+    );
+
+    viewItem.model.dispatchEvent('click', {
+      target: runtime.meta.layoutContentElement || this.layoutContentElement,
+      collectionName: openViewParams?.collectionName,
+      associationName: openViewParams?.associationName,
+      dataSourceKey: openViewParams?.dataSourceKey,
+      destroyRef,
+      updateRef,
+      openerUids,
+      ...viewItem.params,
+      navigation,
+      onOpen: () => {
+        this.openViews(runtime, viewList, viewsToOpen, index + 1);
+      },
+      hidden: viewItem.hidden,
+      isMobileLayout: !!this.flowEngine.context.isMobileLayout,
+      triggerByRouter: true,
+    });
+
+    runtime.viewState[getKey(viewItem)] = {
+      destroy: (_force?: boolean) => destroyRef.current?.(),
+      update: (value: any) => updateRef.current?.(value),
+      navigation,
+    };
+  }
+
+  private ensureRouteModelContext(runtime: RoutePageRuntime) {
+    if (!runtime.routeModel.context.pageActive) {
+      runtime.routeModel.context.defineProperty('pageActive', {
+        value: observable.ref(false),
+        info: {
+          description:
+            'Whether current page route is active (keep-alive). This is an observable.ref<boolean> (use ctx.pageActive.value to read/write).',
+          detail: 'observable.ref<boolean>',
+        },
+      });
+    }
+
+    runtime.routeModel.context.defineProperty('currentRoute', {
+      get: () => this.getCurrentRouteByPageUid(runtime.pageUid),
+      // 当前路由来自 routeRepository，菜单更新后必须实时读取最新对象。
+      cache: false,
+    });
+
+    runtime.routeModel.context.defineProperty('refreshDesktopRoutes', {
+      get: () => runtime.meta.refreshDesktopRoutes,
+      // refresh 回调来自页面桥接层，切页后也需要读取最新引用。
+      cache: false,
+    });
+  }
+
+  private getOrCreateRouteModel(pageUid: string): FlowModel {
+    return (
+      this.flowEngine.getModel(pageUid) ||
+      this.flowEngine.createModel({
+        uid: pageUid,
+        use: 'RouteModel',
+      })
+    );
+  }
+}
+
+/**
+ * 将 pathname 解析结果和 pageUid 对齐，便于测试里复用。
+ */
+export function toViewStack(pathname: string): ViewParam[] {
+  return parsePathnameToViewParams(pathname);
+}