This episode is for members only
Sign up to access "Build a Forum with Inertia and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
26. Scaffolding the new discussion form
Episodes
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%
Transcript
00:00
In this episode, we're going to scaffold out the new discussion form,
00:03
which we know is fixed to the bottom and is triggered by the button up here, which, of course, we don't have yet. We're not going to look at that triggering functionality just yet because that requires creating a composable,
00:14
which we're going to cover in another episode. But at least we want this scaffolded out. And we're going to do this by kind of building out a layout where we can inject things into.
00:23
The reason being is that over on the discussion page itself, the reply form looks very similar. So we're going to share some functionality between them two forms. So let's go over and create a new component for this.
00:37
We're going to go into our components here on the forum and we're going to create a fixed form wrapper component. So let's create our template and let's just start to build this out. So I'm just going to say form wrapper in here.
00:52
So before we use this, we actually need a component for the create discussion form specifically. So let's create a create discussion form component. And this will use that fixed form wrapper.
01:05
Now, don't worry if you're lost. We'll be going through everything in just a second. Fixed form wrapper in here. And let's go ahead and import this just down the bottom.
01:15
So create our script tag. And we'll go ahead and import fixed form wrapper from this file. So now that we have this create discussion form using this, where do we put the create discussion form?
01:31
Well, this needs to go over on the forum layout. So let's go ahead and open this up and let's pull this in. So this is the create discussion form. And this comes from I always like to give the full path to this.
01:47
So components, forum and create discussion form. So we're going to put this inside of this form forum layout. The reason for that is when we go ahead and navigate between pages within any page on our forum,
02:05
we want this form to stay in place. If it's anywhere else, if it's just on the index and we click over to a discussion to maybe reference a specific post that we want to use to build up our discussion,
02:18
that component is going to disappear. So we basically want to keep this component on every single forum page so we can toggle it and then just browse the forum and it always stays open. So let's go over to our create discussion form once again.
02:33
We've got our fixed form wrapper in here in our fixed form wrapper. We're just saying form wrapper that should actually be down there. It's a little bit hidden by the debug bar, but you can see it is actually there. So over in the fixed form wrapper, let's start to create some rough styles
02:49
to get this to look a little bit nicer. So this is going to be fixed because we know it wanted to be fixed to the bottom of the page. So we're going to set bottom to zero.
02:58
We'll set the width here to full. We'll set the background white. We'll give this some padding. We're going to set a border on the top to maybe four
03:07
and the border to a grey 100 and any items in here we want spaced out by three. The reason that we're adding the border in here is it just gives a border so it separates it from any other of the white content on the page.
03:22
But we basically now have our fixed form wrapper on the page that is completely fixed to the bottom and just does not move. Now, when I click over to another page, you can see it stays there because it's always within that forum layout, which is exactly what we wanted.
03:36
Now, the content within the fixed form wrapper, we want to be slightly centered to match up with everything else. So we're going to go ahead and pretty much do what we did for the overall layout and set a max width of seven XL.
03:49
We'll set the margin on the X axis to auto on small viewport and up we'll set a padding of six and on a large viewport and up we'll set a padding of eight. So we're just mimicking the components that we've got on the page here already.
04:04
So now you can see that the form wrapper is sat within our content and just doesn't look a little bit weird and all over the place. Now, what we're going to do is start to slot in the content that we're going to want to see.
04:15
So we're going to have a slot in here for the header. So let's create this out in here and below this we're going to have. Let's just see where we are down here.
04:30
We're going to have a slot called main where we can slot the main form in. And then just down here, we're going to have a slot called button. Because this form is always going to have a button which submits the current form.
04:46
So now what we can do is over in the create discussion form, we can start using them to build this up. So the first one is going to be the header. So let's create out the slot header.
04:59
And in here, we'll just go ahead and add an H1 and say new discussion. And let's style this up real quick. So we'll set the text to large and the font just to medium. Now that's going to slot into there and we see that as the header up here.
05:17
Eventually going to have the X icon here as well to close this off. Down here, we can go ahead and create out the slot for the main content. So template the slot and main. And let's pull this down.
05:31
That is going to be our form. And then we'll finally end up with our button for the button slot like so. So we've got the title, the form and the button to submit this. So all we're going to do now is just start to build up the form as we want it to see.
05:48
It's not going to do anything, but at least we have it in there. So we're going to create a div out here with a class of flex items start and a space X of three. This is going to be the title on one side and the topic that we want to choose
06:04
on the other side. So we're going to create a div out here. That's going to be the input. It's just roughly style this out first, and then we'll go ahead
06:11
and switch this over to the components that we've already got within this project. So we'll create a select out here, just really, really roughly with an option in there. And we'll just say Laravel.
06:22
So it's going to look something like that. However, for this one, we want this to grow. So let's set a flex grow on this to fill up the width. And there we go. Great.
06:35
So for our input, we can set that with a class of width full eventually. Like this, and that's just going to go ahead and look like that. Next up and underneath this, we want the text area. So let's just create a div out here with a text area.
06:49
And again, we'll just set a width of full on this, but we'll switch this out to another component. And there we go. It's going to look something like that.
06:57
Let's just produce these rows down to four. There we go. And then finally, we want the button styled out as well. So this is going to be the button
07:07
with a type of submit to actually submit this form. And of course, we need to add some text. So let's say create. OK. So let's space these out.
07:18
This is going to be within the fixed form wrapper. Because remember, we want this to be very, very specific to both of these. And we want this to work nicely. So we'll set a margin top of four just before the main content.
07:29
And then we'll do the same for the button as well. So we'll set a margin top of four on there. And then that just nicely spaces everything out inside of here. OK, so now what we're going to do is just start to build up
07:40
all of these form items with the components that we've already got inside of Breeze. So the first one is the text input just down here. Now, we can actually steal this from something like the login page. So if we look for email, for example.
07:56
Let's find that in our markup. You can see that we've got an input label, a text input and an input error. So all of these we're going to want. So I'm actually going to grab this and just copy and paste it over.
08:08
We can fiddle around with what we have in here. So let's have a look here. This is going to be the text input. So let's go ahead and paste all of them in there.
08:17
And we can actually, yeah, we'll keep this within the div wrapper. Makes more sense to do that. And this is going to be for the title of the topic, the discussion. So title.
08:29
And we're going to set a class on this of screen reader only. So it's hidden. This is going to be title. Type of text.
08:39
We'll get rid of the class for now. We don't have a form element. We do want this to be required, but we're going to get rid of that validation just for now.
08:47
And we won't autofocus or autocomplete this. So let's just pull these up. Just make this a little bit tidier. And we'll pull these up together as well.
08:57
And again, we don't have any message in here yet. So we'll just go to comment that out. Okay. So we've got our input just in here.
09:04
Let's go ahead and import all of these components so we can actually start to use them. So import text input from here. And we will import form label or label input label.
09:20
And also the error as well, which I think is input error. And there we go. So that's going to look a little bit better already. Okay.
09:28
So for that, let's go ahead and style this up. So the text input is going to have a width of full. And there we go. Great.
09:36
So actually for each of these items here that we've got, we could go ahead and separate these out because we've got our option down here and then our text area down here. So actually let's just give this a margin top of let's say two.
09:58
Yeah, I think that's okay. Great. Okay. So let's go ahead and finish this up.
10:02
Once we've done all this, it's going to be a lot easier to just copy and paste it over. So we're going to do the same thing for the selects like we did on the homepage.
10:10
So let's go over to index, search for that select, and we're just going to grab this whole thing in here and then just modify this. So let's go ahead and just paste this in and we'll come up
10:21
here and re-indent this. We don't need an on change here because this is just going to be part of the form. All topics doesn't apply here because it always has to be a
10:30
topic. Although what we could do is say something like choose a topic. And of course the value is going to be empty.
10:39
The value for each of the topics remains. The iteration remains. Remember this is global. So we don't need to put it in anywhere.
10:45
The key remained, but we don't want selected in there. So that should be good. And there we go. Now we haven't imported this select component here just yet.
10:54
So let's do that now. And that should look a lot better. Great. So last but not least, then we're done is going to be the
11:01
text area, which we are going to go ahead and create a component for. So we're going to take the text input because this is all very similar and we're going to copy this and create out a new
11:11
component called textarea.view. Paste this in and let's go ahead and switch this out for a text area. And of course, a text area is not self-closing.
11:22
So we're going to close that here. Let's just double check everything here. I think everything here can stay. All of this code can stay.
11:29
This is just to detect if it needs an autofocus and then automatically focus on it. And we should be good. So it's really just a copy and paste job there.
11:38
So now we can go ahead and add in that text area component, like so. And let's go down and import this. And we should be good.
11:53
OK, so that's nicely styled out. But we're just going to add some additional things to this. So we'll add a class of width full.
12:01
And we'll set the rows on this to say six, like so. Great. So we've now got a title, a topic, and the actual body of the post.
12:11
Last but not least is the button itself. Again, if we look at the login page, we've got this primary button, which we can steal. And we can go ahead and just paste that in, import that,
12:22
and we should be good. So let's say just create discussion. And let's get rid of this class here for when the form is processing and disabled.
12:31
And we don't need a margin on that either. So we should be good. Let's import this. And that should be looking a lot better.
12:39
Primary button, and there we go. So that was a lot to do. But we now have a form which we can copy over to our reply form as well.
12:49
So we've sort of done all the hard work here. And we've not really had to write much code ourselves in terms of getting the form working, because we already have these available.
12:57
Last thing I'm going to do is just fix up the spacing here. So if we take a look at what we're doing within these two things, we set a margin on the top of two here. We could bump that up to four.
13:12
And yeah, I think that looks a little bit better. We can always change that up later. So there is our fixed form wrapper with all of the components that we need inside to
13:21
create a new discussion. What we're now going to do, though, is look at toggling this from the button up here, because at the moment, it just lives on the page.
62 episodes•6 hrs 54 mins•1 year ago
Overview
Ready to build a forum with Inertia and Laravel?
Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.
So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.