How to handle click events

[janegliese]

Hi! First of all, thanks for this amazing library, been having lots of fun rebuilding some old streamlit apps with it!

So what I am trying to do is recreate this example:
https://v2.vuetifyjs.com/en/components/data-tables/#crud-actions

I believe I've managed with the layout, but I'm having issues handling the click events.
Currently the returned kwargs is an empty dictionary.

Here's the part of the code that i believe is the most relevant to the issue:

def handle_click(**kwargs):
    print("Event object:", kwargs)

with vuetify.Template(slot ="item.actions", slot_props ="{ item }"):
                vuetify.VIcon(small=True, children=["mdi-pencil"], click = handle_click)
                vuetify.VIcon(small=True, children=["mdi-delete"], click = handle_click)

And below is the full runnable code:

from trame.app import get_server
from trame.widgets import vuetify
from trame.ui.vuetify import SinglePageWithDrawerLayout

server = get_server()
state, ctrl = server.state, server.controller


headers = [
    {"text": "Dessert", "value": "name"},
    {"text": "Calories", "value": "calories"},
    {"text": "Fat (g)", "value": "fat"},
    {"text": "Carbs (g)", "value": "carbs"},
    {"text": "Protein (g)", "value": "protein"},
    { "text": 'Actions', "value": 'actions'},
]

desserts = [
    {"name": "Frozen Yogurt", "calories": 159, "fat": 6.0, "carbs": 24, "protein": 4.0},
    {"name": "Ice cream sandwich", "calories": 237, "fat": 9.0, "carbs": 37, "protein": 4.3},
    {"name": "Eclair", "calories": 262, "fat": 16.0, "carbs": 23, "protein": 6.0},
    {"name": "Cupcake", "calories": 305, "fat": 3.7, "carbs": 67, "protein": 4.3},
    {"name": "Gingerbread", "calories": 356, "fat": 16.0, "carbs": 49, "protein": 3.9},
]

state.editedItem = {
    "name": "",
    "calories": 0,
    "fat": 0.0,
    "carbs": 0,
    "protein": 0.0
}

table = {
    "headers": ("headers", headers),
    "items": ("rows", desserts),
    "v_model": ("selection", []),
}



def handle_click(**kwargs):
    print("Event object:", kwargs)



with SinglePageWithDrawerLayout(server) as layout:
    with layout.content:
        with vuetify.VDataTable(**table) as data_table:
            with vuetify.Template(v_slot_top=True):
                with vuetify.VToolbar(flat=True):
                    vuetify.VToolbarTitle(children=['Edit'])
                    vuetify.VDivider(class_="mx-4", inset=True, vertical=True)
                    vuetify.VSpacer()

                    with vuetify.VDialog(v_model=("dialog", False), max_width="500px") as dialog:
                        with vuetify.Template(v_slot_activator="{ on, attrs }"):
                            vuetify.VBtn(
                                color="primary",
                                dark=True,
                                class_="mb-2",
                                v_bind="attrs",
                                v_on="on",
                                children=["New Item"]
                            )

                        with vuetify.VCard():
                            vuetify.VCardTitle(children=['New entry'])
                            vuetify.VCardText()
                            with vuetify.VContainer():
                                with vuetify.VRow():
                                    # Add v-text-field for each item property
                                    for prop, label in [
                                        ("editedItem.name", "Dessert name"),
                                        ("editedItem.calories", "Calories"),
                                        ("editedItem.fat", "Fat (g)"),
                                        ("editedItem.carbs", "Carbs (g)"),
                                        ("editedItem.protein", "Protein (g)")
                                    ]:
                                        with vuetify.VCol(cols="12", sm="6", md="4"):
                                            vuetify.VTextField(
                                                v_model=(prop,),
                                                label=label
                                            )

                            with vuetify.VCardActions():
                                vuetify.VSpacer()
                                vuetify.VBtn(color="blue darken-1", text=True,  children=["Cancel"]) #click="close",
                                vuetify.VBtn(color="blue darken-1", text=True, children=["Save"]) #click="save", 


                    with vuetify.VDialog(v_model=("dialogDelete", False), max_width="500px") as delete_dialog:
                        with vuetify.VCard():
                            vuetify.VCardTitle(children=[("Are you sure you want to delete this item?")])
                            with vuetify.VCardActions():
                                vuetify.VSpacer()
                                vuetify.VBtn(color="blue darken-1",text=True, children=["Cancel"]) #click="closeDelete" click =handle_click
                                vuetify.VBtn(color="blue darken-1", text=True, children=["OK"]) #click="deleteItemConfirm"
                                vuetify.VSpacer()


            with vuetify.Template(slot ="item.actions", slot_props ="{ item }"):
                vuetify.VIcon(small=True, children=["mdi-pencil"], click = handle_click)
                vuetify.VIcon(small=True, children=["mdi-delete"], click = handle_click)

