@5minds/node-red-dashboard-2-processcube-process-progress-bar 1.0.0 → 1.1.1
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.
- package/README.md +4 -0
- package/nodes/ui-process-progress-bar.html +4 -0
- package/nodes/ui-process-progress-bar.js +3 -3
- package/package.json +1 -1
- package/resources/ui-process-progress-bar.umd.js +2 -2
- package/ui/components/UIProcessProgressBar.vue +1 -4
- package/ui/stylesheets/ui-process-progress-bar.css +33 -1
package/README.md
CHANGED
|
@@ -7,6 +7,10 @@ A UI-Node to display a step-by-step progress bar, tracking the progress of a pro
|
|
|
7
7
|
After configuring the node, use a `usertask-event-listener` node and direct all `new` and `finished` events for the tracked process into the `ui-process-progress-bar` node.
|
|
8
8
|
It will automatically update, when UserTasks are started or finished.
|
|
9
9
|
|
|
10
|
+
The output of a `usertask-input` node can also be used as an input, when using the `Result` type `Send First Task`.
|
|
11
|
+
|
|
12
|
+
This node can display 0-1 active steps and all steps before the running step are always displayed as finished.
|
|
13
|
+
|
|
10
14
|
## Title
|
|
11
15
|
|
|
12
16
|
Will be displayed above the progress bar. It can also be set dynamically by setting `msg.payload.title`.
|
|
@@ -211,6 +211,10 @@ A UI-Node to display a step-by-step progress bar, tracking the progress of a pro
|
|
|
211
211
|
After configuring the node, use a `usertask-event-listener` node and direct all `new` and `finished` events for the tracked process into the `ui-process-progress-bar` node.
|
|
212
212
|
It will automatically update, when UserTasks are started or finished.
|
|
213
213
|
|
|
214
|
+
The output of a `usertask-input` node can also be used as an input, when using the `Result` type `Send First Task`.
|
|
215
|
+
|
|
216
|
+
This node can display 0-1 active steps and all steps before the running step are always displayed as finished.
|
|
217
|
+
|
|
214
218
|
## Steps
|
|
215
219
|
|
|
216
220
|
This field is used for configuring the steps of the progress bar.
|
|
@@ -16,16 +16,16 @@ module.exports = function (RED) {
|
|
|
16
16
|
let activeStep = null;
|
|
17
17
|
let finishedSteps = [];
|
|
18
18
|
|
|
19
|
-
if (msg.payload?.
|
|
19
|
+
if (msg.payload?.userTask) {
|
|
20
20
|
const flowNodeId = msg.payload.userTask.flowNodeId;
|
|
21
21
|
const action = msg.payload.action;
|
|
22
22
|
const flowNodeIds = config.steps.map(step => step.flowNodeId);
|
|
23
23
|
const flowNodeIdExists = flowNodeIds.includes(flowNodeId);
|
|
24
24
|
|
|
25
|
-
if (flowNodeIdExists && action === 'new') {
|
|
25
|
+
if (flowNodeIdExists && (action === 'new' || ['running', 'suspended'].includes(msg.payload.userTask.state))) {
|
|
26
26
|
activeStep = flowNodeId;
|
|
27
27
|
finishedSteps = flowNodeIds.slice(0, flowNodeIds.indexOf(flowNodeId));
|
|
28
|
-
} else if (flowNodeIdExists && action === 'finished') {
|
|
28
|
+
} else if (flowNodeIdExists && (action === 'finished' || msg.payload.userTask.state === 'finished')) {
|
|
29
29
|
finishedSteps = flowNodeIds.slice(0, flowNodeIds.indexOf(flowNodeId) + 1)
|
|
30
30
|
}
|
|
31
31
|
}
|
package/package.json
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".progressBarWrapper[data-v-
|
|
2
|
-
(function(o,
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".progressBarWrapper[data-v-43e20c14]{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:40px;border-radius:8px;border:2px solid #F6F5FA;background:#fff;margin-left:92px;margin-right:92px;margin-bottom:32px}.progressBarWrapper .progressBarStep[data-v-43e20c14]{display:flex;align-items:center;gap:8px;padding:16px}.progressBarWrapper .currentStep[data-v-43e20c14]{border-radius:15px;border:4px solid #8899C9}.progressBarWrapper .finishedStep[data-v-43e20c14]{border-radius:15px;background:#8899c9;color:#fff}.progressBarWrapper hr[data-v-43e20c14]{flex-grow:2;border-radius:2px;border:none;height:4px;background:#4a4759}.progressBarWrapper .coloredConnection[data-v-43e20c14]{background:#8899c9}.progressBarWrapper span[data-v-43e20c14]{font-size:21px;font-style:normal;font-weight:400;line-height:normal;white-space:nowrap}@media only screen and (max-width: 768px){.progressBarWrapper span[data-v-43e20c14]{font-size:12px}}@media only screen and (min-width: 768px){.progressBarWrapper span[data-v-43e20c14]{font-size:14px}}@media only screen and (min-width: 992px){.progressBarWrapper span[data-v-43e20c14]{font-size:16px}}@media only screen and (min-width: 1200px){.progressBarWrapper span[data-v-43e20c14]{font-size:18px}}@media only screen and (min-width: 1600px){.progressBarWrapper span[data-v-43e20c14]{font-size:21px}}")),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
(function(o,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],r):(o=typeof globalThis<"u"?globalThis:o||self,r(o["ui-process-progress-bar"]={},o.vuex,o.Vue))})(this,function(o,r,e){"use strict";const a=(t,s)=>{const c=t.__vccOpts||t;for(const[l,d]of s)c[l]=d;return c},p={name:"UIProcessProgressBar",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},created(){this.steps=this.props.steps},computed:{...r.mapState("data",["messages"]),stepFlowNodeIds(){return this.steps.map(t=>t.flowNodeId)},activeStep(){var t,s;return(s=(t=this.messages[this.id])==null?void 0:t.processProgressBar)==null?void 0:s.activeStep},finishedSteps(){var t,s;return((s=(t=this.messages[this.id])==null?void 0:t.processProgressBar)==null?void 0:s.finishedSteps)??[]}},data(){return{steps:[]}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.steps=this.props.steps,this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{this.messages[this.id]=t,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:{}},h={class:"progressBarWrapper"},m=["src"],f=["src"];function u(t,s,c,l,d,n){return e.openBlock(),e.createElementBlock("div",h,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.steps,(i,k)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["progressBarStep",{currentStep:i.flowNodeId==n.activeStep,finishedStep:n.finishedSteps.includes(i.flowNodeId)}])},[i.icon&&!n.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:0,src:i.icon},null,8,m)):e.createCommentVNode("",!0),i.iconFinished&&n.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:1,src:i.iconFinished},null,8,f)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(i.label),1)],2),k!=d.steps.length-1?(e.openBlock(),e.createElementBlock("hr",{key:0,class:e.normalizeClass({coloredConnection:n.finishedSteps.includes(i.flowNodeId)})},null,2)):e.createCommentVNode("",!0)],64))),256))])}const g=a(p,[["render",u],["__scopeId","data-v-43e20c14"]]);o.UIProcessProgressBar=g,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="progressBarWrapper"
|
|
2
|
+
<div class="progressBarWrapper">
|
|
3
3
|
<template v-for="(step, index) in steps">
|
|
4
4
|
<div class="progressBarStep" :class="{ currentStep: step.flowNodeId == activeStep, finishedStep: finishedSteps.includes(step.flowNodeId) }">
|
|
5
5
|
<img v-if="step.icon && !finishedSteps.includes(step.flowNodeId)" :src="step.icon" />
|
|
@@ -34,9 +34,6 @@ export default {
|
|
|
34
34
|
},
|
|
35
35
|
computed: {
|
|
36
36
|
...mapState('data', ['messages']),
|
|
37
|
-
templateColumns () {
|
|
38
|
-
return { gridTemplateColumns: new Array(this.steps.length).fill("min-content").join(" auto ")};
|
|
39
|
-
},
|
|
40
37
|
stepFlowNodeIds () {
|
|
41
38
|
return this.steps.map(step => step.flowNodeId);
|
|
42
39
|
},
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
.progressBarWrapper {
|
|
2
|
-
display:
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-wrap: wrap;
|
|
3
4
|
align-items: center;
|
|
4
5
|
gap: 8px;
|
|
5
6
|
padding: 40px;
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.progressBarWrapper hr {
|
|
32
|
+
flex-grow: 2;
|
|
31
33
|
border-radius: 2px;
|
|
32
34
|
border: none;
|
|
33
35
|
height: 4px;
|
|
@@ -45,3 +47,33 @@
|
|
|
45
47
|
line-height: normal;
|
|
46
48
|
white-space: nowrap;
|
|
47
49
|
}
|
|
50
|
+
|
|
51
|
+
@media only screen and (max-width: 768px) {
|
|
52
|
+
.progressBarWrapper span {
|
|
53
|
+
font-size: 12px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@media only screen and (min-width: 768px) {
|
|
58
|
+
.progressBarWrapper span {
|
|
59
|
+
font-size: 14px;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@media only screen and (min-width: 992px) {
|
|
64
|
+
.progressBarWrapper span {
|
|
65
|
+
font-size: 16px;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media only screen and (min-width: 1200px) {
|
|
70
|
+
.progressBarWrapper span {
|
|
71
|
+
font-size: 18px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media only screen and (min-width: 1600px) {
|
|
76
|
+
.progressBarWrapper span {
|
|
77
|
+
font-size: 21px;
|
|
78
|
+
}
|
|
79
|
+
}
|