Git Product home page Git Product logo

payload-workflow's Introduction

Payload workflow plugin

Note This plugin is currently under active development and still in an early stage. Check the roadmap below in this readme for more details / upcoming features.

Shows an image illustrating the payload-workflow plugin

Installation

The most recent version of payload-workflow currently only supports Payload 2.0 and up. For older payload versions, please use [email protected]

$ yarn add payload-workflow

Basic usage

import { payloadWorkflow } from 'payload-workflow';

const config = buildConfig({
  collections: [ ... ],
  plugins: [
    payloadWorkflow({
      'my-collection-slug': {
        statuses: [
          {value: 'draft', label: 'Draft'},
          {value: 'in-progress', label: 'In Progress'},
          {value: 'ready-for-review', label: 'Ready for review'},
          {value: 'published', label: 'Published'},
        ],
        defaultStatus: 'draft',
        hideNoStatusColumn: false
      }
    })
  ],
});

Differences with the draft/publish system of Payload.

The workflow plugin introduces a new field called workflowStatus. This field does not interact with the draft/publish system of Payload.

You can "integrate" the workflow status with the draft/publish system of Payload yourself by using Payloads hooks.

For example: Automatically publish the document when the workflowStatus has been changed to published.

Roadmap

Upcoming Features / Ideas. Have a suggestion for the plugin? Feel free to open an issue or contribute!
  • Payload 2.0 support
  • Customize card properties (currently displays title and createdAt)
  • Edit relationships directly from the card (e.g., assigning users to a document)
  • Toggleable column for posts without a workflow status (Currently, documents lacking workflowStatus aren't visible on the board)
  • Lazy loading of column contents when scrolling (Currently, board only shows defaultLimit amount of cards)
  • Permissions for changing statuses
  • Allowed transitions between statuses
  • Integration with the draft/publish system of Payload (?)

payload-workflow's People

Contributors

dennissnijder avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

payload-workflow's Issues

View Switch and Custom View

@DennisSnijder - Hi Dennis - this is an excellent plugin.

Not really an issue per se, but thought I'd say hello here and ask about how you implemented your Workflow custom view.

We've also just created a custom List view, and were about to implement a switcher as well but we ran into this issue - payloadcms/payload#4990 . Just wondering if you had any thoughts on this, or whether you'd discovered the same.

Kind regards,

Tony

Error: Can't find stylesheet to import (Payload 2.0)

Awesome looking plugin!

Just wanted to try it out but get the error below. I'm updated to Payload 2.0, so maybe that has something to do with it?

silveltman@Sils-MBP payload % yarn dev
yarn run v1.22.19
$ cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon
[nodemon] 3.0.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node src/server.ts`
[19:54:07] INFO (payload): Connected to MongoDB server successfully!
[19:54:07] INFO (payload): Starting Payload...
[19:54:07] INFO (payload): Payload Admin URL: http://localhost:3000/admin
[19:54:07] INFO (payload): App URL: http://localhost:3000
[sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/WorkflowViewHeader/styles.scss 1:9  root stylesheet
[sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/BoardCard/sytles.scss 1:9  root stylesheet
[sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/BoardColumn/styles.scss 1:9  root stylesheet
[sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/WorkflowView/styles.scss 1:9  root stylesheet
9:54:23 PM [VITE-WARNING] Internal server error: [sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/WorkflowViewHeader/styles.scss 1:9  root stylesheet
  Plugin: vite:css
  File: /Users/silveltman/Documents/Github/monorepo/payload/node_modules/payload-workflow/dist/components/WorkflowViewHeader/styles.scss:1:9
  Error: Can't find stylesheet to import.
    ╷
  1 │ @import "payload/scss/index";
    │         ^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/payload-workflow/dist/components/WorkflowViewHeader/styles.scss 1:9  root stylesheet
      at Object.wrapException (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:1269:17)
      at Object.throwWithTrace0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:24245:15)
      at /Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:73332:19
      at _wrapJsFunctionForAsync_closure.$protected (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:3939:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29731:12)
      at _awaitOnObject_closure.call$1 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29719:32)
      at Object._rootRunUnary (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:4313:18)
      at StaticClosure.<anonymous> (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:103106:16)
      at _CustomZone.runUnary$2$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:31127:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:30200:51)
9:54:23 PM [VITE-WARNING] Internal server error: [sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/BoardCard/sytles.scss 1:9  root stylesheet
  Plugin: vite:css
  File: /Users/silveltman/Documents/Github/monorepo/payload/node_modules/payload-workflow/dist/components/BoardCard/sytles.scss:1:9
  Error: Can't find stylesheet to import.
    ╷
  1 │ @import "payload/scss/index";
    │         ^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/payload-workflow/dist/components/BoardCard/sytles.scss 1:9  root stylesheet
      at Object.wrapException (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:1269:17)
      at Object.throwWithTrace0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:24245:15)
      at /Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:73332:19
      at _wrapJsFunctionForAsync_closure.$protected (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:3939:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29731:12)
      at _awaitOnObject_closure.call$1 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29719:32)
      at Object._rootRunUnary (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:4313:18)
      at StaticClosure.<anonymous> (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:103106:16)
      at _CustomZone.runUnary$2$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:31127:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:30200:51)
9:54:23 PM [VITE-WARNING] Internal server error: [sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/BoardColumn/styles.scss 1:9  root stylesheet
  Plugin: vite:css
  File: /Users/silveltman/Documents/Github/monorepo/payload/node_modules/payload-workflow/dist/components/BoardColumn/styles.scss:1:9
  Error: Can't find stylesheet to import.
    ╷
  1 │ @import "payload/scss/index";
    │         ^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/payload-workflow/dist/components/BoardColumn/styles.scss 1:9  root stylesheet
      at Object.wrapException (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:1269:17)
      at Object.throwWithTrace0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:24245:15)
      at /Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:73332:19
      at _wrapJsFunctionForAsync_closure.$protected (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:3939:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29731:12)
      at _awaitOnObject_closure.call$1 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29719:32)
      at Object._rootRunUnary (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:4313:18)
      at StaticClosure.<anonymous> (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:103106:16)
      at _CustomZone.runUnary$2$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:31127:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:30200:51)
9:54:23 PM [VITE-WARNING] Internal server error: [sass] Can't find stylesheet to import.
  ╷
1 │ @import "payload/scss/index";
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/payload-workflow/dist/components/WorkflowView/styles.scss 1:9  root stylesheet
  Plugin: vite:css
  File: /Users/silveltman/Documents/Github/monorepo/payload/node_modules/payload-workflow/dist/components/WorkflowView/styles.scss:1:9
  Error: Can't find stylesheet to import.
    ╷
  1 │ @import "payload/scss/index";
    │         ^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/payload-workflow/dist/components/WorkflowView/styles.scss 1:9  root stylesheet
      at Object.wrapException (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:1269:17)
      at Object.throwWithTrace0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:24245:15)
      at /Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:73332:19
      at _wrapJsFunctionForAsync_closure.$protected (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:3939:15)
      at _wrapJsFunctionForAsync_closure.call$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29731:12)
      at _awaitOnObject_closure.call$1 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:29719:32)
      at Object._rootRunUnary (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:4313:18)
      at StaticClosure.<anonymous> (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:103106:16)
      at _CustomZone.runUnary$2$2 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:31127:39)
      at _Future__propagateToListeners_handleValueCallback.call$0 (/Users/silveltman/Documents/Github/monorepo/payload/node_modules/sass/sass.dart.js:30200:51)

Lexorank Collision

Hello!

I've been trying to replicate some of the mechanisms which are used here for my project. I've found which appears to be a strange behavior on the generateOrderRank hook, and I'm not sure if this is the expected output.

Basically, it appears that the hook gets stuck and generates the same lexorank multiple times because it received an input from a wrongly sorted query?

image

  const collectionData = await payload.find({
    collection: 'menu-items',
    sort: 'orderRank',
    limit: 1,
  });

  const lastOrderRank = collectionData.docs[0]?.orderRank ?? null;

  console.log("Last order rank:", lastOrderRank)

  const lastRank =
    lastOrderRank && typeof lastOrderRank === 'string'
      ? LexoRank.parse(lastOrderRank)
      : LexoRank.min()

  console.log("Last rank:", lastRank.toString());

  const nextRank = lastRank.genNext().genNext();
  data.orderRank = nextRank.toString();

  console.log("Next rank:", nextRank.toString());

image

I suspect it might be happening here too, since my code is nearly identical since I copied from here. The problem disappears when I flip the order of the sorting as such:

  sort: '-orderRank'

Thanks for making the plugin! I'll be using this as a reference on making my custom tree collection.

Admin components are being overridden by the plugin's config

This line adds a custom List view to the collection, but does not spread the user's admin.components config back in: https://github.com/DennisSnijder/payload-workflow/blob/main/src/index.ts#L57. This means that when using this plugin, you cannot bring your own custom components with it. It's a simple fix:

// Collection.ts
{
  // ...
  admin: {
    // ...
    components: {
      ...collection?.admin?.components || {}, // THIS LINE FIXES IT
      views: {
        ...collection?.admin?.components?.views || {},
        List: WorkflowView(collectionPluginConfig)
      }
    }
  }
}

Feature Request: Custom screen configs

Great plugin idea :D A feature request: Have custom screen configs where the screen prompts you to update fields.

This is useful when we need to capture extra data related to the state change (e.g. if I move a Post from In Progress to Published, I want to capture when the post was published, and maybe also social media links to the Post, both of which I can fill out by having a screen pop up when I move the item)

React.createElement: Type is invalid

chunk-LAFHZV3R.js?v=839fdc55:136 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Using viteBundler

Is anyone else getting this error?

Feature request

Can we have access permission for the plugin usage and also conditional validation while changing card from one status to another

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.