Master/detail with backend data updates

[kleynjan]

Expanding on the discussions in #774, #1024 and #1029 here is an example that shows:

• a master table to select and show related items
• combining local UI state with common data (even if that changes)
• a component with local state (selection_table_component) that can be embedded in other elements (owners_table, pets_table)

It's been an absolute blast getting this level of reactivity in Nicegui, all the way from backend logic to multiple user sessions, without really having to do anything special as a dev.

To try it out, open multiple browsers and click on different owners/pets (=local ui state). Then open a browser to /new_data to add new owners and pets.

I imagine it's too big and complicated to serve as an official example, but I'm leaving it here to help other people like me, developing good old LOB apps with Nicegui.

## edited code 20240715 to work with nicegui 1.4.29 & removed async noise

from nicegui import ui
from typing import Callable

class MinimalStore:
    def __init__(self, items: list = []) -> None:
        self._items = items
        self._callbacks = []

    def _notify_observers(self) -> None:
        for callback in self._callbacks:
            callback()

    def register_callback(self, callback: Callable) -> None:
        self._callbacks.append(callback)

    @property
    def items(self) -> list:
        return self._items

    @items.setter
    def items(self, new_items: list) -> None:
        self._items = new_items
        self._notify_observers()

    def add(self, item: dict) -> None:
        # append via setter to trigger notification
        self.items = self.items + [item]


owners = MinimalStore([{"name": "Alice", "age": 20}, {"name": "Bob", "age": 30}, {"name": "Carol", "age": 40}])
pets = MinimalStore(
    [
        {"owner": "Alice", "name": "Fido", "age": 5, "breed": "poodle"},
        {"owner": "Bob", "name": "Rex", "age": 7, "breed": "alsatian"},
        {"owner": "Bob", "name": "Lassie", "age": 9, "breed": "collie"},
    ]
)

# select_table_component: generalized reusable 'selection table'
#   table_state: dict                   # isolated local UI state; typically: table_state === ui_state['table_xyz'])
#      table_state.selected_key: str    # key of selected row
#   on_selection: callable              # callback to refresh dependent component(s)
#
def select_table_component(
    items: list,
    column_names: list,
    row_key: str,
    table_state: dict,
    on_selection: Callable | None = None,
) -> None:
    def refresh_selection(table) -> None:
        table.selected.clear()
        if table_state["selected_key"] is not None:
            table.selected.append([row for row in table.rows if row[row_key] == table_state["selected_key"]][0])
        table.update()

    def _on_cell_click(args: dict) -> None:
        if args["key"] == table_state["selected_key"]:  # deselect
            table_state["selected_key"] = None
        else:
            table_state["selected_key"] = args["key"]
        refresh_selection(table)
        if on_selection:
            on_selection()

    table = ui.table(
        columns=[{"name": f, "label": f, "field": f, "sortable": True, "align": "left"} for f in column_names],
        rows=items,
        row_key=row_key,
    ).classes("w-full")
    table.add_slot(
        "body-cell",
        r"""
        <q-td :props="props" @click="$parent.$emit('cell_click', props)">
            {{ props.value }}
        </q-td>
        """,
    )
    table.on("cell_click", lambda msg: _on_cell_click(msg.args))
    refresh_selection(table)


### selection table "instances"

TABLE_CARD_CLASSES = "w-[40rem] gap-0"
DETAIL_CARD_CLASSES = "w-[40rem] gap-3"

@ui.refreshable
def owners_table(ui_state: dict):
    def on_select_owner():
        ui_state["pets_table"]["selected_key"] = None
        pets_table.refresh()
        pets_detail.refresh()

    with ui.card().classes(TABLE_CARD_CLASSES):
        ui.label("Owners").classes("text-bold")
        select_table_component(
            owners.items,
            ["name", "age"],
            "name",
            ui_state["owners_table"],
            on_select_owner,
        )

owners.register_callback(owners_table.refresh)

@ui.refreshable
def pets_table(ui_state: dict):
    if ui_state["owners_table"]["selected_key"] is not None:
        with ui.card().classes(TABLE_CARD_CLASSES):
            ui.label("Pets").classes("text-bold")
            pets_for_selected_owner = [
                pet for pet in pets.items if pet["owner"] == ui_state["owners_table"]["selected_key"]
            ]
            select_table_component(
                pets_for_selected_owner,
                ["name", "breed"],
                "name",
                ui_state["pets_table"],
                pets_detail.refresh,
            )

pets.register_callback(pets_table.refresh)

@ui.refreshable
def pets_detail(ui_state: dict) -> None:
    if ui_state["pets_table"]["selected_key"] is not None:
        pet_name = ui_state["pets_table"]["selected_key"]
        pet = [pet for pet in pets.items if pet["name"] == pet_name][0]
        with ui.card().classes(DETAIL_CARD_CLASSES):
            ui.label("Pet details").classes("text-bold")
            with ui.row().classes("w-full"):
                ui.input(label="name", value=pet["name"])
                ui.input(label="breed", value=pet["breed"])
                ui.input(label="age", value=pet["age"])

pets.register_callback(pets_detail.refresh)

@ui.page("/")
def main() -> None:
    ui.add_head_html(
        """
        <style>
        .q-table tbody td, .q-table thead tr { height: 28px; }
        </style>
        """
    )

    ui_state = {
        "owners_table": {"selected_key": None},
        "pets_table": {"selected_key": None},
    }

    owners_table(ui_state)
    pets_table(ui_state)
    pets_detail(ui_state)

# add new Owners & Pets out-of-band and see them show up in connected clients

@ui.page("/new_data")
def new_data() -> None:
    owner = {"name": "Dave", "age": 50}
    pet = {"owner": "Alice", "name": "Blackie", "age": 3, "breed": "terrier"}
    with ui.card():
        with ui.row():
            ui.input(label="name").bind_value(owner, "name")
            ui.input(label="age").bind_value(owner, "age")
        ui.button("Add owner", on_click=lambda e: owners.add(owner.copy()))

    with ui.card():
        with ui.row():
            ui.input(label="owner").bind_value(pet, "owner")
            ui.input(label="name").bind_value(pet, "name")
            ui.input(label="age").bind_value(pet, "age")
            ui.input(label="breed").bind_value(pet, "breed")
        ui.button("Add pet", on_click=lambda e: pets.add(pet.copy()))

ui.run()

[pythonormen]

Thanks for inspiration 😊