Tabler UI

examples/tabler/.python-version

@@ -0,0 +1 @@
+3.12

examples/tabler/README.md

@@ -0,0 +1,24 @@
+# Tabler Example
+
+This example shows how you can enable the look & feel of the Tabler admin
+interface.
+
+The current example uses `TablerTheme(layout="fluid")`. Supported layout values
+are `vertical`, `fluid`, and `condensed`.
+
+## How to run this example
+
+Clone the repository and navigate to this example:
+
+```shell
+git clone https://github.com/pallets-eco/flask-admin.git
+cd flask-admin/examples/tabler
+```
+
+> This example uses [`uv`](https://docs.astral.sh/uv/) to manage its dependencies and developer environment.
+
+Run the example using `uv`, which will manage the environment and dependencies automatically:
+
+```shell
+uv run main.py
+```

examples/tabler/data.py

@@ -0,0 +1,133 @@
+def build_sample_db(db, User, Page):
+    """
+    Populate a small db with some example entries.
+    """
+
+    db.drop_all()
+    db.create_all()
+
+    first_names = [
+        "Harry",
+        "Amelia",
+        "Oliver",
+        "Jack",
+        "Isabella",
+        "Charlie",
+        "Sophie",
+        "Mia",
+        "Jacob",
+        "Thomas",
+        "Emily",
+        "Lily",
+        "Ava",
+        "Isla",
+        "Alfie",
+        "Olivia",
+        "Jessica",
+        "Riley",
+        "William",
+        "James",
+        "Geoffrey",
+        "Lisa",
+        "Benjamin",
+        "Stacey",
+        "Lucy",
+    ]
+    last_names = [
+        "Brown",
+        "Smith",
+        "Patel",
+        "Jones",
+        "Williams",
+        "Johnson",
+        "Taylor",
+        "Thomas",
+        "Roberts",
+        "Khan",
+        "Lewis",
+        "Jackson",
+        "Clarke",
+        "James",
+        "Phillips",
+        "Wilson",
+        "Ali",
+        "Mason",
+        "Mitchell",
+        "Rose",
+        "Davis",
+        "Davies",
+        "Rodriguez",
+        "Cox",
+        "Alexander",
+    ]
+
+    for i in range(len(first_names)):
+        user = User()
+        user.name = first_names[i] + " " + last_names[i]
+        user.email = first_names[i].lower() + "@example.com"
+        db.session.add(user)
+
+    sample_text = [
+        {
+            "title": "de Finibus Bonorum et Malorum - Part I",
+            "content": (
+                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do "
+                "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim "
+                "ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut "
+                "aliquip ex ea commodo consequat. Duis aute irure dolor in "
+                "reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla "
+                "pariatur. Excepteur sint occaecat cupidatat non proident, sunt in "
+                "culpa qui officia deserunt mollit anim id est laborum."
+            ),
+            "meta_data": {"a":1, "b":"a"},
+        },
+        {
+            "title": "de Finibus Bonorum et Malorum - Part II",
+            "content": (
+                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem "
+                "accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae "
+                "ab illo inventore veritatis et quasi architecto beatae vitae dicta "
+                "sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit "
+                "aspernatur aut odit aut fugit, sed quia consequuntur magni dolores "
+                "eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, "
+                "qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, "
+                "sed quia non numquam eius modi tempora incidunt ut labore et dolore "
+                "magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis "
+                "nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut "
+                "aliquid ex ea commodi consequatur? Quis autem vel eum iure "
+                "reprehenderit qui in ea voluptate velit esse quam nihil molestiae "
+                "consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla "
+                "pariatur?"
+            ),
+            "meta_data": {"a":1, "b":"a"},
+        },
+        {
+            "title": "de Finibus Bonorum et Malorum - Part III",
+            "content": (
+                "At vero eos et accusamus et iusto odio dignissimos ducimus qui "
+                "blanditiis praesentium voluptatum deleniti atque corrupti quos "
+                "dolores et quas molestias excepturi sint occaecati cupiditate non "
+                "provident, similique sunt in culpa qui officia deserunt mollitia "
+                "animi, id est laborum et dolorum fuga. Et harum quidem rerum "
+                "facilis est et expedita distinctio. Nam libero tempore, cum soluta "
+                "nobis est eligendi optio cumque nihil impedit quo minus id quod "
+                "maxime placeat facere possimus, omnis voluptas assumenda est, omnis "
+                "dolor repellendus. Temporibus autem quibusdam et aut officiis debitis "
+                "aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae "
+                "sint et molestiae non recusandae. Itaque earum rerum hic tenetur a "
+                "sapiente delectus, ut aut reiciendis voluptatibus maiores alias "
+                "consequatur aut perferendis doloribus asperiores repellat."
+            ),
+            "meta_data": {"a":1, "b":"a"},
+        },
+    ]
+
+    for entry in sample_text:
+        page = Page()
+        page.title = entry["title"]
+        page.content = entry["content"]
+        page.meta_data = entry["meta_data"]
+        db.session.add(page)
+
+    db.session.commit()
+    return

examples/tabler/main.py

@@ -0,0 +1,192 @@
+import datetime
+import os.path as op
+
+from flask import Flask
+from flask import redirect
+from flask import request
+from flask import url_for
+from flask_admin import Admin
+from flask_admin import AdminIndexView
+from flask_admin import expose
+from flask_admin.contrib.fileadmin import FileAdmin
+from flask_admin.contrib.sqla import ModelView
+from flask_admin.menu import MenuDivider
+from flask_admin.menu import MenuLink
+from flask_admin.theme import TablerTheme
+from flask_sqlalchemy import SQLAlchemy
+from sqlalchemy import Boolean
+from sqlalchemy import DateTime
+from sqlalchemy import Integer
+from sqlalchemy import String
+from sqlalchemy import Text
+from sqlalchemy import JSON
+from sqlalchemy import text
+from sqlalchemy.orm import Mapped
+from sqlalchemy.orm import mapped_column
+from flask_debugtoolbar import DebugToolbarExtension
+
+from examples.tabler.data import build_sample_db
+
+app = Flask(__name__)
+app.config["DEBUG"] = True
+app.config["SECRET_KEY"] = "secret"
+app.config["DATABASE_FILE"] = "db.sqlite"
+app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///" + app.config["DATABASE_FILE"]
+app.config["SQLALCHEMY_ECHO"] = False
+app.config["EXPLAIN_TEMPLATE_LOADING"] = True
+
+db = SQLAlchemy(app)
+
+toolbar = DebugToolbarExtension()
+toolbar.init_app(app)
+
+
+admin = Admin(
+    app,
+    name="Example: Tabler",
+    theme=TablerTheme(layout="condensed")
+)
+
+
+@app.route("/")
+def index():
+    return '<a href="/admin/">Click me to get to Admin!</a>'
+
+
+class User(db.Model):
+    id: Mapped[int] = mapped_column(Integer, primary_key=True)
+    name: Mapped[str] = mapped_column(String(64))
+    email: Mapped[str] = mapped_column(String(64))
+    active: Mapped[bool] = mapped_column(Boolean, default=True)
+    created_at: Mapped[DateTime] = mapped_column(
+        DateTime, default=datetime.datetime.now
+    )
+
+    def __repr__(self):
+        return self.name
+
+
+class Page(db.Model):
+    id: Mapped[int] = mapped_column(Integer, primary_key=True)
+    title: Mapped[str] = mapped_column(String(64))
+    content: Mapped[Text] = mapped_column(Text)
+    meta_data: Mapped[dict] = mapped_column(JSON, default=dict, server_default=text("'{}'"))
+
+    def __repr__(self):
+        return self.title
+
+
+class UserAdmin(ModelView):
+    column_searchable_list = ("name",)
+    column_filters = ("name", "email")
+    can_export = True
+    export_types = ["csv", "xlsx"]
+    can_set_page_size = True
+    page_size_options = (3, 5, 7, 10, 20, 50, 100)
+    page_size = 7
+
+
+class SimplePageView(ModelView):
+    can_view_details = True
+
+
+class FileAdminModal(FileAdmin):
+    rename_modal = True
+    edit_modal = True
+    mkdir_modal = True
+    upload_modal = True
+
+
+class PageWithModalView(ModelView):
+    create_modal = True
+    edit_modal = True
+    details_modal = True
+    can_view_details = True
+
+
+with app.app_context():
+    build_sample_db(db, User, Page)
+
+if __name__ == "__main__":
+    admin.add_view(
+        UserAdmin(
+            User,
+            db,
+            category="Menu",
+            menu_icon_type="ti",
+            menu_icon_value="user",
+            menu_class_name="text-warning",
+        )
+    )
+    admin.add_menu_item(MenuDivider(), target_category="Menu")
+    admin.add_view(SimplePageView(Page, db, category="Menu", name="Simple Page"))
+
+    admin.add_view(
+        PageWithModalView(
+            Page, db, category="Menu", endpoint="page-modal", name="Page-Modal"
+        )
+    )
+
+    admin.add_view(
+        ModelView(
+            Page,
+            db,
+            name="Page-with-icon",
+            endpoint="page2",
+            menu_class_name="text-danger",
+            menu_icon_type="ti",
+            menu_icon_value="file",
+        )
+    )
+
+    admin.add_view(FileAdmin("files/", name="Local Files", category="Menu"))
+    admin.add_view(
+        FileAdminModal("files/", name="Local Files with Modals", category="Menu")
+    )
+
+    admin.add_link(
+        MenuLink(
+            name="link1",
+            url="http://www.example.com/",
+            class_name="text-warning bg-danger",
+            icon_type="ti",
+            icon_value="link",
+        )
+    )
+    admin.add_link(
+        MenuLink(name="link2", url="http://www.example.com/", class_name="text-danger")
+    )
+    admin.add_link(MenuLink(name="Link3", url="http://www.example.com/"))
+
+    # admin.add_sub_category(name="Links", parent_name="Menu")
+    # admin.add_link(
+    #     MenuLink(
+    #         name="External link",
+    #         url="http://www.example.com/",
+    #         category="Links",
+    #         class_name="text-info",
+    #         icon_type="ti",
+    #         icon_value="link",
+    #     )
+    # )
+    # admin.add_link(
+    #     MenuLink(
+    #         name="External link",
+    #         url="http://www.example.com/",
+    #         category="Links",
+    #         class_name="text-success",
+    #     )
+    # )
+    # admin.add_menu_item(MenuDivider(), target_category="Links")
+    # admin.add_link(
+    #     MenuLink(name="External link", url="http://www.example.com/", category="Links")
+    # )
+
+
+    app_dir = op.realpath(op.dirname(__file__))
+    database_path = op.join(app_dir, app.config["DATABASE_FILE"])
+    if not op.exists(database_path):
+        with app.app_context():
+            build_sample_db(db, User, Page)
+
+    app.run(debug=True)

examples/tabler/pyproject.toml

@@ -0,0 +1,14 @@
+[project]
+name = "example-tabler"
+version = "0.1.0"
+description = "Example Tabler UI."
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+  "flask-admin[sqlalchemy-with-utils]",
+  "flask-debugtoolbar",
+  "flask-debugtoolbar-extrapanels",
+]
+
+[tool.uv.sources]
+flask-admin = { path = "../../", editable = true }