HTMX Edit Row Example in HARC Stack

3 months ago 2

This is the tenth of the HARC Stack essays. Previous <=

HARC Stack combines HTMX with raku Air, Red and Cro to supply a fresh approach to web development.

Your patience in stepping through this set of posts is now going to pay off. We already saw how Air::Components are the real meat in the Air sandwich (apologies to all vegans). Now we can start to knock off some of the HTMX Examples for real.

Let’s start with Edit Row. You may want to have that open in a browser tab to see the original HTMX code example.

Edit Row

Here’s the finished article in HARC Stack:

Walk Through

Let’s take a quick walk through with the focus on things we have been learning in the last couple of episodes and some new tricks.

1. [:C:R:U:D]

class Contact does Component[:R:U] { ... }

Well, here we just use [:R:U] – the stuff in square brackets after does Thing[...] allows us to pass parameters into the role we are consuming. role Component provides four switches to give us better control and security over the routes that are automatically created.

Here’s the source from Air::Component showing the receiving end:

role Component[ :C(:CREATE(:A(:$ADD))), :R(:READ(:L(:$LOAD))) = True, :U(:$UPDATE), :D(:$DELETE), ] does Component::Common {...}

Every Air::Component is able to do ADD(), LOAD(), UPDATE() and DELETE() methods that act on the Component itself. [NB. this is apart from any additional routes that may be generated around is controller methods]

CREATE and READ are aliases for ADD and LOAD to make it nicer to use the familar CRUD terminology. And all of these are also aliased by their initial letter. So we can write [:C:R:U:D] if we want the whole banana or, as in this case [:R:U] since we just want READ and UPDATE.

Here’s how they map onto HTML verbs:

Operation HTTP Verb Example Route

ADD [CREATE]	POST	/contact
LOAD [READ]	GET	/contact/id
UPDATE	PUT	/contact/id
DELETE	DELETE	/contact/id

So here’s the logger output when you start our example:

Air-Examples > raku -Ilib service.raku
theme-color=green
bold-color=red
adding GET edit-table/<id>
adding GET contact/<id>
adding PUT contact/<id>
adding GET contact/<id>/edit
adding GET nav/<id>
Build time 0.7 sec
Listening at http://0.0.0.0:3000
[OK] 200 / – 127.0.0.1
[OK] 200 /css/styles.css – 127.0.0.1
[OK] 200 /img/favicon.ico – 127.0.0.1

As you can see, the desired routes are added as specified in the Air::Component role.

We haven’t seen this before as the default is READ = True (otherwise the idea of a Component would be pretty useless!)

2. method data(%h) {}

multi method data(%h) { # stores PUT update $!name = %h<name>; $!email = %h<email>; }

You can see that each class Contact has $.name and $.email attributes.

When the browser performs a PUT to the route with the new data, then the convention is that the UPDATE action will call method data(%h) { ... } on our Component. So we need to provide a method to store the data where it belongs.

A quick look at the previous episode should illustrate what to put in this method if you are using a database as backing store for your Contact [hint: self.^save]

I have used a multi here so that in future I can add a sister multi method data {...} to get the class data in Hash form.

3. method HTML and edit

Both these methods on Contact return an HTML row in the form tr(td;td;td) … the default is served up by method HTML when the Contact component is initially rendered. Then, when the button is clicked..

td button :hx-get("/contact/{$.id}/edit"), :hx-trigger<edit>, :$onClick, 'Edit';

… the hx-get action fires method edit and that returns the active editable flavour of the tr in its place.

4. role Table

class EditTable does Table { ... }

The final novelty here is that we can compose the Air::Base::Table role to make our own custom EditTable and override the $.thead and $.tbody public attributes with method calls of our own to pass in the values we want.

Edit Row Action

Author’s note – as you can see the example implements the Sweet Alert modal popup to prevent multi row editing as shown in the original HTMX example – that code is folded away here to help keep the focus on the Air::Component features.

Next Time on this Channel

Keep watching this channel if it feels good. Tune in next time for more hot Air (geddit?). Even better, follow the Getting Started and try it out for yourself.

As usual, comments and feedback welcome. We are a friendly bunch over on the raku IRC chat and Discord.

~librasteve

Read Entire Article