Enable progressive enhancement

python_flask/packager/components/NewPackageList.py

@@ -13,6 +13,9 @@ def NewPackageList(name=None, description=None, error=False, errormsg=None):
         data_hx_post="/list/",
         data_hx_target="#pkglist-manager",
         data_hx_swap="outerHTML",
+        action="/list/",
+        target="_self",
+        method="post",
         _class=cls("mt-8", "p-5", "border-2", "border-gray-200"),
         **{"x-on:htmx:before-request": "(e) => submit_enabled || e.preventDefault()"},
     ) as doc:

python_flask/packager/components/PackageListManager.py

@@ -25,6 +25,3 @@ class PackageListManager:
             )
 
         self.doc = doc
-
-    def render(self):
-        return self.doc.render()

python_flask/packager/components/PackageListTable.py

@@ -5,6 +5,53 @@ from dominate.util import raw
 from ..helpers import *
 
 
+class PackageListTableRow:
+    def __init__(self, pkglist):
+        with t.tr(_class=cls("h-10", "even:bg-gray-100", "hover:bg-purple-200")) as doc:
+            t.td(pkglist.name, _class=cls("border", "px-2")),
+            t.td(str(pkglist.description), _class=cls("border", "px-2")),
+            t.td(
+                t.span(_class=cls("mdi", "mdi-delete", "text-xl")),
+                id="delete-packagelist",
+                data_hx_delete=f"/list/{pkglist.id}",
+                _class=cls(
+                    "border",
+                    "bg-red-200",
+                    "hover:bg-red-400",
+                    "cursor-pointer",
+                    "w-8",
+                    "text-center",
+                ),
+            ),
+            t.td(
+                t.span(_class=cls("mdi", "mdi-pencil", "text-xl")),
+                id="edit-packagelist",
+                data_hx_post=f"/list/{pkglist.id}/edit",
+                _class=cls(
+                    "border",
+                    "bg-blue-200",
+                    "hover:bg-blue-400",
+                    "cursor-pointer",
+                    "w-8",
+                    "text-center",
+                ),
+            ),
+            t.td(
+                t.span(_class=cls("mdi", "mdi-arrow-right", "text-xl")),
+                id="edit-packagelist",
+                # data_hx_post=f"/list/{pkglist.id}/edit",
+                _class=cls(
+                    "border",
+                    "bg-green-200",
+                    "hover:bg-green-400",
+                    "cursor-pointer",
+                    "w-8",
+                    "text-center",
+                ),
+            ),
+        self.doc = doc
+
+
 def PackageListTable(pkglists):
     doc = t.div(id="packagelist-table")
     with doc:
@@ -14,7 +61,6 @@ def PackageListTable(pkglists):
             _class=cls(
                 "table",
                 "table-auto",
-                # "border-separate",
                 "border-collapse",
                 "border-spacing-0",
                 "border",
@@ -32,49 +78,6 @@ def PackageListTable(pkglists):
                 )
             with t.tbody(data_hx_target="closest tr", data_hx_swap="outerHTML"):
                 for pkglist in pkglists:
-                    t.tr(
+                    PackageListTableRow(pkglist).doc
-                        t.td(pkglist.name, _class=cls("border", "px-2")),
-                        t.td(str(pkglist.description), _class=cls("border", "px-2")),
-                        t.td(
-                            t.span(_class=cls("mdi", "mdi-delete", "text-xl")),
-                            id="delete-packagelist",
-                            data_hx_delete=f"/list/{pkglist.id}",
-                            _class=cls(
-                                "border",
-                                "bg-red-200",
-                                "hover:bg-red-400",
-                                "cursor-pointer",
-                                "w-8",
-                                "text-center",
-                            ),
-                        ),
-                        t.td(
-                            t.span(_class=cls("mdi", "mdi-pencil", "text-xl")),
-                            id="edit-packagelist",
-                            data_hx_post=f"/list/{pkglist.id}/edit",
-                            _class=cls(
-                                "border",
-                                "bg-blue-200",
-                                "hover:bg-blue-400",
-                                "cursor-pointer",
-                                "w-8",
-                                "text-center",
-                            ),
-                        ),
-                        t.td(
-                            t.span(_class=cls("mdi", "mdi-arrow-right", "text-xl")),
-                            id="edit-packagelist",
-                            # data_hx_post=f"/list/{pkglist.id}/edit",
-                            _class=cls(
-                                "border",
-                                "bg-green-200",
-                                "hover:bg-green-400",
-                                "cursor-pointer",
-                                "w-8",
-                                "text-center",
-                            ),
-                        ),
-                        _class=cls("h-10", "even:bg-gray-100", "hover:bg-purple-200"),
-                    )
 
     return doc

python_flask/packager/components/__init__.py

@@ -1,3 +1,4 @@
 from .NewPackageList import NewPackageList
 from .PackageListTable import PackageListTable
 from .PackageListManager import PackageListManager
+from .Home import Home

python_flask/packager/views.py

@@ -10,7 +10,7 @@ import dominate
 import dominate.tags as t
 from dominate.util import raw
 
-from .components import PackageListManager
+from .components import PackageListManager, NewPackageList, Home
 
 from flask import request, make_response
 
@@ -45,45 +45,45 @@ def delete_packagelist(id):
 
 @app.route("/")
 def root():
-    doc = dominate.document(title="My cool title")
+    return make_response(
-    with doc.head:
+        Home(PackageListManager(get_packagelists()), app.root_path).doc.render(), 200
-        t.script(src="https://unpkg.com/htmx.org@1.7.0")
+    )
-        t.script(src="https://cdn.tailwindcss.com")
-        t.script(src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.js", defer=True)
-        t.link(
-            rel="stylesheet",
-            href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css",
-        )
-    with doc:
 
-        t.script(raw(open(os.path.join(app.root_path, "js/app.js")).read()))
-        PackageListManager(get_packagelists())
 
-    return make_response(doc.render(), 200)
+def is_htmx():
+    return request.headers.get("HX-Request") is not None
 
 
 @app.route("/list/", methods=["POST"])
 def add_new_list():
+    print(f"headers: {request.headers}")
     name = request.form["name"]
     description = request.form["description"]
+
     error, errormsg = validate_name(name)
 
-    print(error, errormsg)
     if not error:
         if add_packagelist(name=name, description=description) is False:
             error = True
             errormsg = f'Name "{name}" already exists'
 
-    return make_response(
+    if is_htmx():
-        PackageListManager(
+        return make_response(
-            get_packagelists(),
+            str(
-            name=name,
+                PackageListManager(
-            description=description,
+                    get_packagelists(),
-            error=error,
+                    name=name,
-            errormsg=errormsg,
+                    description=description,
-        ).render(),
+                    error=error,
-        200,
+                    errormsg=errormsg,
-    )
+                )
+            ),
+            200 if error else 201,
+        )
+    else:
+        r = make_response("", 303)
+        r.headers["Location"] = "/"
+        return r
 
 
 def validate_name(name):
@@ -109,7 +109,7 @@ def validate_list_name():
         if PackageList.query.filter_by(name=name).first() is not None:
             error = True
             errormsg = f'Name "{name}" already exists'
-    doc = new_pkglist_form(name=name, error=error, errormsg=errormsg)
+    doc = NewPackageList(name=name, error=error, errormsg=errormsg)
 
     return make_response(doc.render(), 200)