@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.9 → 1.0.10

package/nodes/dynamic-form.html

@@ -6,10 +6,15 @@
             name: { value: "" },
             group: { type: 'ui-group', required: true },
             order: { value: 0 },
+            options: {
+                value: [{ label: ''}],
+                validate: function (v) {
+                    const unique = new Set(v.map(function (o) { return o.label }));
+                    return v.length === unique.size;
+                }
+            },
             waiting_title: { value: "Waiting for Warten auf den Usertask..." },
             waiting_info: { value: "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist." },
-            submit_title: { value: "Submit your task" },
-            cancel_title: { value: "Cancel your task" },
             width: {
                 value: 0,
                 validate: function (v) {
@@ -21,10 +26,14 @@
                     return valid
                 }
             },
-            height: { value: 0 }
+            height: { value: 0 },
+            outputs: { value: 1}
         },
         inputs: 1,
         outputs: 1,
+        outputLabels: function(index) {
+          return this.options[index].label
+        },
         icon: "file.svg",
         label: function() {
             return this.name || "dynamic-form";
@@ -35,7 +44,81 @@
                 height: '#node-input-height',
                 group: '#node-input-group'
             });
-        }
+
+            function generateOption(i, option) {
+                const container = $('<li/>', {
+                    style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;'
+                });
+
+                // Create input fields for value and label
+                const row = $('<div/>').appendTo(container);
+                $('<input/>', {
+                    class: 'node-input-option-label',
+                    type: 'text',
+                    style: 'margin-left:7px; width:calc(100% - 48px);',
+                    placeholder: 'Label',
+                    value: option.label
+                }).appendTo(row).typedInput({
+                  type: 'str', types: ['str']
+                });
+
+                // $('<input/>', {
+                //     class: 'node-input-option-condition',
+                //     type: 'text',
+                //     style: 'margin-left:7px; width:calc(50% - 32px);',
+                //     placeholder: 'Condition',
+                //     value: option.condition
+                // }).appendTo(row).typedInput({
+                //   type: 'str', types: ['str']
+                // });
+
+                // Create delete button for the option
+                const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row);
+                const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan);
+                $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
+
+                deleteButton.click(function () {
+                    container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' });
+                    container.fadeOut(300, function () {
+                        $(this).remove();
+                    });
+                });
+
+                $('#node-input-option-container').append(container);
+            }
+
+            $('#node-input-add-option').click(function () {
+                generateOption($('#node-input-option-container').children().length + 1, {});
+                $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
+            });
+
+            for (let i = 0; i < this.options.length; i++) {
+                const option = this.options[i];
+                generateOption(i + 1, option);
+            }
+
+            $('#node-input-option-container').sortable({
+                axis: 'y',
+                handle: '.node-input-option-handle',
+                cursor: 'move'
+            });
+        },
+        oneditsave: function () {
+            const options = $('#node-input-option-container').children();
+            const node = this;
+            node.options = [];
+            options.each(function (i) {
+                const option = $(this);
+                const o = {
+                    label: option.find('.node-input-option-label').val(),
+                    // condition: option.find('.node-input-option-condition').val()
+                };
+
+                node.options.push(o);
+            });
+
+            this.outputs = node.options.length || 1
+        },
     });
 </script>
 
@@ -54,6 +137,26 @@
         <input type="hidden" id="node-input-height">
         <button class="editor-button" id="node-input-size"></button>
     </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>
+        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
+            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
+            <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+        <a
+            data-html="true"
+            title="Dynamic Property: Send 'msg.options' in order to override this property."
+            class="red-ui-button ui-node-popover-title"
+            style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+            <i style="font-family: ui-serif;">fx</i>
+        </a>
+    </div>
+    <!-- Add Option Button -->
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
+    </div>
+
     <div class="form-row">
         <label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
         <input type="text" id="node-input-waiting_title">
@@ -62,12 +165,4 @@
         <label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
         <input type="text" id="node-input-waiting_info">
     </div>
