UI Table - Add "Button" column type

[bartbutenaers]

Description

I would like to have buttons in a ui-table:

This is what this PR currently produces:

Marking this as a draft, because I am stuck with a number of things:

1. I have added the button support in the separate UITableCell.vue (because all other types are supported there), but not sure if that is correct because the checkbox type is added in the UITable.vue file. Which I find rather confusing. Would expect the checkbox also to be in the UITableCell.vue file.

2. When I inject an input message, my values for the button column are not being showed as button labels. I assume that is because my button is in the separate vue file (perhaps related to point 1).

3. When I click a button, the onButtonClick method is being called. But the emit in that message does not result in an output message being send. I assume that is because my button is in the separate vue file (perhaps related to point 1).

4. I use the same color as the other types, but it looks rather weird (as you can see in my screenshot). Not sure why the other types look nice with the same classes...

It would be nice if anybody could give me some tips about what I am doing wrong!

BTW I have added a topic to each output message, in order to allow flows to know what is going on in the ui.

I have not updated the documentation yet.

Related Issue(s)

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[bartbutenaers]

Note that this PR is related to my other draft PR. Because when you have multiple button columns, it is usefull to know which button (column) has been clicked. So the msg.column is being filled with the column key again.

[joepavitt]

Great idea - given you've done the ground work - I'd be happy to jump in and offer some hands-on assistance?

[joepavitt]

I have added the button support in the separate UITableCell.vue (because all other types are supported there), but not sure if that is correct because the checkbox type is added in the UITable.vue file. Which I find rather confusing. Would expect the checkbox also to be in the UITableCell.vue file.

I think the checkbox you're seeing is the multi-row selection, which is a built in feature of the table, rather than it being bound to the cell's "type".

When I inject an input message, my values for the button column are not being showed as button labels. I assume that is because my button is in the separate vue file (perhaps related to point 1).

To render the label on the button, you should include the relevant text inside the tags, e.g. <v-btn>label goes here</v-btn>

When I click a button, the onButtonClick method is being called. But the emit in that message does not result in an output message being send. I assume that is because my button is in the separate vue file (perhaps related to point 1).

Correct, the v-btn is call insinde the scope of the table cell, but the table itself remains unaware. The best practice here would be to call this.$emit("action-click") within the table cell, then you can define an @action-click="doSomething" on the instance of the table cell in your table.

I use the same color as the other types, but it looks rather weird (as you can see in my screenshot). Not sure why the other types look nice with the same classes...

Will need to have a hand-on play with this one

[bartbutenaers]

@joepavitt,
Thanks for teaching me!!

Now the injected labels are displayed on my buttons:

And my output message is being send as expected:

For my use case this is working fine now, because I can now delete easily the displayed video recordings from my doorbell.

[bartbutenaers]

BTW from the topic and column message properties, you can easily determine which button has been clicked. In case you have multiple button-type columns in a table.

[joepavitt]

BTW from the topic and column message properties, you can easily determine which button has been clicked. In case you have multiple button-type columns in a table.

I was just assessing that as you sent that message - my only other thought was having the key you bind to that column as part of the button click event, but that's essentially what you're doing anyway?

[bartbutenaers]

Not sure if I understand it correctly.
The msg.column contains the key of the button column:

And this msg.column property is only available in the output message when a button is being clicked.

[joepavitt]

Having a play - I assume you've added a field/property with the "Verwijder" string in the object in order to label the button that way?

Trying to think of a situation where users may just want a static string, or even icon - we could evolve this as a follow on so that "Key" becomes "Value" and then the input is a TypedInput. For the "Button" type, we offer "key", "string", "icon"? For all others, just "key"?

[bartbutenaers]

Yes in my case all buttons have the same static label "Verwijder", which I apply via the key of the button column:

{
   datum: some_dynamically_calculated_date,
   tijd: some_dynamically_calculated_time,
    actie: 'Verwijder' // Static button label
}

A typedinput might indeed be a next step. Or perhaps allow html text?

[joepavitt]

As a first iteration for the button - I'm happy with this. I can add some docs for you, and get this merged. I'll then open a follow up issue to consider typed inputs

[joepavitt]

Rather than msg.topic, how about msg.action? Feels more appropriate naming? Then we should have:

• row_click
• multi_select
• button_click

As the three interactions? rows_click is too similar to row_click and could easily be confused.

[joepavitt]

Have made the above changes, including adding some documentation, also set variant="flat" to remove the shadow on the rendered buttons, which aligns them to the rest of the buttons used in Dashboard 2.0

This is great @bartbutenaers - thanks for the work on this!

[joepavitt]

Failing tests run fine locally, so I'll put this down to GH automation oddities - approval from me

[bartbutenaers]

@joepavitt,
Agree with your sugestions.
Thanks again for the tweeking and the documantation!!
Will create an issue for the typedinput.