One Minute Changes — Part 4

Okay. Now for some fun. I need to make a modal component. I did start it, but I can’t remember how awful it looked so here it is:

Well I think we can all agree that not only does it look like shit, but it’s actually not even functional.

The title is passed in as a prop, the content is a slot and the footer, where it says content footer, is just hard-coded inside the modal component. It needs style, it needs some way of knowing to close itself and it needs some way for you to say “accept” after you’ve entered a result. It also needs a timer to time the user. What can we do about this?

I’m going to attempt to pass functions as props so that it can receive an array of objects as a prop with a label and a function. Or is that nuts? Maybe it should just emit an event.

Okay, what I’ve done is create a computed that looks like this:

This array is then passed as a prop to the modal and it means I can pass in the action methods as well, currently all they do, however, is log out some text. Seems like that problem’s solved but it’s pretty ugly.

Designy time? Well. Like most bootstrap modals it should probably have separators below the header and above the footer. I could just plonk those on the content at the top and bottom with a border.

Still looks rubbish. Let’s add some padding to the header.

Better. Now let’s make the close button the font awesome times icon.

For some reason the lines look too thick to me, the borders. But it’s taking shape. I’ll leave it for now as I want to get some munchy munch from the kitcherinerarea, but I think this is an improvement. All the backend really needs is a route for a post request to which we send a change id and a result. We can test it just by plonking in a text field in the modal for now and then submit the result when the user hits the okay button. Then I will imagine up a design. I want to have a component that is a canvas, really, to be able to animate a circular thing as the time ticks down. The canvas will make that easy, right?

Let’s start with the text input stuff because that’ll be the backend sorted. Where do we want to write the value? It will be to the table named user_chord_changes. To write the correct value we will need to send the count and the change id. We’ll also need the user id but that can be gained from the backend since it is aware. Not sure how that will play out if we use tokens, hopefully the user can be figured out in the same way but one step at a time. Let’s start with a route:

And we will need to write the function inside the UserController. The following makes sense to me. No idea if it’ll actually work but it makes sense:

So now we need a way for the okay action of the modal to be able to get hold of these items. The count will come from the modal. Let’s not even bother with the text input and stick with a hard coded 666 for now. Since the function is called from the modal we can pass back a value. What am I talking about, the modal content is actually in a slot! So it should be easy enough to get the count out of it. Okay that worked. I put an input of type text into the content, hooked it up with a v-model data value called currentCount and Bob’s your Uncle. So we have the count to send. Next we need the change id. Actually that’s all we need.

It turns out, after a long sleep, the above didn’t work, but it was close. That get function appears to return a collection when used like the above, maybe it always does, but I used first, and I hit the route with the following:

So here we’re hitting the endpoint and sending the data it needs; the count grabbed from the v-modelled variable on the input of the modal which is the slot content for the modal, and the currentChangeID. I did have a quirk to fix since I was only incrementing the current index in some code once per triangle row rather than once per item. It’s foggily described but I was pleased to have fixed it.

The next step will be to ensure that the modal disappears when you’ve submitted a result and to make sure that the data is updated in Vue’s reactive and magic way. I might even try to do that in my sleepy time way. I’m tired.

It turns out that updating the data was easy:

And since I think the modal is v-ifed on a variable within the dashboard itself, it should be easy to hide it. Actually I think I can just call toggleModal. Turns out the function was called closeModal, but that’s all I’ve added. And for the cancel button?

Okay, so data is saving and the modal is closing. Numbers show for my logged in user! I am pleased.

A coder, a rambler...and now wondering if maybe design and actual art, very different, should form my future...