Showing A Course's Details

In This Lesson

We'll add our courses show page, which will be in charge of displaying the course details along with its modules & lessons. In this lesson we'll lay the groundwork, then in the next module we'll add in our modules & lessons.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

So we want to add in a get route to our courses, add in an ID route parameter. That will make use of our courses controller and we'll add in a show method here momentarily
called courses show. We can go ahead and jump into our terminal and we'll want to make a new action inside of our courses directory called get course.
Clear that out, jump back into our text editor and before we fill out the controller, let's jump into that get course method and fill that out. This will need to accept in an ID so that we know what course we want to get,
the organization of type organization, and then we can go ahead and extract that out of our handle method. First things first, we need to get our course.
So we'll await organization, related courses, query where the ID matches the ID we're looking for. And then we want to grab the first or fail
so that we get a 404 if it's not found. I'm gonna go ahead and break this down because we also have some stuff. So we're going to want to preload in our access level
as well as the difficulty and the status for the course. And we'll circle back to this action here in a little bit. For now, let's go and just return the course
and let's return it as an object as that at the end of the day, won't be the only thing that we'll want to return here. And then go ahead and save it so that we get our formatting. We can now go ahead and jump into our courses controller
and let's scroll up and put this just after our store method here. And we'll go ahead and call it show, taking the params, inertia and organization
out of the HTTP context. We can go ahead and grab our course from our await get course action, making sure that you get the singular
and not the plural version and call the handle method, passing in the ID from our params ID as well as the organization. Then we'll want to return inertia render
and we'll have a page called courses show that we can pass the course details into as our course DTO.
We just wanna pass the course into the constructor there to have that converted. We can now go ahead and right click our courses folder and add in a new file called show.view.
For this, we're going to want our script set up with a line set the TS. Let's go ahead and grab our props. So we'll define props there and set the type to organization
of type organization DTO, course of type course DTO. And then we'll want to convert our course into a ref so that we can mutate it,
but we still want to maintain access to the original data from our props as we mutate the ref version. So I'm gonna call this our internal course
rather than just course here. And we'll set that equal to our view ref and so that we don't accidentally mutate the prop value, I'm gonna go ahead and spread in our props force
into that ref. Just like we did in past, we now want to watch effect and set the internal course value anytime that our props force changes.
And just as we are with our ref, we also want to spread that prop so that we don't mutate the prop directly. Then for our template, we'll add in our app head
and we can set the title to the course's name and provide a description of manage your course and then pack the course name in there.
We're then gonna want a div class with full max width screen, LG, MX auto, BG background, order, rounded, XL,
PY4 and then LGPX4. Then we'll do another div class, flex, flex wrap, items center, justify between and margin bottom six.
We'll add in an H1 with a class of text to XL, font bold and PX4 that displays our course's name.
Then we can go ahead and add another div with a class flex items center, justify end and add a gap of two. And this div is gonna hold our action.
So we'll have a button size small, variant of ghost, and then inside of it, we'll add in a pencil icon from LucideView next with a class width three,
H3 margin right two. And this will be our edit button. We can go ahead and give that button there a copy and a paste, switching the icon to our trash two icon,
again from LucideView next and switching the text to delete. At the bottom of our template now, we want to add a reusable course actions component,
add a ref called actions and pass the organization prop in. Now we need to grab that ref inside of our script so that we can use it. So let's scroll up back to there,
const actions equals, and then just provide it an empty ref. Now that we have access to our actions, we can scroll back down to our buttons and add at click event handlers for them,
calling actions edit for our edit button, passing that internal course in. And then we can go down to our delete and do the same.
So at click actions, destroy internal force. Now we also want to add some indicator that this is a destructive fashion, but we don't want this button to always be red.
So I'm gonna leave the variant as ghost, but add a class in that when this button is hovered, we change the text to a red 500
to give it some resemblance of a destructive action there. And that should now get us to a very bare bones courses show page. So if we jump back into our browser at this point,
I think that's from as we were working on our template. So let's go to refresh. Yep, sure enough, looks good now. We should be able to jump into one of our courses by clicking on the courses name here.
So if we do that, there is our bare bones page so far, we should be able to edit and let's just tack edit onto there to test it out. Sure enough, that's working A-okay. And we should be able to go back.
Let's do another delete me. So we'll add in a delete me course, jump into that one, and we should now be able to delete and delete that course away. And if you noticed, whenever we briefly hovered over delete,
the text changed to red. So we're not using destructive here so that it doesn't stand out so much on the page whenever no focus is dragged to it. And we'll just switch the text to red
to get that destructive meaning whenever it is hovered over.

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.