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

package/src/api-client/APIClient.ts

@@ -1,124 +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-Locale'] = localStorage.getItem('NOCOBASE_LANG');
-      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/hooks/index.ts

@@ -2,6 +2,7 @@ import { useField, useFieldSchema, useForm } from '@formily/react';
 import { message, Modal } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
+import { useAPIClient } from '../../api-client';
 import { useCollection } from '../../collection-manager';
 import { useRecord } from '../../record-provider';
 import { useActionContext, useCompile } from '../../schema-component';
@@ -54,6 +55,50 @@ const filterValue = (value) => {
   return obj;
 };
 
+function getFormValues(filterByTk, field, form, fieldNames, getField, resource) {
+  let values = {};
+  for (const key in form.values) {
+    if (fieldNames.includes(key)) {
+      const collectionField = getField(key);
+      if (filterByTk) {
+        if (collectionField.interface === 'subTable') {
+          values[key] = form.values[key];
+          continue;
+        }
+        if (field.added && !field.added.has(key)) {
+          continue;
+        }
+      }
+      const items = form.values[key];
+      if (collectionField.interface === 'linkTo') {
+        const targetKey = collectionField.targetKey || 'id';
+        if (resource instanceof TableFieldResource) {
+          if (Array.isArray(items)) {
+            values[key] = filterValue(items);
+          } else if (items && typeof items === 'object') {
+            values[key] = filterValue(items);
+          } else {
+            values[key] = items;
+          }
+        } else {
+          if (Array.isArray(items)) {
+            values[key] = items.map((item) => item[targetKey]);
+          } else if (items && typeof items === 'object') {
+            values[key] = items[targetKey];
+          } else {
+            values[key] = items;
+          }
+        }
+      } else {
+        values[key] = form.values[key];
+      }
+    } else {
+      values[key] = form.values[key];
+    }
+  }
+  return values;
+}
+
 export const useCreateActionProps = () => {
   const form = useForm();
   const { field, resource, __parent } = useBlockRequestContext();
@@ -64,6 +109,7 @@ export const useCreateActionProps = () => {
   const actionField = useField();
   const { fields, getField } = useCollection();
   const compile = useCompile();
+  const filterByTk = useFilterByTk();
   return {
     async onClick() {
       const fieldNames = fields.map((field) => field.name);
@@ -72,37 +118,7 @@ export const useCreateActionProps = () => {
       if (!skipValidator) {
         await form.submit();
       }
-      let values = {};
-      for (const key in form.values) {
-        if (fieldNames.includes(key)) {
-          const items = form.values[key];
-          const collectionField = getField(key);
-          if (collectionField.interface === 'linkTo') {
-            const targetKey = collectionField.targetKey || 'id';
-            if (resource instanceof TableFieldResource) {
-              if (Array.isArray(items)) {
-                values[key] = filterValue(items);
-              } else if (items && typeof items === 'object') {
-                values[key] = filterValue(items);
-              } else {
-                values[key] = items;
-              }
-            } else {
-              if (Array.isArray(items)) {
-                values[key] = items.map((item) => item[targetKey]);
-              } else if (items && typeof items === 'object') {
-                values[key] = items[targetKey];
-              } else {
-                values[key] = items;
-              }
-            }
-          } else {
-            values[key] = form.values[key];
-          }
-        } else {
-          values[key] = form.values[key];
-        }
-      }
+      const values = getFormValues(filterByTk, field, form, fieldNames, getField, resource);
       actionField.data = field.data || {};
       actionField.data.loading = true;
       await resource.create({
@@ -186,6 +202,64 @@ export const useCustomizeUpdateActionProps = () => {
   };
 };
 
+export const useCustomizeRequestActionProps = () => {
+  const apiClient = useAPIClient();
+  const history = useHistory();
+  const filterByTk = useFilterByTk();
+  const actionSchema = useFieldSchema();
+  const compile = useCompile();
+  const form = useForm();
+  const { fields, getField } = useCollection();
+  const { field, resource } = useBlockRequestContext();
+  return {
+    async onClick() {
+      const { skipValidator, onSuccess, requestSettings } = actionSchema?.['x-action-settings'] ?? {};
+      if (!requestSettings['url']) {
+        return;
+      }
+      if (skipValidator === false) {
+        await form.submit();
+      }
+
+      const headers = requestSettings['headers'] ? JSON.parse(requestSettings['headers']) : {};
+      const params = requestSettings['params'] ? JSON.parse(requestSettings['params']) : {};
+      const data = requestSettings['data'] ? JSON.parse(requestSettings['data']) : {};
+      const methods = ['POST', 'PUT', 'PATCH'];
+      if (actionSchema['x-action'] === 'customize:form:request' && methods.includes(requestSettings['method'])) {
+        const fieldNames = fields.map((field) => field.name);
+        const values = getFormValues(filterByTk, field, form, fieldNames, getField, resource);
+        Object.assign(data, values);
+      }
+      await apiClient.request({
+        ...requestSettings,
+        headers,
+        params,
+        data,
+      });
+
+      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));
+      }
+    },
+  };
+};
+
 export const useUpdateActionProps = () => {
   const form = useForm();
   const filterByTk = useFilterByTk();
@@ -204,44 +278,7 @@ export const useUpdateActionProps = () => {
         await form.submit();
       }
       const fieldNames = fields.map((field) => field.name);
-      let values = {};
-      for (const key in form.values) {
-        if (fieldNames.includes(key)) {
-          const collectionField = getField(key);
-          if (collectionField.interface === 'subTable') {
-            values[key] = form.values[key];
-            continue;
-          }
-          if (field.added && !field.added.has(key)) {
-            continue;
-          }
-          const items = form.values[key];
-          if (collectionField.interface === 'linkTo') {
-            const targetKey = collectionField.targetKey || 'id';
-            if (resource instanceof TableFieldResource) {
-              if (Array.isArray(items)) {
-                values[key] = filterValue(items);
-              } else if (items && typeof items === 'object') {
-                values[key] = filterValue(items);
-              } else {
-                values[key] = items;
-              }
-            } else {
-              if (Array.isArray(items)) {
-                values[key] = items.map((item) => item[targetKey]);
-              } else if (items && typeof items === 'object') {
-                values[key] = items[targetKey];
-              } else {
-                values[key] = items;
-              }
-            }
-          } else {
-            values[key] = form.values[key];
-          }
-        } else {
-          values[key] = form.values[key];
-        }
-      }
+      const values = getFormValues(filterByTk, field, form, fieldNames, getField, resource);
       actionField.data = field.data || {};
       actionField.data.loading = true;
       await resource.update({

package/src/collection-manager/Configuration/AddFieldAction.tsx

@@ -94,6 +94,24 @@ const useCreateCollectionField = () => {
           }),
         );
       }
+      function recursiveChildren(children = [], prefix = 'children') {
+        children.forEach((item, index) => {
+          const itemOptions = item.uiSchema?.enum?.slice() || [];
+          form.setValuesIn(
+            `${prefix}[${index}].uiSchema.enum`,
+            itemOptions.map((option) => {
+              return {
+                value: uid(),
+                ...option,
+              };
+            }),
+          );
+          recursiveChildren(item.children, `${prefix}[${index}].children`);
+        });
+      }
+
+      recursiveChildren(form?.values?.children);
+
       if (form?.values?.interface === 'linkTo' && title) {
         form.setValuesIn('reverseField.uiSchema.title', title);
       }

package/src/collection-manager/Configuration/EditFieldAction.tsx

@@ -83,6 +83,25 @@ const useUpdateCollectionField = () => {
           };
         }),
       );
