React admin import button referenceManyField?

user_15295687 0
Viewed 226

I want add an import button for my react admin application.

This import will create records related to another record. For instance, I have a list of contracts that belong to a company.

I saw this repo: https://github.com/benwinding/react-admin-import-csv

And I was wondering if there was something similar for a referenceManyField.

react-admin
1 Answers

I found a hacky solution for this in case anyone is interested.

Instead of using a ReferenceManyField I used a List inside a Show component.

To be able to do this I had to override the props of the list to specify the resource that I wanted to reference.

I also had to pass the show item id as a prop of the list component and filter the list by the id.

let companyId = '';

const ListActions = (props) => {
  const { className } = props;
  return (
    <TopToolbar className={className}>
       <ImportButton {...props} />
    </TopToolbar>
  );
};

export const ContractRow = ({ contractCompanyId }) => {
  companyId = contractCompanyId;
  const fakeProps: ListProps = {
    basePath: '/contracts',
    hasCreate: false,
    hasEdit: false,
    hasList: true,
    hasShow: false,
    location: { pathname: '/', search: '', hash: '', state: undefined },
    match: { path: '/', url: '/', isExact: true, params: {} },
    options: {},
    permissions: null,
    resource: 'contracts',
  };
 
  return (
    <List
      {...fakeProps}
      filter={{ _company_id: contractCompanyId }}
      actions={<ListActions />}
    >
      <Datagrid className={classes.insideTable}>
        <TextField source="name" />
      </Datagrid>
    </List>
  );
};
user_152956870
Related