Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Edit the functionality of the Delete button

default discord avatar
___lloydlast year
10

Hello guys, I have a collection

History

and I would like to edit the functionality of the

Delete

button only for that specific collection.



I want it to behave like this:


1. The admin will click the delete button to delete a record.


2. The record from the

History

collection will now be hidden, but not deleted, and will still be available to be fetched from the API.


3. If it's possible to hide the record only for specific roles it would be even better.



Is it possible to do something like this? Thanks



I'm looking in the documentation at

beforeDelete

hook, I'm wondering if there is a way to stop the

delete

operation, and do a patch action instead, that will somehow hide the record. Here's what I'm working it for testing purposes



import { CollectionBeforeDeleteHook, CollectionConfig } from "payload/types";

const TestCol: CollectionConfig = {
  slug: 'testcol',
  fields: [
    {
      name: 'title',
      type: 'text'
    }
  ],
  hooks: {
    beforeDelete: [(args) => {
      console.log(args.id)
    },]
  }
}

export default TestCol


I just figured out that I can throw an error inside beforeDelete hook to stop the deletion operation, I just need to figure out how to hide a single record from a collection 😬

  • discord user avatar
    dribbens
    last year

    What you're describing is the soft-delete feature. We don't currently have it but I've written about how to implement this as a custom solution here:

    https://github.com/payloadcms/payload/discussions/1968

    It would be a good idea to comment and upvote that discussion as that is how we track and prioritize features.

  • default discord avatar
    ___lloydlast year

    Okay, thanks!

  • discord user avatar
    dribbens
    last year

    In your use-case what you could do is add a custom endpoint that would replace the normal delete handler.



    It would look like:


    // in your collection
    endpoints: [ {
      method: 'DELETE',
      path: '/:id',
      handler: ( req, res ) => {
        const result = req.payload.update({
          collection: req.collection.config.slug,
          id: req.params.id, 
          data: { deletedAt: new Date() },
          req,
         });
       // probably should use a try/catch for error handling
       res.send({result})
      },
    }]


    I didn't write this in my IDE so I'm sure I made a mistake or two..



    Also there is going to be another route for delete many.

  • default discord avatar
    ___lloydlast year

    ohh, so this will override the functionality of the

    delete

    button?

  • discord user avatar
    dribbens
    last year

    method: 'DELETE', path: '/'



    This is overwriting the backend rest API only



    the admin UI will call the same route, you're just making it behave how you need it



    does that make sense?

  • default discord avatar
    ___lloydlast year

    Yes



    Thank you 🙂


    One last thing, is it possible to tell the collection to not display the records that have the

    deletedAt

    field?


    (to not display it only in the admin panel, but to still allow the front-end to fetch that record with the REST api)

  • discord user avatar
    dribbens
    last year

    How familiar are you with react? What you'll need to do is add a custom provider that modifies the query params using useLocation from 'react-router-dom'.


    What you'll have to do is add a filter by default to your URL.



    A good starting point would be the list component code in Payload:

    https://github.com/payloadcms/payload/blob/542b5362d3ec8741aff6b1672fab7d2250e7b854/src/admin/components/views/collections/List/index.tsx#L97

    You can see how the list params are used to query docs



    I would use the admin UI filter buttons to construct the URL and add that back in if the route is going to your collection that needs it

  • default discord avatar
    ___lloydlast year

    I only know the basics of react, in fact I didn't quite understand the instructions of adding a custom provider.. but I will research how to do what you suggested if I won't be able to make the admin panel behave like I need using the custom route.



    I'm editing the

    /

    custom endpoint: on the final website I need to fetch the records of my collection only by id, so I'm trying to edit the

    /

    endpoint in a way that it will not send the records that have the

    deleted: true

    field.



    I will send an update as soon as I finish writing and testing the code

  • discord user avatar
    dribbens
    last year

    The custom provider was an idea for your admin UI, if that is not your requirement, you can ignore everything I said about that.



    To filter the removed entries in your website, you just need to have the

    where

    constraints to not include them in your requests.



    Good luck!



    It would be nice if we built a

    admin.defaultFilter

    feature so that you could automatically have that filter set when navigating to your collectin list. We already have a

    admin.defaultSort

    on the collection, so this would be very similar and easy to implement since one is a good guide for the other. This would help for your use-case.

  • default discord avatar
    ___lloydlast year
    endpoints: [
        {
          method: 'get',
          path: '/',
          handler: async (req, res, next) =>{      
            const reqTest = await req.payload.find({
              collection: TestCol.slug,
              where: {
                deleted: {
                  equals: false
                }
              }
            })
            
            res.send(reqTest)
          }
        }
      ],

    I've written the

    /

    path like this and it works as intended.



    I've looked at the documentation of defaultSort, but I don't quite get something, is it able to hide records? In the docs it says that it will only sort them

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.