Replacing A Course's Deleted Difficulty

In This Lesson

We'll add the ability to gracefully handle instances where a required relationship's record is being deleted. When a difficulty is being used by a course, we'll have our users select a replacement difficulty for the one being deleted.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 2 comments

@aaron-ford
1 year ago

Is AdonisJS set up to handle soft deletes? If you didn't want to replace the difficulty and maintain the original relationships? Or if you wanted to delete a course or organization for some reason, and not lose any records you might have to things like users grades?
Also, I feel like I've occasionally seen warnings in the code that I think are due to FormInput type group (remember me on the login page) not having a label or a v-model attribute. Should a group type have those attributes? Or should they be made optional in the FormInput's defined props?

1
1. Responding to aaron-ford
  
  @tomgobich
  1 year ago
  
  Hi Aaron! Unfortunately, not out of the box. Looks like there is a community package to add support for it, though. An alternative approach I've seen discussed is to have a soft_deletes table that contains a serialized version of the deleted row with additional columns specifying its original table & id. You'd then delete the record, serialize it, then add it to the soft_deletes table so that you can still grab it and restore it if needed. I've never attempted this approach, but it does sound interesting, so I thought I'd share. Not sure how this would handle foreign keys pointing to the deleted id though.
  Yes, sorry about that, those should be optional props!
  
  0

Transcript