if __name__ == "__main__":
    server.start()

[jourdain]

I'm glad you are enjoying your time with trame.

So when you want to pass arguments to an event you can do it as follow

with vuetify.Template(slot ="item.actions", slot_props ="{ item }"):
      vuetify.VIcon(small=True, children=["mdi-pencil"], click =(handle_click, "['edit', item]"))
      vuetify.VIcon(small=True, children=["mdi-delete"], click =(handle_click, "['delete', item]"))

So the basic gist is event=(py_fn, "[ ...js_args ]", "{ ...js_kwargs }")

[jourdain]

BTW, you should set your icons as follow

vuetify.VIcon("mdi-pencil", small=True, click=(handle_click, "['edit', item]"))

The first arg is the element child.

[janegliese]

Thanks! So I modified the code like below, but getting the error:

JS Error => ReferenceError: item is not defined

def handle_click(action, item):
    print("Action:", action)
    print("Item:", item)


with SinglePageWithDrawerLayout(server) as layout:
    with layout.content:
        with vuetify.VDataTable(**table) as data_table:
            with vuetify.Template(slot ="item.actions", slot_props ="{ item }"):
                vuetify.VIcon("mdi-pencil", small=True, click=(handle_click, "['edit', item]"))
                vuetify.VIcon("mdi-delete", small=True, click=(handle_click, "['delete', item]"))

[jourdain]

I’m on my phone so I can’t provide the full code but the {item} should come from your parent slot like you had it in your code. Although looking at it, I think you have a some syntax issue. To debug you should print the “layout.html” and compare it with the vuetify example. Also look at the course reference slides. They may help you. Good luck

…

On Thu, Apr 27, 2023 at 02:25 janegliese ***@***.***> wrote: Thanks! So I modified the code like below, but getting the error: JS Error => ReferenceError: item is not defined def handle_click(action, item): print("Action:", action) print("Item:", item) with SinglePageWithDrawerLayout(server) as layout: with layout.content: with vuetify.VDataTable(**table) as data_table: with vuetify.Template(slot ="item.actions", slot_props ="{ item }"): vuetify.VIcon("mdi-pencil", small=True, click=(handle_click, "['edit', item]")) vuetify.VIcon("mdi-delete", small=True, click=(handle_click, "['delete', item]")) — Reply to this email directly, view it on GitHub <#249 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACH45WUZYS2CWW2JOBVFLLXDINNNANCNFSM6AAAAAAXNAUMNE> . You are receiving this because you commented.Message ID: ***@***.***>

[janegliese]

Thanks for the pointers! I've been at it for a while but still at a loss.
Obviously there is a difference between the expected output from the example and the printed layout.
Below is the expected output from the referenced example as well as two printed html layouts.

From the referenced example:

<template v-slot:item.actions="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>

