需要去野外,没有

这个 neeto-fields-nano 能够管理动态添加的字段 (常被称作自定义字段)横跨neto应用程序. 纳米出口 页:1 @bigbinary/neeto-fields-frontend 国家防范机制一揽子计划 neeto-fields-engine 铁路发展引擎.

目录

1. 用主机应用程序开发
   • 发动机
     • 安装
     • 可自定义
   • 前端软件包
     • 安装
     • 发展指示
     • 构成部分
       • 田径台
       • 字段盘
       • 字段值控制器
       • 外地输入
       • 内置字段值输入
       • 字段删除提醒
     • 职能
       • 合并初始值
       • 变换值
     • 钩子
       • 使用奇异字段
       • 使用显示字段
       • 创建字段
       • 使用更新字段
       • 销毁字段
2. 出版指令

用主机应用程序开发

发动机

该引擎用于管理横跨neto产品的任何实体的字段.

安装

1. 将此行添加到您的应用程序的 Gemfile 中 :

   source "NEETO_GEM_SERVER_URL" do
   # ..existing gems
   
     gem 'neeto-fields-engine'
   end
   

2. 然后执行:

   bundle install
   

3. 将此行添加到您的应用程序 config/routes.rb 文件 :

   mount NeetoFieldsEngine::Engine, at: "/neeto_fields"
   

4. 运行以下命令以复制从引擎到主机的迁移 应用程序 :

   rails g neeto_fields_engine:install
   

5. 添加迁移到数据库 :

   bundle exec rails db:migrate
   

6. 使用下列方法在模型之间产生所需的关联 命令 :

   rails g neeto_fields_engine:associations
   

   这将促使用户输入两件事:

   1. 车主的名字.
   2. 资源模型名称.

   探索 拥有者信息( R) 页:1 细节.

7. 向您添加所需的权限 permissions.yml 文件 :

   • neeto_fields_engine.view_fields - 允许查看字段
   • neeto_fields_engine.manage_fields - 允许创建、更新、删除, 和重排字段
   • neeto_fields_engine.view_field_values - 允许查看字段值
   • neeto_fields_engine.manage_field_values - 允许创建、更新和 删除字段值

支持的权限

该引擎通过下列方式提供颗粒许可控制 权限 :

• neeto_fields_engine.view_fields - 允许用户查看字段
• neeto_fields_engine.manage_fields - 允许用户创建,更新, 删除并重排字段
• neeto_fields_engine.view_field_values - 允许用户查看字段 数值
• neeto_fields_engine.manage_field_values - 允许用户创建, 更新并删除字段值

策略召回

该引擎通过该引擎暴露出以下政策方法: FieldPolicy 类 :

• can_view_fields? - 检查用户能否查看字段
• can_manage_fields? - 检查用户是否能够管理字段
• can_view_field_values? - 检查用户能否查看字段值
• can_manage_field_values? - 检查用户能否管理字段值

这些方法被控制器的授权回调自动使用 并在需要时可在主机应用程序中被推翻.

自定义

参考 引擎自定义 学习 定制引擎的默认行为 .

前端软件包

安装

安装最新的 neetoFields nano 使用下列命令的软件包:

yarn add @bigbinary/neeto-fields-frontend

依赖性

neeto-fields-nano 拥有对等的依赖性,需要使用纳米 适当的。 使用以下命令安装对等依赖 :

yarn add uuid

发展指示

检查 前端软件包开发指南 用于开发前端软件包的分步指令.

构成部分

1. 联合国. FieldsDashboard

这个 FieldsDashboard 构成部分充当管理所有项目的仪表板 与自定义外地有关的业务。 它的运作不需要任何道具 默认,但您可以通过通过可选道具来自定义其行为.

道具

1. rowData: 代表仪表板内表格的行数据.

2. buildColumnData : 构建列数据的函数( 在 netoUI 表格中) 表格。 此函数获得 onDeleteClick, (中文(简体) ), onEditClick 回调和 defaultColumns 作为论据.

3. showOwnersInMenu: 接受布尔值。 设定为 true,田园 以分类格式(侧菜单)显示。 默认, 字段根据资源类型进行分类.

