RFC: Helper for dynamic lists

[adosikas]

I was designing a form that needed an array of complex objects (which would use ui.expansion or ui.menu), and after looking at the todo list I was playing around with ways to make this more accessible.

Before submitting a PR I would like some feedback on what approach would be best.

The array would also be bindable (as value).

---

Basic concept ("callback variant")

class dynamic_list(ui.element):
    def __init__(self, draw_value: Callable[(Any), None], values: list[Any] = None) -> None:
        super().__init__()
        self.values = values if values is not None else []
        self.draw_value = draw_value

        self._draw_list()

    def add_value(self, value: Any) -> None:
        self.values.append(value)
        self._draw_list.refresh()

    def remove_value(self, value: Any) -> None:
        self.values.remove(value)
        self._draw_list.refresh()

    @ui.refreshable
    def _draw_list(self) -> None:
        with self:
          for v in self.values:
              self.draw_value(v)

object_list: list[Any] = ["A","B","C"]  

def draw_row(o: Any) -> None:
  with ui.row():
    ui.button(icon="delete", on_click=lambda _: dynlist.remove_value(o))
    ui.label(o)  # placeholder for more complicated stuff
    
dynlist = dynamic_list(draw_row, object_list)
ui.button(
    icon="add",
    on_click=lambda _ : dynlist.add_value("new")
)

---

Alternative ("decorator variant"), similar to ui.refreshable

# decorator definition left out for brevity

@dynamic_list
def draw_row(o: Any) -> None:
  with ui.row():
    ui.button(icon="delete", on_click=lambda _: dynlist.remove_value(o))
    ui.label(o)  # placeholder for more complicated stuff

dynlist = draw_row(object_list)
ui.button(
    icon="add",
    on_click=lambda _ : dynlist.add_value("new")
)

---

Alternative ("subclass variant")

# class definition left out for brevity

class MyCustomList(dynamic_list):
  def draw_object(self, o: Any) -> None:
    with ui.row():
      ui.button(icon="delete", on_click=lambda _: self.remove_value(o))
      ui.label(o)  # placeholder for more complicated stuff
    

dynlist = MyCustomList(object_list)
ui.button(
    icon="add",
    on_click=lambda _ : dynlist.add_value("new")
)

[falkoschindler]

Hi @adosikas, thanks for these suggestions!
Even though it is still pretty much undocumented, we have implemented observable collections for NiceGUI's storage system. They might be a handy alternative for "binding" UI to a list. Here is an example:

from nicegui import observables, ui

@ui.refreshable
def show_list():
    for item in my_list:
        ui.label(item)

my_list = observables.ObservableList(['A', 'B', 'C'], on_change=show_list.refresh)

show_list()

ui.button('Add item', on_click=lambda: my_list.append('X'))
ui.button('Remove item', on_click=lambda: my_list.pop())

[adosikas]

Neat.

Will take a bit of effort to implement with existing datatypes (ie some_parsed_data.some_list = make_observable(some_parsed_data.some_list)), but seems solid, so I am closing this.