Laravel Mentions
This episode is for members only

Sign up to access "Laravel Mentions" right now.

Get started
Already a member? Sign in to continue
Playing
11. Editing comments with mentions

Episodes

0%
Your progress
  • Total: 1h 52m
  • Played: 0m
  • Remaining: 1h 52m
Join or sign in to track your progress

Transcript

00:00
Okay so completely optionally let's bring what we've done together by adding the ability to edit a comment and then we can see this in action if we want to tag more people
00:09
or remove existing tags or mentions. So let's get started with the edit text, so let's go ahead or the edit button, let's set a margin top of two for this sort of wrapper here, we'll just keep this really simple, create out a button with the edit text in here and we'll give this a class here of text small and let's say text indigo 500,
00:34
let's just take a look at that and yeah that looks okay. Now when we click on this, so let's add in a wire click here, we want to set a property on this component, perhaps editing to true, so that will toggle the editing state for us. So over in comment item which we haven't really touched much yet, we're going to create out a boolean in here called editing,
00:56
by default that's false and then what we can do is once this is clicked we can change over the paragraph to say a form. So let's create a form down here and let's just say editing and in here we can just say if not editing we're going to show the original paragraph text otherwise we're going to show the form that's where we're going to be able to fill that in. So at the moment by clicking
01:26
edit that's just going to get rid of the paragraph and add in that editing form. To keep a bit of consistency here let's add a margin top of one, we don't need the action here because this is going to be a live wire action and all we really need to do now is just fill in the form here. So let's say live wire submit edit comment and let's add in that edit comment method.
01:54
Of course we'll fill this in properly in a minute but let's just die dump here on edit for now and in here we want to do pretty much what we did when we set this up originally, so we want an x text area and we can self-close that off. We'll set a class of width full, we'll set the rows maybe to three, we'll just bump this down a little bit from what we had when we
02:17
created this out and we're pretty much going to hook this up in the same way. We're also going to hook this up to mentions so we may as well add in a ref in there for now and then just down here we're going to have out a div with a primary button to submit this, so let's call this edit and then we're going to have a secondary button in here to cancel the editing
02:43
and for that we can use wire click and we can set editing back to false. So let's just take a look at our form as it stands and yeah that looks pretty good to me for now. Okay so now what we want to do is we want to fill this in with a model which is going to be something like form.body exactly like when we first created a comment. So we are now going to create out with Livewire a form
03:17
called edit comment which is going to be pretty much the same thing as the create comment form. Let's open that up and it will be the body which will be required. So let's open up edit comment that new form and let's pretty much just pop that directly in here with rule or validate whichever one we want to use and we should be good. So now over in our comment item we can create out
03:47
the edit comment form, call that form and then of course we can validate within here so we can say this form validate which will do exactly the same thing and it will validate for us and then we can edit the comment down here. But at the moment when we hit edit of course we need to pre-populate this with the text from the body. Now there's a couple of ways that you could do this you could
04:10
do this on mount so you could create out a mount method to do this but if we think about it every time the editing property is updated that's when we want to re-fetch this value. So we can actually add in a life cycle hook in here called updated editing and that will give us whether that is true or false and we can say well if we are editing so if this if this has been toggled to true
04:38
then we're going to set this form body to this comment body so we'll just always grab the latest value. So now that we've hooked up this to form body that should when we hit edit automatically pre-fill that in which is great and it will always be up to date now because every time we hit edit this will be triggered and it will be re-updated to the latest value. Okay so when we go ahead and
05:05
submit this form we validate then we want to update the comment so this comment update and again we only want to pull through the body here so we can just say this form only and body and then we want to set this editing back to false that should be all we need. So let's go ahead and edit this to get rid of the and mable hit edit and yeah we're all good. Okay so if we go over to
05:33
our database the whole purpose of doing this was just to check and we already did test this but just to check that everything looks good in terms of dimensions when people are unmentioned for example. So let's go back over we've got no comments here I'm going to say hey Alex I know we're mentioning ourselves which we could change but we'll leave it for now and we'll say untabby
05:52
let's hit post we know that over in the database now this is going to mention two people so what we want to look out for is if I go ahead and mention another person and mable for example and we don't have our comment functionality in here at the moment to actually pull in the at but let's just edit this that should add a new person which it has and then if I go ahead and
06:15
edit this and get rid of these two and just stick with Alex or just stick with Tabby for example that should go ahead and re-sync that and we should just end up with only the user that's been mentioned. So that's the whole point of doing this edit just so we know that this works. Let's go ahead and finish up by just adding in the ability to mention people with that at stuff that
06:37
we did before so for now at least we're going to go ahead and just copy and paste this all over because it's pretty straightforward so we're going to grab the xdata and xinit part of this and we're just going to apply this to the comment item so let's go over here let's add this to here and to be honest that should be pretty much it let's just re-indent this and we should have exactly the same
06:59
functionality here now that we've done this so I could say well I want to edit this and say and Mabel that works nicely hit edit and there we go I'm mentioning two people so although not strictly necessary at least we can now see that we can edit this get our data back and we can include the at mention functionality inside the edit text area as well.
15 episodes•1 hr 52 mins

Overview

Add mentionable functionality to your Laravel applications and mention users, projects, issues… literally anything.

We’ll start by setting up a simple comment system with Livewire, then detect, sync, notify and test mentions step-by-step. Not using Livewire? Don’t worry, the core functionality works with any stack.

If you are using Alpine/Livewire, we’ll add mention support to textareas to get a list of users we’re able to mention when we hit a trigger key.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!