+      
+      function recursiveChildren(children = [], prefix = 'children') {
+        children.forEach((item, index) => {
+          const itemOptions = item.uiSchema?.enum?.slice() || [];
+          form.setValuesIn(
+            `${prefix}[${index}].uiSchema.enum`,
+            itemOptions.map((option) => {
+              return {
+                value: uid(),
+                ...option,
+              };
+            }),
+          );
+          recursiveChildren(item.children, `${prefix}[${index}].children`);
+        });
+      }
+
+      recursiveChildren(form?.values?.children);
+      
       await run();
       await refreshCM();
     },

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

@@ -301,5 +301,15 @@ export default {
   'After successful save': 'After successful save',
   'Button background color': 'Button background color',
   'Highlight': 'Highlight',
-  'Danger red': 'Danger red'
+  'Danger red': 'Danger red',
+  'Custom request': 'Custom request',
+  'Request settings': 'Request settings',
+  'Request URL': 'Request URL',
+  'Request method': 'Request method',
+  'Request query parameters': 'Request query parameters(JSON)',
+  'Request headers': 'Request headers(JSON)',
+  'Request body': 'Request body(JSON)',
+  'Request success': 'Request success',
+  'Invalid JSON format': 'Invalid JSON format',
+  'After successful request': 'After successful request'
 }

