Now that we've given our tasks a lot of attention, let's now focus our minds on the columns. So the first thing I want to do is make each of the column titles editable. That is, I should be able to click directly on the title and just start editing. Alright, so in order to do that, here in Trello board dot view, let's replace this printout of column dot title with a text input.
And I'm just going to paste this in. Now this text input has a couple things going on. title. So this just binds that input to the title on the current column object and right away we've got quick and easy editing.
enter I am just blurring the input so you can kind of commit that title change whenever you hit enter. Then lastly and maybe even most importantly up here in the class list. There is this BG transparent tailwind class So I really like this approach of using an input to display the heading But then on focus of that input Make it look like something that is editable. So when it's not focused Even though it's still an input.
It doesn't really look like it. It just looks like a heading of a column It looks kind of like an h1 or h2 or whatever, right? But then when I focus on it, I can immediately start editing it and it has that familiar input feeling. So this is a really quick and easy way to make inline editing, what what feels like inline editing on the page, a super, super simple process.
OK, so now I can update the backlog column to anything I want. Perfect. Next, let's move on to creating a new column in the actual Trello application. That looks something like adding a button to the end of the list of columns.
view, I'm going to paste in some predefined markup. Let's do that after, let's see, after all of the columns here. So here is our vModel. Whoops, no, that's for column tasks.
Here is our draggable for the columns themselves. So let me fold that up. And then after draggable, I'll paste in our create column button. So I'll hit save and then we get this add another column button here.
But I want it to float up beside all my other columns. So I'll give this a class of flex. And then we want to align top, I believe. Nope, it's item star.
Then I'll take my overflow X auto class here from the draggable. And then we'll just move it up to this wrapper div. Awesome. So now when I scroll through this, sure enough, we do have that add another column there at the very end.
Perfect. Let me also do this gap for here as well, just so we have the same spacing. All right. So in this button that we dragged in, you can see that I'm calling a create column function on click, but we haven't defined that yet.
Therefore up in script setup, Let's create a function called createColumn. The job of this function is going to be fairly straightforward. What we need to do is create a new column object and then push it into the columns array. So our column object would look something like this.
We'll say const column equals a new object. It will have an ID on it and that will be randomly generated by Nanoid. It should also have, I believe it's a title. Let me actually explicitly type it with TypeScript so that I know I'm adding all the correct properties.
I can do that with colon column after my variable name declaration. Now when I hover over it, you could see that property tasks is missing from the column type. Awesome. So let's just make title a empty string for now.
And then we can add an empty array of tasks. Because that makes sense. Our new column shouldn't have any tasks to begin with. Perfect.
Now all we need to do is push this new column to the existing columns. Alright, let's give that a try over in the browser now. I'll click add another column. And sure enough, we have a new column added to the board.
Now its title is blank. but that's to be expected. We added in a blank string. Clicking on the title, we can immediately start editing it.
That's pretty nice, but I think what would be even better would be for us to click add another column and then that title input automatically be focused so that we can start adding a column title right away. Essentially, that means we need to focus the last column's title input. at the end of our create column function. So if we check down here inside of our draggable, how can we identify each column?
Well, they have a column class. So that sounds awesome. So that means we could do something like document dot query selector. We could say dot column, maybe last of type, I think should work.
And then in that last column, we want to focus the title input. Now this class doesn't actually exist yet. So let me copy that and add it to our input that we're using to display the title. Great.
Lastly, we just need to call focus on the element. And I'm getting some red squiggly lines. It's saying that object is possibly null. So let's just assume that this is always going to exist.
And I'll explicitly type it using TypeScript. here with the as keyword. So we'll say as HTML input element. This should be a pretty safe assumption to make as we are just putting in that new column right before we try to focus it.
One thing we are lacking though is making sure that Vue has actually updated things in the DOM. js core. This is just a good way to ensure that Vue has actually updated the DOM before we try to manually query it. And let's make sure that my IDE has correctly auto-imported this for me.
Oh, it has not, but that's okay, because we're in Nuxt, and therefore this is automatically made available. All right, now if I come over to the end, hit add another column, sure enough, this time the input is focused and I can start naming it right away. Finally, let's complete the column functionality by letting our user delete a column. Once again, we could provide a little X somewhere that allows the user to click to delete, but let's experiment with a slightly different approach, much like we did for deleting tasks.
So what I want to do instead is on the input here that powers the column name editing, I want to listen to the key down event. and more specifically listen for the key down of the backspace button, then we can say that if there is no title at all and the user is hitting backspace, that means they want to delete the whole column. title and if it's equal to an empty string, we can remove the current columns from the columns array. Otherwise, we'll just do nothing at all.
If you really wanted to, you could extract this functionality into a named function up in script setup. But I think it's just sufficiently short enough that we can throw it inside the template without any negative effects on legibility. Let's give it a try over in the browser. If I focus on my new column over here, and I'll put the cursor all the way to the end and backspace it just a bit.
Now I can backspace it to no name at all. But if I hit backspace, One more time. Sure enough, the column is deleted just as we'd expect. In conclusion, I think we've made some interesting choices during this course when it comes to interacting with our Trello clone via the keyboard.
I encourage you to do the same in your own applications and think not just about the mouse, but also about the keyboard. Now that we've given our tasks a lot of attention, let's now focus our minds on the columns. So the first thing I want to do is make each of the column titles editable. That is, I should be able to click directly on the title and just start editing.
Alright, so in order to do that, here in Trello board dot view, let's replace this printout of column dot title with a text input. And I'm just going to paste this in. Now this text input has a couple things going on. title.
So this just binds that input to the title on the current column object and right away we've got quick and easy editing. enter I am just blurring the input so you can kind of commit that title change whenever you hit enter. Then lastly and maybe even most importantly up here in the class list. There is this BG transparent tailwind class So I really like this approach of using an input to display the heading But then on focus of that input Make it look like something that is editable.
So when it's not focused Even though it's still an input. It doesn't really look like it. It just looks like a heading of a column It looks kind of like an h1 or h2 or whatever, right? But then when I focus on it, I can immediately start editing it and it has that familiar input feeling.
So this is a really quick and easy way to make inline editing, what what feels like inline editing on the page, a super, super simple process. OK, so now I can update the backlog column to anything I want. Perfect. Next, let's move on to creating a new column in the actual Trello application.
That looks something like adding a button to the end of the list of columns. view, I'm going to paste in some predefined markup. Let's do that after, let's see, after all of the columns here. So here is our vModel.
Whoops, no, that's for column tasks. Here is our draggable for the columns themselves. So let me fold that up. And then after draggable, I'll paste in our create column button.
So I'll hit save and then we get this add another column button here. But I want it to float up beside all my other columns. So I'll give this a class of flex. And then we want to align top, I believe.
Nope, it's item star. Then I'll take my overflow X auto class here from the draggable. And then we'll just move it up to this wrapper div. Awesome.
So now when I scroll through this, sure enough, we do have that add another column there at the very end. Perfect. Let me also do this gap for here as well, just so we have the same spacing. All right.
So in this button that we dragged in, you can see that I'm calling a create column function on click, but we haven't defined that yet. Therefore up in script setup, Let's create a function called createColumn. The job of this function is going to be fairly straightforward. What we need to do is create a new column object and then push it into the columns array.
So our column object would look something like this. We'll say const column equals a new object. It will have an ID on it and that will be randomly generated by Nanoid. It should also have, I believe it's a title.
Let me actually explicitly type it with TypeScript so that I know I'm adding all the correct properties. I can do that with colon column after my variable name declaration. Now when I hover over it, you could see that property tasks is missing from the column type. Awesome.
So let's just make title a empty string for now. And then we can add an empty array of tasks. Because that makes sense. Our new column shouldn't have any tasks to begin with.
Perfect. Now all we need to do is push this new column to the existing columns. Alright, let's give that a try over in the browser now. I'll click add another column.
And sure enough, we have a new column added to the board. Now its title is blank. but that's to be expected. We added in a blank string.
Clicking on the title, we can immediately start editing it. That's pretty nice, but I think what would be even better would be for us to click add another column and then that title input automatically be focused so that we can start adding a column title right away. Essentially, that means we need to focus the last column's title input. at the end of our create column function.
So if we check down here inside of our draggable, how can we identify each column? Well, they have a column class. So that sounds awesome. So that means we could do something like document dot query selector.
We could say dot column, maybe last of type, I think should work. And then in that last column, we want to focus the title input. Now this class doesn't actually exist yet. So let me copy that and add it to our input that we're using to display the title.
Great. Lastly, we just need to call focus on the element. And I'm getting some red squiggly lines. It's saying that object is possibly null.
So let's just assume that this is always going to exist. And I'll explicitly type it using TypeScript. here with the as keyword. So we'll say as HTML input element.
This should be a pretty safe assumption to make as we are just putting in that new column right before we try to focus it. One thing we are lacking though is making sure that Vue has actually updated things in the DOM. js core. This is just a good way to ensure that Vue has actually updated the DOM before we try to manually query it.
And let's make sure that my IDE has correctly auto-imported this for me. Oh, it has not, but that's okay, because we're in Nuxt, and therefore this is automatically made available. All right, now if I come over to the end, hit add another column, sure enough, this time the input is focused and I can start naming it right away. Finally, let's complete the column functionality by letting our user delete a column.
Once again, we could provide a little X somewhere that allows the user to click to delete, but let's experiment with a slightly different approach, much like we did for deleting tasks. So what I want to do instead is on the input here that powers the column name editing, I want to listen to the key down event. and more specifically listen for the key down of the backspace button, then we can say that if there is no title at all and the user is hitting backspace, that means they want to delete the whole column. title and if it's equal to an empty string, we can remove the current columns from the columns array.
Otherwise, we'll just do nothing at all. If you really wanted to, you could extract this functionality into a named function up in script setup. But I think it's just sufficiently short enough that we can throw it inside the template without any negative effects on legibility. Let's give it a try over in the browser.
If I focus on my new column over here, and I'll put the cursor all the way to the end and backspace it just a bit. Now I can backspace it to no name at all. But if I hit backspace, One more time. Sure enough, the column is deleted just as we'd expect.
In conclusion, I think we've made some interesting choices during this course when it comes to interacting with our Trello clone via the keyboard. I encourage you to do the same in your own applications and think not just about the mouse, but also about the keyboard.