Opening ui.card() in a ui.table() using .add_slot()

[miccs0]

Question

Hello guys, I am trying to open a ui.card() in a table using .add_slot().
Tried multiple ways to make it work, but it always says
TypeError: 'NoneType' object is not callable

I am aware that the problem is here:

@ui.on('click', lambda: 'a[@click="openMedicalCertificateCard()"]', [])
async def handle_click_event():
    await open_medical_certificate_card()

But i can't manage to make it work.

table.add_slot('body-cell-certificado_medico', '''
    <q-td :props="props">
        <a href="#" @click="openMedicalCertificateCard()">See Certificate</a>
    </q-td>
''')

async def open_medical_certificate_card():
    with ui.card().classes('w-full').style('animation: fadeUp 0.25s ease-out forwards'):
        ui.label('Medical Certificate').classes('text-xl font-bold mb-4')

    dialog = ui.dialog()
    dialog.open()

@ui.on('click', lambda: 'a[@click="openMedicalCertificateCard()"]', [])
async def handle_click_event():
    await open_medical_certificate_card()

Thanks!

[falkoschindler]

Hi @miccs0,

There are two very strange issues with your code:

• ui.on is not meant to be used as a decorator. How did you come up with this idea?
• A lambda statement returning 'a[@click="openMedicalCertificateCard()"]' doesn't do anything. What is your intention behind it?

Here is an example how to handle click events in table slots: #979 (comment)

[miccs0]

Thanks again!
Basically I wanted to add a slot to the table for me to open a ui.card() which had a pdf file inside of it.
This worked, still needs some work:

from nicegui import ui

columns = [
    {'name': 'certificado_medico', 'label': 'Certificado Médico', 'field': 'certificado_medico', 'sortable': False},
]

table = ui.table(title="Catálogo Empleados", rows=rows, columns=columns, row_key='id_empleado').classes('w-full')

table.add_slot('body', r'''
    <q-tr :props="props">
        <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
            @click="col.name === 'certificado_medico' && $parent.$emit('cell-click')"
        >
            {{ col.value }}
        </q-td>
    </q-tr>
''')

table.on('cell-click', open_medical_certificate_card)

async def open_medical_certificate_card():
    with ui.dialog() as dialog, ui.card():
        ui.label('Certificado Médico').classes('text-xl font-bold mb-4')
        with ui.row():
            ui.button('Cerrar', on_click=lambda: dialog.submit('Cerrar'))

    result = await dialog
    if result == 'Aceptar':
        ui.notify('Certificado médico aceptado')
    else:
        ui.notify('Certificado médico cancelado')

ui.run()