Editing comments with mentions: Laravel Mentions

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.

Sign up to access "Laravel Mentions" right now.

Episodes

Transcript

Episode summary

Episode discussion