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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client",
-  "version": "0.7.0-alpha.8",
+  "version": "0.7.0-alpha.82",
   "license": "Apache-2.0",
   "licenses": [
     {
@@ -9,30 +9,20 @@
     }
   ],
   "main": "lib",
-  "module": "esm",
-  "sideEffects": [
-    "dist/*",
-    "esm/*.js",
-    "lib/*.js",
-    "src/*.ts",
-    "*.less",
-    "**/*/style.js"
-  ],
-  "types": "esm/index.d.ts",
-  "engines": {
-    "npm": ">=3.0.0"
-  },
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
   "dependencies": {
     "@dnd-kit/core": "^5.0.1",
     "@dnd-kit/sortable": "^6.0.0",
     "@emotion/css": "^11.7.1",
-    "@formily/antd": "^2.0.15",
-    "@formily/core": "^2.0.15",
-    "@formily/react": "^2.0.15",
-    "@nocobase/utils": "0.7.0-alpha.8",
+    "@formily/antd": "2.0.20",
+    "@formily/core": "2.0.20",
+    "@formily/react": "2.0.20",
+    "@nocobase/sdk": "0.7.0-alpha.82",
+    "@nocobase/utils": "0.7.0-alpha.82",
     "ahooks": "^3.0.5",
     "antd": "~4.19.5",
-    "axios": "^0.24.0",
+    "axios": "^0.26.1",
     "classnames": "^2.3.1",
     "file-saver": "^2.0.5",
     "i18next": "^21.6.0",
@@ -57,14 +47,10 @@
     "react-dom": ">=16.8.0",
     "react-is": ">=16.8.0 || >=17.0.0"
   },
-  "scripts": {
-    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc --project tsconfig.build.json",
-    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm"
-  },
   "devDependencies": {
+    "@testing-library/react": "^12.1.2",
     "@types/marked": "^4.0.1",
     "axios-mock-adapter": "^1.20.0"
   },
-  "gitHead": "f4a12279b43669f2c0dcb3c98b87ebf03d8dab0b"
+  "gitHead": "4820fd09375c7200d1ea0bb0aab1bd4783b80d3d"
 }

package/src/acl/ACLProvider.tsx

@@ -1,9 +1,8 @@
 import { useFieldSchema } from '@formily/react';
-import { useCookieState } from 'ahooks';
 import { Spin } from 'antd';
 import React, { createContext, useContext } from 'react';
 import { Redirect } from 'react-router-dom';
-import { useRequest } from '../api-client';
+import { useAPIClient, useRequest } from '../api-client';
 import { useCollection } from '../collection-manager';
 import { useRecordIsOwn } from '../record-provider';
 import { SchemaComponentOptions, useDesignable } from '../schema-component';
