@nocobase/client-v2 2.1.0-alpha.3 → 2.1.0-alpha.30

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -0,0 +1,259 @@
+/**
+ * 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 { CloseOutlined, ZoomInOutlined } from '@ant-design/icons';
+import { Table, Form, Space, Button } from 'antd';
+import { css } from '@emotion/css';
+import { useTranslation } from 'react-i18next';
+import { PlusOutlined } from '@ant-design/icons';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ActionWithoutPermission } from '../../../base/ActionModel';
+import { getSubTableRowIdentity, normalizeSubTableRows } from './rowIdentity';
+
+export function SubTableField(props) {
+  const { t } = useTranslation();
+  const {
+    onChange,
+    columns,
+    disabled,
+    allowAddNew,
+    components,
+    allowSelectExistingRecord,
+    onSelectExitRecordClick,
+    allowDisassociation,
+    pageSize,
+    allowCreate, //acl
+    isConfigMode,
+    parentFieldIndex,
+    parentItem,
+    resetPage,
+    filterTargetKey = 'id',
+    getCurrentValue,
+  } = props;
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const rawCurrentValue = getCurrentValue();
+  const currentValue = useMemo(() => normalizeSubTableRows(rawCurrentValue), [rawCurrentValue]);
+  const getRecordIdentity = React.useCallback(
+    (record: any) => getSubTableRowIdentity(record, filterTargetKey),
+    [filterTargetKey],
+  );
+  useEffect(() => {
+    setCurrentPageSize(pageSize);
+  }, [pageSize]);
+  useEffect(() => {
+    resetPage && setCurrentPage(1);
+  }, [resetPage]);
+  const applyValue = React.useCallback((nextValue: any) => onChange?.(normalizeSubTableRows(nextValue)), [onChange]);
+  const getLatestValue = React.useCallback(() => normalizeSubTableRows(getCurrentValue()), [getCurrentValue]);
+  useEffect(() => {
+    if (currentValue !== rawCurrentValue) {
+      applyValue(currentValue);
+    }
+  }, [applyValue, currentValue, rawCurrentValue]);
+
+  // 前端分页
+  const pagination = useMemo(() => {
+    return {
+      style: {
+        position: 'absolute',
+        right: '0px',
+        bottom: '0px',
+      },
+      current: currentPage,
+      pageSize: currentPageSize,
+      total: currentValue.length,
+      onChange: (page, size) => {
+        setCurrentPage(page);
+        setCurrentPageSize(size);
+      },
+      showSizeChanger: true,
+      showTotal: (total) => {
+        return t('Total {{count}} items', { count: total });
+      },
+    } as any;
+  }, [currentPage, currentPageSize, currentValue.length]);
+
+  // 新增一行
+  const handleAdd = () => {
+    if (allowCreate === false) return;
+
+    const newRow = {
+      __is_new__: true,
+    };
+    columns.forEach((col) => {
+      newRow[col.dataIndex] = undefined;
+    });
+    const newValue = [...getLatestValue(), newRow];
+    setCurrentPage(Math.ceil(newValue.length / currentPageSize));
+    applyValue(newValue);
+  };
+
+  // 删除行
+  const handleDelete = (index: number) => {
+    const newValue = [...getLatestValue()];
+    newValue.splice(index, 1);
+    const lastPage = Math.ceil(newValue.length / currentPageSize);
+    setCurrentPage(currentPage > lastPage ? lastPage : currentPage);
+    applyValue(newValue);
+  };
+
+  // 编辑单元格
+  const handleCellChange = (rowIdx, dataIndex, cellValue) => {
+    const newData = getLatestValue().map((row, idx) => (idx === rowIdx ? { ...row, [dataIndex]: cellValue } : row));
+    applyValue(newData);
+  };
+
+  // 渲染可编辑单元格
+  const editableColumns = columns
+    .map((col) => ({
+      ...col,
+      render: (text, record, rowIdx) => {
+        const pageRowIdx = (currentPage - 1) * currentPageSize + rowIdx;
+        const rowIdentity = getRecordIdentity(record) ?? `row:${pageRowIdx}`;
+        // row identity keeps logical rows stable, while binding key still follows
+        // the current array index so Form.Item can rebind after reordering/removal.
+        const rowBindingKey = `${rowIdentity}:${pageRowIdx}`;
+        const columnKey = col.dataIndex ?? col.key ?? 'cell';
+        if (!col.render) {
+          return;
+        }
+        return col.render({
+          record,
+          rowIdx: pageRowIdx,
+          id: `field-${String(columnKey)}-${rowBindingKey}`,
+          value: text,
+          parentFieldIndex,
+          parentItem,
+          onChange: (value) => {
+            handleCellChange(pageRowIdx, col.dataIndex, value?.target?.value ?? value);
+          },
+          ['aria-describedby']: `field-${String(columnKey)}-${rowBindingKey}`,
+        });
+      },
+    }))
+    .concat([
+      !disabled && {
+        title: '',
+        key: 'delete',
+        width: 50,
+        align: 'center',
+        fixed: 'right',
+        render: (v, record, index) => {
+          const pageRowIdx = (currentPage - 1) * currentPageSize + index;
+          if (!allowDisassociation && !(record.__is_new__ || record.__is_stored__)) {
+            return;
+          }
+          return (
+            <div
+              onMouseDown={(event) => {
+                const activeElement = document.activeElement as HTMLElement | null;
+                if (!activeElement || event.currentTarget.contains(activeElement)) {
+                  return;
+                }
+                activeElement.blur?.();
+              }}
+              onClick={() => {
+                setTimeout(() => {
+                  handleDelete(pageRowIdx);
+                });
+              }}
+            >
+              <CloseOutlined style={{ cursor: 'pointer', color: 'gray' }} />
+            </div>
+          );
+        },
+      },
+    ])
+    .filter(Boolean);
+
+  const pagedDataSource = useMemo(() => {
+    if (!currentValue.length) return [];
+
+    const start = (currentPage - 1) * currentPageSize;
+    return currentValue.slice(start, start + currentPageSize);
+  }, [currentValue, currentPage, currentPageSize]);
+  return (
+    <Form.Item>
+      <Table
+        dataSource={pagedDataSource}
+        columns={editableColumns}
+        rowKey={(record) => getRecordIdentity(record) ?? ''}
+        tableLayout="fixed"
+        scroll={{ x: 'max-content' }}
+        pagination={pagination}
+        locale={{
+          emptyText: (
+            <span>
+              {disabled
+                ? t('No data')
+                : allowAddNew && allowSelectExistingRecord
+                  ? t('Please add or select record')
+                  : allowAddNew
+                    ? t('Please add record')
+                    : allowSelectExistingRecord
+                      ? t('Please select record')
+                      : t('No data')}
+            </span>
+          ),
+        }}
+        components={components ?? {}}
+        className={css`
+          .ant-table-cell-ellipsis.ant-table-cell-fix-right-first .ant-table-cell-content {
+            display: inline;
+          }
+          .ant-table-footer {
+            padding: 0;
+            button {
+              margin-top: 4px !important;
+              margin-bottom: 4px;
+            }
+          }
+        `}
+        footer={() => (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              minHeight: '20px',
+            }}
+          >
+            <Space>
+              {allowAddNew &&
+                (allowCreate || isConfigMode) &&
+                (allowCreate ? (
+                  <Button type="link" onClick={handleAdd} disabled={disabled}>
+                    <PlusOutlined />
+                    {t('Add new')}
+                  </Button>
+                ) : (
+                  <ActionWithoutPermission message={t('No permission to add new')} forbidden={{ actionName: 'create' }}>
+                    <Button type="link" disabled>
+                      <PlusOutlined />
+                      {t('Add new')}
+                    </Button>
+                  </ActionWithoutPermission>
+                ))}
+              {allowSelectExistingRecord && (
+                <Button
+                  type="link"
+                  onClick={() => onSelectExitRecordClick(setCurrentPage, currentPageSize)}
+                  disabled={disabled}
+                >
+                  <ZoomInOutlined /> {t('Select record')}
+                </Button>
+              )}
+            </Space>
+          </div>
+        )}
+      />
+    </Form.Item>
+  );
+}

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/index.tsx

@@ -0,0 +1,395 @@
+/**
+ * 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 { SettingOutlined } from '@ant-design/icons';
+import { DragEndEvent } from '@dnd-kit/core';
+import {
+  AddSubModelButton,
+  DndProvider,
+  FlowSettingsButton,
+  tExpr,
+  observable,
+  useFlowEngine,
+} from '@nocobase/flow-engine';
+import React from 'react';
+import { uid } from '@formily/shared';
+import { FormItemModel } from '../../../blocks/form';
+import { AssociationFieldModel } from '../AssociationFieldModel';
+import { buildRecordPickerPopupContextInputArgs, RecordPickerContent } from '../RecordPickerFieldModel';
+import { SubTableColumnModel } from './SubTableColumnModel';
+import { SubTableField } from './SubTableField';
+import { adjustColumnOrder } from '../../../blocks/table/utils';
+
+const AddFieldColumn = ({ model }) => {
+  return (
+    <AddSubModelButton
+      model={model}
+      subModelKey={'columns'}
+      subModelBaseClasses={['SubTableColumnModel']}
+      keepDropdownOpen
+    >
+      <FlowSettingsButton icon={<SettingOutlined />}>{model.translate('Fields')}</FlowSettingsButton>
+    </AddSubModelButton>
+  );
+};
+
+const HeaderWrapperComponent = React.memo((props) => {
+  const engine = useFlowEngine();
+
+  const onDragEnd = ({ active, over }: DragEndEvent) => {
+    if (active.id && over?.id && active.id !== over.id) {
+      engine.moveModel(active.id as string, over.id as string);
+    }
+  };
+
+  return (
+    <DndProvider onDragEnd={onDragEnd}>
+      <thead {...props} />
+    </DndProvider>
+  );
+});
+
+export class SubTableFieldModel extends AssociationFieldModel {
+  selectedRows = observable.ref([]);
+  updateAssociation = true;
+  setCurrentPage;
+  currentPageSize;
+
+  getCurrentValue = () => {
+    const fallback = Array.isArray(this.props.value) ? this.props.value : [];
+    const fieldPathArray = this.parent?.context?.fieldPathArray;
+    if (!Array.isArray(fieldPathArray) || !fieldPathArray.length) return fallback;
+    const latest = this.context.blockModel?.context?.form?.getFieldValue?.(fieldPathArray as any);
+    return Array.isArray(latest) ? latest : fallback;
+  };
+
+  get collection() {
+    return this.context.collection;
+  }
+
+  getColumns() {
+    const { enableIndexColumn } = this.props;
+
+    const baseColumns = this.mapSubModels('columns', (column: SubTableColumnModel) => column.getColumnProps()).filter(
+      Boolean,
+    );
+
+    return adjustColumnOrder(
+      [
+        enableIndexColumn && {
+          key: '__index__',
+          width: 48,
+          align: 'center',
+          fixed: 'left',
+          render: (props) => {
+            return props.rowIdx + 1;
+          },
+        },
+        ...baseColumns.concat({
+          key: '_empty',
+        }),
+        this.context.flowSettingsEnabled && {
+          key: 'addColumn',
+          fixed: 'right',
+          width: 100,
+          title: <AddFieldColumn model={this} />,
+        },
+      ].filter(Boolean),
+    ) as any;
+  }
+
+  render() {
+    const columns = this.getColumns();
+    const components = {
+      header: {
+        wrapper: HeaderWrapperComponent,
+      },
+    };
+    const isConfigMode = !!this.context.flowSettingsEnabled;
+    return (
+      <SubTableField
+        {...this.props}
+        columns={columns}
+        components={components}
+        isConfigMode={isConfigMode}
+        parentFieldIndex={this.context.fieldIndex}
+        parentItem={this.context.item}
+        filterTargetKey={this.collection.filterTargetKey}
+        getCurrentValue={this.getCurrentValue}
+      />
+    );
+  }
+  onInit(options: any): void {
+    super.onInit(options);
+    this.context.defineProperty('resourceName', {
+      get: () => this.context.collectionField.target,
+      cache: false,
+    });
+    this.context.defineProperty('collection', {
+      get: () => this.context.collectionField.targetCollection,
+    });
+    // 监听表单reset
+    this.context.blockModel.emitter.on('onFieldReset', () => {
+      this.props.onChange([]);
+    });
+    this.onSelectExitRecordClick = (setCurrentPage, currentPageSize) => {
+      this.setCurrentPage = setCurrentPage;
+      this.currentPageSize = currentPageSize;
+      this.dispatchEvent('openView', {
+        setCurrentPage,
+        currentPageSize,
+      });
+    };
+  }
+
+  set onSelectExitRecordClick(fn) {
+    this.setProps({ onSelectExitRecordClick: fn });
+  }
+  change() {
+    const lastPage = Math.ceil(this.selectedRows.value.length / this.currentPageSize);
+    this.setCurrentPage(lastPage);
+    this.props.onChange(this.selectedRows.value);
+  }
+}
+
+SubTableFieldModel.registerFlow({
+  key: 'subTableColumnSettings',
+  title: tExpr('Sub-table settings'),
+  sort: 300,
+  steps: {
+    init: {
+      async handler(ctx, params) {
+        await ctx.model.applySubModelsBeforeRenderFlows('columns');
+      },
+    },
+    enableIndexColumn: {
+      title: tExpr('Show row numbers'),
+      uiMode: { type: 'switch', key: 'enableIndexColumn' },
+      defaultParams: {
+        enableIndexColumn: true,
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({
+          enableIndexColumn: params.enableIndexColumn,
+        });
+      },
+    },
+    pageSize: {
+      title: tExpr('Page size'),
+      uiMode: {
+        type: 'select',
+        key: 'pageSize',
+        props: {
+          options: [
+            { label: '5', value: 5 },
+            { label: '10', value: 10 },
+            { label: '20', value: 20 },
+            { label: '50', value: 50 },
+            { label: '100', value: 100 },
+            { label: '200', value: 200 },
+          ],
+        },
+      },
+      defaultParams: {
+        pageSize: 10,
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({
+          pageSize: params.pageSize,
+        });
+      },
+    },
+    allowAddNew: {
+      title: tExpr('Enable add new action'),
+      uiMode: { type: 'switch', key: 'allowAddNew' },
+      defaultParams: {
+        allowAddNew: true,
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({
+          allowAddNew: params.allowAddNew,
+        });
+      },
+    },
+
+    allowDisassociation: {
+      title: tExpr('Enable remove action'),
+      uiMode: { type: 'switch', key: 'allowDisassociation' },
+      defaultParams: {
+        allowDisassociation: true,
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({
+          allowDisassociation: params.allowDisassociation,
+        });
+      },
+    },
+    allowSelectExistingRecord: {
+      title: tExpr('Enable select action'),
+      uiMode: { type: 'switch', key: 'allowSelectExistingRecord' },
+      defaultParams: {
+        allowSelectExistingRecord: true,
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({
+          allowSelectExistingRecord: params.allowSelectExistingRecord,
+        });
+      },
+    },
+  },
+});
+
+SubTableFieldModel.registerFlow({
+  key: 'selectExitRecordSettings',
+  title: tExpr('Selector setting'),
+  sort: 400,
+  on: {
+    eventName: 'openView',
+  },
+  steps: {
+    openView: {
+      title: tExpr('Edit popup (Select record)'),
+      hideInSettings(ctx) {
+        const allowSelectExistingRecord = ctx.model.getStepParams?.(
+          'subTableColumnSettings',
+          'allowSelectExistingRecord',
+        )?.allowSelectExistingRecord;
+        return !allowSelectExistingRecord;
+      },
+      uiSchema(ctx) {
+        return {
+          mode: {
+            type: 'string',
+            title: tExpr('Open mode'),
+            enum: [
+              { label: tExpr('Drawer'), value: 'drawer' },
+              { label: tExpr('Dialog'), value: 'dialog' },
+            ],
+            'x-decorator': 'FormItem',
+            'x-component': 'Radio.Group',
+          },
+          size: {
+            type: 'string',
+            title: tExpr('Popup size'),
+            enum: [
+              { label: tExpr('Small'), value: 'small' },
+              { label: tExpr('Medium'), value: 'medium' },
+              { label: tExpr('Large'), value: 'large' },
+            ],
+            'x-decorator': 'FormItem',
+            'x-component': 'Radio.Group',
+          },
+        };
+      },
+      defaultParams: {
+        mode: 'drawer',
+        size: 'medium',
+      },
+      handler(ctx, params) {
+        const sizeToWidthMap: Record<string, any> = {
+          drawer: {
+            small: '30%',
+            medium: '50%',
+            large: '70%',
+          },
+          dialog: {
+            small: '40%',
+            medium: '50%',
+            large: '80%',
+          },
+          embed: {},
+        };
+        const openMode = ctx.isMobileLayout ? 'embed' : ctx.inputArgs.mode || params.mode || 'drawer';
+        const size = ctx.inputArgs.size || params.size || 'medium';
+        const currentValue = ctx.model.getCurrentValue();
+        ctx.model.selectedRows.value = currentValue;
+        const currentItemValue = ctx.inputArgs.currentItemValue ?? currentValue;
+        ctx.viewer.open({
+          type: openMode,
+          width: sizeToWidthMap[openMode][size],
+          inheritContext: false,
+          target: ctx.layoutContentElement,
+          inputArgs: {
+            parentId: ctx.model.uid,
+            scene: 'select',
+            dataSourceKey: ctx.collection.dataSourceKey,
+            collectionName: ctx.collectionField?.target,
+            collectionField: ctx.collectionField,
+            ...buildRecordPickerPopupContextInputArgs(ctx, {
+              currentItemValue,
+            }),
+            rowSelectionProps: {
+              type: 'checkbox',
+              defaultSelectedRows: () => ctx.model.getCurrentValue(),
+              renderCell: undefined,
+              selectedRowKeys: undefined,
+              onChange: (_, selectedRows) => {
+                const prev = ctx.model.getCurrentValue();
+                const merged = [
+                  ...prev,
+                  ...selectedRows.map((row) => ({
+                    ...row,
+                    __is_stored__: true,
+                  })),
+                ];
+
+                const unique = merged.filter(
+                  (row, index, self) =>
+                    index ===
+                    self.findIndex((r) => r[ctx.collection.filterTargetKey] === row[ctx.collection.filterTargetKey]),
+                );
+                ctx.model.selectedRows.value = unique;
+              },
+            },
+          },
+          content: () => <RecordPickerContent model={ctx.model} />,
+          styles: {
+            content: {
+              padding: 0,
+              backgroundColor: ctx.model.flowEngine.context.themeToken.colorBgLayout,
+              ...(openMode === 'embed' ? { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } : {}),
+            },
+            body: {
+              padding: 0,
+            },
+          },
+        });
+      },
+    },
+  },
+});
+
+// 分页切换后重置page
+SubTableFieldModel.registerFlow({
+  key: 'paginationChange',
+  on: 'paginationChange',
+  steps: {
+    pageRefresh: {
+      handler(ctx, params) {
+        ctx.model.setProps({
+          resetPage: uid(),
+        });
+      },
+    },
+  },
+});
+
+SubTableFieldModel.define({
+  label: tExpr('Subtable (Inline editing)'),
+});
+export { SubTableColumnModel };
+
+FormItemModel.bindModelToInterface('SubTableFieldModel', ['m2m', 'o2m', 'mbm'], {
+  order: 200,
+  when: (ctx, field) => {
+    if (field.targetCollection) {
+      return field.targetCollection.template !== 'file';
+    }
+    return true;
+  },
+});