Grouping collections in admin

\ ឵឵឵last year

7

• 

  akshaylast year

  There is a way to group collections in nav bar if it helps -

  https://payloadcms.com/docs/configuration/collections#admin-options
• 

  \ ឵឵឵last year

  Perfect! Exactly what I was hoping for.

• 

  jarrod_not_jared

  last year

  @\ ឵឵឵ something like this might also be useful 👼

  
  
  

  const groupCollections = (group: string, collections: CollectionConfig[]): CollectionConfig[] => {
    return collections.map(collection => {
      return {
        ...collection,
        admin: {
          ...collection.admin,
          group,
        },
      }
    })
  }
  
  const ContentCollections = [Posts, Pages]
  
  const configToBuild: Config = {
    // ...rest of config,
    collections: [
      ...groupCollections('Content', ContentCollections),
    ],
  }

• 

  \ ឵឵឵last year

  I like it 🙂 Nice one!

• 

  snailedlt11 months ago

  This is almost exactly what I'm looking for... but how do I make it localized with I18n?

  
  
  

  This is how I solved it:

  
  

  const groupCollections = (group: string | Record<string, string>, collections: CollectionConfig[]): CollectionConfig[] => {
    return collections.map(collection => {
      return {
        ...collection,
        admin: {
          ...collection.admin,
          group,
        },
      }
    })
  }
  
  const ContentCollections = [Posts, Pages]
  const configToBuild: Config = {
    // ...rest of config,
    collections: [
      ...groupCollections({en: 'Content', es: 'Contentido'}, ContentCollections),
    ],
  }

  
  

  
  

  I don't know how to change the group name of the default User collection though. Is it possible without making a collectionconfig for it?

  
  

  
  

  @jarrod_not_jared

  
  

  It would be neat if grouping inside of payload.config.ts was possible out of the box without creating that method btw. Imo, it's a much more practical way to group collections, than doing it inside every collection config.

  
  
  

  Perhaps it could look something like this?

  
  

  const configToBuild: Config = {
    // ...rest of config,
    collections: {
      {
        group: { en: "Content", es: "Contentido"},
        collections: [Posts, Pages]
      },
      {
        group: { en: "Users", es: "Usuarios"},
        collections: [Users, UserGroups, UserPrivileges]
      },
    },
  }

• 

  jarrod_not_jared

  11 months ago

  Yeah that would be a large api lift though as it would affect a lot of code. I am not sure that is the pattern I would like to see. It's a bit awkward having collections inside of collections. For now I think the method abstraction is the way to go.

• 

  snailedlt11 months ago

  Agreed. It's not the best way to do it, but being able to change groups easily in the payload.config.ts file would be very neat

  
  

  
  

  how about something like this instead?

  
  

  const configToBuild: Config = {
    // ...rest of config,
    collections: [Posts, Pages,Users, UserGroups, UserPrivileges],
    admin {
      collectionGroups: {
        group: { en: "Content", es: "Contentido"},
        collections: [Posts, Pages]
      },
      {
        group: { en: "Users", es: "Usuarios"},
        collections: [Users, UserGroups, UserPrivileges]
      },
    }
  }