-    <div class="form-row">
-        <label for="node-input-submit_title"><i class="fa fa-hand"></i>Text for submit button</label>
-        <input type="text" id="node-input-submit_title">
-    </div>
-    <div class="form-row">
-        <label for="node-input-cancel_title"><i class="fa fa-hand"></i>Text for cancel button</label>
-        <input type="text" id="node-input-cancel_title">
-    </div>
-</script>
+</script>

package/nodes/dynamic-form.js

@@ -37,5 +37,12 @@ module.exports = function (RED) {
         }
     }
 
-    RED.nodes.registerType('dynamic-form', DynamicFormNode)
+    RED.nodes.registerType('dynamic-form', DynamicFormNode, {
+      defaults: {
+        outputs: { value: 1 }
+      },
+      outputs: function(config) {
+        return config.outputs || 1;
+      }
+    })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "description": "The ui component for the ProcessCube dynamic-form",
     "keywords": [
         "processcube",

package/resources/dynamic-form.umd.js

@@ -1,3 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dynamic-form-wrapper[data-v-19b58e9c]{padding:10px;margin:10px;border:1px solid black}.dynamic-form-class[data-v-19b58e9c]{color:green;font-weight:700}h1[data-v-19b58e9c]{margin-bottom:10px}h2[data-v-19b58e9c]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-19b58e9c]{margin-top:1rem}p[data-v-19b58e9c]{margin-bottom:5px}ul li[data-v-19b58e9c]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-19b58e9c]{padding:12px;margin:12px;background-color:#eee}code[data-v-19b58e9c]{font-size:.825rem;color:#ae0000}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a["dynamic-form"]={},a.Vue,a.vuex))})(this,function(a,e,u){"use strict";const p=(t,r)=>{const s=t.__vccOpts||t;for(const[c,n]of r)s[c]=n;return s},f={name:"DynamicForm",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},setup(t){console.info("DynamicForm setup with:",t),console.debug("Vue function loaded correctly",e.markRaw)},data(){return{form:{},formData:{}}},computed:{...u.mapState("data",["messages"]),waiting_title(){return this.props.waiting_title||"Warten auf den Usertask..."},waiting_info(){return this.props.waiting_info||"Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist."},submit_title(){return this.props.submit_title||"Submit your task"},cancel_title(){return this.props.cancel_title||"Cancel your task"}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{if(t.payload.formFields){const r=t.payload.formFields.reduce((s,c)=>(s[c.id]=c.defaultValue||"",s),{});this.formData=r}else console.debug("No formFields in msg.payload",t.payload.formFields);this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,r;(t=this.$socket)==null||t.off("widget-load"+this.id),(r=this.$socket)==null||r.off("msg-input:"+this.id)},methods:{hasUserTask(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask},userTask(){return this.hasUserTask()?this.messages[this.id].payload.userTask:{}},fields(){return(this.hasUserTask()?this.userTask().userTaskConfig.formFields:[]).map(s=>({...s,component:k(s.type),items:h(s.type,s)}))},hasFields(){return this.hasUserTask&&this.userTask.userTaskConfig.formFields.length>0},send(t){this.$socket.emit("widget-action",this.id,t)},submit(){this.send({payload:{formData:this.formData,userTask:this.userTask(),action:"submit"}})},cancel(){this.send({payload:{formData:this.formData,userTask:this.userTask(),action:"cancel"}})}}};function h(t,r){return t==="enum"?r.enumValues.map(s=>({title:s.name,value:s.id})):null}function k(t){switch(t){case"string":return"v-text-field";case"long":case"date":return"v-text-field";case"enum":return"v-select";case"boolean":return"v-checkbox";case"text":return"v-text-field";case"select":return"v-select";case"checkbox":return"v-checkbox";case"radio":return"v-radio";case"switch":return"v-switch";case"slider":return"v-slider";case"time":return"v-time-picker";case"datetime":return"v-datetime-picker";case"color":return"v-color-picker";case"file":return"v-file-input";case"textarea":return"v-textarea";case"password":return"v-text-field";case"number":return"v-text-field";case"email":return"v-text-field";case"tel":return"v-text-field";case"url":return"v-text-field";default:return"v-text-field"}}const _={className:"dynamic-form-wrapper"},y={key:0},b={key:1};function x(t,r,s,c,n,i){const l=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),m=e.resolveComponent("v-btn"),w=e.resolveComponent("v-form"),C=e.resolveComponent("v-alert");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createCommentVNode(" Component must be wrapped in a block so props such as className and style can be passed in from parent "),e.createElementVNode("div",_,[i.hasFields?(e.openBlock(),e.createElementBlock("p",y,[e.createVNode(w,{ref:"form",modelValue:n.form,"onUpdate:modelValue":r[0]||(r[0]=o=>n.form=o)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.fields(),(o,T)=>(e.openBlock(),e.createBlock(d,{key:T},{default:e.withCtx(()=>[e.createVNode(l,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.component),{id:o.id,modelValue:n.formData[o.id],"onUpdate:modelValue":V=>n.formData[o.id]=V,required:o.required,items:o.items,label:o.label},null,8,["id","modelValue","onUpdate:modelValue","required","items","label"]))]),_:2},1024)]),_:2},1024))),128)),e.createVNode(d,null,{default:e.withCtx(()=>[e.createVNode(l,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{variant:"outlined",block:"",onClick:i.cancel},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.cancel_title),1)]),_:1},8,["onClick"])]),_:1}),e.createVNode(l,{cols:"6"},{default:e.withCtx(()=>[e.createVNode(m,{block:"",onClick:i.submit},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.submit_title),1)]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",b,[e.createVNode(C,{text:i.waiting_info,title:i.waiting_title},null,8,["text","title"])]))])],2112)}const g=p(f,[["render",x],["__scopeId","data-v-19b58e9c"],["__file","/Users/moellenbeck/projects/5minds/reps/node-red-dashboard-2-processcube-dynamic-form/ui/components/DynamicForm.vue"]]);a.DynamicForm=g,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
-//# sourceMappingURL=dynamic-form.umd.js.map
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".dynamic-form-wrapper[data-v-5ca4b3d4]{padding:10px;margin:10px;border:1px solid black}.dynamic-form-class[data-v-5ca4b3d4]{color:green;font-weight:700}h1[data-v-5ca4b3d4]{margin-bottom:10px}h2[data-v-5ca4b3d4]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-5ca4b3d4]{margin-top:1rem}p[data-v-5ca4b3d4]{margin-bottom:5px}ul li[data-v-5ca4b3d4]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-5ca4b3d4]{padding:12px;margin:12px;background-color:#eee}code[data-v-5ca4b3d4]{font-size:.825rem;color:#ae0000}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["dynamic-form"]={},n.Vue,n.vuex))})(this,function(n,e,p){"use strict";const u=(t,o)=>{const s=t.__vccOpts||t;for(const[l,r]of o)s[l]=r;return s},f={name:"DynamicForm",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},setup(t){console.info("DynamicForm setup with:",t),console.debug("Vue function loaded correctly",e.markRaw)},data(){return{actions:[],form:{},formData:{}}},computed:{...p.mapState("data",["messages"]),waiting_title(){return this.props.waiting_title||"Warten auf den Usertask..."},waiting_info(){return this.props.waiting_info||"Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist."}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.init(),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{this.init(),t.payload&&t.payload.userTask&&t.payload.userTask.startToken&&t.payload.userTask.startToken.formData&&(this.formData={...t.payload.userTask.startToken.formData},console.info(this.formData)),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,o;(t=this.$socket)==null||t.off("widget-load"+this.id),(o=this.$socket)==null||o.off("msg-input:"+this.id)},methods:{hasUserTask(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask},userTask(){return this.hasUserTask()?this.messages[this.id].payload.userTask:{}},fields(){return(this.hasUserTask()?this.userTask().userTaskConfig.formFields:[]).map(s=>({...s,component:k(s.type),items:h(s.type,s)}))},hasFields(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask!==void 0},send(t,o){const s=[];s[o]=t,console.info(s),this.$socket.emit("widget-action",this.id,s)},init(){this.actions=this.props.options},actionFn(t){this.send({payload:{formData:this.formData,userTask:this.userTask()}},this.actions.findIndex(o=>o.label===t))}}};function h(t,o){return t==="enum"?o.enumValues.map(s=>({title:s.name,value:s.id})):null}function k(t){switch(t){case"string":return"v-text-field";case"long":case"date":return"v-text-field";case"enum":return"v-select";case"boolean":return"v-checkbox";case"text":return"v-text-field";case"select":return"v-select";case"checkbox":return"v-checkbox";case"radio":return"v-radio";case"switch":return"v-switch";case"slider":return"v-slider";case"time":return"v-time-picker";case"datetime":return"v-datetime-picker";case"color":return"v-color-picker";case"file":return"v-file-input";case"textarea":return"v-textarea";case"password":return"v-text-field";case"number":return"v-text-field";case"email":return"v-text-field";case"tel":return"v-text-field";case"url":return"v-text-field";default:return"v-text-field"}}const _={className:"dynamic-form-wrapper"},y={key:0},x={key:1};function g(t,o,s,l,r,a){const T=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),b=e.resolveComponent("v-btn"),B=e.resolveComponent("v-form"),D=e.resolveComponent("v-alert");return e.openBlock(),e.createElementBlock("div",_,[a.hasFields()?(e.openBlock(),e.createElementBlock("p",y,[e.createVNode(B,{ref:"form",modelValue:r.form,"onUpdate:modelValue":o[0]||(o[0]=i=>r.form=i)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.fields(),(i,c)=>(e.openBlock(),e.createBlock(d,{key:c},{default:e.withCtx(()=>[e.createVNode(T,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.component),{id:i.id,modelValue:r.formData[i.id],"onUpdate:modelValue":m=>r.formData[i.id]=m,required:i.required,items:i.items,label:i.label},null,8,["id","modelValue","onUpdate:modelValue","required","items","label"]))]),_:2},1024)]),_:2},1024))),128)),e.createVNode(d,{style:{display:"flex",gap:"8px",padding:"12px"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.actions,(i,c)=>(e.openBlock(),e.createElementBlock("div",{key:c,style:{"flex-grow":"1"}},[(e.openBlock(),e.createBlock(b,{key:c,style:{width:"100%"},onClick:m=>a.actionFn(i.label)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.label),1)]),_:2},1032,["onClick"]))]))),128))]),_:1})]),_:1},8,["modelValue"])])):(e.openBlock(),e.createElementBlock("p",x,[e.createVNode(D,{text:a.waiting_info,title:a.waiting_title},null,8,["text","title"])]))])}const w=u(f,[["render",g],["__scopeId","data-v-5ca4b3d4"]]);n.DynamicForm=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/ui/components/DynamicForm.vue

@@ -1,208 +1,222 @@
 <template>
-    <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
-    <div className="dynamic-form-wrapper">
-        <p v-if="hasFields">
-            <v-form ref="form" v-model="form">
-                <v-row v-for="(field, index) in fields()" :key="index">
-                    <v-col cols="12">
-                        <component
-                            :is="field.component"
-                            :id="field.id"
-                            v-model="formData[field.id]"
-                            :required="field.required"
-                            :items="field.items"
-                            :label="field.label"
-                        />
-                    </v-col>
-                </v-row>
+  <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->
+  <div className="dynamic-form-wrapper">
+    <p v-if="hasFields()">
+      <v-form ref="form" v-model="form">
+        <v-row v-for="(field, index) in fields()" :key="index">
+          <v-col cols="12">
+            <component
+              :is="field.component"
+              :id="field.id"
+              v-model="formData[field.id]"
+              :required="field.required"
+              :items="field.items"
+              :label="field.label" />
+          </v-col>
+        </v-row>
 
-                <v-row>
-                    <v-col cols="6">
-                        <v-btn variant="outlined" block @click="cancel">{{ cancel_title }}</v-btn>
-                    </v-col>
-                    <v-col cols="6">
-                        <v-btn block @click="submit">{{ submit_title }}</v-btn>
-                    </v-col>
-                </v-row>
-            </v-form>
-        </p>
-        <p v-else>
-            <v-alert :text="waiting_info" :title="waiting_title" />
-        </p>
-    </div>
+        <v-row style="display: flex; gap: 8px; padding: 12px">
+          <div
+            v-for="(action, index) in actions"
+            :key="index"
+            style="flex-grow: 1">
+            <v-btn
+              :key="index"
+              style="width: 100%"
+              @click="actionFn(action.label)">
+              {{ action.label }}
+            </v-btn>
+          </div>
+        </v-row>
+      </v-form>
+    </p>
+    <p v-else>
+      <v-alert :text="waiting_info" :title="waiting_title" />
+    </p>
+  </div>
 </template>
 
 <script>
-import { markRaw } from 'vue'
-import { mapState } from 'vuex'
+import { markRaw } from "vue";
+import { mapState } from "vuex";
 
 export default {
-    name: 'DynamicForm',
-    inject: ['$socket'],
-    props: {
-        /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
-        id: { type: String, required: true },
-        props: { type: Object, default: () => ({}) },
-        state: { type: Object, default: () => ({ enabled: false, visible: false }) }
+  name: "DynamicForm",
+  inject: ["$socket"],
+  props: {
+    /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
+    id: { type: String, required: true },
+    props: { type: Object, default: () => ({}) },
+    state: {
+      type: Object,
+      default: () => ({ enabled: false, visible: false }),
     },
-    setup (props) {
-        console.info('DynamicForm setup with:', props)
-        console.debug('Vue function loaded correctly', markRaw)
+  },
+  setup(props) {
+    console.info("DynamicForm setup with:", props);
+    console.debug("Vue function loaded correctly", markRaw);
+  },
+  data() {
+    return {
+      actions: [],
+      form: {},
+      formData: {},
+    };
+  },
+  computed: {
+    ...mapState("data", ["messages"]),
+    waiting_title() {
+      return this.props.waiting_title || "Warten auf den Usertask...";
     },
-    data () {
-        return {
-            form: {},
-            formData: {}
-        }
+    waiting_info() {
+      return (
+        this.props.waiting_info ||
+        "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist."
+      );
     },
-    computed: {
-        ...mapState('data', ['messages']),
-        waiting_title () {
-            return this.props.waiting_title || 'Warten auf den Usertask...'
-        },
-        waiting_info () {
-            return this.props.waiting_info || 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'
-        },
-        submit_title () {
-            return this.props.submit_title || 'Submit your task'
-        },
-        cancel_title () {
-            return this.props.cancel_title || 'Cancel your task'
-        }
-    },
-    mounted () {
-        this.$socket.on('widget-load:' + this.id, (msg) => {
-            // load the latest message from the Node-RED datastore when this widget is loaded
-            // storing it in our vuex store so that we have it saved as we navigate around
-            this.$store.commit('data/bind', {
-                widgetId: this.id,
-                msg
-            })
-        })
-        this.$socket.on('msg-input:' + this.id, (msg) => {
-            // store the latest message in our client-side vuex store when we receive a new message
+  },
+  mounted() {
+    this.$socket.on("widget-load:" + this.id, (msg) => {
+      this.init()
 
-            if (msg.payload.formFields) {
-                const formData = msg.payload.formFields.reduce((acc, field) => {
-                    // acc[field.id] = field.value || field.defaultValue || ''
-                    acc[field.id] = field.defaultValue || ''
-                    return acc
-                }, {})
+      this.$store.commit("data/bind", {
+        widgetId: this.id,
+        msg,
+      });
+    });
+    this.$socket.on("msg-input:" + this.id, (msg) => {
+      // store the latest message in our client-side vuex store when we receive a new message
+      this.init()
 
-                this.formData = formData
-            } else {
-                console.debug('No formFields in msg.payload', msg.payload.formFields)
-            }
+      if (msg.payload && msg.payload.userTask && msg.payload.userTask.startToken && msg.payload.userTask.startToken.formData) {
+              this.formData = { ...msg.payload.userTask.startToken.formData };
+              console.info(this.formData)
+      }
 
-            this.$store.commit('data/bind', {
-                widgetId: this.id,
-                msg
-            })
-        })
-        // tell Node-RED that we're loading a new instance of this widget
-        this.$socket.emit('widget-load', this.id)
+      this.$store.commit("data/bind", {
+        widgetId: this.id,
+        msg,
+      });
+    });
+    // tell Node-RED that we're loading a new instance of this widget
+    this.$socket.emit("widget-load", this.id);
+  },
+  unmounted() {
+    /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
+    this.$socket?.off("widget-load" + this.id);
+    this.$socket?.off("msg-input:" + this.id);
+  },
+  methods: {
+    hasUserTask() {
+      return (
+        this.messages &&
+        this.messages[this.id] &&
+        this.messages[this.id].payload.userTask
+      );
     },
-    unmounted () {
-        /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
-        this.$socket?.off('widget-load' + this.id)
-        this.$socket?.off('msg-input:' + this.id)
+    userTask() {
+      return this.hasUserTask() ? this.messages[this.id].payload.userTask : {};
     },
-    methods: {
-        hasUserTask () {
-            return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask
-        },
-        userTask () {
-            return this.hasUserTask() ? this.messages[this.id].payload.userTask : {}
-        },
-        fields () {
-            const aFields = this.hasUserTask() ? this.userTask().userTaskConfig.formFields : []
+    fields() {
+      const aFields = this.hasUserTask()
+        ? this.userTask().userTaskConfig.formFields
+        : [];
 
-            const fieldMap = aFields.map(field => ({
-                ...field,
-                component: mapFieldTypes(field.type),
-                items: mapItems(field.type, field)
-            }))
+      const fieldMap = aFields.map((field) => ({
+        ...field,
+        component: mapFieldTypes(field.type),
+        items: mapItems(field.type, field),
+      }));
 
-            return fieldMap
-        },
-        hasFields () {
-            return this.hasUserTask && this.userTask.userTaskConfig.formFields.length > 0
-        },
-        /*
+      return fieldMap;
+    },
+    hasFields() {
+      return (
+        this.messages &&
+        this.messages[this.id] &&
+        this.messages[this.id].payload.userTask !== undefined
+      );
+    },
+    /*
             widget-action just sends a msg to Node-RED, it does not store the msg state server-side
             alternatively, you can use widget-change, which will also store the msg in the Node's datastore
         */
-        send (msg) {
-            this.$socket.emit('widget-action', this.id, msg)
-        },
-        submit () {
-            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'submit' } })
-        },
-        cancel () {
-            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'cancel' } })
-        }
-    }
-}
+    send(msg, index) {
+      const msgArr = [];
+      msgArr[index] = msg;
+      console.info(msgArr);
+      this.$socket.emit("widget-action", this.id, msgArr);
+    },
+    init() {
+      this.actions = this.props.options;
+    },
+    actionFn(action) {
+      this.send(
+        { payload: { formData: this.formData, userTask: this.userTask() } },
+        this.actions.findIndex((element) => element.label === action)
+      );
+    },
+  },
+};
 