package/src/locale/zh_CN.ts

@@ -432,6 +432,34 @@ export default {
   'Triggered only if one of the selected fields changes. If unselected, it means that it will be triggered when any field changes. When record is added or deleted, any field is considered to have been changed.': '只有被选中的某个字段发生变动时才会触发。如果不选择，则表示任何字段变动时都会触发。新增或删除数据时，任意字段都被认为发生变动。',
   'Only triggers when match conditions': '满足以下条件才触发',
 
+  'Schedule event': '定时任务',
+  'Trigger mode': '触发模式',
+  'Based on certain date': '自定义时间',
+  'Based on date field of collection': '根据数据表时间字段',
+  'Starts on': '开始于',
+  'Ends on': '结束于',
+  'Exactly at': '当时',
+  'Repeat mode': '重复模式',
+  'Repeat limit': '重复次数',
+  'No limit': '不限',
+  'Seconds': '秒',
+  'Minutes': '分钟',
+  'Hours': '小时',
+  'Days': '天',
+  'Months': '月',
+
+  'No repeat': '不重复',
+  'Every': '每',
+
+  'By minute': '按分钟',
+  'By hour': '按小时',
+  'By date': '按日(月)',
+  'By month': '按月',
+  'By day of week': '按天(周)',
+
+  'By field': '数据表字段',
+  'By custom date': '自定义时间',
+
   'End': '结束',
 
   'Trigger context': '触发数据',
@@ -508,5 +536,15 @@ export default {
   'After clicking the custom button, the following fields of the current record will be saved according to the following form.': '点击当前自定义按钮时，当前数据以下字段将按照以下表单保存。',
   'Button background color': '按钮颜色',
   'Highlight': '高亮',
-  'Danger red': '红色'
+  'Danger red': '红色',
+  'Custom request': '自定义请求',
+  'Request settings': '请求设置',
+  'Request URL': '请求地址',
+  'Request method': '请求方法',
+  'Request query parameters': '请求查询参数(JSON格式)',
+  'Request headers': '请求头参数(JSON格式)',
+  'Request body': '请求体(JSON格式)',
+  'Request success': '请求成功',
+  'Invalid JSON format': '非法JSON格式',
+  'After successful request': '请求成功之后'
 }

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

@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useActionContext, useCompile, useDesignable } from '../..';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
+import { requestSettingsSchema } from './utils';
 
 const MenuGroup = (props) => {
   const fieldSchema = useFieldSchema();
@@ -15,8 +16,18 @@ const MenuGroup = (props) => {
     'customize:popup': t('Popup'),
     'customize:update': t('Update record'),
     'customize:save': t('Save record'),
+    'customize:table:request': t('Custom request'),
+    'customize:form:request': t('Custom request'),
   };
-  if (!['customize:popup', 'customize:update', 'customize:save'].includes(actionType)) {
+  if (
+    ![
+      'customize:popup',
+      'customize:update',
+      'customize:save',
+      'customize:table:request',
+      'customize:form:request',
+    ].includes(actionType)
+  ) {
     return <>{props.children}</>;
   }
   return <Menu.ItemGroup title={`${t('Customize')} > ${actionTitles[actionType]}`}>{props.children}</Menu.ItemGroup>;
@@ -162,6 +173,23 @@ export const ActionDesigner = (props) => {
             }}
           />
         )}
