From a6e5339e38145301851ea1bfa3de7ccb12625e8e Mon Sep 17 00:00:00 2001
From: luisthieme <luis.thieme@5minds.de>
Date: Thu, 21 Nov 2024 16:13:20 +0100
Subject: [PATCH] WIP plugin tab

---
 nodes/dynamic-form-theme.html                 |  79 +++++++++++--
 nodes/dynamic-form-theme.js                   |   4 +
 nodes/ui-dynamic-form.html                    |  38 +++---
 nodes/ui-dynamic-form.js                      |   2 +
 ...de-red-dashboard-2-dynamic-form-theme.html | 108 ++++++++++++++++--
 ui/components/UIDynamicForm.vue               |   5 +-
 ui/stylesheets/ui-dynamic-form.css            |   3 +-
 7 files changed, 203 insertions(+), 36 deletions(-)

diff --git a/nodes/dynamic-form-theme.html b/nodes/dynamic-form-theme.html
index e437e61..55e9e46 100644
--- a/nodes/dynamic-form-theme.html
+++ b/nodes/dynamic-form-theme.html
@@ -2,21 +2,60 @@
     RED.nodes.registerType('dynamic-form-theme', {
         category: 'config',
         defaults: {
+            name: {
+                value: '',
+                required: true,
+            },
             colors: {
-                value: {
-                    surface: '#ffffff',
-                    primary: '#0094CE',
-                    bgPage: '#eeeeee',
-                    groupBg: '#ffffff',
-                    groupOutline: '#cccccc',
-                },
+                surface: '#ffffff',
+                primary: '#0094CE',
+                bgPage: '#eeeeee',
+                groupBg: '#ffffff',
+                groupOutline: '#cccccc',
             },
         },
         label: function () {
             return this.name || 'DynamicForm Theme';
         },
-        oneditprepare: function () {},
-        oneditsave: function () {},
+        oneditprepare: function () {
+            // loop over keys in this.colors
+            if (!this.colors) {
+                this.colors = {};
+                // set default values
+                this.colors.surface = '#ffffff';
+                this.colors.primary = '#0094CE';
+                // pages
+                this.colors.bgPage = '#eeeeee';
+                // groups
+                this.colors.groupBg = '#ffffff';
+                this.colors.groupOutline = '#cccccc';
+            }
+
+            Object.keys(this.colors).forEach((color) => {
+                // get the value of the key
+                const value = this.colors[color];
+                // set the value of the input
+                $('#node-config-input-' + color).val(value);
+            });
+
+            // update label b/g to match the colour input values
+            // this provides nicer styling than the default browser styling
+            const colorWrappers = $('.color-picker-wrapper');
+            colorWrappers.each(function (i) {
+                const wrapper = $(this);
+                const colorPicker = wrapper.children("input[type='color']").eq(0);
+                colorPicker.on('change', () => {
+                    wrapper.css('background-color', colorPicker.val());
+                });
+                wrapper.css('background-color', colorPicker.val());
+            });
+        },
+        oneditsave: function () {
+            Object.keys(this.colors).forEach((color) => {
+                // set the value of the input
+                this.colors[color] = $('#node-config-input-' + color).val();
+            });
+        },
     });
 </script>
 
@@ -25,6 +64,28 @@
         <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-config-input-name" />
     </div>
+    <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
+        <div>
+            <label>Label</label>
+            <label
+                class="color-picker-wrapper"
+                for="node-config-input-primary"
+                style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc"
+            >
+                <input type="color" id="node-config-input-surface" style="opacity: 0; width: 100%;" />
+            </label>
+        </div>
+        <div>
+            <label>Label</label>
+            <label
+                class="color-picker-wrapper"
+                for="node-config-input-primary"
+                style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc"
+            >
+                <input type="color" id="node-config-input-primary" style="opacity: 0; width: 100%;" />
+            </label>
+        </div>
+    </div>
 </script>
 
 <script type="text/markdown" data-help-name="dynamic-form-theme">
diff --git a/nodes/dynamic-form-theme.js b/nodes/dynamic-form-theme.js
index b34187c..c7a818d 100644
--- a/nodes/dynamic-form-theme.js
+++ b/nodes/dynamic-form-theme.js
@@ -1,6 +1,10 @@
 module.exports = function (RED) {
     function DynamicFormTheme(n) {
         RED.nodes.createNode(this, n);
+
+        this.name = n.name;
+
+        this.colors = n.colors;
     }
     RED.nodes.registerType('dynamic-form-theme', DynamicFormTheme);
 };
