Finish working functionality

Author: pydanny

examples/adv_app2.py

@@ -3,11 +3,9 @@
 from functools import partial
 from dataclasses import dataclass
 from hmac import compare_digest
-from monsterui.all import *
-
-db = database(':memory:')
 
 
+db = database(':memory:')
 
 class User: name:str; pwd:str
 
@@ -26,12 +24,17 @@ def __ft__(self:Todo):
     # which HTMX uses to trigger a GET request.
     # Generally, most of your route handlers in practice (as in this demo app) are likely to be HTMX handlers.
     # For instance, for this demo, we only have two full-page handlers: the '/login' and '/' GET handlers.
-    show = AX(self.title, f'/todos/{self.id}', 'current-todo')
-    edit = AX('edit',     f'/edit/{self.id}' , 'current-todo')
-    dt = '✅ ' if self.done else ''
+    ### show = AX(self.title, f'/todos/{self.id}', 'current-todo')
+    ### edit = AX('edit',     f'/edit/{self.id}' , 'current-todo')
+    ### dt = '✅ ' if self.done else ''
     # FastHTML provides some shortcuts. For instance, `Hidden` is defined as simply:
     # `return Input(type="hidden", value=value, **kwargs)`
-    cts = (dt, show, ' | ', edit, Hidden(id="id", value=self.id), Hidden(id="priority", value="0"))
+    cts = ('✅ ' if self.done else '',
+            AX(self.title, todo_detail.to(id=self.id), 'current-todo'),
+            ' | ',
+            AX('edit',     todo_edit.to(id=self.id) , 'current-todo'),
+            Hidden(id="id", value=self.id),
+            Hidden(id="priority", value="0"))
     # Any FT object can take a list of children as positional args, and a dict of attrs as keyword args.
     return Li(*cts, id=f'todo-{self.id}')
 
@@ -44,19 +47,30 @@ def user_auth_before(req, sess):
     user_auth_before,
     skip=[r'/favicon\.ico', r'/static/.*', r'.*\.css', r'.*\.js', '/login']
 )
-app, rt = fast_app(hdrs=Theme.blue.headers()+[SortableJS('.sortable'),],before=beforeware)
+app, rt = fast_app(hdrs=[SortableJS('.sortable'),],before=beforeware)
 
 # Authentication
 login_redir = Redirect('/login')
 
 @rt('/login')
 def get():
+    # This creates a form with two input fields, and a submit button.
+    # All of these components are `FT` objects. All HTML tags are provided in this form by FastHTML.
+    # If you want other custom tags (e.g. `MyTag`), they can be auto-generated by e.g
+    # `from fasthtml.components import MyTag`.
+    # Alternatively, manually call e.g `ft(tag_name, *children, **attrs)`.
     frm = Form(
-        LabelInput("Name", name='name'),
-        LabelInput("Password", name='pwd', type='password'),
+        # Tags with a `name` attr will have `name` auto-set to the same as `id` if not provided
+        Input(id='name', placeholder='Name'),
+        Input(id='pwd', type='password', placeholder='Password'),
         Button('login'),
         action='/login', method='post')
-    return Titled("Login", frm, cls=ContainerT.sm)
+    # If a user visits the URL directly, FastHTML auto-generates a full HTML page.
+    # However, if the URL is accessed by HTMX, then one HTML partial is created for each element of the tuple.
+    # To avoid this auto-generation of a full page, return a `HTML` object, or a Starlette `Response`.
+    # `Titled` returns a tuple of a `Title` with the first arg and a `Container` with the rest.
+    # See the comments for `Title` later for details.
+    return Titled("Login", frm)
 
 @dataclass
 class Login: name:str; pwd:str
@@ -90,7 +104,7 @@ def index(auth):
 
 @rt
 def add_todo(todo:Todo, auth):
-    new_inp =  LabelInput('Title', id="new-title", name="title", placeholder="New Todo", hx_swap_oob='true')
+    new_inp =  Input(id="new-title", name="title", placeholder="New Todo", hx_swap_oob='true')
     # `insert` returns the inserted todo, which is appended to the start of the list, because we used
     # `hx_swap='afterbegin'` when creating the todo list form.
     return db.todos.insert(todo), new_inp
@@ -105,5 +119,53 @@ def reorder(id:list[int]):
     # and the server.
     return tuple(db.todos(order_by='priority'))
 
+@rt
+def todo_detail(id:int):
+    todo = db.todos[id]
+    # `hx_swap` determines how the update should occur. We use "outerHTML" to replace the entire todo `Li` element.
+    btn = Button('delete', hx_delete=todos_delete.to(id=id),
+                 target_id=f'todo-{todo.id}', hx_swap="outerHTML")
+    # The "markdown" class is used here because that's the CSS selector we used in the JS earlier.
+    # Therefore this will trigger the JS to parse the markdown in the details field.
+    # Because `class` is a reserved keyword in Python, we use `cls` instead, which FastHTML auto-converts.
+    return Div(H2(todo.title), Div(todo.details, cls="markdown"), btn)
+
+@rt
+def todo_edit(id:int):
+    # The `hx_put` attribute tells HTMX to send a PUT request when the form is submitted.
+    # `target_id` specifies which element will be updated with the server's response.
+    res = Form(Group(Input(id="title"), Button("Save")),
+        Hidden(id="id"), CheckboxX(id="done", label='Done'),
+        Textarea(id="details", name="details", rows=10),
+        hx_put="/", target_id=f'todo-{id}', id="edit")
+    # `fill_form` populates the form with existing todo data, and returns the result.
+    # Indexing into a table (`todos`) queries by primary key, which is `id` here. It also includes
+    # `xtra`, so this will only return the id if it belongs to the current user.
+    return fill_form(res, db.todos[id])
+
+# Refactoring components in FastHTML is as simple as creating Python functions.
+# The `clr_details` function creates a Div with specific HTMX attributes.
+# `hx_swap_oob='innerHTML'` tells HTMX to swap the inner HTML of the target element out-of-band,
+# meaning it will update this element regardless of where the HTMX request originated from.
+def clr_details(): return Div(hx_swap_oob='innerHTML', id='current-todo')    
+
+@rt("/")
+def put(todo: Todo):
+    # `update` is part of the MiniDataAPI spec.
+    # Note that the updated todo is returned. By returning the updated todo, we can update the list directly.
+    # Because we return a tuple with `clr_details()`, the details view is also cleared.
+    return db.todos.update(todo), clr_details()    
+
+
+# This route handler uses a path parameter `{id}` which is automatically parsed and passed as an int.
+@rt(methods=['DELETE'])
+def todos_delete(id:int):
+    # The `delete` method is part of the MiniDataAPI spec, removing the item with the given primary key.
+    db.todos.delete(id)
+    # Returning `clr_details()` ensures the details view is cleared after deletion,
+    # leveraging HTMX's out-of-band swap feature.
+    # Note that we are not returning *any* FT component that doesn't have an "OOB" swap, so the target element
+    # inner HTML is simply deleted. That's why the deleted todo is removed from the list.
+    return clr_details()
 
 serve()