because for our courses, the difficulty ID on that course is a not null relationship. So we need a difficulty to exist on a course.
So if we had just deleted a difficulty that was bound to a course, we would have gotten a foreign key constraint error because that difficulty
needs to exist in the database as it's referenced inside of a course. Now, we do have a good option to remedy that situation. Let's see if we're about to delete our test one here.
When we click on our delete icon to pop open the confirm delete dialog, we can utilize that courses count that we added whenever we were listing these difficulties out to determine whether or not any courses
reference that particular difficulty and make use of it. If we do, then we can offer a select inside of that confirm destroy that would allow the user to select one of their alternative difficulties
to replace the one being deleted with on that particular course or courses. Right now, we don't have any courses though. So let's jump into a Node Ace REPL session,
await and load our models in. So I'm going to go ahead and grab the user, set that equal to await models user, and we'll call the find by or fail because
the only thing that I really know about this user is the email. So testuser1 at test.com, we can hit enter and now we should have our user there and we sure do.
Check out the ID and okay, this is the user with an ID of one. In order to create a course, we're going to need an access level difficulty and status ID. But first, we need to know what the organization is.
So we can grab the org by reaching through the user, grabbing the related organizations,
querying where the name of the organization is my first organization, and we should only have one, so I'm going to call first or fail there.
Hit enter, and now we should have our organization, and I forgot to await it. So let's see if maybe we await org.name if we get the name and sure enough, we do.
So I'm just going to do const o equals await org since we set org as a const there. So now we should be able to do o name. There we go. Then for our status and access level,
I don't really care what we set this to, this is just simply a test. So let's just do const status equals await o related statuses.query,
and then we can just grab the first one that we have inside of there, and let's do the exact same for our access level.
Just await o related access levels query first or fail. There we go. In terms of our difficulty, we do want to know which one we're testing with,
and to make things easy, let's go ahead and just test with our test one here. So for that one, we'll do const, and I'm just going to do diff equals await o related difficulties query
where name is test one, and then grab the first or fail there. Hit enter on that,
and now what we should be able to do is const course equals await o related courses call create and pass in an object here.
I think we can do multi lines. Yep, there we go. All I did was hit enter there, and we should be able to set the name to course test one or whatever you'd like there.
The access level ID to the access level dot ID, the status ID to the status dot ID,
and then the difficulty ID to our diff dot ID. Go ahead and end that object and end our parentheses. Hit enter, and that should now run.
So if we check our course dot check the ID, awesome. So now that got created, we can check our difficulty ID, and it's created with 37 there.
Okay, so we have our test up and running. So now we have at least one course bound to our test one. So if we give our pager a refresh to pick that up, I'm going to right click, inspect,
and if you have the Vue.js dev tools installed in your browser, you should have that little view tab over there. Go into our app layout, go into the index page, and this should be our last difficulty
as it's listed last on the page. If we open that up, we can see that currently that count isn't coming through, and we aren't preloading our courses, so currently seeing zero for that is expected.
So let's go ahead and jump back into our text editor, and this is most likely going to need added into the model to DTO conversion.
So we'll jump into our DTO, go into our difficulty DTO, and sure enough, we don't have anything for the metadata or extras object within here.
So let's go ahead and declare meta as a record bring any, and then down in the constructor, we want to set that as well.
So this meta equals, and we can reach for our difficulty and pass the extras object into that. The models extras object contains anything
that was included with the query that isn't on that model as a column or property in any other way. So this is where our count is. So we're just going to set that onto a property called meta via our DTO.
So if we give this a save, jump back into our browser, let's refresh one more time, and all of our data here updated. If we take a look at for one more time,
we see this meta object now with our, I'm not sure what happened there, courses count set to one. So awesome. We're now getting that count through.
We're going to need this for our access levels and statuses as well. So while we're here thinking about it so that we don't forget, let's go ahead and copy our declare meta, jump over to our access levels,
plop that on there. And then let's go to our status DTO, plop it on there as well. Then we can go back to our difficulty and get the constructor setter for that and do the exact same thing.
So we'll plop that on the access levels constructor. And we just need to update the actual text there. Copy that one more time, jump into our status and do the exact same.
So plop that right there, switching the text to status. Okay, close those out as we're now done with them. And let's jump back into our difficulties index page.
First, with our destroy confirmation dialogue, we're going to want to update this dialogue's text a little bit. So first, let's go ahead and wrap this in a div
because we will want to do a VIF VLS there. But if we are displaying this particular div, then that means that no courses are currently using this difficulty
so that they know it's clean and clear to go ahead and delete if they wish. However, if a course is using this, so we'll add in another div with the VIF
and reach for the destroy resources, optionally chain in that meta key that we added and then reach for that courses count that contains the number of courses bound to this difficulty.
And we saw whenever we inspected this in the view debugger that it came through as a string. So we won't do the type safe equality check and instead we'll just do does not equal zero. And whoops, resources there should be singular. There we go.
Then on this div down here, we just want to do VLS. Then we'll say, what difficulty would you like to assign
reach for the destroy resource meta courses count courses using and then reach for the destroy resources name
of the difficulty that we are deleting. Then we can tack on a form input and we're gonna want to mutate that form input slightly to allow a type of select.
And then the label for this is going to be difficulty or you can do replacement difficulty and we'll set a view model. And this is where we wanna reach for that destroy data that we added on
and we'll have a replacement ID key on there to hold the new value that we should replace the one being deleted with. And then let's also add in a class with a margin top of four
to add a little bit of spacing in between the text and the form input. We'll set the form input so that whenever it's a type of select the child content are the select items. So we'll do select item
and we might need to install that. I don't think we've installed this yet from dot CM view and loop over. So before each item in our replacement options
which we'll set a computed property field for here in a moment. Then we'll set a key to that item's ID and set the value to the item's ID. And then we need to normalize that to a string
again to work appropriately with shot CM view. The text content can then be that item's name which now just leaves us with needing to set this data
up appropriately whenever we're deleting an item and then adding our replacement options. So let's start with our destroy data. Whenever we click on the trash button which calls to our on destroy show.
So we'll scroll up to that function. When we open our dialogue we're gonna wanna pass data in and this will have a key of our replacement ID. For the default value of this replacement ID
we just wanna grab the first difficulty that isn't the one being deleted. So the one that's not our resource. So we can do const replacement equals routes difficulties
and we can find the item where the item ID does not equal our resource ID and then set the replacement ID to that replacement.ID. We can add a question mark in there.
And we also need to add to string again to make that happy with shot CM view. Next we want our confirm destroy dialogue to send this form data up along with it whenever we click our deletion.
So within our confirm destroy dialogue we also wanna make use of our action data prop to pass that destroy data in
so that our link component binds the action data along with it. If we quickly jump into our confirm destroy dialogue here on that link we're adding that action data
as the data property on inertia's link. So whenever we click this link it goes out to the action href and since this is a method of delete any data that we add into this prop
will get sent up along with that request. All right, let's jump back into our difficulties because we still need to add up our replacement options. For this we just wanna make use of a computed property
and we'll add this just underneath our use resource action. So do const replacement options equals computed import that from view at a callback function here
and we'll want to return props difficulties dot and filter out the item where that item ID
does not equal the destroy value resource ID. And come to think of it we can actually clean up that on destroy a little bit by switching this to just reach
for that replacement options value and just try and find the first item in there. Okie doke. So that should do it for our client side changes. Since we're sending a form up
we're also gonna wanna add in a validator for this as well. So let's jump into our difficulty validator and add a new validation in. So let's export const
and we'll call this our difficulty destroy validator. Set that equal to vine compile and then vine object with that replacement ID
inside of here of type vine number. But we also wanna verify that this exists on the organization so that we don't allow cross organization mismatches there.
So this exists function takes in a callback that's provided a DB reference which is our database query builder. The value of that replacement ID
and then field context information as well. Inside of this callback function we're going to want to try and get back a result
using the await DB query from our difficulties table. We can select the ID column as all that we care about is whether or not
we get anything back where that ID column equals that replacement ID value and then grab the first result. Now, all this does is check and make sure
that the difficulty provided exists inside of our database. But what we care about is that it also exists inside of the organization users trying to bind it to.
So for that, we wanna make use of our field context information to pass the organization's ID into this validator here.
So with our vine compile, we can also do with metadata and provide the type in with organization ID
to specify that we need to provide the organization ID into this validator's metadata in order to use this particular validator.
Vine.js will then plop that information from the metadata onto the field contexts meta key. Meaning if I clean up my database query a little bit here,
just put all of these chains on different lines, we can add an additional where clause making sure that the organization ID
equals the field meta organization ID value, which allows us to verify that the replacement ID for our difficulty is bound
to a particular organization ID that we pass in to the metadata of this validator. And then the exists call requires us to return back a Boolean. So we wanna return,
we can use the bang bang operator to just return the result. So if we got anything back, then we wanna return true because it does exist and our validator is a-okay.
If it's false, then it does not exist and we need to fail the validation. So let's give that a save. And then we can jump back into our difficulty controller,
make use of our request. So const data equals await request and call validate using passing in our difficulty destroy validator.
And the way that we add in metadata information is through the options object as the second argument here. In these options, we can add in a meta object
and this will get passed through directly as the meta field context for use inside of this validator. So we wanna set the organization ID
to our organization ID like so. And then we also wanna pass our validated data into our destroyed difficulty handle method.
If we now jump into our destroyed difficulty handle method, we wanna add that into our params. So data, we can infer the type of our difficulty destroy validator,
extract that data out of our handle method. And we now need to replace our difficulty prior to deleting it. But we only wanna replace it if that deletion is also successful.
So let's wrap this inside of a transaction using await and we can import DB from Lucid services DB and call the transaction method, providing in a callback
to use the managed transaction approach. Do async and this provides us our transaction instance. And we can make this easy on ourselves by using transaction cascading by binding it on our organization.
So use transaction TRX as everything that we're gonna do instead of this callback is initiated directly off of our organization instance. So that transaction will cascade through
along with that relationship. So whenever we reach through our organization's related difficulties, Lucid will cascade that transaction through to our difficulty itself for use whenever we delete that difficulty.
Prior to deleting that difficulty, we now want to await organization, reach for the related courses, query from that where the difficulty ID
equals the ID of the difficulty we are deleting. And then we can call update, set the difficulty ID to now our data dot replacement ID
to swap out the difficulty being deleted with its new replacement inside of our database. And that should do it. So let's go ahead and give everything here a test,
close that out momentarily, and let's hit delete on our test one. Okay, so you can see what difficulty would you like to assign the one courses using test one.
So this all seems to work. All right, we need to update our form input yet. But real quick, if we go ahead and try to delete one that doesn't have a course, you'll see that we just get the same dialogue
that we had previously here. So that if else logic seems to be working, let's jump in now to our form input component and update this to allow a type of select.
So I think we first need to install select. So we'll look for a Shotzi and add new component, look for select, and let's just make sure that we get that installed. It's like a new Shotzi and versions available.
So we'll hit yes to confirm it and update that. And there we go. Okay, close that terminal out. And now we can add in a select component
and add to this a V else if the type equals select, set the view model to our internal value.
And then we can add in the disabled and required flags that we're using elsewhere as well. For the child content of our select, we need a select trigger,
which we can pass through a slot named trigger so that we can make use of it outside of this component. Otherwise we'll default that to select value
with a placeholder set to whatever placeholder text we provide in. Then we need the select content and we'll just set that to slot, which will be our select items
that we've added outside of this component. And then so that we don't have that same issue that we had last time, let's jump back into our difficulty page, make very small change,
save it so that our automatic component import picks up that we are making use of this select item component within here. And we should now be able to jump back into our browser. Let's click on delete.
And there we go. So what difficulty would you like to assign the one courses using test one? And then we can select the difficulty that will serve as a replacement whenever we delete our test one.
So I'm gonna go ahead and put this on expert and then we'll hit delete. And there we go. Our test one is gone. And if we now right click, go down to inspect, open up our view depth tools again
and jump into our index page. If we now take a look at that last difficulty, which will be our expert one, take a look at its meta. It should now have a courses count of one
as we've now assigned that one course to this one instead of that test one, which is now deleted.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.