https://github.com/r1tsuu/payload-plugin-collections-docs-order

Plugin that adds an option to re-order collection documents with drag n drop
https://github.com/r1tsuu/payload-plugin-collections-docs-order

javascript node payload-plugin payloadcms react typescript

Last synced: 21 days ago
JSON representation

Plugin that adds an option to re-order collection documents with drag n drop

• Host: GitHub
• URL: https://github.com/r1tsuu/payload-plugin-collections-docs-order
• Owner: r1tsuu
• Created: 2024-02-19T05:53:06.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-04T22:23:31.000Z (7 months ago)
• Last Synced: 2024-10-14T09:24:52.829Z (about 1 month ago)
• Topics: javascript, node, payload-plugin, payloadcms, react, typescript
• Language: TypeScript
• Homepage:
• Size: 1.01 MB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Note!

This repository for 3.0 is deprecated and has been moved to https://github.com/r1tsuu/payload-enchants in order to keep all of my payload-related packages in 1 place.

[2.0 branch](https://github.com/r1tsuu/payload-plugin-collections-docs-order/tree/2.0)

# Payload Plugin Collections Docs Order for Payload 3.0

## 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/r1tsuu/payload-plugin-collections-docs-order/assets/64744993/2c13cdd9-f809-4c40-82c6-0b6f78997f74

## Install

`pnpm add @r1tsu/[email protected]`

In your payload.config.ts:

```ts

/// ....

import { collectionsDocsOrderPlugin } from '@r1tsu/payload-plugin-collections-docs-order';

export default buildConfig({

  // ...

  plugins: [

    collectionsDocsOrderPlugin({

      collections: [{ slug: 'pages' }], // The feature will be enabled only for collections that are in this array.,

      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:

```ts

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

```

Local API:

```ts

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

```

GraphQL:

```graphql

query {

  Examples(sort: "docOrder") {

    docs {

      title

    }

  }

```

## Script to setup for collections that had documents before installing the plugin

1. Create folder named cli in your project's root

2. Copy this file to the created folder and update `collections` array with your needs. https://gist.github.com/r1tsuu/047008be9800dfcbe371247d10ee6794

3. Run the file like that: `yarn ts-node --project ./tsconfig.server.json ./cli/pluginCollectionsDocsSetup.ts` (It will run for a database that in your .env, also be sure to backup if this on production)