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 😬
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.
Okay, thanks!
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.
ohh, so this will override the functionality of the
delete
button?
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?
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)
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
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
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.
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
Discord
online
Get help straight from the Payload team with an Enterprise License.