admin-on-rest - 如何在 admin-on-rest 中创建可搜索的添加引用按钮/操作？

Question

考虑一个案例，我有一个功能性的 JSON 后端，以及 admin-on-rest 资源 company , user和 company_user .

数据如下

公司

id

姓名

地址
...等等。

用户

id

姓名

电话

地址
...等等。

公司_用户

id

company_id(引用公司)

user_id(引用用户)

位置
...等等。

为 company_user 设置单独的顶级资源 View 非常容易。资源类型；但它真的应该是每个用户和每个公司都可以编辑的，最好是在 user 的选项卡上。 ，或 company资源 View 。

于是问题来了:如何为 user 创建一个选项卡资源，我可以在这里列出当前 company -references ( company_user 行)，但在同一个选项卡中，我需要一种理智的方式来执行以下功能:

搜索该用户当前未提及的所有公司(当然有一个 API 调用)；

向 company_user 添加一行收集和;

刷新标签

Answer 1

处理这种关系的最简单方法是在模型上提供一个额外的字段，作为关系的表示。

例如，从一个用户我们需要看到他的公司:公开一个新字段user.company_ids .
此字段不必在数据库中，您的 API 或代理可以在此字段中列出相关的公司 ID，并且对于写入请求，使用它来创建、更改或删除关系。

一旦实现了这个字段，admin-on-rest 就很容易配置。
我做了一个完整的工作片段:https://codesandbox.io/s/r04y8rn96p

首先，编写您的顶级资源:

<Admin
    authClient={authClient}
    restClient={restClient}
    title="Example Admin"
    locale="en"
    messages={messages}
  >
    <Resource
      name="companies"
      list={CompanyList}
      create={CompanyCreate}
      edit={CompanyEdit}
      show={CompanyShow}
      remove={Delete}
      icon={CompanyIcon}
    />
    <Resource
      name="users"
      list={UserList}
      create={UserCreate}
      edit={UserEdit}
      remove={Delete}
      icon={UserIcon}
      show={UserShow}
    />
    <Resource
      name="company_user"
      icon={CompanyUserIcon}
      list={CompanyUserList}
      create={CompanyUserCreate}
      show={CompanyUserShow}
      remove={Delete}
    />
</Admin>

然后，您可以使用 ReferenceArrayInput对于额外字段上的用户模型，就像一对多关系一样。

export const UserEdit = ({ ...props }) => (
  <Edit title={<UserTitle />} {...props}>
    <TabbedForm>
      <FormTab label="User Infos">
        <TextInput source="name" />
        <DateInput source="published_at" defaultValue={() => new Date()} />
        <TextInput source="company_ids" />
      </FormTab>
      <FormTab label="Companies">
        <ReferenceArrayInput source="company_ids" reference="companies">
          <SelectArrayInput optionText="title" />
        </ReferenceArrayInput>
      </FormTab>
    </TabbedForm>
  </Edit>
);

由于这个想法是将关系模拟到一个额外的字段中，您可以从后端(最佳选择)或前端通过 restClient 处理此字段。 .这是只读关系的虚拟示例:

// It's better to implement these rules on the backend
const improvedRestClient = (type, resource, params) => {
  return restClient(type, resource, params).then((response) => {
    // Inject company_ids into user
    if (type === 'GET_ONE' && resource === 'users') {
      return restClient('GET_LIST', 'company_user', defaultOptions).then(({ data: companyUsers }) => {
        const user = response.data;

        return {
          data: {
            ...user,
            company_ids: companyUsers
              .filter(item => item.user_id === user.id)
              .map(item => item.company_id),
          },
        }
      });
    }

    // Inject user_ids into company
    if (type === 'GET_ONE' && resource === 'companies') {
      return restClient('GET_LIST', 'company_user', defaultOptions).then(({ data: companyUsers }) => {
        const company = response.data;

        return {
          data: {
            ...company,
            user_ids: companyUsers
              .filter(item => item.company_id === company.id)
              .map(item => item.user_id),
          },
        }
      });
    }

    return response;
  });
};