4. resourceType: 明确规定 resource_type 区域 在仪表板表中显示。 此道具预计当 showOwnersInMenu 设置为 true。 。 。 .

5. allowedKinds:指定允许创建的字段类型列表.

6. paneProps: 道具将传递到添加/编辑面板上。 它接受 随后.

   • children: 将在窗帘内制造的儿童部件.
   • validations: 表格输入字段在 children。 。 。 . validations 必须是带有字段名的对象 作为键和相应的yup验证方案作为值.
   • initialValues: formik 输入字段的初始值 children。它作为对象提供,字段名称作为密钥 相应的数值.
   • hideRequiredSwitch: 设置为布尔值时 true 隐藏切换 切换为 isRequried。 。 。 .
   • onMutationSuccess: 在成功时触发的召回函数 突变函数(创建,更新和删除).
   • lookupOptions: 指定可供查找的资源类型 lookup 字段.
   • allowSelectingAccessType:布尔值(默认) false) (中文(简体) ). 设定为 true,允许选择字段访问类型(everyone 或者说 restricted(中文(简体) ) 将外地能见度限制在具体组织的作用.

7. showStateFilter: 指定是显示还是隐藏的布尔值 状态过滤器.

8. fieldStatesTaxonomy: 指定要为 active 财务报告和审定财务报表 inactive 各州.

9. breadcrumbs: 指定要在仪表盘上显示的面包屑 页 次.

10. helpDescription: 要设置弹出式描述, 这可以是 字符串或自定义组件.

11. helpDocUrl: 指定关于字段的帮助文档的URL。 这个 URL将在 NoData 屏幕.

12. nameAliases: 此属性接受别名作为密钥值对 在标题和菜单栏中显示资源类型的名称.

13. headerTitle: 明确指定标题。 默认为"fields" 。 这个 并具体说明标题 HelpPopover。 。 。 .

14. resources:对于基于所有者的字段分类,提供一系列 对象为 id 财务报告和审定财务报表 name 每个所有者都有属性。 资源 基于类型分类,使用对象数组 label 财务报告和审定财务报表 value 属性代表每个资源类型.

15. headerSize: 明确指定页眉大小。 默认为"小" .

16. canManageFields: 高于默认权限的布尔值 检查管理字段。 未提供时,构成部分核对 neeto_fields_engine.manage_fields 全球道具允许.

17. onDeleteSuccess: 在成功时触发的召回函数 字段删除.

18. onReorderSuccess: 在成功时触发的召回函数 田地重排顺序.

    如未提供资源,按资源类型分类 菜单栏将获取所有资源类型。 对于基于所有者的分类,它 将获取并列出组织内的所有所有者.

使用量

1. 何时 Organization 是田园的主人.

   import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
   
   <FieldsDashboard
     allowedKinds={["text", "number", "lookup"]}
     buildColumnData={({ defaultColumns }) => [
       ...defaultColumns,
       {
         dataIndex: "isSystem",
         index: "isSystem",
         title: t("titles.systemField"),
         render: boolVal => (boolVal ? "Yes" : "No"),
       },
     ]}
     fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
     paneProps={{
       children: <HostSpecificInputFields />,
       validations: {
         hostSpecificInputName: validationSchema,
       },
       initialValues: {
         hostSpecificInputName: initialValue,
       },
        lookupOptions: [
        { label: "Contact", value: "contact" },
        { label: "Company", value: "company" },
        ],
     }}
     breadcrumbs={[
       {
         link: "/",
         text: "Home",
       },
       {
         link: "/",
         text: "Settings",
       },
     ]}
   />;
   

   使用情况 必须去德士克

2. 何时 Organization 不是田园的主人。 假设老板是 Project。 。 。 .

   import { FieldsDashboard } from "@bigbinary/neeto-fields-frontend";
   
   <FieldsDashboard
     allowedKinds={["text", "number", "lookup"]}
     resourceType="tasks"
     showOwnersInMenu
     fieldStatesTaxonomy={{ active: "Active", inactive: "Deactivated" }}
     paneProps={{
       children: <HostSpecificInputFields />,
       validations: {
         hostSpecificInputName: validationSchema,
       },
       initialValues: {
         hostSpecificInputName: initialValue,
       },
       lookupOptions: [
        { label: "Contact", value: "contact" },
        { label: "Company", value: "company" },
        ],
     }}
     breadcrumbs={[
       {
         link: "/",
         text: "Home",
       },
       {
         link: "/",
         text: "Settings",
       },
     ]}
   />;
   

   使用情况 需要论坛

2. 联合国. FieldsPane

这个 FieldsPane 组件处理 Add / Edit 外地业务.

道具

1. isOpen: 指定窗格打开/关闭状态的布尔状态.
2. onClose: 关闭窗格时要执行的函数.
3. resourceType:指定要通过 窗关上.
4. allowedKinds: 指定允许创建的字段类型列表.
5. children: 窗帘的儿童部分.
6. additionalValidations: Formik 字段的验证 children。 。 。 .
7. initialValues: Formik 字段的初始值 children。 。 。 .
8. selectedField: 编辑涉及的字段对象. 如果这样 道具被给出,相板将起到编辑相板的作用. 换作是添加相片.
9. hideRequiredSwitch: 指定是否隐藏 Is required 切换切换 在平板电脑上.
10. ownerId: 所有人的身份证明,以防所有人不是组织.
11. onMutationSuccess: 成功时触发的回调功能 的变异函数(创建、更新和删除).
12. additionalPayload: 用于发送外地创建中的额外数据 载荷。 当创建一个 新建区域.
13. lookupOptions: 指定支持的查找资源类型 字段。 当 lookup 包含在 allowedKinds。 。 。 .
14. allowSelectingAccessType:布尔值(默认) false) (中文(简体) ). 设定为 true,允许选择字段访问类型(everyone 或者说 restricted(中文(简体) ) 并具体说明受限制的组织作用.

使用量

import { FieldsPane } from "@biginary/neeto-fields-frontend";

const [fieldPaneOpen, setFieldPaneOpen] = useState(false);

<FieldsPane
  isOpen={fieldPaneOpen}
  allowedKinds={["text", "number","lookup"]}
  resourceType="users"
  lookupOptions={[
    { label: "Contact", value: "contact" },
    { label: "Company", value: "company" }
  ]}
  additionalValidations={{
    hostSpecificInputName: validationSchema,
  }}
  initialValues={{ hostSpecificInputName: initialValue }}
  onClose={() => setFieldPaneOpen(false)}
>
  <HostSpecificInputFields />
</FieldsPane>;

3个. FieldValuesContainer

这个 FieldValuesContainer 组件处理与 a 相关的字段值 特定资源.

道具

1. resourceType: 资源类型.
2. fieldValues: 与从 反应.
3. fields: 与资源类型相关的字段. 这是可选道具。 若为 未提供组件将在内部取回字段 .
4. resourceId:资源标识.
5. ownerId:主人的身份证. 只有当所有者不在时才需要这个道具 一个组织.
6. customComponents: 如果主机应用程序有额外内容 kind 其他 ,您可以指定要显示的组件 与该道具对应。 这需要 kind 名称为 键和组件提供回调函数作为值。 回电 函数可以预期 field 作为参数的对象.
7. className:为作型而取的班名.
8. showBorder:布尔值以指定是显示还是隐藏边框. 默认真实.
9. formRefs: 可用于访问Formik上下文的React Ref对象 键值对.
10. disabled:布尔值指定是否禁用所有字段.
11. isRequiredColumnName: 具有该值的列的名称 如果一个字段值是 required 说不说 默认是 isRequired 栏.
12. fieldClassName: 样式的分类名称 div 包含输入 字段.
13. onMutate:在突变上被触发的回调函数.
14. onMutationSuccess: 成功时触发的回调功能 的变异函数(创建、更新和删除).
15. blockNavigation: 指定是否封锁导航的布尔值 如果我们输入了未保存的字段值.
16. blockNavigationAlertProps:要传递给警报的道具. 它接受 随后.
    • title
    • message
    • submitButtonLabel
    • cancelButtonLabel
17. canManageFieldValues: 高于默认权限的布尔值 检查管理字段值。 未提供时,构成部分核对 neeto_fields_engine.manage_field_values 全球道具允许.

使用量

说这里的资源是 user。 。 。 .

import { FieldValuesContainer } from "@bigbinary/neeto-fields-frontend";

const formRefs = useRef({});
const queryClient = useQueryClient();

<FieldValuesContainer
  blockNavigation
  formRefs={formRefs}
  fieldValues={user.fieldValues} // We expect the user response from host's backend to send associated field_values with it.
  resourceId={user?.id}
  resourceType="users"
  onMutationSuccess={() =>
    queryClient.invalidateQueries({ queryKey: ["users"] })
  }
  onMutate={() => queryClient.setQueriesData({ queryKey: ["users"] }, modifier)}
  customComponents={{
    hostSpecificKindName: field => <HostSpecificInputFields />,
  }}
  blockNavigationProps={{
    title: "Changes not saved!",
    message: "You've not saved the changes made.",
  }}
/>;

4.四. FieldInputs

这个 FieldInputs 组件为获取的字段提供输入 UI.

道具

1. fields: 所有取出字段的数组.
2. customComponents:如果主机应用程序除此之外还有任何其他类型 ,您可以指定要显示相应的组件 使用这个道具 它以善良的名字为关键 组件将调用函数作为值。 回调函数可以 预计 field 对象.
3. formRefs: 可用于访问Formik上下文的React Ref对象 该表.
4. disabled:布尔值指定是否禁用所有字段.
5. isRequiredColumnName: 具有该值的列的名称 如果一个字段值是 required 说不说.

时间轴: 说明:

要初始化此窗体字段的值, 您需要使用 mergeInitialValues 函数.

要从窗体格式提交值, 您需要使用 transformValues 要抓取的函数 正确的数据来自 neto-fields.

使用量

import {
  FieldInputs,
  useFetchFields,
  neetoFieldsUtils,
} from "@bigbinary/neeto-fields-frontend";

const formRef = useRef();

const HostForm = () => {
  const {
    data: { fields },
  } = useFetchFields({
    resourceType: "users",
  });

  const initialValues = neetoFieldsUtils.mergeInitialValues({
    initialValues: INITIAL_VALUES,
    fields,
  });
  return (
    <Form
      formikProps={{
        initialValues,
        validationSchema: VALIDATION_SCHEMA,
        onSubmit: values =>
          onSubmit(neetoFieldsUtils.transformValues({ values, fields })),
        enableReinitialize: true,
      }}
    >
      {/* Other host specific input fields */}

      <FieldInputs formRef={formRef} fields={fields} />

      <Button type="submit" label="Submit" />
    </Form>
  );
};

5 (韩语). InlineFieldValueInput

这个 InlineFieldValueInput 组件使字段值输入UI.

道具

1. fields: 所有取出字段的数组.
2. fieldValues: 与资源相关的字段值.
3. resourceType: 资源类型.
4. resourceId:资源标识.
5. ownerId: 所有人的身份证明,以防所有人不是组织.
6. onMutate: 突变时触发的回调函数
7. onMutationSuccess: 成功时触发的回调功能 具有字段价值的变异函数.
8. canManageFieldValues: 高于默认权限的布尔值 检查管理字段值。 未提供时,构成部分核对 neeto_fields_engine.manage_field_values 全球道具允许.

使用量

通常将此用作内部编辑字段值的组件 图表。 这个例子表明,建筑工程的其中一个用途是: columnData 用于表格 在单元格中包含可内置编辑字段值输入.

const buildColumnDataForFields = (
  fields,
  onFieldValueUpdateSuccess,
  canWriteForm
) =>
  fields.map(field => ({
    dataIndex: "field.id",
    key: field.id,
    title: field.name,
    width: 250,
    render: (_, user) => (
      <InlineFieldValueInput
        {...{ field }}
        fieldValues={user.fieldValues}
        resourceId={user.id}
        resourceType="users"
        onMutationSuccess={onFieldValueUpdateSuccess}
        canManageFieldValues={canWriteForm}
      />
    ),
  }));

6. 国家. FieldDeleteAlert

这个 FieldDeleteAlert 组件处理删除字段上的操作。 它接受 下列道具:

道具

1. selectedField:需要删除的字段.
2. ownerId: 所有人的身份证明,以防所有人不是组织.
3. resourceTypeName: 资源类型.
4. isDeleteAlertOpen: 指定提醒是否打开的布尔状态 .
5. isDeleting:布尔状态,表示是否正在删除字段 .
6. handleDelete: 负责删除指定的回调函数 字段.
7. handleAlertClose: 关闭时要执行的回调函数 警报.

使用量

import { FieldDeleteAlert } from "@biginary/neeto-fields-frontend";

const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false);

