@nocobase/client-v2 2.1.0-alpha.21 → 2.1.0-alpha.23

package/src/flow/models/fields/AssociationFieldModel/recordSelectShared.tsx

@@ -0,0 +1,283 @@
+/**
+ * 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 {
+  createCurrentRecordMetaFactory,
+  FlowModel,
+  useFlowModel,
+  type FlowRuntimeContext,
+} from '@nocobase/flow-engine';
+import type { SelectProps } from 'antd';
+import React from 'react';
+import { omit } from 'lodash';
+
+export interface AssociationFieldNames {
+  label: string;
+  value: string;
+}
+
+const isPlaceholderFieldName = (value: unknown, fallback: 'label' | 'value') => value === fallback;
+
+const unwrapAssociationOptionRecord = (option: unknown): Record<string, unknown> | undefined => {
+  if (option && typeof option === 'object') {
+    const raw = (option as Record<string, unknown>).data;
+    if (raw && typeof raw === 'object') {
+      return raw as Record<string, unknown>;
+    }
+    return option as Record<string, unknown>;
+  }
+  return undefined;
+};
+
+function normalizeFilterTargetKey(filterTargetKey: unknown): string | undefined {
+  if (typeof filterTargetKey === 'string' && filterTargetKey) {
+    return filterTargetKey;
+  }
+  if (Array.isArray(filterTargetKey) && filterTargetKey.length === 1 && typeof filterTargetKey[0] === 'string') {
+    return filterTargetKey[0];
+  }
+  return undefined;
+}
+
+export function normalizeAssociationFieldNames(
+  fieldNames: Partial<AssociationFieldNames> | undefined,
+  targetCollection?: any,
+): AssociationFieldNames {
+  const titleCollectionFieldName =
+    typeof targetCollection?.titleCollectionField?.name === 'string'
+      ? targetCollection.titleCollectionField.name
+      : undefined;
+  const fallbackValue = normalizeFilterTargetKey(targetCollection?.filterTargetKey) || 'id';
+  const explicitValue =
+    typeof fieldNames?.value === 'string' && fieldNames.value && !isPlaceholderFieldName(fieldNames.value, 'value')
+      ? fieldNames.value
+      : undefined;
+  const explicitLabel =
+    typeof fieldNames?.label === 'string' && fieldNames.label && !isPlaceholderFieldName(fieldNames.label, 'label')
+      ? fieldNames.label
+      : undefined;
+  const value = explicitValue || fallbackValue;
+  const label = explicitLabel || titleCollectionFieldName || value;
+
+  return { label, value };
+}
+
+export type AssociationOption = Record<string, any>;
+export type PopupScrollEvent = Parameters<NonNullable<SelectProps<any>['onPopupScroll']>>[0];
+
+export function buildOpenerUids(ctx: FlowRuntimeContext, inputArgs: Record<string, unknown> = {}): string[] {
+  // Keep consistent with `packages/core/client/src/flow/actions/openView.tsx`
+  const isRouteManaged = !!(inputArgs as { navigation?: unknown }).navigation;
+  const toStringArray = (val: unknown): string[] | undefined => {
+    if (!Array.isArray(val)) return undefined;
+    return val.filter((item): item is string => typeof item === 'string' && !!item);
+  };
+  const viewOpenerUids = toStringArray(ctx.view?.inputArgs?.openerUids);
+  const inputOpenerUids = toStringArray(inputArgs.openerUids);
+  const parentOpenerUids = viewOpenerUids || inputOpenerUids || [];
+  if (isRouteManaged) {
+    return (inputOpenerUids || parentOpenerUids).filter(Boolean);
+  }
+  const viewUidFromView = (ctx.view?.inputArgs as { viewUid?: unknown } | undefined)?.viewUid;
+  const viewUidFromModel = (ctx.model.context?.inputArgs as { viewUid?: unknown } | undefined)?.viewUid;
+  const openerUid =
+    typeof viewUidFromView === 'string' && viewUidFromView
+      ? viewUidFromView
+      : typeof viewUidFromModel === 'string' && viewUidFromModel
+        ? viewUidFromModel
+        : ctx.model.uid;
+  return [...parentOpenerUids, openerUid].filter(Boolean);
+}
+
+export interface LazySelectProps extends Omit<SelectProps<any>, 'mode' | 'options' | 'value' | 'onChange'> {
+  fieldNames: AssociationFieldNames;
+  value?: AssociationOption | AssociationOption[] | string | string[] | number | number[];
+  multiple?: boolean;
+  allowMultiple?: boolean;
+  // 在特定场景（如默认值弹窗）下，多选点击选项后保持下拉展开
+  keepDropdownOpenOnSelect?: boolean;
+  options?: AssociationOption[];
+  valueMode?: 'record' | 'value';
+  onChange: (option: AssociationOption | AssociationOption[] | string | string[] | number | number[]) => void;
+  onDropdownVisibleChange?: (open: boolean) => void;
+  onPopupScroll?: SelectProps<any>['onPopupScroll'];
+  onSearch?: SelectProps<any>['onSearch'];
+  loading?: boolean;
+  onCompositionStart?: (e: any) => void;
+  onCompositionEnd?: (e: any, flag?: boolean) => void;
+  quickCreate?: 'none' | 'modalAdd' | 'quickAdd';
+  onModalAddClick?: (e: any) => void;
+  onDropdownAddClick?: (e: any) => void;
+  searchText?: string;
+  allowCreate?: boolean;
+  allowEdit?: boolean;
+}
+
+export interface LabelByFieldProps {
+  option: AssociationOption;
+  fieldNames: AssociationFieldNames;
+}
+
+function toSafeDisplayLabel(value: unknown): string | number | boolean | undefined {
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    const parts = value
+      .map((item) => {
+        if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
+          return item;
+        }
+        if (item && typeof item === 'object') {
+          const nested = (item as Record<string, unknown>).label ?? (item as Record<string, unknown>).name;
+          if (typeof nested === 'string' || typeof nested === 'number' || typeof nested === 'boolean') {
+            return nested;
+          }
+        }
+        return undefined;
+      })
+      .filter((item): item is string | number | boolean => item !== undefined);
+
+    return parts.length ? parts.map(String).join(', ') : undefined;
+  }
+
+  if (value && typeof value === 'object') {
+    const nested = (value as Record<string, unknown>).label ?? (value as Record<string, unknown>).name;
+    if (typeof nested === 'string' || typeof nested === 'number' || typeof nested === 'boolean') {
+      return nested;
+    }
+  }
+
+  return undefined;
+}
+
+export function LabelByField(props: Readonly<LabelByFieldProps>) {
+  const { option, fieldNames } = props;
+  const currentModel = useFlowModel();
+  const record = unwrapAssociationOptionRecord(option);
+  const normalizedFieldNames = normalizeAssociationFieldNames(
+    fieldNames,
+    currentModel.context.collectionField?.targetCollection,
+  );
+  const field: any = currentModel.subModels.field as FlowModel;
+  const labelValue =
+    toSafeDisplayLabel(record?.[normalizedFieldNames.label]) ??
+    toSafeDisplayLabel(record?.label) ??
+    toSafeDisplayLabel(record?.[normalizedFieldNames.value]);
+  if (!field) {
+    return <span>{labelValue ?? 'N/A'}</span>;
+  }
+
+  const optionKey = String(record?.[normalizedFieldNames.value] ?? labelValue ?? 'association-option');
+  const fieldModel = field.createFork({}, optionKey);
+  fieldModel.context.defineProperty('record', {
+    get: () => record,
+    cache: false,
+    meta: createCurrentRecordMetaFactory(fieldModel.context, () => fieldModel.context.collection),
+  });
+
+  const titleCollectionField = currentModel.context.collectionField.targetCollection?.getField?.(
+    normalizedFieldNames.label,
+  );
+  const titleFieldComponentProps =
+    titleCollectionField && typeof titleCollectionField.getComponentProps === 'function'
+      ? titleCollectionField.getComponentProps()
+      : {};
+  fieldModel.setProps({ value: labelValue, clickToOpen: false, ...titleFieldComponentProps });
+
+  const renderedLabel =
+    labelValue !== null && typeof labelValue !== 'undefined' && labelValue !== ''
+      ? (fieldModel.render() as React.ReactNode)
+      : 'N/A';
+
+  return <span style={{ pointerEvents: 'none' }}>{renderedLabel}</span>;
+}
+
+export function toSelectValue(
+  record: AssociationOption | AssociationOption[] | string | string[] | number | number[] | undefined,
+  fieldNames: AssociationFieldNames,
+  multiple = false,
+  valueMode: 'record' | 'value' = 'record',
+  options: AssociationOption[] = [],
+) {
+  if (!record) return multiple ? [] : undefined;
+
+  const { value: valueKey } = fieldNames || {};
+
+  const isAssociationOption = (item: unknown): item is AssociationOption => typeof item === 'object' && item !== null;
+
+  const convert = (item: AssociationOption): any => {
+    if (!isAssociationOption(item)) return undefined;
+    return {
+      label: <LabelByField option={item} fieldNames={fieldNames} />,
+      value: item[valueKey],
+    };
+  };
+
+  if (valueMode === 'value') {
+    const toValue = (item: AssociationOption | string | number): any => {
+      if (typeof item === 'object' && item !== null) {
+        return convert(item);
+      }
+      const matchedOption = options.find((option) => option?.[valueKey] === item);
+      if (matchedOption) {
+        return convert(matchedOption);
+      }
+      // Handle string or number values
+      return {
+        label: String(item),
+        value: item,
+      };
+    };
+    if (multiple) {
+      if (!Array.isArray(record)) return [];
+      return record.map((item) => toValue(item)).filter(Boolean);
+    }
+    if (Array.isArray(record)) {
+      return toValue(record[0]);
+    }
+    return toValue(record as AssociationOption);
+  }
+
+  if (multiple) {
+    if (!Array.isArray(record)) return [];
+    return record.filter(isAssociationOption).map(convert).filter(Boolean);
+  }
+  if (Array.isArray(record)) {
+    const first = record[0];
+    return isAssociationOption(first) ? convert(first) : undefined;
+  }
+  return isAssociationOption(record) ? convert(record) : undefined;
+}
+
+export function resolveOptions(
+  options: AssociationOption[] | undefined,
+  value: AssociationOption | AssociationOption[] | string | string[] | number | number[] | undefined,
+  isMultiple: boolean,
+) {
+  if (options?.length) {
+    return options.map((v) => {
+      return omit(v, 'disabled', 'options', 'style');
+    });
+  }
+
+  if (isMultiple) {
+    if (Array.isArray(value)) {
+      return value.filter((item) => typeof item === 'object' && item !== null) as AssociationOption[];
+    }
+    return [];
+  }
+
+  if (value && typeof value === 'object') {
+    return [value as AssociationOption];
+  }
+
+  return [];
+}

package/src/flow/models/fields/CheckboxFieldModel.tsx

@@ -0,0 +1,31 @@
+/**
+ * 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 { Checkbox } from 'antd';
+import React from 'react';
+import { EditableItemModel } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+export class CheckboxFieldModel extends FieldModel {
+  render() {
+    return (
+      <Checkbox
+        {...this.props}
+        checked={this.props.value}
+        onChange={(val) => {
+          this.props.onChange(val.target.checked);
+        }}
+      />
+    );
+  }
+}
+
+EditableItemModel.bindModelToInterface('CheckboxFieldModel', ['checkbox'], {
+  isDefault: true,
+});

package/src/flow/models/fields/CheckboxGroupFieldModel.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 { Checkbox } from 'antd';
+import React from 'react';
+import { EditableItemModel, tExpr } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+export class CheckboxGroupFieldModel extends FieldModel {
+  render() {
+    return <Checkbox.Group {...this.props} />;
+  }
+}
+CheckboxGroupFieldModel.define({
+  label: tExpr('CheckboxGroup'),
+});
+EditableItemModel.bindModelToInterface('CheckboxGroupFieldModel', ['checkboxGroup'], {
+  isDefault: true,
+});

package/src/flow/models/fields/ClickableFieldModel.tsx

@@ -0,0 +1,286 @@
+/**
+ * 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 { CollectionField, tExpr } from '@nocobase/flow-engine';
+import { Tag } from 'antd';
+import { castArray, get } from 'lodash';
+import React from 'react';
+import { EllipsisWithTooltip } from '../../components';
+import { openViewFlow } from '../../flows/openViewFlow';
+import { FieldModel } from '../base/FieldModel';
+import { EditFormModel } from '../blocks/form/EditFormModel';
+
+export function transformNestedData(inputData) {
+  const resultArray = [];
+
+  function recursiveTransform(data) {
+    if (data?.parent) {
+      const { parent } = data;
+      recursiveTransform(parent);
+    }
+    const { parent, ...other } = data;
+    resultArray.push(other);
+  }
+  if (inputData) {
+    recursiveTransform(inputData);
+  }
+  return resultArray;
+}
+
+const hasAssociationPathName = (parent: unknown): parent is { associationPathName?: string } =>
+  !!parent && typeof parent === 'object' && 'associationPathName' in parent;
+
+export class ClickableFieldModel extends FieldModel {
+  get collectionField(): CollectionField {
+    return this.context.collectionField;
+  }
+
+  /**
+   * 点击打开行为
+   */
+  onClick(event, currentRecord) {
+    const associationPathName = hasAssociationPathName(this.parent) ? this.parent.associationPathName : undefined;
+
+    if (this.collectionField.isAssociationField()) {
+      const targetCollection = this.collectionField.targetCollection;
+      const sourceCollection = this.context.blockModel.collection;
+      const sourceKey = this.collectionField.sourceKey || sourceCollection.filterTargetKey;
+      const targetKey = this.collectionField?.targetKey;
+
+      let filterByTk = currentRecord[targetKey];
+      if (this.collectionField.interface === 'm2m') {
+        // if use currentRecord[targetKey], details block in the popup will throw error
+        // also incorrect for v1
+        filterByTk = currentRecord[targetCollection.filterTargetKey];
+      }
+      const parentObj = associationPathName
+        ? get(this.context.blockModel?.form?.getFieldsValue?.(true) || this.context.record, associationPathName)
+        : this.context.record;
+      this.dispatchEvent(
+        'click',
+        {
+          event,
+          filterByTk,
+          collectionName: this.collectionField.collection.name,
+          associationName: `${sourceCollection.name}.${this.collectionField.name}`, // `${sourceCollection.name}.${this.collectionField.name}`,
+          sourceId: parentObj[sourceKey],
+        },
+        {
+          debounce: true,
+        },
+      );
+      return;
+    }
+
+    if (associationPathName) {
+      // 关联字段的属性
+      const collection = this.context.collection;
+      const associationField = collection?.getFieldByPath?.(associationPathName);
+      if (associationField?.isAssociationField?.()) {
+        const targetCollection = associationField.targetCollection;
+        const sourceCollection = associationField.collection;
+        const sourceKey = associationField.sourceKey || sourceCollection?.filterTargetKey;
+        const targetKey = associationField?.targetKey || targetCollection?.filterTargetKey;
+        const associationRecord = currentRecord ?? get(this.context.record, associationPathName);
+        const associationParentField = associationPathName.includes('.')
+          ? collection.getFieldByPath(associationPathName.split('.')[0])
+          : null;
+        const foreignKey = associationParentField?.foreignKey;
+        const parentObj = associationPathName.includes('.')
+          ? get(this.context.record, associationPathName.split('.')[0])
+          : this.context.record;
+        let filterByTk = associationRecord?.[targetKey];
+        if (associationField.interface === 'm2m') {
+          // also incorrect for v1
+          filterByTk = associationRecord?.[targetCollection.filterTargetKey];
+        }
+
+        this.dispatchEvent(
+          'click',
+          {
+            event,
+            filterByTk,
+            collectionName: this.collectionField.collection.name,
+            associationName: `${associationField.collection.name}.${this.collectionField.name}`,
+            // list api， 如果append了关系字段的某个属性，它并不会将关系字段对应的 filterByTk (sourceKey) 属性值返回， 但是会返回foriegnKey对应的值
+            sourceId: parentObj[sourceKey] || this.context.record[foreignKey],
+          },
+          {
+            debounce: true,
+          },
+        );
+        return;
+      }
+    }
+
+    this.dispatchEvent(
+      'click',
+      {
+        event,
+        sourceId: this.context.resource?.getSourceId(),
+        filterByTk: this.context.collection.getFilterByTK(this.context.item?.value || this.context.record),
+      },
+      {
+        debounce: true,
+      },
+    );
+  }
+
+  renderComponent(value, wrap?) {
+    return value;
+  }
+
+  renderInDisplayStyle(value, record?, isToMany?, wrap?) {
+    const { clickToOpen = false, displayStyle, titleField, overflowMode, disabled, ...restProps } = this.props;
+    if (value && typeof value === 'object' && restProps.target) {
+      return;
+    }
+    const result = this.renderComponent(value, wrap);
+    const display = record ? (value ? result : 'N/A') : result;
+    const isTag = displayStyle === 'tag';
+    const handleClick = (e) => {
+      clickToOpen && this.onClick(e, record);
+    };
+
+    const commonStyle = {
+      // ...(restProps.style || {}),
+      cursor: clickToOpen ? 'pointer' : 'default',
+      alignItems: 'center',
+      gap: 4,
+      display: isToMany && 'inline-block',
+    };
+
+    if (isTag) {
+      return (
+        value && (
+          <Tag {...restProps} style={commonStyle} onClick={handleClick} className={restProps.className}>
+            {display}
+          </Tag>
+        )
+      );
+    }
+    if (clickToOpen) {
+      return (
+        <a {...restProps} style={commonStyle} onClick={handleClick} className={restProps.className}>
+          {display}
+        </a>
+      );
+    }
+    return (
+      <span {...restProps} style={commonStyle} className={restProps.className}>
+        {display}
+      </span>
+    );
+  }
+
+  /**
+   * 基类统一渲染逻辑
+   */
+  render(): any {
+    const { value, displayStyle, fieldNames, overflowMode } = this.props;
+    const titleField = this.props.titleField || fieldNames?.label;
+    const ellipsis = overflowMode === 'ellipsis';
+    if (titleField) {
+      if (displayStyle === 'tag') {
+        const result = castArray(value).map((v, idx) => (
+          <React.Fragment key={idx}>{this.renderInDisplayStyle(v?.[titleField], v)}</React.Fragment>
+        ));
+        return <EllipsisWithTooltip ellipsis={ellipsis}>{result}</EllipsisWithTooltip>;
+      } else {
+        const result = castArray(value).flatMap((v, idx) => {
+          if (this.collectionField.targetCollection?.template === 'tree') {
+            const label = transformNestedData(v).length
+              ? transformNestedData(v)
+                  .map((o) => o?.[titleField])
+                  .join(' / ')
+              : null;
+            const node = this.renderInDisplayStyle(label, v, Array.isArray(value));
+            return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
+          } else {
+            const node = this.renderInDisplayStyle(v?.[titleField], v, Array.isArray(value));
+            return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
+          }
+        });
+        return (
+          <EllipsisWithTooltip ellipsis={ellipsis}>
+            <span style={{ flexWrap: 'nowrap' }}>{result}</span>
+          </EllipsisWithTooltip>
+        );
+      }
+    } else {
+      const textContent = (
+        <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={this.renderInDisplayStyle(value, null, null, true)}>
+          {this.renderInDisplayStyle(value)}
+        </EllipsisWithTooltip>
+      );
+      return textContent;
+    }
+  }
+}
+
+ClickableFieldModel.registerFlow({
+  key: 'displayFieldSettings',
+  title: tExpr('Display Field settings'),
+  sort: 200,
+  steps: {
+    displayStyle: {
+      title: tExpr('Display mode'),
+      uiMode: (ctx) => {
+        const t = ctx.t;
+        return {
+          type: 'select',
+          key: 'displayStyle',
+          props: {
+            options: [
+              { label: t('Tag'), value: 'tag' },
+              { label: t('Text'), value: 'text' },
+            ],
+          },
+        };
+      },
+      hideInSettings: async (ctx) => {
+        if (['select', 'multipleSelect', 'radioGroup', 'checkboxGroup'].includes(ctx.collectionField?.interface)) {
+          return true;
+        }
+        return false;
+      },
+      defaultParams: {
+        displayStyle: 'text',
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({ displayStyle: params.displayStyle });
+      },
+    },
+
+    overflowMode: {
+      use: 'overflowMode',
+    },
+    clickToOpen: {
+      title: tExpr('Enable click-to-open'),
+      uiMode: { type: 'switch', key: 'clickToOpen' },
+      defaultParams: (ctx) => {
+        if (ctx.disableFieldClickToOpen) {
+          return {
+            clickToOpen: false,
+          };
+        }
+        return {
+          clickToOpen: ctx.collectionField.isAssociationField(),
+        };
+      },
+      hideInSettings(ctx) {
+        return ctx.disableFieldClickToOpen;
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({ clickToOpen: params.clickToOpen, ...ctx.collectionField.getComponentProps() });
+      },
+    },
+  },
+});
+ClickableFieldModel.registerFlow(openViewFlow);