Edit the functionality of the Delete button

___lloyd2 years ago

10

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

• 

  dribbens

  2 years ago

  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.

• 

  ___lloyd2 years ago

  Okay, thanks!

• 

  dribbens

  2 years ago

  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.

• 

  ___lloyd2 years ago

  ohh, so this will override the functionality of the

  delete

  button?

• 

  dribbens

  2 years ago

  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?

• 

  ___lloyd2 years ago

  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)

• 

  dribbens

  2 years ago

  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

• 

  ___lloyd2 years ago

  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

• 

  dribbens

  2 years ago

  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.

• 

  ___lloyd2 years ago

  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