<FieldDeleteAlert
  selectedField={field}
  ownerId={formId}
  resourceTypeName="submission"
  isDeleteAlertOpen={isDeleteAlertOpen}
  isDeleting={isDeleting}
  handleDelete={handleDelete}
  handleAlertClose={() => setIsDeleteAlertOpen(false)}
/>;

职能

软件包导出 neetoFieldsUtils,其中包含两个工具 函数.

1. 联合国. neetoFieldsUtils.mergeInitialValues

此函数为 Folmik 窗体构建初始值,以包围 <FieldInputs /> 组件.

参数

• initialValues: 不考虑初始值对象 <FieldInputs />
• fields: 所有取出字段的数组.

使用量

import { useFetchFields } from "@bigbinary/neeto-fields-frontend";

const {
  data: { fields },
} = useFetchFields({ resourceType: "users" });

const initialValues = neetoFieldsUtils.mergeInitialValues({
  initialValues: FORMIK_INITIAL_VALUES,
  fields,
});

2. 联合国. neetoFieldsUtils.transformValues

此函数将 Formik 形式值转换并构建 values 对象 包括来自 <FieldInputs />。此已转换对象可以传递 页:1 onSubmit 函数.

参数

• values: Formik 形成值.

使用量

import { useFetchFields } from "@bigbinary/neeto-fields-frontend";