+        {isValid(fieldSchema?.['x-action-settings']?.requestSettings) && (
+          <SchemaSettings.ActionModalItem
+            title={t('Request settings')}
+            schema={requestSettingsSchema}
+            initialValues={fieldSchema?.['x-action-settings']?.requestSettings}
+            onSubmit={(requestSettings) => {
+              fieldSchema['x-action-settings']['requestSettings'] = requestSettings;
+              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')}
@@ -218,6 +246,8 @@ export const ActionDesigner = (props) => {
               {
                 'customize:save': t('After successful save'),
                 'customize:update': t('After successful update'),
+                'customize:table:request': t('After successful request'),
+                'customize:form:request': t('After successful request'),
               }[actionType]
             }
             initialValues={fieldSchema?.['x-action-settings']?.['onSuccess']}
@@ -227,6 +257,8 @@ export const ActionDesigner = (props) => {
                 title: {
                   'customize:save': t('After successful save'),
                   'customize:update': t('After successful update'),
+                  'customize:table:request': t('After successful request'),
+                  'customize:form:request': t('After successful request'),
                 }[actionType],
                 properties: {
                   successMessage: {

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

@@ -0,0 +1,68 @@
+import type { ISchema } from '@formily/react';
+
+const validateJSON = {
+  validator: `{{(value, rule)=> {
+    if (!value) {
+      return '';
+    }
+    try {
+      const val = JSON.parse(value);
+      if(!isNaN(val)) {
+        return false;
+      }
+      return true;
+    } catch(error) {
+      console.error(error);
+      return false;
+    }
+  }}}`,
+  message: '{{t("Invalid JSON format")}}',
+};
+
+export const requestSettingsSchema: ISchema = {
+  type: 'object',
+  properties: {
+    url: {
+      type: 'string',
+      title: '{{t("Request URL")}}',
+      required: true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+    },
+    method: {
+      type: 'string',
+      title: '{{t("Request method")}}',
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      default: 'POST',
+      enum: [
+        { label: 'POST', value: 'POST' },
+        { label: 'GET', value: 'GET' },
+        { label: 'PUT', value: 'PUT' },
+        { label: 'PATCH', value: 'PATCH' },
+        { label: 'DELETE', value: 'DELETE' },
+      ],
+    },
+    headers: {
+      type: 'string',
+      title: '{{t("Request headers")}}',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input.TextArea',
+      'x-validator': validateJSON,
+    },
+    params: {
+      type: 'string',
+      title: '{{t("Request query parameters")}}',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input.TextArea',
+      'x-validator': validateJSON,
+    },
+    data: {
+      type: 'string',
+      title: '{{t("Request body")}}',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input.TextArea',
+      'x-validator': validateJSON,
+    },
+  },
+};

package/src/schema-component/antd/date-picker/util.ts

@@ -1,5 +1,6 @@
-import { formatMomentValue, momentable } from '@formily/antd/lib/__builtins__';
+import { formatMomentValue } from '@formily/antd/lib/__builtins__';
 import type { DatePickerProps } from 'antd/lib/date-picker';
+import moment from 'moment';
 
 export const getDefaultFormat = (props: DatePickerProps & { dateFormat: string; timeFormat: string }) => {
   if (props.format) {
@@ -30,8 +31,8 @@ export const mapDateFormat = function () {
     return {
       ...props,
       format: format,
-
-      value: momentable(props.value, format === 'YYYY-wo' ? 'YYYY-w' : format),
+      value: props.value && moment(props.value).isValid() ? moment(props.value) : undefined,
+      // value: momentable(props.value, format === 'YYYY-wo' ? 'YYYY-w' : format),
       onChange: (value: moment.Moment | moment.Moment[]) => {
         if (onChange) {
           onChange(formatMomentValue(value, format));

package/src/schema-initializer/SchemaInitializer.tsx

@@ -9,7 +9,7 @@ import {
   SchemaInitializerButtonProps,
   SchemaInitializerItemComponent,
   SchemaInitializerItemOptions,
-  SchemaInitializerItemProps
+  SchemaInitializerItemProps,
 } from './types';
 
 const defaultWrap = (s: ISchema) => s;
@@ -129,7 +129,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
             ...style,
           }}
           {...others}
-          icon={<Icon type={icon as string}/>}
+          icon={<Icon type={icon as string} />}
         >
           {compile(props.children || props.title)}
         </Button>