diff --git a/nodes/ui-dynamic-form.html b/nodes/ui-dynamic-form.html
index dd362e6..1f917f2 100644
--- a/nodes/ui-dynamic-form.html
+++ b/nodes/ui-dynamic-form.html
@@ -6,6 +6,7 @@
             name: { value: '' },
             group: { type: 'ui-group', required: true },
             order: { value: 0 },
+            theme: { value: '', type: 'dynamic-form-theme' },
             options: {
                 value: [{ label: '' }],
                 validate: function (v) {
@@ -173,6 +174,10 @@
         <input type="hidden" id="node-input-height">
         <button class="editor-button" id="node-input-size"></button>
     </div>
+    <div class="form-row">
+        <label for="node-input-theme"><i class="fa fa-table"></i> Theme</label>
+        <input type="text" id="node-input-theme">
+    </div>
 
     <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
         <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
@@ -203,35 +208,34 @@
     </div>
 </script>
 
-
 <script type="text/markdown" data-help-name="ui-dynamic-form">
-A UI-Node to display usertasks forms from the ProcessCube Engine dynamicly.
+    A UI-Node to display usertasks forms from the ProcessCube Engine dynamicly.
 
-## Usage
+    ## Usage
 
-Connect the UI-Node to the usertask input node. Every action in the configuration of the node will display as a button at the bottom of the form.
+    Connect the UI-Node to the usertask input node. Every action in the configuration of the node will display as a button at the bottom of the form.
 
-## Validation
+    ## Validation
 
-### message
+    ### message
 
-Access to the message object is available through _msg_ 
+    Access to the message object is available through _msg_
 
-### form fields
+    ### form fields
 
-Access to the form fields is available through the _fields_ object. A single form field can be accessed by selecting the field id as a key.
-Example: _fields.field_01_
+    Access to the form fields is available through the _fields_ object. A single form field can be accessed by selecting the field id as a key.
+    Example: _fields.field_01_
 
-### usertask
+    ### usertask
 
-Access to the usertask object is available through _usertask_
+    Access to the usertask object is available through _usertask_
 
-## Outputs
+    ## Outputs
 
-: usertask (Object) : The representative object of the usertask.
+    : usertask (Object) : The representative object of the usertask.
 
-### References
+    ### References
 
--   [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube&copy; Plattform
--   [Node-RED Integration in ProcessCube&copy;](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube&copy;
+    -   [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube&copy; Plattform
+    -   [Node-RED Integration in ProcessCube&copy;](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube&copy;
 </script>
diff --git a/nodes/ui-dynamic-form.js b/nodes/ui-dynamic-form.js
index fc30a4c..245b7da 100644
--- a/nodes/ui-dynamic-form.js
+++ b/nodes/ui-dynamic-form.js
@@ -7,6 +7,8 @@ module.exports = function (RED) {
         // which group are we rendering this widget
         const group = RED.nodes.getNode(config.group);
 
+        config.theme = RED.nodes.getNode(config.theme);
+
         const base = group.getBase();
 
         // server-side event handlers
diff --git a/plugins/node-red-dashboard-2-dynamic-form-theme.html b/plugins/node-red-dashboard-2-dynamic-form-theme.html
index 5d166a3..98a1452 100644
--- a/plugins/node-red-dashboard-2-dynamic-form-theme.html
+++ b/plugins/node-red-dashboard-2-dynamic-form-theme.html
@@ -38,9 +38,7 @@
                     }
 
                     function addDefaultTheme() {
-                        console.log('adding default theme...');
                         const theme = RED.nodes.getType('dynamic-form-theme');
-                        console.log('theme777', theme);
                         const themeNode = {
                             _def: theme,
                             id: RED.nodes.id(),
@@ -50,11 +48,69 @@
                         };
 
                         addConfigNode(themeNode);
+                        console.log('node added');
+
+                        const listItem = $('<div>', { class: 'list-item' }).appendTo(themeList);
+                        listItem.append($('<p>', { class: 'list-item-text', text: theme.name }));
+                        $(
+                            '<button class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-paint-brush"></i> ' +
+                                'Edit' +
+                                '</button>'
+                        )
+                            .click(function (evt) {
+                                RED.editor.editConfig('', theme.type, theme.id);
+                                evt.preventDefault();
+                            })
+                            .appendTo(listItem);
+
                         return themeNode;
                     }
 
-                    const tab = $('<div>', { class: 'test_class_luis' }).appendTo(parent);
-                    tab.append($('<button>', { text: 'Add DynamicForm Theme', click: () => addDefaultTheme() }));
+                    const tab = $('<div>', { class: 'dynamicform-tab' }).appendTo(parent);
+                    const headerDiv = $('<div>', { class: 'header-div' }).appendTo(tab);
+                    const themeList = $('<div>', { class: 'theme-list' }).appendTo(tab);
+
+                    headerDiv.append($('<b>', { text: 'DynamicForm Themes' }));
+                    $(
+                        '<button class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-plus"></i> ' +
+                            'Add DynamicForm Theme' +
+                            '</button>'
+                    )
+                        .click(function (evt) {
+                            const themeResult = addDefaultTheme();
+                            RED.editor.editConfig('', themeResult.type, themeResult.id);
+                        })
+                        .appendTo(headerDiv);
+
+                    let themes = {};
+
+                    RED.nodes.eachConfig(function (n) {
+                        if (n.type === 'dynamic-form-theme') {
+                            themes[n.id] = n;
+                        }
+                    });
+
+                    Object.values(themes).forEach(function (theme) {
+                        const listItem = $('<div>', { class: 'list-item' }).appendTo(themeList);
+                        listItem.append($('<p>', { class: 'list-item-text', text: theme.name }));
+                        $(
+                            '<button class="editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-paint-brush"></i> ' +
+                                'Edit' +
+                                '</button>'
+                        )
+                            .click(function (evt) {
+                                // if (themes.includes(itemc)) {
+                                //     RED.editor.editConfig('', item.type, item.id);
+                                // } else {
+                                //     RED.editor.edit(item?.node);
+                                // }
+
+                                RED.editor.editConfig('', theme.type, theme.id);
+                                evt.stopPropagation();
+                                evt.preventDefault();
+                            })
+                            .appendTo(listItem);
+                    });
                 },
             },
         ],
@@ -64,10 +120,48 @@
 </script>
 
 <style>
-    .test_class_luis {
-        background-color: aqua;
+    .dynamicform-tab {
         width: 100%;
         padding: 10px;
-        border-radius: 5px;
+    }
+
+    .theme-list {
+        padding-top: 20px;
+        width: 95%;
+        justify-content: center;
+    }
+    .list-item-text {
+        margin: 0 !important;
+    }
+
+    .list-item {
+        border: solid;
+        padding: 8px;
+        border-color: rgba(200, 200, 200, 1);
+        border-width: 1px;
+        border-radius: 6px;
+        margin-bottom: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .dynamicform-button {
+        height: 20px;
+        min-width: 20px;
+        line-height: 18px;
+        font-size: 10px;
+        border-radius: 2px;
+        padding: 0 5px;
+    }
+
+    .heading {
+        font-weight: 600;
+    }
+
+    .header-div {
+        width: 95%;
+        display: flex;
+        justify-content: space-between;
     }
 </style>
diff --git a/ui/components/UIDynamicForm.vue b/ui/components/UIDynamicForm.vue
index df0113e..ca82026 100644
--- a/ui/components/UIDynamicForm.vue
+++ b/ui/components/UIDynamicForm.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
-    <div className="ui-dynamic-form-wrapper">
+    <div className="ui-dynamic-form-wrapper" :style="{ '--luis-bg-footer': primary }">
         <p v-if="hasFields()">
             <v-form ref="form" v-model="form" :class="dynamicClass">
                 <h3 style="padding: 16px">{{ this.props.name }}</h3>
@@ -89,11 +89,13 @@ export default {
             formData: {},
             taskInput: {},
             theme: '',
+            primary: '',
             error: false,
             errorMsg: '',
         };
     },
     created() {
+        this.primary = this.props.theme.colors.primary;
         const currentPath = window.location.pathname;
         const lastPart = currentPath.substring(currentPath.lastIndexOf('/'));
 
@@ -129,7 +131,6 @@ export default {
                 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'
             );
         },
-
         dynamicClass() {
             return `ui-dynamic-form-${this.theme}`;
         },
diff --git a/ui/stylesheets/ui-dynamic-form.css b/ui/stylesheets/ui-dynamic-form.css
index e278c54..7179313 100644
--- a/ui/stylesheets/ui-dynamic-form.css
+++ b/ui/stylesheets/ui-dynamic-form.css
@@ -95,7 +95,8 @@ code {
     flex-direction: column;
     gap: 8px;
     padding: 16px;
-    background-color: rgba(249, 250, 251, 1);
+    /* background-color: rgba(249, 250, 251, 1); */
+    background-color: var(--luis-bg-footer);
     margin: 0;
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;