UI Dialog

[joepavitt]

Description

Captures the "Dialog" functionality from ui-toast in Dashboard 1.0, that has not been ported to the ui-notification widget in D2.0

This should utilise

Properties

• Labelling:
  • Cancel
  • OK/Confirm
• Properties from Vuetify we could implement:
  • Full Screen (https://vuetifyjs.com/en/components/dialogs/#fullscreen)
  • Transitions (https://vuetifyjs.com/en/components/dialogs/#transitions)

Events

• on-action: On submitting/confirming the dialog, a msg should be sent on with relevant content.

Controls

No response

Existing Examples

https://vuetifyjs.com/en/components/dialogs/

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[colinl]

When this is implemented I think it is important that the message sent on clicking a button includes all the extraneous properties of the incoming message. That allows the nodes after the dialog to know what it is that is being OKed or Cancelled.

[bartbutenaers]

@joepavitt, I think this is the last feature I need to be able to migrate my dashboard. Bit confused now: is this a new feature in the exististing ui-notification widget, or a new widget? I can have a look at this one if you like. But without the fancy CSS stuff...

[joepavitt]

Bit confused now: is this a new feature in the exististing ui-notification widget, or a new widget?

Hadn't been settled upon, so open to discussion.

I see merit on both sides. Functionality wise, I think it's sensible on its own, but at the same time, I don't like overwhelming the palette with excessive nodes.

[bartbutenaers]

Yes indeed, you are right.
I don't think it can harm if we allow it (optionally) in the ui-notification widget. Afterwards some kind of full blown ui-dialog node perhaps can see the daylight one day... I will try to have a look at it when I have time.

[bartbutenaers]

@joepavitt, I want to add an (optional) confirmation button to the notification ui node, but would like to have your opinion. Currently that node works like this:

1. When you click the 'Close' button, a payload clicked is being send:

   <v-btn variant="text" @click="close('clicked')"
   

2. After a specified timeout, a payload timeout is being send:

   this.timeouts.close = setTimeout(() => {
      this.close('timeout')
   }, time)
   

The payload clicked is not really usable when you have two buttons. Imho it would be more future proof if it would be renamed to dismiss_clicked, so the new button would send a payload confirm_clicked.

However when I rename the current payload clicked, that would be a breaking change. But keeping the current payload text, would result in confusing output messages from now on until ethernity.

Personally I would prefer to change it, and put a breaking change message in the release notes...

BTW enjoy your (very well earned) holidays!!
And please come back afterwards ;-)

[joepavitt]

I vote change it - agree with your thought process entirely

[Steve-Mcl]

Thinking out loud:

What if we had a new group type of "dialog"

Any group set to be of type dialog would not be shown in the UI immediately but instead would require a message to be shown in a lightbox style?

I realise this type of group may need to be a new parent altogether since a dialog can be reused on other pages.

Possible? Feasible?

[joepavitt]

What if we had a new group type of "dialog"

@Steve-Mcl Great minds... https://github.com/FlowFuse/node-red-dashboard/issues/1106

[Steve-Mcl]

What if we had a new group type of "dialog"

@Steve-Mcl Great minds... #1106

sowwy, I missed that🤦‍♂️

Anyhoo, if 2 independent thought streams converge, it must be the right path! 😉

[joepavitt]

Closing this out as we now support this via Group's and their "type", which can be a "Dialog"