@nocobase/client 0.7.0-alpha.8 → 0.7.0-alpha.80

package/src/route-switch/antd/admin-layout/index.tsx

@@ -9,8 +9,8 @@ import {
   CurrentUserProvider,
   findByUid,
   findMenuItem,
-  PluginManager,
   RemoteCollectionManagerProvider,
+  RemotePluginManagerToolbar,
   RemoteSchemaTemplateManagerProvider,
   SchemaComponent,
   useACLRoleContext,
@@ -37,6 +37,9 @@ const filterByACL = (schema, options) => {
         if (element['x-uid'] && !allowMenuItemIds.includes(element['x-uid'])) {
           delete s.properties[key];
         }
+        if (element['x-uid']) {
+          filterSchema(element);
+        }
       }
     }
   };
@@ -151,17 +154,7 @@ const InternalAdminLayout = (props: any) => {
         </div>
         <div style={{ position: 'absolute', top: 0, right: 0 }}>
           <ACLAllowConfigure>
-            <PluginManager.Toolbar
-              items={[
-                { component: 'DesignableSwitch', pin: true },
-                { component: 'CollectionManagerShortcut', pin: true },
-                { component: 'ACLShortcut', pin: true },
-                { component: 'WorkflowShortcut', pin: true },
-                { component: 'SchemaTemplateShortcut', pin: true },
-                { component: 'SystemSettingsShortcut' },
-                { component: 'FileStorageShortcut' },
-              ]}
-            />
+            <RemotePluginManagerToolbar />
           </ACLAllowConfigure>
           <CurrentUser />
         </div>
@@ -173,11 +166,16 @@ const InternalAdminLayout = (props: any) => {
             min-height: calc(100vh - 46px);
             position: relative;
             padding-bottom: 70px;
+            > div {
+              position: relative;
+              z-index: 1;
+            }
             .ant-layout-footer {
               position: absolute;
               bottom: 0;
               text-align: center;
               width: 100%;
+              z-index: 0;
             }
           `}
         >

package/src/schema-component/antd/action/Action.Designer.tsx

@@ -1,199 +1,301 @@
 import { ISchema, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
+import { isValid } from '@formily/shared';
+import { uid } from '@nocobase/utils';
+import { Menu } from 'antd';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDesignable } from '../..';
+import { useActionContext, useCompile, useDesignable } from '../..';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 
+const MenuGroup = (props) => {
+  const fieldSchema = useFieldSchema();
+  const actionType = fieldSchema['x-action'] || '';
+  const { t } = useTranslation();
+  const actionTitles = {
+    'customize:popup': t('Popup'),
+    'customize:update': t('Update record'),
+    'customize:save': t('Save record'),
+  };
+  if (!['customize:popup', 'customize:update', 'customize:save'].includes(actionType)) {
+    return <>{props.children}</>;
+  }
+  return <Menu.ItemGroup title={`${t('Customize')} > ${actionTitles[actionType]}`}>{props.children}</Menu.ItemGroup>;
+};
+
 export const ActionDesigner = (props) => {
+  const { modalTip, ...restProps } = props;
   const field = useField();
   const fieldSchema = useFieldSchema();
   const { dn } = useDesignable();
   const { t } = useTranslation();
-  const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
+  const compile = useCompile();
+  const isPopupAction = ['create', 'update', 'view', 'customize:popup'].includes(fieldSchema['x-action'] || '');
+  const context = useActionContext();
+  const [initialSchema, setInitialSchema] = useState<ISchema>();
+  const actionType = fieldSchema['x-action'] || '';
+
+  useEffect(() => {
+    const schemaUid = uid();
+    const schema: ISchema = {
+      type: 'void',
+      'x-uid': schemaUid,
+      'x-component': 'Grid',
+      'x-initializer': 'CustomFormItemInitializers',
+    };
+    setInitialSchema(schema);
+  }, [field.address]);
+
+  const tips = {
+    'customize:update': t(
+      'After clicking the custom button, the following fields of the current record will be saved according to the following form.',
+    ),
+    'customize:save': t(
+      'After clicking the custom button, the following fields of the current record will be saved according to the following form.',
+    ),
+  };
   return (
-    <GeneralSchemaDesigner {...props}>
-      <SchemaSettings.ModalItem
-        title={t('Edit button')}
-        schema={
-          {
-            type: 'object',
-            title: t('Edit button'),
-            properties: {
-              title: {
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-                title: t('Button title'),
-                default: fieldSchema.title,
-                'x-component-props': {},
-                // description: `原字段标题：${collectionField?.uiSchema?.title}`,
-              },
-              icon: {
-                'x-decorator': 'FormItem',
-                'x-component': 'IconPicker',
-                title: t('Button icon'),
-                default: fieldSchema?.['x-component-props']?.icon,
-                'x-component-props': {},
-                // description: `原字段标题：${collectionField?.uiSchema?.title}`,
-              },
-            },
-          } as ISchema
-        }
-        onSubmit={({ title, icon }) => {
-          if (title) {
-            fieldSchema.title = title;
-            field.title = title;
-            field.componentProps.icon = icon;
-            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-            fieldSchema['x-component-props'].icon = icon;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                title,
-                'x-component-props': {
-                  ...fieldSchema['x-component-props'],
-                },
-              },
-            });
-            dn.refresh();
-          }
-        }}
-      />
-      {isPopupAction && (
-        <SchemaSettings.SelectItem
-          title={t('Open mode')}
-          options={[
-            { label: t('Drawer'), value: 'drawer' },
-            { label: t('Dialog'), value: 'modal' },
-          ]}
-          value={field.componentProps.openMode}
-          onChange={(value) => {
-            field.componentProps.openMode = value;
-            fieldSchema['x-component-props']['openMode'] = value;
-            dn.emit('patch', {
-              schema: {
-                'x-uid': fieldSchema['x-uid'],
-                'x-component-props': fieldSchema['x-component-props'],
-              },
-            });
-            dn.refresh();
-          }}
-        />
-      )}
-      {fieldSchema?.['x-action-settings'] && (
-        <SchemaSettings.SwitchItem
-          title={t('Skip required validation')}
-          checked={!!fieldSchema?.['x-action-settings']?.skipValidator}
-          onChange={(value) => {
-            fieldSchema['x-action-settings'].skipValidator = value;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                'x-action-settings': {
-                  ...fieldSchema['x-action-settings'],
-                },
-              },
-            });
-          }}
-        />
-      )}
-      {fieldSchema?.['x-action-settings'] && (
+    <GeneralSchemaDesigner {...restProps} disableInitializer>
+      <MenuGroup>
         <SchemaSettings.ModalItem
-          title={t('Form values')}
+          title={t('Edit button')}
           schema={
             {
               type: 'object',
+              title: t('Edit button'),
               properties: {
-                overwriteValues: {
-                  title: t('When submitting the following fields, the saved values are'),
+                title: {
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                  title: t('Button title'),
+                  default: fieldSchema.title,
+                  'x-component-props': {},
+                  // description: `原字段标题：${collectionField?.uiSchema?.title}`,
+                },
+                icon: {
+                  'x-decorator': 'FormItem',
+                  'x-component': 'IconPicker',
+                  title: t('Button icon'),
+                  default: fieldSchema?.['x-component-props']?.icon,
+                  'x-component-props': {},
+                  // description: `原字段标题：${collectionField?.uiSchema?.title}`,
+                },
+                type: {
                   'x-decorator': 'FormItem',
-                  'x-component': 'Input.TextArea',
-                  default: JSON.stringify(fieldSchema?.['x-action-settings']?.overwriteValues),
+                  'x-component': 'Radio.Group',
+                  title: t('Button background color'),
+                  default: fieldSchema?.['x-component-props']?.danger
+                    ? 'danger'
+                    : fieldSchema?.['x-component-props']?.type === 'primary'
+                    ? 'primary'
+                    : 'default',
+                  enum: [
+                    { value: 'default', label: '{{t("Default")}}' },
+                    { value: 'primary', label: '{{t("Highlight")}}' },
+                    { value: 'danger', label: '{{t("Danger red")}}' },
+                  ],
                 },
               },
             } as ISchema
           }
-          onSubmit={({ overwriteValues }) => {
-            try {
-              const values = JSON.parse(overwriteValues);
-              fieldSchema['x-action-settings'].overwriteValues = values;
+          onSubmit={({ title, icon, type }) => {
+            if (title) {
+              fieldSchema.title = title;
+              field.title = title;
+              field.componentProps.icon = icon;
+              field.componentProps.danger = type === 'danger';
+              field.componentProps.type = type;
+              fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+              fieldSchema['x-component-props'].icon = icon;
+              fieldSchema['x-component-props'].danger = type === 'danger';
+              fieldSchema['x-component-props'].type = type;
               dn.emit('patch', {
                 schema: {
                   ['x-uid']: fieldSchema['x-uid'],
-                  'x-action-settings': {
-                    ...fieldSchema['x-action-settings'],
+                  title,
+                  'x-component-props': {
+                    ...fieldSchema['x-component-props'],
                   },
                 },
               });
               dn.refresh();
-            } catch (e) {}
+            }
           }}
         />
-      )}
-      {fieldSchema?.['x-action-settings'] && (
-        <SchemaSettings.ModalItem
-          title={t('After successful submission')}
-          initialValues={fieldSchema?.['x-action-settings']?.['onSuccess']}
-          schema={
-            {
-              type: 'object',
-              title: t('After successful submission'),
-              properties: {
-                successMessage: {
-                  // default: t('Submitted successfully!'),
-                  title: t('Pop-up message'),
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input.TextArea',
-                  'x-component-props': {},
+        {isPopupAction && (
+          <SchemaSettings.SelectItem
+            title={t('Open mode')}
+            options={[
+              { label: t('Drawer'), value: 'drawer' },
+              { label: t('Dialog'), value: 'modal' },
+            ]}
+            value={fieldSchema?.['x-component-props']?.['openMode']}
+            onChange={(value) => {
+              field.componentProps.openMode = value;
+              fieldSchema['x-component-props']['openMode'] = value;
+              dn.emit('patch', {
+                schema: {
+                  'x-uid': fieldSchema['x-uid'],
+                  'x-component-props': fieldSchema['x-component-props'],
                 },
-                redirecting: {
-                  title: t('Then'),
-                  default: false,
-                  enum: [
-                    { label: t('Stay on current page'), value: false },
-                    { label: t('Redirect to'), value: true },
-                  ],
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Radio.Group',
-                  'x-component-props': {},
-                  'x-reactions': {
-                    target: 'redirectTo',
-                    fulfill: {
-                      state: {
-                        visible: '{{!!$self.value}}',
+              });
+              dn.refresh();
+            }}
+          />
+        )}
+
+        {isValid(fieldSchema?.['x-action-settings']?.assignedValues) && (
+          <SchemaSettings.ActionModalItem
+            title={t('Assign field values')}
+            initialSchema={initialSchema}
+            initialValues={fieldSchema?.['x-action-settings']?.assignedValues}
+            modalTip={tips[actionType]}
+            uid={fieldSchema?.['x-action-settings']?.schemaUid}
+            onSubmit={(assignedValues) => {
+              fieldSchema['x-action-settings']['assignedValues'] = assignedValues;
+              dn.emit('patch', {
+                schema: {
+                  ['x-uid']: fieldSchema['x-uid'],
+                  'x-action-settings': fieldSchema['x-action-settings'],
+                },
+              });
+              dn.refresh();
+            }}
+          />
+        )}
+        {isValid(fieldSchema?.['x-action-settings']?.skipValidator) && (
+          <SchemaSettings.SwitchItem
+            title={t('Skip required validation')}
+            checked={!!fieldSchema?.['x-action-settings']?.skipValidator}
+            onChange={(value) => {
+              fieldSchema['x-action-settings'].skipValidator = value;
+              dn.emit('patch', {
+                schema: {
+                  ['x-uid']: fieldSchema['x-uid'],
+                  'x-action-settings': {
+                    ...fieldSchema['x-action-settings'],
+                  },
+                },
+              });
+            }}
+          />
+        )}
+        {/* {isValid(fieldSchema?.['x-action-settings']?.overwriteValues) && (
+          <SchemaSettings.ModalItem
+            title={t('Form values')}
+            schema={
+              {
+                type: 'object',
+                properties: {
+                  overwriteValues: {
+                    title: t('When submitting the following fields, the saved values are'),
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input.TextArea',
+                    default: JSON.stringify(fieldSchema?.['x-action-settings']?.overwriteValues),
+                  },
+                },
+              } as ISchema
+            }
+            onSubmit={({ overwriteValues }) => {
+              try {
+                const values = JSON.parse(overwriteValues);
+                fieldSchema['x-action-settings'].overwriteValues = values;
+                dn.emit('patch', {
+                  schema: {
+                    ['x-uid']: fieldSchema['x-uid'],
+                    'x-action-settings': {
+                      ...fieldSchema['x-action-settings'],
+                    },
+                  },
+                });
+                dn.refresh();
+              } catch (e) {}
+            }}
+          />
+        )} */}
+        {isValid(fieldSchema?.['x-action-settings']?.['onSuccess']) && (
+          <SchemaSettings.ModalItem
+            title={
+              {
+                'customize:save': t('After successful save'),
+                'customize:update': t('After successful update'),
+              }[actionType]
+            }
+            initialValues={fieldSchema?.['x-action-settings']?.['onSuccess']}
+            schema={
+              {
+                type: 'object',
+                title: {
+                  'customize:save': t('After successful save'),
+                  'customize:update': t('After successful update'),
+                }[actionType],
+                properties: {
+                  successMessage: {
+                    title: t('Popup message'),
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input.TextArea',
+                    'x-component-props': {},
+                  },
+                  manualClose: {
+                    title: t('Popup close method'),
+                    default: false,
+                    enum: [
+                      { label: t('Automatic close'), value: false },
+                      { label: t('Manually close'), value: true },
+                    ],
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Radio.Group',
+                    'x-component-props': {},
+                  },
+                  redirecting: {
+                    title: t('Then'),
+                    default: false,
+                    enum: [
+                      { label: t('Stay on current page'), value: false },
+                      { label: t('Redirect to'), value: true },
+                    ],
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Radio.Group',
+                    'x-component-props': {},
+                    'x-reactions': {
+                      target: 'redirectTo',
+                      fulfill: {
+                        state: {
+                          visible: '{{!!$self.value}}',
+                        },
                       },
                     },
                   },
+                  redirectTo: {
+                    title: t('Link'),
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input',
+                    'x-component-props': {},
+                  },
                 },
-                redirectTo: {
-                  title: t('Link'),
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input',
-                  'x-component-props': {},
+              } as ISchema
+            }
+            onSubmit={(onSuccess) => {
+              fieldSchema['x-action-settings']['onSuccess'] = onSuccess;
+              dn.emit('patch', {
+                schema: {
+                  ['x-uid']: fieldSchema['x-uid'],
+                  'x-action-settings': fieldSchema['x-action-settings'],
                 },
-              },
-            } as ISchema
-          }
-          onSubmit={(onSuccess) => {
-            fieldSchema['x-action-settings']['onSuccess'] = onSuccess;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                'x-action-settings': fieldSchema['x-action-settings'],
-              },
-            });
+              });
+            }}
+          />
+        )}
+        <SchemaSettings.Divider />
+        <SchemaSettings.Remove
+          removeParentsIfNoChildren
+          breakRemoveOn={(s) => {
+            return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
+          }}
+          confirm={{
+            title: t('Delete action'),
           }}
         />
-      )}
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={(s) => {
-          return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
-        }}
-        confirm={{
-          title: t('Delete action')
-        }}
-      />
+      </MenuGroup>
     </GeneralSchemaDesigner>
   );
 };

package/src/schema-component/antd/action/Action.Drawer.tsx

@@ -4,11 +4,13 @@ import { Drawer } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 import { useActionContext } from './hooks';
 import { ComposedActionDrawer } from './types';
 
 export const ActionDrawer: ComposedActionDrawer = observer((props) => {
   const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
+  const { t } = useTranslation();
   const { visible, setVisible } = useActionContext();
   const schema = useFieldSchema();
   const field = useField();
@@ -32,7 +34,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
             {...others}
             destroyOnClose
             visible={visible}
-            onClose={() => setVisible(false)}
+            onClose={() => setVisible(false, true)}
             className={classNames(
               others.className,
               css`

package/src/schema-component/antd/action/Action.Modal.tsx

@@ -32,7 +32,7 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
             {...others}
             destroyOnClose
             visible={visible}
-            onCancel={() => setVisible(false)}
+            onCancel={() => setVisible(false, true)}
             className={classNames(
               others.className,
               css`

package/src/schema-component/antd/action/Action.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { useActionContext } from '../..';
 import { Icon } from '../../../icon';
 import { SortableItem } from '../../common';
-import { useDesigner } from '../../hooks';
+import { useCompile, useDesigner } from '../../hooks';
 import { useProps } from '../../hooks/useProps';
 import ActionContainer from './Action.Container';
 import { ActionDesigner } from './Action.Designer';
@@ -69,25 +69,30 @@ export const Action: ComposedAction = observer((props: any) => {
   const {
     popover,
     confirm,
-    openMode,
+    // openMode,
     containerRefKey,
     component,
     useAction = useA,
     className,
     disabled,
     icon,
+    title,
     ...others
   } = props;
   const { onClick } = useProps(props);
   const [visible, setVisible] = useState(false);
+  const [formValueChanged, setFormValueChanged] = useState(false);
   const Designer = useDesigner();
-  const field = useField();
+  const field = useField<any>();
   const { run } = useAction();
   const fieldSchema = useFieldSchema();
+  const compile = useCompile();
   const designerProps = fieldSchema['x-designer-props'];
+  const openMode = fieldSchema?.['x-component-props']?.['openMode'];
   const renderButton = () => (
     <SortableItem
       {...others}
+      loading={field?.data?.loading}
       icon={<Icon type={icon} />}
       onClick={(e: React.MouseEvent) => {
         e.preventDefault();
@@ -109,12 +114,22 @@ export const Action: ComposedAction = observer((props: any) => {
       component={component || Button}
       className={classnames(className, actionDesignerCss)}
     >
-      {field.title}
+      {title || compile(fieldSchema.title)}
       <Designer {...designerProps} />
     </SortableItem>
   );
   return (
-    <ActionContext.Provider value={{ button: renderButton(), visible, setVisible, openMode, containerRefKey }}>
+    <ActionContext.Provider
+      value={{
+        button: renderButton(),
+        visible,
+        setVisible,
+        formValueChanged,
+        setFormValueChanged,
+        openMode,
+        containerRefKey,
+      }}
+    >
       {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
       {!popover && renderButton()}
       {!popover && props.children}

package/src/schema-component/antd/action/context.tsx

@@ -8,4 +8,6 @@ export interface ActionContextProps {
   setVisible?: (v: boolean) => void;
   openMode?: 'drawer' | 'modal' | 'page';
   containerRefKey?: string;
+  formValueChanged?: boolean;
+  setFormValueChanged?: (v: boolean) => void;
 }

package/src/schema-component/antd/action/hooks.ts

@@ -1,5 +1,7 @@
 import { useForm } from '@formily/react';
+import { Modal as AntdModal } from 'antd';
 import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ActionContext } from './context';
 
 export const useA = () => {
@@ -10,12 +12,28 @@ export const useA = () => {
 
 export const useActionContext = () => {
   const ctx = useContext(ActionContext);
+  const { t } = useTranslation();
 
   return {
     ...ctx,
-    setVisible(visible: boolean) {
+    setVisible(visible: boolean, confirm = false) {
       if (ctx?.openMode !== 'page') {
-        ctx?.setVisible?.(visible);
+        if (!visible) {
+          if (confirm && ctx.formValueChanged) {
+            AntdModal.confirm({
+              title: t('Unsaved changes'),
+              content: t("Are you sure you don't want to save?"),
+              async onOk() {
+                ctx.setFormValueChanged(false);
+                ctx.setVisible?.(false);
+              },
+            });
+          } else {
+            ctx?.setVisible?.(false);
+          }
+        } else {
+          ctx?.setVisible?.(visible);
+        }
       }
     },
   };