Custom Select Component (for field type relationship)

jm.sv

2 months ago

16

• 

  notchr

  2 months ago

  Hey @jm.sv can I check out the field setup you're using?

  
  

  
  

  Maybe we can recommend a different way to display it

• 

  jm.sv

  2 months ago

  @notchr yep.

  Team Members

  references

  Videos

  .

  
  

  
  

  The Videos are stored in Mux, so the Videos collection just has the

  playbackIds

  and fills in some fields via the Mux API to render thumbnails and get aspect ratio

  

  

  
• 

  notchr

  2 months ago

  @jm.sv Would a virtual field maybe work in this situation?"

  
  

  
  

  const getAllMovies: FieldHook = async ({ data }) => {
    const allMovies = await payload.find({
      collection: 'movies',
      where: {
        member: {
          equals: data.id,
        },
      },
    });
    if (allMovies.docs) return allMovies.docs.map((doc) => doc.id);
  
    return null;
  };
  
  const Example: CollectionConfig = {
    slug: 'example',
    fields: [
      {
        name: 'movieList',
        maxDepth: 0,
        type: 'relationship',
        relationTo: 'movies',
        hasMany: true,
        access: {
          create: () => false,
          update: () => false,
        },
        admin: {
          readOnly: true,
        },
        hooks: {
          beforeChange: [({ siblingData }) => {
            // Mutate the sibling data to prevent DB storage
            // eslint-disable-next-line no-param-reassign
            siblingData.movieList = undefined;
          }],
          afterRead: [getAllMovies],
        },
      },
    ]
  };

  
  

  
  

  Or better yet, get the sibling data for the select and render it with the desired field as the label for each item

• 

  jm.sv

  2 months ago

  That last part is what I'm stuck on. How do I hook into / override the component that's used for the select (or select items)? It's not part of the

  admin.components

  for either Collections or Field with type relationship

• 

  notchr

  2 months ago

  Well say you have that select component

  
  

  
  

  and you hide it in the admin display, but the field itself is still available via siblingData

  
  

  
  

  so you create a virtual field along with it

• 

  jm.sv

  2 months ago

  oh and then the virtual field is a fully custom dropdown

• 

  notchr

  2 months ago

  Is one idea

• 

  jm.sv

  2 months ago

  and changing that is tied to the virtual field

• 

  notchr

  2 months ago

  Well see in beforeChange

  
  

  
  

  its virtual because its data gets wiped on any change

  
  

  
  

  It's for display only

  
  

  
  

  But you could customize that so, it initially gets data from the relationship field

  
  

  
  

  and on change, you update the relationship accordingly

  
  

  
  

  or a similar flow

  
  

  
  

  that's just an idea, but does that make sense?

  
  

  
  

  Otherwise maybe @alessiogr has an idea

• 

  jm.sv

  2 months ago

  @notchr I think so, but that sounds like it might render as one of the fields so above the

  Video

  relationship field, whereas I'm hoping to do this — render an image inside of the relationship select dropdown

  
  

  
  

  But I think I get what you're saying if I keep the relationship and then make my own dropdown and that dropdown's

  onChange

  is tied to the real relationship field

  
  

  
  

  I think the ideal solve would be that there is an

  admin.components.RelationshipDropdownItem

  override

  
• 

  notchr

  2 months ago

  Hmmm

  
  

  
  

  @jacobsfletch if you have some time today, any ideas on this one?

• 

  jacobsfletch

  Payload Team

  2 months ago

  @jm.sv could you just set a

  useAsTitle

  on your relationship? That way the labels displayed in your dropdown use titles that make sense.

• 

  jm.sv

  2 months ago

  @jacobsfletch unfortunately Mux doesn't really provide any useful metadata (not even the filename). I'm using the asset ID which helps a little bit to cross-reference inside of Mux, but a visual indicator would be much better.

  
  
  

  My workaround for now is fine, you click into the item itself to see the thumbnail preview. But I think the ability to customize this component would be a great add. Goes right along with customizing the Field and Cell so you can configure how a Field appears in all circumstances

• 

  jacobsfletch

  Payload Team

  2 months ago

  Totally, I think this is great. If you'd like to open a new discussion on GitHub with your idea, that's the best way to get it marked as planned and on the roadmap 🗺️

  
  

  
  

  You can paste a link to this conversation as well

• 

  jm.sv

  2 months ago

  Done!

  https://github.com/payloadcms/payload/discussions/2934
• 

  leonardoorick

  2 months ago

  @jm.sv I was looking for this exactly feature. Would be nice if the thumbnail could appear on the field after selected also. And on the list of items as well . I don't know if the current

  admin.components

  already allow that, but I couldn't find it