@5minds/node-red-dashboard-2-processcube-dynamic-form 1.0.24 → 1.0.25-develop-069653-m0w5rkpy
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.
|
@@ -202,3 +202,36 @@
|
|
|
202
202
|
<input type="text" id="node-input-waiting_info">
|
|
203
203
|
</div>
|
|
204
204
|
</script>
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
<script type="text/markdown" data-help-name="ui-dynamic-form">
|
|
208
|
+
A UI-Node to display usertasks forms from the ProcessCube Engine dynamicly.
|
|
209
|
+
|
|
210
|
+
## Usage
|
|
211
|
+
|
|
212
|
+
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.
|
|
213
|
+
|
|
214
|
+
## Validation
|
|
215
|
+
|
|
216
|
+
### message
|
|
217
|
+
|
|
218
|
+
Access to the message object is available through _msg_
|
|
219
|
+
|
|
220
|
+
### form fields
|
|
221
|
+
|
|
222
|
+
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.
|
|
223
|
+
Example: _fields.field_01_
|
|
224
|
+
|
|
225
|
+
### usertask
|
|
226
|
+
|
|
227
|
+
Access to the usertask object is available through _usertask_
|
|
228
|
+
|
|
229
|
+
## Outputs
|
|
230
|
+
|
|
231
|
+
: usertask (Object) : The representative object of the usertask.
|
|
232
|
+
|
|
233
|
+
### References
|
|
234
|
+
|
|
235
|
+
- [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube© Plattform
|
|
236
|
+
- [Node-RED Integration in ProcessCube©](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube©
|
|
237
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dynamic-form-wrapper[data-v-
|
|
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 e=document.createElement("style");e.appendChild(document.createTextNode(".dynamic-form-wrapper[data-v-23c55bcd]{padding:10px;margin:10px;border:1px solid black}.dynamic-form-class[data-v-23c55bcd]{color:green;font-weight:700}h1[data-v-23c55bcd]{margin-bottom:10px}h2[data-v-23c55bcd]{margin-top:1.5rem;margin-bottom:.75rem}h3[data-v-23c55bcd]{margin-top:1rem}p[data-v-23c55bcd]{margin-bottom:5px}ul li[data-v-23c55bcd]{list-style-type:circle;list-style-position:inside;margin-left:15px}pre[data-v-23c55bcd]{padding:12px;margin:12px;background-color:#eee}code[data-v-23c55bcd]{font-size:.825rem;color:#ae0000}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
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,p){"use strict";const u=(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:{},taskInput:{},error:!1,errorMsg:""}},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(),this.messages[this.id]=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:g(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){if(this.checkCondition(t.condition)){this.showError(!1,"");const s=this.messages[this.id]||{};s.payload={formData:this.formData,userTask:this.userTask()},this.send(s,this.actions.findIndex(r=>r.label===t.label))}else 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.messages[this.id])}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 g(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:"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",_,[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":h=>o.formData[i.id]=h,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:h=>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=u(f,[["render",w],["__scopeId","data-v-23c55bcd"]]);n.UIDynamicForm=T,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -58,7 +58,6 @@ export default {
|
|
|
58
58
|
actions: [],
|
|
59
59
|
form: {},
|
|
60
60
|
formData: {},
|
|
61
|
-
msg: {},
|
|
62
61
|
taskInput: {},
|
|
63
62
|
error: false,
|
|
64
63
|
errorMsg: '',
|
|
@@ -180,7 +179,7 @@ export default {
|
|
|
180
179
|
if (condition == '') return true;
|
|
181
180
|
try {
|
|
182
181
|
const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')');
|
|
183
|
-
const result = func(this.formData, this.taskInput, this.
|
|
182
|
+
const result = func(this.formData, this.taskInput, this.messages[this.id]);
|
|
184
183
|
return Boolean(result);
|
|
185
184
|
} catch (err) {
|
|
186
185
|
console.error('Error while evaluating condition: ' + err);
|