@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.21 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
return v.length === unique.size;
|
|
18
18
|
},
|
|
19
19
|
},
|
|
20
|
-
waiting_title: { value: '
|
|
20
|
+
waiting_title: { value: 'Warten auf den Usertask...' },
|
|
21
21
|
waiting_info: {
|
|
22
22
|
value: 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.',
|
|
23
23
|
},
|
package/nodes/ui-dynamic-form.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
module.exports = function (RED) {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
function UIDynamicFormNode(config) {
|
|
3
|
+
RED.nodes.createNode(this, config);
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const node = this;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
// which group are we rendering this widget
|
|
8
|
+
const group = RED.nodes.getNode(config.group);
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
const base = group.getBase();
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
12
|
+
// server-side event handlers
|
|
13
|
+
const evts = {
|
|
14
|
+
onAction: true,
|
|
15
|
+
onInput: function (msg, send, done) {
|
|
16
|
+
// store the latest value in our Node-RED datastore
|
|
17
|
+
base.stores.data.save(base, node, msg);
|
|
18
|
+
},
|
|
19
|
+
onSocket: {
|
|
20
|
+
'my-custom-event': function (conn, id, msg) {
|
|
21
|
+
console.info('"my-custom-event" received:', conn.id, id, msg);
|
|
22
|
+
console.info('conn.id:', conn.id);
|
|
23
|
+
console.info('id:', id);
|
|
24
|
+
console.info('msg:', msg);
|
|
25
|
+
console.info('node.id:', node.id);
|
|
26
|
+
// emit a msg in Node-RED from this node
|
|
27
|
+
node.send(msg);
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
// inform the dashboard UI that we are adding this node
|
|
33
|
+
if (group) {
|
|
34
|
+
group.register(node, config, evts);
|
|
35
|
+
} else {
|
|
36
|
+
node.error('No group configured');
|
|
37
|
+
}
|
|
37
38
|
}
|
|
38
|
-
}
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
40
|
+
RED.nodes.registerType('ui-dynamic-form', UIDynamicFormNode, {
|
|
41
|
+
defaults: {
|
|
42
|
+
outputs: { value: 1 },
|
|
43
|
+
},
|
|
44
|
+
outputs: function (config) {
|
|
45
|
+
return config.outputs || 1;
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
48
|
};
|
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
2
|
-
(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["ui-dynamic-form"]={},n.Vue,n.vuex))})(this,function(n,e,
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".dynamic-form-wrapper[data-v-3faf560c]{padding:10px;margin:10px;border:1px solid black}.dynamic-form-class[data-v-3faf560c]{color:green;font-weight:700}h1[data-v-3faf560c]{margin-bottom:10px}h2[data-v-3faf560c]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-3faf560c]{margin-top:1rem}p[data-v-3faf560c]{margin-bottom:5px}ul li[data-v-3faf560c]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-3faf560c]{padding:12px;margin:12px;background-color:#eee}code[data-v-3faf560c]{font-size:.825rem;color:#ae0000}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
(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["ui-dynamic-form"]={},n.Vue,n.vuex))})(this,function(n,e,u){"use strict";const h=(t,s)=>{const r=t.__vccOpts||t;for(const[a,o]of s)r[a]=o;return r},f={name:"UIDynamicForm",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},setup(t){console.info("UIDynamicForm setup with:",t),console.debug("Vue function loaded correctly",e.markRaw)},data(){return{actions:[],form:{},formData:{},msg:{},taskInput:{},error:!1,errorMsg:""}},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."}},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(),this.msg=t;const s=t.payload&&t.payload.userTask,r=t.payload.userTask.userTaskConfig.formFields,a=t.payload.userTask.startToken;s&&(this.taskInput=t.payload.userTask),s&&r&&r.forEach(o=>{this.formData[o.id]=o.defaultValue}),s&&a&&Object.keys(a).forEach(o=>{this.formData[o]=a[o]}),this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,s;(t=this.$socket)==null||t.off("widget-load"+this.id),(s=this.$socket)==null||s.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(r=>({...r,component:_(r.type),items:k(r.type,r)}))},hasFields(){return this.messages&&this.messages[this.id]&&this.messages[this.id].payload.userTask!==void 0},send(t,s){const r=[];r[s]=t,this.$socket.emit("widget-action",this.id,r)},init(){this.actions=this.props.options},actionFn(t){this.checkCondition(t.condition)?(this.showError(!1,""),this.send({payload:{formData:this.formData,userTask:this.userTask()}},this.actions.findIndex(s=>s.label===t.label))):this.showError(!0,t.errorMessage)},checkCondition(t){if(t=="")return!0;try{return!!Function("fields","userTask","msg",'"use strict"; return ('+t+")")(this.formData,this.taskInput,this.msg)}catch(s){return console.error("Error while evaluating condition: "+s),!1}},showError(t,s){this.error=t,this.errorMsg=s}}};function k(t,s){return t==="enum"?s.enumValues.map(r=>({title:r.name,value:r.id})):null}function _(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 g={className:"ui-dynamic-form-wrapper"},y={key:0},x={key:1};function w(t,s,r,a,o,c){const b=e.resolveComponent("v-col"),d=e.resolveComponent("v-row"),m=e.resolveComponent("v-alert"),B=e.resolveComponent("v-btn"),C=e.resolveComponent("v-form");return e.openBlock(),e.createElementBlock("div",g,[c.hasFields()?(e.openBlock(),e.createElementBlock("p",y,[e.createVNode(C,{ref:"form",modelValue:o.form,"onUpdate:modelValue":s[0]||(s[0]=i=>o.form=i)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.fields(),(i,l)=>(e.openBlock(),e.createBlock(d,{key:l},{default:e.withCtx(()=>[e.createVNode(b,{cols:"12"},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.component),{id:i.id,modelValue:o.formData[i.id],"onUpdate:modelValue":p=>o.formData[i.id]=p,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:{padding:"12px"}},{default:e.withCtx(()=>[o.error?(e.openBlock(),e.createBlock(m,{key:0,type:"error"},{default:e.withCtx(()=>[e.createTextVNode("Error: "+e.toDisplayString(o.errorMsg),1)]),_:1})):e.createCommentVNode("",!0)]),_:1}),e.createVNode(d,{style:{display:"flex",gap:"8px",padding:"12px"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.actions,(i,l)=>(e.openBlock(),e.createElementBlock("div",{key:l,style:{"flex-grow":"1"}},[(e.openBlock(),e.createBlock(B,{key:l,style:{width:"100%"},onClick:p=>c.actionFn(i)},{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(m,{text:c.waiting_info,title:c.waiting_title},null,8,["text","title"])]))])}const T=h(f,[["render",w],["__scopeId","data-v-3faf560c"]]);n.UIDynamicForm=T,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -91,14 +91,24 @@ export default {
|
|
|
91
91
|
|
|
92
92
|
this.msg = msg;
|
|
93
93
|
|
|
94
|
-
|
|
94
|
+
const hasTask = msg.payload && msg.payload.userTask;
|
|
95
|
+
const defaultValues = msg.payload.userTask.userTaskConfig.formFields;
|
|
96
|
+
const initialValues = msg.payload.userTask.startToken;
|
|
97
|
+
|
|
98
|
+
if (hasTask) {
|
|
95
99
|
this.taskInput = msg.payload.userTask;
|
|
96
100
|
}
|
|
97
101
|
|
|
98
|
-
if (
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
+
if (hasTask && defaultValues) {
|
|
103
|
+
defaultValues.forEach((field) => {
|
|
104
|
+
this.formData[field.id] = field.defaultValue;
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
if (hasTask && initialValues) {
|
|
109
|
+
Object.keys(initialValues).forEach((key) => {
|
|
110
|
+
this.formData[key] = initialValues[key];
|
|
111
|
+
});
|
|
102
112
|
}
|
|
103
113
|
|
|
104
114
|
this.$store.commit('data/bind', {
|
|
@@ -159,6 +169,7 @@ export default {
|
|
|
159
169
|
}
|
|
160
170
|
},
|
|
161
171
|
checkCondition(condition) {
|
|
172
|
+
if (condition == '') return true;
|
|
162
173
|
try {
|
|
163
174
|
const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')');
|
|
164
175
|
const result = func(this.formData, this.taskInput, this.msg);
|
package/ui/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/* Exports of all of the components in this node */
|
|
2
|
-
export { default as UIDynamicForm } from './components/UIDynamicForm.vue'
|
|
2
|
+
export { default as UIDynamicForm } from './components/UIDynamicForm.vue';
|