@nocobase/client-v2 2.2.0-alpha.6 → 2.2.0-alpha.7

package/src/flow/components/__tests__/FieldAssignValueInput.context.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@nocobase/test/client';
+import { FieldAssignValueInput } from '../FieldAssignValueInput';
+
+const { mockUseFlowContext, mockGetDefaultBindingByField } = vi.hoisted(() => ({
+  mockUseFlowContext: vi.fn(),
+  mockGetDefaultBindingByField: vi.fn(),
+}));
+
+vi.mock('@nocobase/flow-engine', async () => {
+  const actual = await vi.importActual<typeof import('@nocobase/flow-engine')>('@nocobase/flow-engine');
+  class MockEditableItemModel extends actual.EditableItemModel {}
+  MockEditableItemModel.getDefaultBindingByField = mockGetDefaultBindingByField;
+
+  return {
+    ...actual,
+    useFlowContext: () => mockUseFlowContext(),
+    VariableInput: () => <div data-testid="variable-input" />,
+    FlowModelRenderer: () => <div data-testid="flow-model-renderer" />,
+    EditableItemModel: MockEditableItemModel,
+  };
+});
+
+describe('FieldAssignValueInput context', () => {
+  it('delegates temporary field model context to the source form context', async () => {
+    type MockContext = {
+      dataSourceManager: { getDataSource: ReturnType<typeof vi.fn> };
+      t: (key: string) => string;
+      engine?: { createModel: ReturnType<typeof vi.fn> };
+      collection?: MockCollection;
+      blockModel?: MockFormModel;
+    };
+    type MockFieldModel = {
+      props: Record<string, unknown>;
+      setProps: ReturnType<typeof vi.fn>;
+      dispatchEvent: ReturnType<typeof vi.fn>;
+      remove: ReturnType<typeof vi.fn>;
+    };
+    type MockCollectionField = {
+      name: string;
+      interface: string;
+      uiSchema: { enum: Array<{ label: string; value: string }> };
+      isAssociationField: () => boolean;
+      getComponentProps: () => Record<string, unknown>;
+    };
+    type MockCollection = {
+      dataSourceKey: string;
+      name: string;
+      getField: (name: string) => MockCollectionField | null;
+      getFields: () => MockCollectionField[];
+    };
+    type MockFormModel = {
+      context: MockContext;
+      collection: MockCollection;
+      subModels: Record<string, unknown>;
+    };
+
+    const sourceContext: MockContext = {
+      dataSourceManager: {
+        getDataSource: vi.fn(() => ({})),
+      },
+      t: (key: string) => key,
+    };
+    const fieldModel: MockFieldModel = {
+      props: {},
+      setProps: vi.fn((props: Record<string, unknown>) => {
+        fieldModel.props = { ...fieldModel.props, ...props };
+      }),
+      dispatchEvent: vi.fn(),
+      remove: vi.fn(),
+    };
+    const tempRoot = {
+      context: {
+        defineProperty: vi.fn(),
+      },
+      subModels: {
+        fields: [fieldModel],
+      },
+      setProps: vi.fn(),
+      remove: vi.fn(),
+    };
+    const engine = {
+      createModel: vi.fn(() => tempRoot),
+    };
+    sourceContext.engine = engine;
+
+    const collectionField: MockCollectionField = {
+      name: 'status',
+      interface: 'select',
+      uiSchema: {
+        enum: [{ label: 'Open', value: 'open' }],
+      },
+      isAssociationField: () => false,
+      getComponentProps: () => ({}),
+    };
+    const collection: MockCollection = {
+      dataSourceKey: 'main',
+      name: 'tasks',
+      getField: (name: string) => (name === 'status' ? collectionField : null),
+      getFields: () => [collectionField],
+    };
+    const formModel: MockFormModel = {
+      context: sourceContext,
+      collection,
+      subModels: {},
+    };
+    sourceContext.collection = collection;
+    sourceContext.blockModel = formModel;
+
+    mockGetDefaultBindingByField.mockReturnValue({ modelName: 'SelectFieldModel' });
+    mockUseFlowContext.mockReturnValue({
+      model: formModel,
+      t: (key: string) => key,
+      getPropertyMetaTree: vi.fn(async () => []),
+    });
+
+    render(<FieldAssignValueInput targetPath="status" value="" onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(engine.createModel).toHaveBeenCalled();
+    });
+    expect(engine.createModel).toHaveBeenCalledWith(expect.any(Object), { delegate: sourceContext });
+  });
+});