@@ -22,7 +21,7 @@ export const ACLProvider = (props) => {
 
 export const ACLRolesCheckProvider = (props) => {
   const { setDesignable } = useDesignable();
-  const [roleName, setRoleName] = useCookieState('currentRoleName');
+  const api = useAPIClient();
   const result = useRequest(
     {
       url: 'roles:check',
@@ -32,8 +31,8 @@ export const ACLRolesCheckProvider = (props) => {
         if (!data?.data?.allowConfigure && !data?.data?.allowAll) {
           setDesignable(false);
         }
-        if (data?.data?.role !== roleName) {
-          setRoleName(data?.data?.role);
+        if (data?.data?.role !== api.auth.role) {
+          api.auth.setRole(data?.data?.role);
         }
       },
     },

package/src/acl/Configuration/RoleConfigure.tsx

@@ -47,11 +47,11 @@ export const RoleConfigure = () => {
             title: t('Configure permissions'),
             'x-decorator': 'FormItem',
             'x-component': 'Checkbox',
-            'x-content': '允许配置系统，包括界面配置、数据表配置、权限配置、系统配置等全部配置项',
+            'x-content': t('Allows configuration of the whole system, including UI, collections, permissions, etc.'),
           },
           'strategy.actions': {
-            title: t('General action permissions'),
-            description: '所有数据表都默认使用通用数据操作权限；同时，可以针对每个数据表单独配置权限。',
+            title: t('Global action permissions'),
+            description: t('All collections use general action permissions by default; permission configured individually will override the default one.'),
             'x-component': 'StrategyActions',
             'x-decorator': 'FormItem',
           },
@@ -59,7 +59,7 @@ export const RoleConfigure = () => {
             title: t('Menu permissions'),
             'x-decorator': 'FormItem',
             'x-component': 'Checkbox',
-            'x-content': '新增菜单项默认允许访问',
+            'x-content': t('New menu items are allowed to be accessed by default.'),
           },
         },
       }}

package/src/acl/Configuration/schemas/roles.ts

@@ -241,7 +241,7 @@ export const roleSchema: ISchema = {
                               properties: {
                                 tab1: {
                                   type: 'void',
-                                  title: '{{t("Global permissions")}}',
+                                  title: '{{t("General permissions")}}',
                                   'x-component': 'Tabs.TabPane',
                                   'x-component-props': {},
                                   properties: {

package/src/antd-config-provider/index.tsx

@@ -3,10 +3,11 @@ import enUS from 'antd/lib/locale/en_US';
 import zhCN from 'antd/lib/locale/zh_CN';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useRequest } from '../api-client';
+import { useAPIClient, useRequest } from '../api-client';
 
 export function AntdConfigProvider(props) {
   const { remoteLocale, ...others } = props;
+  const api = useAPIClient();
   const { i18n } = useTranslation();
   const { loading } = useRequest(
     {
@@ -14,8 +15,9 @@ export function AntdConfigProvider(props) {
     },
     {
       onSuccess(data) {
-        const locale = localStorage.getItem('NOCOBASE_LANG');
+        const locale = api.auth.locale;
         if (data?.data?.lang && !locale) {
+          api.auth.setLocale(data?.data?.lang);
           i18n.changeLanguage(data?.data?.lang);
         }
       },

package/src/api-client/APIClient.ts

@@ -1,123 +1,6 @@
-import { observable } from '@formily/reactive';
+import { APIClient as APIClientSDK } from '@nocobase/sdk';
 import { Result } from 'ahooks/lib/useRequest/src/types';
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import Cookies from 'js-cookie';
-import qs from 'qs';
-
-export interface ActionParams {
-  filterByTk?: any;
-  [key: string]: any;
-}
-
-type ResourceActionOptions<P = any> = {
-  resource?: string;
-  resourceOf?: any;
-  action?: string;
-  params?: P;
-};
-
-export interface IResource {
-  list?: (params?: ActionParams) => Promise<any>;
-  get?: (params?: ActionParams) => Promise<any>;
-  create?: (params?: ActionParams) => Promise<any>;
-  update?: (params?: ActionParams) => Promise<any>;
-  destroy?: (params?: ActionParams) => Promise<any>;
-  [key: string]: (params?: ActionParams) => Promise<any>;
-}
-
-export class APIClient {
-  axios: AxiosInstance;
 
+export class APIClient extends APIClientSDK {
   services: Record<string, Result<any, any>>;
-
-  tokenKey = 'NOCOBASE_TOKEN';
-
-  constructor(instance?: AxiosInstance | AxiosRequestConfig) {
-    this.services = observable({});
-    if (typeof instance === 'function') {
-      this.axios = instance;
-    } else {
-      this.axios = axios.create(instance);
-    }
-    this.qsMiddleware();
-    this.authMiddleware();
-  }
-
-  qsMiddleware() {
-    this.axios.interceptors.request.use((config) => {
-      config.paramsSerializer = (params) => {
-        return qs.stringify(params, {
-          strictNullHandling: true,
-          arrayFormat: 'brackets',
-        });
-      };
-      return config;
-    });
-  }
-
-  // TODO
-  authMiddleware() {
-    this.axios.interceptors.request.use((config) => {
-      const token = localStorage.getItem(this.tokenKey);
-      config.headers['X-Hostname'] = window.location.hostname;
-      if (token) {
-        config.headers['Authorization'] = `Bearer ${token}`;
-      }
-      const currentRoleName = Cookies.get('currentRoleName');
-      if (currentRoleName) {
-        config.headers['X-Role'] = currentRoleName;
-      }
-      return config;
-    });
-  }
-
-  // TODO
-  setBearerToken(token: any) {
-    localStorage.setItem(this.tokenKey, token || '');
-    Cookies.remove('currentRoleName');
-  }
-
-  service(uid: string): Result<any, any> {
-    return this.services[uid];
-  }
-
-  request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D> | ResourceActionOptions): Promise<R> {
-    const { resource, resourceOf, action, params } = config as any;
-    if (resource) {
-      return this.resource(resource, resourceOf)[action](params);
-    }
-    return this.axios.request<T, R, D>(config);
-  }
-
-  resource(name: string, of?: any): IResource {
-    const target = {};
-    const handler = {
-      get: (_: any, actionName: string) => {
-        let url = name.split('.').join(`/${of || '_'}/`);
-        url += `:${actionName}`;
-        const config: AxiosRequestConfig = { url };
-        if (['get', 'list'].includes(actionName)) {
-          config['method'] = 'get';
-        } else {
-          config['method'] = 'post';
-        }
-        return async (params?: ActionParams) => {
-          const { values, filter, ...others } = params || {};
-          config['params'] = others;
-          if (filter) {
-            if (typeof filter === 'string') {
-              config['params']['filter'] = filter;
-            } else {
-              config['params']['filter'] = JSON.stringify(filter);
-            }
-          }
-          if (config.method !== 'get') {
-            config['data'] = values || {};
-          }
-          return await this.request(config);
-        };
-      },
-    };
-    return new Proxy(target, handler);
-  }
 }

package/src/block-provider/CalendarBlockProvider.tsx

@@ -29,7 +29,7 @@ const InternalCalendarBlockProvider = (props) => {
 
 export const CalendarBlockProvider = (props) => {
   return (
-    <BlockProvider {...props}>
+    <BlockProvider {...props} params={{ ...props.params, paginate: false }}>
       <InternalCalendarBlockProvider {...props} />
     </BlockProvider>
   );

package/src/block-provider/KanbanBlockProvider.tsx

@@ -4,7 +4,7 @@ import { Spin } from 'antd';
 import React, { createContext, useContext, useEffect } from 'react';
 import { useACLRoleContext } from '../acl';
 import { useCollection } from '../collection-manager';
-import { toColumns } from '../schema-component/antd/kanban-v2/Kanban';
+import { toColumns } from '../schema-component/antd/kanban/Kanban';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 
 export const KanbanBlockContext = createContext<any>({});

package/src/block-provider/hooks/index.ts

@@ -1,9 +1,11 @@
-import { useFieldSchema, useForm } from '@formily/react';
-import { Modal } from 'antd';
+import { useField, useFieldSchema, useForm } from '@formily/react';
+import { message, Modal } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { useCollection } from '../../collection-manager';
+import { useRecord } from '../../record-provider';
 import { useActionContext, useCompile } from '../../schema-component';
+import { useCurrentUserContext } from '../../user';
 import { useBlockRequestContext, useFilterByTk } from '../BlockProvider';
 import { useDetailsBlockContext } from '../DetailsBlockProvider';
 import { TableFieldResource } from '../TableFieldProvider';
@@ -59,13 +61,14 @@ export const useCreateActionProps = () => {
   const history = useHistory();
   const { t } = useTranslation();
   const actionSchema = useFieldSchema();
+  const actionField = useField();
   const { fields, getField } = useCollection();
   const compile = useCompile();
   return {
     async onClick() {
       const fieldNames = fields.map((field) => field.name);
-      const skipValidator = actionSchema?.['x-action-settings']?.skipValidator;
-      const overwriteValues = actionSchema?.['x-action-settings']?.overwriteValues;
+      const { assignedValues, onSuccess, overwriteValues, skipValidator } = actionSchema?.['x-action-settings'] ?? {};
+
       if (!skipValidator) {
         await form.submit();
       }
@@ -100,31 +103,85 @@ export const useCreateActionProps = () => {
           values[key] = form.values[key];
         }
       }
+      actionField.data = field.data || {};
+      actionField.data.loading = true;
       await resource.create({
         values: {
           ...values,
           ...overwriteValues,
+          ...assignedValues,
         },
       });
+      actionField.data.loading = false;
       __parent?.service?.refresh?.();
       setVisible?.(false);
-      const onSuccess = actionSchema?.['x-action-settings']?.onSuccess;
       if (!onSuccess?.successMessage) {
         return;
       }
-      Modal.success({
-        title: compile(onSuccess?.successMessage),
-        onOk: async () => {
-          await form.reset();
-          if (onSuccess?.redirecting && onSuccess?.redirectTo) {
-            if (isURL(onSuccess.redirectTo)) {
-              window.location.href = onSuccess.redirectTo;
-            } else {
-              history.push(onSuccess.redirectTo);
+      if (onSuccess?.manualClose) {
+        Modal.success({
+          title: compile(onSuccess?.successMessage),
+          onOk: async () => {
+            await form.reset();
+            if (onSuccess?.redirecting && onSuccess?.redirectTo) {
+              if (isURL(onSuccess.redirectTo)) {
+                window.location.href = onSuccess.redirectTo;
+              } else {
+                history.push(onSuccess.redirectTo);
+              }
             }
-          }
-        },
+          },
+        });
+      } else {
+        message.success(compile(onSuccess?.successMessage));
+      }
+    },
+  };
+};
+
+export const useCustomizeUpdateActionProps = () => {
+  const { resource, __parent, service } = useBlockRequestContext();
+  const filterByTk = useFilterByTk();
+  const actionSchema = useFieldSchema();
+  const currentRecord = useRecord();
+  const ctx = useCurrentUserContext();
+  const history = useHistory();
+  const compile = useCompile();
+  const form = useForm();
+
+  return {
+    async onClick() {
+      const { assignedValues, onSuccess, skipValidator } = actionSchema?.['x-action-settings'] ?? {};
+      if (skipValidator === false) {
+        await form.submit();
+      }
+      await resource.update({
+        filterByTk,
+        values: { ...assignedValues },
       });
+      service?.refresh?.();
+      if (!(resource instanceof TableFieldResource)) {
+        __parent?.service?.refresh?.();
+      }
+      if (!onSuccess?.successMessage) {
+        return;
+      }
+      if (onSuccess?.manualClose) {
+        Modal.success({
+          title: compile(onSuccess?.successMessage),
+          onOk: async () => {
+            if (onSuccess?.redirecting && onSuccess?.redirectTo) {
+              if (isURL(onSuccess.redirectTo)) {
+                window.location.href = onSuccess.redirectTo;
+              } else {
+                history.push(onSuccess.redirectTo);
+              }
+            }
+          },
+        });
+      } else {
+        message.success(compile(onSuccess?.successMessage));
+      }
     },
   };
 };
@@ -138,10 +195,11 @@ export const useUpdateActionProps = () => {
   const history = useHistory();
   const { fields, getField } = useCollection();
   const compile = useCompile();
+  const actionField = useField();
   return {
     async onClick() {
-      const skipValidator = actionSchema?.['x-action-settings']?.skipValidator;
-      const overwriteValues = actionSchema?.['x-action-settings']?.overwriteValues;
+      const { assignedValues, onSuccess, overwriteValues, skipValidator } = actionSchema?.['x-action-settings'] ?? {};
+
       if (!skipValidator) {
         await form.submit();
       }
@@ -154,7 +212,7 @@ export const useUpdateActionProps = () => {
             values[key] = form.values[key];
             continue;
           }
-          if (!field.added.has(key)) {
+          if (field.added && !field.added.has(key)) {
             continue;
           }
           const items = form.values[key];
@@ -184,20 +242,26 @@ export const useUpdateActionProps = () => {
           values[key] = form.values[key];
         }
       }
+      actionField.data = field.data || {};
+      actionField.data.loading = true;
       await resource.update({
         filterByTk,
         values: {
           ...values,
           ...overwriteValues,
+          ...assignedValues,
         },
       });
+      actionField.data.loading = false;
       __parent?.service?.refresh?.();
       if (!(resource instanceof TableFieldResource)) {
         __parent?.__parent?.service?.refresh?.();
       }
       setVisible?.(false);
-      const onSuccess = actionSchema?.['x-action-settings']?.onSuccess;
-      if (onSuccess?.successMessage) {
+      if (!onSuccess?.successMessage) {
+        return;
+      }
+      if (onSuccess?.manualClose) {
         Modal.success({
           title: compile(onSuccess?.successMessage),
           onOk: async () => {
@@ -211,6 +275,8 @@ export const useUpdateActionProps = () => {
             }
           },
         });
+      } else {
+        message.success(compile(onSuccess?.successMessage));
       }
     },
   };

package/src/block-provider/index.tsx

@@ -6,4 +6,5 @@ export * from './FormBlockProvider';
 export * from './KanbanBlockProvider';
 export * from './TableBlockProvider';
 export * from './TableFieldProvider';
+export * from './TableSelectorProvider';
 

package/src/collection-manager/CollectionField.tsx

@@ -9,6 +9,7 @@ import { useCollectionField } from './hooks';
 // TODO: 初步适配
 const InternalField: React.FC = (props) => {
   const field = useField<Field>();
+
   const fieldSchema = useFieldSchema();
   const { name, interface: interfaceType, uiSchema } = useCollectionField();
   const component = useComponent(uiSchema?.['x-component']);

package/src/collection-manager/Configuration/schemas/collections.ts

@@ -26,7 +26,7 @@ const collection: CollectionOptions = {
         title: '{{ t("Collection name") }}',
         type: 'string',
         'x-component': 'Input',
-        // description: '使用英文',
+        description: '{{t("Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.")}}',
       },
     },
     {

package/src/collection-manager/interfaces/attachment.ts

@@ -23,7 +23,7 @@ export const attachment: IField = {
     },
   },
   schemaInitialize(schema: ISchema, { block }) {
-    if (['Table', 'Kanban'].includes(block)) {
+    if (['Table', 'KanbanV2'].includes(block)) {
       schema['x-component-props'] = schema['x-component-props'] || {};
       schema['x-component-props']['size'] = 'small';
     }

package/src/collection-manager/interfaces/linkTo.ts

@@ -92,6 +92,9 @@ export const linkTo: IField = {
       'x-reactions': ['{{useAsyncDataSource(loadCollections)}}'],
       'x-decorator': 'FormItem',
       'x-component': 'Select',
+      'x-component-props': {
+        placeholder: '{{t("Leave it blank, unless you need a custom intermediate table")}}',
+      },
     },
     // 'reverseField.uiSchema.title': {
     //   type: 'string',

package/src/collection-manager/interfaces/properties/index.ts

@@ -22,10 +22,10 @@ export const type: ISchema = {
     { label: 'Virtual', value: 'virtual' },
     { label: 'JSON', value: 'json' },
     { label: 'Password', value: 'password' },
-    { label: 'HasOne', value: 'hasOne' },
-    { label: 'HasMany', value: 'hasMany' },
-    { label: 'BelongsTo', value: 'belongsTo' },
-    { label: 'BelongsToMany', value: 'belongsToMany' },
+    { label: 'One to one', value: 'hasOne' },
+    { label: 'One to many', value: 'hasMany' },
+    { label: 'Many to one', value: 'belongsTo' },
+    { label: 'Many to many', value: 'belongsToMany' },
   ],
 };
 

package/src/collection-manager/types.ts

@@ -19,6 +19,7 @@ export interface CollectionOptions {
   title?: string;
   filterTargetKey?: string;
   targetKey?: string;
+  sortable?: any;
   fields?: FieldOptions[];
 }
 

package/src/document-title/index.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { useSystemSettings } from '../system-settings';
 
 interface DocumentTitleContextProps {
   title?: any;
@@ -32,6 +33,15 @@ export const DocumentTitleProvider: React.FC<{ addonBefore?: string; addonAfter?
   );
 };
 
+export const RemoteDocumentTitleProvider: React.FC = (props) => {
+  const ctx = useSystemSettings();
+  return (
+    <DocumentTitleProvider addonAfter={ctx?.data?.data?.title}>
+      {props.children}
+    </DocumentTitleProvider>
+  );
+};
+
 export const useDocumentTitle = () => {
   return useContext(DocumentTitleContext);
 };

package/src/i18n/i18n.ts

@@ -7,7 +7,7 @@ const log = require('debug')('i18next');
 export const i18n = i18next.createInstance();
 
 i18n.use(initReactI18next).init({
-  lng: localStorage.getItem('NOCOBASE_LANG') || 'en-US',
+  lng: localStorage.getItem('NOCOBASE_LOCALE') || 'en-US',
   // debug: true,
   defaultNS: 'client',
   // parseMissingKeyHandler: (key) => {
@@ -29,9 +29,9 @@ function setMomentLng(language) {
   moment.locale(lng);
 }
 
-setMomentLng(localStorage.getItem('NOCOBASE_LANG'));
+setMomentLng(localStorage.getItem('NOCOBASE_LOCALE'));
 
 i18n.on('languageChanged', (lng) => {
-  localStorage.setItem('NOCOBASE_LANG', lng);
+  localStorage.setItem('NOCOBASE_LOCALE', lng);
   setMomentLng(lng);
 });

package/src/locale/en_US.ts

@@ -280,5 +280,26 @@ export default {
   "Add card": "Add card",
   "edit title": "Edit Title",
   "Turn the page": "Turn the page",
-  "Others": "Others"
+  "Others": "Others",
+
+  // workflows
+  'Execution History': 'History',
+  'Parallel branch': 'Branch',
+
+  'Unsaved changes': 'Unsaved changes',
+  'Are you sure you don\'t want to save?': 'Are you sure you don\'t want to save?',
+
+  'Popup': 'Popup',
+  'Trigger workflow': 'Trigger workflow',
+  'Request API': 'Request API',
+  'Assign field values': 'Assign field values',
+  'Popup close method': 'Popup close method',
+  'Automatic close': 'Automatic close',
+  'Manually close': 'Manually close',
+  'After successful update': 'After successful update',
+  'Save record': 'Save record',
+  'After successful save': 'After successful save',
+  'Button background color': 'Button background color',
+  'Highlight': 'Highlight',
+  'Danger red': 'Danger red'
 }