ui.select() as filter for ui.card()

[miccs0]

I have a problem with a ui.card(), I am trying to create a filter using ui.select, it is called "selected_company".
Then, after the selection is made it runs "on_company_change()", which gets the company id (int) and runs "list_of_contracts" with the company id selection:

@ui.page('/')
async def main():
    async def on_company_change():
        company_id = selected_company.value
        await list_of_contracts(company_id) 

    with ui.column().classes('mx-auto'):
        company_options = {company.id_empresa: company.nombre_empresa for company in await EmpresasNombre.all()}
        selected_company = ui.select(label='Seleccionar Empresa', options=company_options, on_change=on_company_change).classes('w-40')

The problem comes here. It works when I select a company from the ui.select(), but it does not erase the other ui.cards(). I have tried .clear() but it does not work too well.

@ui.refreshable
async def list_of_contracts(company_id=None):

    contracts = await EmpresasContratos.filter(id_empresa=company_id).prefetch_related('id_puesto')

    for contract in reversed(contracts):
        with ui.card():

            with ui.row().classes('items-center'):

                ui.select(
                    label='Empresa',
                    options=company_options,
                    value=contract.id_empresa_id,
                    on_change=contract.save).classes('w-40') \
                    .bind_value(contract, 'id_empresa_id').on('blur', list_of_contracts.refresh).classes('w-40')

                ui.select(
                    label='Posiciones de Empleo',
                    options=position_options,
                    value=contract.id_puesto_id,
                    on_change=contract.save).classes('w-40') \
                    .bind_value(contract, 'id_puesto_id').on('blur', list_of_contracts.refresh).classes('w-40')

                ui.number('Vacantes disponibles', on_change=contract.save) \
                    .bind_value(contract, 'vacantes_disponibles').on('blur', list_of_contracts.refresh).classes('w-40')

[falkoschindler]

Hi @miccs0, since this seems to be a NiceGUI issue rather than RoSys, I'll transfer it over to https://github.com/zauberzeug/nicegui.

[falkoschindler]

Unfortunately there are some undefined variables in your code, so that we can't simply copy&paste it to try out what's happening. Can you, please, try to provide a minimal reproducible code example? That would allow us and the community to help more efficiently. Thanks!

[miccs0]

First of all, thank you for your help!
The #2911 can be resolved here too.
Here is the minimal reproducible code:

from nicegui import ui


db = {
    'CompanyNames': [
        {'company_id': 1, 'company_name': 'Company1'},
        {'company_id': 2, 'company_name': 'Company2'}
    ],
    'CompanyContracts': [
        {'contract_id': 1, 'company_id': 1, 'salary': 1200.00},
        {'contract_id': 2, 'company_id': 1, 'salary': 1500.00},
        {'contract_id': 3, 'company_id': 2, 'salary': 1800.00}
    ]
}

class Model:
    def __init__(self, **entries):
        self.__dict__.update(entries)

    @classmethod
    async def all(cls):
        return [cls(**item) for item in db[cls.__name__]]

    @classmethod
    async def filter(cls, **kwargs):
        return [cls(**item) for item in db[cls.__name__] if all(item[k] == v for k, v in kwargs.items())]


class CompanyNames(Model):
    pass


class CompanyContracts(Model):
    pass


@ui.refreshable
async def list_of_contracts(company_id=None):
    contracts = await CompanyContracts.filter(company_id=company_id)

    for contract in contracts[::-1]:
        with ui.card().classes('animate-fade-up' 'animate-once'):
            with ui.row().classes('items-center'):
                ui.number('Salary', format='%.2f', value=contract.salary).props('prefix="$"').classes('w-40')
            ui.separator()

            with ui.row().classes('items-center'):
                ui.button('Save Contract', icon='save').props('flat')


@ui.page('/')
async def main():
    async def on_company_change():
        company_id = selected_company.value
        list_of_contracts.refresh()
        await list_of_contracts(company_id)

    with ui.column().classes('mx-auto'):
        company_options = {company.company_id: company.company_name for company in await CompanyNames.all()}
        selected_company = ui.select(label='Select a company', options=company_options, on_change=on_company_change).classes('w-40')
        ui.separator()

ui.run()

Basically, when you select Company 1, the contracts from it will show:

But the problem starts when you select Company 2, the contracts from Company 2 show, but the ones from Company 1 are still showing:

[falkoschindler]

Ok, I see. When the selection changes, you're calling refresh(), but you also create a new instance of the refreshable UI:

list_of_contracts.refresh()
await list_of_contracts(company_id)

I recommend changing the list_of_contracts to accept contracts, so that it doesn't have to request the data itself. It should only contain the presentation logic:

@ui.refreshable
def list_of_contracts(contracts):
    for contract in contracts[::-1]:
        ...

The selection change handler can fetch the new contracts and refresh the UI:

    async def on_company_change():
        company_id = selected_company.value
        contracts = await CompanyContracts.filter(company_id=company_id)
        list_of_contracts.refresh(contracts)

Now you only need to create the UI instance somewhere in main(), e.g. with an empty list:

list_of_contracts([])

[miccs0]

THANK YOU SO MUCH!!! This works perfectly!!!
The only thing left is #2911, how can I add the:

with ui.card().classes('animate-fade-up' 'animate-once'):

every time i select a new contract? Thanks again, the solution worked perfectly!

[falkoschindler]

You're welcome. Let's discuss the animation over at #2911.