feat(ui): add option for rendering the relationship field as list drawer (#11553)
### What? This PR adds the ability to use the ListDrawer component for selecting related collections for the relationship field instead of the default drop down interface. This exposes the advanced filtering options that the list view provides and provides a good interface for searching for the correct relationship when the workflows may be more complicated. I've added an additional "selectionType" prop to the relationship field admin config that defaults to "dropdown" for compatability with the existing implementation but "drawer" can be passed in as well which enables using the ListDrawer for selecting related components. ### Why? Adding the ability to search through the list view enables advanced workflows or handles edge cases when just using the useAsTitle may not be informative enough to find the related record that the user wants. For example, if we have a collection of oscars nominations and are trying to relate the nomination to the person who recieved the nomination there may be multiple actors with the same name (Michelle Williams, for example: [https://www.imdb.com/name/nm0931329/](https://www.imdb.com/name/nm0931329/), [https://www.imdb.com/name/nm0931332/](https://www.imdb.com/name/nm0931332/)). It would be hard to search through the current dropdown ui to choose the correct person, but in the list view the user could use other fields to identify the correct person such as an imdb id, description, or anything else they have in the collection for that person. Other advanced workflows could be if there are multiple versions of a record in a collection and the user wants to select the most recent one or just anything where the user needs to see more details about the record that they are setting up the relationship to. ### How? This implementation just re-uses the useListDrawer hook and the ListDrawer component so the code changes are pretty minimal. The main change is a new onListSelect handler that gets passed into the ListDrawer and handles updating the value in the field when a record is selected in the ListDrawer. There were also a two things that I didn't implement as they would require broader code changes 1) Bulk select from the ListDrawer when a relationship is hasMany - when using bulkSelect in the list drawer the relatedCollection doesn't get returned so this doesn't work for polymorphic relationships. Updating this would involve changing the useListDrawer hook 2) Hide values that are already selected from the ListDrawer - potentially possible by modifying the filterOptions and passing in an additional filter but honestly it may not be desired behaviour to hide values from the ListDrawer as this could be confusing for the user if they don't see records that they are expected to see (maybe if anything make them unselectable and indicate that they are disabled). Currently if an already selected value gets selected the selected value gets replaced by the new value https://github.com/user-attachments/assets/fee164da-4270-4612-9304-73ccf34ccf69 --------- Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
This commit is contained in:
@@ -1312,6 +1312,29 @@ export interface RelationshipField {
|
||||
| null;
|
||||
relationToRow?: (string | null) | RowField;
|
||||
relationToRowMany?: (string | RowField)[] | null;
|
||||
relationshipDrawer?: (string | null) | TextField;
|
||||
relationshipDrawerReadOnly?: (string | null) | TextField;
|
||||
polymorphicRelationshipDrawer?:
|
||||
| ({
|
||||
relationTo: 'text-fields';
|
||||
value: string | TextField;
|
||||
} | null)
|
||||
| ({
|
||||
relationTo: 'array-fields';
|
||||
value: string | ArrayField;
|
||||
} | null);
|
||||
relationshipDrawerHasMany?: (string | TextField)[] | null;
|
||||
relationshipDrawerHasManyPolymorphic?:
|
||||
| {
|
||||
relationTo: 'text-fields';
|
||||
value: string | TextField;
|
||||
}[]
|
||||
| null;
|
||||
relationshipDrawerWithAllowCreateFalse?: (string | null) | TextField;
|
||||
relationshipDrawerWithFilterOptions?: {
|
||||
relationTo: 'text-fields';
|
||||
value: string | TextField;
|
||||
} | null;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
@@ -2786,6 +2809,13 @@ export interface RelationshipFieldsSelect<T extends boolean = true> {
|
||||
relationshipWithMinRows?: T;
|
||||
relationToRow?: T;
|
||||
relationToRowMany?: T;
|
||||
relationshipDrawer?: T;
|
||||
relationshipDrawerReadOnly?: T;
|
||||
polymorphicRelationshipDrawer?: T;
|
||||
relationshipDrawerHasMany?: T;
|
||||
relationshipDrawerHasManyPolymorphic?: T;
|
||||
relationshipDrawerWithAllowCreateFalse?: T;
|
||||
relationshipDrawerWithFilterOptions?: T;
|
||||
updatedAt?: T;
|
||||
createdAt?: T;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user