Dynamic content generation - dialog issue

[marinkreso95]

Context about usage:

• user can configure parameters for reports he wants to see
• there is option for user to compare reports by selecting multiple reports and then specifying parameters for each one
• parameter specification would be done within a dialog

Minimum reproducible example:

from nicegui import ui

class NumberOfElements:
    def __init__(self):
        self.number = 1
        self.sel_matches = []

noe = NumberOfElements()
report_toggle = ui.toggle({1: '1', 2: '2', 3: '3'}, value=1, on_change=lambda e: button_view.refresh(e.value)).classes('mx-auto')#.bind_value(noe, 'number')


@ui.refreshable
def report_view(matches):
    print('INSIDE REPORT VIEW', matches)
    for m in matches:
        ui.label(m).classes('mx-auto')

def dialog_action(this_dialog, i):
    print('INSIDE DIALOG ACTION', i, this_dialog)
    noe.sel_matches[i] = 'Number ' + str(i)
    this_dialog.close()

@ui.refreshable
def button_view(x):
    noe.number = x
    noe.sel_matches = [0]*x
    print('INSIDE BUTTON VIEW', x, noe.sel_matches)
    dialogs = []
    with ui.row().classes('mx-auto'):
        for i in range(x):
            with ui.dialog() as dialog, ui.card():
                dialogs.append(dialog)
                print(dialogs)
                ui.label(f'Label {i}!')
                ui.button(f'Close {i}', on_click=lambda e: dialog_action(dialogs[i], i))
            ui.button(f'REPORT {i}!', on_click=dialogs[i].open)


button_view(1)
ui.button(f'Generate report', on_click=lambda e: report_view.refresh(noe.sel_matches)).classes('mx-auto')
report_view([])
ui.run()

Flow:

1. First step is for user to use ui.toggle and define number of reports (it can be 1, 2 or 3)
2. Let's say user picked 3 reports
3. He'll have 3 buttons to open specific dialog

Problem:

• If I open first dialog (first report), label there it says it is Report 0, so label is correct. Text on close button is also correct.
• If I press the close button then mistake occurs. It always wants to close the last created dialog.
• so dialog_action function receives last dialog every time

How can I edit the code so that it opens (seems correct now) and closes the proper dialog and not the last one.

Here are the logs if I click 3 on the toggle, open the middle dialog and then close it. It should close <nicegui.elements.dialog.Dialog object at 0x15af6b400>:

NiceGUI ready to go on http://localhost:8080, http://192.168.100.2:8080, and http://192.168.43.170:8080
INSIDE BUTTON VIEW 3 [0, 0, 0]
DIALOGS:  [<nicegui.elements.dialog.Dialog object at 0x15af97580>, <nicegui.elements.dialog.Dialog object at 0x15af6b400>, <nicegui.elements.dialog.Dialog object at 0x15af6ba90>]
INSIDE DIALOG ACTION 2 <nicegui.elements.dialog.Dialog object at 0x15af6ba90>

Or to explain differently, the button Report 1! opens dialog with Label 1 and Close 1 texts, but when pressing Close 1 text, it closes the Dialog 2 and value of i is also 2. It won't even close.

EDIT:
I guess I just don't know appropriate way to forward information to dialog. Changing ui.button(f'Close {i}', on_click=lambda e: dialog_action(dialogs[i], i)) to ui.button(f'Close me {i}', on_click=dialog.close) makes it close at least. I also need to do some other action with this, how can I achieve that,

[python-and-fiction]

Please check this https://github.com/zauberzeug/nicegui/wiki/FAQs#why-is-the-last-element-of-my-for-loop-used-in-every-step.

from nicegui import ui,events,app
class NumberOfElements:
    def __init__(self):
        self.number = 1
        self.sel_matches = []

noe = NumberOfElements()
report_toggle = ui.toggle({1: '1', 2: '2', 3: '3'}, value=1, on_change=lambda e: button_view.refresh(e.value)).classes('mx-auto')#.bind_value(noe, 'number')


@ui.refreshable
def report_view(matches):
    print('INSIDE REPORT VIEW', matches)
    for m in matches:
        ui.label(m).classes('mx-auto')

def dialog_action(this_dialog, i):
    print('INSIDE DIALOG ACTION', i, this_dialog)
    noe.sel_matches[i] = 'Number ' + str(i)
    this_dialog.close()

@ui.refreshable
def button_view(x):
    noe.number = x
    noe.sel_matches = [0]*x
    print('INSIDE BUTTON VIEW', x, noe.sel_matches)
    dialogs = []
    with ui.row().classes('mx-auto'):
        for i in range(x):
            with ui.dialog() as dialog, ui.card():
                dialogs.append(dialog)
                print(dialogs)
                ui.label(f'Label {i}!')
                ui.button(f'Close {i}', on_click=lambda i=i: dialog_action(dialogs[i], i))
            ui.button(f'REPORT {i}!', on_click=dialogs[i].open)


button_view(1)
ui.button(f'Generate report', on_click=lambda e: report_view.refresh(noe.sel_matches)).classes('mx-auto')
report_view([])
ui.run()

[marinkreso95]

Perfect, thank you @python-and-fiction. That's it