feat: add Person in demo

packages/demo/src/App.tsx

@@ -25,6 +25,10 @@
   SimpleShowLayout,
   DataProvider,
   ReferenceArrayField,
+  AutocompleteArrayInput,
+  ReferenceArrayInput,
+  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,6 +96,15 @@
         >
           <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>
     </Create>
   );
@@ -160,6 +185,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);
 
@@ -186,6 +264,13 @@
       edit={CityEdit}
       create={CityCreate}
     />
+    <Resource
+      name="Person"
+      list={PersonList}
+      show={PersonShow}
+      edit={PersonEdit}
+      create={PersonCreate}
+    />
   </Admin>
 );
 

packages/demo/src/schema.ts

@@ -29,7 +29,7 @@
       country: { type: "String", default: "France" },
     },
     Person: {
-      name: { type: "String" },
+      name: { type: "String", required: true },
       email: { type: "String" },
     },
   },