Nested Docs UI improvement

default discord avatar
jankocian
6 months ago
7

Hey all and @jacobsfletch, I've added the official Nested Docs plugin to my Payload instance. It works perfectly fine, though there is a significant UI deficiency I think.



In the list view of collection docs, there is no visual indicator of the relationships.



The minimal implementation would probably consist of 2 features:


- add a dash or other indicator in front of the children doc's title


- alter the sorting so that children are getting properly ordered right after their parent


...aka WP's default behavior



Ver. #2 - recreate what Nested Pages WP plugin does.



Any chance of getting this in? 🙂



Thanks!

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    👍 you can add a

    fullTitle

    field to your collection with a

    beforeChange

    field hook to populate based on your breadcrumbs, something like this:



    export const populateFullTitle = (breadcrumbs: unknown): string | undefined => {
      if (Array.isArray(breadcrumbs)) {
        return breadcrumbs.reduce((title, breadcrumb, i) => {
          if (i === 0) return `${breadcrumb.label}`;
          return `${title} > ${breadcrumb.label}`;
        }, '');
      }
    
      return undefined;
    };

    And here's your field config:


     {
        name: 'fullTitle',
        type: 'text',
        hooks: {
        beforeChange: [
            populateFullTitle,
        ],
      },
        admin: {
        components: {
            Field: () => null,
        },
      },
    },


    Then you can put this field in your

    defaultColumns

    so that it displays in the table view by default:


    defaultColumns: [
      'fullTitle',
    ]


    And now you can also sort by this field in your queries



    ?sort=fullTitle
  • default discord avatar
    jankocian
    6 months ago

    Hi @jacobsfletch, thank a lot for your suggestion! 🙂 And how do I make the collection list sorted by fullTitle by default for all the users?



    Also, if anyone stumbles upon this one, I'll just clarify that the Field Hook gets passed args and within these, there are breadcrumbs in

    args.data.breadcrumbs

    .

  • discord user avatar
    jacobsfletch
    Payload Team
    6 months ago

    I

    think

    if you set

    fullTitle

    as your

    useAsTitle

    then include it in

    defaultColumns

    , the list view will automatically sort by this field although I have not tested this



    Default sort would be a great feature to add

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.