Seeing that the setup and logic is so similar, would it be possible / make sense to make this an option of the existing one to many interface? 🤔 Like a toggle to go between a list and a table view

Seeing that the setup and logic is so similar, would it be possible / make sense to make this an option of the existing one to many interface? 🤔 Like a toggle to go between a list and a table view

Yes actually, although it is the difference between choosing a template vs set of fields.

Is it possible to toggle an option based on another option value?

Is it possible to toggle an option based on another option value?

Yeah! The options function in the interface index file gets the current configured options, so you can dynamically change the form of options 👍🏻

Done. Love the new approach, also allows for searching now even on list view when more than 1 page

Let me know if you have any other ideas with this. I actually think a miniature tabluar layout view as interface could be the next logical step for really large relationships, or even just for better navigation.

Laravel Nova has this type of layout if you want inspiration.

Might have over done it now but I like it :)

@rijkvanzanten Done :)

Looks awesome!

Here my thoughts:

• it would make sense to add these options to all relational multiple interfaces so files, list-m2a, list-m2m and list-02m just to make it consistent.
• limit -> items per page just as the translation
• I'm not sure if we'd want to put the buttons on the top.
• We might wan't to disable search/filtering when only having 1 page to keep it clean.

Other than that I really like it and it is a good enhancement.

Looks awesome!

Here my thoughts:

• it would make sense to add these options to all relational multiple interfaces so files, list-m2a, list-m2m and list-02m just to make it consistent.
• limit -> items per page just as the translation
• I'm not sure if we'd want to put the buttons on the top.
• We might wan't to disable search/filtering when only having 1 page to keep it clean.

Other than that I really like it and it is a good enhancement.

Good Suggestions:

Search/filtering doesn't show at all if there isn't more than 1 page
I had the buttons at the bottom, but it becomes quite cramped with pagination on slightly smaller screens
I see "Per page" exists, so am using that for now.

Agree with getting the same options on the other interfaces, just not sure how, since for example,

• list-m2a isn't a fixed set of fields?
• list-m2m could work
• this is currently list-o2m

Not sure if you already thought about this and might have some good reasons for why you went with the boolean checkbox, but for what its worth I think a dropdown might be more user friendly here:

Especially the Table or List(default) title is a bit hacky and would not be necessary with a dropdown that just could be set to List by default

Can the option to hide/show the external link (open the related collection item) be configured to show or hidden?
From what it seems like that if you click on the row, the drawer opens, but if you click the external link icon, then it opens in full.
Can there be an option to basically hide the external link icons?
Like a toggle:

• Show external link

Options added.

O2M & M2M supported.

O2M with many items

M2M with few items

This looks good, this looks really good! Wish to have this feature soon @rijkvanzanten

I don't know if its ideal that the Create New and Add Existing buttons change their location depending on if there is a paginator.

Wouldn't it make more sense to just blend in the paginator within the already free space and keeping the rest as is?

I don't know if its ideal that the Create New and Add Existing buttons change their location depending on if there is a paginator.

Wouldn't it make more sense to just blend in the paginator within the already free space and keeping the rest as is?

Good catch, that was an unintentional side affect of the paginator not showing in that case. Fixing now.

Fixed

Really excited for this one, thank you for all this great work, @u12206050!! Not being a proper dev myself (to pull this PR and text locally), I'd love an updated MP4 of the latest UX/UI to review. ❤️

@benhaynes Here you go, let me know if you want to look at anything specific

Thank you!! This is looking great. Could you explain the "link" feature? That is not clear to me.

Also, we might want to get the search/filter bar background consistent with the background (white in this case)... but that's super minor. :)

The link feature is for navigating directly to a related item, whilst keeping the history, ie, when going back you go back to the item.

My experience has been that users tend to navigate through the collection that is easiest to search, and in a heavy relationship based system, it isn't required to update related items within a transaction of initial item.

Another important use case is the fact that the field in a O2M relationship doesn't show up in the side panel when editing. Meaning if I want to change the actual relationship on a related item, I first need to find the ID, go to the collection view, search for the ID, select and then update. Being able to navigate directly greatly increases the UX

Arguably link feature should also be on on the select-dropdown-m2o interface, but will leave that for another PR.

In regards to search bar, if it is same as background, which is a bit greyish, wouldn't it seem a bit disabled?

Maybe the greyish background should be white instead. I think its a bit inconsistent with the rest of directus right now, because directus usually does not draw those kind of grey boxes around fields 🤔 Just my two thoughts on that :)

I do agree that it is a bit different.
It is using the v-sheet component, and it is to visually group the table with the search. It could be a simple border can accomplish the same affect.

The background of the search should be white (page background)... I was commenting on the parts under the search icons looking gray, but maybe that's just the GIF compression. Also, I agree with @LasseRosenow that the gray background feels a bit different than the rest of the core app... this should probably just look like the table layout (white on white, see below). I think the search bar will still feel "connected"... though I wonder if there's anything else we can add to that header to make it even more useful. The ability to change/override the default fields?

What do you think about this @benhaynes ?

Hi @u12206050, how easy would it be to turn this interface into an extension?

@mark-james currently it isn't too easy. As I would have then created it quite a while back. So I am also eagerly awaiting it being merged.

The table view works well in M2M! 👍 However there are some glitches for O2M, as shown in the video below. 🤔 Might be existing issues within the O2M interface.

I believe it's related to existing O2M issues such as #15120 and #13537, though now it seems to not be exactly the same with them in this PR, so I think we'll need to investigate said issues first. 👍

@azrikahar Don't you think those issues would be fixed outside of this PR, and thus that this PR could be merged none the less?