package/src/flow/models/blocks/filter-form/FilterFormBlockModel.tsx

@@ -431,6 +431,7 @@ export class FilterFormBlockModel extends FilterBlockModel<{
 
   private canApplyFormDefaultValue(name: string, current: any, force?: boolean) {
     if (force) return true;
+    if (this.userEditedFieldNames.has(name)) return false;
     if (isEmptyValue(current)) return true;
     if (!this.lastDefaultValueByFieldName.has(name)) return false;
     return isEqual(current, this.lastDefaultValueByFieldName.get(name));

package/src/flow/models/blocks/filter-form/FilterFormItemModel.tsx

@@ -62,9 +62,25 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === 'object' && !Array.isArray(value);
 }
 
+interface CollectionFieldWithAssociationMarker {
+  isAssociationField?: () => boolean;
+  target?: unknown;
+}
+
+function hasAssociationMarker(value: unknown): value is CollectionFieldWithAssociationMarker {
+  return isRecord(value) && (typeof value.isAssociationField === 'function' || 'target' in value);
+}
+
+const isAssociationCollectionField = (collectionField: unknown) => {
+  if (!hasAssociationMarker(collectionField)) {
+    return false;
+  }
+  return collectionField.isAssociationField ? collectionField.isAssociationField() : Boolean(collectionField.target);
+};
+
 const normalizeAssociationDefaultFilterValue = (value: any, fieldModel: any) => {
   const collectionField = fieldModel?.context?.collectionField;
-  if (!collectionField?.isAssociationField?.()) {
+  if (!isAssociationCollectionField(collectionField)) {
     return value;
   }
 
@@ -171,8 +187,7 @@ const buildFilterFormFieldItem = ({
   if (!binding) {
     return;
   }
-  const isAssociation =
-    typeof field?.isAssociationField === 'function' ? field.isAssociationField() : Boolean(field?.target);
+  const isAssociation = isAssociationCollectionField(field);
   const fieldModel =
     isAssociation && ctxWithFlags.engine?.getModelClass?.('FilterFormRecordSelectFieldModel')
       ? 'FilterFormRecordSelectFieldModel'
@@ -507,10 +522,7 @@ export class FilterFormItemModel extends FilterableItemModel<{
     const formValue = this.context.form?.getFieldValue(this.props.name);
     const modelValue = fieldModel.getFilterValue ? fieldModel.getFilterValue() : formValue;
     const collectionField = (fieldModel as any)?.context?.collectionField;
-    const isAssociationField =
-      typeof collectionField?.isAssociationField === 'function'
-        ? collectionField.isAssociationField()
-        : !!collectionField?.target;
+    const isAssociationField = isAssociationCollectionField(collectionField);
     const shouldUseFormValue =
       isAssociationField &&
       !this.mounted &&
@@ -547,11 +559,7 @@ export class FilterFormItemModel extends FilterableItemModel<{
       return value;
     }
     const collectionField = (fieldModel as any)?.context?.collectionField;
-    const isAssociation =
-      typeof collectionField?.isAssociationField === 'function'
-        ? collectionField.isAssociationField()
-        : !!collectionField?.target;
-    if (!isAssociation) {
+    if (!isAssociationCollectionField(collectionField)) {
       return value;
     }
     const normalizedFieldNames = normalizeAssociationFieldNames(
@@ -798,6 +806,13 @@ FilterFormItemModel.registerFlow({
     },
     defaultOperator: {
       use: 'defaultOperator',
+      hideInSettings(ctx) {
+        const collectionField =
+          ctx.collectionField ||
+          ctx.model?.context?.collectionField ||
+          ctx.model?.subModels?.field?.context?.collectionField;
+        return isAssociationCollectionField(collectionField);
+      },
     },
     operatorComponentProps: {
       use: 'operatorComponentProps',

package/src/flow/models/blocks/filter-form/__tests__/FilterFormItemModel.defineChildren.test.ts

@@ -33,6 +33,42 @@ class DummyCollectionBlockModel extends CollectionBlockModel {
 }
 
 describe('FilterFormItemModel defineChildren association fields', () => {
+  it('hides default operator setting for association filter fields', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      FilterFormItemModel,
+    });
+
+    const filterItem = engine.createModel<FilterFormItemModel>({
+      uid: 'association-filter-item-settings',
+      use: 'FilterFormItemModel',
+    });
+
+    const defaultOperatorStep = filterItem.getFlow('filterFormItemSettings')?.steps?.defaultOperator as {
+      hideInSettings?: (ctx: {
+        collectionField?: unknown;
+        model?: {
+          subModels?: {
+            field?: {
+              context?: {
+                collectionField?: unknown;
+              };
+            };
+          };
+        };
+      }) => boolean;
+    };
+    expect(defaultOperatorStep?.hideInSettings?.({ collectionField: { isAssociationField: () => true } })).toBe(true);
+    expect(
+      defaultOperatorStep?.hideInSettings?.({
+        model: { subModels: { field: { context: { collectionField: { target: 'departments' } } } } },
+      }),
+    ).toBe(true);
+    expect(defaultOperatorStep?.hideInSettings?.({ collectionField: { interface: 'input', type: 'string' } })).toBe(
+      false,
+    );
+  });
+
   it('groups association target fields and supports recursive paths', async () => {
     const engine = new FlowEngine();
     engine.registerModels({

package/src/flow/models/blocks/filter-form/__tests__/defaultValues.wiring.test.ts

@@ -301,6 +301,40 @@ describe('filter-form defaultValues wiring', () => {
     expect(values.username_user).toBe('Manual');
   });
 
+  it('does not reapply a filter form default value after user clears the field', async () => {
+    const { model, values } = createFilterFormDefaultValuesModel([
+      {
+        key: 'username-default',
+        enable: true,
+        targetPath: 'username',
+        mode: 'default',
+        value: 'admin',
+      },
+    ]);
+
+    await FilterFormBlockModel.prototype.applyFormDefaultValues.call(model as any);
+    expect(values.username_user).toBe('admin');
+
+    values.username_user = undefined;
+    (model as any).handleFilterFormValuesChange({ username_user: undefined }, { username_user: undefined });
+
+    await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledWith(
+        'formValuesChange',
+        {
+          changedValues: {
+            username_user: undefined,
+          },
+          allValues: {
+            username_user: undefined,
+          },
+        },
+        { debounce: true },
+      );
+    });
+    expect(values.username_user).toBeUndefined();
+  });
+
   it('applies fixed values even when the target filter field already has a value', async () => {
     const { model, values } = createFilterFormDefaultValuesModel(
       [

package/src/flow/models/blocks/form/QuickEditFormModel.tsx

@@ -22,7 +22,6 @@ import {
   createRecordResolveOnServerWithLocal,
 } from '@nocobase/flow-engine';
 import { Button, Form, Skeleton, Space } from 'antd';
-import _ from 'lodash';
 import React from 'react';
 import { FieldModel } from '../../base/FieldModel';
 import { FormComponent } from './FormBlockModel';
@@ -31,6 +30,37 @@ import { FormItemModel } from './FormItemModel';
 export const QUICK_EDIT_POPOVER_MAX_HEIGHT = 'calc(100vh - 96px)';
 export const QUICK_EDIT_FORM_MAX_HEIGHT = 'calc(100vh - 160px)';
 export const QUICK_EDIT_MARKDOWN_HEIGHT = 'min(480px, calc(100vh - 320px))';
+const QUICK_EDIT_MOBILE_DRAWER_HEIGHT = '50vh';
+const QUICK_EDIT_MOBILE_FORM_MAX_HEIGHT = 'calc(50vh - var(--nb-mobile-page-header-height, 40px) - 132px)';
+const QUICK_EDIT_MOBILE_CONTENT_PADDING = '8px var(--nb-mobile-page-tabs-content-padding, 12px) 0';
+const QUICK_EDIT_MOBILE_ACTIONS_PADDING =
+  '8px var(--nb-mobile-page-tabs-content-padding, 12px) calc(80px + env(safe-area-inset-bottom, 0px))';
+const QUICK_EDIT_MOBILE_MEDIA_QUERY = '(max-width: 768px)';
+
+type QuickEditViewBeforeClosePayload = {
+  result?: unknown;
+  force?: boolean;
+  [key: string]: unknown;
+};
+
+type QuickEditViewBeforeCloseHandler = (
+  payload: QuickEditViewBeforeClosePayload,
+) => Promise<boolean | void> | boolean | void;
+
+type QuickEditViewUpdateConfig = {
+  preventClose?: boolean;
+  [key: string]: unknown;
+};
+
+type QuickEditViewContainer = {
+  close: (result?: unknown, force?: boolean) => Promise<boolean | void> | boolean | void;
+  update?: (newConfig: QuickEditViewUpdateConfig) => unknown;
+  beforeClose?: QuickEditViewBeforeCloseHandler;
+};
+
+type QuickEditViewContext = {
+  defineProperty?: (key: string, options: { value: unknown }) => void;
+};
 
 export function getQuickEditFieldProps(collectionField: CollectionField, fieldProps?: Record<string, any>) {
   const nextProps = { ...collectionField.getComponentProps(), ...(fieldProps || {}) };
@@ -40,15 +70,92 @@ export function getQuickEditFieldProps(collectionField: CollectionField, fieldPr
   return nextProps;
 }
 
+function getQuickEditMobileLayoutState(flowEngine: FlowEngine, sourceFieldModel?: FlowModel) {
+  const sourceMobileLayout = sourceFieldModel?.context?.isMobileLayout;
+  if (typeof sourceMobileLayout === 'boolean') {
+    return { isMobileLayout: sourceMobileLayout, inheritsMobileContext: sourceMobileLayout };
+  }
+
+  const engineMobileLayout = flowEngine.context?.isMobileLayout;
+  if (typeof engineMobileLayout === 'boolean') {
+    return { isMobileLayout: engineMobileLayout, inheritsMobileContext: engineMobileLayout };
+  }
+
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return { isMobileLayout: false, inheritsMobileContext: false };
+  }
+
+  return {
+    isMobileLayout: window.matchMedia(QUICK_EDIT_MOBILE_MEDIA_QUERY).matches,
+    inheritsMobileContext: false,
+  };
+}
+
+function getQuickEditTitle(
+  flowEngine: FlowEngine,
+  dataSourceKey: string,
+  collectionName: string,
+  fieldPath: string,
+  sourceFieldModel?: FlowModel,
+  fieldProps?: Record<string, unknown>,
+): React.ReactNode {
+  const sourceColumnTitle = sourceFieldModel?.parent?.props?.title;
+  if (sourceColumnTitle) {
+    return sourceColumnTitle;
+  }
+
+  const fieldPropsTitle = fieldProps?.title;
+  if (fieldPropsTitle) {
+    return fieldPropsTitle as React.ReactNode;
+  }
+
+  const collectionField = flowEngine.context.dataSourceManager.getCollectionField(
+    `${dataSourceKey}.${collectionName}.${fieldPath}`,
+  ) as CollectionField | undefined;
+  return collectionField?.title || fieldPath;
+}
+
+function createQuickEditViewContainer(view: QuickEditViewContainer): QuickEditViewContainer {
+  let preventClose = false;
+  let nextBeforeClose = view.beforeClose;
+  const beforeClose: QuickEditViewBeforeCloseHandler = async (payload) => {
+    if (preventClose && !payload?.force) {
+      return false;
+    }
+
+    const result = await nextBeforeClose?.(payload);
+    return result !== false;
+  };
+  view.beforeClose = beforeClose;
+
+  return {
+    ...view,
+    close(result, force) {
+      return view.close(result, force);
+    },
+    update(newConfig) {
+      if (Object.prototype.hasOwnProperty.call(newConfig, 'preventClose')) {
+        preventClose = !!newConfig.preventClose;
+      }
+      return view.update?.(newConfig);
+    },
+    get beforeClose() {
+      return view.beforeClose;
+    },
+    set beforeClose(value) {
+      nextBeforeClose = value;
+      view.beforeClose = beforeClose;
+    },
+  };
+}
+
 export class QuickEditFormModel extends FlowModel {
   fieldPath: string;
 
   declare resource: SingleRecordResource;
   declare collection: Collection;
 
-  now: number = Date.now();
-
-  viewContainer: any;
+  declare viewContainer: QuickEditViewContainer;
   __onSubmitSuccess;
   _fieldProps: any;
   _onOk: any;
@@ -89,21 +196,75 @@ export class QuickEditFormModel extends FlowModel {
       onOk,
       sourceFieldModelUid,
     } = options;
-    const model = flowEngine.createModel({
-      use: 'QuickEditFormModel',
-      stepParams: {
-        quickEditFormSettings: {
-          init: {
-            dataSourceKey,
-            collectionName,
-            fieldPath,
+    const sourceFieldModel = sourceFieldModelUid ? flowEngine.getModel<FlowModel>(sourceFieldModelUid) : undefined;
+    const model = flowEngine.createModel(
+      {
+        use: 'QuickEditFormModel',
+        stepParams: {
+          quickEditFormSettings: {
+            init: {
+              dataSourceKey,
+              collectionName,
+              fieldPath,
+            },
           },
         },
       },
-    }) as QuickEditFormModel;
+      sourceFieldModel ? { delegate: sourceFieldModel.context } : undefined,
+    ) as QuickEditFormModel;
 
-    console.log('QuickEditFormModel.open2', Date.now() - model.now);
-    model.now = Date.now();
+    const bodyStyles = {
+      maxHeight: QUICK_EDIT_POPOVER_MAX_HEIGHT,
+      overflowY: 'auto',
+      overscrollBehavior: 'contain',
+    };
+    const mobileBodyStyles = {
+      ...bodyStyles,
+      maxHeight: QUICK_EDIT_MOBILE_DRAWER_HEIGHT,
+    };
+    const content = (view: QuickEditViewContainer, viewContext?: QuickEditViewContext) => {
+      if (mobileLayoutState.isMobileLayout) {
+        viewContext?.defineProperty?.('isMobileLayout', { value: true });
+      }
+      model.viewContainer = createQuickEditViewContainer(view);
+      model.__onSubmitSuccess = onSuccess;
+      model._fieldProps = fieldProps;
+      model._onOk = onOk;
+      return (
+        <FlowModelRenderer
+          fallback={<Skeleton.Input size="small" />}
+          model={model}
+          inputArgs={{ filterByTk, record, sourceFieldModelUid }}
+        />
+      );
+    };
+    const mobileLayoutState = getQuickEditMobileLayoutState(flowEngine, sourceFieldModel);
+    if (mobileLayoutState.isMobileLayout) {
+      model.context.defineProperty('isMobileLayout', { value: true });
+      const viewer = sourceFieldModel?.context?.viewer || flowEngine.context.viewer;
+      const title = getQuickEditTitle(
+        flowEngine,
+        dataSourceKey,
+        collectionName,
+        fieldPath,
+        sourceFieldModel,
+        fieldProps,
+      );
+      await viewer.open({
+        type: 'drawer',
+        title,
+        closable: true,
+        placement: 'bottom',
+        inputArgs: {
+          isMobileLayout: true,
+        },
+        styles: {
+          body: mobileBodyStyles,
+        },
+        content,
+      });
+      return;
+    }
 
     await flowEngine.context.viewer.open({
       type: 'popover',
@@ -112,25 +273,10 @@ export class QuickEditFormModel extends FlowModel {
       styles: {
         body: {
           width: 420,
-          maxHeight: QUICK_EDIT_POPOVER_MAX_HEIGHT,
-          overflowY: 'auto',
-          overscrollBehavior: 'contain',
+          ...bodyStyles,
         },
       },
-      content: (popover) => {
-        model.viewContainer = popover;
-        model.__onSubmitSuccess = onSuccess;
-        model._fieldProps = fieldProps;
-        model._onOk = onOk;
-        console.log('QuickEditFormModel.open3', Date.now() - model.now);
-        return (
-          <FlowModelRenderer
-            fallback={<Skeleton.Input size="small" />}
-            model={model}
-            inputArgs={{ filterByTk, record, sourceFieldModelUid }}
-          />
-        );
-      },
+      content,
     });
   }
 
@@ -171,15 +317,15 @@ export class QuickEditFormModel extends FlowModel {
   }
 
   render() {
-    console.log('QuickEditFormModel.open4', Date.now() - this.now);
-
+    const isMobileLayout = this.context.isMobileLayout;
     return (
       <FormComponent model={this}>
         <div
           style={{
             minHeight: 0,
             overflowY: 'auto',
-            maxHeight: QUICK_EDIT_FORM_MAX_HEIGHT,
+            maxHeight: isMobileLayout ? QUICK_EDIT_MOBILE_FORM_MAX_HEIGHT : QUICK_EDIT_FORM_MAX_HEIGHT,
+            padding: isMobileLayout ? QUICK_EDIT_MOBILE_CONTENT_PADDING : undefined,
           }}
         >
           {this.mapSubModels('fields', (field) => {
@@ -196,7 +342,14 @@ export class QuickEditFormModel extends FlowModel {
             );
           })}
         </div>
-        <Space style={{ display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
+        <Space
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flexShrink: 0,
+            padding: isMobileLayout ? QUICK_EDIT_MOBILE_ACTIONS_PADDING : undefined,
+          }}
+        >
           <Button
             onClick={() => {
               this.viewContainer.close();