Name: payload docs reorder
Author: VeiaG

Overview

Summary generated from the README

Adds drag and drop reordering of documents in selected collections, saving the position in a docOrder field. Front ends can then query with sort by docOrder through REST, the Local API or GraphQL. It is configured through the plugins array with a collections map, an optional access function and an option to initialize docOrder on existing documents. The plugin is deprecated in favor of Payload's built-in orderable feature and targets Payload 3.28.1 and later.

Features

Drag and drop reordering of documents in chosen collections
Stores order in a docOrder field usable as a sort key
Works with REST, Local API and GraphQL sorting
Optional access function for the saveChanges endpoint
One-time initialization of docOrder for existing documents

Use cases

Order posts or catalog entries manually in the admin and render them in that order on the front end
Add manual ordering to a collection that already contains documents

Installation

npm i @veiag/payload-docs-reorder

Health Score

26/100Fair

Composite score based on GitHub activity, stars, npm downloads, publish recency, dependency count, and package size.

Badge for your README

Markdown

[![Payload Directory](https://payloaddirectory.dev/badge/952123617-root.svg)](https://payloaddirectory.dev/plugins/952123617-root)

HTML

<a href="https://payloaddirectory.dev/plugins/952123617-root"><img src="https://payloaddirectory.dev/badge/952123617-root.svg" alt="Payload Directory"></a>

README

[!CAUTION] This plugin is deprecated, due to a new feature added to Payload - orderable

Docs reorder plugin for Payload 3 (^3.28.1)

This plugin has all of the features (and most of the code) of the original plugin by r1tsuu, but with some improvements and made compatible with latest Payload version. (3.28.1)

Install

npm i @veiag/payload-docs-reorder

About

Adds an option to re-order collection documents with drag n drop (almost like array/blocks items). Then on your front end you can query documents with applied sort by docOrder field.

Video

https://github.com/user-attachments/assets/a47ab7a1-a58c-4626-aad3-9ca33788dbd8

In your payload.config.ts:

/// ....
import { docsReorder } from '@veiag/payload-docs-reorder';

export default buildConfig({
  // ...
  plugins: [
    docsReorder({
      collections: {
        posts: true, //Slug of the collection
      },
      // Needed to initialize values of docOrder field in collection documents.
      // Only needed once per collection. 
      // (Run payload once (NOT in dev mode) with this option enabled , and more if you add new collection)
      initializeDocOrder: true,

      access: ({ req, data }) => {
        // Optional, configure access for `saveChanges` endpoint, default: Boolean(req.user)
        return req.user?.collection === 'admins';
      },
    }),
  ],
});

Querying with applied plugin's sort.

REST:

fetch('http://localhost:3000/api/examples?sort=docOrder').then((res) => res.json());

Local API:

payload.find({ collection: 'examples', sort: 'docOrder' });

GraphQL:

query {
  Examples(sort: "docOrder") {
    docs {
      title
    }
  }

Setup for collections that had documents before installing the plugin

The plugin uses the onInit function to initialize the docOrder field. However, it is not recommended to use this in development mode. It will trigger the afterChange hook, which in my case attempts to call revalidateTag and results in an error when building the admin panel: "Route /admin/[[...segments]] used 'revalidatePath' during render which is unsupported."

Running next start in production mode will not trigger the error, because pages are prerendered and the revalidateTag function is not called.

Issues

If you have any issues, please open an issue on this repository.

payload docs reorder