Add: New group display type of Dialog

cypress/fixtures/flows/dashboard-controls.json

@@ -446,6 +446,173 @@
         "visible": "true",
         "disabled": "false"
     },
+    {
+        "id": "dashboard-ui-group-dialog-show",
+        "type": "ui-group",
+        "name": "Dialog Controls",
+        "page": "dashboard-ui-page-controls",
+        "width": "6",
+        "height": "1",
+        "order": -1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "dashboard-ui-group-dialog",
+        "type": "ui-group",
+        "name": "Dialog Group",
+        "page": "dashboard-ui-page-controls",
+        "width": "6",
+        "height": "1",
+        "order": -1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "dialog"
+    },
+    {
+        "id": "dashboard-ui-button-int-group-dialog-show",
+        "type": "ui-button",
+        "z": "188402caa4d5b857",
+        "group": "dashboard-ui-group-dialog-show",
+        "name": "",
+        "label": "Dialog: Group - Show",
+        "order": -1,
+        "width": 0,
+        "height": 0,
+        "emulateClick": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "iconPosition": "left",
+        "payload": "{\"groups\":{\"show-dialog\":[\"Controls:Dialog Group\"]}}",
+        "payloadType": "json",
+        "topic": "topic",
+        "topicType": "msg",
+        "buttonColor": "",
+        "textColor": "",
+        "iconColor": "",
+        "x": 180,
+        "y": 780,
+        "wires": [
+            [
+                "dashboard-ui-control-dialog"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-ui-button-int-group-dialog-hide",
+        "type": "ui-button",
+        "z": "188402caa4d5b857",
+        "group": "dashboard-ui-group-dialog-show",
+        "name": "",
+        "label": "Dialog: Group - Hide",
+        "order": -1,
+        "width": 0,
+        "height": 0,
+        "emulateClick": false,
+        "tooltip": "",
+        "color": "",
+        "bgcolor": "",
+        "className": "",
+        "icon": "",
+        "iconPosition": "left",
+        "payload": "{\"groups\":{\"hide-dialog\":[\"Controls:Dialog Group\"]}}",
+        "payloadType": "json",
+        "topic": "topic",
+        "topicType": "msg",
+        "buttonColor": "",
+        "textColor": "",
+        "iconColor": "",
+        "x": 180,
+        "y": 820,
+        "wires": [
+            [
+                "dashboard-ui-control-dialog"
+            ]
+        ]
+    },
+    {
+        "id": "dashboard-ui-control-dialog",
+        "type": "ui-control",
+        "z": "188402caa4d5b857",
+        "name": "",
+        "ui": "dashboard-ui-base",
+        "events": "all",
+        "x": 460,
+        "y": 780,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "dashboard-ui-form-group-dialog",
+        "type": "ui-form",
+        "z": "188402caa4d5b857",
+        "name": "",
+        "group": "dashboard-ui-group-dialog",
+        "label": "",
+        "order": -1,
+        "width": 0,
+        "height": 0,
+        "options": [
+            {
+                "label": "First Name",
+                "key": "firstname",
+                "type": "text",
+                "required": true,
+                "rows": null
+            },
+            {
+                "label": "Last Name",
+                "key": "lastname",
+                "type": "text",
+                "required": false,
+                "rows": null
+            },
+            {
+                "label": "Email",
+                "key": "email",
+                "type": "email",
+                "required": true,
+                "rows": null
+            },
+            {
+                "label": "Phone",
+                "key": "phone",
+                "type": "text",
+                "required": true,
+                "rows": null
+            }
+        ],
+        "formValue": {
+            "firstname": "",
+            "lastname": "",
+            "email": "",
+            "phone": ""
+        },
+        "payload": "",
+        "submit": "Submit",
+        "cancel": "Reset",
+        "resetOnSubmit": true,
+        "topic": "topic",
+        "topicType": "msg",
+        "splitLayout": "",
+        "className": "",
+        "passthru": false,
+        "dropdownOptions": [],
+        "x": 230,
+        "y": 880,
+        "wires": [
+            []
+        ]
+    },
     {
         "id": "dashboard-ui-control-interactivity",
         "type": "ui-control",

cypress/tests/widgets/control.spec.js

@@ -102,6 +102,21 @@ describe('Node-RED Dashboard 2.0 - Control - Show/Hide', () => {
     })
 })
 
+describe('Node-RED Dashboard 2.0 - Control - Show/Hide Dialog', () => {
+    beforeEach(() => {
+        cy.deployFixture('dashboard-controls')
+        cy.visit('/dashboard/controls')
+    })
+
+    it('can hide and show a particular dialog group', () => {
+        cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-int-group-dialog-show'), 1000)
+        cy.get('#nrdb-ui-widget-dashboard-ui-form-group-dialog').should('exist')
+
+        cy.clickAndWait(cy.get('.v-dialog .v-card-item > .v-card-item__append > button'))
+        cy.get('#nrdb-ui-widget-dashboard-ui-form-group-dialog').should('not.exist')
+    })
+})
+
 describe('Node-RED Dashboard 2.0 - Control - Enable/Disable', () => {
     beforeEach(() => {
         cy.deployFixture('dashboard-controls')

docs/nodes/config/ui-group.md

@@ -5,7 +5,7 @@ props:
     Page: The Page (<code>ui-page</code>) that this group will render on. 
     Size: The width and height of the group. Height will always be reinforced by this value, the height is generally a <i>minimum</i> height, and will extend to fit it's content.
     Class: Any custom CSS classes you wish to add to the Group.
-    Default State: <ul><li><b>Visibility</b> - Defines the default visibility of this group.</li><li><b>Interactivity</b> - Controls whether the group and it's contents are disabled/enabled when the page is loaded.</li></ul><p>Both of these can be overridden by the user at runtime using a <code>ui-control</code> node.</p>
+    Default State: <ul><li><b>Visibility</b> - Defines the default visibility of this group. </li><li><b>Interactivity</b> - Controls whether the group and it's contents are disabled/enabled when the page is loaded. </li><li><b>Type</b> - Controls whether the group appears as a default group or as a dialog, which needs to be triggered manually using ui-control. You can choose between 'Default' and 'Dialog' types. </li></ul><p>Both of these can be overridden by the user at runtime using a <code>ui-control</code> node.</p>
 ---
 
 <script setup>

docs/nodes/widgets/ui-control.md

@@ -134,6 +134,23 @@ msg.payload = {
 
 _Note:_ `pages` can be subbed with `tabs` as per Dashboard 1.0 and `groups` can also be subbed with `group` as per Dashboard 1.0.
 
+### Show/Hide Dialog
+
+You can programmaticaly show/hide dialog groups and pages with the following payload into `ui-control`:
+
+```js
+msg.payload = {
+    groups: {
+        'show-dialog': ['<Page Name>:<Group Name>', '<Page Name>:<Group Name>'],
+        'hide-dialog': ['<Page Name>:<Group Name>']
+    }
+}
+```
+
+To use this you need to change the group type as [follows](/nodes/config/ui-group.html#properties)
+
+_Note:_ `pages` can be subbed with `tabs` as per Dashboard 1.0 and `groups` can also be subbed with `group` as per Dashboard 1.0.
+
 ## Events List
 
 In addition to `ui-control` taking input to _control_ the UI, we have also maintained support for all events emitted by `ui-control` from Dashboard 1.0 here too.

nodes/config/locales/en-US/ui_group.html

@@ -1,6 +1,49 @@
 <script type="text/html" data-help-name="ui-group">
     <p>Group</p>
-    <p>
-        A container for multiple UI Widgets. Groups can be used to organize and manage the layout of UI Widgets.
-    </p>
+    <p>A container for multiple UI Widgets. Groups can be used to organize and manage the layout of UI Widgets.</p>
+    <h3>Properties</h3>
+    <dl class="message-properties">
+        <dt>
+            Page
+            <span class="property-type">option</span>
+        </dt>
+        <dd>
+            Specifies the page within the Node-RED Dashboard 2.0 where the group will be displayed. You can select or change the page using this option.
+        </dd>
+        <dt>
+            Size
+            <span class="property-type">input</span>
+        </dt>
+        <dd>
+            Defines the width and height of the group in grid units. You can adjust these values to control the space allocated to the group on the dashboard.
+        </dd>
+        <dt>
+            Class
+            <span class="property-type">input</span>
+        </dt>
+        <dd>
+            Allows the assignment of custom CSS class names for advanced styling of the group and its contents.
+        </dd>
+        <dt>
+            Visibility
+            <span class="property-type">option</span>
+        </dt>
+        <dd>
+            Visibility controls whether the group is displayed (Visible/Hidden).
+        </dd>
+        <dt>
+            Interactivity
+            <span class="property-type">option</span>
+        </dt>
+        <dd>
+            Iteractivity defines whether user interaction is allowed.(Active/Disabled).
+        </dd>
+        <dt>
+            Type
+            <span class="property-type">option</span>
+        </dt>
+        <dd>
+            Controls whether the group appears as a default group or as a dialog, which needs to be triggered manually using <code>ui-control</code>. You can choose between <b>Default</b> and <b>Dialog</b> types.
+        </dd>
+    </dl>
 </script>

nodes/config/locales/en-US/ui_group.json

@@ -14,7 +14,10 @@
             "interactivity": "Interactivity",
             "active": "Active",
             "disabled": "Disabled",
-            "openDashboardSidebar": "Open Dashboard 2.0 Sidebar"
+            "openDashboardSidebar": "Open Dashboard 2.0 Sidebar",
+            "type": "Type",
+            "typeDefault": "Default",
+            "typeDialog": "Dialog"
         }
     }
 }

nodes/config/ui_group.html

@@ -13,7 +13,8 @@
             showTitle: { value: true }, // show title on group card
             className: { value: '' },
             visible: { value: true },
-            disabled: { value: false }
+            disabled: { value: false },
+            groupType: { value: 'default' }
         },
         label: function () {
             const page = RED.nodes.node(this.page)?.name || ''
@@ -45,6 +46,8 @@
                 this.disabled = true
                 $('#node-config-input-disabled').val('true')
             }
+
+            $('#node-config-input-groupType').val(this.groupType || 'default')
         },
         oneditsave: function () {
             // convert string to boolean
@@ -110,6 +113,15 @@
             </select>
         </div>
     </div>
+    <div class="form-row">
+        <div style="display: flex; align-items: center; gap: 2px;">
+            <label for="node-config-input-groupType" style="margin-bottom: 0" data-i18n="ui-group.label.type"></label>
+            <select id="node-config-input-groupType" style="width: 150px;">
+                <option value="default" data-i18n="ui-group.label.typeDefault"></option>
+                <option value="dialog" data-i18n="ui-group.label.typeDialog"></option>
+            </select>
+        </div>
+    </div>
     <div class="form-row">
         <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small" data-i18n="ui-group.label.openDashboardSidebar"></button>
     </div>

ui/src/layouts/DialogGroup.vue

@@ -0,0 +1,54 @@
+<!-- eslint-disable vue/html-self-closing -->
+<template>
+    <v-dialog v-if="group.groupType === 'dialog'" v-model="isActive" max-width="500">
+        <v-card title="Dialog">
+            <template v-if="group.showTitle" #title>
+                {{ group.name }}
+            </template>
+            <template #append>
+                <v-btn variant="plain" density="compact" icon="mdi-close" @click="isActive = false" />
+            </template>
+            <template #text>
+                <slot></slot>
+            </template>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+export default {
+    name: 'DialogGroup',
+    props: {
+        group: {
+            type: Object,
+            required: true
+        },
+        widgetsByGroup: {
+            type: Function,
+            required: true
+        }
+    },
+    data () {
+        return {
+            isActive: false
+        }
+    },
+    computed: {
+        showDialogState () {
+            return this.group.showDialog
+        }
+    },
+    watch: {
+        showDialogState: {
+            handler (val) {
+                const state = val.split('-')[0] === 'true'
+                // Close the dialog if it's already opened by ui-control
+                if (state === this.isActive) {
+                    this.isActive = !this.isActive
+                }
+                this.isActive = state
+            }
+        }
+    }
+}
+</script>