feat: implement relation edition in provider

packages/demo/src/App.tsx

@@ -16,6 +16,8 @@
   SimpleForm,
   TextInput,
   NumberInput,
+  ReferenceInput,
+  AutocompleteInput,
   EditProps,
   ShowProps,
   ListProps,
@@ -23,4 +25,5 @@
   SimpleShowLayout,
   DataProvider,
   ReferenceArrayField,
+  AutocompleteArrayInput,
   ReferenceArrayInput,
@@ -26,5 +29,6 @@
   ReferenceArrayInput,
-  AutocompleteArrayInput,
+  FunctionField,
+  SingleFieldList,
 } from "react-admin";
 import { client } from "@logilab/cwclientlibjs";
 import { createDataProvider } from "ra-cubicweb/dist";
@@ -28,6 +32,7 @@
 } from "react-admin";
 import { client } from "@logilab/cwclientlibjs";
 import { createDataProvider } from "ra-cubicweb/dist";
+import Chip from "@material-ui/core/Chip";
 
 import { schema } from "./schema";
 import { formHelpers } from "./formHelpers";
@@ -41,6 +46,17 @@
       <ReferenceField label="City" link="show" reference="City" source="is_in">
         <TextField source="name" />
       </ReferenceField>
+      <ReferenceArrayField
+        label="Director"
+        reference="Person"
+        source="director"
+      >
+        <SingleFieldList>
+          <FunctionField<{ id: string; name: string }>
+            render={(person) => person && <Chip label={`${person.name}`} />}
+          />
+        </SingleFieldList>
+      </ReferenceArrayField>
       <NumberField source="longitude" />
       <NumberField source="latitude" />
     </SimpleShowLayout>
@@ -80,10 +96,10 @@
         <NumberInput {...inputProps("latitude")} />
         <NumberInput {...inputProps("longitude")} />
         <TextInput {...inputProps("postal_address")} />
-        <ReferenceArrayInput
+        <ReferenceInput
           label="City"
           source="is_in"
           reference="City"
           sort={{ field: "name", order: "ASC" }}
           filterToQuery={(text: string) => ({ name: text })}
         >
@@ -84,9 +100,18 @@
           label="City"
           source="is_in"
           reference="City"
           sort={{ field: "name", order: "ASC" }}
           filterToQuery={(text: string) => ({ name: text })}
         >
+          <AutocompleteInput optionText="name" />
+        </ReferenceInput>
+        <ReferenceArrayInput
+          label="Director"
+          source="director"
+          reference="Person"
+          sort={{ field: "name", order: "ASC" }}
+          filterToQuery={(text: string) => ({ name: text })}
+        >
           <AutocompleteArrayInput optionText="name" />
         </ReferenceArrayInput>
       </SimpleForm>
@@ -169,6 +194,59 @@
   </Show>
 );
 
+const PersonList = (props: ListProps) => (
+  <List {...props}>
+    <Datagrid rowClick="show">
+      <TextField source="id" />
+      <TextField source="name" />
+      <TextField source="email" />
+    </Datagrid>
+  </List>
+);
+
+const PersonEdit = (props: ListProps) => {
+  const inputProps = formHelpers["Person"].getInputProps;
+  return (
+    <Edit {...props}>
+      <SimpleForm>
+        <TextInput {...inputProps("name")} />
+        <TextInput {...inputProps("email")} />
+      </SimpleForm>
+    </Edit>
+  );
+};
+
+const PersonCreate = (props: ListProps) => {
+  const inputProps = formHelpers["Person"].getInputProps;
+  return (
+    <Create {...props}>
+      <SimpleForm>
+        <TextInput {...inputProps("name")} />
+        <TextInput {...inputProps("email")} />
+      </SimpleForm>
+    </Create>
+  );
+};
+
+const PersonShow = (props: ShowProps) => (
+  <Show {...props}>
+    <SimpleShowLayout>
+      <TextField source="id" />
+      <TextField source="name" />
+      <TextField source="email" />
+      <ReferenceArrayField
+        label="Museum"
+        reference="Museum"
+        source="reverse_director"
+      >
+        <Datagrid rowClick="show">
+          <TextField source="name" />
+        </Datagrid>
+      </ReferenceArrayField>
+    </SimpleShowLayout>
+  </Show>
+);
+
 const httpClient = new client.CwSimpleHttpClient("http://localhost:8080", true);
 const rqlClient = new client.CwRqlClient(httpClient);
 
@@ -195,6 +273,13 @@
       edit={CityEdit}
       create={CityCreate}
     />
+    <Resource
+      name="Person"
+      list={PersonList}
+      show={PersonShow}
+      edit={PersonEdit}
+      create={PersonCreate}
+    />
   </Admin>
 );