const {
  data: { fields },
} = useFetchFields({ resourceType: "users" });

<Form
  formikProps={{
    initialValues,
    validationSchema: VALIDATION_SCHEMA,
    onSubmit: values =>
      onSubmit(neetoFieldsUtils.transformValues({ values, fields })),
    enableReinitialize: true,
  }}
>
  {/* Form's children */}
</Form>;

钩子

1. 联合国. useFetchFields

这是回收所有田园的回放查询钩 .

参数

• resourceType: 要获取字段的资源 类型.
• ownerId: 所有人的身份证明,以防所有人不是组织.

使用量

const {
  data: { fields, count, activeFieldsCount, inactiveFieldsCount },
} = useFetchFields({
  resourceType: "users",
  ownerId: "ownerId",
});

2. 联合国. useShowField

这是用于获取一个字段细节的回放查询钩 .

参数

• fieldId:获取细节的字段标识.
• ownerId: 所有人的身份证明,以防所有人不是组织.

使用量

const {
  data: { field },
} = useShowField({ fieldId, ownerId });

3个. useCreateField

这是创建字段的回放查询钩 .

使用量

const { mutate: create } = useCreateField();
const payload = {
  field: { name, kind, resourceType, ownerId, displayOrder, data },
};
create(payload);

4.四. useUpdateField

这是用于更新字段的 React 查询钩 .

使用量

const { mutate: update } = useUpdateField();
const payload = {
  field: { name, kind, resourceType, ownerId, displayOrder, data },
};
update({ fieldId, payload });

5 (韩语). useDestroyField

这是删除字段的回放查询钩 .

使用量

const { mutate: delete } = useDestroyField();
delete({ fieldId })

通过 ownerId 也与有效载荷,以防所有者不是 组织.

出版指令

咨询 构建和释放软件包 关于如何出版的详细指南.

一体化