As i understand the syntax (referencing this #241)
v-slot:item_actions = " { item } " should be written as
v_slot_item_actions = "{ item }"I dont get it to work to work though with no html output for the template when printing it.

I've tried a few different ways to define the tempate to try and understand and match the html from the example.
E.g. defining it with:
with vuetify.Template(slot="item.actions", slot_props = { item }): will place the item.actions correctly, however the item wont be made accesible. (setting v_slot instead of slot results in a 405 error).
Printed layout for with vuetify.Template (slot = "item.actions", slot_props = { item } ):

`<template slot="item.actions">
<v-icon small @click="trigger('trigger__1', ['edit', item])">
mdi-pencil
</v-icon>
<v-icon small @click="trigger('trigger__1', ['delete', item])">
mdi-delete
</v-icon>
</template>

Setting it as vuetify.Template (v_slot_item = { item }) will make the items accessible but obviously wont put them in the actions column in the VDataTable.
Printed layout for `vuetify.Template (v_slot_item = { item }):

`<template v-slot:item="{ item }">
<v-icon small @click="trigger('trigger__1', ['edit', item])">
mdi-pencil
</v-icon>
<v-icon small @click="trigger('trigger__1', ['delete', item])">
mdi-delete
</v-icon>
</template>

[jourdain]

Until you get the exact matching string, it won’t work. If you want you can write it as a string by doing a call like table.add_child(“……”)

…

On Fri, Apr 28, 2023 at 12:38 janegliese ***@***.***> wrote: Thanks for the pointers! I've been at it for a while but still at a loss. Obviously there is a difference between the expected output from the example and the printed layout. Below is the expected output from the referenced example as well as two printed html layouts. From the referenced example: <template v-slot:item.actions="{ item }"> <v-icon small class="mr-2" @click="editItem(item)" > mdi-pencil </v-icon> <v-icon small @click="deleteItem(item)" > mdi-delete </v-icon> </template> As i understand the syntax (referencing this #241 <#241>) v-slot:item_actions = " { item } " should be written as v_slot_item_actions = "{ item }"I dont get it to work to work though with no html output for the template when printing it. I've tried a few different ways to define the tempate to try and understand and match the html from the example. E.g. defining it with: with vuetify.Template(slot="item.actions", slot_props = { item }): will place the item.actions correctly, however the item wont be made accesible. (setting v_slot instead of slot results in a 405 error). Printed layout for with vuetify.Template (slot = "item.actions", slot_props = { item } ): `<template slot="item.actions"> <v-icon small @click="trigger('trigger__1', ['edit', item])"> mdi-pencil </v-icon> <v-icon small @click="trigger('trigger__1', ['delete', item])"> mdi-delete </v-icon> </template> Setting it as vuetify.Template (v_slot_item = { item }) will make the items accessible but obviously wont put them in the actions column in the VDataTable. Printed layout for `vuetify.Template (v_slot_item = { item }): `<template v-slot:item="{ item }"> <v-icon small @click="trigger('trigger__1', ['edit', item])"> mdi-pencil </v-icon> <v-icon small @click="trigger('trigger__1', ['delete', item])"> mdi-delete </v-icon> </template> — Reply to this email directly, view it on GitHub <#249 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACH45VH7NVYEJQBNVRW3MTXDOM2DANCNFSM6AAAAAAXNAUMNE> . You are receiving this because you commented.Message ID: ***@***.***>

[janegliese]

That did it, got it working with the below code, thank you!

@server.trigger("handle_click")
def handle_click(item_str):
    item = json.loads(item_str)
    print("Item:", item)


template_string = '''
<template v-slot:item.actions="{ item }">
  <v-icon
    small
    class="mr-2"
    @click="trigger('handle_click', [JSON.stringify(item)])"
  >
    mdi-pencil
  </v-icon>
  <v-icon
    small
    @click="trigger('handle_click', [JSON.stringify(item)])"
  >
    mdi-delete
  </v-icon>
</template>
'''

    with vuetify.VDataTable(**table) as table:
            table.add_child(template_string)

[jourdain]

That's the Python version of it below

from trame.app import get_server
from trame.widgets import vuetify
from trame.ui.vuetify import SinglePageWithDrawerLayout

server = get_server()
state, ctrl = server.state, server.controller

def handle_click(item):
    print("Item:", item)

with SinglePageWithDrawerLayout(server) as layout:
    with layout.content:
        with vuetify.VDataTable():
            with vuetify.Template(
                slot_actions="{ item }", 
                __properties=[("slot_actions", "v-slot:item.actions")],
            ):
                vuetify.VIcon("mdi-pencil", small=True, classes="mr-2", click=(handle_click, "[$event]"))
                vuetify.VIcon("mdi-delete", small=True, classes="mr-2", click=(handle_click, "[$event]"))