-function mapItems (type, field) {
-    if (type === 'enum') {
-        return field.enumValues.map(enumValue => ({
-            title: enumValue.name,
-            value: enumValue.id
-        }))
-    } else {
-        return null
-    }
+function mapItems(type, field) {
+  if (type === "enum") {
+    return field.enumValues.map((enumValue) => ({
+      title: enumValue.name,
+      value: enumValue.id,
+    }));
+  } else {
+    return null;
+  }
 }
 
-function mapFieldTypes (fieldType) {
-    switch (fieldType) {
-    case 'string':
-        return 'v-text-field'
-    case 'long':
-    case 'date':
-        return 'v-text-field'
-    case 'enum':
-        return 'v-select'
-    case 'boolean':
-        return 'v-checkbox'
-    case 'text':
-        return 'v-text-field'
-    case 'select':
-        return 'v-select'
-    case 'checkbox':
-        return 'v-checkbox'
-    case 'radio':
-        return 'v-radio'
-    case 'switch':
-        return 'v-switch'
-    case 'slider':
-        return 'v-slider'
-    case 'time':
-        return 'v-time-picker'
-    case 'datetime':
-        return 'v-datetime-picker'
-    case 'color':
-        return 'v-color-picker'
-    case 'file':
-        return 'v-file-input'
-    case 'textarea':
-        return 'v-textarea'
-    case 'password':
-        return 'v-text-field'
-    case 'number':
-        return 'v-text-field'
-    case 'email':
-        return 'v-text-field'
-    case 'tel':
-        return 'v-text-field'
-    case 'url':
-        return 'v-text-field'
+function mapFieldTypes(fieldType) {
+  switch (fieldType) {
+    case "string":
+      return "v-text-field";
+    case "long":
+    case "date":
+      return "v-text-field";
+    case "enum":
+      return "v-select";
+    case "boolean":
+      return "v-checkbox";
+    case "text":
+      return "v-text-field";
+    case "select":
+      return "v-select";
+    case "checkbox":
+      return "v-checkbox";
+    case "radio":
+      return "v-radio";
+    case "switch":
+      return "v-switch";
+    case "slider":
+      return "v-slider";
+    case "time":
+      return "v-time-picker";
+    case "datetime":
+      return "v-datetime-picker";
+    case "color":
+      return "v-color-picker";
+    case "file":
+      return "v-file-input";
+    case "textarea":
+      return "v-textarea";
+    case "password":
+      return "v-text-field";
+    case "number":
+      return "v-text-field";
+    case "email":
+      return "v-text-field";
+    case "tel":
+      return "v-text-field";
+    case "url":
+      return "v-text-field";
     default:
-        return 'v-text-field'
-    }
+      return "v-text-field";
+  }
 }
-
 </script>
 
 <style scoped>

package/resources/dynamic-form.umd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dynamic-form.umd.js","sources":["../ui/components/DynamicForm.vue"],"sourcesContent":["<template>\n    <!-- Component must be wrapped in a block so props such as className and style can be passed in from parent -->\n    <div className=\"dynamic-form-wrapper\">\n        <p v-if=\"hasFields\">\n            <v-form ref=\"form\" v-model=\"form\">\n                <v-row v-for=\"(field, index) in fields()\" :key=\"index\">\n                    <v-col cols=\"12\">\n                        <component\n                            :is=\"field.component\"\n                            :id=\"field.id\"\n                            v-model=\"formData[field.id]\"\n                            :required=\"field.required\"\n                            :items=\"field.items\"\n                            :label=\"field.label\"\n                        />\n                    </v-col>\n                </v-row>\n\n                <v-row>\n                    <v-col cols=\"6\">\n                        <v-btn variant=\"outlined\" block @click=\"cancel\">{{ cancel_title }}</v-btn>\n                    </v-col>\n                    <v-col cols=\"6\">\n                        <v-btn block @click=\"submit\">{{ submit_title }}</v-btn>\n                    </v-col>\n                </v-row>\n            </v-form>\n        </p>\n        <p v-else>\n            <v-alert :text=\"waiting_info\" :title=\"waiting_title\" />\n        </p>\n    </div>\n</template>\n\n<script>\nimport { markRaw } from 'vue'\nimport { mapState } from 'vuex'\n\nexport default {\n    name: 'DynamicForm',\n    inject: ['$socket'],\n    props: {\n        /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */\n        id: { type: String, required: true },\n        props: { type: Object, default: () => ({}) },\n        state: { type: Object, default: () => ({ enabled: false, visible: false }) }\n    },\n    setup (props) {\n        console.info('DynamicForm setup with:', props)\n        console.debug('Vue function loaded correctly', markRaw)\n    },\n    data () {\n        return {\n            form: {},\n            formData: {}\n        }\n    },\n    computed: {\n        ...mapState('data', ['messages']),\n        waiting_title () {\n            return this.props.waiting_title || 'Warten auf den Usertask...'\n        },\n        waiting_info () {\n            return this.props.waiting_info || 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.'\n        },\n        submit_title () {\n            return this.props.submit_title || 'Submit your task'\n        },\n        cancel_title () {\n            return this.props.cancel_title || 'Cancel your task'\n        }\n    },\n    mounted () {\n        this.$socket.on('widget-load:' + this.id, (msg) => {\n            // load the latest message from the Node-RED datastore when this widget is loaded\n            // storing it in our vuex store so that we have it saved as we navigate around\n            this.$store.commit('data/bind', {\n                widgetId: this.id,\n                msg\n            })\n        })\n        this.$socket.on('msg-input:' + this.id, (msg) => {\n            // store the latest message in our client-side vuex store when we receive a new message\n\n            if (msg.payload.formFields) {\n                const formData = msg.payload.formFields.reduce((acc, field) => {\n                    // acc[field.id] = field.value || field.defaultValue || ''\n                    acc[field.id] = field.defaultValue || ''\n                    return acc\n                }, {})\n\n                this.formData = formData\n            } else {\n                console.debug('No formFields in msg.payload', msg.payload.formFields)\n            }\n\n            this.$store.commit('data/bind', {\n                widgetId: this.id,\n                msg\n            })\n        })\n        // tell Node-RED that we're loading a new instance of this widget\n        this.$socket.emit('widget-load', this.id)\n    },\n    unmounted () {\n        /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */\n        this.$socket?.off('widget-load' + this.id)\n        this.$socket?.off('msg-input:' + this.id)\n    },\n    methods: {\n        hasUserTask () {\n            return this.messages && this.messages[this.id] && this.messages[this.id].payload.userTask\n        },\n        userTask () {\n            return this.hasUserTask() ? this.messages[this.id].payload.userTask : {}\n        },\n        fields () {\n            const aFields = this.hasUserTask() ? this.userTask().userTaskConfig.formFields : []\n\n            const fieldMap = aFields.map(field => ({\n                ...field,\n                component: mapFieldTypes(field.type),\n                items: mapItems(field.type, field)\n            }))\n\n            return fieldMap\n        },\n        hasFields () {\n            return this.hasUserTask && this.userTask.userTaskConfig.formFields.length > 0\n        },\n        /*\n            widget-action just sends a msg to Node-RED, it does not store the msg state server-side\n            alternatively, you can use widget-change, which will also store the msg in the Node's datastore\n        */\n        send (msg) {\n            this.$socket.emit('widget-action', this.id, msg)\n        },\n        submit () {\n            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'submit' } })\n        },\n        cancel () {\n            this.send({ payload: { formData: this.formData, userTask: this.userTask(), action: 'cancel' } })\n        }\n    }\n}\n\nfunction mapItems (type, field) {\n    if (type === 'enum') {\n        return field.enumValues.map(enumValue => ({\n            title: enumValue.name,\n            value: enumValue.id\n        }))\n    } else {\n        return null\n    }\n}\n\nfunction mapFieldTypes (fieldType) {\n    switch (fieldType) {\n    case 'string':\n        return 'v-text-field'\n    case 'long':\n    case 'date':\n        return 'v-text-field'\n    case 'enum':\n        return 'v-select'\n    case 'boolean':\n        return 'v-checkbox'\n    case 'text':\n        return 'v-text-field'\n    case 'select':\n        return 'v-select'\n    case 'checkbox':\n        return 'v-checkbox'\n    case 'radio':\n        return 'v-radio'\n    case 'switch':\n        return 'v-switch'\n    case 'slider':\n        return 'v-slider'\n    case 'time':\n        return 'v-time-picker'\n    case 'datetime':\n        return 'v-datetime-picker'\n    case 'color':\n        return 'v-color-picker'\n    case 'file':\n        return 'v-file-input'\n    case 'textarea':\n        return 'v-textarea'\n    case 'password':\n        return 'v-text-field'\n    case 'number':\n        return 'v-text-field'\n    case 'email':\n        return 'v-text-field'\n    case 'tel':\n        return 'v-text-field'\n    case 'url':\n        return 'v-text-field'\n    default:\n        return 'v-text-field'\n    }\n}\n\n</script>\n\n<style scoped>\n/* CSS is auto scoped, but using named classes is still recommended */\n@import \"../stylesheets/dynamic-form.css\";\n</style>\n"],"names":["_sfc_main","props","markRaw","mapState","msg","formData","acc","field","_a","_b","mapFieldTypes","mapItems","type","enumValue","fieldType","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_createElementVNode","$options","_hoisted_2","_createVNode","_component_v_form","$data","_cache","$event","_withCtx","_renderList","index","_createBlock","_component_v_row","_component_v_col","_resolveDynamicComponent","_component_v_btn","_createTextVNode","_toDisplayString","_hoisted_3","_component_v_alert"],"mappings":"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"}