FastUI with SQLModel

[auh83]

It is a main.py working example of how to read SQLModels with FastUI

from datetime import date


from fastapi import FastAPI, HTTPException, Depends, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from fastui import FastUI, AnyComponent, prebuilt_html, components as c
from fastui.components.display import DisplayMode, DisplayLookup
from fastui.events import GoToEvent, BackEvent, PageEvent

from typing import List, Optional

from sqlmodel import Session, select

from database import create_db_and_tables, engine

from models.products import Brand, BrandForm, Category, Product


def get_session():
    with Session(engine) as session:
        yield session


app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates", autoescape=False)


@app.on_event("startup")
def on_startup():
    create_db_and_tables()


@app.get("/", response_class=HTMLResponse)
def featured_results(*, session: Session = Depends(get_session), request: Request):
    brands = session.exec(select(Brand)).all()
    categories = session.exec(select(Category)).all()
    products = session.exec(select(Product)).all()
    context = {'request': request, 'brands': brands, 'categories': categories, 'products': products}
    return templates.TemplateResponse("index.html", context)

@app.get("/api/admin/brands/", response_model=FastUI, response_model_exclude_none=True)
def brands_table(*, session: Session = Depends(get_session), request: Request) -> list[AnyComponent]:
    brands = session.exec(select(Brand)).all()
    """
    Show a table of four brands, `/api` is the endpoint the frontend will connect to
    when a user visits `/` to fetch components to render.
    """
    return [
        c.Page(  # Page provides a basic container for components
            components=[
                c.Heading(text='Marques', level=2),  # renders `<h2>Users</h2>`
                c.Table[Brand](  # c.Table is a generic component parameterized with the model used for rows
                    data=brands,
                    # define two columns for the table
                    columns=[
                        # the first is the users, name rendered as a link to their profile
                        DisplayLookup(field='name', on_click=GoToEvent(url='/admin/brand/{id}/')),
                        # the second is the date of birth, rendered as a date
                    ],
                ),
                c.Div(components=[
                    c.Link(
                        components=[c.Button(text="Add Brand")],
                        on_click=GoToEvent(url='/admin/brand/add/')
                    )
                ])
            ]
        ),
    ]

@app.get("/api/admin/brand/{brand_id}/", response_model=FastUI, response_model_exclude_none=True)
def brand_profile(*, session: Session = Depends(get_session), brand_id: int) -> list[AnyComponent]:
    brand = session.get(Brand, brand_id)
    if not brand:
        raise HTTPException(status_code=404, detail="Pas de marque existante")
    return [
        c.Page(
            components=[
                c.Heading(text=brand.name, level=2),
                c.Heading(text=brand.titre, level=3),
                c.Heading(text=brand.description, level=4),
                c.Link(components=[c.Text(text='Back')], on_click=BackEvent()),
            ]
        ),
    ]

@app.get('/admin/{path:path}')
async def html_landing() -> HTMLResponse:
    """Simple HTML page which serves the React app, comes last as it matches all paths."""
    return HTMLResponse(prebuilt_html(title='Admin Demo'))

[auh83]

My project is to build a website with a frontend using HTMX and Tailwindcss and an admin panel using FastUI.

I have a question a question about how to create, update and delete SQLModels with Fastui ?

[auh83]

The beginning of my code in order to create sqmodels with FastUI is

@app.get("api/admin/brand/add/", response_model=FastUI, response_model_exclude_none=True)
def add_brand(*, session: Session = Depends(get_session), request: Request):
    return [
        c.Page(components=[
            c.Heading(text="Add User", level=2),
            c.Paragraph(text='Add Brand to the system'),
            c.ModelForm[BrandForm](
                submit_url='/api/admin/brand/add/',
                success_event=PageEvent(name='form_success')
            )
        ])
    ]

But I have, for the moment, a 422 Request Error.