Demo

Index Product

Welcome to the index page, where you can find a table of records featuring smart pagination for seamless navigation.

API

Also, checkout the JSON api working too. We can change the params too, altering the response.

curl -X GET 'http://localhost:8080/api/product?page=2&limit=4'
[
    { "id": 78, "title": "Smartphone", "price": 699.99 },
    { "id": 79, "title": "Laptop", "price": 999.99 },
    { "id": 80, "title": "Fiction Book", "price": 19.99 },
    { "id": 81, "title": "T-Shirt", "price": 15.99 }
]
                        

Record Creation & Field Validation

Both the new and edit pages incorporate validation to prevent invalid submissions, ensuring a smooth user experience.

Validation is determined by the input given, so using things like ! or 0.00..99.99 will impact the database, server, and forms.

API

We are able to create records here too. Currently if error the api responds with the HTML edit page, so I will want to tweak that. Also on success it is no content, I will want to respond with the new record identifier. All in good time.

curl -X POST "http://localhost:8080/api/product" -H "Content-Type: application/json" -d '{"title": "Small Backpack", "price": 21.57}'

curl -X GET 'http://localhost:8080/api/product/115'
{ "id": 115, "title": "Small Backpack", "price": 21.57 }
                        

Changeset Superpowers

Our changesets help track errors during record creation or modification. They also retain the entered fields post-submission, so users don't lose progress if an issue arises - like trying to create a "Candy Bar" that already exists. The changeset is also where we can catch validation issues, like a title being too long. Since the form is setup 1:1 with what the server expects, that is less likely to happen. However this is useful when looking at it from an api perspective, e.g. the JSON endpoints.

API

The api will reject bad inputs as well. Better error messages todo.

# Note we already created a "Small Backpack"
curl -X POST "http://localhost:8080/api/product" -H "Content-Type: application/json" -d '{"title": "Small Backpack", "price": 21.57}'        
Error creating

curl -X POST "http://localhost:8080/api/product" -H "Content-Type: application/json" -d '{"title": "Small Backpack 2000", "price": 21.57}'        

curl -X GET 'http://localhost:8080/api/product/117'
{"id":117,"title":"Small Backpack 2000","price":21.57}

Show Record

Here's the show page, where you can view detailed information about the product just created.

API

As seen in other examples, viewing a records is accessible via the api.

curl -X GET 'http://localhost:8080/api/product/115'

{ "id": 115, "title": "Small Backpack", "price": 19.23 }                                
                        

Edit Record

The edit page offers a familiar form layout, with additional fields displayed as read-only (such as the ID), ensuring clarity on what can be modified.

API

Records can be updated via the api too.

                                
curl -X PUT "http://localhost:8080/api/product/115" -H "Content-Type: application/json" -d '{"title": "Small Backpack", "price": 19.31}'

... Looks like this one failed, todo fix
                        

Delete Confirmation

Lastly, note the delete dialog on the edit page, which prompts for confirmation before removing a record.

API

Yup, deleting works.

curl -X DELETE "http://localhost:8080/api/product/115"

curl -X GET 'http://localhost:8080/api/product/115'
Error reading: sql: no rows in result set